feat: new storybook

Author: Virtute90

.storybook/main.ts

@@ -1,37 +1,28 @@
-import { StorybookConfig } from '@storybook/react-vite';
-
-const config: StorybookConfig = {
-  stories: ['../stories/**/*.@(mdx|stories.@(ts|tsx|js|jsx))'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-a11y'
-  ],
-  framework: {
-    name: '@storybook/react-vite',
-    options: {}
-  },
-  core: {
-    builder: '@storybook/builder-vite' // 👈 The builder enabled here.
-  },
-  staticDirs: ['../static', { from: '../assets', to: '/' }],
-  docs: {
-    autodocs: true,
-    defaultName: 'Documentazione',
-    docsMode: false
-  },
-  async viteFinal(config) {
-    // Merge custom configuration into the default config
-    const { mergeConfig } = await import('vite');
-
-    return mergeConfig(config, {
-      // Add dependencies to pre-optimization
-      build: {
-        chunkSizeWarningLimit: 1000,
-        minify: false
-      }
-    });
-  }
-};
-export default config;
+import { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.@(mdx|stories.@(ts|tsx|js|jsx))'],
+  addons: ['@storybook/addon-links', '@storybook/addon-a11y', '@storybook/addon-docs'],
+  framework: '@storybook/react-vite',
+  core: {
+    builder: '@storybook/builder-vite' // 👈 The builder enabled here.
+  },
+  staticDirs: ['../static', { from: '../assets', to: '/' }],
+  docs: {
+    defaultName: 'Documentazione',
+    docsMode: false
+  },
+  async viteFinal(config) {
+    // Merge custom configuration into the default config
+    const { mergeConfig } = await import('vite');
+
+    return mergeConfig(config, {
+      // Add dependencies to pre-optimization
+      build: {
+        chunkSizeWarningLimit: 1000,
+        minify: false
+      }
+    });
+  }
+};
+export default config;

