From 77721c3b6d04a34b2f20a8954cde8521b629b02f Mon Sep 17 00:00:00 2001 From: Nathan Vasse Date: Fri, 12 May 2023 16:03:16 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(react)=20migrate=20to=20Stor?= =?UTF-8?q?ybook=207?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This new release comes with breaking changes for stories and mdx docs. --- packages/react/.storybook/main.cjs | 34 - packages/react/.storybook/main.ts | 33 + packages/react/package.json | 16 +- .../src/components/Button/index.stories.mdx | 8 +- .../src/components/Button/index.stories.tsx | 189 +- .../src/components/DataGrid/index.stories.mdx | 12 +- .../src/components/DataGrid/index.stories.tsx | 4 +- .../Forms/Checkbox/index.stories.mdx | 20 +- .../Forms/Checkbox/index.stories.tsx | 119 +- .../components/Forms/Field/index.stories.tsx | 43 +- .../components/Forms/Input/index.stories.mdx | 24 +- .../components/Forms/Input/index.stories.tsx | 187 +- .../Forms/LabelledBox/index.stories.tsx | 17 +- .../components/Forms/Radio/index.stories.mdx | 20 +- .../components/Forms/Radio/index.stories.tsx | 110 +- .../components/Forms/Select/index.stories.mdx | 14 +- .../components/Forms/Select/mono.stories.tsx | 161 +- .../src/components/Loader/index.stories.tsx | 12 +- .../components/Pagination/index.stories.mdx | 8 +- .../components/Pagination/index.stories.tsx | 4 +- packages/react/src/docs/colors.stories.mdx | 22 +- packages/react/src/docs/spacings.stories.mdx | 34 +- packages/react/src/docs/typo.stories.mdx | 30 +- yarn.lock | 5705 ++++++----------- 24 files changed, 2639 insertions(+), 4187 deletions(-) delete mode 100644 packages/react/.storybook/main.cjs create mode 100644 packages/react/.storybook/main.ts diff --git a/packages/react/.storybook/main.cjs b/packages/react/.storybook/main.cjs deleted file mode 100644 index 858fdf5..0000000 --- a/packages/react/.storybook/main.cjs +++ /dev/null @@ -1,34 +0,0 @@ -const viteTsconfig = require('vite-tsconfig-paths'); -const tsconfigPaths = viteTsconfig.default; -const { mergeConfig } = require('vite'); - -module.exports = { - 'stories': [ - '../src/**/*.stories.mdx', - '../src/**/*.stories.@(js|jsx|ts|tsx)', - ], - 'addons': [ - '@storybook/addon-links', - '@storybook/addon-essentials', - '@storybook/addon-interactions', - '@storybook/addon-a11y', - '@storybook/preset-scss' - ], - 'framework': '@storybook/react', - 'core': { - 'builder': '@storybook/builder-vite', - }, - staticDirs: [ - '../src', - ], - 'features': { - 'storyStoreV7': true, - }, - async viteFinal(config) { - const finalConfig = mergeConfig(config, { - plugins: [tsconfigPaths()], - }); - finalConfig.base = 'https://openfun.github.io/cunningham'; - return finalConfig; - }, -}; diff --git a/packages/react/.storybook/main.ts b/packages/react/.storybook/main.ts new file mode 100644 index 0000000..a84350a --- /dev/null +++ b/packages/react/.storybook/main.ts @@ -0,0 +1,33 @@ +import { StorybookConfig } from "@storybook/react-vite"; +import remarkGfm from "remark-gfm"; + +const config: StorybookConfig = { + stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], + addons: [ + "@storybook/addon-links", + "@storybook/addon-essentials", + "@storybook/addon-interactions", + "@storybook/addon-a11y", + "@storybook/preset-scss", + { + name: "@storybook/addon-docs", + options: { + mdxPluginOptions: { + mdxCompileOptions: { + remarkPlugins: [remarkGfm], + }, + }, + }, + }, + ], + framework: { + name: "@storybook/react-vite", + options: {}, + }, + staticDirs: ["../src"], + features: { + storyStoreV7: true, + }, +}; + +export default config; diff --git a/packages/react/package.json b/packages/react/package.json index 9166de5..32fe850 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -34,7 +34,7 @@ "test": "FORCE_COLOR=1 vitest run", "test-watch": "vitest", "coverage": "vitest run --coverage", - "storybook": "start-storybook -p 6006", + "storybook": "storybook dev -p 6006", "deploy-storybook": "storybook-to-ghpages" }, "dependencies": { @@ -58,14 +58,14 @@ "@faker-js/faker": "8.0.0", "@openfun/cunningham-tokens": "*", "@openfun/typescript-configs": "*", - "@storybook/addon-a11y": "7.0.10", - "@storybook/addon-actions": "7.0.10", - "@storybook/addon-essentials": "7.0.10", - "@storybook/addon-interactions": "7.0.10", - "@storybook/addon-links": "7.0.10", - "@storybook/builder-vite": "0.3.0", + "@storybook/addon-a11y": "7.0.11", + "@storybook/addon-actions": "7.0.11", + "@storybook/addon-essentials": "7.0.11", + "@storybook/addon-interactions": "7.0.11", + "@storybook/addon-links": "7.0.11", "@storybook/preset-scss": "1.0.3", "@storybook/react": "7.0.11", + "@storybook/react-vite": "7.0.11", "@storybook/storybook-deployer": "2.8.16", "@storybook/testing-library": "0.1.0", "@testing-library/dom": "9.2.0", @@ -82,8 +82,10 @@ "css-loader": "6.7.3", "glob": "10.2.3", "jsdom": "22.0.0", + "remark-gfm": "3.0.1", "sass": "1.62.1", "sass-loader": "13.2.2", + "storybook": "7.0.11", "style-loader": "3.3.2", "typescript": "5.0.4", "vite": "4.3.5", diff --git a/packages/react/src/components/Button/index.stories.mdx b/packages/react/src/components/Button/index.stories.mdx index 4a0f604..a709ca6 100644 --- a/packages/react/src/components/Button/index.stories.mdx +++ b/packages/react/src/components/Button/index.stories.mdx @@ -29,17 +29,17 @@ You can use icons within the button by passing the icon name as a prop. > Use the attribute `iconPosition` to position the icon on the left or right side of the button. The default is `left`. - + - + You can also use button with only an icon. - + @@ -49,7 +49,7 @@ The button can be disabled. The disabled button will render the same no matter w > Keep in the mind that a disabled button will never call `onClick` if it is provided. - + diff --git a/packages/react/src/components/Button/index.stories.tsx b/packages/react/src/components/Button/index.stories.tsx index 3b378ed..3959b36 100644 --- a/packages/react/src/components/Button/index.stories.tsx +++ b/packages/react/src/components/Button/index.stories.tsx @@ -1,4 +1,4 @@ -import { ComponentMeta, ComponentStory } from "@storybook/react"; +import { Meta } from "@storybook/react"; import React from "react"; import { Button } from "./index"; @@ -10,111 +10,118 @@ export default { control: "boolean", }, }, -} as ComponentMeta; +} as Meta; -const Template: ComponentStory = (args) =>