Merge branch 'main' into feat/radio

.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "restricted",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": []
+  "ignore": ["@sipe-team/component"]
 }

.github/CODEOWNERS

@@ -0,0 +1 @@
+*   @kimdaeyeobbb @hy57in @developerjhp @bae-sh @noahluftyang @froggy1014 @heeji289 @synuns

.github/CONTRIBUTING.md

@@ -0,0 +1,18 @@
+# Contributing to Sipe Design System
+
+We love your input! We want to make contributing to this project as easy and transparent as possible. This document outlines the process for contributing to our component library.
+
+## Getting Started
+
+1. Fork the repository
+2. Clone your fork: `git clone https://github.com/your-username/3-1_sds.git`
+3. Install dependencies: `pnpm install`
+
+## Creating a New Component
+
+1. Copy the [.templates/component](.templates/component) folder to `packages/your-component-name`
+2. Follow the test-driven development process:
+   - Write test cases first in `src/Component.test.tsx`
+   - Implement the component to pass the tests
+   - Create stories in Storybook for documentation
+3. Run the test suite: `pnpm test`

.github/workflows/chromatic.yaml

@@ -0,0 +1,28 @@
+name: Chromatic
+
+on:
+  push:
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: pnpm 설치
+        uses: pnpm/action-setup@v4
+        with:
+          run_install: false
+      - name: Node.js 환경 설정
+        uses: actions/setup-node@v4
+        with:
+          cache: pnpm
+          node-version-file: .nvmrc
+      - name: 의존성 설치
+        run: pnpm install
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/ci.yaml

@@ -27,7 +27,7 @@ jobs:
       run: pnpm --filter="...[origin/${{ github.base_ref }}]" lint
     - name: 테스트
       run: pnpm --filter="...[origin/${{ github.base_ref }}]" test
-    - name: 빌드
-      run: pnpm --filter="...[origin/${{ github.base_ref }}]" build
     - name: 타입 체크
       run: pnpm --filter="...[origin/${{ github.base_ref }}]" typecheck
+    - name: 빌드
+      run: pnpm --filter="...[origin/${{ github.base_ref }}]" build

.github/workflows/release.yaml

@@ -0,0 +1,35 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: pnpm 설치
+        uses: pnpm/action-setup@v4
+        with:
+          run_install: false
+      - name: Node.js 환경 설정
+        uses: actions/setup-node@v4
+        with:
+          cache: pnpm
+          node-version-file: .nvmrc
+          registry-url: https://npm.pkg.github.com
+          scope: "@sipe-team"
+      - name: 의존성 설치
+        run: pnpm install
+      - name: Create Release Pull Request or Publish to Github Package Registry
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          version: pnpm changeset version
+          publish: pnpm changeset publish
+        env:
+          GITHUB_TOKEN: ${{ secrets.RELEASE_BOT_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.RELEASE_BOT_TOKEN }}

.gitignore

@@ -174,4 +174,6 @@ dist
 # Finder (MacOS) folder config
 .DS_Store
 
-*storybook.log
+# Storybook
+*storybook.log
+storybook-static

