[#5] Button Storybook (#55)

src/components/ui/button/Button.mdx

@@ -0,0 +1,131 @@
+# Button
+
+import { Controls, Canvas, Meta } from '@storybook/blocks';
+import * as ButtonStories from './Button.stories';
+
+<Meta of={ButtonStories} />
+
+- [Overview](#overview)
+- [Props](#props)
+- [Examples](#examples)
+- [Usage](#usage)
+
+## Overview
+
+Buttons empower users to take action with a single tap. Incorporate them into your design for a seamless and efficient user experience.
+
+<Canvas of={ButtonStories.Overview} />
+
+## Props
+
+<Controls />
+
+## Examples
+
+### [Sizes](#button-sizes)
+
+There are 6 sizes: `xs`, `sm`, `md`, `lg`, `xl` and `2xl`.
+
+<Canvas
+  of={ButtonStories.Sizes}
+  source={{
+    format: true,
+    code: `
+      <div>
+        <Button {...args} size="xs">
+          XS
+        </Button>
+        <Button {...args} size="sm">
+          SM
+        </Button>
+        <Button {...args} size="md">
+          MD
+        </Button>
+        <Button {...args} size="lg">
+          LG
+        </Button>
+        <Button {...args} size="xl">
+          XL
+        </Button>
+        <Button {...args} size="2xl">
+          2XL
+        </Button>
+      </div>
+    `,
+  }}
+/>
+
+### [Variant](#button-variant)
+
+There are 4 types: `link`, `outline`, `solid` and `ghost`.
+
+<Canvas
+  of={ButtonStories.Variant}
+  source={{
+    format: true,
+    code: `
+      <div>
+        <Button {...args} variant="solid">
+          Solid
+        </Button>
+        <Button {...args} variant="outline">
+          Outline
+        </Button>
+        <Button {...args} variant="ghost">
+          Ghost
+        </Button>
+        <Button {...args} variant="link">
+          Link
+        </Button>
+        <Button {...args} variant="subtle">
+          Subtle
+        </Button>
+      </div>
+    `,
+  }}
+/>
+
+### [Disabled](#button-disabled)
+
+By using the `disabled` prop, you can quickly and easily convey to your users that a button is unavailable for selection.
+
+<Canvas
+  of={ButtonStories.Disabled}
+  source={{
+    format: true,
+    code: `
+      <div>
+        <Button {...args} disabled>
+          Disabled
+        </Button>
+      </div>
+    `,
+  }}
+/>
+
+### [Color Palette](#button-color)
+
+Use the defined color codes in the system to change the background for the button.
+
+<Canvas
+  of={ButtonStories.ColorPalette}
+  source={{
+    format: true,
+    code: `
+      <div>
+        <Button colorPalette="red">
+          Color Palette
+        </Button>
+      </div>
+    `,
+  }}
+/>
+
+## Usage
+
+Buttons are used throughout the UI to initiate actions such as saving changes, navigating or canceling. They can be found on pages, widgets, and modals.
+
+- There are 6 sizes: `xs`, `sm`, `md`, `lg`, `xl` and `2xl`.
+- There are 4 types: `link`, `outline`, `solid` and `ghost`.
+- Using the `disabled` prop indicates that a button is unavailable for selection.
+- Use defined color codes for button background.

src/components/ui/button/Button.stories.tsx

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '@/components/ui';
+import { Flex } from '@/styled/jsx';
+
+const meta = {
+  title: 'GENERAL / Button',
+  component: Button,
+  argTypes: {
+    size: {
+      control: { type: 'radio' },
+      options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+      description: `**Size of Button - default: \`md\`. **
+      \n \`xs:\` fontSize: 12px, height: 32px
+      \n \`sm:\`: fontSize: 14px, height: 36px
+      \n \`md:\` fontSize: 14px, height: 40px
+      \n \`lg:\` fontSize: 16px, height: 44px
+      \n \`xl:\` fontSize: 16px, height: 48px
+      \n \`2xl:\` fontSize: 18px, height: 64px `,
+    },
+    variant: {
+      control: { type: 'radio' },
+      options: ['solid', 'outline', 'ghost', 'link', 'subtle'],
+      description: `**Variant of Button - default: \`solid\`. **
+      \n \`solid:\` uniform background color for buttons
+      \n \`outline:\` the border or edge surrounding buttons
+      \n \`ghost:\` style characterized by a transparent or semi-transparent background and a visible border
+      \n \`link:\` styles designed to resemble traditional hyperlinks`,
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      description: 'Unavailable for selection',
+    },
+    hidden: {
+      control: { type: 'boolean' },
+      description: 'hidden for buttons',
+    },
+    children: {},
+    colorPalette: {
+      control: { type: 'text' },
+      description: 'Use the defined color codes in the system to change the background for the button',
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Overview: Story = {
+  args: {
+    children: 'Default',
+  },
+};
+
+export const Basic: Story = {
+  render: (args) => {
+    return (
+      <Button {...args} variant="outline">
+        Default
+      </Button>
+    );
+  },
+};
+
+export const Sizes: Story = {
+  render: (args) => {
+    return (
+      <Flex gap="6" align="center">
+        <Button {...args} size="xs">
+          XS
+        </Button>
+        <Button {...args} size="sm">
+          SM
+        </Button>
+        <Button {...args} size="md">
+          MD
+        </Button>
+        <Button {...args} size="lg">
+          LG
+        </Button>
+        <Button {...args} size="xl">
+          XL
+        </Button>
+        <Button {...args} size="2xl">
+          2XL
+        </Button>
+      </Flex>
+    );
+  },
+};
+
+export const Variant: Story = {
+  render: (args) => {
+    return (
+      <Flex gap="6" align="center">
+        <Button {...args} variant="solid">
+          Solid
+        </Button>
+        <Button {...args} variant="outline">
+          Outline
+        </Button>
+        <Button {...args} variant="ghost">
+          Ghost
+        </Button>
+        <Button {...args} variant="link">
+          Link
+        </Button>
+      </Flex>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: (args) => {
+    return (
+      <Flex gap="6" align="center">
+        <Button {...args} disabled>
+          Disabled
+        </Button>
+      </Flex>
+    );
+  },
+};
+
+export const ColorPalette: Story = {
+  render: (args) => {
+    return (
+      <Flex gap="6" align="center">
+        <Button {...args} colorPalette="red">
+          Color Palette
+        </Button>
+      </Flex>
+    );
+  },
+};