feat: Update storybook

.storybook/main.js

@@ -1,9 +1,19 @@
 module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.tsx"],
+
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/preset-create-react-app",
-    "storybook-addon-designs",
+    "@storybook/addon-mdx-gfm",
   ],
+
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+
+  docs: {
+    autodocs: true,
+  },
 };

.storybook/preview.js

@@ -1,27 +1,26 @@
 import React from "react";
 
-import GlobalStyle from "../src/shared/globalStyle";
 import { ThemeProvider } from "styled-components";
+import GlobalStyle from "../src/shared/globalStyle";
 import { aqBootstrapTheme } from "../src/stories/theme/defaultTheme";
 
 // Global decorator to apply the styles to all stories
 export const decorators = [
-  (Story) => (
+  (StoryFn) => (
     <div style={{ padding: "10px" }}>
       <div
         style={{ overflow: "hidden", background: "#fff", minHeight: "100vh" }}
       >
         <ThemeProvider theme={aqBootstrapTheme}>
           <GlobalStyle />
-          <Story />
+          <StoryFn />
         </ThemeProvider>
       </div>
     </div>
   ),
 ];
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
   layout: "fullscreen",
   controls: {
     matchers: {

generate-story.sh

@@ -36,7 +36,7 @@ EOF
 }
 generate_stories() {
 	cat << EOF
-import { Story, Meta } from "@storybook/react";
+import { StoryFn, Meta } from "@storybook/react";
 import { ${STORY_NAME}Props } from "./_types";
 import { ${STORY_NAME} } from "./${STORY_NAME}";
 
@@ -45,7 +45,7 @@ export default {
   component: ${STORY_NAME},
 } as Meta;
 
-const Template: Story<${STORY_NAME}Props> = (args) => <${STORY_NAME} {...args} />;
+const Template: StoryFn<${STORY_NAME}Props> = (args) => <${STORY_NAME} {...args} />;
 
 export const ${STORY_NAME}Base = Template.bind({});
 ${STORY_NAME}Base.args = {};

package.json

@@ -19,10 +19,11 @@
     "copy-files": "copyfiles -u 1 src/**/*.html src/**/*.css src/**/*.scss src/**/*.d.ts src/*.d.ts  dist/",
     "build": "npm run clean && rollup -c",
     "release": "npx auto shipit --base-branch=main",
-    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public",
+    "storybook": "storybook dev",
+    "build-storybook": "storybook build",
     "test": "react-scripts test",
-    "test-ct": "playwright test -c playwright-ct.config.ts"
+    "test-ct": "playwright test -c playwright-ct.config.ts",
+    "tsc": "tsc"
   },
   "eslintConfig": {
     "extends": [
@@ -63,12 +64,14 @@
     "@playwright/experimental-ct-react17": "^1.40.1",
     "@playwright/test": "^1.40.1",
     "@rollup/plugin-image": "^2.1.1",
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-essentials": "^6.2.9",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/node-logger": "^6.2.9",
-    "@storybook/preset-create-react-app": "^3.1.7",
-    "@storybook/react": "^6.2.9",
+    "@storybook/addon-actions": "^8.0.5",
+    "@storybook/addon-essentials": "^8.0.5",
+    "@storybook/addon-links": "^8.0.5",
+    "@storybook/addon-mdx-gfm": "^8.0.5",
+    "@storybook/node-logger": "^8.0.5",
+    "@storybook/preset-create-react-app": "^8.0.5",
+    "@storybook/react": "^8.0.5",
+    "@storybook/react-webpack5": "^8.0.5",
     "@svgr/rollup": "^6.2.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
@@ -90,14 +93,14 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^18.2.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5",
     "rimraf": "^3.0.2",
     "rollup": "^2.53.1",
     "rollup-plugin-typescript2": "^0.30.0",
-    "storybook-addon-designs": "^6.0.0",
+    "storybook": "^8.0.5",
     "styled-components": "^6",
     "tslib": "^2.3.0",
-    "typed-scss-modules": "^4.1.1",
+    "typed-scss-modules": "^8.0.1",
     "typescript": "^4.2.2"
   },
   "babel": {
@@ -123,5 +126,9 @@
   "bugs": {
     "url": "https://github.com/AppQuality/appquality-design-system/issues"
   },
-  "homepage": "https://github.com/AppQuality/appquality-design-system#readme"
+  "homepage": "https://github.com/AppQuality/appquality-design-system#readme",
+  "resolutions": {
+    "jackspeak": "2.1.1",
+    "@types/mime": "3.0.4"
+  }
 }

src/stories/DateInput/DateInput.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { useState } from "react";
 import { DateInput } from ".";
 import { ErrorMessageWrapper } from "../form/Form";
@@ -8,7 +8,7 @@ export default {
   component: DateInput,
 } as Meta;
 
-const DatepickerTemplate: Story = (args) => {
+const DatepickerTemplate: StoryFn = (args) => {
   function getEighteenYearsAgo(): string {
     const date = new Date();
     date.setFullYear(date.getFullYear() - 18);