Merge pull request #212 from pagesource/feat/storybook-update

Updated Storybook setup

Author: vinodloha

.changeset/real-grapes-shave.md

@@ -0,0 +1,5 @@
+---
+'create-universal-react': minor
+---
+
+Changed Storybook Configuration

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

@@ -1,16 +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,
-  componentName: 'Button',
-  componentType: 'Atoms',
-  sections: [
-    {
-      title: 'Button Component',
-      sectionFn: () => <Button>Click Me</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.style.ts

@@ -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.tsx

@@ -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/storybook/.storybook/main.js

@@ -15,6 +15,7 @@ module.exports = {
   core: {
     builder: 'webpack5'
   },
+  stories: ['../../**/*.story.mdx', '../../**/*.story.@(js|jsx|ts|tsx)'],
   webpackFinal: async (config) => {
     config.resolve.plugins = [
       ...(config.resolve.plugins || []),

templates/common/storybook/.storybook/preview.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/package.json

@@ -8,22 +8,25 @@
     "storybook:build": "cd storybook && {commandType} build-storybook"
   },
   "dependencies": {
-    "@babel/core":  "^7.15.5",
+    "@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": "*"
   }