From 85ecfe764876ada6b6cef69357390211adfedc8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gild=C3=A9ric=20Deruette?= <gilderic.deruette@kleegroup.com>
Date: Mon, 15 Dec 2025 19:05:10 +0100
Subject: [PATCH] Add stories for `fieldFor` function with various field types
 and configurations

---
 package-lock.json                             |  2 +
 .../docs/.storybook/custom/css-variables.tsx  | 49 ++++++++---------
 packages/docs/model/forms.stories.tsx         | 52 +++++++++++++++++++
 packages/docs/package.json                    |  5 +-
 4 files changed, 83 insertions(+), 25 deletions(-)
 create mode 100644 packages/docs/model/forms.stories.tsx

diff --git a/package-lock.json b/package-lock.json
index 8a53689f..c6564797 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15550,6 +15550,8 @@
             "dependencies": {
                 "@focus4/collections": "12.7.0",
                 "@focus4/core": "12.7.0",
+                "@focus4/entities": "12.7.0",
+                "@focus4/form-toolbox": "12.7.0",
                 "@focus4/forms": "12.7.0",
                 "@focus4/layout": "12.7.0",
                 "@focus4/stores": "12.7.0",
diff --git a/packages/docs/.storybook/custom/css-variables.tsx b/packages/docs/.storybook/custom/css-variables.tsx
index 494b7a0b..f8f76348 100644
--- a/packages/docs/.storybook/custom/css-variables.tsx
+++ b/packages/docs/.storybook/custom/css-variables.tsx
@@ -20,38 +20,39 @@ export function CssVariables({cssVariables}: {cssVariables?: Record<string, Vari
             return {...obj, [lol[0].trim()]: lol[1].trim()};
         }, {}) as any
     }));
-
     const {global, common, local} = (cssVariables ?? meta.preparedMeta.parameters?.cssVariables ?? {}) as Record<
         string,
         VariableDefinitions
     >;
 
     function getTable(name: string, variables: VariableDefinitions) {
-        const rows = Object.keys(variables).reduce((obj, name) => {
-            const value = getComputedStyle(document.documentElement).getPropertyValue(name);
-            const defaultValue = (dark && variables[name].dark) || variables[name].main;
+        const rows = variables
+            ? Object.keys(variables).reduce((obj, name) => {
+                  const value = getComputedStyle(document.documentElement).getPropertyValue(name);
+                  const defaultValue = (dark && variables[name].dark) || variables[name].main;
 
-            let computedDefaultValue = "";
-            if (ref) {
-                ref.style.setProperty("--defaultValue", defaultValue);
-                computedDefaultValue = getComputedStyle(ref).getPropertyValue("--defaultValue");
-            }
+                  let computedDefaultValue = "";
+                  if (ref) {
+                      ref.style.setProperty("--defaultValue", defaultValue);
+                      computedDefaultValue = getComputedStyle(ref).getPropertyValue("--defaultValue");
+                  }
 
-            return {
-                ...obj,
-                [name]: {
-                    name,
-                    type: {
-                        required:
-                            computedDefaultValue.replaceAll(String.raw`0\.`, ".") !==
-                            value.replaceAll(String.raw`0\.`, ".")
-                    },
-                    table: {type: {summary: value}},
-                    defaultValue: {summary: defaultValue},
-                    control: {type: "text"}
-                }
-            };
-        }, {});
+                  return {
+                      ...obj,
+                      [name]: {
+                          name,
+                          type: {
+                              required:
+                                  computedDefaultValue.replaceAll(String.raw`0\.`, ".") !==
+                                  value.replaceAll(String.raw`0\.`, ".")
+                          },
+                          table: {type: {summary: value}},
+                          defaultValue: {summary: defaultValue},
+                          control: {type: "text"}
+                      }
+                  };
+              }, {})
+            : {};
 
         return Object.keys(rows).length ? (
             <>
diff --git a/packages/docs/model/forms.stories.tsx b/packages/docs/model/forms.stories.tsx
new file mode 100644
index 00000000..d46658ff
--- /dev/null
+++ b/packages/docs/model/forms.stories.tsx
@@ -0,0 +1,52 @@
+import type {Meta} from "@storybook/react";
+import type {StoryObj} from "@storybook/react-vite";
+import {observer} from "mobx-react";
+import z from "zod";
+
+import {e, entity} from "@focus4/entities";
+import {domain} from "@focus4/form-toolbox";
+import {fieldFor, useFormNode} from "@focus4/forms";
+import {makeEntityStore} from "@focus4/stores";
+
+const LIBELLE = domain(z.string());
+
+// Entity pour la story par défaut
+const simpleStore = makeEntityStore({
+    simple: entity({
+        name: e.field(LIBELLE, f => f.label("Nom").defaultValue("Georges"))
+    })
+});
+
+// ============================================
+// Composants pour les stories
+// ============================================
+
+const SimpleField = observer(() => {
+    const formNode = useFormNode(simpleStore.simple, f => f.edit(true));
+    return fieldFor(formNode.name);
+});
+
+const meta = {
+    title: "Modèle métier/Créer un formulaire",
+    component: SimpleField
+} satisfies Meta<typeof SimpleField>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// Stories
+// ============================================
+
+/**
+ * Exemple par défaut d'un champ texte simple en mode édition.
+ */
+export const Default: Story = {
+    tags: ["autodocs"],
+    render: () => {
+        const formNode = useFormNode(simpleStore.simple, f => f.edit(true));
+        return fieldFor(formNode.name);
+    }
+};
+
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 198ce7cc..bcd1f105 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -15,6 +15,8 @@
         "@focus4/collections": "12.7.0",
         "@focus4/core": "12.7.0",
         "@focus4/forms": "12.7.0",
+        "@focus4/form-toolbox": "12.7.0",
+        "@focus4/entities": "12.7.0",
         "@focus4/layout": "12.7.0",
         "@focus4/stores": "12.7.0",
         "@focus4/styling": "12.7.0",
@@ -30,4 +32,5 @@
         "storybook": "10.1.9",
         "storybook-react-i18next": "10.0.1"
     }
-}
\ No newline at end of file
+}
+