Merge branch 'next-release'

teamleadercrm · Aug 22, 2023 · ae47312 · ae47312
2 parents 79e80a8 + 3d6578c
commit ae47312
Show file tree

Hide file tree

Showing 106 changed files with 4,374 additions and 6,407 deletions.
diff --git 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
@@ -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
@@ -1,7 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
-import { ABOUT_AHOY } from '../utils';
 
-<Meta title={ABOUT_AHOY} parameters={{ previewTabs: { canvas: { hidden: true } } }} />
+<Meta title="About Ahoy" parameters={{ previewTabs: { canvas: { hidden: true } } }} />
 
 # Ahoy
 

diff --git 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';
 
 <Meta title="Changelog" />
 
-<Description markdown={changelog} />
+<Markdown>{Changelog}</Markdown>
diff --git 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';
 
-<Meta title={`${FOUNDATION} / Colors`} parameters={{ previewTabs: { canvas: { hidden: true } } }} />
+<Meta title="Foundation / Colors" parameters={{ previewTabs: { canvas: { hidden: true } } }} />
 
 # Colors
 

diff --git 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
@@ -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
@@ -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: {