update examples

Author: yannbf

.github/workflows/test.yml

@@ -0,0 +1,38 @@
+name: Tests
+
+on: [push, pull_request]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x]
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+
+      - name: Install dependencies
+        uses: bahmutov/npm-install@v1
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run tests in webpack example
+        run: |
+          yarn build
+          yarn test-storybook:ci-coverage
+        working-directory: examples/webpack5
+
+      - name: Run tests in vite example
+        run: |
+          yarn build
+          yarn test-storybook:ci-coverage
+        working-directory: examples/vite
+
+      - name: Generate code coverage
+        uses: codecov/codecov-action@v3
+        with:
+          verbose: true

.yarn/install-state.gz

@@ -0,0 +1 @@
+nodeLinker: node-modules

.yarnrc.yml

@@ -1,15 +1,14 @@
-module.exports = {
+export default {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+
   addons: [
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
     "@storybook/addon-coverage",
   ],
+
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
-  docs: {
-    autodocs: true,
-  },
 };

examples/vite/.storybook/main.js renamed to examples/vite/.storybook/main.ts

@@ -4,7 +4,6 @@ export const decorators = [(StoryFn) => {
 }]
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
       color: /(background|color)$/i,

examples/vite/.storybook/preview.js renamed to examples/vite/.storybook/preview.ts

@@ -8,7 +8,9 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "storybook": "npx storybook dev -p 6006",
-    "build-storybook": "npx storybook build"
+    "build-storybook": "npx storybook build",
+    "test-storybook": "test-storybook --coverage",
+    "test-storybook:ci-coverage": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx serve storybook-static -l 6006\" \"wait-on tcp:6006 && yarn test-storybook --coverage\""
   },
   "resolutions": {
     "jackspeak": "2.1.1"
@@ -18,18 +20,20 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "7.4.2",
-    "@storybook/addon-interactions": "7.4.2",
     "@storybook/addon-coverage": "link:../..",
-    "@storybook/react": "7.4.2",
-    "@storybook/react-vite": "7.4.2",
-    "@storybook/test-runner": "^0.13.0",
-    "@storybook/testing-library": "^0.2.1",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@storybook/test-runner": "^0.21.0",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.1.0",
-    "storybook": "7.4.2",
+    "concurrently": "^9.1.0",
+    "storybook": "^8.4.7",
     "typescript": "^4.6.4",
-    "vite": "^4.2.1"
+    "vite": "^4.2.1",
+    "wait-on": "^8.0.1"
   }
 }

examples/vite/.yarn/install-state.gz

@@ -1,41 +1,42 @@
-import React from 'react';
-import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
+import type { StoryFn, Meta } from "@storybook/react";
 
-import { Button } from './Button';
+import { Button } from "./Button";
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
-  title: 'Example/Button',
+  title: "Example/Button",
   component: Button,
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
-    backgroundColor: { control: 'color' },
+    backgroundColor: { control: "color" },
   },
-} as ComponentMeta<typeof Button>;
+} as Meta<typeof Button>;
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />;
+const Template: StoryFn<typeof Button> = (args) => (
+  <Button {...args} />
+);
 
 export const Primary = Template.bind({});
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 Primary.args = {
   primary: true,
-  label: 'Button',
+  label: "Button",
 };
 
 export const Secondary = Template.bind({});
 Secondary.args = {
-  label: 'Button',
+  label: "Button",
 };
 
 export const Large = Template.bind({});
 Large.args = {
-  size: 'large',
-  label: 'Button',
+  size: "large",
+  label: "Button",
 };
 
 export const Small = Template.bind({});
 Small.args = {
-  size: 'small',
-  label: 'Button',
+  size: "small",
+  label: "Button",
 };

examples/vite/package.json

@@ -1,23 +1,24 @@
-import React from 'react';
-import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
+import type { StoryFn, Meta } from "@storybook/react";
 
-import { Header } from './Header';
+import { Header } from "./Header";
 
 export default {
-  title: 'Example/Header',
+  title: "Example/Header",
   component: Header,
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'fullscreen',
+    layout: "fullscreen",
   },
-} as ComponentMeta<typeof Header>;
+} as Meta<typeof Header>;
 
-const Template: ComponentStoryFn<typeof Header> = (args) => <Header {...args} />;
+const Template: StoryFn<typeof Header> = (args) => (
+  <Header {...args} />
+);
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
   user: {
-    name: 'Jane Doe',
+    name: "Jane Doe",
   },
 };