Updated Storybook

Author: Kailash Chandra

.changeset/real-grapes-shave.md

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

…mponents/atoms/Button/Button.stories.tsx …components/atoms/Button/Button.story.tsxtemplates/common/src/components/atoms/Button/Button.stories.tsx renamed to templates/common/src/components/atoms/Button/Button.story.tsx templates/common/src/components/atoms/Button/Button.stories.tsx renamed to templates/common/src/components/atoms/Button/Button.story.tsx

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

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

@@ -1,32 +1,29 @@
-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)",
-  ],
+  stories: ['../../**/*.story.mdx', '../../**/*.story.@(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/package.json

@@ -8,7 +8,7 @@
     "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",