Getting Started

インストール

1. レジストリの設定

プロジェクトの .npmrc に GitHub Packages レジストリを追加する。

.npmrc

@bi-shop-it:registry=https://npm.pkg.github.com

2. パッケージのインストール

pnpm add @bi-shop-it/ui

スタイルの読み込み

アプリケーションの globals.css に @bi-shop-it/ui/styles.css を読み込む。

globals.css

@import 'tailwindcss';
@import '@bi-shop-it/ui/styles.css';

UIProvider の設定

ルートレイアウトで UIProvider を配置する。Next.js の場合、Link コンポーネントを渡すことでルーティングが統合される。

providers.tsx

'use client';

import { UIProvider } from '@bi-shop-it/ui/provider';
import Link from 'next/link';

const Providers = ({ children }: { children: React.ReactNode }) => (
  <UIProvider linkComponent={Link}>{children}</UIProvider>
);

export { Providers };

layout.tsx

import { Providers } from '@/components/providers';

import './globals.css';

const RootLayout = ({ children }: { children: React.ReactNode }) => (
  <html lang="ja">
    <body>
      <Providers>{children}</Providers>
    </body>
  </html>
);

export default RootLayout;

コンポーネントの使用

すべてのコンポーネントは @bi-shop-it/ui/<component-name> から named import で使用する。

import { ActionButton } from '@bi-shop-it/ui/action-button';
import { Alert } from '@bi-shop-it/ui/alert';
import { Card } from '@bi-shop-it/ui/card';