Release V1

.coderabbit.yaml

@@ -0,0 +1,140 @@
+language: "en"
+early_access: false
+reviews:
+  profile: "assertive"
+  high_level_summary: true
+  poem: false
+  review_status: true
+  collapse_walkthrough: false
+  path_filters:
+    - "!.templates/**"
+    - "!.changeset/**"
+    - "!**/pnpm-lock.yaml"
+    - "!**/node_modules/**"
+    - "!**/dist/**"
+    - "!**/storybook-static/**"
+    - "!**/*.d.ts"
+  path_instructions:
+    # React Components
+    - path: "**/packages/*/src/*.tsx"
+      instructions: |
+        Review React component code for:
+        - Consistent component patterns following existing components (forwardRef, props interface, const enums)
+        - Proper TypeScript usage with strict typing
+        - Accessibility best practices (semantic HTML, ARIA attributes)
+        - Component composition patterns using Radix UI Slot when applicable
+        - ThemeProvider integration - components should work with all theme variants (1st-4th)
+        - Consistent prop naming and structure with existing components
+        - Proper use of clsx for conditional className handling
+        - Integration with design token system and theme contract variables
+
+    # Vanilla Extract CSS
+    - path: "**/packages/*/src/*.css.ts"
+      instructions: |
+        Review Vanilla Extract styling for:
+        - Proper usage of design tokens from @sipe-team/tokens (vars.color, vars.spacing, etc.)
+        - ThemeProvider compatibility - use vars.color.primary instead of hardcoded colors
+        - Consistent recipe patterns with variants and compound variants
+        - Proper hover states and transitions following existing patterns
+        - Theme-aware color usage that works with multiple theme variants (1st-4th themes)
+        - Avoid hardcoded colors like '#00ffff' - use theme contract variables instead
+        - Responsive design considerations using token-based breakpoints
+        - Performance-optimized CSS generation with proper CSS layers
+
+    # Test Files
+    - path: "**/packages/*/src/*.test.tsx"
+      instructions: |
+        Review test files for:
+        - English test descriptions (convert Korean descriptions to English)
+        - Comprehensive test coverage including visual, behavioral, and accessibility tests
+        - Theme compatibility testing - ensure components work with different theme variants
+        - Proper use of @testing-library/react patterns
+        - Testing component variants, props, and edge cases
+        - ThemeProvider wrapper in tests when testing theme-dependent components
+        - Consistent test structure and naming conventions
+        - Proper setup and cleanup in test files
+
+    # Storybook Stories
+    - path: "**/packages/*/src/*.stories.tsx"
+      instructions: |
+        Review Storybook stories for:
+        - Complete component variant coverage in stories
+        - Theme showcase - demonstrate components with different theme variants (1st-4th)
+        - ThemeProvider integration in stories for theme-dependent components
+        - Proper story naming and organization
+        - Accessible and informative story descriptions
+        - Consistent args and argTypes definitions
+        - Documentation value for design system users
+
+    # Design Tokens
+    - path: "**/packages/tokens/src/**/*.ts"
+      instructions: |
+        Review design token changes for:
+        - Backward compatibility with existing components
+        - Consistent naming conventions following established patterns
+        - Proper TypeScript exports and type definitions
+        - Impact on overall design system consistency
+        - Documentation of token usage and purpose
+
+    # Package Configuration
+    - path: "**/packages/*/package.json"
+      instructions: |
+        Review package.json changes for:
+        - Version consistency with changeset workflow
+        - Proper dependency management (peer deps, dev deps)
+        - Consistent package structure and scripts
+        - Proper exports and entry points configuration
+
+    # TypeScript Configuration
+    - path: "**/tsconfig.json"
+      instructions: |
+        Review TypeScript configuration for:
+        - Strict type checking maintenance
+        - Consistent compiler options across packages
+        - Proper path mappings and module resolution
+        - Build optimization settings
+
+    # Build Configuration
+    - path: "**/packages/*/tsup.config.ts"
+      instructions: |
+        Review build configuration for:
+        - Consistent build targets and formats
+        - Proper external dependencies handling
+        - Source map and declaration generation
+        - Bundle optimization settings
+
+    # Root Configuration Files
+    - path: "biome.json"
+      instructions: |
+        Review Biome configuration for:
+        - Consistent formatting and linting rules
+        - Import organization rules following established patterns
+        - Accessibility rule consistency
+        - Integration with existing toolchain
+
+    # Documentation
+    - path: "**/README.md"
+      instructions: |
+        Review documentation for:
+        - Clear usage examples and API documentation
+        - Consistency with design system documentation standards
+        - Accessibility guidelines and examples
+        - Installation and setup instructions
+
+  auto_review:
+    enabled: true
+    ignore_title_keywords:
+      - "Version Packages"
+      - "WIP"
+      - "DO NOT MERGE"
+      - "[WIP]"
+      - "draft"
+      - "Release"
+      - "release"
+    drafts: false
+    base_branches:
+      - "main"
+      - "release/v1"
+    auto_incremental_review: true
+chat:
+  auto_reply: true

