refactor: reinternalize slot components (#206)

Author: QRuhier

.github/workflows/storybook.yaml

@@ -0,0 +1,41 @@
+name: Deploy Storybook
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    name: Build Storybook
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+      - run: yarn
+      - name: Build Storybook
+        run: yarn build-storybook
+      - uses: actions/upload-artifact@v4
+        with:
+          name: storybook-static
+          path: storybook-static
+
+  deploy:
+    name: Deploy Storybook
+    runs-on: ubuntu-latest
+    needs: build
+    if: github.event_name == 'push'
+    steps:
+      - name: Download Storybook artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: storybook-static
+          path: storybook-static
+      - name: Deploy storybook to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./storybook-static
+          destination_dir: ./storybook

.gitignore

@@ -27,3 +27,5 @@ public/workers/*
 coverage
 
 /public/nomenclatures/
+
+storybook-static/

.storybook/DocsContainer.tsx

@@ -0,0 +1,33 @@
+import React, { ComponentProps, useEffect } from 'react'
+
+import { useIsDark } from '@codegouvfr/react-dsfr/useIsDark'
+import { DocsContainer as DocsContainer_base } from '@storybook/blocks'
+import { addons } from '@storybook/preview-api'
+import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode'
+
+import { darkTheme, lightTheme } from './customTheme'
+
+const channel = addons.getChannel()
+
+type Props = ComponentProps<typeof DocsContainer_base>
+
+export function DocsContainer(props: Props) {
+  const { children, context } = props
+
+  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={isDark ? darkTheme : lightTheme}
+    >
+      {children}
+    </DocsContainer_base>
+  )
+}

.storybook/customTheme.ts

@@ -0,0 +1,55 @@
+import { create } from '@storybook/theming'
+
+const brandImage = 'logo.png'
+const brandTitle = 'stromae-dsfr'
+const brandUrl = 'https://github.com/InseeFr/stromae-dsfr'
+const fontBase = '"Marianne", arial, sans-serif'
+const fontCode = 'monospace'
+
+/**
+ * Dark theme configuration for Storybook.
+ *
+ * @see For possible values that can be overridden, refer to:
+ * {@link https://github.com/storybookjs/storybook/blob/fd6a748190f09d9fee906357daaead829ca4243f/code/lib/theming/src/types.ts|Storybook Theming Types}
+ *
+ */
+export const darkTheme = create({
+  base: 'dark',
+  appBg: '#1E1E1E',
+  appContentBg: '#161616',
+  appPreviewBg: '#161616',
+  barBg: '#1E1E1E',
+  //"colorPrimary": "#8585F6",
+  colorSecondary: '#8585F6',
+  textColor: '#FFFFFF',
+  brandImage,
+  brandTitle,
+  brandUrl,
+  fontBase,
+  fontCode,
+  // brandTarget
+  // gridCellSize
+})
+
+/**
+ * Light theme configuration for Storybook.
+ *
+ * @see For possible values that can be overridden, refer to:
+ * {@link https://github.com/storybookjs/storybook/blob/fd6a748190f09d9fee906357daaead829ca4243f/code/lib/theming/src/types.ts|Storybook Theming Types}
+ *
+ */
+export const lightTheme = create({
+  base: 'light',
+  appBg: '#F6F6F6',
+  appContentBg: '#FFFFFF',
+  appPreviewBg: '#FFFFFF',
+  barBg: '#FFFFFF',
+  //"colorPrimary": "#000091",
+  colorSecondary: '#000091',
+  textColor: '#212121',
+  brandImage,
+  brandTitle,
+  brandUrl,
+  fontBase,
+  fontCode,
+})

.storybook/main.ts

@@ -0,0 +1,40 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+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: {
+    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: ['./tsconfig.json'],
+      // Add dependencies to pre-optimization
+      optimizeDeps: {
+        include: ['storybook-dark-mode'],
+      },
+    })
+  },
+} satisfies StorybookConfig

.storybook/preview.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useRef } from 'react'
+
+import '@codegouvfr/react-dsfr/main.css'
+import { startReactDsfr } from '@codegouvfr/react-dsfr/spa'
+import { useIsDark as useIsDsfrDark } from '@codegouvfr/react-dsfr/useIsDark'
+import type { Channel } from '@storybook/channels'
+import { UPDATE_STORY_ARGS } from '@storybook/core-events'
+import type { Preview } from '@storybook/react'
+import { useDarkMode as useStorybookUiDarkMode } from 'storybook-dark-mode'
+
+import { DocsContainer } from './DocsContainer'
+import { darkTheme, lightTheme } from './customTheme'
+
+const defaultLang = 'fr'
+
+startReactDsfr({
+  defaultColorScheme: 'system',
+  useLang: () => defaultLang,
+})
+
+const preview = {
+  globalTypes: {
+    locale: {
+      description: 'Internationalization locale',
+      defaultValue: defaultLang,
+      toolbar: {
+        icon: 'globe',
+        items: [
+          { value: 'fr', right: '🇫🇷', title: 'Français' },
+          { value: 'en', right: '🇺🇸', title: 'English' },
+        ],
+      },
+    },
+  },
+
+  parameters: {
+    backgrounds: { disable: true },
+    docs: {
+      autodocs: true,
+      container: DocsContainer,
+      controls: { exclude: ['darkMode'] },
+    },
+    darkMode: {
+      light: lightTheme,
+      dark: darkTheme,
+    },
+    controls: {
+      exclude: ['activeControls', 'shortcut', 'filterDescription'],
+      expanded: true,
+    },
+  },
+
+  argTypes: {
+    darkMode: {
+      control: { type: 'boolean' },
+      description:
+        'Global color scheme enabled, light or dark, it change only the color scheme of the Canvas',
+    },
+    initialPage: {
+      table: { disable: true },
+      control: { type: 'text' },
+    },
+    autoSuggesterLoading: {
+      table: { disable: true },
+      control: { type: 'boolean' },
+    },
+    detailAlwaysDisplayed: {
+      table: { disable: true, category: 'components options' },
+      control: { type: 'boolean' },
+    },
+  },
+
+  decorators: [
+    (Story, context) => {
+      const isStorybookUiDark = useStorybookUiDarkMode()
+      const { setIsDark: setIsDsfrDark } = useIsDsfrDark()
+      const channel = (window as any).__STORYBOOK_ADDONS_CHANNEL__ as Channel
+
+      useEffect(
+        //We initialize storybook canva with the same theme as storybook webSite
+        () => {
+          setIsDsfrDark(isStorybookUiDark)
+          channel.emit(UPDATE_STORY_ARGS, {
+            storyId: context.id,
+            updatedArgs: { darkMode: isStorybookUiDark },
+          })
+        },
+        [],
+      )
+      useEffectOnValueChange(() => {
+        setIsDsfrDark(context.args.darkMode)
+      }, [context.args.darkMode])
+
+      return <Story />
+    },
+  ],
+
+  tags: ['autodocs'],
+} satisfies Preview
+
+export default preview
+
+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)
+}