chore: update storybook version (#256)

Signed-off-by: yazhou <yazhouhu@yunify.com>

configs/storybook/main.js → configs/.storybook/main.js

@@ -1,16 +1,23 @@
+import { dirname, join } from 'path';
 /* eslint-disable no-param-reassign */
 const path = require('path');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin').default;
 
 module.exports = {
   stories: [
-    path.resolve(__dirname, '../../packages/**/*.story.@(ts|tsx)').replace(/\\/g, '/'),
+    path.resolve(__dirname, '../../packages/components/**/*.story.@(ts|tsx)').replace(/\\/g, '/'),
     // path.resolve(__dirname, './stories.tsx').replace(/\\/g, '/'),
   ],
-  addons: ['storybook-addon-turbo-build', '@storybook/addon-docs'],
+
+  addons: [
+    getAbsolutePath('storybook-addon-turbo-build'),
+    getAbsolutePath('@storybook/addon-docs'),
+  ],
+
   typescript: {
-    reactDocgen: false,
+    reactDocgen: true,
   },
+
   webpackFinal: async (config) => {
     config.resolve = {
       ...config.resolve,
@@ -24,8 +31,19 @@ module.exports = {
     };
 
     // Turn off docgen plugin as it breaks bundle with displayName
-    config.plugins.pop();
+    // config.plugins.pop();
 
     return config;
   },
+
+  framework: {
+    name: getAbsolutePath('@storybook/nextjs'),
+    options: {},
+  },
+
+  docs: {},
 };
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}

configs/storybook/preview.tsx → configs/.storybook/preview.tsx

@@ -11,3 +11,4 @@ export const decorators = [
     </KubedConfigProvider>
   ),
 ];
+export const tags = ['autodocs'];

package.json

@@ -21,7 +21,7 @@
     "build:icons": "cd packages/icons && npm run build",
     "jest": "jest",
     "clean": "rimraf packages/*/{esm,cjs,lib,dist} packages/**/*.tsbuildinfo",
-    "storybook": "esno scripts/storybook-start",
+    "storybook": "storybook dev -p 7001 -c configs/.storybook",
     "test": "npm run syncpack && npm run typecheck && npm run lint && npm run jest",
     "docs:docgen": "esno scripts/docgen",
     "release": "yarn build all && changeset publish"
@@ -35,17 +35,18 @@
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^2.4.2",
     "@rollup/plugin-typescript": "^8.2.1",
-    "@storybook/addon-docs": "^6.3.7",
-    "@storybook/react": "^6.3.7",
+    "@storybook/addon-docs": "^8.2.3",
+    "@storybook/nextjs": "^8.2.3",
+    "@storybook/react": "^8.2.3",
     "@sucrase/jest-plugin": "^2.1.0",
     "@testing-library/react-hooks": "^7.0.0",
     "@types/enzyme": "^3.10.8",
     "@types/fs-extra": "^9.0.11",
-    "@types/lodash": "^4.14.172",
     "@types/jest": "^26.0.23",
     "@types/jest-axe": "^3.5.1",
-    "@types/react": "^17.0.8",
-    "@types/react-dom": "^17.0.5",
+    "@types/lodash": "^4.14.172",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
     "@types/react-router-dom": "^5.1.7",
     "@types/react-transition-group": "^4.4.1",
     "@types/resize-observer-browser": "^0.1.5",
@@ -85,16 +86,17 @@
     "rollup-plugin-node-externals": "^2.2.0",
     "rollup-plugin-visualizer": "^5.5.0",
     "simple-git": "^2.39.0",
