add storybook example

.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;

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"
+    }
+};
+