Update to Storybook 8

Hector Arce De Las Heras · Hector Arce De Las Heras · commit 95d797156858 · 2024-06-17T15:16:52.000+02:00
This commit updates our project to use Storybook 8. The configuration file main.ts has been updated to match the new requirements and features of Storybook 8. This includes updates to the stories and addons arrays, as well as the framework, docs, and typescript options. This upgrade will provide us with the latest features and improvements from Storybook, enhancing our component development and documentation workflow.
diff --git a/.storybook/addons/figmaAddon/register.tsx b/.storybook/addons/figmaAddon/register.tsx
@@ -1,6 +1,5 @@
-import { addons, types } from '@storybook/addons';
 import { IconButton } from '@storybook/components';
-import { useParameter } from '@storybook/manager-api';
+import { addons, types, useParameter } from '@storybook/manager-api';
 import { styled } from '@storybook/theming';
 
 import React from 'react';
diff --git a/.storybook/addons/githubAddon/register.tsx b/.storybook/addons/githubAddon/register.tsx
@@ -1,6 +1,5 @@
-import { addons, types } from '@storybook/addons';
 import { IconButton } from '@storybook/components';
-import { useParameter } from '@storybook/manager-api';
+import { addons, types, useParameter } from '@storybook/manager-api';
 import { styled } from '@storybook/theming';
 
 import React from 'react';
diff --git a/.storybook/addons/statusAddon/register.tsx b/.storybook/addons/statusAddon/register.tsx
@@ -1,6 +1,5 @@
 import { Div } from '@storybook/components';
-import { addons, types } from '@storybook/manager-api';
-import { useParameter } from '@storybook/manager-api';
+import { addons, types, useParameter } from '@storybook/manager-api';
 
 import React from 'react';
 
diff --git a/.storybook/addons/tokensAddons/register.tsx b/.storybook/addons/tokensAddons/register.tsx
@@ -1,7 +1,5 @@
-import { addons, types } from '@storybook/addons';
-import { Meta, Source, Title } from '@storybook/blocks';
-import { AddonPanel, Placeholder, Separator, Spaced } from '@storybook/components';
-import { useAddonState, useArgs } from '@storybook/manager-api';
+import { AddonPanel, Spaced } from '@storybook/components';
+import { addons, types, useArgs } from '@storybook/manager-api';
 
 import React from 'react';
 
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -2,10 +2,10 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
   stories: [
-    '../src/components/**/*.mdx',
+    '../.storybook/**/*.@(mdx|stories.@(js|jsx|ts|tjx|tdx|tsx))',
     '../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)',
     '../src/storybook/**/*.stories.@(js|jsx|mjs|ts|tsx)',
-    '../.storybook/**/*.stories.@(js|jsx|mdx|ts|tjx|tdx|tsx)',
+    '../.storybook/**/*.@(mdx|stories.@(js|jsx|ts|tjx|tdx|tsx))',
   ],
   staticDirs: ['./assets', '../assets'],
   addons: [
@@ -24,8 +24,10 @@ const config: StorybookConfig = {
     options: {},
   },
   docs: {
-    autodocs: 'tag',
     defaultName: 'Documentation',
   },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
 };
 export default config;
