storybook config and cleanup

.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from '@storybook/nextjs'
+import path from 'path'
 
 const config: StorybookConfig = {
     stories: [
@@ -20,5 +21,15 @@ const config: StorybookConfig = {
         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

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',
+    },
+}