story文件组织完善

.storybook/addons.ts

+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-notes/register';
+import 'storybook-readme/register';
\ No newline at end of file

.storybook/main.js

-const path = require("path");
-// your app's webpack.config.js
-const custom = require('./webpack.config.js');
 module.exports = {
-    stories: ['../src/stories/index.tsx'],
-    addons: [
-        {
-            "name": "@storybook/preset-create-react-app",
-            "options": {
-                "craOverrides": {
-                "fileLoaderExcludes": [".less"]
-                }
-            }
-        }
-    ],
-  }
\ No newline at end of file
+    stories: ['../src/**/*.stories.tsx'],
+};
\ No newline at end of file

package.json

@@ -12,14 +12,20 @@
   "license": "ISC",
   "devDependencies": {
     "@babel/core": "^7.14.6",
+    "@storybook/addon-actions": "^6.3.2",
+    "@storybook/addon-links": "^6.3.2",
+    "@storybook/addon-notes": "^5.3.21",
+    "@storybook/addons": "^6.3.2",
     "@storybook/react": "^6.3.2",
     "@types/storybook__react": "^5.2.1",
     "babel-loader": "^8.2.2",
     "babel-plugin-import": "^1.13.3",
+    "storybook-readme": "^5.0.9",
     "typescript": "^4.3.5",
     "webpack-combine-loaders": "^2.0.4"
   },
   "dependencies": {
+    "@storybook/addon-docs": "^6.3.2",
     "@storybook/preset-ant-design": "^0.0.2",
     "antd": "^4.16.6",
     "babel-preset-react-app": "^10.0.0",

src/components/testSpan/testSpan.tsx

+import React from 'react';
+import "./testSpan.less";
+export const TestSpan = (obj)=>{
+    return <span className="testButton"><span className = "testButton-inner"></span>{obj.label}</span>
+}
\ No newline at end of file

src/stories/Button.stories.tsx

+import React from 'react';
+import { Button } from "@storybook/react/demo";
+export default {
+  component: Button,
+  title: 'Components/Button',
+};
+
+//👇 We create a “template” of how args map to rendering
+const Template = (args) => <Button {...args} />;
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+
+Primary.args = {
+  primary: true,
+  label: 'Button',
+};

src/stories/TestSpan.stories.tsx

+import React from 'react';
+import { TestSpan } from "../components/testSpan/testSpan";
+export default {
+  component: TestSpan,
+  title: 'Components/TestSpan',
+};
+
+//👇 We create a “template” of how args map to rendering
+const Template = (args) => <TestSpan {...args} />;
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+
+Primary.args = {
+  primary: true,
+  label: 'TestSpan',
+};

src/stories/index.tsx

-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { Button } from "@storybook/react/demo";
-import "./test"
-import "./index.less"
- storiesOf("Button", module)
-   .add("with text", () => <Button>Hello Button</Button>)
-   .add("with emoji", () => (
-     <Button>
-       <span role="img" aria-label="so cool">     
-       </span>
-     </Button>
-   ));
-   
-  storiesOf("TestButton", module)
-  .add("with text", () => <span className="testButton"><span className = "testButton-inner"></span></span>)
-  
\ No newline at end of file

src/stories/test.ts

-const a = 1;
-function add(b:number){
-    return b+a
-}
-console.log(add(3))
\ No newline at end of file