add storybook

react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.tsx

@@ -1,10 +1,17 @@
 import './ComponentWrapper.css'
 
 interface ComponentWrapperProps {
+  /** Title to show */
   title?: string
+  /** Description to show */
   description?: string
+  /** Content to show */
   children: React.ReactNode
 }
+
+/**
+ * A wrapper component that displays a title, description, and content.
+ */
 export default function ComponentWrapper({
   children,
   title,

react-advanced-tag1/src/common/components/globals/Button.tsx

@@ -0,0 +1,41 @@
+import { ComponentPropsWithoutRef, CSSProperties } from 'react'
+
+interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
+  variant: 'primary' | 'secondary'
+  size: 'sm' | 'md' | 'lg'
+}
+
+export const Button = ({
+  children,
+  variant,
+  size,
+  ...restProps
+}: ButtonProps) => {
+  const sizeStyles: Record<ButtonProps['size'], CSSProperties> = {
+    sm: {
+      padding: '0.5rem',
+    },
+    md: {
+      padding: '0.75rem',
+    },
+    lg: {
+      padding: '1rem',
+    },
+  }
+  const variantStyles: Record<ButtonProps['variant'], CSSProperties> = {
+    primary: {
+      backgroundColor: 'blue',
+    },
+    secondary: {
+      backgroundColor: 'gray',
+    },
+  }
+  return (
+    <button
+      {...restProps}
+      style={{ ...variantStyles[variant], ...sizeStyles[size] }}
+    >
+      {children}
+    </button>
+  )
+}

react-advanced-tag1/src/layouts/MainLayout.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import './MainLayout.css'
 import Footer from '../common/components/Footer'
 import Header from '../common/components/Header'
+import { Button } from '../common/components/globals/Button'
 
 export default function MainLayout({
   children,
@@ -24,7 +25,9 @@ export default function MainLayout({
       <div className="content">
         {children}
 
-        <button onClick={handleClick}>Click</button>
+        <Button onClick={handleClick} variant="secondary" size="sm">
+          Click
+        </Button>
       </div>
 
       <Footer />

react-advanced-tag1/src/stories/Button.stories.tsx

@@ -0,0 +1,51 @@
+import { Button } from '../common/components/globals/Button'
+import { fn } from '@storybook/test'
+import { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof Button> = {
+  title: 'Elements/Button',
+  component: Button,
+  argTypes: {
+    variant: { control: 'radio', options: ['primary', 'secondary'] },
+    size: { control: 'radio', options: ['sm', 'md', 'lg'] },
+  },
+  args: {
+    onClick: fn(),
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Button>
+
+export const Primary: Story = {
+  args: {
+    children: 'Primary Button',
+    variant: 'primary',
+    size: 'md',
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    children: 'Secondary Button',
+    variant: 'secondary',
+    size: 'md',
+  },
+}
+
+export const Small: Story = {
+  args: {
+    children: 'Small Button',
+    variant: 'primary',
+    size: 'sm',
+  },
+}
+
+export const Large: Story = {
+  args: {
+    children: 'Large Button',
+    variant: 'primary',
+    size: 'lg',
+  },
+}

react-advanced-tag1/src/stories/ComponentWrapper.stories.tsx

@@ -0,0 +1,43 @@
+import ComponentWrapper from '../common/components/ComponentWrapper/ComponentWrapper'
+import { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof ComponentWrapper> = {
+  title: 'Wrapper/ComponentWrapper',
+  component: ComponentWrapper,
+  argTypes: {
+    title: { control: 'text' },
+    description: { control: 'text' },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof ComponentWrapper>
+
+export const Default: Story = {
+  args: {
+    title: 'Default Title',
+    description: 'This is a default description.',
+    children: <p>Default content goes here.</p>,
+  },
+}
+
+export const WithoutTitle: Story = {
+  args: {
+    description: 'This wrapper has no title.',
+    children: <p>Content without a title.</p>,
+  },
+}
+
+export const WithoutDescription: Story = {
+  args: {
+    title: 'Title Only',
+    children: <p>Content without a description.</p>,
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    children: <p>Empty wrapper with only content.</p>,
+  },
+}

react-advanced-tag1/src/stories/Footer.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react'
+import Footer from '../common/components/Footer'
+
+const meta: Meta<typeof Footer> = {
+  title: 'Common/Footer',
+  component: Footer,
+}
+
+export default meta
+
+type Story = StoryObj<typeof Footer>
+
+export const Default: Story = {
+  render: () => <Footer />,
+}

react-advanced-tag1/src/stories/Header.stories.tsx

@@ -0,0 +1,15 @@
+import Header from '../common/components/Header/index'
+import { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof Header> = {
+  title: 'Common/Header',
+  component: Header,
+}
+
+export default meta
+
+type Story = StoryObj<typeof Header>
+
+export const Default: Story = {
+  render: () => <Header />,
+}