{"id":24936734,"url":"https://github.com/designsystemlab/design-system","last_synced_at":"2025-10-16T19:47:34.280Z","repository":{"id":65922900,"uuid":"594378196","full_name":"DesignSystemLab/design-system","owner":"DesignSystemLab","description":"💎 J Design System","archived":false,"fork":false,"pushed_at":"2023-10-25T15:13:28.000Z","size":6637,"stargazers_count":55,"open_issues_count":13,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-10T01:04:18.104Z","etag":null,"topics":["css-in-js","design-system","emotion","react","storybook","styleguide","typescript"],"latest_commit_sha":null,"homepage":"https://designsystemlab.github.io/design-system/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DesignSystemLab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-28T11:13:26.000Z","updated_at":"2025-03-29T07:45:21.000Z","dependencies_parsed_at":"2024-11-14T13:23:13.847Z","dependency_job_id":"3e39f2ee-3c61-4489-ba7f-5f3b59788c25","html_url":"https://github.com/DesignSystemLab/design-system","commit_stats":null,"previous_names":[],"tags_count":225,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DesignSystemLab%2Fdesign-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DesignSystemLab%2Fdesign-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DesignSystemLab%2Fdesign-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DesignSystemLab%2Fdesign-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DesignSystemLab","download_url":"https://codeload.github.com/DesignSystemLab/design-system/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248137890,"owners_count":21053775,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-in-js","design-system","emotion","react","storybook","styleguide","typescript"],"created_at":"2025-02-02T16:43:10.160Z","updated_at":"2025-10-16T19:47:29.246Z","avatar_url":"https://github.com/DesignSystemLab.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# J Design System\n\n![jds-thumb](https://github.com/react95-io/React95/assets/46988995/ac97b7f7-2420-40f6-9990-25217a8381df)\n\n## Introduction\n\n💎 J Design System은 여러 재사용 가능한 핵심적인 UI 컴포넌트를 담아내고 있는 React에서 사용할 수 있는 Design System UI Library 입니다. 빠르고 쉽게 적용할 수 있는 단순한 인터페이스를 지향하였으며, 웹 접근성을 최대한 준수하였습니다.\n\n## Why you should use J Design System\n\n- ⚡️ Compound Component 구조와 일관성 있는 속성 구조를 통해 간결한 사용자 인터페이스를 유지하도록 하였습니다.\n- 🌈 `as` 속성을 통해 컴포넌트 다형성을 지원하도록 구현했습니다.\n- ⚠️ 웹 접근성을 고려해 적절한 `html role`을 사용하여 컴포넌트를 구성하였습니다.\n- 🧩 다양한 사용 환경을 고려해 `cjs`, `esm` 모듈을 지원하도록 번들링을 구성하였습니다.\n- ⌨️ Uncontrolled Component 특성을 활용해 인터랙션이 필요한 컴포넌트들을 지원하였습니다.\n- 💫 Form 관련 컴포넌트들은 [React Hook Form](https://react-hook-form.com/)을 지원합니다.\n\n## Project Overview\n\n- **[💄 Storybook Link](https://designsystemlab.github.io/design-system/)**\n- **[🚚 Yarn Berry: 패키지 매니저로 Yarn Berry를 활용하였습니다.](https://github.com/DesignSystemLab/design-system/wiki/Package-Manager:-Yarn-Berry)**\n- **[⚡️ Compound Component 패턴을 활용하여 유연한 구성이 가능하도록 설계되었습니다.](https://github.com/DesignSystemLab/design-system/wiki/Compound-Component-Pattern)**\n- **[🏢 Monorepo Architecture를 채택해 코드 공유와 협업을 용이하게 구성하였습니다.](https://github.com/DesignSystemLab/design-system/wiki/Monorepo-Architecture)**\n- **[⌨️ Keyboard Control: 키보드 제어 기능을 포함하여 사용자 상호작용과 접근성에 주의를 기울였습니다.](https://github.com/DesignSystemLab/design-system/wiki/Keyboard-Control)**\n- **[✅ dependency-cruiser를 사용하여 의존성을 체크하여 패키지 간 참조 관계를 검사하였습니다.](https://github.com/DesignSystemLab/design-system/wiki/dependency-cruiser)**\n- **[💅 Emotion을 사용하여 컴포넌트 스타일링을 구현하였습니다.](https://github.com/DesignSystemLab/design-system/wiki/Styling-Library:-Emotion)**\n- **[🧪 Jest와 React Testing Library를 사용하여 테스트를 구성하였습니다.](https://github.com/DesignSystemLab/design-system/wiki/Test-Using-JEST-\u0026-React-Testing-Library)**\n- **[📦 모듈 번들링을 위해 tsup을 사용하였습니다.](https://github.com/DesignSystemLab/design-system/wiki/tsup%EC%9D%84-%ED%99%9C%EC%9A%A9%ED%95%9C-%EB%B2%88%EB%93%A4%EB%A7%81)**\n- **[🚀 Changeset과 함께 CI/CD 파이프라인을 구축하여 자동화된 빌드 및 배포 환경을 구성하였습니다.](https://github.com/DesignSystemLab/design-system/wiki/%F0%9F%A6%8B-Changeset-CI-CD)**\n\n## Installation\n\n💅 `Emotion` 환경에서 동작하기 때문에 emotion dpendency가 필요합니다.  \n**React UI Component**\n\n```bash\nnpm install --save @jdesignlab/react @emotion/react@^11\n```\n\n**SVG Icons**\n\n```bash\nnpm install --save @jdesignlab/react-icons @emotion/react@^11\n```\n\n아래와 같이 필요한 UI 컴포넌트를 import하여 사용할 수 있습니다. 각 컴포넌트의 `README`를 참고하시면 자세한 인터페이스와 사용법을 확인하실 수 있습니다. 아래 링크를 클릭하시면 각 컴포넌트의 README로 이동하실 수 있습니다.\n\n```jsx\nimport { Text, TextInput, Button, Modal, ... } from '@jdesignlab/react';\nimport {Mail, Bell, Book, ...} from '@jdesignlab/react-icons'\n```\n\n## Components\n\n**Box**  \n[\u003cimg src=\"https://img.shields.io/badge/README-1dd1a1?style=flat\u0026logo=README\u0026logoColor=white\"\u003e](https://github.com/DesignSystemLab/design-system/tree/main/packages/box) [\u003cimg src=\"https://img.shields.io/badge/storybook-FF4785?style=flat\u0026logo=storybook\u0026logoColor=white\u0026style\"\u003e](https://designsystemlab.github.io/design-system/?path=/docs/layout-box--basic)\n\n**Button**  \n[\u003cimg src=\"https://img.shields.io/badge/README-1dd1a1?style=flat\u0026logo=README\u0026logoColor=white\"\u003e](https://github.com/DesignSystemLab/design-system/tree/main/packages/button) [\u003cimg src=\"https://img.shields.io/badge/storybook-FF4785?style=flat\u0026logo=storybook\u0026logoColor=white\u0026style\"\u003e](https://designsystemlab.github.io/design-system/?path=/docs/actions-button--basic)\n\n**Card**  \n[\u003cimg src=\"https://img.shields.io/badge/README-1dd1a1?style=flat\u0026logo=README\u0026logoColor=white\"\u003e](https://github.com/DesignSystemLab/design-system/tree/main/packages/card) [\u003cimg src=\"https://img.shields.io/badge/storybook-FF4785?style=flat\u0026logo=storybook\u0026logoColor=white\u0026style\"\u003e](https://designsystemlab.github.io/design-system/?path=/docs/data-display-card--basic)\n\n**Checkbox**  \n[\u003cimg src=\"https://img.shields.io/badge/README-1dd1a1?style=flat\u0026logo=README\u0026logoColor=white\"\u003e](https://github.com/DesignSystemLab/design-system/tree/main/packages/checkbox) [\u003cimg src=\"https://img.shields.io/badge/storybook-FF4785?style=flat\u0026logo=storybook\u0026logoColor=white\u0026style\"\u003e](https://designsystemlab.github.io/design-system/?path=/docs/data-display-card--basic)\n\n**Drawer**  \n[\u003cimg src=\"https://img.shields.io/badge/README-1dd1a1?style=flat\u0026logo=README\u0026logoColor=white\"\u003e](https://github.com/DesignSystemLab/design-system/tree/main/packages/drawer) [\u003cimg src=\"https://img.shields.io/badge/storybook-FF4785?style=flat\u0026logo=storybook\u0026logoColor=white\u0026style\"\u003e](https://designsystemlab.github.io/design-system/?path=/docs/actions-drawer--basic)\n\n**Dropdown**  \n[\u003cimg src=\"https://img.shields.io/badge/README-1dd1a1?style=flat\u0026logo=README\u0026logoColor=white\"\u003e](https://github.com/DesignSystemLab/design-system/tree/main/packages/dropdown) [\u003cimg src=\"https://img.shields.io/badge/storybook-FF4785?style=flat\u0026logo=storybook\u0026logoColor=white\u0026style\"\u003e](https://designsystemlab.github.io/design-system/?path=/docs/layout-dropdown--basic)\n\n**Flex**  \n[\u003cimg src=\"https://img.shields.io/badge/README-1dd1a1?style=flat\u0026logo=README\u0026logoColor=white\"\u003e](https://github.com/DesignSystemLab/design-system/tree/main/packages/flex) [\u003cimg src=\"https://img.shields.io/badge/storybook-FF4785?style=flat\u0026logo=storybook\u0026logoColor=white\u0026style\"\u003e](https://designsystemlab.github.io/design-system/?path=/docs/layout-flex--basic)\n\n**Input**  \n[\u003cimg src=\"https://img.shields.io/badge/README-1dd1a1?style=flat\u0026logo=README\u0026logoColor=white\"\u003e](https://github.com/DesignSystemLab/design-system/tree/main/packages/input) [\u003cimg src=\"https://img.shields.io/badge/storybook-FF4785?style=flat\u0026logo=storybook\u0026logoColor=white\u0026style\"\u003e](https://designsystemlab.github.io/design-system/?path=/docs/forms-textinput--basic)\n\n**Modal**  \n[\u003cimg src=\"https://img.shields.io/badge/README-1dd1a1?style=flat\u0026logo=README\u0026logoColor=white\"\u003e](https://github.com/DesignSystemLab/design-system/tree/main/packages/modal) [\u003cimg src=\"https://img.shields.io/badge/storybook-FF4785?style=flat\u0026logo=storybook\u0026logoColor=white\u0026style\"\u003e](https://designsystemlab.github.io/design-system/?path=/docs/actions-modal--basic)\n\n**Popover**  \n[\u003cimg src=\"https://img.shields.io/badge/README-1dd1a1?style=flat\u0026logo=README\u0026logoColor=white\"\u003e](https://github.com/DesignSystemLab/design-system/tree/main/packages/popover) [\u003cimg src=\"https://img.shields.io/badge/storybook-FF4785?style=flat\u0026logo=storybook\u0026logoColor=white\u0026style\"\u003e](https://designsystemlab.github.io/design-system/?path=/docs/actions-popover--basic)\n\n**Radio**  \n[\u003cimg src=\"https://img.shields.io/badge/README-1dd1a1?style=flat\u0026logo=README\u0026logoColor=white\"\u003e](https://github.com/DesignSystemLab/design-system/tree/main/packages/radio) [\u003cimg src=\"https://img.shields.io/badge/storybook-FF4785?style=flat\u0026logo=storybook\u0026logoColor=white\u0026style\"\u003e](https://designsystemlab.github.io/design-system/?path=/docs/forms-radio--basic)\n\n**Select**  \n[\u003cimg src=\"https://img.shields.io/badge/README-1dd1a1?style=flat\u0026logo=README\u0026logoColor=white\"\u003e](https://github.com/DesignSystemLab/design-system/tree/main/packages/select) [\u003cimg src=\"https://img.shields.io/badge/storybook-FF4785?style=flat\u0026logo=storybook\u0026logoColor=white\u0026style\"\u003e](https://designsystemlab.github.io/design-system/?path=/docs/forms-select--basic)\n\n**Stack**  \n[\u003cimg src=\"https://img.shields.io/badge/README-1dd1a1?style=flat\u0026logo=README\u0026logoColor=white\"\u003e](https://github.com/DesignSystemLab/design-system/tree/main/packages/stack) [\u003cimg src=\"https://img.shields.io/badge/storybook-FF4785?style=flat\u0026logo=storybook\u0026logoColor=white\u0026style\"\u003e](https://designsystemlab.github.io/design-system/?path=/docs/layout-stack--basic)\n\n**Tabs**  \n[\u003cimg src=\"https://img.shields.io/badge/README-1dd1a1?style=flat\u0026logo=README\u0026logoColor=white\"\u003e](https://github.com/DesignSystemLab/design-system/tree/main/packages/tabs) [\u003cimg src=\"https://img.shields.io/badge/storybook-FF4785?style=flat\u0026logo=storybook\u0026logoColor=white\u0026style\"\u003e](https://designsystemlab.github.io/design-system/?path=/docs/navigation-tabs--basic)\n\n**Text**  \n[\u003cimg src=\"https://img.shields.io/badge/README-1dd1a1?style=flat\u0026logo=README\u0026logoColor=white\"\u003e](https://github.com/DesignSystemLab/design-system/tree/main/packages/tabs) [\u003cimg src=\"https://img.shields.io/badge/storybook-FF4785?style=flat\u0026logo=storybook\u0026logoColor=white\u0026style\"\u003e](https://designsystemlab.github.io/design-system/?path=/docs/typography-text--basic)\n\n**Textarea**  \n[\u003cimg src=\"https://img.shields.io/badge/README-1dd1a1?style=flat\u0026logo=README\u0026logoColor=white\"\u003e](https://github.com/DesignSystemLab/design-system/tree/main/packages/textarea) [\u003cimg src=\"https://img.shields.io/badge/storybook-FF4785?style=flat\u0026logo=storybook\u0026logoColor=white\u0026style\"\u003e](https://designsystemlab.github.io/design-system/?path=/docs/forms-textarea--basic)\n\n**Tooltip**  \n[\u003cimg src=\"https://img.shields.io/badge/README-1dd1a1?style=flat\u0026logo=README\u0026logoColor=white\"\u003e](https://github.com/DesignSystemLab/design-system/tree/main/packages/tooltip) [\u003cimg src=\"https://img.shields.io/badge/storybook-FF4785?style=flat\u0026logo=storybook\u0026logoColor=white\u0026style\"\u003e](https://designsystemlab.github.io/design-system/?path=/docs/layout-stack--basic)\n\n## Contributors\n\n|                             [yondo123](https://github.com/yondo123)\u003cbr/\u003e                              |                             [yoycode](https://github.com/yoycode)\u003cbr/\u003e                              |\n| :---------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------: |\n| \u003cimg src=\"https://avatars.githubusercontent.com/u/46988995?v=4\" alt=\"tooooo1\" width=\"64\" height=\"64\"\u003e | \u003cimg src=\"https://avatars.githubusercontent.com/u/65293082?v=4\" alt=\"helen\" width=\"64\" height=\"64\"\u003e |\n\n## Convention\n\n**Commit Convention**\n| rule | description |\n| -------- | -------------------------------------------------------- |\n| ✨ Feat | 새로운 기능을 작성합니다. |\n| 🎨 Style | 코드 스타일 규칙을 수정합니다. |\n| ➖ Remove | 사용되지 않는 파일 또는 코드를 삭제합니다. |\n| 🏗️ Structure | 프로젝트 구조를 변경합니다. |\n| 🔧 Modify | 기능에 영향을 주지 않는 코드를 수정합니다. |\n| 🐛 Fix | 기능의 문제 사항 또는 전반적인 프로젝트 내 이슈를 해결합니다. |\n| ♻️ Refactor | 성능이나 코드의 구조를 개선합니다. |\n| 📝 Doc | 문서를 작성하거나 편집합니다. |\n| 🤡 Chore | 애플리케이션 동작에 영향을 주지 않는 코드들을 수정합니다. (package version, configure) |\n| 🚀 Deploy | 패키지를 배포합니다. |\n| 🧪 Test | 테스트 코드를 작성합니다. |\n| 💄 Ui | 스타일링을 위한 코드를 수정하거나 추가합니다. |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdesignsystemlab%2Fdesign-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdesignsystemlab%2Fdesign-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdesignsystemlab%2Fdesign-system/lists"}