로고SEED Design

seed-design.json

@seed-design/cli 를 사용할 때 필요한 설정들을 명시할 파일이에요.

설정

seed-design.json 파일을 생성하기 위한 명령어에요.

npx @seed-design/cli@latest init

seed-design 설정

  TypeScript를 사용중이신가요?
  Yes

  React Server Components를 사용중이신가요?
  No

  seed-design 폴더 경로를 입력해주세요. (기본값은 프로젝트 루트에 생성됩니다.)
  ./seed-design

옵션

path

path는 생성되는 컴포넌트의 기본 경로를 설정해요.

seed-design이 필요로 하는 폴더나 파일들은 path로 지정된 경로의 하위에 생겨요. seed-design의 root 폴더는 유저가 입력할 수 있게 하되, 그 내부에 생성되는 폴더나 파일들은 고정되는 형식이에요.

seed-design.json
{
  "path": "./seed-design"
}

만약 위와 같이 설정했다면, ./seed-design 폴더가 생성이 되고, 그 안에 ui, utils, hooks와 같은 폴더들이 생기게 될거에요.

action-button.tsx
alert-dialog.tsx
tabs.tsx
use-portal.ts
use-focus-trap.ts
classnames.ts
use-merge-refs.ts

rsc

리액트 서버 컴포넌트를 사용할지 여부를 설정해요.

true로 설정하면 컴포넌트에 use client directive가 추가돼요.

seed-design.json
{
  "rsc": true | false (default: false)
}

tsx

타입스크립트를 사용할지 여부를 설정해요.

true로 설정하면 컴포넌트에 .tsx 확장자이고, false로 설정하면 .jsx 확장자로 생성돼요.

seed-design.json
{
  "tsx": true | false (default: true)
}

$schema

준비중이에요.

On this page