feat: extend ShadCN initialization

.prettierrc

@@ -3,5 +3,8 @@
   "semi": false,
   "singleQuote": false,
   "tabWidth": 2,
-  "trailingComma": "es5"
-}
+  "trailingComma": "es5",
+  "plugins": [
+    "prettier-plugin-tailwindcss"
+  ]
+}

.storybook/ChakraDecorator.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useMemo, useState } from "react"
 import {
   ChakraBaseProvider,
   extendBaseTheme,
@@ -6,7 +7,7 @@ import {
 import type { Decorator } from "@storybook/react"
 
 import theme from "../src/@chakra-ui/theme"
-import { useEffect, useMemo, useState } from "react"
+
 import i18n from "./i18next"
 
 type DecoratorProps = Parameters<Decorator>

.storybook/main.ts

@@ -15,12 +15,18 @@ import type { StorybookConfig } from "@storybook/nextjs"
  */
 
 const config: StorybookConfig = {
-  stories: ["../src/components/**/*.stories.{ts,tsx}"],
+  stories: ["../src/components/**/*.stories.tsx"],
   addons: [
     "@storybook/addon-links",
-    "@storybook/addon-essentials",
+    {
+      name: "@storybook/addon-essentials",
+      options: {
+        backgrounds: false
+      }
+    },
     "@storybook/addon-interactions",
     "storybook-react-i18next",
+    "@storybook/addon-themes",
     "@chromatic-com/storybook"
   ],
   staticDirs: ["../public"],

.storybook/modes.ts

@@ -1,7 +1,7 @@
 import { baseLocales } from "./i18next"
-import { chakraBreakpointArray } from "./preview"
+import { breakpointSet } from "./preview"
 
-export const viewportModes = chakraBreakpointArray.reduce<{
+export const viewportModes = breakpointSet.reduce<{
   [mode: string]: { viewport: string }
 }>((arr, [token]) => {
   return {

.storybook/preview-head.html

@@ -1,9 +1,2 @@
-<style type="text/css">
-
-    :root {
-        --font-inter: 'Inter', sans-serif;
-    }
-
-</style>
 
 <link rel="preload" href="/fonts/inter/latin.woff2" as="font" type="font/woff2" crossorigin="anonymous" />

.storybook/preview.tsx

@@ -0,0 +1,84 @@
+import isChromatic from "chromatic/isChromatic"
+import { MotionGlobalConfig } from "framer-motion"
+import { withThemeByDataAttribute } from "@storybook/addon-themes"
+import type { Preview } from "@storybook/react"
+
+import ThemeProvider from "@/components/ThemeProvider"
+
+import i18n, { baseLocales } from "./i18next"
+
+import "../src/styles/global.css"
+import "../src/styles/fonts.css"
+
+MotionGlobalConfig.skipAnimations = isChromatic()
+
+export const breakpointSet: [token: string, value: string][] = [
+  ["base", "375px"],
+  ["sm", "640px"],
+  ["md", "768px"],
+  ["lg", "1024px"],
+  ["xl", "1280px"],
+  ["2xl", "1536px"],
+]
+
+const preview: Preview = {
+  globals: {
+    locale: "en",
+    locales: baseLocales,
+  },
+  decorators: [
+    withThemeByDataAttribute({
+      themes: {
+        light: "light",
+        dark: "dark",
+      },
+      defaultTheme: "light",
+    }),
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+  parameters: {
+    i18n,
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    chromatic: {
+      prefersReducedMotion: "reduce",
+    },
+    options: {
+      storySort: {
+        order: ["Atoms", "Molecules", "Organisms", "Templates", "Pages"],
+      },
+    },
+    layout: "centered",
+    // Modify viewport selection to match Chakra breakpoints (or custom breakpoints)
+    viewport: {
+      viewports: breakpointSet.reduce<{
+        [token: string]: {
+          name: string
+          styles: Record<"width" | "height", string>
+        }
+      }>((arr, [token, value]) => {
+        return {
+          ...arr,
+          [token]: {
+            name: token,
+            styles: {
+              width: value,
+              height: "800px",
+            },
+          },
+        }
+      }, {}),
+    },
+  },
+}
+
+export default preview

.storybook/types.ts

@@ -1,5 +1,5 @@
-import type { ArgTypes } from "@storybook/react"
 import type { ThemingProps } from "@chakra-ui/react"
+import type { ArgTypes } from "@storybook/react"
 
 // Type declarations below pulled directly from `@chakra-ui/storybook-addon`
 // with some alteration
@@ -49,7 +49,7 @@ export type ThemingArgTypeKey = "variant" | "size"
  * @param componentName component name to create the ArgTypes for
  */
 export function getThemingArgTypes<
-  Theme extends Record<string, any>,
+  Theme extends Record<string, unknown>,
   ComponentName extends KeyOf<Theme["components"]>
 >(theme: Theme, componentName: ComponentName) {
   const component = theme.components[componentName]

components.json

@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.ts",
-    "css": "src/styles/main.css",
+    "css": "src/styles/global.css",
     "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""

package.json

@@ -14,6 +14,7 @@
     "preversion": "bash ./src/scripts/updatePublishDate.sh",
     "crowdin-contributors": "ts-node -O '{ \"module\": \"commonjs\" }' src/scripts/crowdin/getCrowdinContributors.ts",
     "storybook": "storybook dev -p 6006",
+    "storybook:tw": "storybook dev -p 6007 -c ./tailwind/.storybook",
     "build-storybook": "storybook build",
     "build-storybook:chromatic": "storybook build --test",
     "chromatic": "chromatic --project-token fee8e66c9916",
@@ -32,7 +33,10 @@
     "@docsearch/react": "^3.5.2",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@radix-ui/react-navigation-menu": "^1.1.4",
+    "@hookform/resolvers": "^3.8.0",
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-navigation-menu": "^1.2.0",
+    "@radix-ui/react-slot": "^1.1.0",
     "@socialgouv/matomo-next": "^1.8.0",
     "chart.js": "^4.4.2",
     "chartjs-plugin-datalabels": "^2.2.0",
@@ -47,6 +51,7 @@
     "lodash.merge": "^4.6.2",
     "lodash.shuffle": "^4.2.0",
     "lodash.union": "^4.6.0",
+    "lucide-react": "^0.400.0",
     "next": "^14.2.3",
     "next-i18next": "^14.0.3",
     "next-mdx-remote": "^3.0.8",
@@ -58,6 +63,7 @@
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-emoji-render": "^2.0.1",
+    "react-hook-form": "^7.52.1",
     "react-i18next": "^13.3.1",
     "react-icons": "^4.10.1",
     "react-lite-youtube-embed": "^2.4.0",
@@ -75,6 +81,7 @@
     "@storybook/addon-essentials": "8.1.10",
     "@storybook/addon-interactions": "8.1.10",
     "@storybook/addon-links": "8.1.10",
+    "@storybook/addon-themes": "^8.1.11",
     "@storybook/nextjs": "^8.1.10",
     "@storybook/react": "8.1.10",
     "@storybook/test": "8.1.10",
@@ -91,7 +98,7 @@
     "decompress": "^4.2.1",
     "eslint": "^8.45.0",
     "eslint-config-next": "^14.2.2",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-prettier": "9.1.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-storybook": "0.8.0",
     "eslint-plugin-unused-imports": "^3.0.0",
@@ -103,6 +110,8 @@
     "plaiceholder": "^3.0.0",
     "polished": "^4.2.2",
     "postcss": "^8.4.39",
+    "prettier": "3.3.2",
+    "prettier-plugin-tailwindcss": "^0.6.5",
     "raw-loader": "^4.0.2",
     "storybook": "8.1.10",
     "storybook-react-i18next": "3.1.1",

src/components/Hero/HubHero/index.tsx

@@ -44,13 +44,15 @@ const HubHero = ({
         borderRadius={{ xl: "base" }}
         bg={{ xl: "hubHeroContentBg" }}
         position={{ xl: "absolute" }}
-        insetInlineStart={{ xl: "8" }}
         maxW={{ xl: "sm" }}
         top={{ xl: "50%" }}
         transform={{ xl: "translateY(-50%)" }}
         backdropFilter={{ xl: "auto" }}
         backdropBlur={{ xl: "base" }}
         wordBreak="break-word"
+        sx={{
+          "inset-inline-start": { xl: "32px" },
+        }}
       >
         {title ? (
           <Text