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) =>