Upgrade storybook

.babelrc.json

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": ["@babel/plugin-proposal-optional-chaining"]
+}

.eslintrc.js

@@ -1,11 +1,15 @@
 module.exports = {
-  extends: ['react-app', 'prettier/@typescript-eslint', 'plugin:prettier/recommended'],
+  extends: ['react-app', 'plugin:storybook/recommended'],
+  ignorePatterns: ['stories/**/*.mdx'],
   overrides: [
     {
-      files: ['*.mdx'],
-      extends: 'plugin:mdx/recommended',
-      settings: {
-        'mdx/code-blocks': false
+      // or whatever matches stories specified in .storybook/main.js
+      files: ['*.stories.@(ts|tsx|js|jsx|mjs|cjs)'],
+      rules: {
+        // example of overriding a rule
+        'storybook/hierarchy-separator': 'error',
+        // example of disabling a rule
+        'storybook/default-exports': 'off'
       }
     }
   ],

.gitignore

@@ -11,3 +11,5 @@ coverage
 
 # Logs
 *.log
+
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,36 @@
+import { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.@(mdx|stories.@(ts|tsx|js|jsx))', '../stories/**/*.mdx'],
+  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
+      }
+    });
+  }
+};
+export default config;

.storybook/manager-head.html

@@ -1,37 +1,37 @@
-<title>Design React Kit</title>
-<meta name="description" content="Design React Kit - A React toolkit that implements the Italia design system" />
-<meta property="og:site_name" content="Design React Kit" />
-<link rel="canonical" href="https://italia.github.io/design-react-kit/" />
-
-<!-- Favicons -->
-<link rel="apple-touch-icon" href="/favicons/apple-touch-icon.png" />
-<link rel="icon" href="/favicons/favicon-32x32.png" sizes="32x32" type="image/png" />
-<link rel="icon" href="/favicons/favicon-16x16.png" sizes="16x16" type="image/png" />
-<link rel="manifest" href="/favicons/manifest.webmanifest" />
-<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#0066CC" />
-<link rel="icon" href="/favicons/favicon.ico" />
-<meta name="msapplication-config" content="/favicons/browserconfig.xml" />
-<meta name="theme-color" content="#0066CC" />
-
-<!-- Twitter -->
-<meta name="twitter:card" content="summary" />
-<meta name="twitter:site" content="@teamdigitaleIT" />
-<meta name="twitter:creator" content="Team per la Trasformazione Digitale" />
-<meta name="twitter:title" content="React Kit" />
-<meta name="twitter:description" content="Il kit React per la Pubblica Amministrazione" />
-<meta name="twitter:image" content="/favicons/android-chrome-192x192.png" />
-<!-- Facebook -->
-<meta property="og:url" content="https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/" />
-<meta property="og:title" content="React Kit" />
-<meta property="og:description" content="Il kit React per la Pubblica Amministrazione" />
-<meta property="og:type" content="website" />
-<meta property="og:image" content="/favicons/social-card.png" />
-<meta property="og:image:secure_url" content="/favicons/social-card.png" />
-<meta property="og:image:type" content="image/png" />
-<meta property="og:image:width" content="1200" />
-<meta property="og:image:height" content="630" />
-<style>
-  .sidebar-item[id$='story-hidden'] {
-    display: none !important;
-  }
-</style>
+<title>Design React Kit</title>
+<meta name="description" content="Design React Kit - A React toolkit that implements the Italia design system" />
+<meta property="og:site_name" content="Design React Kit" />
+<link rel="canonical" href="https://italia.github.io/design-react-kit/" />
+
+<!-- Favicons -->
+<link rel="apple-touch-icon" href="/favicons/apple-touch-icon.png" />
+<link rel="icon" href="/favicons/favicon-32x32.png" sizes="32x32" type="image/png" />
+<link rel="icon" href="/favicons/favicon-16x16.png" sizes="16x16" type="image/png" />
+<link rel="manifest" href="/favicons/manifest.webmanifest" />
+<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#0066CC" />
+<link rel="icon" href="/favicons/favicon.ico" />
+<meta name="msapplication-config" content="/favicons/browserconfig.xml" />
+<meta name="theme-color" content="#0066CC" />
+
+<!-- Twitter -->
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:site" content="@teamdigitaleIT" />
+<meta name="twitter:creator" content="Team per la Trasformazione Digitale" />
+<meta name="twitter:title" content="React Kit" />
+<meta name="twitter:description" content="Il kit React per la Pubblica Amministrazione" />
+<meta name="twitter:image" content="/favicons/android-chrome-192x192.png" />
+<!-- Facebook -->
+<meta property="og:url" content="https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/" />
+<meta property="og:title" content="React Kit" />
+<meta property="og:description" content="Il kit React per la Pubblica Amministrazione" />
+<meta property="og:type" content="website" />
+<meta property="og:image" content="/favicons/social-card.png" />
+<meta property="og:image:secure_url" content="/favicons/social-card.png" />
+<meta property="og:image:type" content="image/png" />
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="630" />
+<style>
+  .sidebar-item[id$='story-hidden'] {
+    display: none !important;
+  }
+</style>