.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from "@storybook/manager-api";
+import { addons } from "storybook/manager-api";
 import theme from "./theme";
 
 addons.setConfig({

.storybook/preview.ts

@@ -1,33 +1,43 @@
-import { Preview } from "@storybook/react";
-import "bootstrap-italia/dist/css/bootstrap-italia.min.css";
-import "../assets/css/storybook-fixes.css";
-import "../assets/docs/scss/bi-fonts.scss";
-import "../assets/docs/scss/docs.scss";
-
-import theme from "./theme";
-
-const preview: Preview = {
-    parameters: {
-        docs: {
-            theme: theme,
-            toc: {
-                headingSelector: "h1, h2, h3",
-                title: "Indice",
-            },
-            source: {
-                type: "dynamic",
-            },
-        },
-        options: {
-            storySort: {
-                order: [
-                    "Documentazione",
-                    ["Welcome", "Organizzare gli spazi", "Organizzare i contenuti", "Menu di navigazione", "Componenti", "Form", "Utilities"],
-                    "*",
-                ],
-            },
-        },
-    },
-};
-
-export default preview;
+import { Preview } from '@storybook/react-vite';
+import 'bootstrap-italia/dist/css/bootstrap-italia.min.css';
+import '../assets/css/storybook-fixes.css';
+import '../assets/docs/scss/bi-fonts.scss';
+import '../assets/docs/scss/docs.scss';
+
+import theme from './theme';
+
+const preview: Preview = {
+  parameters: {
+    docs: {
+      theme: theme,
+      toc: {
+        headingSelector: 'h1, h2, h3',
+        title: 'Indice'
+      },
+      source: {
+        type: 'dynamic'
+      }
+    },
+    options: {
+      storySort: {
+        order: [
+          'Documentazione',
+          [
+            'Welcome',
+            'Organizzare gli spazi',
+            'Organizzare i contenuti',
+            'Menu di navigazione',
+            'Componenti',
+            'Form',
+            'Utilities'
+          ],
+          '*'
+        ]
+      }
+    }
+  },
+
+  tags: ['autodocs']
+};
+
+export default preview;

.storybook/theme.ts

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming';
+import { create } from 'storybook/theming';
 
 const theme = create({
   base: 'light',

assets/css/storybook-fixes.css

@@ -47,12 +47,7 @@ pre > code[class] {
 
 /* Fix TOC size */
 .css-zpcrvf {
-  width: 15rem;
-}
-
-/* Fix TOC item font-size */
-.toc-list-item .toc-link {
-  font-size: 1rem;
+  width: auto !important;
 }
 
 .docs .callout {
@@ -147,11 +142,15 @@ div[id*='componenti-bottomnav'] .bottom-nav {
 
 .layout-example.docs .d-flex,
 .layout-example.docs .row {
-  background-image: linear-gradient(45deg, #d9dadb 25%, transparent 25%),
-    linear-gradient(-45deg, #d9dadb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d9dadb 75%),
-    linear-gradient(-45deg, transparent 75%, #d9dadb 75%);
+  background-image:
+    linear-gradient(45deg, #d9dadb 25%, transparent 25%), linear-gradient(-45deg, #d9dadb 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #d9dadb 75%), linear-gradient(-45deg, transparent 75%, #d9dadb 75%);
   background-size: 20px 20px;
-  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
+  background-position:
+    0 0,
+    0 10px,
+    10px -10px,
+    -10px 0;
 }
 
 .layout-example.docs .row > .col,

package.json

@@ -89,31 +89,29 @@
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",
     "@eslint/js": "^9.10.0",
-    "@storybook/addon-a11y": "^8.4.0",
-    "@storybook/addon-docs": "^8.4.0",
-    "@storybook/addon-essentials": "^8.4.0",
-    "@storybook/addon-interactions": "^8.4.0",
-    "@storybook/addon-links": "^8.4.0",
-    "@storybook/addon-onboarding": "^8.4.0",
-    "@storybook/blocks": "^8.4.0",
-    "@storybook/react": "^8.4.0",
-    "@storybook/react-vite": "^8.4.0",
-    "@storybook/test": "^8.4.0",
+    "@storybook/addon-a11y": "^9.1.2",
+    "@storybook/addon-docs": "^9.1.2",
+    "@storybook/addon-links": "^9.1.2",
+    "@storybook/addon-onboarding": "^9.1.2",
+    "@storybook/react-vite": "^9.1.2",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^16",
+    "@testing-library/react": "^16.3.0",
     "@types/is-number": "^7.0.3",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.12.2",
     "@types/react": "^18.2.75",
     "@types/react-bootstrap": "^0.32.37",
     "@types/react-dom": "^18.2.24",
     "@types/react-transition-group": "^4.4.10",
+    "@types/uuid": "^10.0.0",
     "bootstrap-italia": "^2.16.0",
     "browserslist-config-design-italia": "^1.0.0",
     "eslint": "^9.10.0",
     "eslint-plugin-mdx": "^3.1.5",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react-refresh": "^0.4.11",
+    "eslint-plugin-storybook": "^9.1.2",
     "globals": "^15.9.0",
     "husky": "^8.0.1",
     "jest": "^29.7.0",
@@ -124,8 +122,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-layout-masonry": "^1.2.0",
-    "sass": "^1.75.0",
-    "storybook": "^8.4.0",
+    "sass-embedded": "^1.90.0",
+    "storybook": "^9.1.2",
     "ts-jest": "^29.1.2",
     "tslib": "^2.4.0",
     "tsup": "^8.0.2",

stories/Components/Accordion.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import React, { useState } from "react";
 import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from "../../src";
 

stories/Components/Alert.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 import { componentColor } from '../../.storybook/stories-helper';
 import { Alert } from '../../src';

stories/Components/Avatar/Avatar.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import React, { useRef } from 'react';
 import { AvatarContainer, AvatarExtraText, AvatarIcon, AvatarWrapper, Icon, UncontrolledTooltip } from '../../../src';
 

stories/Components/Avatar/AvatarBehaviour.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { AvatarContainer, AvatarIcon, AvatarPresence, AvatarStatus, AvatarWrapper, Icon } from "../../../src";