-    "storybook-addon-turbo-build": "^1.0.0-beta.0",
+    "storybook": "^8.2.3",
+    "storybook-addon-turbo-build": "^2.0.1",
     "syncpack": "^5.7.11",
     "tsconfig-paths-webpack-plugin": "^3.5.1",
     "typescript": "4.3.5",
     "yargs": "^17.0.1"
   },
   "dependencies": {
     "dayjs": "^1.10.7",
-    "prism-react-renderer": "^1.2.1",
     "lodash": "^4.17.21",
+    "prism-react-renderer": "^1.2.1",
     "react": "^18.3.1",
     "react-router-dom": "^5.2.0",
     "styled-components": "^5.3.0"

packages/components/src/Button/Button.story.tsx

@@ -1,47 +1,52 @@
 import * as React from 'react';
-import { storiesOf } from '@storybook/react';
 import { Add } from '@kubed/icons';
 import { Group } from '../Group/Group';
 import { Button } from './Button';
 
-storiesOf('Components/Button', module)
-  .addParameters({ component: Button })
-  .add('Demos', () => (
-    <Group spacing="xl">
-      <Button variant="filled" color="secondary" shadow radius="xl">
-        KubeSphere
-      </Button>
-      <Button variant="filled" color="default" radius="xl">
-        KubeSphere
-      </Button>
-      <Button variant="text" radius="xl">
-        KubeSphere
-      </Button>
-      <Button variant="filled" shadow color="secondary" radius="xl" disabled>
-        KubeSphere
-      </Button>
-    </Group>
-  ));
+export default {
+  title: 'Components/Button',
 
-storiesOf('Components/Button', module).add('Colors', () => (
+  parameters: {
+    component: Button,
+  },
+};
+
+export const Demos = () => (
+  <Group spacing="xl">
+    <Button variant="filled" color="secondary" shadow radius="xl">
+      KubeSphere
+    </Button>
+    <Button variant="filled" color="default" radius="xl">
+      KubeSphere
+    </Button>
+    <Button variant="text" radius="xl">
+      KubeSphere
+    </Button>
+    <Button variant="filled" shadow color="secondary" radius="xl" disabled>
+      KubeSphere
+    </Button>
+  </Group>
+);
+
+export const Colors = () => (
   <Button variant="filled" color="warning" shadow radius="xl">
     KubeSphere
   </Button>
-));
+);
 
-storiesOf('Components/Button', module).add('With Icon', () => (
+export const WithIcon = () => (
   <Button variant="filled" color="default" radius="xl" leftIcon={<Add size={16} />}>
     KubeSphere
   </Button>
-));
+);
 
-storiesOf('Components/Button', module).add('Size', () => (
+export const Size = () => (
   <Button variant="filled" color="default" radius="xl" size="md" leftIcon={<Add size={16} />}>
     KubeSphere
   </Button>
-));
+);
 
-storiesOf('Components/Button', module).add('Loading', () => (
+export const Loading = () => (
   <Group>
     <Button variant="filled" color="default" radius="xl" loading>
       KubeSphere
@@ -59,4 +64,4 @@ storiesOf('Components/Button', module).add('Loading', () => (
       KubeSphere
     </Button>
   </Group>
-));
+);

packages/components/src/Container/Container.story.tsx

@@ -1,16 +1,19 @@
 import * as React from 'react';
-import { storiesOf } from '@storybook/react';
 import { Container } from './Container';
 
-storiesOf('Components/Container', module).add('Demo', () => (
+export default {
+  title: 'Components/Container',
+};
+
+export const Demo = () => (
   <Container>
     To get the most out of this module, you should have worked your way through the previous
     JavaScript modules in the series. Those modules typically involve simple API usage, as it is
     often difficult to write client-side JavaScript examples without them.
   </Container>
-));
+);
 
-storiesOf('Components/Container', module).add('Size', () => (
+export const Size = () => (
   <>
     <Container size="xl">
       To get the most out of this module, you should have worked your way through the previous
@@ -23,9 +26,9 @@ storiesOf('Components/Container', module).add('Size', () => (
       often difficult to write client-side JavaScript examples without them.
     </Container>
   </>
-));
+);
 
-storiesOf('Components/Container', module).add('Padding', () => (
+export const Padding = () => (
   <>
     <Container padding="xl">
       To get the most out of this module, you should have worked your way through the previous
@@ -38,12 +41,12 @@ storiesOf('Components/Container', module).add('Padding', () => (
       often difficult to write client-side JavaScript examples without them.
     </Container>
   </>
-));
+);
 
-storiesOf('Components/Container', module).add('Fluid', () => (
+export const Fluid = () => (
   <Container fluid>
     To get the most out of this module, you should have worked your way through the previous
     JavaScript modules in the series. Those modules typically involve simple API usage, as it is
     often difficult to write client-side JavaScript examples without them.
   </Container>
-));
+);

packages/icons/package.json

@@ -27,6 +27,10 @@
   },
   "dependencies": {},
   "devDependencies": {
+    "@babel/core": "7.12.10",
+    "@babel/preset-react": "7.14.5",
+    "@babel/plugin-proposal-object-rest-spread": "7.12.1",
+    "@babel/preset-env": "7.15.8",
     "@babel/plugin-transform-runtime": "^7.15.0",
     "svgo": "^1.3.2"
   }