├── .changeset ├── README.md └── config.json ├── .github ├── CODEOWNERS ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── component_design.md │ ├── document_request.md │ └── feature_request.md ├── PULL_REQUEST_TEMPLATE.md ├── auto_assign.yml └── workflows │ ├── chromatic.yaml │ ├── ci.yaml │ ├── coverage.yaml │ ├── release.yaml │ └── storybook-deploy.yaml ├── .gitignore ├── .husky ├── commit-msg ├── pre-commit ├── pre-push └── prepare-commit-msg ├── .nvmrc ├── .storybook ├── main.ts ├── manager.ts └── preview.ts ├── .templates └── component │ ├── .storybook │ ├── main.ts │ └── preview.ts │ ├── global.d.ts │ ├── package.json │ ├── src │ ├── Component.stories.tsx │ ├── Component.tsx │ └── index.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── vitest.config.ts │ └── vitest.setup.ts ├── .vscode ├── extensions.json └── settings.json ├── LICENSE ├── README.md ├── biome.json ├── build.sh ├── chromatic.config.json ├── commitlint.config.ts ├── docs └── introduction.mdx ├── eslint.config.ts ├── package.json ├── packages ├── avatar │ ├── .storybook │ │ ├── main.ts │ │ └── preview.ts │ ├── CHANGELOG.md │ ├── global.d.ts │ ├── package.json │ ├── src │ │ ├── Avatar.module.css │ │ ├── Avatar.stories.tsx │ │ ├── Avatar.test.tsx │ │ ├── Avatar.tsx │ │ └── index.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── vitest.config.ts │ └── vitest.setup.ts ├── badge │ ├── .storybook │ │ ├── main.ts │ │ └── preview.ts │ ├── CHANGELOG.md │ ├── global.d.ts │ ├── package.json │ ├── src │ │ ├── Badge.module.css │ │ ├── Badge.stories.tsx │ │ ├── Badge.test.tsx │ │ ├── Badge.tsx │ │ └── index.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── vitest.config.ts │ └── vitest.setup.ts ├── button │ ├── .storybook │ │ ├── main.ts │ │ └── preview.ts │ ├── CHANGELOG.md │ ├── global.d.ts │ ├── package.json │ ├── src │ │ ├── Button.module.css │ │ ├── Button.stories.tsx │ │ ├── Button.test.tsx │ │ ├── Button.tsx │ │ └── index.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── vitest.config.ts │ └── vitest.setup.ts ├── card │ ├── .storybook │ │ ├── main.ts │ │ └── preview.ts │ ├── CHANGELOG.md │ ├── global.d.ts │ ├── package.json │ ├── src │ │ ├── Card.module.css │ │ ├── Card.stories.tsx │ │ ├── Card.test.tsx │ │ ├── Card.tsx │ │ └── index.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── vitest.config.ts │ └── vitest.setup.ts ├── checkbox │ ├── .storybook │ │ ├── main.ts │ │ └── preview.ts │ ├── CHANGELOG.md │ ├── global.d.ts │ ├── package.json │ ├── src │ │ ├── Checkbox.module.css │ │ ├── Checkbox.stories.tsx │ │ ├── Checkbox.test.tsx │ │ ├── Checkbox.tsx │ │ ├── constants │ │ │ ├── checkStyle.ts │ │ │ └── size.ts │ │ ├── hooks │ │ │ └── useCheckboxGroup.ts │ │ ├── images │ │ │ ├── checkbox-icon.svg │ │ │ └── minus-icon.svg │ │ ├── index.ts │ │ └── types │ │ │ └── svg.d.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── vitest.config.ts │ └── vitest.setup.ts ├── divider │ ├── .storybook │ │ ├── main.ts │ │ └── preview.ts │ ├── CHANGELOG.md │ ├── global.d.ts │ ├── package.json │ ├── src │ │ ├── Divider.module.css │ │ ├── Divider.stories.tsx │ │ ├── Divider.test.tsx │ │ ├── Divider.tsx │ │ └── index.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── vitest.config.ts │ └── vitest.setup.ts ├── flex │ ├── .storybook │ │ ├── main.ts │ │ └── preview.ts │ ├── CHANGELOG.md │ ├── global.d.ts │ ├── package.json │ ├── src │ │ ├── Flex.module.css │ │ ├── Flex.stories.tsx │ │ ├── Flex.test.tsx │ │ ├── Flex.tsx │ │ └── index.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── vitest.config.ts │ └── vitest.setup.ts ├── grid │ ├── .storybook │ │ ├── main.ts │ │ └── preview.ts │ ├── CHANGELOG.md │ ├── global.d.ts │ ├── package.json │ ├── src │ │ ├── Grid.module.css │ │ ├── Grid.stories.tsx │ │ ├── Grid.test.tsx │ │ ├── Grid.tsx │ │ └── index.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── vitest.config.ts │ └── vitest.setup.ts ├── icon │ ├── .storybook │ │ ├── main.ts │ │ └── preview.ts │ ├── CHANGELOG.md │ ├── README.md │ ├── global.d.ts │ ├── icons │ │ ├── accordion-arrow.svg │ │ ├── check-circle.svg │ │ ├── email.svg │ │ ├── github.svg │ │ ├── instagram.svg │ │ ├── kakao.svg │ │ ├── link.svg │ │ ├── linkedin.svg │ │ ├── organizer.svg │ │ ├── user.svg │ │ └── youtube.svg │ ├── package.json │ ├── scripts │ │ ├── generate-icons.ts │ │ └── utils │ │ │ ├── generate-components.ts │ │ │ ├── optimize-svg.ts │ │ │ ├── paths.ts │ │ │ └── svgo.config.ts │ ├── src │ │ ├── Icons.stories.tsx │ │ ├── components │ │ │ ├── AccordionArrowIcon.tsx │ │ │ ├── CheckCircleIcon.tsx │ │ │ ├── EmailIcon.tsx │ │ │ ├── GithubIcon.tsx │ │ │ ├── InstagramIcon.tsx │ │ │ ├── KakaoIcon.tsx │ │ │ ├── LinkIcon.tsx │ │ │ ├── LinkedinIcon.tsx │ │ │ ├── OrganizerIcon.tsx │ │ │ ├── UserIcon.tsx │ │ │ ├── YoutubeIcon.tsx │ │ │ └── link.tsx │ │ ├── icons.test.tsx │ │ ├── index.ts │ │ └── types.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── vitest.config.ts │ └── vitest.setup.ts ├── input │ ├── .storybook │ │ ├── main.ts │ │ └── preview.ts │ ├── CHANGELOG.md │ ├── global.d.ts │ ├── package.json │ ├── src │ │ ├── Input.module.css │ │ ├── Input.stories.tsx │ │ ├── Input.test.tsx │ │ ├── Input.tsx │ │ ├── constants │ │ │ ├── colors.ts │ │ │ ├── spacing.ts │ │ │ └── typhography.ts │ │ └── index.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── vitest.config.ts │ └── vitest.setup.ts ├── plugin-figma-codegen │ ├── manifest.json │ ├── package.json │ ├── src │ │ └── index.ts │ ├── tsconfig.json │ └── tsup.config.ts ├── radio │ ├── .storybook │ │ ├── main.ts │ │ └── preview.ts │ ├── CHANGELOG.md │ ├── global.d.ts │ ├── package.json │ ├── src │ │ ├── Radio.tsx │ │ ├── RadioGroup.module.css │ │ ├── RadioGroup.stories.tsx │ │ ├── RadioGroup.test.tsx │ │ ├── RadioGroup.tsx │ │ └── index.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── vitest.config.ts │ └── vitest.setup.ts ├── reset │ ├── .storybook │ │ ├── main.ts │ │ └── preview.ts │ ├── CHANGELOG.md │ ├── README.md │ ├── global.d.ts │ ├── package.json │ ├── src │ │ ├── Reset.module.css │ │ ├── Reset.stories.tsx │ │ ├── Reset.test.tsx │ │ ├── Reset.tsx │ │ ├── global.css │ │ └── index.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── vitest.config.ts │ └── vitest.setup.ts ├── side │ ├── CHANGELOG.md │ ├── package.json │ ├── src │ │ └── index.ts │ ├── styles.css │ ├── tsconfig.json │ └── tsup.config.ts ├── skeleton │ ├── .storybook │ │ ├── main.ts │ │ └── preview.ts │ ├── CHANGELOG.md │ ├── global.d.ts │ ├── package.json │ ├── src │ │ ├── Skeleton.module.css │ │ ├── Skeleton.stories.tsx │ │ ├── Skeleton.test.tsx │ │ ├── Skeleton.tsx │ │ └── index.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── vitest.config.ts │ └── vitest.setup.ts ├── switch │ ├── .storybook │ │ ├── main.ts │ │ └── preview.ts │ ├── CHANGELOG.md │ ├── global.d.ts │ ├── package.json │ ├── src │ │ ├── Switch.module.css │ │ ├── Switch.stories.tsx │ │ ├── Switch.test.tsx │ │ ├── Switch.tsx │ │ ├── constants │ │ │ └── size.ts │ │ ├── hooks │ │ │ └── useCheckedController.tsx │ │ └── index.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── vitest.config.ts │ └── vitest.setup.ts ├── tokens │ ├── .storybook │ │ ├── main.ts │ │ └── preview.ts │ ├── CHANGELOG.md │ ├── global.d.ts │ ├── package.json │ ├── src │ │ ├── Tokens.stories.tsx │ │ ├── colors.ts │ │ ├── fonts.ts │ │ └── index.ts │ ├── tsconfig.json │ └── tsup.config.ts ├── tooltip │ ├── .storybook │ │ ├── main.ts │ │ └── preview.ts │ ├── CHANGELOG.md │ ├── global.d.ts │ ├── package.json │ ├── src │ │ ├── Tooltip.module.css │ │ ├── Tooltip.stories.tsx │ │ ├── Tooltip.test.tsx │ │ ├── Tooltip.tsx │ │ ├── hooks │ │ │ └── useTooltip │ │ │ │ ├── index.ts │ │ │ │ ├── useTooltip.md │ │ │ │ └── useTooltip.tsx │ │ └── index.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── vitest.config.ts │ └── vitest.setup.ts └── typography │ ├── .storybook │ ├── main.ts │ └── preview.ts │ ├── CHANGELOG.md │ ├── global.d.ts │ ├── package.json │ ├── src │ ├── Typography.module.css │ ├── Typography.stories.tsx │ ├── Typography.test.tsx │ ├── Typography.tsx │ └── index.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── vitest.config.ts │ └── vitest.setup.ts ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── public ├── favicon.ico ├── og-image.png └── sipe_brand_logo.png ├── scripts └── createComponent.ts ├── tsconfig.json ├── tsup.config.ts ├── types └── index.d.ts ├── vitest.config.ts ├── vitest.workspace.ts └── www ├── README.md ├── docs ├── components │ ├── _category_.json │ └── avatar.mdx └── overview │ ├── Installation.mdx │ └── _category_.json ├── docusaurus.config.ts ├── package.json ├── sidebars.ts ├── src ├── HomepageFeatures │ ├── index.module.css │ └── index.tsx ├── custom.css └── pages │ ├── index.module.css │ └── index.tsx ├── static ├── .nojekyll └── img │ ├── docusaurus-social-card.jpg │ ├── docusaurus.png │ ├── favicon.ico │ ├── logo.svg │ ├── undraw_docusaurus_mountain.svg │ ├── undraw_docusaurus_react.svg │ └── undraw_docusaurus_tree.svg └── tsconfig.json /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@3.0.3/schema.json", 3 | "changelog": "@changesets/cli/changelog", 4 | "commit": false, 5 | "fixed": [], 6 | "linked": [], 7 | "access": "restricted", 8 | "baseBranch": "main", 9 | "updateInternalDependencies": "patch", 10 | "ignore": ["@sipe-team/package-name"] 11 | } 12 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @kimdaeyeobbb @hy57in @developerjhp @bae-sh @noahluftyang @froggy1014 @heeji289 @synuns @yeojini @SEMIN-97 @jiji-hoon96 2 | 3 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "Bug Report" 3 | about: "Report a bug" 4 | title: "[BUG] " 5 | labels: "bug" 6 | --- 7 | 8 | ## Bug Description 9 | 12 | 13 | ## Steps to Reproduce 14 | 19 | 20 | ## Actual Result 21 | 24 | 25 | ## Expected Result 26 | 29 | 30 | ## Screenshots and Logs 31 | 34 | 35 | ## Environment Information 36 | 40 | 41 | - **Browser:** 42 | - **Operating System:** 43 | - **Package Versions:** 44 | - **Others:** 45 | 46 | ## Additional Notes 47 | 50 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/component_design.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "Component Design" 3 | about: "Define and design a new component" 4 | labels: "enhancement" 5 | --- 6 | 7 | ## Component Function Definition 8 | 9 | 10 | ## Design Requirements 11 | 12 | 13 | ## Component Specifications 14 | 15 | 16 | ## Technical Considerations 17 | 18 | 19 | ## Reference Materials 20 | 21 | 22 | ## Additional Discussion Points 23 | 24 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/document_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Documentation Request 3 | about: Request new documentation or improvements to existing docs 4 | title: "[DOCS] " 5 | labels: documentation 6 | --- 7 | 8 | ## Documentation Need 9 | 10 | 11 | 12 | ## Proposed Changes 13 | 14 | 15 | 16 | ## Target Audience 17 | 18 | 19 | 20 | ## Additional Context 21 | 22 | 23 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature Request 3 | about: Suggest an idea or enhancement for our package 4 | title: "[FEATURE] " 5 | labels: enhancement 6 | --- 7 | 8 | ## Feature Description 9 | 10 | 11 | 12 | ## Proposed Implementation 13 | 14 | 15 | 16 | ## Describe Alternatives 17 | 18 | 19 | 20 | ## Additional Context 21 | 22 | 23 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Changes 2 | 3 | 4 | ## Visuals 5 | 6 | 7 | ## Checklist 8 | - [ ] Have you written the functional specifications? 9 | - [ ] Have you written the test code? 10 | 11 | ## Additional Discussion Points 12 | 13 | -------------------------------------------------------------------------------- /.github/auto_assign.yml: -------------------------------------------------------------------------------- 1 | # Set to author to set pr creator as assignee 2 | addAssignees: author -------------------------------------------------------------------------------- /.github/workflows/chromatic.yaml: -------------------------------------------------------------------------------- 1 | name: Chromatic 2 | 3 | on: 4 | pull_request: 5 | types: [opened, ready_for_review, synchronize] 6 | branches: 7 | - main 8 | paths: 9 | - '**/*.stories.@(js|jsx|ts|tsx)' 10 | push: 11 | branches: 12 | - main 13 | paths: 14 | - '**/*.stories.@(js|jsx|ts|tsx)' 15 | 16 | jobs: 17 | chromatic: 18 | runs-on: ubuntu-latest 19 | 20 | steps: 21 | - uses: actions/checkout@v4 22 | with: 23 | fetch-depth: 0 24 | - name: Install pnpm 25 | uses: pnpm/action-setup@v4 26 | with: 27 | run_install: false 28 | - name: Setup Node.js environment 29 | uses: actions/setup-node@v4 30 | with: 31 | cache: pnpm 32 | node-version-file: .nvmrc 33 | - name: Install dependencies 34 | run: pnpm install 35 | - name: Run Chromatic 36 | id: chromatic 37 | uses: chromaui/action@latest 38 | with: 39 | projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} 40 | - name: comment PR 41 | uses: thollander/actions-comment-pull-request@v1 42 | if: ${{ github.event_name == 'pull_request' }} 43 | env: 44 | GITHUB_TOKEN: ${{ secrets.RELEASE_BOT_TOKEN }} 45 | with: 46 | message: "💅 The Storybook has been updated! Click [here](${{ steps.chromatic.outputs.storybookUrl }}) to check it out." 47 | -------------------------------------------------------------------------------- /.github/workflows/ci.yaml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | pull_request: 5 | 6 | jobs: 7 | CI: 8 | runs-on: ubuntu-latest 9 | 10 | steps: 11 | - uses: actions/checkout@v4 12 | with: 13 | fetch-depth: 0 14 | ref: ${{ github.event.pull_request.head.sha }} 15 | - name: Install pnpm 16 | uses: pnpm/action-setup@v4 17 | with: 18 | run_install: false 19 | - name: Setup Node.js environment 20 | uses: actions/setup-node@v4 21 | with: 22 | cache: pnpm 23 | node-version-file: .nvmrc 24 | - name: Install dependencies 25 | run: pnpm install 26 | - name: Lint 27 | run: pnpm --filter="...[origin/${{ github.base_ref }}]" "/lint:*/" 28 | - name: Test 29 | run: pnpm --filter="...[origin/${{ github.base_ref }}]" test 30 | - name: Type check 31 | run: pnpm --filter="...[origin/${{ github.base_ref }}]" typecheck 32 | - name: Build 33 | run: pnpm --filter="...[origin/${{ github.base_ref }}]" build 34 | -------------------------------------------------------------------------------- /.github/workflows/coverage.yaml: -------------------------------------------------------------------------------- 1 | name: Run tests and upload coverage 2 | 3 | on: 4 | pull_request: 5 | 6 | jobs: 7 | coverage: 8 | runs-on: ubuntu-latest 9 | 10 | steps: 11 | - uses: actions/checkout@v4 12 | with: 13 | fetch-depth: 0 14 | - name: Install pnpm 15 | uses: pnpm/action-setup@v4 16 | with: 17 | run_install: false 18 | - name: Setup Node.js environment 19 | uses: actions/setup-node@v4 20 | with: 21 | cache: pnpm 22 | node-version-file: .nvmrc 23 | - name: Install dependencies 24 | run: pnpm install 25 | - name: Run tests 26 | run: pnpm run test --coverage 27 | - name: Upload code coverage 28 | uses: codecov/codecov-action@v5 29 | with: 30 | token: ${{ secrets.CODECOV_TOKEN }} 31 | -------------------------------------------------------------------------------- /.github/workflows/release.yaml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | jobs: 9 | release: 10 | runs-on: ubuntu-latest 11 | 12 | steps: 13 | - uses: actions/checkout@v4 14 | - name: Install pnpm 15 | uses: pnpm/action-setup@v4 16 | with: 17 | run_install: false 18 | - name: Setup Node.js environment 19 | uses: actions/setup-node@v4 20 | with: 21 | cache: pnpm 22 | node-version-file: .nvmrc 23 | registry-url: https://npm.pkg.github.com 24 | scope: "@sipe-team" 25 | - name: Install dependencies 26 | run: pnpm install 27 | - name: Create Release Pull Request or Publish to Github Package Registry 28 | id: changesets 29 | uses: changesets/action@v1 30 | with: 31 | version: pnpm changeset version 32 | publish: pnpm changeset publish 33 | commit: "chore(release): version packages" 34 | env: 35 | HUSKY: 0 36 | GITHUB_TOKEN: ${{ secrets.RELEASE_BOT_TOKEN }} 37 | NODE_AUTH_TOKEN: ${{ secrets.RELEASE_BOT_TOKEN }} 38 | -------------------------------------------------------------------------------- /.github/workflows/storybook-deploy.yaml: -------------------------------------------------------------------------------- 1 | name: Deploy Storybook 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | paths: 8 | - 'packages/**/src/**/*.stories.@(js|jsx|ts|tsx)' 9 | workflow_dispatch: 10 | 11 | jobs: 12 | build: 13 | runs-on: ubuntu-latest 14 | container: pandoc/latex 15 | steps: 16 | - uses: actions/checkout@v2 17 | - name: Install mustache (to update the date) 18 | run: apk add ruby && gem install mustache 19 | - name: creates output 20 | run: sh ./build.sh 21 | - name: Copy .storybook folder 22 | run: cp -r .storybook output/ 23 | - name: Pushes to another repository 24 | id: push_directory 25 | uses: cpina/github-action-push-to-another-repository@main 26 | env: 27 | API_TOKEN_GITHUB: ${{ secrets.GH_TOKEN }} 28 | DESTINATION_USERNAME: "froggy1014" 29 | DESTINATION_REPO: "side-storybook" 30 | with: 31 | source-directory: "output" 32 | destination-github-username: ${{ env.DESTINATION_USERNAME }} 33 | destination-repository-name: ${{ env.DESTINATION_REPO }} 34 | user-email: ${{ secrets.EMAIL }} 35 | commit-message: ${{ github.event.commits[0].message || 'Manual deployment via workflow_dispatch' }} 36 | target-branch: main 37 | - name: Test get variable exported by push-to-another-repository 38 | run: echo $DESTINATION_CLONED_DIRECTORY 39 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | pnpm commitlint --edit ${1} 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | pnpm lint-staged 2 | -------------------------------------------------------------------------------- /.husky/pre-push: -------------------------------------------------------------------------------- 1 | # Get the current branch name 2 | BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD) 3 | BRANCH_REGEX='^(feat|fix|hotfix|chore|refactor|release|test|docs|ci|build)\/[a-z0-9-]+$' 4 | 5 | # Check if the branch name matches the defined regex 6 | if ! [[ $BRANCH_NAME =~ $BRANCH_REGEX ]]; then 7 | echo "Error: Invalid branch name format." 8 | echo 9 | echo "Please rename your branch using:" 10 | echo "git branch -m / or git branch -m /-" 11 | echo 12 | echo "CATEGORY: feat, fix, hotfix, chore, refactor, release, test, docs, ci, build" 13 | echo "SUBJECT: Use only lowercase letters(a-z), numbers(0-9), and hyphens(-)" 14 | echo "ISSUENUMBER: Use only numbers(0-9)" 15 | echo 16 | exit 1 17 | fi 18 | 19 | exit 0 -------------------------------------------------------------------------------- /.husky/prepare-commit-msg: -------------------------------------------------------------------------------- 1 | # git commit -m 명령어를 사용할 때는 스킵 2 | if [ -z "${2}" ]; then 3 | exec < /dev/tty && pnpm cz --hook || { 4 | echo "\nCommit has been cancelled." 5 | exit 1 6 | } 7 | fi -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 22 2 | -------------------------------------------------------------------------------- /.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-vite'; 2 | 3 | export default { 4 | stories: ['../docs/*.mdx', '../packages/**/*.mdx', '../packages/**/*.stories.@(js|jsx|mjs|ts|tsx)'], 5 | addons: ['@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/addon-links'], 6 | framework: { 7 | name: '@storybook/react-vite', 8 | options: {}, 9 | }, 10 | managerHead: (head) => 11 | `${head} 12 | `, 13 | } satisfies StorybookConfig; 14 | -------------------------------------------------------------------------------- /.storybook/manager.ts: -------------------------------------------------------------------------------- 1 | import { addons } from '@storybook/manager-api'; 2 | import { create } from '@storybook/theming'; 3 | 4 | addons.setConfig({ 5 | theme: create({ 6 | base: 'dark', 7 | brandTitle: 'Sipe Design System', 8 | brandImage: './sipe_brand_logo.png', 9 | brandUrl: 'https://sipe.team/', 10 | brandTarget: '_self', 11 | textColor: '#999999', 12 | colorSecondary: '#007043', 13 | barSelectedColor: '#007043', 14 | barHoverColor: '#00CC7A', 15 | }), 16 | }); 17 | -------------------------------------------------------------------------------- /.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import 'sanitize.css'; 2 | import 'sanitize.css/typography.css'; 3 | import type { Preview } from '@storybook/react'; 4 | 5 | export default { 6 | tags: ['autodocs'], 7 | } satisfies Preview; 8 | -------------------------------------------------------------------------------- /.templates/component/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-vite'; 2 | 3 | export default { 4 | stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], 5 | addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'], 6 | framework: { 7 | name: '@storybook/react-vite', 8 | options: {}, 9 | }, 10 | } satisfies StorybookConfig; 11 | -------------------------------------------------------------------------------- /.templates/component/.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/react'; 2 | 3 | export default { 4 | tags: ['autodocs'], 5 | } satisfies Preview; 6 | -------------------------------------------------------------------------------- /.templates/component/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.module.css'; 2 | -------------------------------------------------------------------------------- /.templates/component/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sipe-team/package-name", 3 | "description": "Component for Sipe Design System", 4 | "version": "0.0.0", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/sipe-team/side" 9 | }, 10 | "type": "module", 11 | "exports": "./src/index.ts", 12 | "files": ["dist"], 13 | "scripts": { 14 | "build": "tsup", 15 | "build:storybook": "storybook build", 16 | "dev:storybook": "storybook dev -p 6006", 17 | "lint:biome": "pnpm exec biome lint", 18 | "lint:eslint": "pnpm exec eslint", 19 | "test": "vitest", 20 | "typecheck": "tsc", 21 | "prepack": "pnpm run build" 22 | }, 23 | "devDependencies": { 24 | "@storybook/addon-essentials": "catalog:", 25 | "@storybook/addon-interactions": "catalog:", 26 | "@storybook/addon-links": "catalog:", 27 | "@storybook/blocks": "catalog:", 28 | "@storybook/react": "catalog:", 29 | "@storybook/react-vite": "catalog:", 30 | "@storybook/test": "catalog:", 31 | "@testing-library/jest-dom": "catalog:", 32 | "@testing-library/react": "catalog:", 33 | "@types/react": "^18.3.12", 34 | "happy-dom": "catalog:", 35 | "react": "^18.3.1", 36 | "react-dom": "^18.3.1", 37 | "storybook": "catalog:", 38 | "tsup": "catalog:", 39 | "typescript": "catalog:", 40 | "vitest": "catalog:" 41 | }, 42 | "peerDependencies": { 43 | "react": ">= 18", 44 | "react-dom": ">= 18" 45 | }, 46 | "publishConfig": { 47 | "access": "public", 48 | "registry": "https://npm.pkg.github.com", 49 | "exports": { 50 | ".": { 51 | "import": { 52 | "types": "./dist/index.d.ts", 53 | "default": "./dist/index.js" 54 | }, 55 | "require": { 56 | "types": "./dist/index.d.cts", 57 | "default": "./dist/index.cjs" 58 | } 59 | }, 60 | "./styles.css": "./dist/index.css" 61 | } 62 | }, 63 | "sideEffects": false, 64 | "private": true 65 | } 66 | -------------------------------------------------------------------------------- /.templates/component/src/Component.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from '@storybook/react'; 2 | import { Component } from './Component'; 3 | 4 | const meta = { 5 | component: Component, 6 | title: 'Components/Component', 7 | parameters: { 8 | layout: 'centered', 9 | }, 10 | } satisfies Meta; 11 | export default meta; 12 | 13 | type Story = StoryObj; 14 | 15 | export const Basic: Story = {}; 16 | -------------------------------------------------------------------------------- /.templates/component/src/Component.tsx: -------------------------------------------------------------------------------- 1 | export function Component() { 2 | return
Component
; 3 | } 4 | -------------------------------------------------------------------------------- /.templates/component/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Component'; 2 | -------------------------------------------------------------------------------- /.templates/component/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /.templates/component/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup'; 2 | 3 | export default defineConfig({ 4 | entry: ['src/index.ts'], 5 | clean: true, 6 | dts: true, 7 | format: ['esm', 'cjs'], 8 | }); 9 | -------------------------------------------------------------------------------- /.templates/component/vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineProject, mergeConfig } from 'vitest/config'; 2 | import defaultConfig from '../../vitest.config'; 3 | 4 | export default mergeConfig( 5 | defaultConfig, 6 | defineProject({ 7 | test: { 8 | setupFiles: './vitest.setup.ts', 9 | }, 10 | }), 11 | ); 12 | -------------------------------------------------------------------------------- /.templates/component/vitest.setup.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "biomejs.biome", 4 | "dbaeumer.vscode-eslint", 5 | "github.vscode-github-actions" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.defaultFormatter": "biomejs.biome", 3 | "editor.codeActionsOnSave": { 4 | "quickfix.biome": "explicit", 5 | "source.organizeImports.biome": "explicit" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 SIPE 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /biome.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json", 3 | "formatter": { 4 | "enabled": true, 5 | "indentStyle": "space", 6 | "lineWidth": 120 7 | }, 8 | "organizeImports": { 9 | "enabled": true 10 | }, 11 | "linter": { 12 | "enabled": true, 13 | "rules": { 14 | "correctness": { 15 | "noUnusedImports": "error" 16 | }, 17 | "recommended": true, 18 | "a11y": { 19 | "useSemanticElements": "warn", 20 | "noSvgWithoutTitle": "off" 21 | }, 22 | "suspicious": { 23 | "noExplicitAny": "warn" 24 | } 25 | } 26 | }, 27 | "javascript": { 28 | "formatter": { 29 | "quoteStyle": "single" 30 | } 31 | }, 32 | "files": { 33 | "ignore": ["dist/*.*"] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /build.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | cd ../ 3 | mkdir output 4 | 5 | cp -r .storybook output/ 6 | cp -r .gitignore output/ 7 | cp -R ./side/* ./output 8 | cp -R ./output ./side/ -------------------------------------------------------------------------------- /chromatic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://www.chromatic.com/config-file.schema.json", 3 | "buildScriptName": "build:storybook" 4 | } 5 | -------------------------------------------------------------------------------- /commitlint.config.ts: -------------------------------------------------------------------------------- 1 | const englishOnly = /^[A-Za-z0-9\s!@#$%^&*(),.?":{}|<>_-]+$/; 2 | 3 | // https://commitlint.js.org/reference/configuration.html#typescript-configuration 4 | import { RuleConfigSeverity, type UserConfig } from '@commitlint/types'; 5 | const Configuration: UserConfig = { 6 | extends: ['@commitlint/config-conventional'], 7 | // parserPreset: '', 8 | // formatter: '', 9 | // https://commitlint.js.org/reference/plugins.html#working-with-plugins 10 | plugins: [ 11 | { 12 | rules: { 13 | 'subject-english-only': ({ subject }) => { 14 | if (!subject) return [true, '']; 15 | const valid = englishOnly.test(subject); 16 | return [valid, 'Commit subject must contain only English characters']; 17 | }, 18 | }, 19 | }, 20 | ], 21 | rules: { 22 | // https://commitlint.js.org/reference/rules.html 23 | 'type-empty': [RuleConfigSeverity.Error, 'never'], 24 | 'subject-empty': [RuleConfigSeverity.Error, 'never'], 25 | 'subject-max-length': [RuleConfigSeverity.Error, 'always', 50], 26 | 'scope-max-length': [RuleConfigSeverity.Error, 'always', 20], 27 | 28 | // custom rules 29 | 'subject-english-only': [RuleConfigSeverity.Error, 'always'], 30 | }, 31 | 32 | prompt: { 33 | settings: {}, 34 | messages: {}, 35 | questions: {}, 36 | }, 37 | }; 38 | 39 | export default Configuration; 40 | -------------------------------------------------------------------------------- /packages/avatar/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-vite'; 2 | 3 | export default { 4 | stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], 5 | addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'], 6 | framework: { 7 | name: '@storybook/react-vite', 8 | options: {}, 9 | }, 10 | } satisfies StorybookConfig; 11 | -------------------------------------------------------------------------------- /packages/avatar/.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/react'; 2 | 3 | export default { 4 | tags: ['autodocs'], 5 | } satisfies Preview; 6 | -------------------------------------------------------------------------------- /packages/avatar/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @sipe-team/avatar 2 | 3 | ## 0.0.1 4 | 5 | ### Patch Changes 6 | 7 | - 235be5d: fix: add react-dom into peerDependencies 8 | - Updated dependencies [235be5d] 9 | - @sipe-team/typography@0.0.5 10 | - @sipe-team/tokens@0.1.0 11 | -------------------------------------------------------------------------------- /packages/avatar/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.module.css'; 2 | -------------------------------------------------------------------------------- /packages/avatar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sipe-team/avatar", 3 | "description": "Avatar component for Sipe Design System", 4 | "version": "0.0.1", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/sipe-team/side" 9 | }, 10 | "type": "module", 11 | "exports": "./src/index.ts", 12 | "files": [ 13 | "dist" 14 | ], 15 | "scripts": { 16 | "build": "tsup", 17 | "build:storybook": "storybook build", 18 | "dev:storybook": "storybook dev -p 6006", 19 | "lint": "biome lint .", 20 | "test": "vitest", 21 | "typecheck": "tsc", 22 | "prepack": "pnpm run build" 23 | }, 24 | "dependencies": { 25 | "@radix-ui/react-slot": "^1.1.0", 26 | "@sipe-team/typography": "workspace:^", 27 | "@sipe-team/tokens": "workspace:*", 28 | "clsx": "^2.1.1" 29 | }, 30 | "devDependencies": { 31 | "@faker-js/faker": "^9.2.0", 32 | "@storybook/addon-essentials": "catalog:", 33 | "@storybook/addon-interactions": "catalog:", 34 | "@storybook/addon-links": "catalog:", 35 | "@storybook/blocks": "catalog:", 36 | "@storybook/react": "catalog:", 37 | "@storybook/react-vite": "catalog:", 38 | "@storybook/test": "catalog:", 39 | "@types/react": "^18.3.12", 40 | "@testing-library/jest-dom": "^6.6.3", 41 | "@testing-library/react": "^16.0.1", 42 | "happy-dom": "catalog:", 43 | "react": "^18.3.1", 44 | "react-dom": "^18.3.1", 45 | "storybook": "catalog:", 46 | "tsup": "catalog:", 47 | "typescript": "catalog:", 48 | "vitest": "catalog:" 49 | }, 50 | "peerDependencies": { 51 | "react": ">= 18", 52 | "react-dom": ">= 18" 53 | }, 54 | "publishConfig": { 55 | "access": "public", 56 | "registry": "https://npm.pkg.github.com", 57 | "exports": { 58 | ".": { 59 | "import": { 60 | "types": "./dist/index.d.ts", 61 | "default": "./dist/index.js" 62 | }, 63 | "require": { 64 | "types": "./dist/index.d.cts", 65 | "default": "./dist/index.cjs" 66 | } 67 | } 68 | } 69 | }, 70 | "sideEffects": false 71 | } 72 | -------------------------------------------------------------------------------- /packages/avatar/src/Avatar.module.css: -------------------------------------------------------------------------------- 1 | .avatar { 2 | width: var(--avatar-size); 3 | height: var(--avatar-size); 4 | border-radius: var(--avatar-shape); 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | overflow: hidden; 9 | background-color: #e2e8f0; 10 | } 11 | 12 | .image { 13 | width: 100%; 14 | height: 100%; 15 | object-fit: cover; 16 | } 17 | 18 | .fallback { 19 | font-size: 0.8rem; 20 | color: #2d3748; 21 | text-align: center; 22 | } 23 | -------------------------------------------------------------------------------- /packages/avatar/src/Avatar.stories.tsx: -------------------------------------------------------------------------------- 1 | import { faker } from '@faker-js/faker'; 2 | import type { Meta, StoryObj } from '@storybook/react'; 3 | import { Avatar } from './Avatar'; 4 | 5 | const meta = { 6 | title: 'Components/Avatar', 7 | component: Avatar, 8 | parameters: { 9 | layout: 'centered', 10 | }, 11 | } satisfies Meta; 12 | export default meta; 13 | 14 | type Story = StoryObj; 15 | 16 | const testImage = faker.image.avatar(); 17 | 18 | export const Basic: Story = { 19 | args: { 20 | src: 'https://randomuser.me/api/portraits/men/1.jpg', 21 | alt: '대체 텍스트', 22 | }, 23 | }; 24 | 25 | export const Sizes: Story = { 26 | render: () => ( 27 |
28 | 29 | 30 | 31 | 32 | 33 |
34 | ), 35 | }; 36 | 37 | export const Shapes: Story = { 38 | render: () => ( 39 |
40 | 41 | 42 | 43 |
44 | ), 45 | }; 46 | -------------------------------------------------------------------------------- /packages/avatar/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Avatar.tsx'; 2 | -------------------------------------------------------------------------------- /packages/avatar/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/avatar/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup'; 2 | 3 | export default defineConfig({ 4 | entry: ['src/index.ts'], 5 | clean: true, 6 | dts: true, 7 | format: ['esm', 'cjs'], 8 | }); 9 | -------------------------------------------------------------------------------- /packages/avatar/vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vitest/config'; 2 | 3 | export default defineConfig({ 4 | // 테스트와 관련한 설정 5 | test: { 6 | // 테스트를 실행할 환경 7 | // default: 'node' 8 | // 브라우저 환경에서 테스트를 희망시 - 'jsdom' 또는 'happy-dom'으로 설정 9 | environment: 'happy-dom', 10 | 11 | // 글로벌 API를 사용할지 여부를 선택 12 | // ex) describe, it, expect 등 13 | globals: true, 14 | 15 | // 테스트 실행 환경에 필요한 스크립트를 불러올 수 있음 16 | // ex) 모듈 mokcing, matcher extend 등 17 | setupFiles: './vitest.setup.ts', 18 | passWithNoTests: true, 19 | watch: false, 20 | css: true, 21 | }, 22 | 23 | // 환경별로 설정해주어야하는 추가 기능을 플러그인으로 주입 가능 24 | // ex) vite-tsconfig-paths 25 | plugins: [], 26 | }); 27 | -------------------------------------------------------------------------------- /packages/avatar/vitest.setup.ts: -------------------------------------------------------------------------------- 1 | // vitest에서 기본적으로 제공하는 matcher 외에도 DOM 환경에서 유용하게 사용가능한 다양한 matcher를 제공 2 | // ex) expect(foo).toBeInTheDocument(); 3 | // 얘가 없으면 Avatar.test.tsx에서 error가 발생함 4 | import '@testing-library/jest-dom'; 5 | -------------------------------------------------------------------------------- /packages/badge/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-vite'; 2 | 3 | export default { 4 | stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], 5 | addons: [ 6 | '@storybook/addon-essentials', 7 | '@storybook/addon-interactions', 8 | '@storybook/addon-links', 9 | ], 10 | framework: { 11 | name: '@storybook/react-vite', 12 | options: {}, 13 | }, 14 | } satisfies StorybookConfig; 15 | -------------------------------------------------------------------------------- /packages/badge/.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import 'sanitize.css'; 2 | import 'sanitize.css/typography.css'; 3 | import type { Preview } from '@storybook/react'; 4 | 5 | export default { 6 | tags: ['autodocs'], 7 | } satisfies Preview; 8 | -------------------------------------------------------------------------------- /packages/badge/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @sipe-team/badge 2 | 3 | ## 0.0.4 4 | 5 | ### Patch Changes 6 | 7 | - 235be5d: fix: add react-dom into peerDependencies 8 | - Updated dependencies [235be5d] 9 | - @sipe-team/typography@0.0.5 10 | 11 | ## 0.0.3 12 | 13 | ### Patch Changes 14 | 15 | - f425309: fix: styles.css 16 | - Updated dependencies [f425309] 17 | - Updated dependencies [f425309] 18 | - @sipe-team/typography@0.0.4 19 | 20 | ## 0.0.3-next.1 21 | 22 | ### Patch Changes 23 | 24 | - Updated dependencies 25 | - @sipe-team/typography@0.0.4-next.1 26 | 27 | ## 0.0.3-next.0 28 | 29 | ### Patch Changes 30 | 31 | - 27c312a: fix: styles.css 32 | - Updated dependencies [27c312a] 33 | - @sipe-team/typography@0.0.4-next.0 34 | 35 | ## 0.0.2 36 | 37 | ### Patch Changes 38 | 39 | - e6f76c0: fix: css module bundle 40 | - Updated dependencies [e6f76c0] 41 | - @sipe-team/typography@0.0.3 42 | 43 | ## 0.0.2-next.0 44 | 45 | ### Patch Changes 46 | 47 | - Updated dependencies [1885991] 48 | - @sipe-team/typography@0.0.3-next.0 49 | 50 | ## 0.0.1 51 | 52 | ### Patch Changes 53 | 54 | - 66b81c7: chore: bump version 55 | - Updated dependencies [9c93399] 56 | - @sipe-team/typography@0.0.2 57 | -------------------------------------------------------------------------------- /packages/badge/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.module.css'; 2 | -------------------------------------------------------------------------------- /packages/badge/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sipe-team/badge", 3 | "description": "Badge component for Sipe Design System", 4 | "version": "0.0.4", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/sipe-team/side" 9 | }, 10 | "type": "module", 11 | "exports": "./src/index.ts", 12 | "files": [ 13 | "dist" 14 | ], 15 | "scripts": { 16 | "build": "tsup", 17 | "build:storybook": "storybook build", 18 | "dev:storybook": "storybook dev -p 6006", 19 | "lint:biome": "pnpm exec biome lint", 20 | "lint:eslint": "pnpm exec eslint", 21 | "test": "vitest", 22 | "typecheck": "tsc", 23 | "prepack": "pnpm run build" 24 | }, 25 | "dependencies": { 26 | "@sipe-team/typography": "workspace:*", 27 | "clsx": "^2.1.1" 28 | }, 29 | "devDependencies": { 30 | "@storybook/addon-essentials": "catalog:", 31 | "@storybook/addon-interactions": "catalog:", 32 | "@storybook/addon-links": "catalog:", 33 | "@storybook/blocks": "catalog:", 34 | "@storybook/react": "catalog:", 35 | "@storybook/react-vite": "catalog:", 36 | "@storybook/test": "catalog:", 37 | "@testing-library/jest-dom": "^6.6.3", 38 | "@testing-library/react": "^16.0.1", 39 | "@types/react": "^18.3.12", 40 | "happy-dom": "catalog:", 41 | "react": "^18.3.1", 42 | "react-dom": "^18.3.1", 43 | "sanitize.css": "^13.0.0", 44 | "storybook": "catalog:", 45 | "tsup": "catalog:", 46 | "typescript": "catalog:", 47 | "vitest": "catalog:" 48 | }, 49 | "peerDependencies": { 50 | "react": ">= 18", 51 | "react-dom": ">= 18" 52 | }, 53 | "publishConfig": { 54 | "access": "public", 55 | "registry": "https://npm.pkg.github.com", 56 | "exports": { 57 | ".": { 58 | "import": { 59 | "types": "./dist/index.d.ts", 60 | "default": "./dist/index.js" 61 | }, 62 | "require": { 63 | "types": "./dist/index.d.cts", 64 | "default": "./dist/index.cjs" 65 | } 66 | }, 67 | "./styles.css": "./dist/index.css" 68 | } 69 | }, 70 | "sideEffects": false 71 | } 72 | -------------------------------------------------------------------------------- /packages/badge/src/Badge.module.css: -------------------------------------------------------------------------------- 1 | .root { 2 | background-color: var(--background-color); 3 | border: var(--border); 4 | border-radius: 8px; 5 | padding: var(--padding); 6 | } 7 | -------------------------------------------------------------------------------- /packages/badge/src/Badge.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from '@storybook/react'; 2 | import { Badge } from './Badge'; 3 | 4 | const meta = { 5 | title: 'Components/Badge', 6 | component: Badge, 7 | parameters: { 8 | layout: 'centered', 9 | }, 10 | } satisfies Meta; 11 | export default meta; 12 | 13 | type Story = StoryObj; 14 | 15 | export const Basic: Story = { 16 | args: { 17 | children: '사이프', 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /packages/badge/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Badge'; 2 | -------------------------------------------------------------------------------- /packages/badge/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/badge/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import defaultConfig from '../../tsup.config'; 2 | 3 | export default defaultConfig; 4 | -------------------------------------------------------------------------------- /packages/badge/vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineProject, mergeConfig } from 'vitest/config'; 2 | import defaultConfig from '../../vitest.config'; 3 | 4 | export default mergeConfig( 5 | defaultConfig, 6 | defineProject({ 7 | test: { 8 | setupFiles: './vitest.setup.ts', 9 | }, 10 | }), 11 | ); 12 | -------------------------------------------------------------------------------- /packages/badge/vitest.setup.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /packages/button/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-vite'; 2 | 3 | export default { 4 | stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], 5 | addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'], 6 | framework: { 7 | name: '@storybook/react-vite', 8 | options: {}, 9 | }, 10 | } satisfies StorybookConfig; 11 | -------------------------------------------------------------------------------- /packages/button/.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/react'; 2 | 3 | export default { 4 | tags: ['autodocs'], 5 | } satisfies Preview; 6 | -------------------------------------------------------------------------------- /packages/button/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @sipe-team/button 2 | 3 | ## 0.0.2 4 | 5 | ### Patch Changes 6 | 7 | - 235be5d: fix: add react-dom into peerDependencies 8 | - Updated dependencies [235be5d] 9 | - @sipe-team/typography@0.0.5 10 | 11 | ## 0.0.1 12 | 13 | ### Patch Changes 14 | 15 | - 4c48243: fix(button): handle dynamic styles within typescript 16 | - Updated dependencies [f425309] 17 | - Updated dependencies [f425309] 18 | - @sipe-team/typography@0.0.4 19 | -------------------------------------------------------------------------------- /packages/button/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.module.css'; 2 | -------------------------------------------------------------------------------- /packages/button/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sipe-team/button", 3 | "description": "button for Sipe Design System", 4 | "version": "0.0.2", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/sipe-team/side" 9 | }, 10 | "type": "module", 11 | "exports": "./src/index.ts", 12 | "files": [ 13 | "dist" 14 | ], 15 | "scripts": { 16 | "build": "tsup", 17 | "build:storybook": "storybook build", 18 | "dev:storybook": "storybook dev -p 6006", 19 | "lint:biome": "pnpm exec biome lint", 20 | "lint:eslint": "pnpm exec eslint", 21 | "test": "vitest", 22 | "typecheck": "tsc", 23 | "prepack": "pnpm run build" 24 | }, 25 | "dependencies": { 26 | "@radix-ui/react-slot": "^1.1.0", 27 | "@sipe-team/typography": "workspace:*", 28 | "clsx": "^2.1.1", 29 | "ts-pattern": "^5.6.0" 30 | }, 31 | "devDependencies": { 32 | "@storybook/addon-essentials": "catalog:", 33 | "@storybook/addon-interactions": "catalog:", 34 | "@storybook/addon-links": "catalog:", 35 | "@storybook/blocks": "catalog:", 36 | "@storybook/react": "catalog:", 37 | "@storybook/react-vite": "catalog:", 38 | "@storybook/test": "catalog:", 39 | "@testing-library/jest-dom": "^6.6.3", 40 | "@testing-library/react": "^16.0.1", 41 | "@types/react": "^18.3.12", 42 | "happy-dom": "catalog:", 43 | "react": "^18.3.1", 44 | "react-dom": "^18.3.1", 45 | "sanitize.css": "^13.0.0", 46 | "storybook": "catalog:", 47 | "tsup": "catalog:", 48 | "typescript": "catalog:", 49 | "vitest": "catalog:" 50 | }, 51 | "peerDependencies": { 52 | "react": ">= 18", 53 | "react-dom": ">= 18" 54 | }, 55 | "publishConfig": { 56 | "access": "public", 57 | "registry": "https://npm.pkg.github.com", 58 | "exports": { 59 | ".": { 60 | "import": { 61 | "types": "./dist/index.d.ts", 62 | "default": "./dist/index.js" 63 | }, 64 | "require": { 65 | "types": "./dist/index.d.cts", 66 | "default": "./dist/index.cjs" 67 | } 68 | }, 69 | "./styles.css": "./dist/index.css" 70 | } 71 | }, 72 | "sideEffects": false 73 | } 74 | -------------------------------------------------------------------------------- /packages/button/src/Button.module.css: -------------------------------------------------------------------------------- 1 | .button { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | padding: 0 16px; 6 | border-radius: 8px; 7 | height: 40px; 8 | font-size: 22px; 9 | line-height: 30.8px; 10 | font-weight: bold; 11 | cursor: pointer; 12 | transition: all 0.2s ease-in-out; 13 | background-color: var(--background-color); 14 | border: var(--border); 15 | color: var(--color); 16 | } 17 | 18 | .button:hover { 19 | background-color: var(--hover-background-color); 20 | color: var(--hover-color); 21 | opacity: var(--hover-opacity); 22 | } 23 | 24 | /* States */ 25 | .disabled { 26 | opacity: 0.4; 27 | cursor: not-allowed; 28 | pointer-events: none; 29 | } 30 | -------------------------------------------------------------------------------- /packages/button/src/Button.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from '@storybook/react'; 2 | import { Button } from './Button'; 3 | 4 | const meta = { 5 | title: 'Components/Button', 6 | component: Button, 7 | parameters: { 8 | layout: 'centered', 9 | }, 10 | argTypes: { 11 | color: { 12 | description: '버튼의 색상을 지정합니다', 13 | options: ['primary', 'black', 'white'], 14 | control: { type: 'radio' }, 15 | }, 16 | variant: { 17 | description: '버튼의 스타일을 지정합니다', 18 | options: ['filled', 'outline', 'weak'], 19 | control: { type: 'radio' }, 20 | }, 21 | disabled: { 22 | description: '버튼의 비활성화 상태를 지정합니다', 23 | control: { type: 'boolean' }, 24 | }, 25 | }, 26 | } satisfies Meta; 27 | export default meta; 28 | 29 | type Story = StoryObj; 30 | 31 | export const Basic: Story = { 32 | args: { 33 | children: 'Button', 34 | color: 'primary', 35 | variant: 'filled', 36 | }, 37 | }; 38 | 39 | export const Colors: Story = { 40 | args: { 41 | children: 'Button', 42 | }, 43 | render: (args) => ( 44 |
45 | 48 | 51 | 54 |
55 | ), 56 | }; 57 | 58 | export const Variants: Story = { 59 | args: { 60 | children: 'Button', 61 | color: 'primary', 62 | }, 63 | render: (args) => ( 64 |
65 | 68 | 71 | 74 |
75 | ), 76 | }; 77 | 78 | export const States: Story = { 79 | args: { 80 | children: 'Button', 81 | color: 'primary', 82 | }, 83 | render: (args) => ( 84 |
85 | 86 | 89 |
90 | ), 91 | }; 92 | -------------------------------------------------------------------------------- /packages/button/src/Button.test.tsx: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import { expect, test } from 'vitest'; 3 | import { Button } from './Button'; 4 | 5 | test('children으로 입력한 텍스트를 표시한다.', () => { 6 | render(); 7 | 8 | expect(screen.getByText('테스트')).toBeInTheDocument(); 9 | }); 10 | 11 | test('모서리가 8px radius 형태이다.', () => { 12 | render(); 13 | 14 | expect(screen.getByRole('button')).toHaveStyle({ borderRadius: '8px' }); 15 | }); 16 | 17 | test('variant를 주입하지 않으면 filled(배경색 #00ffff)를 기본 형태로 설정한다.', () => { 18 | render(); 19 | 20 | expect(screen.getByRole('button')).toHaveStyle({ 21 | backgroundColor: '#00ffff', 22 | }); 23 | }); 24 | 25 | test('color가 primary인 경우 배경색 #00ffff 형태를 적용한다.', () => { 26 | render(); 27 | 28 | expect(screen.getByRole('button')).toHaveStyle({ 29 | backgroundColor: '#00ffff', 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /packages/button/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Button'; 2 | -------------------------------------------------------------------------------- /packages/button/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/button/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import defaultConfig from '../../tsup.config'; 2 | 3 | export default defaultConfig; 4 | -------------------------------------------------------------------------------- /packages/button/vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineProject, mergeConfig } from 'vitest/config'; 2 | import defaultConfig from '../../vitest.config'; 3 | 4 | export default mergeConfig( 5 | defaultConfig, 6 | defineProject({ 7 | test: { 8 | setupFiles: './vitest.setup.ts', 9 | }, 10 | }), 11 | ); 12 | -------------------------------------------------------------------------------- /packages/button/vitest.setup.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /packages/card/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-vite'; 2 | 3 | export default { 4 | stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], 5 | addons: [ 6 | '@storybook/addon-essentials', 7 | '@storybook/addon-interactions', 8 | '@storybook/addon-links', 9 | ], 10 | framework: { 11 | name: '@storybook/react-vite', 12 | options: {}, 13 | }, 14 | } satisfies StorybookConfig; 15 | -------------------------------------------------------------------------------- /packages/card/.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import 'sanitize.css'; 2 | import 'sanitize.css/typography.css'; 3 | import type { Preview } from '@storybook/react'; 4 | 5 | export default { 6 | tags: ['autodocs'], 7 | } satisfies Preview; 8 | -------------------------------------------------------------------------------- /packages/card/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @sipe-team/card 2 | 3 | ## 0.1.1 4 | 5 | ### Patch Changes 6 | 7 | - 235be5d: fix: add react-dom into peerDependencies 8 | - @sipe-team/tokens@0.1.0 9 | 10 | ## 0.1.0 11 | 12 | ### Minor Changes 13 | 14 | - 9903559: add custom ratio in card component 15 | 16 | ## 0.0.2 17 | 18 | ### Patch Changes 19 | 20 | - f425309: fix: exports 21 | - f425309: fix: styles.css 22 | - @sipe-team/tokens@0.1.0 23 | 24 | ## 0.0.2-next.1 25 | 26 | ### Patch Changes 27 | 28 | - fix: exports 29 | - @sipe-team/tokens@0.1.0 30 | 31 | ## 0.0.2-next.0 32 | 33 | ### Patch Changes 34 | 35 | - 27c312a: fix: styles.css 36 | - @sipe-team/tokens@0.1.0 37 | 38 | ## 0.0.1 39 | 40 | ### Patch Changes 41 | 42 | - e6f76c0: fix: css module bundle 43 | - @sipe-team/tokens@0.1.0 44 | -------------------------------------------------------------------------------- /packages/card/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.module.css'; 2 | -------------------------------------------------------------------------------- /packages/card/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sipe-team/card", 3 | "description": "Card component for Sipe Design System", 4 | "version": "0.1.1", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/sipe-team/side" 9 | }, 10 | "type": "module", 11 | "exports": "./src/index.ts", 12 | "files": [ 13 | "dist" 14 | ], 15 | "scripts": { 16 | "build": "tsup", 17 | "build:storybook": "storybook build", 18 | "dev:storybook": "storybook dev -p 6006", 19 | "lint:biome": "pnpm exec biome lint", 20 | "lint:eslint": "pnpm exec eslint", 21 | "test": "vitest", 22 | "typecheck": "tsc", 23 | "prepack": "pnpm run build" 24 | }, 25 | "dependencies": { 26 | "@radix-ui/react-slot": "^1.1.0", 27 | "@sipe-team/tokens": "workspace:*", 28 | "clsx": "^2.1.1" 29 | }, 30 | "devDependencies": { 31 | "@storybook/addon-essentials": "catalog:", 32 | "@storybook/addon-interactions": "catalog:", 33 | "@storybook/addon-links": "catalog:", 34 | "@storybook/blocks": "catalog:", 35 | "@storybook/react": "catalog:", 36 | "@storybook/react-vite": "catalog:", 37 | "@storybook/test": "catalog:", 38 | "@testing-library/jest-dom": "^6.6.3", 39 | "@testing-library/react": "^16.0.1", 40 | "@types/react": "^18.3.12", 41 | "happy-dom": "catalog:", 42 | "react": "^18.3.1", 43 | "react-dom": "^18.3.1", 44 | "sanitize.css": "^13.0.0", 45 | "storybook": "catalog:", 46 | "tsup": "catalog:", 47 | "typescript": "catalog:", 48 | "vitest": "catalog:" 49 | }, 50 | "peerDependencies": { 51 | "react": ">= 18", 52 | "react-dom": ">= 18" 53 | }, 54 | "publishConfig": { 55 | "access": "public", 56 | "registry": "https://npm.pkg.github.com", 57 | "exports": { 58 | ".": { 59 | "import": { 60 | "types": "./dist/index.d.ts", 61 | "default": "./dist/index.js" 62 | }, 63 | "require": { 64 | "types": "./dist/index.d.cts", 65 | "default": "./dist/index.cjs" 66 | } 67 | }, 68 | "./styles.css": "./dist/index.css" 69 | } 70 | }, 71 | "sideEffects": false 72 | } 73 | -------------------------------------------------------------------------------- /packages/card/src/Card.module.css: -------------------------------------------------------------------------------- 1 | .card { 2 | background-color: var(--background-color); 3 | border: var(--border); 4 | border-radius: 12px; 5 | padding: var(--padding); 6 | aspect-ratio: var(--aspect-ratio); 7 | } 8 | -------------------------------------------------------------------------------- /packages/card/src/Card.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from '@storybook/react'; 2 | import { Card } from './Card'; 3 | 4 | const meta = { 5 | title: 'Components/Card', 6 | component: Card, 7 | parameters: { 8 | layout: 'centered', 9 | }, 10 | argTypes: { 11 | ratio: { 12 | control: 'select', 13 | options: ['rectangle', 'square', 'wide', 'portrait', 'auto'], 14 | }, 15 | variant: { 16 | control: 'select', 17 | options: ['filled', 'outline'], 18 | }, 19 | }, 20 | } satisfies Meta; 21 | export default meta; 22 | 23 | type Story = StoryObj; 24 | 25 | export const Default: Story = { 26 | args: { 27 | children: Card, 28 | variant: 'filled', 29 | }, 30 | }; 31 | -------------------------------------------------------------------------------- /packages/card/src/Card.tsx: -------------------------------------------------------------------------------- 1 | import { Slot } from '@radix-ui/react-slot'; 2 | import { color } from '@sipe-team/tokens'; 3 | import { clsx as cx } from 'clsx'; 4 | import { type CSSProperties, type ComponentProps, type ForwardedRef, forwardRef } from 'react'; 5 | import styles from './Card.module.css'; 6 | 7 | export type CardRatio = 'rectangle' | 'square' | 'wide' | 'portrait' | 'auto'; 8 | export type CardVariant = 'filled' | 'outline'; 9 | 10 | export interface CardProps extends ComponentProps<'div'> { 11 | ratio?: CardRatio; 12 | variant?: CardVariant; 13 | asChild?: boolean; 14 | } 15 | 16 | export const Card = forwardRef(function Card( 17 | { className, ratio = 'rectangle', style: _style, variant = 'filled', asChild, ...props }: CardProps, 18 | ref: ForwardedRef, 19 | ) { 20 | const style = { 21 | '--padding': '20px', 22 | '--background-color': getBackgroundColor(variant), 23 | '--border': variant === 'outline' ? `1px solid ${color.cyan300}` : `1px solid ${color.gray200}`, 24 | '--aspect-ratio': getAspectRatio(ratio), 25 | display: 'flex', 26 | justifyContent: 'center', 27 | alignItems: 'center', 28 | ..._style, 29 | } as CSSProperties; 30 | 31 | const Comp = asChild ? Slot : 'div'; 32 | 33 | return ; 34 | }); 35 | 36 | const backgroundColors: Record = { 37 | outline: color.gray50, 38 | filled: color.gray100, 39 | }; 40 | 41 | function getBackgroundColor(variant: CardVariant) { 42 | return backgroundColors[variant] ?? color.gray100; 43 | } 44 | 45 | function getAspectRatio(ratio: CardRatio) { 46 | switch (ratio) { 47 | case 'square': 48 | return '1 / 1'; 49 | case 'rectangle': 50 | return '16 / 9'; 51 | case 'wide': 52 | return '21 / 9'; 53 | case 'portrait': 54 | return '3 / 4'; 55 | default: 56 | return 'auto'; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /packages/card/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Card'; 2 | -------------------------------------------------------------------------------- /packages/card/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/card/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import defaultConfig from '../../tsup.config'; 2 | 3 | export default defaultConfig; 4 | -------------------------------------------------------------------------------- /packages/card/vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineProject, mergeConfig } from 'vitest/config'; 2 | import defaultConfig from '../../vitest.config'; 3 | 4 | export default mergeConfig( 5 | defaultConfig, 6 | defineProject({ 7 | test: { 8 | setupFiles: './vitest.setup.ts', 9 | }, 10 | }), 11 | ); 12 | -------------------------------------------------------------------------------- /packages/card/vitest.setup.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /packages/checkbox/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-vite'; 2 | 3 | export default { 4 | stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], 5 | addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'], 6 | framework: { 7 | name: '@storybook/react-vite', 8 | options: {}, 9 | }, 10 | } satisfies StorybookConfig; 11 | -------------------------------------------------------------------------------- /packages/checkbox/.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/react'; 2 | 3 | export default { 4 | tags: ['autodocs'], 5 | } satisfies Preview; 6 | -------------------------------------------------------------------------------- /packages/checkbox/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @sipe-team/checkbox 2 | 3 | ## 0.0.1 4 | 5 | ### Patch Changes 6 | 7 | - 235be5d: fix: add react-dom into peerDependencies 8 | -------------------------------------------------------------------------------- /packages/checkbox/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.module.css'; 2 | -------------------------------------------------------------------------------- /packages/checkbox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sipe-team/checkbox", 3 | "description": "checkbox for Sipe Design System", 4 | "version": "0.0.1", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/sipe-team/side" 9 | }, 10 | "type": "module", 11 | "exports": "./src/index.ts", 12 | "files": [ 13 | "dist" 14 | ], 15 | "scripts": { 16 | "build": "tsup", 17 | "build:storybook": "storybook build", 18 | "dev:storybook": "storybook dev -p 6006", 19 | "lint:biome": "pnpm exec biome lint", 20 | "lint:eslint": "pnpm exec eslint", 21 | "test": "vitest", 22 | "typecheck": "tsc", 23 | "prepack": "pnpm run build" 24 | }, 25 | "dependencies": { 26 | "@radix-ui/react-slot": "^1.1.0", 27 | "clsx": "^2.1.1", 28 | "nanoid": "^5.0.9" 29 | }, 30 | "devDependencies": { 31 | "@storybook/addon-essentials": "catalog:", 32 | "@storybook/addon-interactions": "catalog:", 33 | "@storybook/addon-links": "catalog:", 34 | "@storybook/blocks": "catalog:", 35 | "@storybook/react": "catalog:", 36 | "@storybook/react-vite": "catalog:", 37 | "@storybook/test": "catalog:", 38 | "@testing-library/jest-dom": "catalog:", 39 | "@testing-library/react": "catalog:", 40 | "@types/react": "^18.3.12", 41 | "happy-dom": "catalog:", 42 | "react": "^18.3.1", 43 | "react-dom": "^18.3.1", 44 | "storybook": "catalog:", 45 | "tsup": "catalog:", 46 | "typescript": "catalog:", 47 | "vitest": "catalog:" 48 | }, 49 | "peerDependencies": { 50 | "react": ">= 18", 51 | "react-dom": ">= 18" 52 | }, 53 | "publishConfig": { 54 | "access": "public", 55 | "registry": "https://npm.pkg.github.com", 56 | "exports": { 57 | ".": { 58 | "import": { 59 | "types": "./dist/index.d.ts", 60 | "default": "./dist/index.js" 61 | }, 62 | "require": { 63 | "types": "./dist/index.d.cts", 64 | "default": "./dist/index.cjs" 65 | } 66 | }, 67 | "./styles.css": "./dist/index.css" 68 | } 69 | }, 70 | "sideEffects": false 71 | } 72 | -------------------------------------------------------------------------------- /packages/checkbox/src/Checkbox.module.css: -------------------------------------------------------------------------------- 1 | .checkbox { 2 | display: flex; 3 | align-items: center; 4 | gap: 8px; 5 | margin: var(--checkbox-margin); 6 | padding: var(--checkbox-padding); 7 | } 8 | 9 | .checkbox-input { 10 | appearance: none; 11 | width: var(--checkbox-size); 12 | height: var(--checkbox-size); 13 | border: var(--border-width) solid var(--border-color); 14 | border-radius: var(--border-radius); 15 | background-color: var(--background-color); 16 | } 17 | 18 | .checkbox-input:disabled { 19 | background-color: var(--disabled-color); 20 | border-color: var(--disabled-color); 21 | } 22 | 23 | .checkbox-label { 24 | font-size: var(--label-size); 25 | cursor: pointer; 26 | } 27 | 28 | .checkbox.disabled .checkbox-label { 29 | cursor: not-allowed; 30 | opacity: 0.6; 31 | } 32 | 33 | .checkbox-input:is(:checked, :indeterminate) { 34 | background-color: var(--checked-color); 35 | border-color: var(--checked-color); 36 | background-size: var(--background-size); 37 | background-position: var(--background-position); 38 | background-repeat: var(--background-repeat); 39 | } 40 | 41 | .checkbox-input:checked { 42 | background-image: var(--checked-icon); 43 | } 44 | 45 | .checkbox-input:indeterminate { 46 | background-image: var(--indeterminate-icon); 47 | } 48 | -------------------------------------------------------------------------------- /packages/checkbox/src/constants/checkStyle.ts: -------------------------------------------------------------------------------- 1 | import CheckboxIcon from '../images/checkbox-icon.svg'; 2 | import minusIcon from '../images/minus-icon.svg'; 3 | 4 | export interface CheckStyleConfig { 5 | borderRadius: number; 6 | borderWidth: number; 7 | borderColor: string; 8 | backgroundColor: string; 9 | checkedColor: string; 10 | disabledColor: string; 11 | hoverColor: string; 12 | checkedIcon: string; 13 | indeterminateIcon: string; 14 | backgroundSize: string; 15 | backgroundPosition: string; 16 | backgroundRepeat: string; 17 | } 18 | 19 | export const DEFAULT_CHECK_STYLE: CheckStyleConfig = { 20 | borderRadius: 4, 21 | borderWidth: 1, 22 | borderColor: '#D1D5DB', 23 | backgroundColor: '#FFFFFF', 24 | checkedColor: '#3B82F6', 25 | disabledColor: '#E5E7EB', 26 | hoverColor: '#F3F4F6', 27 | checkedIcon: CheckboxIcon, 28 | indeterminateIcon: minusIcon, 29 | backgroundSize: '100%', 30 | backgroundPosition: 'center', 31 | backgroundRepeat: 'no-repeat', 32 | } as const; 33 | -------------------------------------------------------------------------------- /packages/checkbox/src/constants/size.ts: -------------------------------------------------------------------------------- 1 | export type CheckboxSize = 'small' | 'medium' | 'large'; 2 | 3 | export interface SizeConfig { 4 | checkboxSize: number; 5 | labelSize: number; 6 | padding: number; 7 | margin: number; 8 | } 9 | 10 | export const CHECKBOX_SIZES: Record = { 11 | small: { 12 | checkboxSize: 16, 13 | labelSize: 14, 14 | padding: 8, 15 | margin: 4, 16 | }, 17 | medium: { 18 | checkboxSize: 20, 19 | labelSize: 16, 20 | padding: 10, 21 | margin: 6, 22 | }, 23 | large: { 24 | checkboxSize: 24, 25 | labelSize: 18, 26 | padding: 12, 27 | margin: 8, 28 | }, 29 | } as const; 30 | -------------------------------------------------------------------------------- /packages/checkbox/src/hooks/useCheckboxGroup.ts: -------------------------------------------------------------------------------- 1 | import { useCallback, useState } from 'react'; 2 | 3 | interface UseCheckboxGroupProps { 4 | total: number; 5 | onChange?: (checkedItems: boolean[], allChecked: boolean, indeterminate: boolean) => void; 6 | } 7 | 8 | export const useCheckboxGroup = ({ total, onChange }: UseCheckboxGroupProps) => { 9 | const [checkedItems, setCheckedItems] = useState(new Array(total).fill(false)); 10 | 11 | const updateCheckedItems = useCallback( 12 | (index: number, checked: boolean) => { 13 | const newCheckedItems = [...checkedItems]; 14 | newCheckedItems[index] = checked; 15 | setCheckedItems(newCheckedItems); 16 | 17 | const checkedCount = newCheckedItems.filter(Boolean).length; 18 | const allChecked = checkedCount === total; 19 | const indeterminate = checkedCount > 0 && checkedCount < total; 20 | 21 | onChange?.(newCheckedItems, allChecked, indeterminate); 22 | }, 23 | [checkedItems, total, onChange], 24 | ); 25 | 26 | const setAllChecked = useCallback( 27 | (checked: boolean) => { 28 | const newCheckedItems = new Array(total).fill(checked); 29 | setCheckedItems(newCheckedItems); 30 | onChange?.(newCheckedItems, checked, false); 31 | }, 32 | [total, onChange], 33 | ); 34 | 35 | const checkedCount = checkedItems.filter(Boolean).length; 36 | const allChecked = checkedCount === total; 37 | const indeterminate = checkedCount > 0 && checkedCount < total; 38 | 39 | return { 40 | checkedItems, 41 | updateCheckedItems, 42 | setAllChecked, 43 | allChecked, 44 | indeterminate, 45 | }; 46 | }; 47 | -------------------------------------------------------------------------------- /packages/checkbox/src/images/checkbox-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /packages/checkbox/src/images/minus-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/checkbox/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Checkbox'; 2 | export * from './hooks/useCheckboxGroup'; 3 | -------------------------------------------------------------------------------- /packages/checkbox/src/types/svg.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.svg' { 2 | const content: string; 3 | export default content; 4 | } 5 | -------------------------------------------------------------------------------- /packages/checkbox/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/checkbox/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import defaultConfig from '../../tsup.config'; 2 | 3 | export default defaultConfig; 4 | -------------------------------------------------------------------------------- /packages/checkbox/vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineProject, mergeConfig } from 'vitest/config'; 2 | import defaultConfig from '../../vitest.config'; 3 | 4 | export default mergeConfig( 5 | defaultConfig, 6 | defineProject({ 7 | test: { 8 | setupFiles: './vitest.setup.ts', 9 | }, 10 | }), 11 | ); 12 | -------------------------------------------------------------------------------- /packages/checkbox/vitest.setup.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /packages/divider/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-vite'; 2 | 3 | export default { 4 | stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], 5 | addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'], 6 | framework: { 7 | name: '@storybook/react-vite', 8 | options: {}, 9 | }, 10 | } satisfies StorybookConfig; 11 | -------------------------------------------------------------------------------- /packages/divider/.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/react'; 2 | 3 | export default { 4 | tags: ['autodocs'], 5 | } satisfies Preview; 6 | -------------------------------------------------------------------------------- /packages/divider/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @sipe-team/divider 2 | 3 | ## 0.0.3 4 | 5 | ### Patch Changes 6 | 7 | - 235be5d: fix: add react-dom into peerDependencies 8 | 9 | ## 0.0.2 10 | 11 | ### Patch Changes 12 | 13 | - f425309: fix: exports 14 | - f425309: fix: styles.css 15 | 16 | ## 0.0.2-next.1 17 | 18 | ### Patch Changes 19 | 20 | - fix: exports 21 | 22 | ## 0.0.2-next.0 23 | 24 | ### Patch Changes 25 | 26 | - 27c312a: fix: styles.css 27 | 28 | ## 0.0.1 29 | 30 | ### Patch Changes 31 | 32 | - e6f76c0: fix: css module bundle 33 | -------------------------------------------------------------------------------- /packages/divider/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.module.css'; 2 | -------------------------------------------------------------------------------- /packages/divider/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sipe-team/divider", 3 | "description": "divider component for Sipe Design System", 4 | "version": "0.0.3", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/sipe-team/side" 9 | }, 10 | "type": "module", 11 | "exports": "./src/index.ts", 12 | "files": [ 13 | "dist" 14 | ], 15 | "scripts": { 16 | "build": "tsup", 17 | "build:storybook": "storybook build", 18 | "dev:storybook": "storybook dev -p 6006", 19 | "lint:biome": "pnpm exec biome lint", 20 | "lint:eslint": "pnpm exec eslint", 21 | "test": "vitest", 22 | "typecheck": "tsc", 23 | "prepack": "pnpm run build" 24 | }, 25 | "dependencies": { 26 | "clsx": "^2.1.1" 27 | }, 28 | "devDependencies": { 29 | "@sipe-team/typography": "workspace:*", 30 | "@storybook/addon-essentials": "catalog:", 31 | "@storybook/addon-interactions": "catalog:", 32 | "@storybook/addon-links": "catalog:", 33 | "@storybook/blocks": "catalog:", 34 | "@storybook/react": "catalog:", 35 | "@storybook/react-vite": "catalog:", 36 | "@storybook/test": "catalog:", 37 | "@testing-library/jest-dom": "^6.6.3", 38 | "@testing-library/react": "^16.0.1", 39 | "@types/react": "^18.3.12", 40 | "happy-dom": "catalog:", 41 | "react": "^18.3.1", 42 | "react-dom": "^18.3.1", 43 | "storybook": "catalog:", 44 | "tsup": "catalog:", 45 | "typescript": "catalog:", 46 | "vitest": "catalog:" 47 | }, 48 | "peerDependencies": { 49 | "react": ">= 18", 50 | "react-dom": ">= 18" 51 | }, 52 | "publishConfig": { 53 | "access": "public", 54 | "exports": { 55 | ".": { 56 | "import": { 57 | "types": "./dist/index.d.ts", 58 | "default": "./dist/index.js" 59 | }, 60 | "require": { 61 | "types": "./dist/index.d.cts", 62 | "default": "./dist/index.cjs" 63 | } 64 | }, 65 | "./styles.css": "./dist/index.css" 66 | } 67 | }, 68 | "sideEffects": false 69 | } 70 | -------------------------------------------------------------------------------- /packages/divider/src/Divider.module.css: -------------------------------------------------------------------------------- 1 | .divider { 2 | border: 0; 3 | margin: 0; 4 | flex-shrink: 0; 5 | background-color: black; 6 | } 7 | 8 | .horizontal.divider { 9 | width: 100%; 10 | height: 1px; 11 | } 12 | 13 | .vertical.divider { 14 | width: 1px; 15 | height: 100%; 16 | } 17 | -------------------------------------------------------------------------------- /packages/divider/src/Divider.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Typography } from '@sipe-team/typography'; 2 | import type { Meta, StoryObj } from '@storybook/react'; 3 | import { Divider } from './Divider'; 4 | 5 | const meta = { 6 | title: 'Components/Divider', 7 | component: Divider, 8 | parameters: { 9 | layout: 'centered', 10 | }, 11 | } satisfies Meta; 12 | export default meta; 13 | 14 | type Story = StoryObj; 15 | 16 | export const Basic: Story = { 17 | render: () => ( 18 |
26 | {/* 기본 가로 방향 */} 27 |
28 | 29 |

가로 구분선

30 | 31 | 32 |
33 | 34 |
35 |
36 | 37 | {/* 기본 세로 방향 */} 38 |
39 | 40 |

세로 구분선

41 | 42 | 43 |
44 | 좌 45 | 46 | 우 47 |
48 |
49 | 50 | {/* 스타일 섹션 */} 51 |
52 | 53 |

스타일링

54 | 55 | 56 |
57 |
58 | default 59 | 60 |
61 | 62 |
63 | colored 64 | 65 |
66 | 67 |
68 | thick 69 | 70 |
71 |
72 |
73 |
74 | ), 75 | }; 76 | -------------------------------------------------------------------------------- /packages/divider/src/Divider.test.tsx: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import { describe, expect, test } from 'vitest'; 3 | import { Divider } from './Divider'; 4 | 5 | describe('Divider', () => { 6 | test('orientation 속성이 없으면 가로 방향으로 그린다.', () => { 7 | render(); 8 | 9 | const divider = screen.getByRole('separator'); 10 | 11 | expect(divider).toHaveAttribute('aria-orientation', 'horizontal'); 12 | expect(divider).toHaveStyle({ 13 | width: '100%', 14 | height: '1px', 15 | }); 16 | }); 17 | 18 | test('orientation이 vertical이면 세로 방향으로 그린다.', () => { 19 | render(); 20 | 21 | const divider = screen.getByRole('separator'); 22 | 23 | expect(divider).toHaveAttribute('aria-orientation', 'vertical'); 24 | expect(divider).toHaveStyle({ 25 | width: '1px', 26 | height: '100%', 27 | }); 28 | }); 29 | 30 | test('전달받은 style 속성이 컴포넌트에 적용된다.', () => { 31 | const testStyle = { 32 | backgroundColor: 'red', 33 | margin: '8px', 34 | }; 35 | 36 | render(); 37 | 38 | const divider = screen.getByRole('separator'); 39 | 40 | expect(divider).toHaveStyle({ 41 | backgroundColor: 'red', 42 | margin: '8px', 43 | }); 44 | }); 45 | }); 46 | -------------------------------------------------------------------------------- /packages/divider/src/Divider.tsx: -------------------------------------------------------------------------------- 1 | import { clsx as cx } from 'clsx'; 2 | import { type ComponentProps, forwardRef } from 'react'; 3 | import styles from './Divider.module.css'; 4 | 5 | interface DividerProps extends ComponentProps<'hr'> { 6 | orientation?: 'horizontal' | 'vertical'; 7 | } 8 | 9 | export const Divider = forwardRef(function Divider({ 10 | orientation = 'horizontal', 11 | ...props 12 | }: DividerProps) { 13 | return ( 14 |
19 | ); 20 | }); 21 | 22 | Divider.displayName = 'Divider'; 23 | -------------------------------------------------------------------------------- /packages/divider/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Divider'; 2 | -------------------------------------------------------------------------------- /packages/divider/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/divider/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import defaultConfig from '../../tsup.config'; 2 | 3 | export default defaultConfig; 4 | -------------------------------------------------------------------------------- /packages/divider/vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineProject, mergeConfig } from 'vitest/config'; 2 | import defaultConfig from '../../vitest.config'; 3 | 4 | export default mergeConfig( 5 | defaultConfig, 6 | defineProject({ 7 | test: { 8 | setupFiles: './vitest.setup.ts', 9 | }, 10 | }), 11 | ); 12 | -------------------------------------------------------------------------------- /packages/divider/vitest.setup.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /packages/flex/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-vite'; 2 | 3 | export default { 4 | stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], 5 | addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'], 6 | framework: { 7 | name: '@storybook/react-vite', 8 | options: {}, 9 | }, 10 | } satisfies StorybookConfig; 11 | -------------------------------------------------------------------------------- /packages/flex/.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/react'; 2 | 3 | export default { 4 | tags: ['autodocs'], 5 | } satisfies Preview; 6 | -------------------------------------------------------------------------------- /packages/flex/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @sipe-team/flex 2 | 3 | ## 0.1.3 4 | 5 | ### Patch Changes 6 | 7 | - 235be5d: fix: add react-dom into peerDependencies 8 | 9 | ## 0.1.2 10 | 11 | ### Patch Changes 12 | 13 | - 6883355: fix(flex) : set default flex direction 'row' 14 | 15 | ## 0.1.1 16 | 17 | ### Patch Changes 18 | 19 | - dcafff3: fix(flex,side): flex style export issue 20 | 21 | ## 0.1.0 22 | 23 | ### Minor Changes 24 | 25 | - 81249b6: feat(flex): add flex component 26 | -------------------------------------------------------------------------------- /packages/flex/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.module.css'; 2 | -------------------------------------------------------------------------------- /packages/flex/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sipe-team/flex", 3 | "description": "Flex for Sipe Design System", 4 | "version": "0.1.3", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/sipe-team/side" 9 | }, 10 | "type": "module", 11 | "exports": "./src/index.ts", 12 | "files": [ 13 | "dist" 14 | ], 15 | "scripts": { 16 | "build": "tsup", 17 | "build:storybook": "storybook build", 18 | "dev:storybook": "storybook dev -p 6006", 19 | "lint:biome": "pnpm exec biome lint", 20 | "lint:eslint": "pnpm exec eslint", 21 | "test": "vitest", 22 | "typecheck": "tsc", 23 | "prepack": "pnpm run build" 24 | }, 25 | "dependencies": { 26 | "@radix-ui/react-slot": "^1.1.0", 27 | "clsx": "^2.1.1" 28 | }, 29 | "devDependencies": { 30 | "@faker-js/faker": "^9.2.0", 31 | "@storybook/addon-essentials": "catalog:", 32 | "@storybook/addon-interactions": "catalog:", 33 | "@storybook/addon-links": "catalog:", 34 | "@storybook/blocks": "catalog:", 35 | "@storybook/react": "catalog:", 36 | "@storybook/react-vite": "catalog:", 37 | "@storybook/test": "catalog:", 38 | "@testing-library/jest-dom": "catalog:", 39 | "@testing-library/react": "catalog:", 40 | "@types/react": "^18.3.12", 41 | "happy-dom": "catalog:", 42 | "react": "^18.3.1", 43 | "react-dom": "^18.3.1", 44 | "storybook": "catalog:", 45 | "tsup": "catalog:", 46 | "typescript": "catalog:", 47 | "vitest": "catalog:" 48 | }, 49 | "peerDependencies": { 50 | "react": ">= 18", 51 | "react-dom": ">= 18" 52 | }, 53 | "publishConfig": { 54 | "access": "public", 55 | "registry": "https://npm.pkg.github.com", 56 | "exports": { 57 | ".": { 58 | "import": { 59 | "types": "./dist/index.d.ts", 60 | "default": "./dist/index.js" 61 | }, 62 | "require": { 63 | "types": "./dist/index.d.cts", 64 | "default": "./dist/index.cjs" 65 | } 66 | }, 67 | "./styles.css": "./dist/index.css" 68 | } 69 | }, 70 | "sideEffects": false 71 | } 72 | -------------------------------------------------------------------------------- /packages/flex/src/Flex.module.css: -------------------------------------------------------------------------------- 1 | .flex { 2 | display: var(--flex-display); 3 | flex-direction: var(--flex-direction); 4 | align-items: var(--flex-align); 5 | justify-content: var(--flex-justify); 6 | flex-wrap: var(--flex-wrap); 7 | gap: var(--flex-gap); 8 | flex-basis: var(--flex-basis); 9 | flex-grow: var(--flex-grow); 10 | flex-shrink: var(--flex-shrink); 11 | } 12 | -------------------------------------------------------------------------------- /packages/flex/src/Flex.tsx: -------------------------------------------------------------------------------- 1 | import { Slot } from '@radix-ui/react-slot'; 2 | import { clsx as cx } from 'clsx'; 3 | import { type CSSProperties, type ComponentProps, type ForwardedRef, forwardRef } from 'react'; 4 | import styles from './Flex.module.css'; 5 | 6 | export interface FlexProps extends ComponentProps<'div'> { 7 | align?: CSSProperties['alignItems']; 8 | justify?: CSSProperties['justifyContent']; 9 | wrap?: CSSProperties['flexWrap']; 10 | direction?: CSSProperties['flexDirection']; 11 | basis?: CSSProperties['flexBasis']; 12 | grow?: CSSProperties['flexGrow']; 13 | shrink?: CSSProperties['flexShrink']; 14 | inline?: boolean; 15 | gap?: CSSProperties['gap']; 16 | asChild?: boolean; 17 | } 18 | 19 | export const Flex = forwardRef(function Flex( 20 | { 21 | align, 22 | justify, 23 | wrap, 24 | direction, 25 | basis, 26 | grow, 27 | shrink, 28 | inline, 29 | gap, 30 | className, 31 | style, 32 | children, 33 | asChild, 34 | ...rest 35 | }: FlexProps, 36 | ref: ForwardedRef, 37 | ) { 38 | const Component = asChild ? Slot : 'div'; 39 | 40 | const flexStyle = { 41 | '--flex-display': inline ? 'inline-flex' : 'flex', 42 | '--flex-direction': direction ?? 'row', 43 | '--flex-align': align ?? 'normal', 44 | '--flex-justify': justify ?? 'normal', 45 | '--flex-wrap': wrap ?? 'nowrap', 46 | '--flex-gap': gap, 47 | '--flex-basis': basis, 48 | '--flex-grow': grow, 49 | '--flex-shrink': shrink, 50 | ...style, 51 | } as React.CSSProperties; 52 | 53 | return ( 54 | 55 | {children} 56 | 57 | ); 58 | }); 59 | -------------------------------------------------------------------------------- /packages/flex/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Flex'; 2 | -------------------------------------------------------------------------------- /packages/flex/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/flex/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import defaultConfig from '../../tsup.config'; 2 | 3 | export default defaultConfig; 4 | -------------------------------------------------------------------------------- /packages/flex/vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineProject, mergeConfig } from 'vitest/config'; 2 | import defaultConfig from '../../vitest.config'; 3 | 4 | export default mergeConfig( 5 | defaultConfig, 6 | defineProject({ 7 | test: { 8 | setupFiles: './vitest.setup.ts', 9 | }, 10 | }), 11 | ); 12 | -------------------------------------------------------------------------------- /packages/flex/vitest.setup.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /packages/grid/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-vite'; 2 | 3 | export default { 4 | stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], 5 | addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'], 6 | framework: { 7 | name: '@storybook/react-vite', 8 | options: {}, 9 | }, 10 | } satisfies StorybookConfig; 11 | -------------------------------------------------------------------------------- /packages/grid/.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/react'; 2 | 3 | export default { 4 | tags: ['autodocs'], 5 | } satisfies Preview; 6 | -------------------------------------------------------------------------------- /packages/grid/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @sipe-team/grid 2 | 3 | ## 0.1.1 4 | 5 | ### Patch Changes 6 | 7 | - 235be5d: fix: add react-dom into peerDependencies 8 | 9 | ## 0.1.0 10 | 11 | ### Minor Changes 12 | 13 | - 08121f0: feat(grid): create grid component 14 | -------------------------------------------------------------------------------- /packages/grid/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.module.css'; 2 | -------------------------------------------------------------------------------- /packages/grid/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sipe-team/grid", 3 | "description": "Grid for Sipe Design System", 4 | "version": "0.1.1", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/sipe-team/side" 9 | }, 10 | "type": "module", 11 | "exports": "./src/index.ts", 12 | "files": [ 13 | "dist" 14 | ], 15 | "scripts": { 16 | "build": "tsup", 17 | "build:storybook": "storybook build", 18 | "dev:storybook": "storybook dev -p 6006", 19 | "lint:biome": "pnpm exec biome lint", 20 | "lint:eslint": "pnpm exec eslint", 21 | "test": "vitest", 22 | "typecheck": "tsc", 23 | "prepack": "pnpm run build" 24 | }, 25 | "dependencies": { 26 | "@radix-ui/react-slot": "^1.1.0", 27 | "clsx": "^2.1.1" 28 | }, 29 | "devDependencies": { 30 | "@faker-js/faker": "^9.2.0", 31 | "@storybook/addon-essentials": "catalog:", 32 | "@storybook/addon-interactions": "catalog:", 33 | "@storybook/addon-links": "catalog:", 34 | "@storybook/blocks": "catalog:", 35 | "@storybook/react": "catalog:", 36 | "@storybook/react-vite": "catalog:", 37 | "@storybook/test": "catalog:", 38 | "@testing-library/jest-dom": "catalog:", 39 | "@testing-library/react": "catalog:", 40 | "@types/react": "^18.3.12", 41 | "happy-dom": "catalog:", 42 | "react": "^18.3.1", 43 | "storybook": "catalog:", 44 | "tsup": "catalog:", 45 | "typescript": "catalog:", 46 | "vitest": "catalog:" 47 | }, 48 | "peerDependencies": { 49 | "react": ">= 18", 50 | "react-dom": ">= 18" 51 | }, 52 | "publishConfig": { 53 | "access": "public", 54 | "registry": "https://npm.pkg.github.com", 55 | "exports": { 56 | ".": { 57 | "import": { 58 | "types": "./dist/index.d.ts", 59 | "default": "./dist/index.js" 60 | }, 61 | "require": { 62 | "types": "./dist/index.d.cts", 63 | "default": "./dist/index.cjs" 64 | } 65 | }, 66 | "./styles.css": "./dist/index.css" 67 | } 68 | }, 69 | "sideEffects": false 70 | } 71 | -------------------------------------------------------------------------------- /packages/grid/src/Grid.module.css: -------------------------------------------------------------------------------- 1 | .grid { 2 | display: var(--grid-display); 3 | grid-template-columns: var(--grid-template-columns); 4 | grid-template-rows: var(--grid-template-rows); 5 | grid-template-areas: var(--grid-template-areas); 6 | gap: var(--grid-gap); 7 | grid-auto-flow: var(--grid-auto-flow); 8 | align-items: var(--grid-align-items); 9 | justify-items: var(--grid-justify-items); 10 | align-content: var(--grid-align-content); 11 | justify-content: var(--grid-justify-content); 12 | } 13 | 14 | .grid-item { 15 | align-self: var(--grid-align-self); 16 | justify-self: var(--grid-justify-self); 17 | } 18 | 19 | .grid-item-area { 20 | grid-area: var(--grid-area); 21 | } 22 | 23 | .grid-item-column { 24 | grid-column: var(--grid-column); 25 | } 26 | 27 | .grid-item-row { 28 | grid-row: var(--grid-row); 29 | } 30 | -------------------------------------------------------------------------------- /packages/grid/src/index.ts: -------------------------------------------------------------------------------- 1 | export { Grid, GridItem, Root, Item } from './Grid'; 2 | export type { GridProps, GridItemProps } from './Grid'; 3 | -------------------------------------------------------------------------------- /packages/grid/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/grid/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup'; 2 | 3 | export default defineConfig({ 4 | entry: ['src/index.ts'], 5 | clean: true, 6 | dts: true, 7 | format: ['esm', 'cjs'], 8 | }); 9 | -------------------------------------------------------------------------------- /packages/grid/vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineProject, mergeConfig } from 'vitest/config'; 2 | import defaultConfig from '../../vitest.config'; 3 | 4 | export default mergeConfig( 5 | defaultConfig, 6 | defineProject({ 7 | test: { 8 | setupFiles: './vitest.setup.ts', 9 | }, 10 | }), 11 | ); 12 | -------------------------------------------------------------------------------- /packages/grid/vitest.setup.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /packages/icon/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-vite'; 2 | 3 | export default { 4 | stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], 5 | addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'], 6 | framework: { 7 | name: '@storybook/react-vite', 8 | options: {}, 9 | }, 10 | } satisfies StorybookConfig; 11 | -------------------------------------------------------------------------------- /packages/icon/.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/react'; 2 | 3 | export default { 4 | tags: ['autodocs'], 5 | } satisfies Preview; 6 | -------------------------------------------------------------------------------- /packages/icon/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @sipe-team/icon 2 | 3 | ## 0.0.1 4 | 5 | ### Patch Changes 6 | 7 | - 235be5d: fix: add react-dom into peerDependencies 8 | -------------------------------------------------------------------------------- /packages/icon/README.md: -------------------------------------------------------------------------------- 1 | # @sipe-team/icon 2 | 3 | React icon components for Sipe Design System. 4 | 5 | ## Installation 6 | 7 | ```bash 8 | pnpm add @sipe-team/icon 9 | ``` 10 | 11 | ## Usage 12 | 13 | ```tsx 14 | import { ArrowRightIcon } from '@sipe-team/icon'; 15 | 16 | function Example() { 17 | return ( 18 | 22 | ); 23 | } 24 | ``` 25 | 26 | ## Features 27 | 28 | - Optimized SVG icons as React components 29 | - TypeScript support 30 | - Customizable size and color 31 | - Preserved original icon colors when no color prop is provided 32 | - Tree-shakeable exports 33 | 34 | ## Development 35 | 36 | ### Icon Naming Convention 37 | 38 | - Use kebab-case for SVG files: `arrow-right.svg`, `chevron-down.svg` 39 | - Files will be automatically converted to PascalCase components with 'Icon' suffix: 40 | 41 | - `arrow-right.svg` → `ArrowRightIcon` 42 | - `chevron-down.svg` → `ChevronDownIcon` 43 | 44 | ### Adding new icons 45 | 46 | 1. Add SVG file to `icons` directory 47 | 2. Run generation script: 48 | ```bash 49 | pnpm generate-icons 50 | ``` 51 | 52 | ### Preview 53 | 54 | Run Storybook to preview all icons: 55 | ```bash 56 | pnpm dev:storybook 57 | ``` -------------------------------------------------------------------------------- /packages/icon/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.module.css'; 2 | -------------------------------------------------------------------------------- /packages/icon/icons/accordion-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icon/icons/check-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /packages/icon/icons/email.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /packages/icon/icons/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icon/icons/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icon/icons/kakao.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/icon/icons/link.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /packages/icon/icons/linkedin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icon/icons/organizer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icon/icons/user.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /packages/icon/icons/youtube.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sipe-team/icon", 3 | "description": "React Icon Components for Sipe Design System", 4 | "version": "0.0.1", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/sipe-team/side" 9 | }, 10 | "type": "module", 11 | "exports": "./src/index.ts", 12 | "files": [ 13 | "dist" 14 | ], 15 | "scripts": { 16 | "build": "tsup", 17 | "build:storybook": "storybook build", 18 | "dev:storybook": "storybook dev -p 6006", 19 | "lint:biome": "pnpm exec biome lint", 20 | "lint:eslint": "pnpm exec eslint", 21 | "test": "vitest", 22 | "typecheck": "tsc", 23 | "prepack": "pnpm run build", 24 | "generate-icons": "tsx scripts/generate-icons.ts" 25 | }, 26 | "devDependencies": { 27 | "@storybook/addon-essentials": "catalog:", 28 | "@storybook/addon-interactions": "catalog:", 29 | "@storybook/addon-links": "catalog:", 30 | "@storybook/blocks": "catalog:", 31 | "@storybook/react": "catalog:", 32 | "@storybook/react-vite": "catalog:", 33 | "@storybook/test": "catalog:", 34 | "@testing-library/jest-dom": "catalog:", 35 | "@testing-library/react": "catalog:", 36 | "@types/react": "^18.3.12", 37 | "happy-dom": "catalog:", 38 | "react": "^18.3.1", 39 | "react-dom": "^18.3.1", 40 | "storybook": "catalog:", 41 | "svgo": "^3.3.2", 42 | "tsup": "catalog:", 43 | "typescript": "catalog:", 44 | "vitest": "catalog:" 45 | }, 46 | "peerDependencies": { 47 | "react": ">= 18", 48 | "react-dom": ">= 18" 49 | }, 50 | "publishConfig": { 51 | "access": "public", 52 | "registry": "https://npm.pkg.github.com", 53 | "exports": { 54 | ".": { 55 | "import": { 56 | "types": "./dist/index.d.ts", 57 | "default": "./dist/index.js" 58 | }, 59 | "require": { 60 | "types": "./dist/index.d.cts", 61 | "default": "./dist/index.cjs" 62 | } 63 | } 64 | } 65 | }, 66 | "sideEffects": false 67 | } 68 | -------------------------------------------------------------------------------- /packages/icon/scripts/generate-icons.ts: -------------------------------------------------------------------------------- 1 | import { performance } from 'node:perf_hooks'; 2 | import { generateComponents } from './utils/generate-components'; 3 | 4 | async function main() { 5 | const startTime = performance.now(); 6 | try { 7 | console.log('🎨 Generating icons...'); 8 | const results = await generateComponents(); 9 | 10 | const successCount = results.filter(r => r.success).length; 11 | const failureCount = results.length - successCount; 12 | 13 | console.log(`✨ Done in ${Math.round(performance.now() - startTime)}ms`); 14 | console.log(`📦 Generated ${successCount} components`); 15 | 16 | if (failureCount > 0) { 17 | console.warn(`⚠️ Failed to generate ${failureCount} components`); 18 | const failures = results.filter(r => !r.success); 19 | for (const failure of failures) { 20 | console.error(` ❌ ${failure.fileName}: ${failure.error}`); 21 | } 22 | } 23 | 24 | } catch (error) { 25 | console.error('Error:', error instanceof Error ? error.message : 'Unknown error'); 26 | process.exit(1); 27 | } 28 | } 29 | 30 | main(); -------------------------------------------------------------------------------- /packages/icon/scripts/utils/optimize-svg.ts: -------------------------------------------------------------------------------- 1 | import { optimize } from 'svgo'; 2 | import { SVGO_CONFIG } from './svgo.config'; 3 | 4 | export const optimizeSvg = async (svg: string): Promise => { 5 | try { 6 | const result = optimize(svg, SVGO_CONFIG); 7 | if (!('data' in result)) { 8 | throw new Error('SVG optimization failed'); 9 | } 10 | 11 | let optimizedSvg = result.data; 12 | 13 | // Convert kebab-case to camelCase 14 | optimizedSvg = optimizedSvg.replace( 15 | /-([a-z])/g, 16 | (_, letter) => letter.toUpperCase() 17 | ); 18 | 19 | // Preserve fill="none" and handle other fill/stroke attributes 20 | optimizedSvg = optimizedSvg.replace( 21 | /(fill|stroke)="(none|[^"]+)"/g, 22 | (_, attr, value) => 23 | value === 'none' 24 | ? `${attr}="none"` 25 | : value === 'currentColor' 26 | ? `${attr}={color}` 27 | : `${attr}={color || "${value}"}` 28 | ); 29 | 30 | // Inject SVG props 31 | optimizedSvg = optimizedSvg.replace( 32 | '( 5 | ({ color, size = 24, ...props }, ref) => { 6 | return ; 7 | } 8 | ); 9 | 10 | AccordionArrowIcon.displayName = 'AccordionArrowIcon'; 11 | -------------------------------------------------------------------------------- /packages/icon/src/components/CheckCircleIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import type { IconProps } from '../types'; 3 | 4 | export const CheckCircleIcon = React.forwardRef( 5 | ({ color, size = 24, ...props }, ref) => { 6 | return ; 7 | } 8 | ); 9 | 10 | CheckCircleIcon.displayName = 'CheckCircleIcon'; 11 | -------------------------------------------------------------------------------- /packages/icon/src/components/EmailIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import type { IconProps } from '../types'; 3 | 4 | export const EmailIcon = React.forwardRef( 5 | ({ color, size = 24, ...props }, ref) => { 6 | return ; 7 | } 8 | ); 9 | 10 | EmailIcon.displayName = 'EmailIcon'; 11 | -------------------------------------------------------------------------------- /packages/icon/src/components/GithubIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import type { IconProps } from '../types'; 3 | 4 | export const GithubIcon = React.forwardRef( 5 | ({ color, size = 24, ...props }, ref) => { 6 | return ; 7 | } 8 | ); 9 | 10 | GithubIcon.displayName = 'GithubIcon'; 11 | -------------------------------------------------------------------------------- /packages/icon/src/components/InstagramIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import type { IconProps } from '../types'; 3 | 4 | export const InstagramIcon = React.forwardRef( 5 | ({ color, size = 24, ...props }, ref) => { 6 | return ; 7 | } 8 | ); 9 | 10 | InstagramIcon.displayName = 'InstagramIcon'; 11 | -------------------------------------------------------------------------------- /packages/icon/src/components/KakaoIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import type { IconProps } from '../types'; 3 | 4 | export const KakaoIcon = React.forwardRef( 5 | ({ color, size = 24, ...props }, ref) => { 6 | return ; 7 | } 8 | ); 9 | 10 | KakaoIcon.displayName = 'KakaoIcon'; 11 | -------------------------------------------------------------------------------- /packages/icon/src/components/LinkIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import type { IconProps } from '../types'; 3 | 4 | export const LinkIcon = React.forwardRef( 5 | ({ color, size = 24, ...props }, ref) => { 6 | return ; 7 | } 8 | ); 9 | 10 | LinkIcon.displayName = 'LinkIcon'; 11 | -------------------------------------------------------------------------------- /packages/icon/src/components/LinkedinIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import type { IconProps } from '../types'; 3 | 4 | export const LinkedinIcon = React.forwardRef( 5 | ({ color, size = 24, ...props }, ref) => { 6 | return ; 7 | } 8 | ); 9 | 10 | LinkedinIcon.displayName = 'LinkedinIcon'; 11 | -------------------------------------------------------------------------------- /packages/icon/src/components/OrganizerIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import type { IconProps } from '../types'; 3 | 4 | export const OrganizerIcon = React.forwardRef( 5 | ({ color, size = 24, ...props }, ref) => { 6 | return ; 7 | } 8 | ); 9 | 10 | OrganizerIcon.displayName = 'OrganizerIcon'; 11 | -------------------------------------------------------------------------------- /packages/icon/src/components/UserIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import type { IconProps } from '../types'; 3 | 4 | export const UserIcon = React.forwardRef( 5 | ({ color, size = 24, ...props }, ref) => { 6 | return ; 7 | } 8 | ); 9 | 10 | UserIcon.displayName = 'UserIcon'; 11 | -------------------------------------------------------------------------------- /packages/icon/src/components/YoutubeIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import type { IconProps } from '../types'; 3 | 4 | export const YoutubeIcon = React.forwardRef( 5 | ({ color, size = 24, ...props }, ref) => { 6 | return ; 7 | } 8 | ); 9 | 10 | YoutubeIcon.displayName = 'YoutubeIcon'; 11 | -------------------------------------------------------------------------------- /packages/icon/src/components/link.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import type { IconProps } from '../types'; 3 | 4 | export const LinkIcon = React.forwardRef( 5 | ({ color, size = 24, ...props }, ref) => { 6 | return ; 7 | } 8 | ); 9 | 10 | LinkIcon.displayName = 'LinkIcon'; 11 | -------------------------------------------------------------------------------- /packages/icon/src/icons.test.tsx: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import { createRef } from 'react'; 3 | import { describe, expect, it } from 'vitest'; 4 | import * as Icons from '.'; 5 | 6 | describe('Icon Components', () => { 7 | const iconEntries = Object.entries(Icons); 8 | 9 | it.each(iconEntries)('%s should render without crashing', (_, Icon) => { 10 | render(); 11 | const svg = document.querySelector('svg'); 12 | expect(svg).toBeInTheDocument(); 13 | 14 | expect(svg).toHaveAttribute('width'); 15 | expect(svg).toHaveAttribute('height'); 16 | expect(svg).toHaveAttribute('viewBox'); 17 | const viewBox = svg?.getAttribute('viewBox'); 18 | expect(viewBox).toMatch(/^\d+\s+\d+\s+\d+\s+\d+$/); 19 | const hasGraphics = Boolean( 20 | svg?.querySelector('path, rect, circle, ellipse, line, polyline, polygon') 21 | ); 22 | expect(hasGraphics).toBe(true); 23 | const paths = svg?.querySelectorAll('path'); 24 | if (paths) { 25 | for (const path of Array.from(paths)) { 26 | expect(path).toHaveAttribute('fill'); 27 | } 28 | } 29 | }); 30 | 31 | it.each(iconEntries)('%s should apply custom size', (_, Icon) => { 32 | render(); 33 | const svg = document.querySelector('svg'); 34 | expect(svg).toHaveAttribute('width', '32'); 35 | expect(svg).toHaveAttribute('height', '32'); 36 | }); 37 | 38 | it.each(iconEntries)('%s should apply custom color', (_, Icon) => { 39 | render(); 40 | const svg = document.querySelector('svg'); 41 | expect(svg?.querySelector('path')).toHaveAttribute('fill', '#FF0000'); 42 | }); 43 | 44 | it.each(iconEntries)('%s should forward ref correctly', (_, Icon) => { 45 | const ref = createRef(); 46 | render(); 47 | expect(ref.current).instanceOf(SVGSVGElement); 48 | }); 49 | 50 | it.each(iconEntries)('%s should spread additional props', (_, Icon) => { 51 | render(); 52 | const svg = screen.getByTestId('test-icon'); 53 | expect(svg).toHaveClass('custom-class'); 54 | }); 55 | }); -------------------------------------------------------------------------------- /packages/icon/src/index.ts: -------------------------------------------------------------------------------- 1 | export type { IconProps } from './types'; 2 | 3 | export { AccordionArrowIcon } from './components/AccordionArrowIcon'; 4 | export { CheckCircleIcon } from './components/CheckCircleIcon'; 5 | export { EmailIcon } from './components/EmailIcon'; 6 | export { GithubIcon } from './components/GithubIcon'; 7 | export { InstagramIcon } from './components/InstagramIcon'; 8 | export { KakaoIcon } from './components/KakaoIcon'; 9 | export { LinkIcon } from './components/LinkIcon'; 10 | export { LinkedinIcon } from './components/LinkedinIcon'; 11 | export { OrganizerIcon } from './components/OrganizerIcon'; 12 | export { UserIcon } from './components/UserIcon'; 13 | export { YoutubeIcon } from './components/YoutubeIcon'; 14 | -------------------------------------------------------------------------------- /packages/icon/src/types.ts: -------------------------------------------------------------------------------- 1 | import type { SVGProps } from 'react'; 2 | 3 | export interface IconProps extends SVGProps { 4 | /** Icon color. Defaults to currentColor */ 5 | color?: string 6 | /** Icon size in pixels. Defaults to 24 */ 7 | size?: number 8 | } 9 | 10 | export type GenerateResult ={ 11 | fileName: string; 12 | componentName: string; 13 | success: boolean; 14 | error?: string; 15 | } -------------------------------------------------------------------------------- /packages/icon/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/icon/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup'; 2 | 3 | export default defineConfig({ 4 | entry: ['src/index.ts'], 5 | clean: true, 6 | dts: true, 7 | format: ['esm', 'cjs'], 8 | }); 9 | -------------------------------------------------------------------------------- /packages/icon/vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineProject, mergeConfig } from 'vitest/config'; 2 | import defaultConfig from '../../vitest.config'; 3 | 4 | export default mergeConfig( 5 | defaultConfig, 6 | defineProject({ 7 | test: { 8 | setupFiles: './vitest.setup.ts', 9 | }, 10 | }), 11 | ); 12 | -------------------------------------------------------------------------------- /packages/icon/vitest.setup.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /packages/input/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-vite'; 2 | 3 | export default { 4 | stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], 5 | addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'], 6 | framework: { 7 | name: '@storybook/react-vite', 8 | options: {}, 9 | }, 10 | } satisfies StorybookConfig; 11 | -------------------------------------------------------------------------------- /packages/input/.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/react'; 2 | 3 | export default { 4 | tags: ['autodocs'], 5 | } satisfies Preview; 6 | -------------------------------------------------------------------------------- /packages/input/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @sipe-team/input 2 | 3 | ## 0.0.4 4 | 5 | ### Patch Changes 6 | 7 | - 235be5d: fix: add react-dom into peerDependencies 8 | 9 | ## 0.0.3 10 | 11 | ### Patch Changes 12 | 13 | - f425309: fix: exports 14 | - f425309: fix: styles.css 15 | 16 | ## 0.0.3-next.1 17 | 18 | ### Patch Changes 19 | 20 | - fix: exports 21 | 22 | ## 0.0.3-next.0 23 | 24 | ### Patch Changes 25 | 26 | - 27c312a: fix: styles.css 27 | 28 | ## 0.0.2 29 | 30 | ### Patch Changes 31 | 32 | - e6f76c0: fix: css module bundle 33 | 34 | ## 0.0.1 35 | 36 | ### Patch Changes 37 | 38 | - 64cb79f: chore(input): bump version 39 | -------------------------------------------------------------------------------- /packages/input/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.module.css'; 2 | -------------------------------------------------------------------------------- /packages/input/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sipe-team/input", 3 | "description": "Input component for Sipe Design System", 4 | "version": "0.0.4", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/sipe-team/side" 9 | }, 10 | "type": "module", 11 | "exports": "./src/index.ts", 12 | "files": ["dist"], 13 | "scripts": { 14 | "build": "tsup", 15 | "build:storybook": "storybook build", 16 | "dev:storybook": "storybook dev -p 6006", 17 | "lint:biome": "pnpm exec biome lint", 18 | "lint:eslint": "pnpm exec eslint", 19 | "test": "vitest", 20 | "typecheck": "tsc", 21 | "prepack": "pnpm run build" 22 | }, 23 | "dependencies": { 24 | "@radix-ui/react-slot": "^1.1.0", 25 | "classnames": "^2.5.1" 26 | }, 27 | "devDependencies": { 28 | "@storybook/addon-essentials": "catalog:", 29 | "@storybook/addon-interactions": "catalog:", 30 | "@storybook/addon-links": "catalog:", 31 | "@storybook/blocks": "catalog:", 32 | "@storybook/react": "catalog:", 33 | "@storybook/react-vite": "catalog:", 34 | "@storybook/test": "catalog:", 35 | "@testing-library/jest-dom": "^6.6.3", 36 | "@testing-library/react": "^16.0.1", 37 | "@testing-library/user-event": "^14.5.2", 38 | "@types/react": "^18.3.12", 39 | "happy-dom": "catalog:", 40 | "react": "^18.3.1", 41 | "react-dom": "^18.3.1", 42 | "storybook": "catalog:", 43 | "tsup": "catalog:", 44 | "typescript": "catalog:", 45 | "vitest": "catalog:" 46 | }, 47 | "peerDependencies": { 48 | "react": ">= 18", 49 | "react-dom": ">= 18" 50 | }, 51 | "publishConfig": { 52 | "access": "public", 53 | "registry": "https://npm.pkg.github.com", 54 | "exports": { 55 | ".": { 56 | "import": { 57 | "types": "./dist/index.d.ts", 58 | "default": "./dist/index.js" 59 | }, 60 | "require": { 61 | "types": "./dist/index.d.cts", 62 | "default": "./dist/index.cjs" 63 | } 64 | }, 65 | "./styles.css": "./dist/index.css" 66 | } 67 | }, 68 | "sideEffects": false 69 | } 70 | -------------------------------------------------------------------------------- /packages/input/src/Input.module.css: -------------------------------------------------------------------------------- 1 | .input-wrapper { 2 | display: flex; 3 | flex: 1; 4 | align-items: center; 5 | font-style: normal; 6 | text-align: start; 7 | 8 | padding: var(--input-padding); 9 | border-radius: var(--input-border-radius); 10 | outline: 1px solid var(--input-ring-color); 11 | 12 | @supports selector(:has(*)) { 13 | &:where(:has(.input:focus)) { 14 | outline: 2px solid var(--input-ring-color); 15 | outline-offset: -1px; 16 | } 17 | 18 | &:where(:has(.input:disabled)) { 19 | background-color: var(--input-disabled-color); 20 | } 21 | } 22 | @supports not selector(:has(*)) { 23 | &:where(:focus-within) { 24 | outline: 2px solid var(--input-ring-color); 25 | outline-offset: -1px; 26 | } 27 | } 28 | } 29 | 30 | .input { 31 | width: 100%; 32 | display: flex; 33 | align-items: center; 34 | text-align: inherit; 35 | 36 | outline: 1px solid transparent; 37 | border: none; 38 | 39 | font-size: var(--font-size); 40 | font-weight: var(--font-weight); 41 | 42 | /* 기본 취소 버튼 제거 */ 43 | &::-webkit-search-cancel-button { 44 | appearance: none; 45 | } 46 | 47 | @supports selector(:has(*)) { 48 | &:where(:autofill, [data-com-onepassword-filled]) { 49 | background-clip: text; 50 | -webkit-text-fill-color: var(--gray-12); 51 | } 52 | } 53 | 54 | @supports selector(:has(*)) { 55 | &:where(:disabled) { 56 | background-color: transparent; 57 | } 58 | } 59 | } 60 | 61 | .input-action { 62 | all: unset; 63 | 64 | width: var(--action-size); 65 | height: var(--action-size); 66 | 67 | display: flex; 68 | justify-content: center; 69 | align-items: center; 70 | border-radius: var(--input-border-radius); 71 | 72 | @supports selector(:has(*)) { 73 | &:focus { 74 | outline: 2px solid var(--input-ring-color); 75 | outline-offset: 3px; 76 | } 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /packages/input/src/constants/colors.ts: -------------------------------------------------------------------------------- 1 | export type ColorKeys = keyof typeof colors; 2 | export const colors = { 3 | inputRing: '#2B2B2B', 4 | defaultInputOutline: '#adadad', 5 | disabledBackground: '#BBBBBB', 6 | } as const; 7 | -------------------------------------------------------------------------------- /packages/input/src/constants/spacing.ts: -------------------------------------------------------------------------------- 1 | export type SpacingKeys = keyof typeof spacing; 2 | export const spacing = { 3 | defaultInputPadding: '8px', 4 | defaultBorderRadius: '8px', 5 | defaultActionSize: '24px', 6 | } as const; 7 | -------------------------------------------------------------------------------- /packages/input/src/constants/typhography.ts: -------------------------------------------------------------------------------- 1 | export type FontSize = 12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | 36 | 48; 2 | export type FontWeight = keyof typeof Weight; 3 | 4 | export const defaultFontSize: FontSize = 16; 5 | export const defaultFontWeight: FontWeight = 'regular'; 6 | 7 | export const Weight = { 8 | regular: 400, 9 | medium: 500, 10 | semiBold: 600, 11 | bold: 700, 12 | } as const; 13 | -------------------------------------------------------------------------------- /packages/input/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Input'; 2 | -------------------------------------------------------------------------------- /packages/input/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "exclude": ["dist"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/input/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import defaultConfig from '../../tsup.config'; 2 | 3 | export default defaultConfig; 4 | -------------------------------------------------------------------------------- /packages/input/vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineProject, mergeConfig } from 'vitest/config'; 2 | import defaultConfig from '../../vitest.config'; 3 | 4 | export default mergeConfig( 5 | defaultConfig, 6 | defineProject({ 7 | test: { 8 | setupFiles: './vitest.setup.ts', 9 | }, 10 | }), 11 | ); 12 | -------------------------------------------------------------------------------- /packages/input/vitest.setup.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /packages/plugin-figma-codegen/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sipe-team/plugin-figma-codegen", 3 | "api": "1.0.0", 4 | "capabilities": ["codegen", "vscode"], 5 | "codegenLanguages": [{ "label": "React", "value": "react" }], 6 | "editorType": ["dev"], 7 | "id": "1477931843428059075", 8 | "main": "dist/index.js" 9 | } 10 | -------------------------------------------------------------------------------- /packages/plugin-figma-codegen/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sipe-team/plugin-figma-codegen", 3 | "description": "Figma codegen plugin for Sipe Design System", 4 | "version": "0.0.0", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/sipe-team/side" 9 | }, 10 | "type": "module", 11 | "exports": "./src/index.ts", 12 | "files": ["dist", "manifest.json"], 13 | "scripts": { 14 | "build": "tsup", 15 | "dev": "pnpm build --watch", 16 | "lint": "biome lint .", 17 | "typecheck": "tsc", 18 | "prepack": "pnpm run build" 19 | }, 20 | "devDependencies": { 21 | "@figma/plugin-typings": "^1.108.0", 22 | "tsup": "catalog:", 23 | "typescript": "catalog:" 24 | }, 25 | "publishConfig": { 26 | "access": "public", 27 | "registry": "https://npm.pkg.github.com", 28 | "exports": { 29 | ".": { 30 | "types": "./dist/index.d.ts", 31 | "default": "./dist/index.js" 32 | } 33 | } 34 | }, 35 | "sideEffects": false 36 | } 37 | -------------------------------------------------------------------------------- /packages/plugin-figma-codegen/src/index.ts: -------------------------------------------------------------------------------- 1 | if (figma.editorType !== 'dev' || figma.mode !== 'codegen') { 2 | figma.closePlugin(); 3 | } 4 | 5 | figma.codegen.on('generate', async ({ node }) => { 6 | const ComponentName = node.name; 7 | 8 | if (node.type === 'INSTANCE') { 9 | const props = node.componentProperties; 10 | const result = Object.entries(props).map(([name, { value }]) => `${name}="${value}"`); 11 | 12 | return [ 13 | { 14 | title: ComponentName, 15 | language: 'TYPESCRIPT', 16 | code: `<${ComponentName} ${result.join(' ')} />`, 17 | }, 18 | ]; 19 | } 20 | 21 | return []; 22 | }); 23 | -------------------------------------------------------------------------------- /packages/plugin-figma-codegen/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "typeRoots": ["./node_modules/@types", "./node_modules/@figma"] 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/plugin-figma-codegen/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup'; 2 | 3 | export default defineConfig({ 4 | entry: ['src/index.ts'], 5 | clean: true, 6 | dts: true, 7 | format: 'esm', 8 | }); 9 | -------------------------------------------------------------------------------- /packages/radio/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-vite'; 2 | 3 | export default { 4 | stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], 5 | addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'], 6 | framework: { 7 | name: '@storybook/react-vite', 8 | options: {}, 9 | }, 10 | } satisfies StorybookConfig; 11 | -------------------------------------------------------------------------------- /packages/radio/.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/react'; 2 | 3 | export default { 4 | tags: ['autodocs'], 5 | } satisfies Preview; 6 | -------------------------------------------------------------------------------- /packages/radio/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @sipe-team/radio 2 | 3 | ## 0.1.0 4 | 5 | ### Minor Changes 6 | 7 | - a662b09: fix: rename radio-group into radio 8 | 9 | ## 0.0.3 10 | 11 | ### Patch Changes 12 | 13 | - 235be5d: fix: add react-dom into peerDependencies 14 | 15 | ## 0.0.2 16 | 17 | ### Patch Changes 18 | 19 | - f425309: fix: exports 20 | - f425309: fix: styles.css 21 | 22 | ## 0.0.2-next.1 23 | 24 | ### Patch Changes 25 | 26 | - fix: exports 27 | 28 | ## 0.0.2-next.0 29 | 30 | ### Patch Changes 31 | 32 | - 27c312a: fix: styles.css 33 | 34 | ## 0.0.1 35 | 36 | ### Patch Changes 37 | 38 | - e6f76c0: fix: css module bundle 39 | -------------------------------------------------------------------------------- /packages/radio/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.module.css'; 2 | -------------------------------------------------------------------------------- /packages/radio/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sipe-team/radio", 3 | "description": "Radio component for Sipe Design System", 4 | "version": "0.1.0", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/sipe-team/side" 9 | }, 10 | "type": "module", 11 | "exports": "./src/index.ts", 12 | "files": [ 13 | "dist" 14 | ], 15 | "scripts": { 16 | "build": "tsup", 17 | "build:storybook": "storybook build", 18 | "dev:storybook": "storybook dev -p 6006", 19 | "lint:biome": "pnpm exec biome lint", 20 | "lint:eslint": "pnpm exec eslint", 21 | "test": "vitest", 22 | "typecheck": "tsc", 23 | "prepack": "pnpm run build" 24 | }, 25 | "devDependencies": { 26 | "@storybook/addon-essentials": "catalog:", 27 | "@storybook/addon-interactions": "catalog:", 28 | "@storybook/addon-links": "catalog:", 29 | "@storybook/blocks": "catalog:", 30 | "@storybook/react": "catalog:", 31 | "@storybook/react-vite": "catalog:", 32 | "@storybook/test": "catalog:", 33 | "@testing-library/dom": "^10.4.0", 34 | "@testing-library/jest-dom": "^6.6.3", 35 | "@testing-library/react": "^16.0.1", 36 | "@types/react": "^18.3.12", 37 | "@types/react-dom": "^18.3.1", 38 | "happy-dom": "catalog:", 39 | "react": "^18.3.1", 40 | "react-dom": "^18.3.1", 41 | "storybook": "catalog:", 42 | "tsup": "catalog:", 43 | "typescript": "catalog:", 44 | "vitest": "catalog:" 45 | }, 46 | "peerDependencies": { 47 | "react": ">= 18", 48 | "react-dom": ">= 18" 49 | }, 50 | "publishConfig": { 51 | "access": "public", 52 | "exports": { 53 | ".": { 54 | "import": { 55 | "types": "./dist/index.d.ts", 56 | "default": "./dist/index.js" 57 | }, 58 | "require": { 59 | "types": "./dist/index.d.cts", 60 | "default": "./dist/index.cjs" 61 | } 62 | }, 63 | "./styles.css": "./dist/index.css" 64 | } 65 | }, 66 | "sideEffects": false 67 | } 68 | -------------------------------------------------------------------------------- /packages/radio/src/Radio.tsx: -------------------------------------------------------------------------------- 1 | import { type CSSProperties, type ComponentProps, type PropsWithChildren, useContext } from 'react'; 2 | import { RadioGroupContext } from './RadioGroup'; 3 | import styles from './RadioGroup.module.css'; 4 | 5 | type RadioProps = PropsWithChildren< 6 | ComponentProps<'input'> & { 7 | size?: 'small' | 'medium' | 'large'; 8 | } 9 | >; 10 | 11 | export function Radio({ value, defaultChecked, disabled = false, children }: RadioProps) { 12 | const groupContext = useContext(RadioGroupContext); 13 | 14 | const sizeMap = { 15 | small: '12px', 16 | medium: '16px', 17 | large: '20px', 18 | }; 19 | 20 | const style = { 21 | width: sizeMap[groupContext.size ?? 'medium'], 22 | height: sizeMap[groupContext.size ?? 'medium'], 23 | } as CSSProperties; 24 | 25 | return ( 26 | 40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /packages/radio/src/RadioGroup.module.css: -------------------------------------------------------------------------------- 1 | .radioGroup { 2 | display: flex; 3 | flex-direction: column; 4 | border: none; 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | .radioGroup legend { 10 | padding: 0; 11 | margin: 0; 12 | } 13 | 14 | .radioContainer { 15 | display: flex; 16 | align-items: center; 17 | padding: 6px 0; 18 | } 19 | 20 | .radioIndicator { 21 | vertical-align: middle; 22 | margin: 0; 23 | } 24 | 25 | .radioLabelText { 26 | vertical-align: middle; 27 | margin-left: 4px; 28 | } 29 | -------------------------------------------------------------------------------- /packages/radio/src/RadioGroup.tsx: -------------------------------------------------------------------------------- 1 | import { type PropsWithChildren, createContext, useId } from 'react'; 2 | import styles from './RadioGroup.module.css'; 3 | 4 | /** 5 | * ================================================================ 6 | * RadioGroup Provider 7 | * ================================================================ 8 | */ 9 | type RadioGroupContext = Omit; 10 | 11 | export const RadioGroupContext = createContext({}); 12 | 13 | /** 14 | * ================================================================ 15 | * RadioGroup 16 | * ================================================================ 17 | */ 18 | 19 | type RadioSize = 'small' | 'medium' | 'large'; 20 | 21 | type RadioGroupProps = PropsWithChildren<{ 22 | defaultValue?: string; 23 | value?: string; 24 | onChangeValue?: (value: string) => void; 25 | 26 | labelText?: string; 27 | name?: string; 28 | 29 | size?: RadioSize; 30 | disabled?: boolean; 31 | }>; 32 | 33 | export function RadioGroup({ 34 | labelText = '', 35 | size = 'medium', 36 | disabled = false, 37 | children, 38 | name: propName, 39 | ...rest 40 | }: RadioGroupProps) { 41 | const fallbackId = useId(); 42 | const name = propName ?? fallbackId; 43 | 44 | return ( 45 |
46 | {labelText} 47 | 48 | {children} 49 |
50 | ); 51 | } 52 | -------------------------------------------------------------------------------- /packages/radio/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Radio'; 2 | export * from './RadioGroup'; 3 | -------------------------------------------------------------------------------- /packages/radio/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/radio/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import defaultConfig from '../../tsup.config'; 2 | 3 | export default defaultConfig; 4 | -------------------------------------------------------------------------------- /packages/radio/vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineProject, mergeConfig } from 'vitest/config'; 2 | import defaultConfig from '../../vitest.config'; 3 | 4 | export default mergeConfig( 5 | defaultConfig, 6 | defineProject({ 7 | test: { 8 | setupFiles: './vitest.setup.ts', 9 | }, 10 | }), 11 | ); 12 | -------------------------------------------------------------------------------- /packages/radio/vitest.setup.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /packages/reset/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-vite'; 2 | 3 | export default { 4 | stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], 5 | addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'], 6 | framework: { 7 | name: '@storybook/react-vite', 8 | options: {}, 9 | }, 10 | } satisfies StorybookConfig; 11 | -------------------------------------------------------------------------------- /packages/reset/.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/react'; 2 | 3 | export default { 4 | tags: ['autodocs'], 5 | } satisfies Preview; 6 | -------------------------------------------------------------------------------- /packages/reset/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @sipe-team/reset 2 | 3 | ## 0.1.1 4 | 5 | ### Patch Changes 6 | 7 | - 235be5d: fix: add react-dom into peerDependencies 8 | 9 | ## 0.1.0 10 | 11 | ### Minor Changes 12 | 13 | - 63ab3b2: feat(reset): Create base CSS reset package 14 | -------------------------------------------------------------------------------- /packages/reset/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.module.css'; 2 | -------------------------------------------------------------------------------- /packages/reset/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sipe-team/reset", 3 | "description": "Reset for Sipe Design System", 4 | "version": "0.1.1", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/sipe-team/side" 9 | }, 10 | "type": "module", 11 | "exports": "./src/index.ts", 12 | "files": [ 13 | "dist" 14 | ], 15 | "scripts": { 16 | "build": "tsup", 17 | "build:storybook": "storybook build", 18 | "dev:storybook": "storybook dev -p 6006", 19 | "lint:biome": "pnpm exec biome lint", 20 | "lint:eslint": "pnpm exec eslint", 21 | "test": "vitest", 22 | "typecheck": "tsc", 23 | "prepack": "pnpm run build" 24 | }, 25 | "dependencies": { 26 | "@radix-ui/react-slot": "^1.1.0", 27 | "classnames": "^2.5.1" 28 | }, 29 | "devDependencies": { 30 | "@storybook/addon-essentials": "catalog:", 31 | "@storybook/addon-interactions": "catalog:", 32 | "@storybook/addon-links": "catalog:", 33 | "@storybook/blocks": "catalog:", 34 | "@storybook/react": "catalog:", 35 | "@storybook/react-vite": "catalog:", 36 | "@storybook/test": "catalog:", 37 | "@testing-library/jest-dom": "catalog:", 38 | "@testing-library/react": "catalog:", 39 | "@types/react": "^18.3.12", 40 | "happy-dom": "catalog:", 41 | "react": "^18.3.1", 42 | "storybook": "catalog:", 43 | "tsup": "catalog:", 44 | "typescript": "catalog:", 45 | "vitest": "catalog:" 46 | }, 47 | "peerDependencies": { 48 | "react": ">= 18", 49 | "react-dom": ">= 18" 50 | }, 51 | "publishConfig": { 52 | "access": "public", 53 | "registry": "https://npm.pkg.github.com", 54 | "exports": { 55 | ".": { 56 | "import": { 57 | "types": "./dist/index.d.ts", 58 | "default": "./dist/index.js" 59 | }, 60 | "require": { 61 | "types": "./dist/index.d.cts", 62 | "default": "./dist/index.cjs" 63 | } 64 | } 65 | } 66 | }, 67 | "sideEffects": false 68 | } 69 | -------------------------------------------------------------------------------- /packages/reset/src/Reset.module.css: -------------------------------------------------------------------------------- 1 | /************************* 2 | * Box Model Reset 3 | *************************/ 4 | .reset *, 5 | .reset *::before, 6 | .reset *::after, 7 | .reset *::backdrop { 8 | box-sizing: border-box; 9 | margin: 0; 10 | padding: 0; 11 | border-width: 0; 12 | border-style: solid; 13 | } 14 | 15 | /************************* 16 | * Typography Reset 17 | *************************/ 18 | .reset :where(p, h1, h2, h3, h4, h5, h6) { 19 | overflow-wrap: break-word; 20 | } 21 | 22 | /************************* 23 | * Form Elements Reset 24 | *************************/ 25 | .reset :where(button, input, select, textarea) { 26 | -webkit-appearance: none; 27 | appearance: none; 28 | background: none; 29 | border: 0; 30 | color: inherit; 31 | font: inherit; 32 | } 33 | 34 | .reset :where(button, [type="button"], [type="reset"], [type="submit"]) { 35 | -webkit-appearance: button; 36 | cursor: pointer; 37 | user-select: none; 38 | } 39 | 40 | .reset :where(textarea) { 41 | resize: vertical; 42 | } 43 | 44 | .reset ::placeholder { 45 | opacity: 1; 46 | } 47 | 48 | /************************* 49 | * Table Reset 50 | *************************/ 51 | .reset :where(table) { 52 | border-collapse: collapse; 53 | border-spacing: 0; 54 | text-indent: 0; 55 | } 56 | 57 | .reset :where(th) { 58 | text-align: inherit; 59 | } 60 | 61 | /************************* 62 | * Semantic Elements Reset 63 | *************************/ 64 | .reset :where(article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main) { 65 | display: block; 66 | } 67 | 68 | /************************* 69 | * Media Elements Reset 70 | *************************/ 71 | .reset :where(img, picture, video, canvas, svg) { 72 | display: block; 73 | max-width: 100%; 74 | } 75 | 76 | /************************* 77 | * Lists & Links Reset 78 | *************************/ 79 | .reset :where(ol, ul) { 80 | list-style: none; 81 | } 82 | 83 | .reset :where(a) { 84 | color: inherit; 85 | text-decoration: none; 86 | } 87 | -------------------------------------------------------------------------------- /packages/reset/src/Reset.tsx: -------------------------------------------------------------------------------- 1 | import { Slot } from '@radix-ui/react-slot'; 2 | import classNames from 'classnames'; 3 | import { type ComponentPropsWithoutRef, forwardRef } from 'react'; 4 | import styles from './Reset.module.css'; 5 | 6 | export interface ResetProps extends ComponentPropsWithoutRef<'div'> { 7 | asChild?: boolean; 8 | } 9 | 10 | export const Reset = forwardRef( 11 | ({ asChild = false, children, className, ...props }, ref) => { 12 | const Component = asChild ? Slot : 'div'; 13 | 14 | return ( 15 | 16 | {children} 17 | 18 | ); 19 | }, 20 | ); 21 | 22 | Reset.displayName = 'Reset'; 23 | -------------------------------------------------------------------------------- /packages/reset/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Reset'; 2 | -------------------------------------------------------------------------------- /packages/reset/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/reset/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup'; 2 | 3 | export default defineConfig({ 4 | entry: ['src/index.ts'], 5 | clean: true, 6 | dts: true, 7 | format: ['esm', 'cjs'], 8 | }); 9 | -------------------------------------------------------------------------------- /packages/reset/vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineProject, mergeConfig } from 'vitest/config'; 2 | import defaultConfig from '../../vitest.config'; 3 | 4 | export default mergeConfig( 5 | defaultConfig, 6 | defineProject({ 7 | test: { 8 | setupFiles: './vitest.setup.ts', 9 | }, 10 | }), 11 | ); 12 | -------------------------------------------------------------------------------- /packages/reset/vitest.setup.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /packages/side/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sipe-team/side", 3 | "description": "Sipe Design System", 4 | "version": "0.2.5", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/sipe-team/side" 9 | }, 10 | "type": "module", 11 | "exports": "./src/index.ts", 12 | "files": [ 13 | "dist", 14 | "styles.css" 15 | ], 16 | "scripts": { 17 | "build": "tsup", 18 | "prepack": "pnpm run build" 19 | }, 20 | "dependencies": { 21 | "@sipe-team/badge": "workspace:*", 22 | "@sipe-team/button": "workspace:*", 23 | "@sipe-team/card": "workspace:*", 24 | "@sipe-team/divider": "workspace:*", 25 | "@sipe-team/input": "workspace:*", 26 | "@sipe-team/radio": "workspace:*", 27 | "@sipe-team/skeleton": "workspace:*", 28 | "@sipe-team/switch": "workspace:*", 29 | "@sipe-team/tokens": "workspace:*", 30 | "@sipe-team/tooltip": "workspace:*", 31 | "@sipe-team/typography": "workspace:*", 32 | "@sipe-team/flex": "workspace:*" 33 | }, 34 | "devDependencies": { 35 | "tsup": "catalog:", 36 | "typescript": "catalog:" 37 | }, 38 | "peerDependencies": { 39 | "react": ">= 18", 40 | "react-dom": ">= 18" 41 | }, 42 | "publishConfig": { 43 | "access": "public", 44 | "exports": { 45 | ".": { 46 | "import": { 47 | "types": "./dist/index.d.ts", 48 | "default": "./dist/index.js" 49 | }, 50 | "require": { 51 | "types": "./dist/index.d.cts", 52 | "default": "./dist/index.cjs" 53 | } 54 | }, 55 | "./styles.css": "./styles.css" 56 | } 57 | }, 58 | "sideEffects": false 59 | } 60 | -------------------------------------------------------------------------------- /packages/side/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from '@sipe-team/badge'; 2 | export * from '@sipe-team/button'; 3 | export * from '@sipe-team/card'; 4 | export * from '@sipe-team/divider'; 5 | export * from '@sipe-team/input'; 6 | export * from '@sipe-team/radio'; 7 | export * from '@sipe-team/skeleton'; 8 | export * from '@sipe-team/switch'; 9 | export * from '@sipe-team/tokens'; 10 | export * from '@sipe-team/tooltip'; 11 | export * from '@sipe-team/typography'; 12 | export * from '@sipe-team/flex'; 13 | -------------------------------------------------------------------------------- /packages/side/styles.css: -------------------------------------------------------------------------------- 1 | @import "~@sipe-team/badge/styles.css"; 2 | @import "~@sipe-team/button/styles.css"; 3 | @import "~@sipe-team/card/styles.css"; 4 | @import "~@sipe-team/divider/styles.css"; 5 | @import "~@sipe-team/flex/styles.css"; 6 | @import "~@sipe-team/input/styles.css"; 7 | @import "~@sipe-team/radio/styles.css"; 8 | @import "~@sipe-team/skeleton/styles.css"; 9 | @import "~@sipe-team/switch/styles.css"; 10 | @import "~@sipe-team/tooltip/styles.css"; 11 | @import "~@sipe-team/typography/styles.css"; 12 | -------------------------------------------------------------------------------- /packages/side/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/side/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup'; 2 | 3 | export default defineConfig({ 4 | entry: ['src/index.ts'], 5 | clean: true, 6 | dts: true, 7 | format: ['esm', 'cjs'], 8 | }); 9 | -------------------------------------------------------------------------------- /packages/skeleton/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-vite'; 2 | 3 | export default { 4 | stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], 5 | addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'], 6 | framework: { 7 | name: '@storybook/react-vite', 8 | options: {}, 9 | }, 10 | } satisfies StorybookConfig; 11 | -------------------------------------------------------------------------------- /packages/skeleton/.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/react'; 2 | 3 | export default { 4 | tags: ['autodocs'], 5 | } satisfies Preview; 6 | -------------------------------------------------------------------------------- /packages/skeleton/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @sipe-team/skeleton 2 | 3 | ## 0.0.3 4 | 5 | ### Patch Changes 6 | 7 | - 235be5d: fix: add react-dom into peerDependencies 8 | 9 | ## 0.0.2 10 | 11 | ### Patch Changes 12 | 13 | - f425309: fix: exports 14 | - f425309: fix: styles.css 15 | 16 | ## 0.0.2-next.1 17 | 18 | ### Patch Changes 19 | 20 | - fix: exports 21 | 22 | ## 0.0.2-next.0 23 | 24 | ### Patch Changes 25 | 26 | - 27c312a: fix: styles.css 27 | 28 | ## 0.0.1 29 | 30 | ### Patch Changes 31 | 32 | - e6f76c0: fix: css module bundle 33 | -------------------------------------------------------------------------------- /packages/skeleton/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.module.css'; 2 | -------------------------------------------------------------------------------- /packages/skeleton/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sipe-team/skeleton", 3 | "description": "Skeleton component for Sipe Design System", 4 | "version": "0.0.3", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/sipe-team/side" 9 | }, 10 | "type": "module", 11 | "exports": "./src/index.ts", 12 | "files": [ 13 | "dist" 14 | ], 15 | "scripts": { 16 | "build": "tsup", 17 | "build:storybook": "storybook build", 18 | "dev:storybook": "storybook dev -p 6006", 19 | "lint:biome": "pnpm exec biome lint", 20 | "lint:eslint": "pnpm exec eslint", 21 | "test": "vitest", 22 | "typecheck": "tsc", 23 | "prepack": "pnpm run build" 24 | }, 25 | "dependencies": { 26 | "@radix-ui/react-slot": "^1.1.0" 27 | }, 28 | "devDependencies": { 29 | "@faker-js/faker": "^9.2.0", 30 | "@storybook/addon-essentials": "catalog:", 31 | "@storybook/addon-interactions": "catalog:", 32 | "@storybook/addon-links": "catalog:", 33 | "@storybook/blocks": "catalog:", 34 | "@storybook/react": "catalog:", 35 | "@storybook/react-vite": "catalog:", 36 | "@storybook/test": "catalog:", 37 | "@testing-library/jest-dom": "^6.6.3", 38 | "@testing-library/react": "^16.0.1", 39 | "@types/react": "^18.3.12", 40 | "happy-dom": "catalog:", 41 | "react": "^18.3.1", 42 | "react-dom": "^18.3.1", 43 | "storybook": "catalog:", 44 | "tsup": "catalog:", 45 | "typescript": "catalog:", 46 | "vitest": "catalog:" 47 | }, 48 | "peerDependencies": { 49 | "react": ">= 18", 50 | "react-dom": ">= 18" 51 | }, 52 | "publishConfig": { 53 | "access": "public", 54 | "registry": "https://npm.pkg.github.com", 55 | "exports": { 56 | ".": { 57 | "import": { 58 | "types": "./dist/index.d.ts", 59 | "default": "./dist/index.js" 60 | }, 61 | "require": { 62 | "types": "./dist/index.d.cts", 63 | "default": "./dist/index.cjs" 64 | } 65 | }, 66 | "./styles.css": "./dist/index.css" 67 | } 68 | }, 69 | "sideEffects": false 70 | } 71 | -------------------------------------------------------------------------------- /packages/skeleton/src/Skeleton.module.css: -------------------------------------------------------------------------------- 1 | @keyframes fadeInOut { 2 | 0% { 3 | opacity: 1; 4 | } 5 | 50% { 6 | opacity: 0.8; 7 | } 8 | 100% { 9 | opacity: 1; 10 | } 11 | } 12 | 13 | 14 | .skeleton{ 15 | animation: fadeInOut 1.5s infinite !important; 16 | width: var(--width); 17 | height: var(--height); 18 | background-color: rgb(155, 155, 155); 19 | 20 | background-image: none !important; 21 | background-clip: border-box !important; 22 | border: none !important; 23 | box-shadow: none !important; 24 | box-decoration-break: clone !important; 25 | color: transparent !important; 26 | outline: none !important; 27 | pointer-events: none !important; 28 | user-select: none !important; 29 | cursor: default !important; 30 | } -------------------------------------------------------------------------------- /packages/skeleton/src/Skeleton.stories.tsx: -------------------------------------------------------------------------------- 1 | import { faker } from '@faker-js/faker'; 2 | // Skeleton.stories.tsx 3 | import type { Meta, StoryObj } from '@storybook/react'; 4 | import { Skeleton } from './Skeleton'; 5 | 6 | const meta = { 7 | title: 'Components/Skeleton', 8 | component: Skeleton, 9 | parameters: { 10 | layout: 'centered', 11 | }, 12 | argTypes: { 13 | variant: { 14 | control: 'select', 15 | options: ['circle', 'rectangular'], 16 | }, 17 | width: { 18 | control: { type: 'number', min: 20, max: 200, step: 10 }, 19 | }, 20 | height: { 21 | control: { type: 'number', min: 20, max: 200, step: 10 }, 22 | }, 23 | loading: { 24 | control: 'boolean', 25 | }, 26 | asChild: { 27 | control: 'boolean', 28 | }, 29 | }, 30 | } satisfies Meta; 31 | 32 | export default meta; 33 | 34 | type Story = StoryObj; 35 | 36 | export const Basic: Story = { 37 | args: { 38 | loading: true, 39 | variant: 'rectangular', 40 | width: 100, 41 | height: 100, 42 | }, 43 | }; 44 | 45 | export const CircleSkeleton: Story = { 46 | args: { 47 | loading: true, 48 | variant: 'circle', 49 | width: 80, 50 | height: 80, 51 | }, 52 | }; 53 | 54 | export const RectangularSkeleton: Story = { 55 | args: { 56 | loading: true, 57 | variant: 'rectangular', 58 | width: 80, 59 | height: 30, 60 | }, 61 | }; 62 | 63 | export const SkeletonWithChildren: Story = { 64 | args: { 65 | loading: true, 66 | asChild: true, 67 | children: , 68 | variant: 'rectangular', 69 | }, 70 | }; 71 | 72 | export const SkeletonWithText: Story = { 73 | args: { 74 | loading: true, 75 | asChild: true, 76 | children: {faker.lorem.lines(2)}, 77 | variant: 'rectangular', 78 | }, 79 | }; 80 | -------------------------------------------------------------------------------- /packages/skeleton/src/Skeleton.test.tsx: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import { expect, test } from 'vitest'; 3 | import { Skeleton } from './Skeleton'; 4 | 5 | test('loading이 true 일 때 스켈레톤이 렌더링 된다.', () => { 6 | render(); 7 | 8 | const skeleton = screen.getByLabelText('skeleton'); 9 | expect(skeleton).toBeInTheDocument(); 10 | }); 11 | 12 | test('loading이 false 일 때 children이 렌더링 된다.', () => { 13 | render(Childrun); 14 | 15 | expect(screen.getByText('Childrun')).toBeInTheDocument(); 16 | }); 17 | 18 | test('variant가 circle일 때 borderRadius가 50%로 설정된다.', () => { 19 | render(); 20 | 21 | const skeleton = screen.getByLabelText('skeleton'); 22 | expect(skeleton).toHaveStyle({ borderRadius: '50%' }); 23 | }); 24 | test('variant가 rectangular일 때 borderRadius가 기본값 4px으로 설정된다.', () => { 25 | render( 26 | , 27 | ); 28 | 29 | const skeleton = screen.getByLabelText('skeleton'); 30 | expect(skeleton).toHaveStyle({ borderRadius: '4px' }); 31 | }); 32 | test('width와 height가 props로 전달될 때 올바르게 스타일이 적용된다.', () => { 33 | render( 34 | , 35 | ); 36 | 37 | const skeleton = screen.getByLabelText('skeleton'); 38 | expect(skeleton).toHaveStyle({ width: '150px', height: '50px' }); 39 | }); 40 | 41 | test('asChild가 true일 때, children으로 전달된 요소에 Skeleton 스타일을 적용한다.', () => { 42 | render( 43 | 44 | Child Content 45 | , 46 | ); 47 | 48 | const child = screen.getByTestId('child'); 49 | expect(child).toBeInTheDocument(); 50 | expect(child).toHaveStyle({ 51 | 'background-color': 'rgb(155, 155, 155)', 52 | width: '120px', 53 | height: '30px', 54 | }); 55 | }); 56 | -------------------------------------------------------------------------------- /packages/skeleton/src/Skeleton.tsx: -------------------------------------------------------------------------------- 1 | import { Slot } from '@radix-ui/react-slot'; 2 | import { 3 | type CSSProperties, 4 | type ComponentProps, 5 | type ForwardedRef, 6 | forwardRef, 7 | } from 'react'; 8 | import styles from './Skeleton.module.css'; 9 | 10 | type Variant = 'circle' | 'rectangular'; 11 | 12 | interface SkeletonProps extends ComponentProps<'div'> { 13 | asChild?: boolean; 14 | loading: boolean; 15 | variant?: Variant; 16 | width?: number; 17 | height?: number; 18 | } 19 | export const Skeleton = forwardRef(function Skeleton( 20 | { asChild, loading, children, ...props }: SkeletonProps, 21 | ref: ForwardedRef, 22 | ) { 23 | if (!loading) return children; 24 | 25 | const Component = asChild ? Slot : 'div'; 26 | 27 | const style = { 28 | '--width': props.width ? `${props.width}px` : 'auto', 29 | '--height': props.height ? `${props.height}px` : 'auto', 30 | borderRadius: props.variant === 'circle' ? '50%' : '4px', 31 | } as CSSProperties; 32 | 33 | return ( 34 | 35 | {children} 36 | 37 | ); 38 | }); 39 | Skeleton.displayName = 'Skeleton'; 40 | -------------------------------------------------------------------------------- /packages/skeleton/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Skeleton'; 2 | -------------------------------------------------------------------------------- /packages/skeleton/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/skeleton/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import defaultConfig from '../../tsup.config'; 2 | 3 | export default defaultConfig; 4 | -------------------------------------------------------------------------------- /packages/skeleton/vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineProject, mergeConfig } from 'vitest/config'; 2 | import defaultConfig from '../../vitest.config'; 3 | 4 | export default mergeConfig( 5 | defaultConfig, 6 | defineProject({ 7 | test: { 8 | setupFiles: './vitest.setup.ts', 9 | }, 10 | }), 11 | ); 12 | -------------------------------------------------------------------------------- /packages/skeleton/vitest.setup.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /packages/switch/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-vite'; 2 | 3 | export default { 4 | stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], 5 | addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'], 6 | framework: { 7 | name: '@storybook/react-vite', 8 | options: {}, 9 | }, 10 | } satisfies StorybookConfig; 11 | -------------------------------------------------------------------------------- /packages/switch/.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/react'; 2 | 3 | export default { 4 | tags: ['autodocs'], 5 | } satisfies Preview; 6 | -------------------------------------------------------------------------------- /packages/switch/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @sipe-team/switch 2 | 3 | ## 0.0.3 4 | 5 | ### Patch Changes 6 | 7 | - 235be5d: fix: add react-dom into peerDependencies 8 | - @sipe-team/tokens@0.1.0 9 | 10 | ## 0.0.2 11 | 12 | ### Patch Changes 13 | 14 | - f425309: fix: exports 15 | - f425309: fix: styles.css 16 | - @sipe-team/tokens@0.1.0 17 | 18 | ## 0.0.2-next.1 19 | 20 | ### Patch Changes 21 | 22 | - fix: exports 23 | - @sipe-team/tokens@0.1.0 24 | 25 | ## 0.0.2-next.0 26 | 27 | ### Patch Changes 28 | 29 | - 27c312a: fix: styles.css 30 | - @sipe-team/tokens@0.1.0 31 | 32 | ## 0.0.1 33 | 34 | ### Patch Changes 35 | 36 | - e6f76c0: fix: css module bundle 37 | - @sipe-team/tokens@0.1.0 38 | -------------------------------------------------------------------------------- /packages/switch/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.module.css'; 2 | -------------------------------------------------------------------------------- /packages/switch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sipe-team/switch", 3 | "description": "Switch component for Sipe Design System", 4 | "version": "0.0.3", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/sipe-team/side" 9 | }, 10 | "type": "module", 11 | "exports": "./src/index.ts", 12 | "files": [ 13 | "dist" 14 | ], 15 | "scripts": { 16 | "build": "tsup", 17 | "build:storybook": "storybook build", 18 | "dev:storybook": "storybook dev -p 6006", 19 | "lint:biome": "pnpm exec biome lint", 20 | "lint:eslint": "pnpm exec eslint", 21 | "test": "vitest", 22 | "typecheck": "tsc", 23 | "prepack": "pnpm run build" 24 | }, 25 | "dependencies": { 26 | "@sipe-team/tokens": "workspace:^", 27 | "clsx": "^2.1.1" 28 | }, 29 | "devDependencies": { 30 | "@faker-js/faker": "^9.2.0", 31 | "@storybook/addon-essentials": "catalog:", 32 | "@storybook/addon-interactions": "catalog:", 33 | "@storybook/addon-links": "catalog:", 34 | "@storybook/blocks": "catalog:", 35 | "@storybook/react": "catalog:", 36 | "@storybook/react-vite": "catalog:", 37 | "@storybook/test": "catalog:", 38 | "@testing-library/jest-dom": "^6.6.3", 39 | "@testing-library/react": "^16.0.1", 40 | "@testing-library/user-event": "^14.5.2", 41 | "@types/react": "^18.3.12", 42 | "happy-dom": "catalog:", 43 | "react": "^18.3.1", 44 | "react-dom": "^18.3.1", 45 | "storybook": "catalog:", 46 | "tsup": "catalog:", 47 | "typescript": "catalog:", 48 | "vitest": "catalog:" 49 | }, 50 | "peerDependencies": { 51 | "react": ">= 18", 52 | "react-dom": ">= 18" 53 | }, 54 | "publishConfig": { 55 | "access": "public", 56 | "exports": { 57 | ".": { 58 | "import": { 59 | "types": "./dist/index.d.ts", 60 | "default": "./dist/index.js" 61 | }, 62 | "require": { 63 | "types": "./dist/index.d.cts", 64 | "default": "./dist/index.cjs" 65 | } 66 | }, 67 | "./styles.css": "./dist/index.css" 68 | } 69 | }, 70 | "sideEffects": false 71 | } 72 | -------------------------------------------------------------------------------- /packages/switch/src/Switch.module.css: -------------------------------------------------------------------------------- 1 | .switch-wrapper { 2 | display: flex; 3 | align-items: center; 4 | } 5 | 6 | .switch-input { 7 | border: 0px; 8 | clip: rect(0px, 0px, 0px, 0px); 9 | height: 1px; 10 | margin: -1px; 11 | overflow: hidden; 12 | padding: 0px; 13 | position: absolute; 14 | width: 1px; 15 | white-space: nowrap; 16 | overflow-wrap: normal; 17 | } 18 | 19 | .switch-track { 20 | position: relative; 21 | display: inline-flex; 22 | justify-content: flex-start; 23 | align-items: center; 24 | flex-shrink: 0; 25 | border-radius: var(--switch-border-radius); 26 | width: var(--switch-width); 27 | height: var(--switch-height); 28 | background: var(--switch-background-color); 29 | cursor: pointer; 30 | 31 | &[data-disabled] { 32 | opacity: 0.5; 33 | cursor: not-allowed; 34 | } 35 | 36 | &[data-state='checked'] { 37 | background: var(--switch-checked-background-color); 38 | } 39 | } 40 | 41 | .switch-thumb { 42 | width: var(--switch-height); 43 | height: var(--switch-height); 44 | scale: 0.8; 45 | background: var(--switch-thumb-color); 46 | border-radius: inherit; 47 | box-shadow: var(--switch-shadow); 48 | 49 | transition-property: translate; 50 | transition-duration: 150ms; 51 | 52 | &[data-state='checked'] { 53 | translate: var(--switch-diff) 0; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /packages/switch/src/Switch.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from '@storybook/react'; 2 | import { Switch } from './Switch'; 3 | 4 | const meta = { 5 | title: 'Components/Switch', 6 | component: Switch, 7 | parameters: { 8 | layout: 'centered', 9 | }, 10 | args: { 11 | defaultChecked: false, 12 | }, 13 | argTypes: { 14 | size: { 15 | control: 'select', 16 | options: ['sm', 'md', 'lg'], 17 | }, 18 | checked: { 19 | control: 'boolean', 20 | }, 21 | disabled: { 22 | control: 'boolean', 23 | }, 24 | }, 25 | } satisfies Meta; 26 | 27 | export default meta; 28 | type Story = StoryObj; 29 | 30 | export const Default: Story = {}; 31 | 32 | export const DefaultChecked: Story = { 33 | args: { 34 | defaultChecked: true, 35 | }, 36 | }; 37 | 38 | export const Checked: Story = { 39 | args: { 40 | checked: true, 41 | }, 42 | }; 43 | 44 | export const Disabled: Story = { 45 | args: { 46 | disabled: true, 47 | }, 48 | }; 49 | 50 | export const Sizes: Story = { 51 | render: () => ( 52 |
53 | 54 | 55 | 56 |
57 | ), 58 | }; 59 | -------------------------------------------------------------------------------- /packages/switch/src/Switch.test.tsx: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | import { faker } from '@faker-js/faker'; 3 | import { render, screen } from '@testing-library/react'; 4 | import userEvent from '@testing-library/user-event'; 5 | import { createRef } from 'react'; 6 | import { describe, expect, test, vi } from 'vitest'; 7 | import { Switch } from './Switch'; 8 | 9 | describe('Switch 컴포넌트', () => { 10 | test('checked와 defaultChecked를 주입하지 않으면 스위치가 꺼진 상태로 렌더링된다', () => { 11 | render(); 12 | const input = screen.getByRole('switch') as HTMLInputElement; 13 | expect(input.checked).toBe(false); 14 | }); 15 | 16 | test('defaultChecked를 주입하면 스위치가 켜진 상태로 렌더링된다', () => { 17 | render(); 18 | const input = screen.getByRole('switch') as HTMLInputElement; 19 | expect(input.checked).toBe(true); 20 | }); 21 | 22 | test('checked를 주입하면 스위치가 켜진다', () => { 23 | render(); 24 | const input = screen.getByRole('switch') as HTMLInputElement; 25 | expect(input.checked).toBe(true); 26 | }); 27 | 28 | test('defaultChecked를 주입하더라도 checked를 false로 주입하면 스위치가 꺼진다', () => { 29 | render(); 30 | const input = screen.getByRole('switch') as HTMLInputElement; 31 | expect(input.checked).toBe(false); 32 | }); 33 | 34 | test('disabled 상태에서는 클릭 이벤트가 발생하지 않는다', () => { 35 | const handleChange = vi.fn(); 36 | render(); 37 | 38 | const input = screen.getByRole('switch') as HTMLInputElement; 39 | userEvent.click(input); 40 | 41 | expect(handleChange).not.toHaveBeenCalled(); 42 | }); 43 | 44 | test('ref가 올바르게 전달된다', () => { 45 | const ref = createRef(); 46 | render(); 47 | expect(ref.current).toBeInstanceOf(HTMLInputElement); 48 | }); 49 | 50 | test('className을 주입하면 추가로 전달한다.', () => { 51 | const customClassName = faker.word.noun(); 52 | render(); 53 | expect(screen.getByRole('switch')).toHaveClass(customClassName); 54 | }); 55 | }); 56 | -------------------------------------------------------------------------------- /packages/switch/src/constants/size.ts: -------------------------------------------------------------------------------- 1 | export type SwitchSize = 'sm' | 'md' | 'lg'; 2 | 3 | export const switchWidth = { 4 | sm: 32, 5 | md: 40, 6 | lg: 48, 7 | } as const; 8 | 9 | export const switchHeight = { 10 | sm: 16, 11 | md: 20, 12 | lg: 24, 13 | } as const; 14 | -------------------------------------------------------------------------------- /packages/switch/src/hooks/useCheckedController.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | 3 | type UseCheckedControllerProps = { 4 | defaultChecked: boolean | undefined; 5 | checked: boolean | undefined; 6 | onChange: React.ChangeEventHandler | undefined; 7 | }; 8 | 9 | function useCheckedController({ 10 | defaultChecked, 11 | checked, 12 | onChange, 13 | }: UseCheckedControllerProps) { 14 | const [internalChecked, setInternalChecked] = useState( 15 | defaultChecked ?? !!defaultChecked, 16 | ); 17 | 18 | const isControlled = checked !== undefined; 19 | const isChecked = isControlled ? checked : internalChecked; 20 | 21 | const overrideOnChange: React.ChangeEventHandler = ( 22 | event, 23 | ) => { 24 | if (!isControlled) { 25 | setInternalChecked(event.target.checked); 26 | } 27 | 28 | onChange?.(event); 29 | }; 30 | 31 | return { 32 | checked: isChecked, 33 | onChange: overrideOnChange, 34 | }; 35 | } 36 | 37 | export default useCheckedController; 38 | -------------------------------------------------------------------------------- /packages/switch/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Switch'; 2 | -------------------------------------------------------------------------------- /packages/switch/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/switch/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import defaultConfig from '../../tsup.config'; 2 | 3 | export default defaultConfig; 4 | -------------------------------------------------------------------------------- /packages/switch/vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineProject, mergeConfig } from 'vitest/config'; 2 | import defaultConfig from '../../vitest.config'; 3 | 4 | export default mergeConfig( 5 | defaultConfig, 6 | defineProject({ 7 | test: { 8 | setupFiles: './vitest.setup.ts', 9 | }, 10 | }), 11 | ); 12 | -------------------------------------------------------------------------------- /packages/switch/vitest.setup.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /packages/tokens/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-vite'; 2 | 3 | export default { 4 | stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], 5 | addons: ['@storybook/addon-essentials'], 6 | framework: { 7 | name: '@storybook/react-vite', 8 | options: {}, 9 | }, 10 | } satisfies StorybookConfig; 11 | -------------------------------------------------------------------------------- /packages/tokens/.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/react'; 2 | 3 | export default { 4 | tags: ['autodocs'], 5 | } satisfies Preview; 6 | -------------------------------------------------------------------------------- /packages/tokens/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @sipe-team/tokens 2 | 3 | ## 0.1.0 4 | 5 | ### Minor Changes 6 | 7 | - 9c93399: feat(tokens): add tokens package 8 | fix(typography): reuse `@sipe-team/tokens` 9 | -------------------------------------------------------------------------------- /packages/tokens/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.module.css'; 2 | -------------------------------------------------------------------------------- /packages/tokens/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sipe-team/tokens", 3 | "description": "Design tokens for Sipe Design System", 4 | "version": "0.1.0", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/sipe-team/side" 9 | }, 10 | "type": "module", 11 | "exports": "./src/index.ts", 12 | "files": [ 13 | "dist" 14 | ], 15 | "scripts": { 16 | "build": "tsup", 17 | "build:storybook": "storybook build", 18 | "dev:storybook": "storybook dev -p 6006", 19 | "lint:biome": "pnpm exec biome lint", 20 | "lint:eslint": "pnpm exec eslint", 21 | "typecheck": "tsc", 22 | "prepack": "pnpm run build" 23 | }, 24 | "devDependencies": { 25 | "@faker-js/faker": "^9.2.0", 26 | "@sipe-team/typography": "workspace:*", 27 | "@storybook/addon-essentials": "catalog:", 28 | "@storybook/react": "catalog:", 29 | "@storybook/react-vite": "catalog:", 30 | "@types/react": "^18.3.12", 31 | "react": "^18.3.1", 32 | "react-dom": "^18.3.1", 33 | "storybook": "catalog:", 34 | "tsup": "catalog:", 35 | "typescript": "catalog:" 36 | }, 37 | "publishConfig": { 38 | "access": "public", 39 | "registry": "https://npm.pkg.github.com", 40 | "exports": { 41 | ".": { 42 | "import": { 43 | "types": "./dist/index.d.ts", 44 | "default": "./dist/index.js" 45 | }, 46 | "require": { 47 | "types": "./dist/index.d.cts", 48 | "default": "./dist/index.cjs" 49 | } 50 | } 51 | } 52 | }, 53 | "sideEffects": false 54 | } 55 | -------------------------------------------------------------------------------- /packages/tokens/src/fonts.ts: -------------------------------------------------------------------------------- 1 | export const fontSize = { 2 | 12: 12, 3 | 14: 14, 4 | 16: 16, 5 | 18: 18, 6 | 20: 20, 7 | 24: 24, 8 | 28: 28, 9 | 32: 32, 10 | 36: 36, 11 | 48: 48, 12 | } as const; 13 | 14 | /** 15 | * Font weights following MDN guidelines 16 | * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight 17 | */ 18 | export const fontWeight = { 19 | regular: 400, 20 | medium: 500, 21 | semiBold: 600, 22 | bold: 700, 23 | extraBold: 800, 24 | black: 900, 25 | } as const; 26 | 27 | export const lineHeight = { 28 | regular: 1.5, 29 | compact: 1.3, 30 | } as const; 31 | -------------------------------------------------------------------------------- /packages/tokens/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './colors'; 2 | export * from './fonts'; 3 | -------------------------------------------------------------------------------- /packages/tokens/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/tokens/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup'; 2 | 3 | export default defineConfig({ 4 | entry: ['src/index.ts'], 5 | clean: true, 6 | dts: true, 7 | format: ['esm', 'cjs'], 8 | }); 9 | -------------------------------------------------------------------------------- /packages/tooltip/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-vite'; 2 | 3 | export default { 4 | stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], 5 | addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'], 6 | framework: { 7 | name: '@storybook/react-vite', 8 | options: {}, 9 | }, 10 | } satisfies StorybookConfig; 11 | -------------------------------------------------------------------------------- /packages/tooltip/.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/react'; 2 | 3 | export default { 4 | tags: ['autodocs'], 5 | } satisfies Preview; 6 | -------------------------------------------------------------------------------- /packages/tooltip/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @sipe-team/tooltip 2 | 3 | ## 0.0.4 4 | 5 | ### Patch Changes 6 | 7 | - 235be5d: fix: add react-dom into peerDependencies 8 | 9 | ## 0.0.3 10 | 11 | ### Patch Changes 12 | 13 | - f425309: fix: exports 14 | - f425309: fix: styles.css 15 | 16 | ## 0.0.3-next.1 17 | 18 | ### Patch Changes 19 | 20 | - fix: exports 21 | 22 | ## 0.0.3-next.0 23 | 24 | ### Patch Changes 25 | 26 | - 27c312a: fix: styles.css 27 | 28 | ## 0.0.2 29 | 30 | ### Patch Changes 31 | 32 | - e6f76c0: fix: css module bundle 33 | -------------------------------------------------------------------------------- /packages/tooltip/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.module.css'; 2 | -------------------------------------------------------------------------------- /packages/tooltip/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sipe-team/tooltip", 3 | "description": "Tooltip component for Sipe Design System", 4 | "version": "0.0.4", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/sipe-team/side" 9 | }, 10 | "type": "module", 11 | "exports": "./src/index.ts", 12 | "files": [ 13 | "dist" 14 | ], 15 | "scripts": { 16 | "build": "tsup", 17 | "build:storybook": "storybook build", 18 | "dev:storybook": "storybook dev -p 6006", 19 | "lint:biome": "pnpm exec biome lint", 20 | "lint:eslint": "pnpm exec eslint", 21 | "test": "vitest", 22 | "typecheck": "tsc", 23 | "prepack": "pnpm run build" 24 | }, 25 | "dependencies": { 26 | "@radix-ui/react-slot": "^1.1.0", 27 | "clsx": "^2.1.1" 28 | }, 29 | "devDependencies": { 30 | "@types/react-dom": "^18.3.1", 31 | "react-dom": "^18.3.1", 32 | "@testing-library/user-event": "^14.5.2", 33 | "@faker-js/faker": "^9.2.0", 34 | "@storybook/addon-essentials": "catalog:", 35 | "@storybook/addon-interactions": "catalog:", 36 | "@storybook/addon-links": "catalog:", 37 | "@storybook/blocks": "catalog:", 38 | "@storybook/react": "catalog:", 39 | "@storybook/react-vite": "catalog:", 40 | "@storybook/test": "catalog:", 41 | "@testing-library/jest-dom": "^6.6.3", 42 | "@testing-library/react": "^16.0.1", 43 | "@types/react": "^18.3.12", 44 | "happy-dom": "catalog:", 45 | "react": "^18.3.1", 46 | "storybook": "catalog:", 47 | "tsup": "catalog:", 48 | "typescript": "catalog:", 49 | "vitest": "catalog:" 50 | }, 51 | "peerDependencies": { 52 | "react": ">= 18", 53 | "react-dom": ">= 18" 54 | }, 55 | "publishConfig": { 56 | "access": "public", 57 | "registry": "https://npm.pkg.github.com", 58 | "exports": { 59 | ".": { 60 | "import": { 61 | "types": "./dist/index.d.ts", 62 | "default": "./dist/index.js" 63 | }, 64 | "require": { 65 | "types": "./dist/index.d.cts", 66 | "default": "./dist/index.cjs" 67 | } 68 | }, 69 | "./styles.css": "./dist/index.css" 70 | } 71 | }, 72 | "sideEffects": false 73 | } 74 | -------------------------------------------------------------------------------- /packages/tooltip/src/hooks/useTooltip/index.ts: -------------------------------------------------------------------------------- 1 | export * from './useTooltip'; 2 | -------------------------------------------------------------------------------- /packages/tooltip/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Tooltip'; 2 | -------------------------------------------------------------------------------- /packages/tooltip/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "exclude": ["dist"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/tooltip/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import defaultConfig from '../../tsup.config'; 2 | 3 | export default defaultConfig; 4 | -------------------------------------------------------------------------------- /packages/tooltip/vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineProject, mergeConfig } from 'vitest/config'; 2 | import defaultConfig from '../../vitest.config'; 3 | 4 | export default mergeConfig( 5 | defaultConfig, 6 | defineProject({ 7 | test: { 8 | setupFiles: './vitest.setup.ts', 9 | }, 10 | }), 11 | ); 12 | -------------------------------------------------------------------------------- /packages/tooltip/vitest.setup.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /packages/typography/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-vite'; 2 | 3 | export default { 4 | stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], 5 | addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'], 6 | framework: { 7 | name: '@storybook/react-vite', 8 | options: {}, 9 | }, 10 | } satisfies StorybookConfig; 11 | -------------------------------------------------------------------------------- /packages/typography/.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/react'; 2 | 3 | export default { 4 | tags: ['autodocs'], 5 | } satisfies Preview; 6 | -------------------------------------------------------------------------------- /packages/typography/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @sipe-team/typography 2 | 3 | ## 0.0.5 4 | 5 | ### Patch Changes 6 | 7 | - 235be5d: fix: add react-dom into peerDependencies 8 | - @sipe-team/tokens@0.1.0 9 | 10 | ## 0.0.4 11 | 12 | ### Patch Changes 13 | 14 | - f425309: fix: exports 15 | - f425309: fix: styles.css 16 | - @sipe-team/tokens@0.1.0 17 | 18 | ## 0.0.4-next.1 19 | 20 | ### Patch Changes 21 | 22 | - fix: exports 23 | - @sipe-team/tokens@0.1.0 24 | 25 | ## 0.0.4-next.0 26 | 27 | ### Patch Changes 28 | 29 | - 27c312a: fix: styles.css 30 | - @sipe-team/tokens@0.1.0 31 | 32 | ## 0.0.3 33 | 34 | ### Patch Changes 35 | 36 | - e6f76c0: fix(typography): css module bundle 37 | - @sipe-team/tokens@0.1.0 38 | 39 | ## 0.0.3-next.0 40 | 41 | ### Patch Changes 42 | 43 | - 1885991: fix(typography): css module bundle 44 | - @sipe-team/tokens@0.1.0 45 | 46 | ## 0.0.2 47 | 48 | ### Patch Changes 49 | 50 | - 9c93399: feat(tokens): add tokens package 51 | fix(typography): reuse `@sipe-team/tokens` 52 | - Updated dependencies [9c93399] 53 | - @sipe-team/tokens@0.1.0 54 | 55 | ## 0.0.1 56 | 57 | ### Patch Changes 58 | 59 | - chore: bump version 60 | -------------------------------------------------------------------------------- /packages/typography/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.module.css'; 2 | -------------------------------------------------------------------------------- /packages/typography/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sipe-team/typography", 3 | "description": "Typography component for Sipe Design System", 4 | "version": "0.0.5", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/sipe-team/side" 9 | }, 10 | "type": "module", 11 | "exports": "./src/index.ts", 12 | "files": [ 13 | "dist" 14 | ], 15 | "scripts": { 16 | "build": "tsup", 17 | "build:storybook": "storybook build", 18 | "dev:storybook": "storybook dev -p 6006", 19 | "lint:biome": "pnpm exec biome lint", 20 | "lint:eslint": "pnpm exec eslint", 21 | "test": "vitest", 22 | "typecheck": "tsc", 23 | "prepack": "pnpm run build" 24 | }, 25 | "dependencies": { 26 | "@radix-ui/react-slot": "^1.1.0", 27 | "@sipe-team/tokens": "workspace:^", 28 | "clsx": "^2.1.1" 29 | }, 30 | "devDependencies": { 31 | "@faker-js/faker": "^9.2.0", 32 | "@storybook/addon-essentials": "catalog:", 33 | "@storybook/addon-interactions": "catalog:", 34 | "@storybook/addon-links": "catalog:", 35 | "@storybook/blocks": "catalog:", 36 | "@storybook/react": "catalog:", 37 | "@storybook/react-vite": "catalog:", 38 | "@storybook/test": "catalog:", 39 | "@testing-library/jest-dom": "^6.6.3", 40 | "@testing-library/react": "^16.0.1", 41 | "@types/react": "^18.3.12", 42 | "happy-dom": "catalog:", 43 | "react": "^18.3.1", 44 | "react-dom": "^18.3.1", 45 | "storybook": "catalog:", 46 | "tsup": "catalog:", 47 | "typescript": "catalog:", 48 | "vitest": "catalog:" 49 | }, 50 | "peerDependencies": { 51 | "react": ">= 18", 52 | "react-dom": ">= 18" 53 | }, 54 | "publishConfig": { 55 | "access": "public", 56 | "registry": "https://npm.pkg.github.com", 57 | "exports": { 58 | ".": { 59 | "import": { 60 | "types": "./dist/index.d.ts", 61 | "default": "./dist/index.js" 62 | }, 63 | "require": { 64 | "types": "./dist/index.d.cts", 65 | "default": "./dist/index.cjs" 66 | } 67 | }, 68 | "./styles.css": "./dist/index.css" 69 | } 70 | }, 71 | "sideEffects": false 72 | } 73 | -------------------------------------------------------------------------------- /packages/typography/src/Typography.module.css: -------------------------------------------------------------------------------- 1 | .typography { 2 | color: var(--font-color); 3 | font-size: var(--font-size); 4 | font-weight: var(--font-weight); 5 | line-height: var(--line-height); 6 | } 7 | -------------------------------------------------------------------------------- /packages/typography/src/Typography.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from '@storybook/react'; 2 | import { Typography } from './Typography'; 3 | 4 | const meta = { 5 | title: 'Components/Typography', 6 | component: Typography, 7 | parameters: { 8 | layout: 'centered', 9 | }, 10 | } satisfies Meta; 11 | export default meta; 12 | 13 | type Story = StoryObj; 14 | 15 | export const Basic: Story = { 16 | render() { 17 | return ( 18 |
19 | 20 |

