Wishket Design System
Wishket Design System (WDS) is the design concept system for Wishket products.
## Features
- **Steady Components**. Frequently used Components based on the Atomic Design Pattern.
- **Storybook**. You can explore the components in [Storybook](https://design-system.wishket.com).
## Requirements
### Node.js
- **Node.js**: >= 24.10.0 (권장)
- **TypeScript**: >= 5.0
이 패키지는 Node.js 24.10.0 이상에서 테스트되었습니다.
### Package Manager
- **Yarn**: >= 4.0.0 (권장)
- **npm**: >= 10.0.0
- **pnpm**: >= 9.0.0
## Getting Started
### 1. Install
**Choose according to your environment.**
```shell
yarn add @wishket/design-system
```
```shell
npm install @wishket/design-system
```
```shell
pnpm add @wishket/design-system
```
### 2. Default Setting in tailwind.config.ts
```typescript
// tailwind.config.ts
import path from 'path';
import type { Config } from 'tailwindcss';
const config: Config = {
content: [
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
path.join(path.dirname(require.resolve('@wishket/design-system')), '**/*.{js,ts,jsx,tsx,mdx}'),
],
presets: [require('@wishket/design-system/config')],
plugins: [],
};
export default config;
```
## Usage
```typescript
//Home.tsx
import { Typography } from '@wishket/design-system';
export const Home = () => {
return (
Hello, World!
);
}
export default Home;
```
## Navigation 컴포넌트와 라우팅 라이브러리
`TextLink`, `Menu`, `GNBList.Item`은 기본적으로 `` 태그로 렌더되며, `as` prop으로 라우팅 라이브러리의 Link를 주입할 수 있습니다.
### Next.js와 함께 사용
```tsx
import Link from 'next/link';
import { TextLink, Menu, GNBList } from '@wishket/design-system';
프로젝트
```
매 호출마다 `as`를 적기 번거롭다면 컨슈머 앱에서 wrapper를 한 번만 정의해두는 패턴을 권장합니다.
```tsx
// app/components/AppTextLink.tsx
import { ComponentProps } from 'react';
import Link from 'next/link';
import { TextLink } from '@wishket/design-system';
export const AppTextLink = (props: ComponentProps) => (
);
```
### react-router와 함께 사용
`react-router`의 `Link`는 `to` prop을 쓰므로 `href` → `to` 어댑터가 필요합니다.
```tsx
import { Link as RouterLink } from 'react-router-dom';
const RouterLinkAdapter = ({
href,
...rest
}: { href: string } & React.ComponentProps) => (
);
```
### v3 마이그레이션
v3.0부터 위 컴포넌트들이 더 이상 자동으로 `next/link`를 사용하지 않습니다. 컨슈머 앱에서 일괄 변환을 원한다면 패키지에 포함된 jscodeshift codemod를 사용하세요.
```bash
npx jscodeshift \
-t node_modules/@wishket/design-system/scripts/codemods/add-as-link.ts \
--extensions=tsx,ts --parser=tsx \
src/
```
자세한 내용은 [`scripts/codemods/README.md`](./scripts/codemods/README.md)를 참고하세요.
## Customize Theme in Config File
```typescript
// tailwind.config.ts
import path from 'path';
import type { Config } from 'tailwindcss';
import colors from '@wishket/design-system/colors';
const config: Config = {
// default config
theme: {
colors: {
primary: colors.w_primary,
},
},
};
export default config;
```
### Troubleshooting Color Imports
If you're having trouble importing colors from '@wishket/design-system/colors', please verify your TypeScript configuration:
- Verify TypeScript version 5.0 or later
- Check your `tsconfig.json` settings:
```json
{
"compilerOptions": {
"moduleResolution": "bundler",
"module": "ESNext"
}
}
```