Merge pull request #10 from danilo-89/storybook

Storybook

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:storybook/recommended"
+  ]
 }

.gitignore

@@ -33,3 +33,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,35 @@
+import type { StorybookConfig } from '@storybook/nextjs'
+import path from 'path'
+
+const config: StorybookConfig = {
+    stories: [
+        '../stories/**/*.mdx',
+        '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    ],
+    addons: [
+        '@storybook/addon-onboarding',
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@chromatic-com/storybook',
+        '@storybook/addon-interactions',
+    ],
+    framework: {
+        name: '@storybook/nextjs',
+        options: {},
+    },
+    docs: {
+        autodocs: 'tag',
+    },
+    staticDirs: ['../public'],
+    webpackFinal: async (config: any) => ({
+        ...config,
+        resolve: {
+            ...config.resolve,
+            alias: {
+                ...config.resolve.alias,
+                '@': path.resolve(__dirname, '../'),
+            },
+        },
+    }),
+}
+export default config

.storybook/preview.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import type { Preview } from '@storybook/react'
+import { Poppins, Yellowtail } from 'next/font/google'
+
+const poppins = Poppins({
+    subsets: ['latin'],
+    weight: ['400', '700'],
+    variable: '--font-poppins',
+})
+const yellowtail = Yellowtail({
+    subsets: ['latin'],
+    weight: ['400'],
+    variable: '--font-yellowtail',
+})
+
+import '../app/globals.css'
+
+const preview: Preview = {
+    decorators: [
+        (Story) => (
+            <main
+                className={`${poppins.variable} ${yellowtail.variable} bg-champagne text-wenge`}
+            >
+                <Story />
+            </main>
+        ),
+    ],
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+}
+
+export default preview

package.json

@@ -7,12 +7,14 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "tsc": "tsc --noEmit"
+    "tsc": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.4",
     "@rainbow-me/rainbowkit": "^1.1.2",
-    "@tanstack/react-query": "^4.32.6",
+    "@tanstack/react-query": "^4.36.1",
     "@types/node": "20.4.2",
     "@types/react": "18.2.15",
     "@types/react-dom": "18.2.7",
@@ -30,13 +32,25 @@
     "react-dom": "18.2.0",
     "tailwindcss": "3.3.3",
     "typescript": "5.1.6",
-    "viem": "^1.21.0",
-    "wagmi": "^1.4.0"
+    "viem": "^1.21.4",
+    "wagmi": "^1.4.13"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.2.18",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/addon-links": "^8.0.0",
+    "@storybook/addon-onboarding": "^8.0.0",
+    "@storybook/blocks": "^8.0.0",
+    "@storybook/nextjs": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/test": "^8.0.0",
     "@types/lodash.debounce": "^4.0.7",
+    "encoding": "^0.1.13",
+    "eslint-plugin-storybook": "^0.8.0",
     "prettier": "^3.0.0",
     "prettier-plugin-tailwindcss": "^0.4.1",
+    "storybook": "^8.0.5",
     "vitest": "^0.34.3"
   }
 }

stories/Button.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Button from '../components/common/Button'
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+    title: 'Button',
+    component: Button,
+    parameters: {
+        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+        layout: 'centered',
+    },
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    // More on argTypes: https://storybook.js.org/docs/api/argtypes
+    argTypes: {},
+    // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+    args: { children: 'Lorem Ipsum' },
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+
+// Variations
+
+export const Primary: Story = {}
+
+export const Secondary: Story = {
+    args: {
+        variation: 'secondary',
+    },
+}
+
+export const Neutral: Story = {
+    args: {
+        variation: 'neutral',
+    },
+}
+
+export const Transparent: Story = {
+    args: {
+        variation: 'transparent',
+    },
+}
+
+// Sizes
+
+export const Small: Story = {
+    args: {
+        size: 'sm',
+    },
+}
+
+export const Medium: Story = {
+    args: {
+        size: 'md',
+    },
+}
+
+export const Large: Story = {
+    args: {
+        size: 'lg',
+    },
+}