Add storybook

.eslintrc.json

@@ -5,7 +5,8 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
-    "next/core-web-vitals"
+    "next/core-web-vitals",
+    "plugin:storybook/recommended"
   ],
   "rules": {
     "react/prop-types": 0,

.storybook/main.ts

@@ -0,0 +1,23 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+const config: StorybookConfig = {
+  // Stories and Components location
+  stories: [
+    "../components/**/*.mdx",
+    "../components/**/*.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,17 @@
+import type { Preview } from "@storybook/react";
+// Add any used css here
+import "../styles/globals.css"
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

README.md

@@ -42,6 +42,8 @@
 
     - Simple form validation with [React Hook Form](https://react-hook-form.com/get-started), designed to be [integrated with Ant Design](https://react-hook-form.com/get-started#IntegratingControlledInputs) and [Zod](https://react-hook-form.com/get-started#SchemaValidation)
 
+    - Interactive documentation with [Storybook](https://storybook.js.org/)
+
 - Provide sane defaults for the most common security headers
 
 ## Getting Started
@@ -62,7 +64,7 @@ To display Tailwind CSS IntelliSense in Visual Studio Code, install [the officia
 
 ### `components` Folder
 
-Place reusable React components in this folder.
+Place reusable React components and Storybook stories in this folder.
 
 It is recommended to develop using [function components](https://reactjs.org/docs/components-and-props.html) with [hooks](https://reactjs.org/docs/hooks-intro.html) instead of class components.
 
@@ -91,6 +93,16 @@ Components should be styled with one of these techniques, sorted from the most r
 
 > :warning: Due to the global nature of stylesheets, and to avoid conflicts, they may not be imported from pages / components.
 
+### Making Component's Documentations
+
+Components should be documented by using [Storybook](https://storybook.js.org/) by making a stories for each component.
+
+Run the Storybook with command:
+
+```sh
+npm run storybook
+```
+
 ### `functions` Folder
 
 Place reusable plain JS functions in this folder.

components/Buttons.stories.tsx

@@ -0,0 +1,51 @@
+import {AButton} from './Buttons';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    // Name of the component for the stories
+    component: AButton,
+
+    // Stories Title
+    title: 'AButton',
+
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+    tags: ['autodocs'],
+
+     // Add documentation for each args. More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+    argTypes: {
+        text:{        
+            description:"Button Text"
+        },
+        type:{
+            control:"select",
+            options:["button","submit","reset"],    
+            description:"Button Type"
+        },
+        disabled:{
+            control:"boolean",
+            description:"Button disabled or not"
+        },
+    }
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default = {
+    // Args for the component
+    args:{
+        text: "Default",
+        type: "button"
+    }
+};
+export const Submit = {
+    args:{
+        text: "Submit",
+        type: "submit"
+    }
+};
+export const Reset = {
+    args:{
+        text: "Reset",
+        type: "reset"
+    }
+};
+