diff --git a/.storybook/main.js b/.storybook/main.js index e64368f9..9e15dec2 100644 --- a/.storybook/main.js +++ b/.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, + }, }; diff --git a/.storybook/preview.js b/.storybook/preview.js index 26ec9f31..cf7ba71b 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,19 +1,19 @@ 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) => (
- +
@@ -21,7 +21,6 @@ export const decorators = [ ]; export const parameters = { - actions: { argTypesRegex: "^on[A-Z].*" }, layout: "fullscreen", controls: { matchers: { diff --git a/generate-story.sh b/generate-story.sh index 7dfb7305..6a2bebf8 100755 --- a/generate-story.sh +++ b/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 = {}; diff --git a/package.json b/package.json index 511be6fe..c210c7e2 100644 --- a/package.json +++ b/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" + } } diff --git a/src/stories/DateInput/DateInput.stories.tsx b/src/stories/DateInput/DateInput.stories.tsx index 66e6fdf5..d33c280a 100644 --- a/src/stories/DateInput/DateInput.stories.tsx +++ b/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); diff --git a/src/stories/Introduction.stories.mdx b/src/stories/Introduction.stories.mdx deleted file mode 100644 index 964152ca..00000000 --- a/src/stories/Introduction.stories.mdx +++ /dev/null @@ -1,219 +0,0 @@ -import { Meta } from "@storybook/addon-docs/blocks"; -import Code from "../shared/assets/code-brackets.svg"; -import Colors from "../shared/assets/colors.svg"; -import Comments from "../shared/assets/comments.svg"; -import Direction from "../shared/assets/direction.svg"; -import Flow from "../shared/assets/flow.svg"; -import Plugin from "../shared/assets/plugin.svg"; -import Repo from "../shared/assets/repo.svg"; -import StackAlt from "../shared/assets/stackalt.svg"; - - - - - -# Welcome to Storybook - -Storybook helps you build UI components in isolation from your app's business logic, data, and context. -That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA. - -Browse example stories now by navigating to them in the sidebar. -View their code in the `src/stories` directory to learn how they work. -We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages. - -
Configure
- -
- - plugin - - Presets for popular tools - Easy setup for TypeScript, SCSS and more. - - - - Build - - Build configuration - How to customize webpack and Babel - - - - colors - - Styling - How to load and configure CSS libraries - - - - flow - - Data - Providers and mocking for data libraries - - -
- -
Learn
- -
- - repo - - Storybook documentation - Configure, customize, and extend - - - - direction - - In-depth guides - Best practices from leading teams - - - - code - - GitHub project - View the source and add issues - - - - comments - - Discord chat - Chat with maintainers and the community - - -
- -
- TipEdit the Markdown in{" "} - src/stories/Introduction.stories.mdx -
diff --git a/src/stories/Steps/Steps.stories.tsx b/src/stories/Steps/Steps.stories.tsx index 74632d69..5e10ea7d 100644 --- a/src/stories/Steps/Steps.stories.tsx +++ b/src/stories/Steps/Steps.stories.tsx @@ -1,6 +1,6 @@ -import { Story, Meta } from "@storybook/react"; -import { Steps, StepsProps } from "./Steps"; +import { Meta, StoryFn } from "@storybook/react"; import { useState } from "react"; +import { Steps, StepsProps } from "./Steps"; export default { title: "Steps", @@ -28,7 +28,7 @@ const data = [ }, ]; -const Template: Story = (args) => { +const Template: StoryFn = (args) => { return ( {data.map((item, index) => ( @@ -42,7 +42,7 @@ const Template: Story = (args) => { ); }; -const TemplateClickable: Story = (args) => { +const TemplateClickable: StoryFn = (args) => { const [active, setActive] = useState(0); return ( = (args) => { ); }; -const TemplateClickableControl: Story = (args) => { +const TemplateClickableControl: StoryFn = (args) => { const [active, setActive] = useState(1); const handleChange = (index: number, current: number) => { diff --git a/src/stories/accordion/Accordion.stories.tsx b/src/stories/accordion/Accordion.stories.tsx index 341c9461..7f38777c 100644 --- a/src/stories/accordion/Accordion.stories.tsx +++ b/src/stories/accordion/Accordion.stories.tsx @@ -1,13 +1,13 @@ +import { Meta, StoryFn } from "@storybook/react"; import { Accordion } from "./Accordion"; import { AccordionProps } from "./_types"; -import { Story, Meta } from "@storybook/react"; export default { title: "Accordion", component: Accordion, } as Meta; -const Template: Story = (args) => { +const Template: StoryFn = (args) => { return ( Item 1 title is an h4}> diff --git a/src/stories/button/Button.stories.tsx b/src/stories/button/Button.stories.tsx index 8ba4faed..8790f8fc 100644 --- a/src/stories/button/Button.stories.tsx +++ b/src/stories/button/Button.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, Story } from "@storybook/react"; +import { Meta, StoryFn } from "@storybook/react"; import { ChevronLeft, ChevronRight, Search } from "react-bootstrap-icons"; import { ThemeProvider } from "styled-components"; import { aqBootstrapTheme } from "../theme/defaultTheme"; @@ -10,12 +10,12 @@ export default { component: Button, } as Meta; -const Template: Story = (args) => ( +const Template: StoryFn = (args) => (