refactor: storybook migration progress

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "files.eol": "\n"
+}

packages/core-components/.storybook/main.js → packages/core-components/.storybook/main.ts

@@ -2,15 +2,9 @@ const debugStories = ['checkbox'].map(
   storyName => `../src/**/${storyName}.stories.tsx`,
 );
 
-const stories = [
-  '../src/**/*.stories.mdx',
-  '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)',
-];
+const stories = ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'];
 
-module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
+const config = {
   stories: [...stories],
   // test-runner work around, uncomment this line to run only tests in specific components:
   // stories: [...debugStories],
@@ -20,10 +14,7 @@ module.exports = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
-    {
-      name: "@storybook/addon-docs",
-      options: { transcludeMarkdown: true },
-    },
   ],
-  framework: '@storybook/web-components',
+  framework: '@storybook/web-components-vite',
 };
+export default config;

packages/core-components/.storybook/preview.ts

@@ -0,0 +1,33 @@
+import { defineCustomElements } from '../dist/loader';
+import { Preview } from '@storybook/web-components';
+defineCustomElements();
+
+import './storybook.scss';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    options: {
+      storySort: {
+        order: [
+          'Overview',
+          'Getting Started',
+          'Guidelines',
+          'Components',
+          ['Content', 'Interaction', 'Form', 'Status & Feedback'],
+        ],
+      },
+      showPanel: true,
+    },
+    backgrounds: {
+      values: [{ name: 'inverse-bg', value: '#333333' }],
+    },
+  },
+};
+export default preview;

packages/core-components/package.json

@@ -20,8 +20,7 @@
   "collection:main": "dist/collection/index.js",
   "unpkg": "dist/b2b-core-components/b2b-core-components.esm.js",
   "files": [
-    "dist/",
-    "loader/"
+    "dist/"
   ],
   "scripts": {
     "build": "npm run build:icons && stencil build --docs",
@@ -36,32 +35,32 @@
     "copy-md-changelog": "copyfiles --flat ../../CHANGELOG.md src/docs/getting-started",
     "copy-md-guidelines": "copyfiles --flat ../../DEV-GUIDELINES.md src/docs/guidelines",
     "copy-md-files": "npm run copy-md-changelog && npm run copy-md-guidelines",
-    "storybook": "npm run copy-md-files && start-storybook -p 6006",
-    "build:storybook": "npm run copy-md-files && build-storybook -o docs-build/design-system"
+    "storybook": "npm run copy-md-files && storybook dev -p 6006",
+    "build:storybook": "npm run copy-md-files && storybook build -o docs-build/design-system"
   },
   "dependencies": {
     "@otto-de/b2b-tokens": "1.5.0",
     "@stencil-community/eslint-plugin": "^0.5.0",
-    "@stencil/core": "^4.0.3"
+    "@stencil/core": "^3.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.21.3",
     "@fullhuman/postcss-purgecss": "^5.0.0",
     "@stencil/postcss": "^2.1.0",
     "@stencil/react-output-target": "^0.4.0",
     "@stencil/sass": "^3.0.0",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-docs": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/addon-actions": "^7.2.1",
+    "@storybook/addon-docs": "^7.2.1",
+    "@storybook/addon-essentials": "^7.2.1",
+    "@storybook/addon-interactions": "^7.2.1",
+    "@storybook/addon-links": "^7.2.1",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/test-runner": "^0.9.4",
-    "@storybook/testing-library": "^0.0.13",
-    "@storybook/theming": "^6.5.16",
-    "@storybook/web-components": "^6.5.16",
+    "@storybook/preview-api": "^7.2.1",
+    "@storybook/test-runner": "^0.13.0",
+    "@storybook/testing-library": "^0.2.0",
+    "@storybook/theming": "^7.2.1",
+    "@storybook/web-components": "^7.2.1",
+    "@storybook/web-components-vite": "^7.2.1",
     "@types/jest": "^27.5.2",
     "@types/mdx": "^2.0.5",
     "@types/postcss-import": "^14.0.0",
@@ -76,8 +75,11 @@
     "lint-staged": "^13.2.0",
     "postcss-import": "^15.1.0",
     "prettier": "^2.8.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "sass": "^1.57.1",
     "sass-loader": "^13.3.0",
+    "storybook": "next",
     "style-loader": "^3.3.2",
     "stylelint": "^15.6.3",
     "stylelint-config-standard": "^33.0.0",

packages/core-components/scripts/stencil/generate-storybook-args.ts

@@ -11,7 +11,7 @@ import {
   JsonDocsComponent,
   JsonDocsProp,
 } from '@stencil/core/internal/stencil-public-docs';
-import { ArgTypes, InputType } from '@storybook/csf/dist/story';
+import type { ArgTypes, InputType } from '@storybook/csf/dist';
 
 const hasOptions = prop => prop.values.length > 1;
 const isBoolean = prop => prop.type === 'boolean';

packages/core-components/src/components/alert/alert.docs.mdx

@@ -1,16 +1,16 @@
 import {
-  Story,
+  Meta,
+  Controls,
+  Primary,
   ArgsTable,
   PRIMARY_STORY,
-  Primary,
-  Canvas,
-} from '@storybook/addon-docs';
+} from '@storybook/blocks';
 
-# Alert Component
+import * as AlertStories from './alert.stories';
 
