Feat: Implement truncation warning for large numeric input values

.github/workflows/ci.yaml

@@ -1,13 +1,9 @@
 name: ci
 on:
     push:
-        branches:
-            - main
-            - v1
+        branches: ["main", "v1"]
     pull_request:
-        branches:
-            - main
-            - v1
+        branches: ["main", "v1"]
 
 jobs:
     test_lint:
@@ -38,6 +34,7 @@ jobs:
             - uses: bahmutov/npm-install@v1
               env:
                   XDG_CACHE_HOME: "/home/runner/.cache/yarn"
+            - run: yarn test
             - run: yarn build
             - name: Build Storybook
               run: yarn run build-storybook
@@ -114,7 +111,7 @@ jobs:
             is_upgraded_version: ${{ steps.step1.outputs.is_upgraded_version }}
             is_pre_release: ${{steps.step1.outputs.is_pre_release }}
         steps:
-            - uses: garronej/[email protected].2
+            - uses: garronej/[email protected].5
               id: step1
               with:
                   action_name: is_package_json_version_upgraded
@@ -158,10 +155,10 @@ jobs:
               env:
                   XDG_CACHE_HOME: "/home/runner/.cache/yarn"
             - run: yarn build
-            - run: npx -y -p denoify@1.3.0 enable_short_npm_import_path
+            - run: npx -y -p denoify@1.6.13 enable_short_npm_import_path
               env:
                   DRY_RUN: "0"
-            - uses: garronej/[email protected].2
+            - uses: garronej/[email protected].5
               with:
                   action_name: remove_dark_mode_specific_images_from_readme
             - name: Publishing on NPM

.storybook/DocsContainer.tsx

@@ -1,26 +1,27 @@
 import { useIsDark } from "@codegouvfr/react-dsfr/useIsDark";
-import { DocsContainer as DocsContainer_base } from "@storybook/addon-docs";
+import { DocsContainer as DocsContainer_base } from "@storybook/blocks";
 import React, { ComponentProps, useEffect } from "react";
-import { useDarkMode } from "storybook-dark-mode";
 import { darkTheme, lightTheme } from "./customTheme";