diff --git a/.storybook/manager.ts b/.storybook/manager.ts
@@ -1,5 +1,5 @@
 // ./storybook/manager.ts
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import { create } from '@storybook/theming';
 
 const theme = create({
diff --git a/.storybook/overview/introduction.css b/.storybook/overview/introduction.css
@@ -1,5 +1,5 @@
 @font-face {
-  font-family: 'myFirstFont';
+  font-family: 'GTAmericaFont';
   src: url('../font/gtamericaregular.woff');
 }
 
@@ -18,7 +18,7 @@
   justify-content: center;
   margin-left: 6rem;
   gap: 2rem;
-  font-family: 'myFirstFont';
+  font-family: 'GTAmericaFont';
 }
 
 .welcome_title {
diff --git a/.storybook/overview/introduction.mdx b/.storybook/overview/introduction.mdx
diff --git a/.storybook/overview/introduction.tsx b/.storybook/overview/introduction.tsx
@@ -1,11 +1,19 @@
 import React from 'react';
 
-import Package from '../../package.json';
 // import Package from '../../package.json';
 import bg from './assets/cover_home.webp';
 import './introduction.css';
 
 export const Introduction = () => {
+  if (
+    localStorage.getItem('themeSelected') === null ||
+    localStorage.getItem('themeSelected') === undefined ||
+    localStorage.getItem('themeSelected') === '' ||
+    localStorage.getItem('themeSelected') !== 'kubit'
+  ) {
+    localStorage.setItem('themeSelected', 'kubit');
+  }
+
   return (
     <div
       className="welcome__container"
@@ -15,8 +23,8 @@ export const Introduction = () => {
       }}
     >
       <div className="welcome-text-container">
-        <h2 className="welcome_title">Kubit | react-components</h2>
-        <h4 className="welcome_version">v.{Package.version} | Saturn</h4>
+        <h2 className="welcome_title">Kubit | web-components</h2>
+        <h4 className="welcome_version">{`v.1.0.0 | Saturn`}</h4>
       </div>
     </div>
   );
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -37,7 +37,6 @@ const preview: Preview = {
     },
   },
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience",
   "author": {
     "name": "Kubit",
@@ -86,19 +86,16 @@
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@storybook/addon-a11y": "^7.6.17",
-    "@storybook/addon-controls": "^7.6.17",
-    "@storybook/addon-coverage": "^1.0.0",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/addon-themes": "^7.6.17",
-    "@storybook/addons": "^7.6.17",
-    "@storybook/blocks": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-vite": "^7.6.17",
-    "@storybook/test-runner": "^0.16.0",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/addon-a11y": "^8.1.9",
+    "@storybook/addon-controls": "^8.1.9",
+    "@storybook/addon-coverage": "^1.0.4",
+    "@storybook/addon-essentials": "^8.1.9",
+    "@storybook/addon-interactions": "^8.1.9",
+    "@storybook/addon-links": "^8.1.9",
+    "@storybook/addon-themes": "^8.1.9",
+    "@storybook/blocks": "^8.1.9",
+    "@storybook/react": "^8.1.9",
+    "@storybook/react-vite": "^8.1.9",
     "@testing-library/jest-dom": "^5.16.15",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^8.0.1",
@@ -110,11 +107,11 @@
     "@types/react": "^18.2.59",
     "@types/react-dom": "^18.2.19",
     "@types/styled-components": "^5.1.34",
+    "@types/ungap__structured-clone": "^1.2.0",
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@typescript-eslint/parser": "^7.1.0",
     "@vitejs/plugin-react": "^4.2.1",
     "babel-jest": "^29.7.0",
-    "chromatic": "^11.2.0",
     "cpy-cli": "^5.0.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
@@ -145,7 +142,7 @@
     "prettier": "^3.2.5",
     "react-transition-group": "^4.4.5",
     "sort-imports": "^1.1.0",
-    "storybook": "^7.6.17",
+    "storybook": "^8.1.9",
     "ts-jest": "^29.1.2",
     "tsc-alias": "1.8.8",
     "typedoc": "^0.25.9",
diff --git a/src/components/backToTop/backToTopControlled.tsx b/src/components/backToTop/backToTopControlled.tsx
@@ -25,13 +25,9 @@ const BackToTopControlledComponent = React.forwardRef(
 
     const innerRef = React.useRef<HTMLButtonElement | null>(null);
 
-    React.useImperativeHandle(
-      ref,
-      () => {
-        return innerRef?.current as HTMLButtonElement;
-      },
-      []
-    );
+    React.useImperativeHandle(ref, () => {
+      return innerRef?.current as HTMLButtonElement;
+    }, []);
 
     const { state, setRef } = useManageState({
       states: Object.values(BackToTopStateType) as States,
diff --git a/src/components/listOptions/listOptionsStandAlone.tsx b/src/components/listOptions/listOptionsStandAlone.tsx
@@ -40,13 +40,9 @@ export const ListOptionsStandAlone = React.forwardRef(
     const [focus, setFocus, listEl] = useRoveFocus(props.roveFocus ?? roveFocusProps);
     const _id = useId();
 
-    React.useImperativeHandle(
-      ref,
-      () => {
-        return listEl.current as HTMLDivElement;
-      },
-      []
-    );
+    React.useImperativeHandle(ref, () => {
+      return listEl.current as HTMLDivElement;
+    }, []);
 
     const id = props.id ?? _id;
     const isSelection = type === ListOptionsType.SELECTION;
diff --git a/src/components/option/option.tsx b/src/components/option/option.tsx
@@ -20,13 +20,9 @@ export const OptionComponent = React.forwardRef(
     const [hover, setHover] = React.useState(false);
     const [focused, setFocused] = React.useState(false);
 
-    React.useImperativeHandle(
-      ref,
-      () => {
-        return innerRef.current as HTMLElement;
-      },
-      []
-    );
+    React.useImperativeHandle(ref, () => {
+      return innerRef.current as HTMLElement;
+    }, []);
 
     React.useEffect(() => {
       if (focus) {
diff --git a/src/components/pillSelector/pillSelectorControlled.tsx b/src/components/pillSelector/pillSelectorControlled.tsx
@@ -38,13 +38,9 @@ const PillSelectorControlledComponent = React.forwardRef(
       }
     };
 
-    React.useImperativeHandle(
-      ref,
-      () => {
-        return measuredRef.current as HTMLDivElement;
-      },
-      []
-    );
+    React.useImperativeHandle(ref, () => {
+      return measuredRef.current as HTMLDivElement;
+    }, []);
 
     React.useEffect(() => {
       let resizeObserver: ResizeObserver;
diff --git a/src/components/pillSelector/pillSelectorStandAlone.tsx b/src/components/pillSelector/pillSelectorStandAlone.tsx
@@ -30,13 +30,9 @@ const PillSelectorStandAloneComponent = (
 
   const isPillSelected = props.pillSelected?.length !== 0;
 
-  React.useImperativeHandle(
-    ref,
-    () => {
-      return listEl.current as HTMLDivElement;
-    },
-    []
-  );
+  React.useImperativeHandle(ref, () => {
+    return listEl.current as HTMLDivElement;
+  }, []);
 
   return (
     <PillSelectorWrapper
diff --git a/src/components/thirdPartyAnimation/thirdPartyAnimation.tsx b/src/components/thirdPartyAnimation/thirdPartyAnimation.tsx
@@ -22,13 +22,9 @@ const ThirdPartyAnimationComponent = <V extends string | unknown>(
   const { thirdPartyAnimationData } = variantTheme;
   const element = React.useRef<HTMLDivElement>(null);
 
-  React.useImperativeHandle(
-    ref,
-    () => {
-      return element.current as HTMLDivElement;
-    },
-    []
-  );
+  React.useImperativeHandle(ref, () => {
+    return element.current as HTMLDivElement;
+  }, []);
 
   React.useEffect(() => {
     if (element.current) {
diff --git a/src/components/tooltip/tooltipUnControlled.tsx b/src/components/tooltip/tooltipUnControlled.tsx
@@ -29,13 +29,9 @@ const TooltipUnControlledComponent = React.forwardRef(
       styleTooltipAsModal: styles.tooltipAsModal,
     });
 
-    React.useImperativeHandle(
-      ref,
-      () => {
-        return labelRef.current as HTMLDivElement;
-      },
-      []
-    );
+    React.useImperativeHandle(ref, () => {
+      return labelRef.current as HTMLDivElement;
+    }, []);
 
     const { showTooltip, hideTooltip, allowFocusOpenTooltip, open } = useTooltip<V>({
       labelRef,
diff --git a/src/utils/isValidUrl/isValidUrl.ts b/src/utils/isValidUrl/isValidUrl.ts
@@ -7,7 +7,6 @@ export const isValidHttpUrl = (string: string): boolean => {
   let parsedURL;
 
   try {
-    // eslint-disable-next-line node/no-unsupported-features/node-builtins
     parsedURL = new URL(string);
   } catch (e) {
     if (string.startsWith('/') || string.startsWith('./') || string.startsWith('../')) {

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`@font-face {`
`2`		`- font-family: 'myFirstFont';`
	`2`	`+ font-family: 'GTAmericaFont';`
`3`	`3`	`src: url('../font/gtamericaregular.woff');`
`4`	`4`	`}`
`5`	`5`
`@@ -18,7 +18,7 @@`
`18`	`18`	`justify-content: center;`
`19`	`19`	`margin-left: 6rem;`
`20`	`20`	`gap: 2rem;`
`21`		`- font-family: 'myFirstFont';`
	`21`	`+ font-family: 'GTAmericaFont';`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`.welcome_title {`