Improve the documentation of the alert

Author: garronej

docs/Alert.stories.tsx

@@ -1,31 +1,51 @@
 import { Alert } from "../dist/Alert";
 import type { AlertProps } from "../dist/Alert";
 import { sectionName } from "./sectionName";
-import { getStoryFactory } from "./getStory";
+import { getStoryFactory, logCallbacks } from "./getStory";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
 
-const severities = ["success", "warning", "info", "error"] as const;
-
-assert<Equals<typeof severities[number], AlertProps["severity"]>>();
-
 const { meta, getStory } = getStoryFactory({
     sectionName,
     "wrappedComponent": { Alert },
     "argTypes": {
         "severity": {
-            "options": severities,
+            "options": (() => {
+                const severities = ["success", "warning", "info", "error"] as const;
+
+                assert<Equals<typeof severities[number], AlertProps["severity"]>>();
+
+                return severities;
+            })(),
             "control": { "type": "radio" }
+        },
+        "isClosable": {
+            "description": "If the modal should have a close button"
+        },
+        "onClose": {
+            "description": "Called when the user clicks the close button"
+        },
+        "isClosed": {
+            "description": [
+                "If specified the `<Alert />` is in [controlled mode](https://reactjs.org/docs/forms.html#controlled-components)",
+                "this means that when the close button is clicked",
+                "the `onClose()` callback will be called but you are responsible",
+                "for setting `isClosed` to `false`, the `<Alert />` wont close itself."
+            ].join(" "),
+            "control": { "type": null }
         }
     }
 });
 
 export default meta;
 
-export const Success = getStory({
+export const Default = getStory({
     "severity": "success",
     "title": "Message successfully sent",
-    "description": "Everything went well"
+    "description": "Everything went well",
+    "isClosable": true,
+    "isClosed": undefined,
+    ...logCallbacks(["onClose"])
 });
 
 export const Small = getStory({

docs/getStory.tsx

@@ -23,11 +23,16 @@ export function getStoryFactory<Props extends Record<string, any>>(params: {
         Props & {
             darkMode: boolean;
             containerWidth: number;
+            isFirstStory: boolean;
         }
-    > = ({ darkMode, containerWidth, ...props }) => {
+    > = ({ darkMode, containerWidth, isFirstStory, ...props }) => {
         const { setIsDark } = useIsDark();
 
         useEffect(() => {
+            if (!isFirstStory) {
+                return;
+            }
+
             setIsDark(darkMode);
         }, [darkMode]);
 
@@ -40,29 +45,54 @@ export function getStoryFactory<Props extends Record<string, any>>(params: {
         );
     };
 
+    let isFirstStory = true;
+
     function getStory(props: Props): typeof Template {
         const out = Template.bind({});
 
         out.args = {
             "darkMode": window.matchMedia("(prefers-color-scheme: dark)").matches,
             "containerWidth": defaultContainerWidth ?? 0,
+            isFirstStory,
             ...props
         };
 
+        isFirstStory = false;
+
+        out.parameters = {
+            docs: {
+                description: {
+                    story: "Some story **markdown**"
+                }
+            }
+        };
+
         return out;
     }
 
     return {
         "meta": id<Meta>({
             "title": `${sectionName}/${symToStr(wrappedComponent)}`,
             "component": Component,
+            parameters: {
+                docs: {
+                    description: {
+                        component: "Some component _markdown_"
+                    }
+                }
+            },
             "argTypes": {
                 "containerWidth": {
                     "control": {
                         "type": "range",
                         "min": 0,
                         "max": 1920,
-                        "step": 1
+                        "step": 10
+                    }
+                },
+                "isFirstStory": {
+                    "table": {
+                        "disable": true
                     }
                 },
                 ...argTypes

package.json

@@ -21,7 +21,7 @@
         "format": "yarn _format --write",
         "format:check": "yarn _format --list-different",
         "grant_exec_perms": "node dist/bin/tools/grant_exec_perms",
-        "storybook": "yarn build && ((tsc -w -p src) & start-storybook -p 6006)",
+        "storybook": "yarn build && start-storybook -p 6006",
         "build-storybook": "yarn build && build-storybook"
     },
     "bin": {

src/lib/start.ts

@@ -23,7 +23,9 @@ export async function startDsfrReact(params: Params) {
         ].join(" ")
     );
 
-    assert(!isStarted, `${symToStr({ startDsfrReact })}() should be called only once`);
+    if (isStarted) {
+        return;
+    }
 
     isStarted = true;