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