インストール
リポジトリ内に Vite アプリを作り、@werft-ai/ui と @werft-ai/react を import する
UI パッケージを使う小さな Vite アプリをリポジトリ内に作る。この節の残りのページは、このアプリを続けて作り込んでいく。
このページでは、リポジトリ内のアプリから二つのパッケージを workspace パッケージとして import する。このときパッケージは TypeScript のソースをそのままエクスポートする。リポジトリ外のアプリに @werft-ai/ui をインストールするにはリポジトリ外のアプリにインストールを見る。
準備
リポジトリのルートで依存関係をインストールする。ルートの node_modules/@werft-ai/ui と node_modules/@werft-ai/react が、packages/ui と packages/react を指すリンクとして作られる。
bun install必要なものは次のとおりである。いずれもこのリポジトリの他のパッケージがすでに使っているので、上記のインストールでルートの node_modules に入っている。
| 何が | なぜ |
|---|---|
React 19、react-dom | 二つのパッケージは React 19 で描画する |
@tanstack/react-query | @werft-ai/react の hook とブロックがこの cache を使う。アプリが QueryClientProvider で包む |
Tailwind CSS 4、@tailwindcss/vite | primitive の見た目は Tailwind のユーティリティで決まる。Tailwind なしで使うと、primitive はスタイルのない状態で描画される |
Vite、@vitejs/plugin-react | パッケージは TypeScript のソースをエクスポートするので、アプリのバンドラーがコンパイルする |
アプリを作る
リポジトリのルートに ui-demo ディレクトリを作り、二つのファイルを置く。ui-demo は workspace に入れない。import は上位へたどってルートの node_modules から解決される。
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Werft UI demo</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [react(), tailwindcss()],
// The blocks call /v1 on their own origin with the login cookie.
server: { proxy: { "/v1": "http://127.0.0.1:3000" } },
});server.proxy は、アプリの /v1 リクエストを、開発用サーバーの実行の手順で立ち上げたローカルスタックへ転送する。セッションブロックが、自分の origin の /v1 を Web ログインの cookie で呼ぶためである。理由はセッションブロックの組み込みにある。
src/styles.css はテーマの適用で、src/main.tsx はセッションブロックの組み込みで作る。
次のステップ
- テーマの適用: CSS を import し、ダークテーマを有効にする