CLI

CLIコマンドを使用してコンポーネントやテーマを生成する方法を学ぶ。

インストール

CLIを使用するには、まずプロジェクトに@yamada-ui/cliをインストールする必要があります。

pnpm add -D @yamada-ui/cli

コマンド

init

initコマンドを実行すると、プロジェクトに必要なファイルやフォルダが作成されます。

pnpm yamada-cli init
Usage: pnpm yamada-cli init [options]

initialize your project and install dependencies.

Options:
  --cwd <path>               current working directory.
  -c, --config <path>        path to the config file. (default: "ui.json")
  -o, --overwrite            overwrite existing files. (default: false)
  -t, --tag <name>           tag for the registries (e.g. dev, next).
  -j, --jsx                  use jsx instead of tsx. (default: false)
  -y, --yes                  skip all confirmation prompts. (default: false)
  -m, --monorepo             enable monorepo mode.
  --no-monorepo              disable monorepo mode.
  -p, --package-name <name>  package name.
  -s, --src                  use `src/` directory when choice is monorepo.
  -i, --install              install dependencies when choice is monorepo.
  --no-install               do not install dependencies when choice is monorepo.
  -f, --format               use Prettier.
  --no-format                do not use Prettier.
  -l, --lint                 use ESLint.
  --no-lint                  do not use ESLint.
  --outdir <path>            output directory path.
  -h, --help                 display help for command

initコマンドを実行すると、次のプロンプトが表示されます。

Would you like to use monorepo? (recommended) … No / Yes
What is the path to the monorepo? … ./workspaces/ui
What is the package name? … @workspaces/ui
Would you like your code inside a `src/` directory? … No / Yes
Would you like to use Prettier? … No / Yes
Would you like to use ESLint? … No / Yes

プロンプトの後、コンフィグと必要な依存関係がインストールされます。

add

addコマンドを実行すると、プロジェクトに指定したコンポーネントと依存関係が追加されます。

pnpm yamada-cli add box

コンポーネントを指定しない場合は、利用可能なすべてのコンポーネントが追加されます。

pnpm yamada-cli add
Usage: pnpm yamada-cli add [options] [components...]

add a component to your project.

Arguments:
  components           components to add.

Options:
  --cwd <path>         current working directory.
  -c, --config <path>  path to the config file. (default: "ui.json")
  -o, --overwrite      overwrite existing files. (default: false)
  -s, --sequential     run tasks sequentially. (default: false)
  -y, --yes            skip all confirmation prompts. (default: false)
  -i, --install        install dependencies.
  --no-install         do not install dependencies.
  -f, --format         format the output files.
  --no-format          do not format the output files.
  -l, --lint           lint the output files.
  --no-lint            do not lint the output files.
  -t, --tag <name>     tag for the registries (e.g. dev, next).
  -h, --help           display help for command

diff

diffコマンドを実行すると、指定したコンポーネントのローカルとリモートの差分を確認できます。

pnpm yamada-cli diff box

コンポーネントを指定しない場合は、ローカルにあるすべてのコンポーネントの差分を確認できます。

pnpm yamada-cli diff
Usage: pnpm yamada-cli diff [options] [component]

check for updates against the registry.

Arguments:
  component            component to check.

Options:
  --cwd <path>         current working directory.
  -c, --config <path>  path to the config file. (default: "ui.json")
  -s, --sequential     run tasks sequentially. (default: false)
  -d, --detail         show detailed changes. (default: false)
  -y, --yes            skip all confirmation prompts. (default: false)
  -u, --update         update files when there are file diff.
  --no-update          do not update files when there are file diff.
  -i, --install        install dependencies when updating files.
  --no-install         do not install dependencies when updating files.
  -t, --tag <name>     tag for the registries (e.g. dev, next).
  -h, --help           display help for command

update

updateコマンドを実行すると、指定したコンポーネントを更新します。

pnpm yamada-cli update box

コンポーネントを指定しない場合は、ローカルにあるすべてのコンポーネントが更新されます。

pnpm yamada-cli update
Usage: pnpm yamada-cli update [options] [components...]