Weight

21 | 22 | [기본 값] regular(400) - 사이프 디자인 시스템 23 | medium(500) - 사이프 디자인 시스템 24 | semiBold(600) - 사이프 디자인 시스템 25 | bold(700) - 사이프 디자인 시스템 26 | 27 | 28 |

Size

29 | 30 | 12 - 사이프 디자인 시스템 31 | [기본 값] 14 - 사이프 디자인 시스템 32 | 16 - 사이프 디자인 시스템 33 | 18 - 사이프 디자인 시스템 34 | 20 - 사이프 디자인 시스템 35 | 24 - 사이프 디자인 시스템 36 | 28 - 사이프 디자인 시스템 37 | 32 - 사이프 디자인 시스템 38 | 36 - 사이프 디자인 시스템 39 | 48 - 사이프 디자인 시스템 40 | 41 | 42 |

Line Height

43 | 44 | [기본 값] regular(1.5) - 사이프 디자인 시스템 45 | compact(1.3) - 사이프 디자인 시스템 46 |
47 | ); 48 | }, 49 | }; 50 | -------------------------------------------------------------------------------- /packages/typography/src/Typography.tsx: -------------------------------------------------------------------------------- 1 | import { Slot } from '@radix-ui/react-slot'; 2 | import { 3 | fontSize as fontSizeToken, 4 | fontWeight as fontWeightToken, 5 | lineHeight as lineHeightToken, 6 | } from '@sipe-team/tokens'; 7 | import { clsx as cx } from 'clsx'; 8 | import { 9 | type CSSProperties, 10 | type ComponentProps, 11 | type ForwardedRef, 12 | forwardRef, 13 | } from 'react'; 14 | import styles from './Typography.module.css'; 15 | 16 | export type FontSize = keyof typeof fontSizeToken; 17 | 18 | export type FontWeight = keyof typeof fontWeightToken; 19 | 20 | export type LineHeight = keyof typeof lineHeightToken; 21 | 22 | export interface TypographyProps extends ComponentProps<'p'> { 23 | asChild?: boolean; 24 | lineHeight?: LineHeight; 25 | size?: FontSize; 26 | weight?: FontWeight; 27 | } 28 | 29 | export const Typography = forwardRef(function Typography( 30 | { 31 | asChild, 32 | className, 33 | color, 34 | lineHeight = 'regular', 35 | size = 14, 36 | style: _style, 37 | weight = 'regular', 38 | ...props 39 | }: TypographyProps, 40 | ref: ForwardedRef, 41 | ) { 42 | const Component = asChild ? Slot : 'p'; 43 | const style = { 44 | ..._style, 45 | '--font-color': color, 46 | '--font-size': `${fontSizeToken[size]}px`, 47 | '--font-weight': fontWeightToken[weight], 48 | '--line-height': lineHeightToken[lineHeight], 49 | } as CSSProperties; 50 | 51 | return ( 52 | 58 | ); 59 | }); 60 | -------------------------------------------------------------------------------- /packages/typography/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Typography'; 2 | -------------------------------------------------------------------------------- /packages/typography/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "exclude": ["dist"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/typography/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import defaultConfig from '../../tsup.config'; 2 | 3 | export default defaultConfig; 4 | -------------------------------------------------------------------------------- /packages/typography/vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineProject, mergeConfig } from 'vitest/config'; 2 | import defaultConfig from '../../vitest.config'; 3 | 4 | export default mergeConfig( 5 | defaultConfig, 6 | defineProject({ 7 | test: { 8 | setupFiles: './vitest.setup.ts', 9 | }, 10 | }), 11 | ); 12 | -------------------------------------------------------------------------------- /packages/typography/vitest.setup.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - .templates/* 3 | - packages/* 4 | - www 5 | 6 | catalog: 7 | '@storybook/addon-essentials': ^8.4.5 8 | '@storybook/addon-interactions': ^8.4.5 9 | '@storybook/addon-links': ^8.4.5 10 | '@storybook/blocks': ^8.4.5 11 | '@storybook/react': ^8.4.5 12 | '@storybook/react-vite': ^8.4.5 13 | '@storybook/test': ^8.4.5 14 | '@testing-library/jest-dom': ^6.6.3 15 | '@testing-library/react': ^16.0.1 16 | '@vitest/coverage-v8': ^2.1.8 17 | happy-dom: ^15.7.4 18 | knip: ^5.34.1 19 | storybook: ^8.4.7 20 | tsup: ^8.3.5 21 | typescript: ^5.6.3 22 | vitest: ^2.1.8 23 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sipe-team/side/6135f3d4e1bc3bba781f45d67513fc81d601d068/public/favicon.ico -------------------------------------------------------------------------------- /public/og-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sipe-team/side/6135f3d4e1bc3bba781f45d67513fc81d601d068/public/og-image.png -------------------------------------------------------------------------------- /public/sipe_brand_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sipe-team/side/6135f3d4e1bc3bba781f45d67513fc81d601d068/public/sipe_brand_logo.png -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/strictest/tsconfig.json", 3 | "compilerOptions": { 4 | "allowImportingTsExtensions": true, 5 | "allowJs": true, 6 | "lib": ["ESNext", "DOM"], 7 | "jsx": "react-jsx", 8 | "module": "ESNext", 9 | "moduleDetection": "force", 10 | "moduleResolution": "bundler", 11 | "noEmit": true, 12 | "target": "ESNext", 13 | "verbatimModuleSyntax": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup'; 2 | 3 | export default defineConfig({ 4 | entry: ['src/index.ts'], 5 | clean: true, 6 | dts: true, 7 | format: ['esm', 'cjs'], 8 | loader: { 9 | '.css': 'local-css', 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /types/index.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * I Typed manually since the ecosystem hasn't fully migrated to ESLint's new FlatConfig system yet. 3 | */ 4 | 5 | declare module 'eslint-plugin-react-hooks' { 6 | export const configs: { 7 | recommended: { 8 | rules: { 9 | 'rules-of-hooks': Linter.RuleEntry; 10 | 'exhaustive-deps': Linter.RuleEntry; 11 | }; 12 | }; 13 | }; 14 | export const rules: Record; 15 | } 16 | -------------------------------------------------------------------------------- /vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vitest/config'; 2 | 3 | export default defineConfig({ 4 | test: { 5 | css: true, 6 | environment: 'happy-dom', 7 | globals: true, 8 | passWithNoTests: true, 9 | watch: false, 10 | coverage: { 11 | include: ['**/src'], 12 | exclude: ['.templates', '**/src/*.stories.tsx', '**/src/index.ts', 'www/**'], 13 | }, 14 | }, 15 | }); 16 | -------------------------------------------------------------------------------- /vitest.workspace.ts: -------------------------------------------------------------------------------- 1 | import { defineWorkspace } from 'vitest/config'; 2 | 3 | export default defineWorkspace(['packages/*']); 4 | -------------------------------------------------------------------------------- /www/README.md: -------------------------------------------------------------------------------- 1 | # Website 2 | 3 | This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator. 4 | 5 | ### Installation 6 | 7 | ``` 8 | $ yarn 9 | ``` 10 | 11 | ### Local Development 12 | 13 | ``` 14 | $ yarn start 15 | ``` 16 | 17 | This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. 18 | 19 | ### Build 20 | 21 | ``` 22 | $ yarn build 23 | ``` 24 | 25 | This command generates static content into the `build` directory and can be served using any static contents hosting service. 26 | 27 | ### Deployment 28 | 29 | Using SSH: 30 | 31 | ``` 32 | $ USE_SSH=true yarn deploy 33 | ``` 34 | 35 | Not using SSH: 36 | 37 | ``` 38 | $ GIT_USER= yarn deploy 39 | ``` 40 | 41 | If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. 42 | -------------------------------------------------------------------------------- /www/docs/components/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Components", 3 | "position": 2, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "Components of the Side Design System" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /www/docs/components/avatar.mdx: -------------------------------------------------------------------------------- 1 | # Avatar 2 | 3 | ## Setup 4 | 5 | ```sh 6 | npm install @sipe-team/avatar 7 | ``` 8 | 9 | ## Usage 10 | 11 | ```tsx 12 | import { Avatar } from '@sipe-team/avatar'; 13 | ``` 14 | 15 | ```tsx 16 | 17 | ``` 18 | 19 | -------------------------------------------------------------------------------- /www/docs/overview/Installation.mdx: -------------------------------------------------------------------------------- 1 | # Installation Guide 2 | 3 | To get started with the Side Design System, follow these steps. Note that Side Component packages require configuration to use the GitHub Package Registry. Please follow this guide before proceeding with the installation. 4 | 5 | if you didn't you might entercount error as below 6 | 7 | ``` 8 | @sipe-team/side is not in the npm registry, or you have no permission to fetch it 9 | ``` 10 | 11 | ## Prerequisites 12 | 13 | Make sure you have the following installed on your machine: 14 | - [Node.js](https://nodejs.org/) (version 22 or higher) 15 | 16 | ### Create Github Token ( classic ) 17 | 18 | 1. [Go to developer setting](https://docs.github.com/en/organizations/managing-programmatic-access-to-your-organization/setting-a-personal-access-token-policy-for-your-organization#restricting-access-by-personal-access-tokens) 19 | 20 | 2. make sure grant `package` related permission for `Github token` 21 | 22 | ![gh](https://i.ibb.co/y4xpqCM/Screenshot-2025-01-28-at-23-43-25.png) 23 | 24 | 25 | ### `.npmrc` configuration for project 26 | 27 | ```sh 28 | touch .npmrc 29 | echo "//npm.pkg.github.com/:_authToken=" > .npmrc 30 | echo "@sipe-team:registry=https://npm.pkg.github.com/" >> .npmrc 31 | ``` 32 | 33 | 34 | :::warning 35 | 36 | Important: Make sure to add .npmrc to your .gitignore file to prevent committing your token. 37 | For CI/CD environments, use secrets management to store your GitHub token as a secret environment variable. 38 | 39 | ::: 40 | 41 | 42 | ### `.npmrc` configuration for global 43 | 44 | ```sh 45 | npm adduser --scope @sipe-team --registry https://npm.pkg.github.com --auth-type legacy 46 | ``` 47 | 48 | - Username: Your GitHub username 49 | - Password: Your GitHub token 50 | - Email: Your email address 51 | 52 | ### `.yarnrc.yml` configuration for yarn project 53 | 54 | 1. add `npmScopes` in `.yarnrc.yml` 55 | 56 | ```yaml 57 | npmScopes: 58 | sipe-team: 59 | npmRegistryServer: 'https://npm.pkg.github.com' 60 | ``` 61 | 62 | 2. login npm with `yarn` 63 | 64 | ```sh 65 | yarn npm login --scope sipe-team 66 | ``` 67 | -------------------------------------------------------------------------------- /www/docs/overview/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Overview", 3 | "position": 1, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "Overview of the Side Design System" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /www/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docs", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "docusaurus start", 7 | "build": "docusaurus build", 8 | "swizzle": "docusaurus swizzle", 9 | "deploy": "docusaurus deploy", 10 | "clear": "docusaurus clear", 11 | "serve": "docusaurus serve", 12 | "write-translations": "docusaurus write-translations", 13 | "write-heading-ids": "docusaurus write-heading-ids", 14 | "typecheck": "tsc" 15 | }, 16 | "dependencies": { 17 | "@docusaurus/core": "3.6.3", 18 | "@docusaurus/preset-classic": "3.6.3", 19 | "@mdx-js/react": "^3.0.0", 20 | "clsx": "^2.0.0", 21 | "prism-react-renderer": "^2.3.0", 22 | "react": "^18.3.1", 23 | "react-dom": "^18.3.1" 24 | }, 25 | "devDependencies": { 26 | "@docusaurus/module-type-aliases": "3.6.3", 27 | "@docusaurus/tsconfig": "3.6.3", 28 | "@docusaurus/types": "3.6.3", 29 | "typescript": "~5.6.2" 30 | }, 31 | "browserslist": { 32 | "production": [">0.5%", "not dead", "not op_mini all"], 33 | "development": ["last 3 chrome version", "last 3 firefox version", "last 5 safari version"] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /www/sidebars.ts: -------------------------------------------------------------------------------- 1 | import type { SidebarsConfig } from '@docusaurus/plugin-content-docs'; 2 | 3 | export default { 4 | overview: [{ type: 'autogenerated', dirName: 'overview' }], 5 | components: [{ type: 'autogenerated', dirName: 'components' }], 6 | } satisfies SidebarsConfig; 7 | -------------------------------------------------------------------------------- /www/src/HomepageFeatures/index.module.css: -------------------------------------------------------------------------------- 1 | .features { 2 | display: flex; 3 | align-items: center; 4 | padding: 2rem 0; 5 | width: 100%; 6 | } 7 | 8 | .featureSvg { 9 | height: 200px; 10 | width: 200px; 11 | } 12 | -------------------------------------------------------------------------------- /www/src/HomepageFeatures/index.tsx: -------------------------------------------------------------------------------- 1 | import Mountain from '@site/static/img/undraw_docusaurus_mountain.svg'; 2 | import React from '@site/static/img/undraw_docusaurus_react.svg'; 3 | import Tree from '@site/static/img/undraw_docusaurus_tree.svg'; 4 | import Heading from '@theme/Heading'; 5 | import clsx from 'clsx'; 6 | import type { ComponentProps, ComponentType, ReactNode } from 'react'; 7 | import styles from './index.module.css'; 8 | 9 | type FeatureItem = { 10 | title: string; 11 | Svg: ComponentType>; 12 | description: ReactNode; 13 | }; 14 | 15 | const FeatureList: FeatureItem[] = [ 16 | { 17 | title: 'Easy to Use', 18 | Svg: Mountain, 19 | description: 20 | 'Docusaurus was designed from the ground up to be easily installed and used to get your website up and running quickly.', 21 | }, 22 | { 23 | title: 'Focus on What Matters', 24 | Svg: Tree, 25 | description: ( 26 | <> 27 | Docusaurus lets you focus on your docs, and we'll do the chores. Go ahead and move your docs into the{' '} 28 | docs directory. 29 | 30 | ), 31 | }, 32 | { 33 | title: 'Powered by React', 34 | Svg: React, 35 | description: 36 | 'Extend or customize your website layout by reusing React. Docusaurus can be extended while reusing the same header and footer.', 37 | }, 38 | ]; 39 | 40 | function Feature({ title, Svg, description }: FeatureItem) { 41 | return ( 42 |
43 |
44 | 45 |
46 |
47 | {title} 48 |

{description}

49 |
50 |
51 | ); 52 | } 53 | 54 | export default function HomepageFeatures(): ReactNode { 55 | return ( 56 |
57 |
58 |
59 | {FeatureList.map((props) => ( 60 | 61 | ))} 62 |
63 |
64 |
65 | ); 66 | } 67 | -------------------------------------------------------------------------------- /www/src/custom.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --ifm-color-primary: #2e8555; 3 | --ifm-color-primary-dark: #29784c; 4 | --ifm-color-primary-darker: #277148; 5 | --ifm-color-primary-darkest: #205d3b; 6 | --ifm-color-primary-light: #33925d; 7 | --ifm-color-primary-lighter: #359962; 8 | --ifm-color-primary-lightest: #3cad6e; 9 | --ifm-code-font-size: 95%; 10 | --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); 11 | } 12 | 13 | [data-theme="dark"] { 14 | --ifm-color-primary: #25c2a0; 15 | --ifm-color-primary-dark: #21af90; 16 | --ifm-color-primary-darker: #1fa588; 17 | --ifm-color-primary-darkest: #1a8870; 18 | --ifm-color-primary-light: #29d5b0; 19 | --ifm-color-primary-lighter: #32d8b4; 20 | --ifm-color-primary-lightest: #4fddbf; 21 | --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); 22 | } 23 | -------------------------------------------------------------------------------- /www/src/pages/index.module.css: -------------------------------------------------------------------------------- 1 | .heroBanner { 2 | padding: 4rem 0; 3 | text-align: center; 4 | position: relative; 5 | overflow: hidden; 6 | } 7 | 8 | @media screen and (max-width: 996px) { 9 | .heroBanner { 10 | padding: 2rem; 11 | } 12 | } 13 | 14 | .buttons { 15 | display: flex; 16 | align-items: center; 17 | justify-content: center; 18 | } 19 | -------------------------------------------------------------------------------- /www/src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; 2 | import HomepageFeatures from '@site/src/HomepageFeatures'; 3 | import Heading from '@theme/Heading'; 4 | import Layout from '@theme/Layout'; 5 | import clsx from 'clsx'; 6 | import styles from './index.module.css'; 7 | 8 | export default function Home() { 9 | const { siteConfig } = useDocusaurusContext(); 10 | 11 | return ( 12 | 13 | 14 |
15 | 16 |
17 | 18 | ); 19 | } 20 | 21 | function HomepageHeader() { 22 | const { siteConfig } = useDocusaurusContext(); 23 | 24 | return ( 25 |
26 |
27 | 28 | {siteConfig.title} 29 | 30 |

{siteConfig.tagline}

31 |
32 |
33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /www/static/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sipe-team/side/6135f3d4e1bc3bba781f45d67513fc81d601d068/www/static/.nojekyll -------------------------------------------------------------------------------- /www/static/img/docusaurus-social-card.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sipe-team/side/6135f3d4e1bc3bba781f45d67513fc81d601d068/www/static/img/docusaurus-social-card.jpg -------------------------------------------------------------------------------- /www/static/img/docusaurus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sipe-team/side/6135f3d4e1bc3bba781f45d67513fc81d601d068/www/static/img/docusaurus.png -------------------------------------------------------------------------------- /www/static/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sipe-team/side/6135f3d4e1bc3bba781f45d67513fc81d601d068/www/static/img/favicon.ico -------------------------------------------------------------------------------- /www/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@docusaurus/tsconfig", 3 | "compilerOptions": { 4 | "baseUrl": "." 5 | } 6 | } 7 | --------------------------------------------------------------------------------