feat(website): require one UI Framework

vikejs · Sep 20, 2024 · 36e12dc · 36e12dc
1 parent 66de945
commit 36e12dc
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 8 deletions.
diff --git a/packages/features/src/categories.ts b/packages/features/src/categories.ts
@@ -6,13 +6,15 @@ export const categories = [
     label: "Frontend Framework",
     group: categoriesGroups.Frontend,
     description: `Flexible, robust, community-driven, and fast Vite-based frontend framework.`,
+    required: true,
   },
   {
     label: "UI Framework",
     group: categoriesGroups.Frontend,
     description: `It’s recommended to choose a frontend lib to kickstart a new Vike project,
 as they each come with a wide range of integrations. You can at any time eject and take control over integration code
 so that it doesn’t get in your way.`,
+    required: true,
   },
   {
     label: "CSS",

diff --git a/packages/features/src/features.ts b/packages/features/src/features.ts
@@ -36,6 +36,7 @@ export const features = [
     spectrum: "beaten_path",
     tagline: "The library for web and native user interfaces",
     repo: "facebook/react",
+    selected: true,
     links: [
       {
         label: "Learn",

diff --git a/packages/features/src/types.ts b/packages/features/src/types.ts
@@ -18,6 +18,7 @@ export interface Feature<C = string> {
   invisibleCli?: boolean;
   // if true, cannot be toggled off (implies selected by default, otherwise use `disabled`)
   readonly?: boolean;
+  selected?: boolean;
 }
 
 export interface FeatureLink {
@@ -30,5 +31,6 @@ export interface Category {
   group: categoriesGroups;
   // like <select multiple/>
   multiple?: boolean;
+  required?: boolean;
   description?: string;
 }
diff --git a/website/components/Features.tsx b/website/components/Features.tsx
@@ -5,7 +5,7 @@ import { IconAlembic, IconTrainTrack } from "#components/Icons";
 import { ShieldBadge } from "#components/ShieldBadge";
 import { StoreContext } from "#components/Store.js";
 import { EnrichedTooltip } from "#components/Tooltip";
-import { createMemo, createSignal, For, Match, Show, Switch, useContext, type Accessor, type JSX } from "solid-js";
+import { type Accessor, createMemo, createSignal, For, type JSX, Match, Show, Switch, useContext } from "solid-js";
 import { Motion } from "solid-motionone";
 import type { Feature } from "../types.js";
 
@@ -23,7 +23,6 @@ export default function Features() {
             <FormControl
               label={group}
               flipLabel={group}
-              //FIXME: features={fs()}
               categories={currentCategories()}
               class="w-full sm:w-auto rounded-md"
             >
@@ -46,7 +45,12 @@ function CategoryGroup(props: Category) {
 
   return (
     <>
-      <div class="divider divider-start font-semibold">{props.label}</div>
+      <div class="divider divider-start font-semibold">
+        <span>{props.label}</span>
+        <Show when={props.required}>
+          <span class="-ml-1 text-xs opacity-60">(required)</span>
+        </Show>
+      </div>
       <div class="flex flex-col lg:flex-row relative">
         <div class="basis-1/4 w-full gap-y-2">
           <For each={fs()}>

diff --git a/website/components/FormControl.tsx b/website/components/FormControl.tsx
@@ -59,7 +59,12 @@ export function FormControl(props: {
 
                 return (
                   <div class="flex flex-col items-baseline">
-                    <div class="divider divider-start font-semibold">{category.label}</div>
+                    <div class="divider divider-start font-semibold">
+                      <span>{category.label}</span>
+                      <Show when={category.required}>
+                        <span class="-ml-1 text-xs opacity-60">(required)</span>
+                      </Show>
+                    </div>
                     <div class="flex flex-row flex-wrap gap-2">
                       <For each={fs()}>
                         {(feature) => (

diff --git a/website/components/Store.tsx b/website/components/Store.tsx
@@ -9,19 +9,19 @@ function initStore() {
   const featuresInitialState: Feature[] = features.map((f: Feature) => ({
     ...f,
     alt: f.disabled ? "Coming soon" : undefined,
-    selected: Boolean(f.readonly),
+    selected: Boolean(f.selected ?? f.readonly),
   }));
 
   const [currentFeatures, setCurrentFeatures] = createStore<Feature[]>(featuresInitialState);
 
   function selectFeature(k: CategoryLabels, flag: string, selected: boolean) {
-    const multiple = (categories as ReadonlyArray<Category>).find((c) => c.label === k)?.multiple;
+    const category = (categories as ReadonlyArray<Category>).find((c) => c.label === k);
 
-    if (!multiple) {
+    if (!category?.multiple) {
       batch(() => setCurrentFeatures((f) => f.category === k && !f.readonly, "selected", false));
     }
 
-    setCurrentFeatures((f) => f.flag === flag, "selected", selected);
+    setCurrentFeatures((f) => f.flag === flag, "selected", category?.required ?? selected);
   }
 
   const selectedFeatures = createMemo<Feature[]>(() => currentFeatures.filter((f) => f.selected));