.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+export default {
+  stories: [
+    '../packages/**/*.mdx',
+    '../packages/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-links',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+} satisfies StorybookConfig;

.storybook/preview.ts

@@ -0,0 +1,7 @@
+import 'sanitize.css';
+import 'sanitize.css/typography.css';
+import type { Preview } from '@storybook/react';
+
+export default {
+  tags: ['autodocs'],
+} satisfies Preview;

.templates/component/package.json

@@ -41,6 +41,7 @@
   },
   "publishConfig": {
     "access": "public",
+    "registry": "https://npm.pkg.github.com",
     "exports": {
       ".": {
         "import": {

README.md

@@ -1 +1,32 @@
-# sipe-design-system
+![](./public/assets/og-image.png)
+
+# Sipe Design System 
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/toss/slash/blob/main/LICENSE) ![Package Manager](https://img.shields.io/badge/pnpm-9.7.1-orange?logo=pnpm) [![Storybook](https://img.shields.io/badge/Storybook-8.4.5-ff4785?logo=storybook)](https://67417e47644abe8d4e63f82f-xvhdismwhu.chromatic.com/?path=/story/input--default) ![Tests](https://img.shields.io/badge/Vitest-2.1.4-green?logo=vitest) [![codecov](https://codecov.io/github/sipe-team/3-1_sds/graph/badge.svg?token=1TNLVUFPXC)](https://codecov.io/github/sipe-team/3-1_sds) <img alt="Github Stars" src="https://badgen.net/github/stars/sipe-team/3-1_sds" /> 
+
+Sipe Design System is a monorepo-based component library built to modernize and standardize the official Sipe website. Drawing inspiration from our existing design patterns, we're creating a robust, type-safe, and accessible component system that can be used across all Sipe projects.
+
+This design system is built with:
+- 📦 Monorepo structure for better package management
+- 🎨 Consistent design tokens and patterns
+- 💪 TypeScript for type safety
+- 📚 Storybook for component documentation
+- 🧪 Vitest for testing
+- 🛠️ Modern build tooling
+
+## Contributing
+
+We maintain our component development roadmap in our [GitHub Project Board](https://github.com/orgs/sipe-team/projects/4). Before contributing, please check:
+
+We warmly welcome contributions from the community, whether you're a Sipe team member or not! Your input helps make this design system better for everyone please read [contributing guidelines](https://github.com/sipe-team/3-1_sds/tree/main/.github/CONTRIBUTING.md) for more details.
+
+## Contributors
+
+<a href="https://github.com/sipe-team/3-1_sds/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=sipe-team/3-1_sds" />
+</a>
+
+## License
+
+Copyright (c) 2024 SIPE, Inc. See [LICENSE](./LICENSE) for details.
+
+<svg xmlns="http://www.w3.org/2000/svg" width="144" height="104" fill="none" aria-label="사이프 로고"><path fill="#0ff" d="M8.777 36c6.314 0 10.253-2.869 10.253-7.131 0-5.902-9.674-4.563-9.674-6.667 0-.656.985-1.284 2.983-1.284 1.97 0 3.94.465 5.562 1.42l2.462-4.699C18.48 16.574 15.786 16 12.773 16c-6.4 0-10.253 2.842-10.253 7.186 0 5.929 9.645 4.754 9.645 6.776 0 .683-.926 1.12-2.693 1.12-2.26 0-4.577-.547-6.836-1.776L0 34.06C1.94 35.18 5.156 36 8.777 36M19.76 35.563h6.837l4.055-19.126h-6.836zM42.95 16.437h-9.007l-4.055 19.126h6.835l.985-4.7h3.505c6.227 0 10.254-3.251 10.254-8.087 0-3.99-3.07-6.339-8.516-6.339m-1.39 9.454h-2.81l.957-4.481h2.288c1.564 0 2.549.574 2.549 1.94 0 1.612-1.1 2.54-2.983 2.54"></path><path fill="#0ff" fill-rule="evenodd" d="M70.327 16.513h-8.173L52 26.039l10.072 9.448h8.172l-6.941-6.512H72v-5.421h-9.179z" clip-rule="evenodd"></path></svg>

biome.json

@@ -10,12 +10,21 @@
   "linter": {
     "enabled": true,
     "rules": {
-      "recommended": true
+      "recommended": true,
+      "a11y": {
+        "useSemanticElements": "warn"
+      },
+      "suspicious": {
+        "noExplicitAny": "warn"
+      }
     }
   },
   "javascript": {
     "formatter": {
       "quoteStyle": "single"
     }
+  },
+  "files": {
+    "ignore": ["dist/*.*"]
   }
 }

chromatic.config.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://www.chromatic.com/config-file.schema.json",
+  "buildScriptName": "build:storybook"
+}

package.json

@@ -2,12 +2,26 @@
   "name": "sipe-design-system",
   "private": true,
   "type": "module",
+  "scripts": {
+    "build:storybook": "storybook build",
+    "dev:storybook": "storybook dev -p 6006"
+  },
   "devDependencies": {
     "@biomejs/biome": "catalog:",
     "@changesets/cli": "^2.27.9",
+    "@storybook/addon-essentials": "catalog:",
+    "@storybook/addon-interactions": "catalog:",
+    "@storybook/addon-links": "catalog:",
+    "@storybook/blocks": "catalog:",
+    "@storybook/react": "catalog:",
+    "@storybook/react-vite": "catalog:",
+    "@storybook/test": "catalog:",
     "@tsconfig/strictest": "^2.0.5",
     "@types/node": "^22.8.1",
+    "chromatic": "^11.19.0",
     "knip": "catalog:",
+    "sanitize.css": "^13.0.0",
+    "storybook": "catalog:",
     "typescript": "catalog:"
   },
   "packageManager": "[email protected]"

packages/Input/.storybook/main.ts

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

packages/Input/.storybook/preview.ts

@@ -0,0 +1,5 @@
+import type { Preview } from '@storybook/react';
+
+export default {
+  tags: ['autodocs'],
+} satisfies Preview;

packages/Input/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @sipe-team/input
+
+## 0.0.1
+
+### Patch Changes
+
+- 64cb79f: chore(input): bump version

packages/Input/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@sipe-team/input",
+  "description": "Input component for Sipe Design System",
+  "version": "0.0.1",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sipe-team/3-1_sds"
+  },
+  "type": "module",
+  "exports": "./src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "build:storybook": "storybook build",
+    "dev:storybook": "storybook dev -p 6006",
+    "lint": "biome lint .",
+    "test": "vitest",
+    "typecheck": "tsc",
+    "prepack": "pnpm run build"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.1.0",
+    "classnames": "^2.5.1"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "catalog:",
+    "@storybook/addon-essentials": "catalog:",
+    "@storybook/addon-interactions": "catalog:",
+    "@storybook/addon-links": "catalog:",
+    "@storybook/blocks": "catalog:",
+    "@storybook/react": "catalog:",
+    "@storybook/react-vite": "catalog:",
+    "@storybook/test": "catalog:",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^18.3.12",
+    "happy-dom": "catalog:",
+    "react": "^18.3.1",
+    "storybook": "catalog:",
+    "tsup": "catalog:",
+    "typescript": "catalog:",
+    "vitest": "catalog:"
+  },
+  "peerDependencies": {
+    "react": ">= 18"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://npm.pkg.github.com",
+    "exports": {
+      ".": {
+        "import": {
+          "types": "./dist/index.d.ts",
+          "default": "./dist/index.js"
+        },
+        "require": {
+          "types": "./dist/index.d.cts",
+          "default": "./dist/index.cjs"
+        }
+      }
+    }
+  },
+  "sideEffects": false
+}