.github/workflows/ci.yaml

@@ -24,7 +24,7 @@ jobs:
     - name: Install dependencies
       run: pnpm install
     - name: Lint
-      run: pnpm --filter="...[origin/${{ github.base_ref }}]" "/lint:*/"
+      run: pnpm --filter="...[origin/${{ github.base_ref }}]" lint
     - name: Test
       run: pnpm --filter="...[origin/${{ github.base_ref }}]" test
     - name: Type check

.storybook/preview.ts

@@ -1,7 +1,15 @@
 import 'sanitize.css';
 import 'sanitize.css/typography.css';
+
 import type { Preview } from '@storybook/react';
 
 export default {
   tags: ['autodocs'],
+  parameters: {
+    options: {
+      storySort: {
+        order: ['INTRO', 'Components'],
+      },
+    },
+  },
 } satisfies Preview;

.templates/component/package.json

@@ -14,8 +14,7 @@
     "build": "tsup",
     "build:storybook": "storybook build",
     "dev:storybook": "storybook dev -p 6006",
-    "lint:biome": "pnpm exec biome lint",
-    "lint:eslint": "pnpm exec eslint",
+    "lint": "pnpm exec biome lint",
     "test": "vitest",
     "typecheck": "tsc",
     "prepack": "pnpm run build"

.vscode/extensions.json

@@ -1,7 +1,6 @@
 {
   "recommendations": [
     "biomejs.biome",
-    "dbaeumer.vscode-eslint",
     "github.vscode-github-actions"
   ]
 }

.vscode/settings.json

@@ -1,7 +1,26 @@
 {
   "editor.defaultFormatter": "biomejs.biome",
+  "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "quickfix.biome": "explicit",
     "source.organizeImports.biome": "explicit"
-  }
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
 }

README.md

@@ -1,7 +1,7 @@
 ![](./public/og-image.png)
 
 # Sipe Design System 
-[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/sipe-team/side/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.7-ff4785?logo=storybook)](https://67417e47644abe8d4e63f82f-lynsfaiqst.chromatic.com) ![Tests](https://img.shields.io/badge/Vitest-2.1.4-green?logo=vitest) [![codecov](https://codecov.io/gh/sipe-team/side/branch/changeset-release%2Fmain/graph/badge.svg?token=1TNLVUFPXC)](https://codecov.io/gh/sipe-team/side) <img alt="Github Stars" src="https://badgen.net/github/stars/sipe-team/side" /> 
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/sipe-team/side/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.7-ff4785?logo=storybook)](https://storybook.sipe.team/?path=/docs/what-is-side--docs) ![Tests](https://img.shields.io/badge/Vitest-2.1.4-green?logo=vitest) [![codecov](https://codecov.io/gh/sipe-team/side/branch/changeset-release%2Fmain/graph/badge.svg?token=1TNLVUFPXC)](https://codecov.io/gh/sipe-team/side) <img alt="Github Stars" src="https://badgen.net/github/stars/sipe-team/side" /> 
 
 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.
 

biome.json

@@ -9,8 +9,10 @@
     "indentStyle": "space",
     "lineWidth": 120
   },
-
   "linter": {
+    "domains": {
+      "react": "recommended"
+    },
     "enabled": true,
     "rules": {
       "correctness": {
@@ -30,5 +32,37 @@
     "formatter": {
       "quoteStyle": "single"
     }
+  },
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true,
+    "root": "."
+  },
+  "assist": {
+    "actions": {
+      "source": {
+        "organizeImports": {
+          "level": "on",
+          "options": {
+            "groups": [
+              ":NODE:",
+              ":BLANK_LINE:",
+              ["react", "react/**", "react-*", "react-*/**"],
+              ":BLANK_LINE:",
+              ["@sipe-team/tokens", "@sipe-team/typography", "@sipe-team/**"],
+              ":BLANK_LINE:",
+              ["@vanilla-extract/**"],
+              ":BLANK_LINE:",
+              ["@radix-ui/**"],
+              ":BLANK_LINE:",
+              ":PACKAGE:",
+              ":BLANK_LINE:",
+              ":PATH:"
+            ]
+          }
+        }
+      }
+    }
   }
 }

docs/introduction.mdx

@@ -1,17 +1,11 @@
 import { Meta } from '@storybook/addon-docs';
 import { Typography } from '../packages/typography/src';
 
-<Meta title="What is Side?" />
+<Meta title="INTRO/What is Side?" />
 
 <div style={{ margin: '0 auto', maxWidth: '800px', padding: '20px' }}>
   <div style={{ textAlign: 'start' }}>
-        <Typography asChild size={48} style={{
-        background: 'linear-gradient(45deg,#00FFFF,#00FF99)',
-        WebkitBackgroundClip: 'text',
-        WebkitTextFillColor: 'transparent',
-        letterSpacing: '-2px',
-        textShadow: '0 2px 10px rgba(0,0,0,0.1)',
-      }}>
+        <Typography asChild size={48} >
           <h1>Sipe Design System</h1>
         </Typography> 
   </div>