Merge pull request #35 from yourssu/develop

v1.0.0

.github/CODEOWNERS

@@ -5,4 +5,4 @@
 # the repo. Unless a later match takes precedence,
 # @global-owner1 and @global-owner2 will be requested for
 # review when someone opens a pull request.
-* @HyunsDev @nijuy @Hanna922
+* @nijuy @Hanna922

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,13 @@
+# ISSUE ✅ :
+
+## 📖 Summary
+
+버그를 간단히 요약해주세요.
+
+## Error Script
+
+에러 내용 전체를 첨부해주세요.
+
+## Photo
+
+버그 재현 스크린샷을 첨부해주세요.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,5 @@
+# ISSUE ✅ :
+
+## 📖 Summary
+
+이슈를 간단히 요약해주세요.

.npmignore

@@ -25,5 +25,5 @@ dist-ssr
 .yarn
 storybook-static
 package.tgz
-icons
+iconsAsset
 .storybook

.storybook/main.ts

@@ -13,7 +13,7 @@ const config: StorybookConfig = {
     options: {},
   },
   docs: {
-    autodocs: 'tag',
+    autodocs: true,
   },
 };
 export default config;

README.md

@@ -10,17 +10,39 @@ YDS는 숭실대학교 동아리 유어슈에서 사용하는 디자인 시스
 YDS 문서는 노션 페이지에서 관리됩니다.  
 컴포넌트 정보와 사용 예시 등을 확인할 수 있습니다.
 
