Initialize storybook

Author: sabat-12067

.eslintrc.json

@@ -5,9 +5,20 @@
     "jest": true,
     "es6": true
   },
-  "extends": ["eslint:recommended", "next", "prettier"],
-  "plugins": ["eslint-plugin-prettier", "unused-imports"],
-  "ignorePatterns": ["node_modules/", ".next/"],
+  "extends": [
+    "eslint:recommended",
+    "next",
+    "prettier",
+    "plugin:storybook/recommended"
+  ],
+  "plugins": [
+    "eslint-plugin-prettier",
+    "unused-imports"
+  ],
+  "ignorePatterns": [
+    "node_modules/",
+    ".next/"
+  ],
   "settings": {
     "react": {
       "pragma": "React",
@@ -34,7 +45,10 @@
         "flatTernaryExpressions": true
       }
     ],
-    "linebreak-style": ["error", "unix"],
+    "linebreak-style": [
+      "error",
+      "unix"
+    ],
     "quotes": [
       "error",
       "single",
@@ -43,7 +57,10 @@
         "allowTemplateLiterals": false
       }
     ],
-    "semi": ["error", "never"],
+    "semi": [
+      "error",
+      "never"
+    ],
     "react/prop-types": 0,
     "react/no-unknown-property": 0,
     "no-mixed-spaces-and-tabs": 0,

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/nextjs'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+}
+export default config

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+}
+
+export default preview

README.md

@@ -160,4 +160,4 @@ Add your mongoDB uri in env file.
 
 ## Show support
 
-Give a ⭐️ if this project helped you!
+Give a ⭐️ if you like this project!

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-typescript-redux-starter",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "bin": "./bin/cli.js",
   "scripts": {
     "dev": "next dev -p 3050",
@@ -22,7 +22,9 @@
     "e2e": "start-server-and-test dev http://localhost:3050 \"cypress open --e2e\"",
     "e2e:headless": "start-server-and-test dev http://localhost:3050 \"cypress run --e2e\"",
     "e2e:component": "cypress open --component",
-    "e2e:component:headless": "cypress run --component"
+    "e2e:component:headless": "cypress run --component",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.2",
@@ -45,6 +47,14 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@next/bundle-analyzer": "^13.5.4",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/nextjs": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/testing-library": "^0.2.2",
     "@tailwindcss/typography": "^0.5.10",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
@@ -63,6 +73,7 @@
     "eslint-config-next": "13.5.4",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-unused-imports": "^3.0.0",
     "husky": "^8.0.3",
     "jest": "^29.7.0",
@@ -72,6 +83,7 @@
     "prettier": "^3.0.3",
     "redux-logger": "^3.0.6",
     "start-server-and-test": "^2.0.2",
+    "storybook": "^7.5.3",
     "tailwindcss": "^3.3.3",
     "typescript": "^5"
   },

src/stories/Button.stories.ts

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};
+
+
+export const Warning: Story = {
+  args: {
+    primary: true,
+    label: 'Delete now',
+    backgroundColor: 'red',
+  }
+};

src/stories/Button.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import './button.css';
+
+interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      {...props}
+    >
+      {label}
+      <style jsx>{`
+        button {
+          background-color: ${backgroundColor};
+        }
+      `}</style>
+    </button>
+  );
+};