+import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
+
+import { addons } from "@storybook/preview-api";
+const channel = addons.getChannel();
 
 type Props = ComponentProps<typeof DocsContainer_base>;
 
 export function DocsContainer(props: Props) {
     const { children, context } = props;
-    const isStorybookUiDark = useDarkMode();
-    const { setIsDark } = useIsDark();
 
-    useEffect(
-        //Docs Page and storybookUI must have same theme
-        () => {
-            setIsDark(isStorybookUiDark);
-        },
-        [isStorybookUiDark],
-    );
+    const { setIsDark, isDark } = useIsDark();
+
+    useEffect(() => {
+        // listen to DARK_MODE event
+        channel.on(DARK_MODE_EVENT_NAME, setIsDark);
+        return () => channel.off(DARK_MODE_EVENT_NAME, setIsDark);
+    }, [channel, setIsDark]);
 
     return (
-        <DocsContainer_base context={context} theme={isStorybookUiDark ? darkTheme : lightTheme}>
+        <DocsContainer_base context={context} theme={isDark ? darkTheme : lightTheme}>
             {children}
         </DocsContainer_base>
     );

.storybook/main.ts

@@ -1,27 +1,34 @@
 import type { StorybookConfig } from "@storybook/react-vite";
-import { mergeConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 export default {
     stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+
     addons: [
         "@storybook/addon-links",
         "@storybook/addon-essentials",
         "@storybook/addon-interactions",
         "storybook-dark-mode",
         "@storybook/addon-a11y",
     ],
+
     docs: {
-        //👇 See the table below for the list of supported options
-        autodocs: true,
         defaultName: "Documentation",
     },
+
     framework: {
         name: "@storybook/react-vite",
         options: {},
     },
+
+    core: {
+        builder: "@storybook/builder-vite",
+    },
     staticDirs: ["./static"],
+
     async viteFinal(config) {
+        const { mergeConfig } = await import("vite");
+
         // Merge custom configuration into the default config
         return mergeConfig(config, {
             plugins: [tsconfigPaths()],

.storybook/manager-head.html

@@ -1,115 +1,12 @@
-<link rel="apple-touch-icon" href="%PUBLIC_URL%/dsfr/favicon/apple-touch-icon.png" />
-<link rel="icon" href="%PUBLIC_URL%/dsfr/favicon/favicon.svg" type="image/svg+xml" />
-<link rel="shortcut icon" href="%PUBLIC_URL%/dsfr/favicon/favicon.ico" type="image/x-icon" />
-<link
-    rel="manifest"
-    href="%PUBLIC_URL%/dsfr/favicon/manifest.webmanifest"
-    crossorigin="use-credentials"
-/>
+<link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon/apple-touch-icon.png" />
+<link rel="icon" href="%PUBLIC_URL%/favicon/favicon.svg" type="image/svg+xml" />
+<link rel="shortcut icon" href="%PUBLIC_URL%/favicon/favicon.ico" type="image/x-icon" />
+<link rel="manifest" href="%PUBLIC_URL%/favicon/manifest.webmanifest" crossorigin="use-credentials" />
+
+<link rel="stylesheet" href="%PUBLIC_URL%/fonts/index.css" />
 <!-- Meta tags generated by metatags.io -->
 <!-- Primary Meta Tags -->
 <title>Lunatic DSFR</title>
 <meta name="title" content="lunatic-dsfr components" />
 <meta name="description" content="@inseefr/lunatic-dsfr components" />
 
-<style>
-    @font-face {
-        font-family: Marianne;
-        src:
-            url("./dsfr/fonts/Marianne-Light.woff2") format("woff2"),
-            url("./dsfr/fonts/Marianne-Light.woff") format("woff");
-        font-weight: 300;
-        font-style: normal;
-        font-display: swap;
-    }
-
-    @font-face {
-        font-family: Marianne;
-        src:
-            url("./dsfr/fonts/Marianne-Light_Italic.woff2") format("woff2"),
-            url("./dsfr/fonts/Marianne-Light_Italic.woff") format("woff");
-        font-weight: 300;
-        font-style: italic;
-        font-display: swap;
-    }
-
-    @font-face {
-        font-family: Marianne;
-        src:
-            url("./dsfr/fonts/Marianne-Regular.woff2") format("woff2"),
-            url("./dsfr/fonts/Marianne-Regular.woff") format("woff");
-        font-weight: 400;
-        font-style: normal;
-        font-display: swap;
-    }
-
-    @font-face {
-        font-family: Marianne;
-        src:
-            url("./dsfr/fonts/Marianne-Regular_Italic.woff2") format("woff2"),
-            url("./dsfr/fonts/Marianne-Regular_Italic.woff") format("woff");
-        font-weight: 400;
-        font-style: italic;
-        font-display: swap;
-    }
-
-    @font-face {
-        font-family: Marianne;
-        src:
-            url("./dsfr/fonts/Marianne-Medium.woff2") format("woff2"),
-            url("./dsfr/fonts/Marianne-Medium.woff") format("woff");
-        font-weight: 500;
-        font-style: normal;
-        font-display: swap;
-    }
-
-    @font-face {
-        font-family: Marianne;
-        src:
-            url("./dsfr/fonts/Marianne-Medium_Italic.woff2") format("woff2"),
-            url("./dsfr/fonts/Marianne-Medium_Italic.woff") format("woff");
-        font-weight: 500;
-        font-style: italic;
-        font-display: swap;
-    }
-
-    @font-face {
-        font-family: Marianne;
-        src:
-            url("./dsfr/fonts/Marianne-Bold.woff2") format("woff2"),
-            url("./dsfr/fonts/Marianne-Bold.woff") format("woff");
-        font-weight: 700;
-        font-style: normal;
-        font-display: swap;
-    }
-
-    @font-face {
-        font-family: Marianne;
-        src:
-            url("./dsfr/fonts/Marianne-Bold_Italic.woff2") format("woff2"),
-            url("./dsfr/fonts/Marianne-Bold_Italic.woff") format("woff");
-        font-weight: 700;
-        font-style: italic;
-        font-display: swap;
-    }
-
-    @font-face {
-        font-family: Spectral;
-        src:
-            url("./dsfr/fonts/Spectral-Regular.woff2") format("woff2"),
-            url("./dsfr/fonts/Spectral-Regular.woff") format("woff");
-        font-weight: 400;
-        font-style: normal;
-        font-display: swap;
-    }
-
-    @font-face {
-        font-family: Spectral;
-        src:
-            url("./dsfr/fonts/Spectral-ExtraBold.woff2") format("woff2"),
-            url("./dsfr/fonts/Spectral-ExtraBold.woff") format("woff");
-        font-weight: 900;
-        font-style: normal;
-        font-display: swap;
-    }
-</style>

.storybook/preview.tsx

@@ -1,14 +1,12 @@
 import type { Preview } from "@storybook/react";
 import { darkTheme, lightTheme } from "./customTheme";
-import "./static/dsfr/utility/icons/icons.min.css";
-import "./static/dsfr/dsfr.css";
+import "@codegouvfr/react-dsfr/main.css";
 import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";
 import { useIsDark as useIsDsfrDark } from "@codegouvfr/react-dsfr/useIsDark";
 import { useDarkMode as useStorybookUiDarkMode } from "storybook-dark-mode";
-import { useEffectOnValueChange } from "../src/hooks/useEffectOnValueChange";
 import type { Channel } from "@storybook/channels";
 import { UPDATE_STORY_ARGS } from "@storybook/core-events";
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { DocsContainer } from "./DocsContainer";
 
 const defaultLang = "fr";
@@ -32,6 +30,7 @@ const preview = {
             },
         },
     },
+
     parameters: {
         backgrounds: { disable: true },
         docs: {
@@ -48,6 +47,7 @@ const preview = {
             expanded: true,
         },
     },
+
     argTypes: {
         darkMode: {
             control: { type: "boolean" },
@@ -63,6 +63,7 @@ const preview = {
             control: { type: "boolean" },
         },
     },
+
     decorators: [
         (Story, context) => {
             const isStorybookUiDark = useStorybookUiDarkMode();
@@ -87,6 +88,25 @@ const preview = {
             return <Story />;
         },
     ],
+
+    tags: ["autodocs"],
 } satisfies Preview;
 
 export default preview;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function useEffectOnValueChange<T extends readonly [value: any, ...moreValues: any[]]>(
+    effect: (...args: T) => void | (() => void),
+    values: T,
+): void {
+    const refIsFistRender = useRef(true);
+
+    useEffect(() => {
+        if (refIsFistRender.current) {
+            refIsFistRender.current = false;
+            return;
+        }
+
+        return effect(...values);
+    }, values);
+}

.storybook/static/favicon/manifest.webmanifest

@@ -0,0 +1,14 @@
+{
+    "icons": [
+        {
+            "src": "android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}