diff --git a/.storybook/main.ts b/.storybook/main.ts index deb3d805e..e7013e5f9 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,34 +1,34 @@ -const chromaticTestStories = ['../src/**/*.stories.spec.@(tsx|mdx)']; -const storybookStories = ['./**/*.stories.@(tsx|mdx)', '../src/**/*.stories.@(tsx|mdx)']; - +const chromaticTestStories = ['../src/**/__tests__/*.stories.@(tsx|mdx)']; +const storybookStories = ['./**/*.stories.@(tsx|mdx)', '../src/components/*/*.stories.@(tsx|mdx)']; module.exports = { stories: process.env.CHROMATIC ? chromaticTestStories : storybookStories, addons: [ '@storybook/addon-backgrounds', - 'storybook-addon-designs', + '@storybook/addon-designs', '@storybook/addon-docs', '@storybook/addon-controls', { - name: '@storybook/addon-postcss', + name: '@storybook/addon-styling', options: { - postcssLoaderOptions: { + postCss: { implementation: require('postcss'), }, - cssLoaderOptions: { - sourceMap: true, - modules: { - localIdentName: '[name]__[local]___[hash:base64:5]', - }, - importLoaders: 1, + cssModules: { + localIdentName: '[name]__[local]___[hash:base64:5]', }, }, }, + '@storybook/addon-mdx-gfm', ], features: { // Use babel config from project root .babelrc file babelModeV7: true, }, - core: { - builder: 'webpack5', + framework: { + name: '@storybook/react-webpack5', + options: {}, + }, + docs: { + autodocs: true, }, }; diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 7144357a5..3f85fccda 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,76 +1,57 @@ -import { addDecorator, addParameters } from '@storybook/react'; -import { withDesign } from 'storybook-addon-designs'; +import { Preview } from '@storybook/react'; import { COLOR } from '../src/constants'; import '../src/index.css'; import theme from './theme'; -import { - ABOUT_AHOY, - CHANGELOG, - COMPOSITIONS, - FOUNDATION, - LOW_LEVEL_BLOCKS, - MARKETING, - MID_LEVEL_BLOCKS, - PLAYGROUND, -} from './utils'; -addParameters({ - backgrounds: { - values: [ - { name: 'Aqua lightest', value: COLOR.AQUA.LIGHTEST }, - { name: 'Neutral light', value: COLOR.NEUTRAL.LIGHT }, - { name: 'Gold lightest', value: COLOR.GOLD.LIGHTEST }, - { name: 'Mint lightest', value: COLOR.MINT.LIGHTEST }, - { name: 'Ruby lightest', value: COLOR.RUBY.LIGHTEST }, - { name: 'Teal lightest', value: COLOR.TEAL.LIGHTEST }, - { name: 'Violet lightest', value: COLOR.VIOLET.LIGHTEST }, - { name: 'Teal darkest', value: COLOR.TEAL.DARKEST }, - ], - }, -}); - -addParameters({ - options: { - storySort: { - order: [ - ABOUT_AHOY, - CHANGELOG, - FOUNDATION, - LOW_LEVEL_BLOCKS, - MID_LEVEL_BLOCKS, - COMPOSITIONS, - MARKETING, - PLAYGROUND, +const preview: Preview = { + parameters: { + backgrounds: { + values: [ + { name: 'Aqua lightest', value: COLOR.AQUA.LIGHTEST }, + { name: 'Neutral light', value: COLOR.NEUTRAL.LIGHT }, + { name: 'Gold lightest', value: COLOR.GOLD.LIGHTEST }, + { name: 'Mint lightest', value: COLOR.MINT.LIGHTEST }, + { name: 'Ruby lightest', value: COLOR.RUBY.LIGHTEST }, + { name: 'Teal lightest', value: COLOR.TEAL.LIGHTEST }, + { name: 'Violet lightest', value: COLOR.VIOLET.LIGHTEST }, + { name: 'Teal darkest', value: COLOR.TEAL.DARKEST }, ], }, - }, -}); - -addParameters({ - docs: { - theme, - /** - * @todo temporary workaround to avoid JSDOC parameters from being rendered - * remove once there are no longer any @type annotations in any javascript files - */ - description: { - component: ' ', + options: { + storySort: { + order: [ + 'About Ahoy', + 'Changelog', + 'Foundation', + 'Low level blocks', + 'Mid level blocks', + 'Compositions', + 'Marketing', + 'Playground', + ], + }, }, - }, -}); - -addParameters({ - viewMode: 'docs', - previewTabs: { - canvas: { - hidden: process.env.STORYBOOK_HIDE_CANVAS_TAB === 'true', + docs: { + theme, + /** + * @todo temporary workaround to avoid JSDOC parameters from being rendered + * remove once there are no longer any @type annotations in any javascript files + */ + description: { + component: ' ', + }, }, - 'storybook/docs/panel': { - hidden: process.env.STORYBOOK_HIDE_DOCS_TAB === 'true', + viewMode: 'docs', + previewTabs: { + canvas: { + hidden: process.env.STORYBOOK_HIDE_CANVAS_TAB === 'true', + }, + 'storybook/docs/panel': { + hidden: process.env.STORYBOOK_HIDE_DOCS_TAB === 'true', + }, }, }, -}); +}; -// addon-designs -addDecorator(withDesign()); +export default preview; diff --git a/.storybook/stories/about.stories.mdx b/.storybook/stories/about.stories.mdx index dbc572ca6..df7de4c11 100644 --- a/.storybook/stories/about.stories.mdx +++ b/.storybook/stories/about.stories.mdx @@ -1,7 +1,6 @@ import { Meta } from '@storybook/addon-docs'; -import { ABOUT_AHOY } from '../utils'; - + # Ahoy diff --git a/.storybook/stories/changelog.stories.mdx b/.storybook/stories/changelog.stories.mdx index ee4dd2e27..fdf7db5b3 100644 --- a/.storybook/stories/changelog.stories.mdx +++ b/.storybook/stories/changelog.stories.mdx @@ -1,7 +1,6 @@ -import { Meta, Description } from '@storybook/addon-docs'; - -import changelog from '../../CHANGELOG.md'; +import { Meta, Markdown } from '@storybook/blocks'; +import Changelog from '../../CHANGELOG.md'; - +{Changelog} diff --git a/.storybook/stories/colors.stories.mdx b/.storybook/stories/colors.stories.mdx index 7060522ff..75e6830bd 100644 --- a/.storybook/stories/colors.stories.mdx +++ b/.storybook/stories/colors.stories.mdx @@ -1,7 +1,6 @@ import { Meta } from '@storybook/addon-docs'; -import { FOUNDATION } from '../utils'; - + # Colors diff --git a/.storybook/stories/playground/dialogs.stories.tsx b/.storybook/stories/playground/dialogs.stories.tsx index e52b973ff..733c84899 100644 --- a/.storybook/stories/playground/dialogs.stories.tsx +++ b/.storybook/stories/playground/dialogs.stories.tsx @@ -1,10 +1,9 @@ import React, { useState } from 'react'; -import { addStoryInGroup, PLAYGROUND } from '../../utils'; import { Box, Button, DataGrid, Dialog, Input, TextBody } from '../../../src'; import { rows3 } from '../../../src/static/data/datagrid'; export default { - title: addStoryInGroup(PLAYGROUND, 'Dialog'), + title: 'Playground / Dialog', parameters: { info: { diff --git a/.storybook/stories/playground/forms.stories.tsx b/.storybook/stories/playground/forms.stories.tsx index b98005db7..65b8df15e 100644 --- a/.storybook/stories/playground/forms.stories.tsx +++ b/.storybook/stories/playground/forms.stories.tsx @@ -1,9 +1,8 @@ import React from 'react'; import { Box, Button, ButtonGroup, Input, Label, NumericInput, Textarea } from '../../../src'; -import { addStoryInGroup, PLAYGROUND } from '../../utils'; export default { - title: addStoryInGroup(PLAYGROUND, 'Forms'), + title: 'Playground / Forms', parameters: { info: { diff --git a/.storybook/stories/playground/numericInput.stories.tsx b/.storybook/stories/playground/numericInput.stories.tsx index 9ffd7762b..d549cf381 100644 --- a/.storybook/stories/playground/numericInput.stories.tsx +++ b/.storybook/stories/playground/numericInput.stories.tsx @@ -1,10 +1,9 @@ import React, { ChangeEvent, useState } from 'react'; -import { addStoryInGroup, PLAYGROUND } from '../../utils'; import { Banner, Box, NumericInput, UITextBody } from '../../../src'; import { useCallback } from '@storybook/addons'; export default { - title: addStoryInGroup(PLAYGROUND, 'Forms'), + title: 'Playground / Forms', parameters: { info: { diff --git a/.storybook/stories/playground/zIndexes.stories.tsx b/.storybook/stories/playground/zIndexes.stories.tsx index e84e99522..e6471e8cf 100644 --- a/.storybook/stories/playground/zIndexes.stories.tsx +++ b/.storybook/stories/playground/zIndexes.stories.tsx @@ -25,10 +25,9 @@ import { import { rows1 } from '../../../src/static/data/datagrid'; import { LANGUAGES } from '../../../src/static/data/languages'; import options, { groupedOptions } from '../../../src/static/data/select'; -import { addStoryInGroup, PLAYGROUND } from '../../utils'; export default { - title: addStoryInGroup(PLAYGROUND, 'Depths'), + title: 'Playground / Depts', parameters: { info: { @@ -51,93 +50,101 @@ const customFormatDate = (date, locale) => { const MyDatagrid = ({ ...props }) => { const [selectValue, setSelectValue] = useState