Fin docs toolbox + fixes usage direct font icon custom

klee-contrib · Jan 27, 2024 · 9cec253 · 9cec253
1 parent 9315d7a
commit 9cec253
Show file tree

Hide file tree

Showing 62 changed files with 437 additions and 100 deletions.
diff --git a/packages/collections/src/list/shared.tsx b/packages/collections/src/list/shared.tsx
@@ -42,7 +42,7 @@ export function DefaultAddItemComponent({addItemHandler, i18nPrefix = "focus", m
     if (mode === "mosaic") {
         return (
             <div className={theme.add()} onClick={addItemHandler}>
-                <FontIcon>{{i18nKey: `${i18nPrefix}.icons.list.add`}}</FontIcon>
+                <FontIcon icon={{i18nKey: `${i18nPrefix}.icons.list.add`}} />
                 {i18next.t(`${i18nPrefix}.list.add`)}
             </div>
         );

diff --git a/packages/collections/src/list/table/header.tsx b/packages/collections/src/list/table/header.tsx
@@ -45,13 +45,13 @@ export function TableHeader<T>({
                 }
             >
                 {store && sortKey ? (
-                    <FontIcon>
-                        {{
+                    <FontIcon
+                        icon={{
                             i18nKey: `${i18nPrefix}.icons.table.sort${
                                 store.sortBy !== sortKey || store.sortAsc ? "Asc" : "Desc"
                             }`
                         }}
-                    </FontIcon>
+                    />
                 ) : null}
                 <span className={theme.headerText()}>{i18next.t(title)}</span>
             </div>

diff --git a/packages/collections/src/search/search-bar.tsx b/packages/collections/src/search/search-bar.tsx
@@ -194,9 +194,7 @@ export function SearchBar<T, C>({
         <div data-focus="search-bar" style={{position: "relative"}}>
             <div className={theme.bar({error: !!state.error})}>
                 <div className={theme.input()}>
-                    <FontIcon className={theme.searchIcon()}>
-                        {{i18nKey: `${i18nPrefix}.icons.searchBar.search`}}
-                    </FontIcon>
+                    <FontIcon className={theme.searchIcon()} icon={{i18nKey: `${i18nPrefix}.icons.searchBar.search`}} />
                     <input
                         ref={input}
                         autoComplete={config.autocompleteOffValue}

diff --git a/packages/docs/.storybook/main.ts b/packages/docs/.storybook/main.ts
@@ -1,17 +1,19 @@
 import type {StorybookConfig} from "@storybook/react-vite";
+import {mergeConfig} from "vite";
 
 export default {
-    stories: ["../**/*.stories.tsx", "../**/*.mdx"],
+    stories: ["../**/*.@(stories.tsx|mdx)"],
     addons: ["@storybook/addon-essentials", "storybook-dark-mode"],
     staticDirs: ["./public"],
     framework: {
         name: "@storybook/react-vite",
         options: {}
     },
     docs: {
-        autodocs: true
+        autodocs: "tag"
     },
     typescript: {
         reactDocgen: "react-docgen-typescript"
-    }
+    },
+    viteFinal: config => mergeConfig(config, {esbuild: {minifyIdentifiers: false}})
 } satisfies StorybookConfig;
diff --git a/packages/docs/.storybook/preview-head.html b/packages/docs/.storybook/preview-head.html
@@ -5,3 +5,5 @@
     rel="stylesheet"
 />
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet" />
diff --git a/packages/docs/.storybook/preview.tsx b/packages/docs/.storybook/preview.tsx
@@ -2,7 +2,8 @@ import "@focus4/styling/lib/focus4.styling.css";
 import "@focus4/toolbox/lib/focus4.toolbox.css";
 import "./preview.css";
 
-import {translation} from "@focus4/forms";
+import {translation as collections} from "@focus4/collections";
+import {translation as forms} from "@focus4/forms";
 import {colorScheme, initColorScheme} from "@focus4/styling";
 import {DocsContainer as BaseContainer} from "@storybook/blocks";
 import type {Preview} from "@storybook/react";
@@ -19,7 +20,9 @@ initColorScheme(true);
 
 i18next.init({
     lng: "fr",
-    resources: {fr: {translation: {focus: {...translation.fr, icons: translation.icons}}}},
+    resources: {
+        fr: {translation: {focus: {...collections.fr, ...forms.fr, icons: {...collections.icons, ...forms.icons}}}}
+    },
     nsSeparator: "🤷‍♂️"
 });
 
@@ -30,12 +33,7 @@ function DocsContainer(props) {
 
 export default {
     parameters: {
-        actions: {argTypesRegex: "^on[A-Z].*"},
         controls: {
-            matchers: {
-                color: /(background|color)$/i,
-                date: /Date$/i
-            },
             sort: "requiredFirst"
         },
         docs: {
@@ -48,6 +46,7 @@ export default {
                     "Les bases",
                     "Modèle métier",
                     "Composants",
+                    ["Composants de base", "@focus4∕toolbox", "@focus4∕forms"],
                     "Routage",
                     "Mise en page",
                     "Listes et recherche",

diff --git a/packages/docs/components/components.mdx b/packages/docs/components/components.mdx
@@ -0,0 +1,24 @@
+import {Meta} from "@storybook/blocks";
+
+<Meta title="Composants/Composants de base" />
+
+# Composants de base
+
+Focus met à disposition une série de composants de base qui implémentent [Material Design 3](https://m3.material.io/components) (avec quelques adaptations).
+
+Ces composants cherchent à couvrir les besoins les plus standards d'une application, tout en offrant un niveau de personnalisation élevé pour couvrir un
+maximum de cas.
+
+-   Le module `@focus4/toolbox` contient les versions de base de ces composants, qui sont directement repris de la spécification Material Design.
+-   Le module `@focus4/forms` contient :
+    -   Quelques "surcharges" de ces composants pour pouvoir s'interfacer directement avec un formulaire (`Input` pour `TextField` et `Select` pour
+        `Dropdown` par exemple)
+    -   Des composants un peu plus avancés qui combinent des composants de base pour réaliser des saisies plus complexes (comme `InputDate` ou
+        `SelectChips`), ou simplifier des cas d'usage courants (comme `BooleanRadio` ou `SelectCheckbox`). Ces composants n'existent pas en tant que
+        tels dans la spécification Material Design.
+    -   Les composants d'affichage pour les formulaires (`Display`, `Label` et `Panel`)
+
+**Un composant de saisie d'un domaine pour un champ doit venir du module `@focus4/forms`**, car il doit respecter le contrat d'interface correspondant du
+domaine (`BaseInputProps` / `BaseSelectProps` / `BaseAutocompleteProps`). Si vous voulez construire votre propre composant de saisie, vous pouvez
+reproduire ce que font les composants de `@focus4/forms`, en particulier la gestion du `type`, du `onChange`, de l'`error` et du `supportingText`. Ce
+mécanisme a vocation à être amélioré dans le futur, et est suivi par l'[issue #192](https://github.com/klee-contrib/focus4/issues/192) sur Github.
diff --git a/packages/docs/components/forms/AutocompleteChips.stories.tsx b/packages/docs/components/forms/AutocompleteChips.stories.tsx
@@ -7,6 +7,7 @@ import type {Meta, StoryObj} from "@storybook/react";
 export default {
     ...AutocompleteChipsMeta,
     title: "Composants/@focus4∕forms/AutocompleteChips",
+    tags: ["autodocs"],
     args: {type: "string"}
 } as Meta<typeof AutocompleteChips>;
 

diff --git a/packages/docs/components/forms/AutocompleteSearch.stories.tsx b/packages/docs/components/forms/AutocompleteSearch.stories.tsx
@@ -7,6 +7,7 @@ import type {Meta, StoryObj} from "@storybook/react";
 export default {
     ...AutocompleteSearchMeta,
     title: "Composants/@focus4∕forms/AutocompleteSearch",
+    tags: ["autodocs"],
     args: {type: "string"}
 } as Meta<typeof AutocompleteSearch>;
 

diff --git a/packages/docs/components/forms/BooleanRadio.stories.tsx b/packages/docs/components/forms/BooleanRadio.stories.tsx
@@ -7,6 +7,7 @@ import type {Meta, StoryObj} from "@storybook/react";
 export default {
     ...BooleanRadioMeta,
     title: "Composants/@focus4∕forms/BooleanRadio",
+    tags: ["autodocs"],
     args: {type: "boolean"}
 } as Meta<typeof BooleanRadio>;
 

diff --git a/packages/docs/components/forms/Display.stories.tsx b/packages/docs/components/forms/Display.stories.tsx
@@ -7,6 +7,7 @@ import type {Meta, StoryObj} from "@storybook/react";
 export default {
     ...DisplayMeta,
     title: "Composants/@focus4∕forms/Display",
+    tags: ["autodocs"],
     args: {type: "string", value: "Valeur"}
 } as Meta<typeof Display>;
 

diff --git a/packages/docs/components/forms/Input.stories.tsx b/packages/docs/components/forms/Input.stories.tsx
@@ -7,6 +7,7 @@ import type {Meta, StoryObj} from "@storybook/react";
 export default {
     ...InputMeta,
     title: "Composants/@focus4∕forms/Input",
+    tags: ["autodocs"],
     args: {type: "string"}
 } as Meta<typeof Input>;
 

diff --git a/packages/docs/components/forms/InputDate.stories.tsx b/packages/docs/components/forms/InputDate.stories.tsx
@@ -7,6 +7,7 @@ import type {Meta, StoryObj} from "@storybook/react";
 export default {
     ...InputDateMeta,
     title: "Composants/@focus4∕forms/InputDate",
+    tags: ["autodocs"],
     args: {type: "string"}
 } as Meta<typeof InputDate>;
 

diff --git a/packages/docs/components/forms/Label.stories.tsx b/packages/docs/components/forms/Label.stories.tsx
@@ -7,6 +7,7 @@ import type {Meta, StoryObj} from "@storybook/react";
 export default {
     ...LabelMeta,
     title: "Composants/@focus4∕forms/Label",
+    tags: ["autodocs"],
     args: {label: "Label"}
 } as Meta<typeof Label>;
 

diff --git a/packages/docs/components/forms/Panel.stories.tsx b/packages/docs/components/forms/Panel.stories.tsx
@@ -6,7 +6,8 @@ import type {Meta, StoryObj} from "@storybook/react";
 
 export default {
     ...PanelMeta,
-    title: "Composants/@focus4∕forms/Panel"
+    title: "Composants/@focus4∕forms/Panel",
+    tags: ["autodocs"]
 } as Meta<typeof Panel>;
 
 export const Showcase: StoryObj<typeof Panel> = {};
diff --git a/packages/docs/components/forms/PanelButtons.stories.tsx b/packages/docs/components/forms/PanelButtons.stories.tsx
@@ -6,7 +6,8 @@ import type {Meta, StoryObj} from "@storybook/react";
 
 export default {
     ...PanelButtonsMeta,
-    title: "Composants/@focus4∕forms/PanelButtons"
+    title: "Composants/@focus4∕forms/PanelButtons",
+    tags: ["autodocs"]
 } as Meta<typeof PanelButtons>;
 
 export const Showcase: StoryObj<typeof PanelButtons> = {};
diff --git a/packages/docs/components/forms/Select.stories.tsx b/packages/docs/components/forms/Select.stories.tsx
@@ -8,6 +8,7 @@ import type {Meta, StoryObj} from "@storybook/react";
 export default {
     ...SelectMeta,
     title: "Composants/@focus4∕forms/Select",
+    tags: ["autodocs"],
     args: {
         type: "string",
         values: makeReferenceList([

diff --git a/packages/docs/components/forms/SelectAutocomplete.stories.tsx b/packages/docs/components/forms/SelectAutocomplete.stories.tsx
@@ -8,6 +8,7 @@ import type {Meta, StoryObj} from "@storybook/react";
 export default {
     ...SelectAutocompleteMeta,
     title: "Composants/@focus4∕forms/SelectAutocomplete",
+    tags: ["autodocs"],
     args: {
         type: "string-array",
         values: makeReferenceList([

diff --git a/packages/docs/components/forms/SelectCheckbox.stories.tsx b/packages/docs/components/forms/SelectCheckbox.stories.tsx
@@ -8,6 +8,7 @@ import type {Meta, StoryObj} from "@storybook/react";
 export default {
     ...SelectCheckboxMeta,
     title: "Composants/@focus4∕forms/SelectCheckbox",
+    tags: ["autodocs"],
     args: {
         type: "string-array",
         values: makeReferenceList([

diff --git a/packages/docs/components/forms/SelectChips.stories.tsx b/packages/docs/components/forms/SelectChips.stories.tsx
@@ -8,6 +8,7 @@ import type {Meta, StoryObj} from "@storybook/react";
 export default {
     ...SelectChipsMeta,
     title: "Composants/@focus4∕forms/SelectChips",
+    tags: ["autodocs"],
     args: {
         type: "string-array",
         values: makeReferenceList([

diff --git a/packages/docs/components/forms/SelectRadio.stories.tsx b/packages/docs/components/forms/SelectRadio.stories.tsx
@@ -8,6 +8,7 @@ import type {Meta, StoryObj} from "@storybook/react";
 export default {
     ...SelectRadioMeta,
     title: "Composants/@focus4∕forms/SelectRadio",
+    tags: ["autodocs"],
     args: {
         type: "string",
         values: makeReferenceList([

diff --git a/packages/docs/components/toolbox/Autocomplete.stories.tsx b/packages/docs/components/toolbox/Autocomplete.stories.tsx
@@ -1,3 +1,5 @@
+import {useState} from "react";
+
 import {Autocomplete} from "@focus4/toolbox";
 
 import {AutocompleteMeta} from "./metas/autocomplete";
@@ -7,6 +9,7 @@ import type {Meta, StoryObj} from "@storybook/react";
 export default {
     ...AutocompleteMeta,
     title: "Composants/@focus4∕toolbox/Autocomplete",
+    tags: ["autodocs"],
     args: {
         values: [
             {key: "1", label: "Option 1"},
@@ -15,4 +18,28 @@ export default {
     }
 } as Meta<typeof Autocomplete>;
 
-export const Showcase: StoryObj<typeof Autocomplete> = {};
+export const Showcase: StoryObj<typeof Autocomplete> = {
+    render(props) {
+        const [selected, setSelected] = useState<string>();
+        const [selected2, setSelected2] = useState<string>();
+        return (
+            <div className="stack">
+                <Autocomplete
+                    icon="search"
+                    trailing={{icon: "clear", tooltip: "Vider le champ", onClick: () => setSelected(undefined)}}
+                    value={selected}
+                    {...props}
+                    onChange={setSelected}
+                />
+
+                <Autocomplete
+                    allowUnmatched
+                    supportingText="Cet autocomplete autorise la sélection de valeurs supplémentaires"
+                    value={selected2}
+                    {...props}
+                    onChange={setSelected2}
+                />
+            </div>
+        );
+    }
+};
diff --git a/packages/docs/components/toolbox/Button.stories.tsx b/packages/docs/components/toolbox/Button.stories.tsx
@@ -6,6 +6,7 @@ import type {Meta, StoryObj} from "@storybook/react";
 export default {
     ...ButtonMeta,
     title: "Composants/@focus4∕toolbox/Button",
+    tags: ["autodocs"],
     args: {
         label: "Button"
     }

diff --git a/packages/docs/components/toolbox/Calendar.stories.tsx b/packages/docs/components/toolbox/Calendar.stories.tsx
@@ -8,7 +8,8 @@ import type {Meta, StoryObj} from "@storybook/react";
 
 export default {
     ...CalendarMeta,
-    title: "Composants/@focus4∕toolbox/Calendar"
+    title: "Composants/@focus4∕toolbox/Calendar",
+    tags: ["autodocs"]
 } as Meta<typeof Calendar>;
 
 export const Showcase: StoryObj<typeof Calendar> = {

diff --git a/packages/docs/components/toolbox/Checkbox.stories.tsx b/packages/docs/components/toolbox/Checkbox.stories.tsx
@@ -8,7 +8,8 @@ import type {Meta, StoryObj} from "@storybook/react";
 
 export default {
     ...CheckboxMeta,
-    title: "Composants/@focus4∕toolbox/Checkbox"
+    title: "Composants/@focus4∕toolbox/Checkbox",
+    tags: ["autodocs"]
 } as Meta<typeof Checkbox>;
 
 export const Showcase: StoryObj<typeof Checkbox> = {

diff --git a/packages/docs/components/toolbox/Chip.stories.tsx b/packages/docs/components/toolbox/Chip.stories.tsx
@@ -7,6 +7,7 @@ import type {Meta, StoryObj} from "@storybook/react";
 export default {
     ...ChipMeta,
     title: "Composants/@focus4∕toolbox/Chip",
+    tags: ["autodocs"],
     args: {
         label: "Chip"
     }
@@ -16,10 +17,30 @@ export const Showcase: StoryObj<typeof Chip> = {
     render(props) {
         return (
             <div className="container">
-                <Chip {...props} onClick={undefined} onDeleteClick={undefined} />
-                <Chip color="primary" {...props} onClick={undefined} />
-                <Chip color="accent" elevated {...props} onDeleteClick={undefined} />
-                <Chip color="light" icon="add" {...props} onDeleteClick={undefined} />
+                <Chip {...props} />
+                <Chip
+                    color="primary"
+                    onDeleteClick={() => {
+                        /* */
+                    }}
+                    {...props}
+                />
+                <Chip
+                    color="accent"
+                    elevated
+                    onClick={() => {
+                        /* */
+                    }}
+                    {...props}
+                />
+                <Chip
+                    color="light"
+                    icon="add"
+                    onClick={() => {
+                        /* */
+                    }}
+                    {...props}
+                />
             </div>
         );
     }

diff --git a/packages/docs/components/toolbox/CircularProgressIndicator.stories.tsx b/packages/docs/components/toolbox/CircularProgressIndicator.stories.tsx
@@ -7,6 +7,7 @@ import type {Meta, StoryObj} from "@storybook/react";
 export default {
     ...CircularProgressIndicatorMeta,
     title: "Composants/@focus4∕toolbox/CircularProgressIndicator",
+    tags: ["autodocs"],
     args: {
         value: 55
     }

diff --git a/packages/docs/components/toolbox/Dropdown.stories.tsx b/packages/docs/components/toolbox/Dropdown.stories.tsx
@@ -9,6 +9,7 @@ import type {Meta, StoryObj} from "@storybook/react";
 export default {
     ...DropdownMeta,
     title: "Composants/@focus4∕toolbox/Dropdown",
+    tags: ["autodocs"],
     args: {
         values: [
             {key: "1", label: "Option 1"},

diff --git a/packages/docs/components/toolbox/FloatingActionButton.stories.tsx b/packages/docs/components/toolbox/FloatingActionButton.stories.tsx
@@ -9,6 +9,7 @@ import type {Meta, StoryObj} from "@storybook/react";
 export default {
     ...FloatingActionButtonMeta,
     title: "Composants/@focus4∕toolbox/FloatingActionButton",
+    tags: ["autodocs"],
     args: {
         icon: "add",
         label: "Ajouter"