-<Canvas columns={3} withSource="open" withToolbar={false}>
-  <Story id="components-status-feedback-alert--story-010-info" />
-</Canvas>
+<Meta of={AlertStories} />
+
+# Alert Component
 
 The alert allows the user to see contextual feedback and information.
 There are the following alert variants:
@@ -19,20 +19,20 @@ There are the following alert variants:
 
 **_Info:_** For attributes with an informative character, such as "Inquired" for a service or "Submitted" for a briefing.
 
-<Story id="components-status-feedback-alert--story-010-info" />
+<b2b-alert opened size="large" type="info">An info alert.</b2b-alert>
 
 **_Error:_** For critical issues that require the user's attention and possible actions. This alert type should be
 used sparingly.
 
-<Story id="components-status-feedback-alert--story-040-error" />
+<b2b-alert opened size="large" type="error">An error alert.</b2b-alert>
 
 **_Warning:_** For topics that require the user's attention but the issue is not critical.
 
-<Story id="components-status-feedback-alert--story-030-warning" />
+<b2b-alert opened size="large" type="warning">A warning alert.</b2b-alert>
 
 **_Success:_** For successful or completed status if it is important for the user to achieve it.
 
-<Story id="components-status-feedback-alert--story-020-success" />
+<b2b-alert opened size="large" type="success">A success alert.</b2b-alert>
 
 **_There is the possibility of including a "closing-X" in the alert, by which the message can be hidden. The "closing-X" cannot be used for error alerts._**
 
@@ -52,6 +52,8 @@ that come with the different alert types.
 
 ## Attributes
 
+## Attributes
+
 <ArgsTable story={PRIMARY_STORY} />
 Changes made to the attributes in the above table will reflect in the example below:
 <Primary />

packages/core-components/src/components/alert/alert.stories.tsx

@@ -1,10 +1,8 @@
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit-html';
 import { screen } from '@storybook/testing-library';
-import alertDocs from './alert.docs.mdx';
 import { getArgTypes } from '../../docs/config/utils';
-// @ts-ignore IDE can not find this dep, but storybook is happy
-import { useArgs } from '@storybook/client-api';
+import { useArgs } from '@storybook/preview-api';
 
 const Template: Story = ({
   type,
@@ -94,9 +92,4 @@ export default {
   title: 'Components/Status & Feedback/Alert',
   argTypes: alertArgs,
   viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: alertDocs,
-    },
-  },
 } as Meta;

packages/core-components/src/components/anchor/anchor.docs.mdx

@@ -4,7 +4,12 @@ import {
   PRIMARY_STORY,
   Primary,
   Canvas,
-} from '@storybook/addon-docs';
+  Meta,
+} from '@storybook/blocks';
+
+import * as AnchorStories from './anchor.stories';
+
+<Meta of={AnchorStories} />
 
 # Anchor Component
 

packages/core-components/src/components/anchor/anchor.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit-html';
-import anchorDocs from './anchor.docs.mdx';
 import { getArgTypes } from '../../docs/config/utils';
 
 const Template: Story = ({ href, download, size, target }) => {
@@ -45,9 +44,4 @@ export default {
   title: 'Components/Interaction/Anchor',
   argTypes: anchorArgs,
   viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: anchorDocs,
-    },
-  },
 } as Meta;

packages/core-components/src/components/button/button.docs.mdx

@@ -5,7 +5,12 @@ import {
   Primary,
   Source,
   Canvas,
-} from '@storybook/addon-docs';
+  Meta,
+} from '@storybook/blocks';
+
+import * as ButtonStories from './button.stories';
+
+<Meta of={ButtonStories} />
 
 # Button Component
 

packages/core-components/src/components/button/button.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit-html';
-import buttonDocs from './button.docs.mdx';
 import { getArgTypes } from '../../docs/config/utils';
 
 const Template: Story = ({
@@ -89,7 +88,7 @@ story050IconEnd.args = {
 story050IconEnd.storyName = 'Button With Icon End';
 
 export const story055IconStartPali = Template.bind({});
-const iconStartPaliContent = html`<i class="obc_icon-check obc_mr-1"></i> Icon
+const iconStartPaliContent = `<i class="obc_icon-check obc_mr-1"></i> Icon
   Button`;
 story055IconStartPali.args = {
   ...defaultArgs,
@@ -141,9 +140,4 @@ export default {
     },
   },
   viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: buttonDocs,
-    },
-  },
 } as Meta;

packages/core-components/src/components/card/card.docs.mdx

@@ -5,7 +5,12 @@ import {
   Primary,
   Source,
   Canvas,
-} from '@storybook/addon-docs';
+  Meta,
+} from '@storybook/blocks';
+
+import * as CardStories from './card.stories';
+
+<Meta of={CardStories} />
 
 # Card Component
 

packages/core-components/src/components/card/card.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit-html';
-import cardDocs from './card.docs.mdx';
 import { getArgTypes } from '../../docs/config/utils';
 
 const Template: Story = ({ disabled, href, target }) => {
@@ -46,9 +45,4 @@ export default {
     ...cardArgs,
   },
   viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: cardDocs,
-    },
-  },
 } as Meta;

packages/core-components/src/components/checkbox-group/checkbox-group.docs.mdx

@@ -5,7 +5,12 @@ import {
   Primary,
   Source,
   Canvas,
-} from '@storybook/addon-docs';
+  Meta,
+} from '@storybook/blocks';
+
+import * as CheckboxGroupStories from './checkbox-group.stories';
+
+<Meta of={CheckboxGroupStories} />
 
 # Checkbox Group