Refactor Storybook <Button />

.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
     "plugin:import/typescript",
     "plugin:react/recommended",
     "plugin:jest/recommended",
+    "plugin:mdx/recommended",
   ],
   parser: "@typescript-eslint/parser",
   parserOptions: {
@@ -166,5 +167,9 @@ module.exports = {
         "@typescript-eslint/no-var-requires": "off",
       },
     },
+    {
+      files: ["*.mdx"],
+      extends: ["plugin:mdx/overrides"],
+    },
   ],
 };

.scaffdog/component.md

@@ -61,19 +61,35 @@ describe("{{ input | pascal }} component testing", () => {
 
 ```
 
-# `{{ input }}/{{ input }}.stories.tsx`
+# `{{ input | pascal }}/{{ input | pascal }}.stories.mdx`
 
 ```typescript
-import * as React from "react";
-import {{ input }} from "./index";
+import { Meta, Story, ArgsTable, Canvas } from "@storybook/addon-docs/blocks";
+import {{ input | pascal }} from "./index";
 
-export default {
-  title: "{{ input }}",
-  component: {{ input }},
-};
+<Meta
+  title="{{ input | pascal }}"
+  component={ {{ input | pascal }} }
+  argTypes={
+    { onClick: { action: "clicked" } }
+  }
+/>
 
-export const Overview = () => (
-  <{{ input }} />
-);
+# {{ input | pascal }}
+
+<ArgsTable of={ {{ input | pascal }} } />
+
+## Samples
+
+### Something
+
+<Canvas>
+  <Story
+    name="something"
+    args={{}}
+  >
+    {(args) => <{{ input | pascal }} {...args} />}
+  </Story>
+</Canvas>
 
 ```

.storybook/main.js

@@ -1,13 +1,18 @@
 module.exports = {
-  stories: ["../src/components/**/*.stories.tsx"],
+  stories: [
+    "../src/components/**/*.stories.tsx",
+    "../src/components/**/*.stories.mdx",
+  ],
   addons: [
-    "@storybook/addon-actions",
+    "@storybook/addon-essentials",
     "@storybook/addon-knobs",
-    "@storybook/addon-notes",
+    // TODO: Remove this addon after replace to `.mdx`.
     "@storybook/addon-storysource",
   ],
   reactOptions: {
     fastRefresh: true,
-    strictMode: true,
+    // TODO: fix warn "Rendered more hooks than during the previous render."
+    // knobを完全に排除できたタイミングで再度調査
+    // strictMode: true,
   },
 };

.storybook/preview.js

@@ -1,5 +1,7 @@
 import * as React from "react";
 import { ThemeProvider, createTheme } from "../src/themes";
+import "@storybook/addon-console";
+
 
 const theme = createTheme();
 

package.json

@@ -22,7 +22,7 @@
     "deploy": "gh-pages -d example/build",
     "storybook": "start-storybook -s ./assets -p 6006",
     "build-storybook": "build-storybook",
-    "lint": "eslint 'src/**/*.{ts,tsx}'",
+    "lint": "eslint 'src/**/*.{ts,tsx,mdx}'",
     "generate": "yarn scaffdog generate",
     "format": "yarn lint --fix"
   },
@@ -40,10 +40,10 @@
     "styled-components": ">= 5.X"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.1.6",
-    "@storybook/addon-knobs": "^6.1.6",
-    "@storybook/addon-notes": "^5.3.21",
-    "@storybook/addon-storysource": "^6.1.6",
+    "@storybook/addon-console": "^1.2.2",
+    "@storybook/addon-essentials": "^6.1.9",
+    "@storybook/addon-knobs": "^6.1.9",
+    "@storybook/addon-storysource": "^6.1.10",
     "@storybook/react": "^6.1.6",
     "@svgr/rollup": "^2.4.1",
     "@testing-library/jest-dom": "^5.11.0",
@@ -64,12 +64,15 @@
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-mdx": "^1.8.2",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
     "gh-pages": "^1.2.0",
     "jest": "^26.1.0",
     "prettier": "^2.1.2",
+    "react": ">= 16.6.1",
+    "react-dom": ">= 16.6.1",
     "rollup": "^2.33.3",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-imagemin": "^0.4.1",

src/components/ActionButton/ActionButton.stories.tsx

@@ -36,8 +36,9 @@ function createButtons(props: Props[], text = "ボタン") {
 
 export default {
   title: "ActionButton",
+  component: ActionButton,
   parameters: {
-    component: ActionButton,
+    docs: { page: null },
   },
 };
 

src/components/Backdrop/Backdrop.stories.tsx

@@ -7,6 +7,9 @@ import Button from "../Button";
 export default {
   title: "Backdrop",
   component: Backdrop,
+  parameters: {
+    docs: { page: null },
+  },
 };
 
 export const Overview: React.FunctionComponent = () => {

src/components/Badge/Badge.stories.tsx

@@ -27,8 +27,9 @@ const Column = styled.div`
 
 export default {
   title: "Badge",
+  component: Badge,
   parameters: {
-    component: Badge,
+    docs: { page: null },
   },
 };
 

src/components/Button/Button.stories.mdx

@@ -0,0 +1,126 @@
+import { Meta, Story, ArgsTable, Canvas } from "@storybook/addon-docs/blocks";
+import Button from "./Button";
+
+<Meta
+  title="Button"
+  component={Button}
+  argTypes={{ onClick: { action: "clicked" } }}
+/>
+
+# Button
+
+<ArgsTable of={Button} />
+
+## Samples
+
+### Colors
+
+<Canvas>
+  <Story
+    name="primary"
+    args={{
+      color: "primary",
+      children: "primary",
+    }}
+  >
+    {(args) => <Button {...args} />}
+  </Story>
+  <Story
+    name="secondary"
+    args={{
+      color: "secondary",
+      children: "secondary",
+    }}
+  >
+    {(args) => <Button {...args} />}
+  </Story>
+  <Story
+    name="danger"
+    args={{
+      color: "danger",
+      children: "danger",
+    }}
+  >
+    {(args) => <Button {...args} />}
+  </Story>
+</Canvas>
+
+### Sizes
+
+<Canvas>
+  <Story
+    name="small"
+    args={{
+      size: "small",
+      children: "small",
+    }}
+  >
+    {(args) => <Button {...args} />}
+  </Story>
+  <Story
+    name="medium"
+    args={{
+      size: "medium",
+      children: "medium",
+    }}
+  >
+    {(args) => <Button {...args} />}
+  </Story>
+  <Story
+    name="large"
+    args={{
+      size: "large",
+      children: "large",
+    }}
+  >
+    {(args) => <Button {...args} />}
+  </Story>
+</Canvas>
+
+### Disabled
+
+<Canvas>
+  <Story
+    name="disabled"
+    args={{
+      disabled: true,
+      children: "disabled",
+    }}
+  >
+    {(args) => <Button {...args} />}
+  </Story>
+</Canvas>
+
+### Use "href" props
+
+<Canvas>
+  <Story
+    name="Use href props"
+    args={{
+      href: "https://google.com",
+      children: "Link to google.com",
+    }}
+  >
+    {(args) => <Button {...args} />}
+  </Story>
+</Canvas>
+
+### Use with router library like "react-router"
+
+Here's an example code.
+
+But We have plan to change like [Material-UI](https://material-ui.com/guides/composition/#link).
+
+```tsx
+// Get "className" prop to enable <Button /> style.
+const LinkToHome = ({ className, children }) => (
+  // "href" prop defines not via <Button />
+  <Link className={className} href="/home">
+    {children}
+  </Link>
+);
+
+const ButtonWithRouterLink = ({ children }) => (
+  <Button component={LinkToHome}>{children}</Button>
+);
+```