+[YDS Storybook](http://yds-react-storybook.s3-website.ap-northeast-2.amazonaws.com/?path=/docs/foundation-iconcontext--docs)
+
 ## 🖌 피그마
 
 [YDS Figma](https://www.figma.com/community/file/1146974544001355129)
 
-## 🛠 설치 방법
+## 🛠 사용 방법
+
+1. YDS 패키지 및 styled-components를 설치합니다.
+
+```
+npm install @yourssu/design-system-react styled-components
+
+yarn add @yourssu/design-system-react styled-components
+
+pnpm install @yourssu/design-system-react styled-components
+```
+
+2. Root Component에 YDSWrapper를 감싸줍니다.
 
-개발 중
+```jsx
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <YDSWrapper>
+      <App />
+    </YDSWrapper>
+  </React.StrictMode>
+);
+```
 
 ## 📱 YDS를 사용해 개발한 프로덕트
 
-개발 중
+[Soomsil-Web](https://github.com/yourssu/Soomsil-Web)
 
 ## 💻 타 버전 저장소
 

icons/convert.mjs → iconsAsset/convert.mjs

@@ -9,7 +9,7 @@ import prettier from 'prettier';
 import { DOMParser, XMLSerializer } from 'xmldom';
 
 const __dirname = path.resolve();
-const ICONS_DIR = path.join(__dirname, './icons/static');
+const ICONS_DIR = path.join(__dirname, './iconsAsset/static');
 const ICONS_COMPONENTS_DIR = path.join(__dirname, './src/style/foundation/icons/generated');
 const ICONS_INDEX_PATH = path.join(__dirname, './src/style/foundation/icons/generated/index.ts');
 const ICONS_STORIES_PATH = path.join(__dirname, './src/style/foundation/icons/icons.stories.tsx');
@@ -52,8 +52,8 @@ function camelizeElementAttributes(elem) {
 }
 
 const SVGComponentTemplate = (name, viewBox, svg) => `/**
- * 이 파일은 icons/convert.js에 의해 자동 생성되었습니다.
- * 직접 수정하는 대신 icons/convert.js를 수정하세요.
+ * 이 파일은 iconsAsset/convert.js에 의해 자동 생성되었습니다.
+ * 직접 수정하는 대신 iconsAsset/convert.js를 수정하세요.
  */
 
 import { memo, forwardRef } from 'react';
@@ -69,8 +69,8 @@ export const ${name} = memo(forwardRef<SVGSVGElement, IconProps>((props, ref) =>
 `;
 
 const StoryTemplate = (icons) => `/**
- * 이 파일은 icons/convert.js에 의해 자동 생성되었습니다.
- * 직접 수정하는 대신 icons/convert.js를 수정하세요.
+ * 이 파일은 iconsAsset/convert.js에 의해 자동 생성되었습니다.
+ * 직접 수정하는 대신 iconsAsset/convert.js를 수정하세요.
  */
 
 import { Meta, StoryObj } from '@storybook/react';

package.json

@@ -1,13 +1,12 @@
 {
   "name": "@yourssu/design-system-react",
   "private": false,
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Yourssu Design System for React",
   "keywords": [
     "yourssu",
     "design system",
-    "react",
-    "design system"
+    "react"
   ],
   "repository": "yourssu/YDS-React",
   "license": "MIT",
@@ -29,7 +28,7 @@
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "convert-icon": "node ./icons/convert.mjs"
+    "convert-icon": "node ./iconsAsset/convert.mjs"
   },
   "peerDependencies": {
     "react": "^18.2.0",

src/components/Badge/Badge.type.ts

@@ -1,7 +1,10 @@
 import { SemanticBGColor } from '@/style';
 
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** 배경 색상 */
   color?: SemanticBGColor;
+  /** Badge 안에 들어갈 텍스트 */
   children?: React.ReactNode;
+  /** 텍스트 왼쪽에 들어갈 아이콘 */
   leftIcon?: React.ReactNode;
 }

src/components/BoxButton/BoxButton.stories.tsx

@@ -3,12 +3,50 @@ import { Meta, StoryObj } from '@storybook/react';
 import { IcGroundLine } from '@/style';
 
 import { BoxButton } from './BoxButton';
+import { Stories, Primary as PrimaryBlock, Controls, Title } from '@storybook/blocks';
 
 const meta: Meta<typeof BoxButton> = {
   title: 'Atoms/BoxButton',
   component: BoxButton,
   parameters: {
     layout: 'centered',
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <PrimaryBlock />
+          <Controls />
+          <h2> Size에 따른 속성 </h2>
+          <h3> extraLarge </h3>
+          <span>
+            {
+              '이 옵션을 선택하면 `height = 56`, `typo = button1`, `iconSize = medium(24*24)`, `horizontal Padding = 16` 으로 설정됩니다.'
+            }
+          </span>
+          <h3> large </h3>
+          <span>
+            {
+              '이 옵션을 선택하면 `height = 48`, `typo = button2`, `iconSize = medium(24*24)`, `horizontal Padding = 16` 으로 설정됩니다.'
+            }
+          </span>
+          <h3> medium </h3>
+          <span>
+            {
+              '이 옵션을 선택하면 `height = 40`, `typo = button2`, `iconSize = medium(24*24)`, `horizontal Padding = 12` 으로 설정됩니다.'
+            }
+          </span>
+          <h3> small </h3>
+          <span>
+            {
+              '이 옵션을 선택하면 `height = 32`, `typo = button4`, `iconSize = small(16*16)`, `horizontal Padding = 12` 으로 설정됩니다.'
+            }
+          </span>
+          <h2> 속성 우선순위 </h2>
+          <span>{'속성이 충돌할 때는 isDisabled > isWarned 순으로 우선됩니다.'}</span>
+          <Stories />
+        </>
+      ),
+    },
   },
 };
 

src/components/BoxButton/BoxButton.style.ts

@@ -10,9 +10,9 @@ import {
 interface StyledBoxButtonProps {
   $size: BoxButtonSize;
   $variant: BoxButtonVariant;
-  $isWarned: BoxButtonProps['isWarned'];
-  $rounding: BoxButtonRounding;
-  $width: BoxButtonProps['width'];
+  $rounding?: BoxButtonRounding;
+  $isWarned?: BoxButtonProps['isWarned'];
+  $width?: BoxButtonProps['width'];
 }
 
 const getNormalStyle = ($variant: BoxButtonVariant) => {

src/components/BoxButton/BoxButton.type.ts

@@ -3,13 +3,22 @@ export type BoxButtonRounding = 4 | 8;
 export type BoxButtonVariant = 'filled' | 'tinted' | 'line';
 
 export interface BoxButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** BoxButton의 크기를 결정하는 속성 */
   size: BoxButtonSize;
-  rounding: BoxButtonRounding;
-  isDisabled: HTMLButtonElement['disabled'];
-  isWarned: boolean;
+  /** BoxButton의 모양을 결정하는 속성 */
   variant: BoxButtonVariant;
+  /** BoxButton의 모서리를 결정하는 속성 */
+  rounding: BoxButtonRounding;
+  /** BoxButton의 비활성화 여부를 결정하는 속성, 비활성화 상태에는 pressed 효과가 존재하지 않습니다. */
+  isDisabled?: HTMLButtonElement['disabled'];
+  /** BoxButton의 경고 여부를 결정하는 속성 */
+  isWarned?: boolean;
+  /** BoxButton의 왼쪽에 들어갈 아이콘 */
   leftIcon?: React.ReactNode;
+  /** BoxButton의 내용 */
   children?: React.ReactNode;
+  /** BoxButton의 오른쪽에 들어갈 아이콘 */
   rightIcon?: React.ReactNode;
+  /** BoxButton의 width */
   width?: string | number;
 }

src/components/CheckBox/CheckBox.stories.tsx

@@ -1,12 +1,44 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import { CheckBox } from './CheckBox';
+import { Stories, Primary as PrimaryBlock, Controls, Title } from '@storybook/blocks';
 
 const meta: Meta<typeof CheckBox> = {
   title: 'Atoms/CheckBox',
   component: CheckBox,
   parameters: {
     layout: 'centered',
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <PrimaryBlock />
+          <Controls />
+          <h2> Size에 따른 속성 </h2>
+          <h3> large </h3>
+          <span>
+            {
+              '이 옵션을 선택하면 `iconSize = medium(24*24)`, `typo = button3`, `CheckBox icon과 label 사이 여백 = 8` 으로 설정됩니다.'
+            }
+          </span>
+          <h3> medium </h3>
+          <span>
+            {
+              '이 옵션을 선택하면 `iconSize = small(20*20)`, `typo = button3`, `CheckBox icon과 label 사이 여백 = 8` 으로 설정됩니다.'
+            }
+          </span>
+          <h3> small </h3>
+          <span>
+            {
+              '이 옵션을 선택하면 `iconSize = extraSmall(16*16)`, `typo = button4`, `CheckBox icon과 label 사이 여백 = 4` 으로 설정됩니다.'
+            }
+          </span>
+          <h2> 속성 우선순위 </h2>
+          <span>{'속성이 충돌할 때는 isDisabled > isSelected 순으로 우선됩니다.'}</span>
+          <Stories />
+        </>
+      ),
+    },
   },
 };
 

src/components/CheckBox/CheckBox.type.ts

@@ -1,8 +1,12 @@
 export type CheckBoxSize = 'small' | 'medium' | 'large';
 
 export interface CheckBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /** CheckBox의 크기를 결정하는 속성 */
   size?: CheckBoxSize;
+  /** CheckBox의 선택 여부를 결정하는 속성 */
   isSelected?: HTMLInputElement['checked'];
+  /** CheckBox의 비활성화 여부를 결정하는 속성 */
   isDisabled?: HTMLInputElement['disabled'];
+  /** CheckBox의 내용 */
   children?: React.ReactNode;
 }

src/components/ListItem/ListItem.type.ts

@@ -1,7 +1,12 @@
 export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
+  /** ListItem의 선택 여부를 나타내는 속성 */
   isPressed?: boolean;
+  /** ListItem의 width */
   width?: string | number;
+  /** ListItem의 내용 */
   children?: React.ReactNode;
+  /** ListItem의 왼쪽에 들어갈 아이콘 */
   leftIcon?: React.ReactNode;
+  /** ListItem의 오른쪽에 들어갈 아이콘 */
   rightIcon?: React.ReactNode;
 }

src/components/PlainButton/PlainButton.stories.tsx

@@ -3,12 +3,40 @@ import { Meta, StoryObj } from '@storybook/react';
 import { IcGroundLine } from '@/style';
 
 import { PlainButton } from './PlainButton';
+import { Stories, Primary as PrimaryBlock, Controls, Title } from '@storybook/blocks';
 
 const meta: Meta<typeof PlainButton> = {
   title: 'Atoms/PlainButton',
   component: PlainButton,
   parameters: {
     layout: 'centered',
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <PrimaryBlock />
+          <Controls />
+          <h2> Size에 따른 속성 </h2>
+          <h3> large </h3>
+          <span>
+            {
+              '이 옵션을 선택하면 `iconSize = medium(24*24)` 으로 설정됩니다. text는 보이지 않습니다.'
+            }
+          </span>
+          <h3> medium </h3>
+          <span>
+            {'이 옵션을 선택하면 `typo = button3`, `iconSize = small(20*20)` 으로 설정됩니다.'}
+          </span>
+          <h3> small </h3>
+          <span>
+            {'이 옵션을 선택하면 `typo = button4`, `iconSize = extraSmall(16*16)` 으로 설정됩니다.'}
+          </span>
+          <h2> 속성 우선순위 </h2>
+          <span>{'속성이 충돌할 때는 isDisabled > isWarned > isPointed 순으로 우선됩니다.'}</span>
+          <Stories />
+        </>
+      ),
+    },
   },
 };
 

src/components/PlainButton/PlainButton.type.ts

@@ -1,10 +1,16 @@
 export type PlainButtonSize = 'small' | 'medium' | 'large';
 
 export interface PlainButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** PlainButton의 크기를 결정하는 속성 */
   size: PlainButtonSize;
+  /** PlainButton의 Pointed 여부를 결정하는 속성 */
   isPointed: boolean;
+  /** PlainButton의 경고 여부를 결정하는 속성 */
   isWarned: boolean;
+  /** PlainButton의 왼쪽에 들어갈 아이콘 */
   leftIcon?: React.ReactNode;
+  /** PlainButton의 내용 */
   children?: React.ReactNode;
+  /** PlainButton의 오른쪽에 들어갈 아이콘 */
   rightIcon?: React.ReactNode;
 }