Updated Storybook setup

Author: Kailash Chandra

templates/common/src/components/atoms/Button/Button.stories.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { withKnobs, text, optionsKnob } from "@storybook/addon-knobs";
+
+import Button from "./index";
+
+/* eslint import/no-anonymous-default-export: [2, {"allowObject": true}] */
+export default {
+  title: "Example/Button",
+  component: Button,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+  decorators: [withKnobs],
+};
+
+const Template = (args) => <Button {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  children: text("Label", "Button"),
+};
+
+export const KnobExample = () => (
+  <Button
+    theme={optionsKnob(
+      "Theme",
+      { Primary: "primary", Secondary: "secondary" },
+      "primary",
+      { display: "select" }
+    )}
+  >
+    {text("Label", "Button")}
+  </Button>
+);

templates/common/src/components/atoms/Button/Button.story.tsx

@@ -1,14 +1,24 @@
-import { styled } from '@nextui-org/react';
+import { styled, Button } from "@nextui-org/react";
 
-const CompRoot = styled('button', {
-  fontSize: '$3',
-  color: '$fontColor',
-  margin: '1em',
-  padding: '0.25em 1em',
-  border: '2px solid black',
-  borderRadius: '$1',
-  display: 'block',
-  length: '1'
+const CompRoot = styled("button", {
+  fontSize: "$3",
+  color: "$fontColor",
+  margin: "1em",
+  padding: "0.25em 1em",
+  border: "2px solid black",
+  borderRadius: "$1",
+  display: "block",
+  length: "1",
+  variants: {
+    theme: {
+      primary: {
+        color: "$fontColor",
+      },
+      secondary: {
+        background: "green",
+      },
+    },
+  },
 });
 
 export default CompRoot;

templates/common/src/components/atoms/Button/Button.style.ts

@@ -6,14 +6,18 @@
 // @flow
 
 // Node_Module Imports
-import React from 'react';
+import React from "react";
 
 // Relative imports
-import CompRoot from './Button.style';
-import { ButtonProps } from './types';
+import CompRoot from "./Button.style";
+import { ButtonProps } from "./types";
 
-const Button: React.FunctionComponent<ButtonProps> = ({ className, children }) => (
-  <CompRoot className={className} data-testid="CompRoot">
+const Button: React.FunctionComponent<ButtonProps> = ({
+  className,
+  children,
+  ...otherProps
+}) => (
+  <CompRoot className={className} data-testid="CompRoot" {...otherProps}>
     {children}
   </CompRoot>
 );

templates/common/src/components/atoms/Button/Button.tsx

@@ -1,28 +1,32 @@
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-const path = require('path');
+const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
+const path = require("path");
 
 module.exports = {
   addons: [
-    '@storybook/addon-a11y',
-    '@storybook/addon-actions',
-    '@storybook/addon-docs',
-    '@storybook/addon-knobs',
-    '@storybook/addon-links',
-    'storybook-design-token',
-    '@storybook/addon-viewport'
+    "@storybook/addon-a11y",
+    "@storybook/addon-actions",
+    "@storybook/addon-docs",
+    "@storybook/addon-knobs",
+    "@storybook/addon-links",
+    "storybook-design-token",
+    "@storybook/addon-viewport",
   ],
-  framework: '@storybook/react',
+  framework: "@storybook/react",
   core: {
-    builder: 'webpack5'
+    builder: "webpack5",
   },
+  stories: [
+    "../../**/*.stories.mdx",
+    "../../**/*.stories.@(js|jsx|ts|tsx)",
+  ],
   webpackFinal: async (config) => {
     config.resolve.plugins = [
       ...(config.resolve.plugins || []),
       new TsconfigPathsPlugin({
         extensions: config.resolve.extensions,
-        configFile: path.resolve('tsconfig.json')
-      })
+        configFile: path.resolve("tsconfig.json"),
+      }),
     ];
     return config;
-  }
+  },
 };

templates/common/storybook/.storybook/main.js

@@ -1,38 +1,9 @@
-import React from 'react';
-import { addDecorator, configure, storiesOf } from '@storybook/react';
-import { NextUIProvider } from '@nextui-org/react';
-import { theme } from 'themes';
-
 export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
+  actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
       color: /(background|color)$/i,
-      date: /Date$/
-    }
-  }
-};
-
-addDecorator((storyFn, context) => (
-  <NextUIProvider theme={theme}>{storyFn(context)}</NextUIProvider>
-));
-
-const req = require.context('../../', true, /story\.tsx$/);
-
-function loadStories() {
-  req.keys().forEach((filename) => {
-    const configs = { ...req(filename).default };
-    let sections = configs.sections;
-
-    const stories = storiesOf(
-      `${configs.componentType}/${configs.componentName}`,
-      module
-    );
-    sections.forEach((section) => stories.add(section.title, section.sectionFn));
-
-    // Create story for Component.
-    return stories;
-  });
-}
-
-configure(loadStories, module);
+      date: /Date$/,
+    },
+  },
+}

templates/common/storybook/.storybook/preview.js

@@ -10,20 +10,23 @@
   "dependencies": {
     "@babel/core":  "^7.15.5",
     "@babel/preset-react": "^7.12.10",
+    "@nextui-org/react": "^1.0.5-beta.5",
     "@storybook/addon-a11y": "^6.4.18",
     "@storybook/addon-actions": "^6.4.18",
-    "@storybook/addon-essentials": "^6.4.18",
     "@storybook/addon-docs": "^6.4.18",
+    "@storybook/addon-essentials": "^6.4.18",
     "@storybook/addon-knobs": "^6.4.0",
     "@storybook/addon-links": "^6.4.18",
     "@storybook/addon-viewport": "^6.4.18",
     "@storybook/builder-webpack5": "^6.4.18",
     "@storybook/cli": "^6.4.18",
     "@storybook/manager-webpack5": "^6.4.18",
     "@storybook/react": "^6.4.18",
-    "tsconfig-paths-webpack-plugin": "^3.5.2",
+    "@storybook/testing-library": "^0.0.9",
     "storybook-design-token": "^1.2.2",
-    "@nextui-org/react": "^1.0.5-beta.5"  },
+    "tsconfig-paths-webpack-plugin": "^3.5.2",
+    "webpack": "^5.72.0"
+  },
   "devDependencies": {
     "tsconfig": "*"
   }