Merge pull request #15 from kubit-ui/feature/update-storybook-8

kubit-ui · web-flow · commit 6e9dd237dc55 · 2024-06-17T15:20:24.000+02:00
Update to Storybook 8
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 {`