.storybook/manager.js

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

.storybook/preview-head.html

@@ -1,33 +1,33 @@
-<title>Design React Kit</title>
-<meta name="description" content="Design React Kit - A React toolkit that implements the Italia design system" />
-<meta property="og:site_name" content="Design React Kit" />
-<link rel="canonical" href="https://italia.github.io/design-react-kit/" />
-
-<!-- Favicons -->
-<link rel="apple-touch-icon" href="/favicons/apple-touch-icon.png" />
-<link rel="icon" href="/favicons/favicon-32x32.png" sizes="32x32" type="image/png" />
-<link rel="icon" href="/favicons/favicon-16x16.png" sizes="16x16" type="image/png" />
-<link rel="manifest" href="/favicons/manifest.webmanifest" />
-<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#0066CC" />
-<link rel="icon" href="/favicons/favicon.ico" />
-<meta name="msapplication-config" content="/favicons/browserconfig.xml" />
-<meta name="theme-color" content="#0066CC" />
-
-<!-- Twitter -->
-<meta name="twitter:card" content="summary" />
-<meta name="twitter:site" content="@teamdigitaleIT" />
-<meta name="twitter:creator" content="Team per la Trasformazione Digitale" />
-<meta name="twitter:title" content="React Kit" />
-<meta name="twitter:description" content="Il kit React per la Pubblica Amministrazione" />
-<meta name="twitter:image" content="/favicons/android-chrome-192x192.png" />
-
-<!-- Facebook -->
-<meta property="og:url" content="https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/" />
-<meta property="og:title" content="React Kit" />
-<meta property="og:description" content="Il kit React per la Pubblica Amministrazione" />
-<meta property="og:type" content="website" />
-<meta property="og:image" content="/favicons/social-card.png" />
-<meta property="og:image:secure_url" content="/favicons/social-card.png" />
-<meta property="og:image:type" content="image/png" />
-<meta property="og:image:width" content="1200" />
-<meta property="og:image:height" content="630" />
+<title>Design React Kit</title>
+<meta name="description" content="Design React Kit - A React toolkit that implements the Italia design system" />
+<meta property="og:site_name" content="Design React Kit" />
+<link rel="canonical" href="https://italia.github.io/design-react-kit/" />
+
+<!-- Favicons -->
+<link rel="apple-touch-icon" href="/favicons/apple-touch-icon.png" />
+<link rel="icon" href="/favicons/favicon-32x32.png" sizes="32x32" type="image/png" />
+<link rel="icon" href="/favicons/favicon-16x16.png" sizes="16x16" type="image/png" />
+<link rel="manifest" href="/favicons/manifest.webmanifest" />
+<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#0066CC" />
+<link rel="icon" href="/favicons/favicon.ico" />
+<meta name="msapplication-config" content="/favicons/browserconfig.xml" />
+<meta name="theme-color" content="#0066CC" />
+
+<!-- Twitter -->
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:site" content="@teamdigitaleIT" />
+<meta name="twitter:creator" content="Team per la Trasformazione Digitale" />
+<meta name="twitter:title" content="React Kit" />
+<meta name="twitter:description" content="Il kit React per la Pubblica Amministrazione" />
+<meta name="twitter:image" content="/favicons/android-chrome-192x192.png" />
+
+<!-- Facebook -->
+<meta property="og:url" content="https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/" />
+<meta property="og:title" content="React Kit" />
+<meta property="og:description" content="Il kit React per la Pubblica Amministrazione" />
+<meta property="og:type" content="website" />
+<meta property="og:image" content="/favicons/social-card.png" />
+<meta property="og:image:secure_url" content="/favicons/social-card.png" />
+<meta property="og:image:type" content="image/png" />
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="630" />