feat: feedback on storybook

tricks to import storybook as issues are ongoing

Author: yoannfleurydev

.storybook/preview.tsx

@@ -41,7 +41,6 @@ const DocumentationWrapper = ({ children, isDarkMode, context }) => {
 };
 
 const preview: Preview = {
-  tags: ['autodocs'],
   parameters: {
     layout: 'padded',
     backgrounds: {
@@ -51,12 +50,17 @@ const preview: Preview = {
     darkMode: {
       stylePreview: true,
     },
+    docs: {
+      codePanel: true,
+    },
+  },
+  initialGlobals: {
+    locale: DEFAULT_LANGUAGE_KEY,
   },
   globalTypes: {
     locale: {
       name: 'Locale',
       description: 'Internationalization locale',
-      defaultValue: DEFAULT_LANGUAGE_KEY,
       toolbar: {
         icon: 'globe',
         items: AVAILABLE_LANGUAGES.map(({ key }) => ({

app/components/ui/sidebar.tsx

@@ -1,11 +1,13 @@
-import * as React from 'react';
-
 import { Slot } from '@radix-ui/react-slot';
 import { useRouter } from '@tanstack/react-router';
-import { VariantProps, cva } from 'class-variance-authority';
+import { cva,VariantProps } from 'class-variance-authority';
 import { PanelLeftIcon } from 'lucide-react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { cn } from '@/lib/tailwind/utils';
+import { useIsMobile } from '@/hooks/use-mobile';
+
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Separator } from '@/components/ui/separator';
@@ -23,8 +25,6 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
-import { useIsMobile } from '@/hooks/use-mobile';
-import { cn } from '@/lib/tailwind/utils';
 
 const SIDEBAR_BREAKPOINT = 768;
 const SIDEBAR_COOKIE_NAME = 'sidebar_state';

eslint.config.ts

@@ -5,14 +5,15 @@ import tanstackRouter from '@tanstack/eslint-plugin-router';
 import reactHooks from 'eslint-plugin-react-hooks';
 import simpleImportSort from 'eslint-plugin-simple-import-sort';
 import sonarjs from 'eslint-plugin-sonarjs';
-import storybook from 'eslint-plugin-storybook';
+import * as storybook from 'eslint-plugin-storybook';
 import unicorn from 'eslint-plugin-unicorn';
 import tslint from 'typescript-eslint';
 
 export default tslint.config(
   eslint.configs.recommended,
   tslint.configs.recommended,
   sonarjs.configs.recommended,
+  // @ts-expect-error not sure it is related to https://github.com/storybookjs/eslint-plugin-storybook/issues/209 but quite similar
   ...storybook.configs['flat/recommended'],
   ...tanstackRouter.configs['flat/recommended'],
   ...tanstackQuery.configs['flat/recommended'],

package.json

@@ -110,9 +110,9 @@
     "@eslint/js": "9.26.0",
     "@faker-js/faker": "9.7.0",
     "@playwright/test": "1.52.0",
-    "@storybook/addon-a11y": "9.0.6",
-    "@storybook/addon-docs": "9.0.6",
-    "@storybook/react-vite": "9.0.6",
+    "@storybook/addon-a11y": "9.0.12",
+    "@storybook/addon-docs": "9.0.12",
+    "@storybook/react-vite": "9.0.12",
     "@svgr/cli": "8.1.0",
     "@tailwindcss/postcss": "4.1.7",
     "@tanstack/eslint-plugin-query": "5.74.7",
@@ -132,15 +132,15 @@
     "eslint-plugin-react-hooks": "5.2.0",
     "eslint-plugin-simple-import-sort": "12.1.1",
     "eslint-plugin-sonarjs": "3.0.2",
-    "eslint-plugin-storybook": "9.0.6",
+    "eslint-plugin-storybook": "9.0.12",
     "eslint-plugin-unicorn": "59.0.1",
     "jiti": "2.4.2",
     "maildev": "2.2.1",
     "npm-run-all": "4.1.5",
     "prettier-plugin-tailwindcss": "0.6.11",
     "prisma": "6.7.0",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "9.0.6",
+    "storybook": "9.0.12",
     "ts-plugin-sort-import-suggestions": "1.0.4",
     "typescript": "5.8.3",
     "typescript-eslint": "8.32.0",