Add custom theme

.eslintrc.json

@@ -10,13 +10,9 @@
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "project": [
-      "./tsconfig.json"
-    ]
+    "project": ["./tsconfig.json"]
   },
-  "plugins": [
-    "@typescript-eslint"
-  ],
+  "plugins": ["@typescript-eslint"],
   "rules": {
     "import/order": [
       "error",
@@ -47,9 +43,7 @@
             "position": "before"
           }
         ],
-        "pathGroupsExcludedImportTypes": [
-          "builtin"
-        ],
+        "pathGroupsExcludedImportTypes": ["builtin"],
         "alphabetize": {
           "order": "asc",
           "caseInsensitive": true

.storybook/main.ts

@@ -10,6 +10,9 @@ module.exports = {
     '@storybook/addon-interactions',
     '@chakra-ui/storybook-addon'
   ],
+  features: {
+    emotionAlias: false
+  },
   framework: {
     name: '@storybook/nextjs',
     options: {}
@@ -27,11 +30,9 @@ module.exports = {
         ...config.resolve,
         alias: {
           ...config.resolve.alias,
-          // '@emotion/core': toPath('node_modules/@emotion/react'),
-          // 'emotion-theming': toPath('node_modules/@emotion/react'),
           '@': path.resolve(__dirname, '../app')
         }
       }
     }
-  },
+  }
 }

.storybook/preview.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect } from 'react'
+import { ChakraProvider, useColorMode } from '@chakra-ui/react'
+import { Story } from '@storybook/react'
+import { customTheme } from '../app/theme'
+
+type ColorModeProps = {
+  colorMode: 'light' | 'dark'
+  children: JSX.Element
+}
+
+function ColorMode(props: ColorModeProps) {
+  const { setColorMode } = useColorMode()
+
+  useEffect(() => {
+    setColorMode(props.colorMode)
+  }, [props.colorMode])
+
+  return props.children
+}
+
+const withChakra = (Story: Story, context) => {
+  return (
+    <ChakraProvider theme={customTheme}>
+      <ColorMode colorMode={context.globals.colorMode}>
+        <Story />
+      </ColorMode>
+    </ChakraProvider>
+  )
+}
+
+export const decorators = [withChakra]
+
+export const globalTypes = {
+  colorMode: {
+    name: 'Color Mode',
+    defaultValue: 'light',
+    toolbar: {
+      items: [
+        { title: 'Light', value: 'light' },
+        { title: 'Dark', value: 'dark' }
+      ],
+      dynamicTitle: true
+    }
+  }
+}
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/i
+    }
+  },
+  chakra: {
+    theme: customTheme
+  }
+}

app/components/button/alert-button.tsx

@@ -0,0 +1,16 @@
+import {
+  Button as ChakraButton,
+  ButtonProps as ChakraButtonProps
+} from '@chakra-ui/react'
+
+type ButtonProps = ChakraButtonProps & {
+  children: React.ReactNode
+}
+
+export const AlertButton = ({ children, ...props }: ButtonProps) => {
+  return (
+    <ChakraButton colorScheme="red" px="28px" {...props}>
+      {children}
+    </ChakraButton>
+  )
+}

app/components/button/index.ts

@@ -0,0 +1,3 @@
+export { AlertButton } from './alert-button'
+export { PrimaryButton } from './primary-button'
+export { SecondaryButton } from './secondary-button'

app/components/button/primary-button.tsx

@@ -0,0 +1,16 @@
+import {
+  Button as ChakraButton,
+  ButtonProps as ChakraButtonProps
+} from '@chakra-ui/react'
+
+type ButtonProps = ChakraButtonProps & {
+  children: React.ReactNode
+}
+
+export const PrimaryButton = ({ children, ...props }: ButtonProps) => {
+  return (
+    <ChakraButton colorScheme="primary" px="28px" {...props}>
+      {children}
+    </ChakraButton>
+  )
+}

app/components/button/secondary-button.tsx

@@ -0,0 +1,16 @@
+import {
+  Button as ChakraButton,
+  ButtonProps as ChakraButtonProps
+} from '@chakra-ui/react'
+
+type ButtonProps = ChakraButtonProps & {
+  children: React.ReactNode
+}
+
+export const SecondaryButton = ({ children, ...props }: ButtonProps) => {
+  return (
+    <ChakraButton colorScheme="gray" px="28px" {...props}>
+      {children}
+    </ChakraButton>
+  )
+}