update components in your project.

Arguments:
  components           components to update.

Options:
  --cwd <path>         current working directory.
  -c, --config <path>  path to the config file. (default: "ui.json")
  -s, --sequential     run tasks sequentially. (default: false)
  -F, --force          force update, overwriting local changes. (default: false)
  -y, --yes            skip all confirmation prompts. (default: false)
  -i, --install        install dependencies.
  --no-install         do not install dependencies.
  -f, --format         format the output files.
  --no-format          do not format the output files.
  -l, --lint           lint the output files.
  --no-lint            do not lint the output files.
  -t, --tag <name>     tag for the registries (e.g. dev, next).
  -h, --help           display help for command

theme

themeコマンドを実行すると、指定されたパスにテーマを生成します。

pnpm yamada-cli theme
Usage: pnpm yamada-cli theme [options] [path]

generate theme to your project.

Arguments:
  path                       path to the theme directory.

Options:
  --cwd <path>               current working directory.
  -c, --config <path>        path to the config file. (default: "ui.json")
  -o, --overwrite            overwrite existing directory. (default: false)
  -j, --js                   use js instead of ts.
  -y, --yes                  skip all confirmation prompts. (default: false)
  -p, --package-name <name>  package name (for monorepo).
  -s, --src                  use src/ directory.
  --no-src                   do not use src/ directory.
  -i, --install              install dependencies when choice is monorepo.
  --no-install               do not install dependencies when choice is monorepo.
  -f, --format               format the output files.
  --no-format                do not format the output files.
  -l, --lint                 lint the output files.
  --no-lint                  do not lint the output files.
  -t, --tag <name>           tag for the registries (e.g. dev, next).
  -h, --help                 display help for command

tokens

tokensコマンドを実行すると、カスタマイズしたテーマの型定義を更新できます。 この型定義は、Style Propsなどで使用されます。

pnpm yamada-cli tokens
Usage: pnpm yamada-cli tokens [options] [path]

generate theme typings.

Arguments:
  path                 path to the theme file.

Options:
  --cwd <path>         current working directory.
  -c, --config <path>  path to the config file. (default: "ui.json")
  -o, --out <path>     output path.
  -f, --format         format the output file.
  --no-format          do not format the output file.
  -l, --lint           lint the output file.
  --no-lint            do not lint the output file.
  --internal           generate internal tokens. (default: false)
  -h, --help           display help for command

設定

initコマンドを実行した後、プロジェクトにui.jsonが生成されます。ui.jsonを変更することで、さまざまなカスタマイズが可能です。

プロパティデフォルト説明
path./ui生成されるディレクトリのパス。
monorepofalseモノレポで生成します。
jsxfalseJSXファイルで生成します。
theme.path./themeテーマが生成されるディレクトリのパス。
components.path./componentsコンポーネントが生成されるディレクトリのパス。
components.overwritetrueコンポーネントなどが追加されたときにローカルの既存のコンポーネントの参照先を更新します。
components.dependentstrueコンポーネントを追加するときに依存されているコンポーネントも追加します。
components.dependenciesfalseコンポーネントを追加するときに依存しているコンポーネントも追加します。
hooks.path./hooksフックが生成されるディレクトリのパス。
hooks.overwritefalseコンポーネントなどが追加されたときにローカルの既存のフックの参照先を更新します。
hooks.dependentstrueフックを追加するときに依存されているフックも追加します。
hooks.dependenciesfalseフックを追加するときに依存しているフックも追加します。
providers.path./providersプロバイダーが生成されるディレクトリのパス。
providers.overwritefalseコンポーネントなどが追加されたときにローカルの既存のプロバイダーの参照先を更新します。
providers.dependentstrueプロバイダーを追加するときに依存されているプロバイダーも追加します。
providers.dependenciesfalseプロバイダーを追加するときに依存しているプロバイダーも追加します。
format.configPath-Prettierが参照するコンフィグのパス。
format.enabledfalseコンポーネントなどを追加・更新するときにPrettier--writeを実行します。
lint.enabledfalseコンポーネントなどを追加・更新するときにESLint--fixを実行します。