Abstact away the filter for the search bar

Author: garronej

stories/ColorHelper/ColorHelper.tsx

@@ -13,6 +13,30 @@ import { useStyles } from "./makeStyles";
 import { ColorDecisionCard } from "./ColorDecisionCard";
 import type { Props as SearchProps } from "./Search";
 
+const colors = Array.from(
+    new Set(
+        colorDecisionAndCorrespondingOption.map(
+            ({ parsedColorDecisionName }) => parsedColorDecisionName.colorName
+        )
+    )
+);
+
+const contextes = Array.from(
+    new Set(
+        colorDecisionAndCorrespondingOption.map(
+            ({ parsedColorDecisionName }) => parsedColorDecisionName.context
+        )
+    )
+);
+
+const usages = Array.from(
+    new Set(
+        colorDecisionAndCorrespondingOption.map(
+            ({ parsedColorDecisionName }) => parsedColorDecisionName.usage
+        )
+    )
+);
+
 const { useDebounce } = createUseDebounce({ "delay": 400 });
 
 const fzf = new Fzf<readonly ColorDecisionAndCorrespondingOption[]>(
@@ -94,10 +118,13 @@ export function ColorHelper() {
                     evtAction={evtSearchAction}
                     onSearchChange={search => setSearch(search)}
                     search={search}
+                    contextes={contextes}
                     context={context}
                     onContextChange={setContext}
+                    colors={colors}
                     color={color}
                     onColorChange={setColor}
+                    usages={usages}
                     usage={usage}
                     onUsageChange={setUsage}
                 />

stories/ColorHelper/Search.tsx

@@ -6,41 +6,21 @@ import { fr } from "../../dist/fr";
 import { NonPostableEvt } from "evt";
 import { useEvt } from "evt/hooks";
 import { Select } from "../../dist/Select";
-import { colorDecisionAndCorrespondingOption } from "../../dist/fr/generatedFromCss/colorDecisionAndCorrespondingOptions";
-
-const colors = Array.from(
-    new Set(
-        colorDecisionAndCorrespondingOption.map(
-            ({ parsedColorDecisionName }) => parsedColorDecisionName.colorName
-        )
-    )
-);
-const contextes = Array.from(
-    new Set(
-        colorDecisionAndCorrespondingOption.map(
-            ({ parsedColorDecisionName }) => parsedColorDecisionName.context
-        )
-    )
-);
-const usages = Array.from(
-    new Set(
-        colorDecisionAndCorrespondingOption.map(
-            ({ parsedColorDecisionName }) => parsedColorDecisionName.usage
-        )
-    )
-);
 
 export type Props = {
     className?: string;
     search: string;
     onSearchChange: (search: string) => void;
     evtAction: NonPostableEvt<"scroll to">;
-    context: typeof contextes[number] | undefined;
-    onContextChange: (context: typeof contextes[number] | undefined) => void;
-    color: typeof colors[number] | undefined;
-    onColorChange: (color: typeof colors[number] | undefined) => void;
-    usage: typeof usages[number] | undefined;
-    onUsageChange: (usage: typeof usages[number] | undefined) => void;
+    contextes: string[];
+    context: string | undefined;
+    onContextChange: (context: string | undefined) => void;
+    colors: string[];
+    color: string | undefined;
+    onColorChange: (color: string | undefined) => void;
+    usages: string[];
+    usage: string | undefined;
+    onUsageChange: (usage: string | undefined) => void;
 };
 
 export function Search(props: Props) {
@@ -49,10 +29,13 @@ export function Search(props: Props) {
         search,
         onSearchChange,
         evtAction,
+        contextes,
         context,
         onContextChange,
+        colors,
         color,
         onColorChange,
+        usages,
         usage,
         onUsageChange
     } = props;