Rebuild storybook and refactor button component (#196)

* update Metadata * fix: NavigationBar storybook render error * feat(WIP): create new button * design: add design token * apply radix ui themes * append storybook variables * feat: create new button * chore: add path alias * feat: create noop function * docs: create storybook component
loopy-dev · Jan 4, 2024 · 80fbe8c · 80fbe8c
1 parent 60f25e1
commit 80fbe8c
Show file tree

Hide file tree

Showing 16 changed files with 2,527 additions and 852 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -16,7 +16,11 @@ const config: StorybookConfig = {
   ],
   framework: {
     name: '@storybook/nextjs',
-    options: {},
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
   },
   async webpackFinal(config) {
     return {
@@ -38,10 +42,12 @@ const config: StorybookConfig = {
         },
         alias: {
           ...config.resolve?.alias,
-          '~': path.resolve(__dirname, 'src'),
           '~components': path.resolve(__dirname, 'src/components'),
           '~hooks': path.resolve(__dirname, 'src/hooks'),
+          '~lib': path.resolve(__dirname, 'src/lib'),
           '~models': path.resolve(__dirname, 'src/models'),
+          '~t': path.resolve(__dirname, 'src/types'),
+          '~': path.resolve(__dirname, 'src'),
         },
       },
     };

diff --git a/.storybook/storybook.scss b/.storybook/storybook.scss
@@ -1,89 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@mixin light_variables {
-  --bg-page1: #f6f7f7;
-  --bg-page2: #ffffff;
-  --bg-element1: #ffffff;
-  --bg-disabled: rgba(0, 0, 0, 0.12);
-  --bg-nav: rgba(255, 255, 255, 0.8);
-  --bg-skeleton: rgba(226, 232, 240, 1);
-  --text1: #202124;
-  --text2: #50575e;
-  --text3: #8c8f94;
-  --text4: #ced4da;
-}
-
-@mixin dark_variables {
-  --bg-page1: #121212;
-  --bg-page2: #121212;
-  --bg-element1: #1e1e1e;
-  --bg-disabled: rgba(255, 255, 255, 0.12);
-  --bg-nav: rgba(18, 18, 18, 0.8);
-  --text1: #eeeeee;
-  --text2: #d1d5db;
-  --text3: #bdbdbd;
-  --text4: #616161;
-}
-
-@mixin default_variables {
-  --primary: #1da1f2;
-  --primary-light: #b2d7ef;
-  --primary-variant: rgb(24, 144, 255);
-  --bg-selection: rgba(35, 131, 226, 0.28);
-  --success: #55ce9b;
-  --error: rgb(239, 68, 68);
-}
-
-:root {
-  @include light_variables();
-  @include default_variables();
-}
-
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
-    Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
-    Helvetica Neue, sans-serif;
-}
-
-html {
-  &.dark {
-    @include dark_variables();
-  }
-}
-
-body {
-  color: var(--text1);
-  background-color: var(--bg-page2);
-
-  &[data-theme='light'] {
-    @include light_variables();
-  }
-
-  &[data-theme='dark'] {
-    @include dark_variables();
-  }
-}
-
-::selection {
-  background-color: var(--bg-selection);
-}
-
-@media (prefers-color-scheme: dark) {
-  body {
-    @include dark_variables();
-  }
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-* {
-  box-sizing: border-box;
-}
+@use '../src/lib/styles/globals';
diff --git a/package.json b/package.json
@@ -12,6 +12,8 @@
   "dependencies": {
     "@firebase/firestore": "^3.8.3",
     "@next/bundle-analyzer": "^13.2.3",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/themes": "^2.0.3",
     "@reduxjs/toolkit": "^1.9.3",
     "@vercel/analytics": "^0.1.8",
     "axios": "^1.3.3",
@@ -45,16 +47,18 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.12",
+    "@babel/core": "^7.23.6",
     "@octokit/types": "^9.2.0",
-    "@storybook/addon-essentials": "7.0.18",
-    "@storybook/addon-interactions": "7.0.18",
-    "@storybook/addon-links": "7.0.18",
-    "@storybook/addon-styling": "^1.3.0",
-    "@storybook/blocks": "7.0.18",
+    "@storybook/addon-essentials": "^7.6.6",
+    "@storybook/addon-interactions": "^7.6.6",
+    "@storybook/addon-links": "^7.6.6",
+    "@storybook/addon-onboarding": "^1.0.10",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/blocks": "^7.6.6",
     "@storybook/nextjs": "^7.6.6",
     "@storybook/react": "^7.6.6",
-    "@storybook/testing-library": "^0.1.0",
+    "@storybook/test": "^7.6.6",
+    "@storybook/testing-library": "^0.2.2",
     "@svgr/webpack": "^6.5.1",
     "@types/jest": "^29.5.1",
     "@types/node": "18.11.18",

diff --git a/src/app/(pages)/about/layout.tsx b/src/app/(pages)/about/layout.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
-import Head from 'next/head';
 import GlobalLayout from '~components/layouts/GlobalLayout';
 import { DEFAULT_PAGE_TITLE } from '~lib/constants';
 import type { Metadata } from 'next';
 
-const metadata: Metadata = {
+export const metadata: Metadata = {
   title: `About Me - ${DEFAULT_PAGE_TITLE}`,
   description: '프론트엔드 개발자 벤을 소개합니다.',
+  openGraph: {
+    title: `About Me - ${DEFAULT_PAGE_TITLE}`,
+    description: '프론트엔드 개발자 벤을 소개합니다.',
+  },
 };
 
 interface Props {
@@ -16,25 +19,7 @@ interface Props {
 const Layout = (props: Props) => {
   const { children } = props;
 
-  return (
-    <GlobalLayout>
-      <Head>
-        <title>About Me - {DEFAULT_PAGE_TITLE}</title>
-        <meta
-          key="title"
-          content={typeof metadata.title === 'string' ? metadata.title : ''}
-          property="og:title"
-        />
-        <meta
-          key="description"
-          content={metadata.description ?? ''}
-          name="description"
-          property="og:description"
-        />
-      </Head>
-      {children}
-    </GlobalLayout>
-  );
+  return <GlobalLayout>{children}</GlobalLayout>;
 };
 
 export default Layout;
diff --git a/src/app/(pages)/layout.tsx b/src/app/(pages)/layout.tsx
@@ -4,6 +4,7 @@ import { DEFAULT_PAGE_DESCRIPTION, DEFAULT_PAGE_TITLE } from '~lib/constants';
 import { pageview, GA_TRACKING_ID } from '~/lib/ga/gtag';
 import StyledComponentsRegistry from '~lib/registry/styled-components';
 import '~lib/styles/globals.scss';
+import '@radix-ui/themes/styles.css';
 
 export const metadata: Metadata = {
   title: DEFAULT_PAGE_TITLE,

diff --git a/src/app/(pages)/posts/layout.tsx b/src/app/(pages)/posts/layout.tsx
@@ -1,30 +1,22 @@
-import Head from 'next/head';
 import GlobalLayout from '~components/layouts/GlobalLayout';
 import { DEFAULT_PAGE_TITLE } from '~lib/constants';
+import type { Metadata } from 'next';
 
 interface Props {
   children?: React.ReactNode;
 }
 
+export const metadata: Metadata = {
+  title: `Posts - ${DEFAULT_PAGE_TITLE}`,
+  description: '작성한 글들을 모아볼 수 있어요.',
+  openGraph: {
+    title: `Posts- ${DEFAULT_PAGE_TITLE}`,
+    description: '작성한 글들을 모아볼 수 있어요.',
+  },
+};
+
 const Layout = ({ children }: Props) => {
-  return (
-    <GlobalLayout>
-      <Head>
-        <title>Posts - {DEFAULT_PAGE_TITLE}</title>
-        <meta
-          key="title"
-          content={`Posts - ${DEFAULT_PAGE_TITLE}`}
-          property="og:title"
-        />
-        <meta
-          key="description"
-          content="작성한 글들을 모아볼 수 있어요."
-          property="og:description"
-        />
-      </Head>
-      {children}
-    </GlobalLayout>
-  );
+  return <GlobalLayout>{children}</GlobalLayout>;
 };
 
 export default Layout;
diff --git a/src/app/(pages)/ps/layout.tsx b/src/app/(pages)/ps/layout.tsx
@@ -1,30 +1,22 @@
-import Head from 'next/head';
 import GlobalLayout from '~components/layouts/GlobalLayout';
 import { DEFAULT_PAGE_TITLE } from '~lib/constants';
+import type { Metadata } from 'next';
 
 interface Props {
   children?: React.ReactNode;
 }
 
+export const metadata: Metadata = {
+  title: `Posts - ${DEFAULT_PAGE_TITLE}`,
+  description: '작성한 글들을 모아볼 수 있어요.',
+  openGraph: {
+    title: `Posts- ${DEFAULT_PAGE_TITLE}`,
+    description: '작성한 글들을 모아볼 수 있어요.',
+  },
+};
+
 const Layout = ({ children }: Props) => {
-  return (
-    <GlobalLayout>
-      <Head>
-        <title>Posts - {DEFAULT_PAGE_TITLE}</title>
-        <meta
-          key="title"
-          content={`Posts - ${DEFAULT_PAGE_TITLE}`}
-          property="og:title"
-        />
-        <meta
-          key="description"
-          content="작성한 글들을 모아볼 수 있어요."
-          property="og:description"
-        />
-      </Head>
-      {children}
-    </GlobalLayout>
-  );
+  return <GlobalLayout>{children}</GlobalLayout>;
 };
 
 export default Layout;
diff --git a/src/components/NavigationBar/NavigationBar.stories.tsx b/src/components/NavigationBar/NavigationBar.stories.tsx
@@ -1,11 +1,22 @@
 import NavigationBar from './NavigationBar';
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj, StoryFn } from '@storybook/react';
+
+type ComponentMeta = Meta<typeof NavigationBar>;
+type StoryTemplate = StoryFn<typeof NavigationBar>;
+type StoryComponent = StoryObj<typeof NavigationBar>;
 
 export default {
   title: 'Components/NavigationBar',
   component: NavigationBar,
-} as ComponentMeta<typeof NavigationBar>;
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} as ComponentMeta;
 
-const Template: ComponentStory<typeof NavigationBar> = () => <NavigationBar />;
+const Template: StoryTemplate = () => <NavigationBar />;
 
-export const Default = Template.bind({});
+export const Default: StoryComponent = {
+  render: Template,
+};
diff --git a/src/components/NavigationBar/NavigationBar.tsx b/src/components/NavigationBar/NavigationBar.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import classNames from 'classnames';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';

diff --git a/src/components/common/Button.new/Button.stories.tsx b/src/components/common/Button.new/Button.stories.tsx
@@ -0,0 +1,19 @@
+import Button from './Button';
+import type { StoryObj, StoryFn, Meta } from '@storybook/react';
+
+type ComponentMeta = Meta<typeof Button>;
+type StoryTemplate = StoryFn<typeof Button>;
+type StoryComponent = StoryObj<typeof Button>;
+
+export default {
+  title: 'Components/new/Button',
+  component: Button,
+} as ComponentMeta;
+
+const Template: StoryTemplate = (...args) => (
+  <Button {...args}>Hello, World!</Button>
+);
+
+export const Default: StoryComponent = {
+  render: Template,
+};