app/components/button/stories/alert-button.stories.tsx

@@ -0,0 +1,30 @@
+import { AlertButton } from '@/components/button'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof AlertButton> = {
+  title: 'Button/AlertButton',
+  component: AlertButton
+}
+
+export default meta
+type Story = StoryObj<typeof AlertButton>
+
+export const Solid: Story = {
+  args: {
+    children: 'Button',
+    variant: 'solid',
+    isDisabled: false,
+    isActive: false,
+    isLoading: false
+  }
+}
+
+export const Outline: Story = {
+  args: {
+    children: 'Button',
+    variant: 'outline',
+    isDisabled: false,
+    isActive: false,
+    isLoading: false
+  }
+}

app/components/button/stories/primary-button.stories.tsx

@@ -0,0 +1,30 @@
+import { PrimaryButton } from '@/components/button'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof PrimaryButton> = {
+  title: 'Button/PrimaryButton',
+  component: PrimaryButton
+}
+
+export default meta
+type Story = StoryObj<typeof PrimaryButton>
+
+export const Solid: Story = {
+  args: {
+    children: 'Button',
+    variant: 'solid',
+    isDisabled: false,
+    isActive: false,
+    isLoading: false
+  }
+}
+
+export const Outline: Story = {
+  args: {
+    children: 'Button',
+    variant: 'outline',
+    isDisabled: false,
+    isActive: false,
+    isLoading: false
+  }
+}

app/components/button/stories/secondary-button.stories.tsx

@@ -0,0 +1,30 @@
+import { SecondaryButton } from '@/components/button'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof SecondaryButton> = {
+  title: 'Button/SecondaryButton',
+  component: SecondaryButton
+}
+
+export default meta
+type Story = StoryObj<typeof SecondaryButton>
+
+export const Solid: Story = {
+  args: {
+    children: 'Button',
+    variant: 'solid',
+    isDisabled: false,
+    isActive: false,
+    isLoading: false
+  }
+}
+
+export const Outline: Story = {
+  args: {
+    children: 'Button',
+    variant: 'outline',
+    isDisabled: false,
+    isActive: false,
+    isLoading: false
+  }
+}

app/page.tsx

@@ -1,8 +1,11 @@
 'use client'
 import { Link } from '@chakra-ui/next-js'
-import { Heading } from '@chakra-ui/react'
+import { Heading, VStack, Box, useColorMode } from '@chakra-ui/react'
+import { PrimaryButton } from '@/components/button'
 
 export default function Home() {
+  const { colorMode, toggleColorMode } = useColorMode()
+
   return (
     <>
       <Heading>Home</Heading>
@@ -21,6 +24,26 @@ export default function Home() {
       >
         SignUp
       </Link>
+
+      <Box>
+        <PrimaryButton onClick={toggleColorMode} variant="outline">
+          {colorMode === 'light' ? 'To Dark' : 'To Light'}
+        </PrimaryButton>
+      </Box>
+
+      <VStack>
+        <Box>Button List (only primary)</Box>
+        <PrimaryButton>Button</PrimaryButton>
+        <PrimaryButton isActive>Button</PrimaryButton>
+        <PrimaryButton isDisabled>Button</PrimaryButton>
+        <PrimaryButton variant={'outline'}>Button</PrimaryButton>
+        <PrimaryButton isActive variant={'outline'}>
+          Button
+        </PrimaryButton>
+        <PrimaryButton isDisabled variant={'outline'}>
+          Button
+        </PrimaryButton>
+      </VStack>
     </>
   )
 }

app/theme/color.ts

@@ -11,5 +11,31 @@ export const customColors = {
     800: '#086F83',
     900: '#065666',
     910: '#033F4B'
+  },
+  black: '#001c21',
+  white: '#F8F8F8',
+  red: {
+    50: '#FFF5F5',
+    100: '#FED7D7',
+    200: '#FEB2B2',
+    300: '#FC8181',
+    400: '#F56565',
+    500: '#E84949',
+    600: '#E53E3E',
+    700: '#C53030',
+    800: '#9B2C2C',
+    900: '#822727'
+  },
+  gray: {
+    50: '#F7FAFC',
+    100: '#EDF2F7',
+    200: '#E2E8F0',
+    300: '#CBD5E0',
+    400: '#A0AEC0',
+    500: '#718096',
+    600: '#4A5568',
+    700: '#2D3748',
+    800: '#1A202C',
+    900: '#171923'
   }
 }