0.3.6 버전 배포 및 스토리북 추가 (#9)

* fix: 성공 및 에러메세지 표시 조건 수정

* refactor: useDropdown 제네릭 타입 수정

* refactor: 일부 커스텀 훅 제네릭 타입 오류 수정

* feat: Box, Flex 컴포넌트에 box-shadow interface 추가

* fix: DropdownItem cursor 스타일 오류 수정

* chore: 0.3.6 버전 업데이트 및 스토리북 추가

* storybook: TabLayout 구현 및 상호작용 테스트

* fix: Docs 탭에서 스크롤이 불가한 오류 수정

* storybook: Spacer 구현

* storybook: example 탭에서 테스트하고 보다 실제 사용되는 형태와 가깝게 설계

Tab 컴포넌트 width, height를 100%로 일괄 조정한다.

* fix: 잘못된 testId -> testid로 변경 및 key prop 추가

* chore: stories 파일 eslint ignore 등록

* storybook: Tag 구현 및 상호작용 테스트

* refactor: TabLayout testid 수정 및 그에 따른 스토리북 테스트 수정

* storybook: description 일괄 수정

* storybook: Spacer as 프롭 잠재적 오류 수정

* storybook: Text 구현

* refactor: Tag default value 변경

* storybook: 기본값 설정 및 불필요한 render 프로퍼티 제거

* storybook: TextDivider 구현

* storybook: RadioContainer 구현 및 상호작용 테스트

* storybook: 불필요한 옵션 제거

* storybook: useRadio import 경로 수정

* storybook: Navigation 구현 및 상호작용 테스트

* storybook: 상호작용 테스트 및 예시 네이밍 일괄 변경

* storybook: Header 구현

* storybook: Flex 구현

* storybook: Box 구현

* storybook: Button 구현

* refactor: attributes 속성 전개 및 testid 스토리북에서 사용

* refactor: Text 컴포넌트 중복 속성 제거

* refactor: 누락된 attributes 속성 전개 및 스토리북 수정

* storybook: badge 구현 및 BadgeItem -> Badge로 변경

기존의 Badge는 역할이 없으므로 사용처에서 Wrapper를 만들어 사용하도록 변경한다.

* storybook: Text addon 컨트롤 타입 변경

* storybook: Divider 구현

* refactor: color 타입 내로잉 및 스토리북 기본값 설명 추가

* storybook: BottomSheet 구현 및 상호작용 테스트

* storybook: CheckboxContainer 구현 및 상호작용 테스트

* storybook: nameKey 잠재적 오류 수정

* storybook: ResetStyle 글로벌 적용 및 그에 따른 스타일 수정

* storybook: Dropdown 구현 및 상호작용 테스트

* storybook: Field 구현 및 상호작용 테스트

추가로 sleep 유틸 함수를 구현한다.

* storybook: RadioContainer 기본값 설명 추가

* chore: chromatic 자동 배포 설정

* chore: 버저닝 기록 및 상세설명 수정

* docs: readme 잘못된 설명 수정 및 스토리북 링크 추가

* storybook: delay 500 -> 300 일괄 수정

* chore: storybook chromatic yarn version update 3.1.0

* chore: revert storybook chromatic yarn version update 3.1.0

* chore: chromatic string-width 에러 수정

* rename: SVG 소스 검토 및 변경사항 적용

* storybook: SVG, PNG 에셋 스토리북 추가 및 불필요한 에셋 삭제 적용

* refactor: Font 최적화 및 적용

* docs: Readme 다운로드 sh 수정

* storybook: 필요없는 애드온 control false 일괄 지정

* chore: SVG 컴포넌트 추가 및 적용

* refactor: Tag 컴포넌트 prop 변경 및 원할한 빌드 tsc를 위해 storybook 분리

* chore: 0.3.9 버전 배포 및 rollupOptions 수정

* storybook: chromatic 저장소 변경을 위한 수정

* docs: 스토리북 링크 수정

.eslintrc.cjs

@@ -8,7 +8,7 @@ module.exports = {
     'plugin:import/errors',
     'plugin:import/warnings',
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs', 'tsconfig'],
+  ignorePatterns: ['dist', '.eslintrc.cjs', 'tsconfig', '*.stories.*'],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh', 'import'],
   rules: {

.github/workflows/chromatic.yml

@@ -0,0 +1,22 @@
+# Workflow name
+name: 'Chromatic Deployment'
+
+# Event for the workflow
+on: push
+
+# List of jobs
+jobs:
+  test:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v1
+      - run: yarn
+        #👇 Adds Chromatic as a step in the workflow
+      - uses: chromaui/action@v1
+        # Options required for Chromatic's GitHub Action
+        with:
+          #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/ to obtain it
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}

.storybook/ResetStyle.ts

@@ -0,0 +1,144 @@
+import { css } from '@emotion/react';
+
+export const ResetStyles = css`
+  html,
+  body,
+  div,
+  span,
+  applet,
+  object,
+  iframe,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  blockquote,
+  pre,
+  a,
+  abbr,
+  acronym,
+  address,
+  big,
+  cite,
+  code,
+  del,
+  dfn,
+  em,
+  img,
+  ins,
+  kbd,
+  q,
+  s,
+  samp,
+  small,
+  strike,
+  strong,
+  sub,
+  sup,
+  tt,
+  var,
+  b,
+  u,
+  i,
+  center,
+  dl,
+  dt,
+  dd,
+  ol,
+  ul,
+  li,
+  fieldset,
+  form,
+  label,
+  legend,
+  table,
+  caption,
+  tbody,
+  tfoot,
+  thead,
+  tr,
+  th,
+  td,
+  article,
+  aside,
+  canvas,
+  details,
+  embed,
+  figure,
+  figcaption,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  output,
+  ruby,
+  section,
+  summary,
+  time,
+  mark,
+  audio,
+  video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    vertical-align: baseline;
+  }
+
+  button {
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  /* HTML5 display-role reset for older browsers */
+
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  section {
+    display: block;
+  }
+
+  body {
+    line-height: 1;
+  }
+
+  ol,
+  ul {
+    list-style: none;
+  }
+
+  blockquote,
+  q {
+    quotes: none;
+  }
+
+  blockquote:before,
+  blockquote:after,
+  q:before,
+  q:after {
+    content: none;
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  * {
+    font-family: 'SUIT Variable', sans-serif;
+  }
+`;

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,27 @@
+import { Global, ThemeProvider } from '@emotion/react';
+import theme from '../src/styles/theme';
+import type { Preview } from '@storybook/react';
+import React from 'react';
+import { ResetStyles } from './ResetStyle';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={theme}>
+        <Global styles={ResetStyles} />
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default preview;

README.md

@@ -5,9 +5,13 @@
 ## 설치 방법
 
 ```sh
-$ npm install concept-be-design-system
-# or
-$ yarn add concept-be-design-system
+npm install concept-be-design-system
+```
+
+또는
+
+```sh
+yarn add concept-be-design-system
 ```
 
 ## 사용 전에
@@ -26,6 +30,8 @@ const App = ({ children }) => {
 
 ### 컴포넌트
 
+자세한 내용은 [스토리북](https://65a04fca8611ba47d7f8b115-jlefxghrma.chromatic.com/)에서 확인하세요.
+
 Button 컴포넌트는 다음과 같이 사용할 수 있습니다.
 
 ```jsx
@@ -172,10 +178,7 @@ function SomeComponent() {
         nameKey="skill"
         options={radioValue.skill}
         onChange={(e) =>
-          onChangeRadio(e, 'skill', {
-            checkboxKey: 'skill',
-            maxValue: 3,
-          })
+          onChangeRadio(e, 'skill')
         }
       />
     </form>
@@ -249,7 +252,7 @@ function SomeComponent() {
 
 ## 문서
 
-추후 업데이트 예정
+- [스토리북](https://65a04fca8611ba47d7f8b115-jlefxghrma.chromatic.com/)
 
 ## 기여