@green-spot/adminkit-react

v0.1.2

Published

22 days ago

adminkit の React コンポーネントライブラリ

0High
0Medium
0Low

green-spot

adminkit-react

adminkit（管理画面の CSS キット）の React 19 コンポーネント。

CSS は adminkit を npm 依存で読み込む（単一ソース）。このパッケージが持つのは、クラス契約をラップする React コンポーネントと、対話挙動だけ。

対になるパッケージ：adminkit-svelte（Svelte 5 版）
3 者の関係とドリフト管理：PARITY.md

インストール

npm install @green-spot/adminkit-react

react@^19 が peer dependency。@green-spot/adminkit は依存として自動で入る。

セットアップ

CSS を 1 度だけ読み込む（エントリの main.tsx など）。

import '@green-spot/adminkit/css';

CSS は @green-spot/adminkit から直接 import するので、利用側でも直接依存に宣言する （@green-spot/adminkit-react の推移的な依存に頼らない）。

npm install @green-spot/adminkit @green-spot/adminkit-react

テーマは <html> の属性で切り替える。

<html data-theme-style="ink" data-theme-mode="light">

| 属性 | 値 | |---|---| | data-theme-style | ink（既定） / stone / dusk / volt | | data-theme-mode | light（既定） / dark |

使い方

import { Card, List, Row, Dot, Badge, Meter } from '@green-spot/adminkit-react';

<Card heading="接続">
  <List variants={['rows', 'bordered', 'interactive']}>
    <Row
      lead={<Dot variant="success" />}
      title="本番 API"
      sub="api.example.com"
      value="22.4k"
      trail={<Badge variant="success">稼働中</Badge>}
    />
  </List>
</Card>

<Meter label="ストレージ" value="68%" segments={[{ width: 68 }]} />

見出しのレベルは Card などが自動で管理する（h1 → h2 → h3 とスキップしない）。自作の部品でセクショニングするときは useHeadingLevel / HeadingLevelProvider を使う。

コンポーネント一覧

レイアウト

| コンポーネント | Props | 説明 | |---|---|---| | Stack | gap?: string | 縦に積む。直下の子の間にだけ間隔が入る | | Cluster | justify?: 'center' \| 'right' | 横に並べて折り返す。ボタン群・チップ列 | | Grid | cols?: 2 \| 3 \| 4 | 等幅で並べる。省略時は幅に応じた自動折り返し |

フォーム

| コンポーネント | Props | 説明 | |---|---|---| | Button | variant?: 'primary' \| 'success' \| 'warning' \| 'danger' \| 'ghost', size?: 'small', full?: boolean | ボタン。type の既定は "button" | | Fields | variant?: 'horizontal' \| 'inline', as?: 'div' \| 'form' | 入力欄のまとまり。枠・高さ・焦点・エラーの見せ方はここに集約 | | Field | label: string, hiddenLabel?: boolean, hint?: string, error?: string | ラベル付きの 1 項目。children に入力要素を置く |

表示

| コンポーネント | Props | 説明 | |---|---|---| | Card | heading?: string, variant?: 'danger' | カード（<section>）。1 カード＝1 つの問いに答える | | Table | compact?: boolean, auto?: boolean | テーブル。横スクロールのラッパー込み | | List | variants?: ListVariant[], as?: 'ul' \| 'ol' | リスト。'rows' で情報行にする。'compact' は 'rows' と併せたときだけ効く | | Row | lead?, title?, sub?, value?, trail?, state?: 'selected' \| 'danger' | 情報行（List の rows の中）。4 スロットは全て任意 | | DefinitionList | variants?: ('bordered' \| 'striped' \| 'horizontal')[] | 定義リスト。dt / dd は div でグループ化する | | Badge | variant?: 'primary' \| 'success' \| 'warning' \| 'danger' | 札。状態そのものが読む対象のとき | | Tag | variant?, onDismiss?: () => void | タグ。分類の付与 | | TagList | — | タグの折り返しコンテナ | | Dot | variant?: 'accent' \| 'success' \| 'warning', count?: number \| string | 粒。省略時は危険色 | | Kbd | — | キーヒント。組み合わせは並べて書く | | Progress | value: number, max?, variant?, pageTop?, label: string | 単一の進捗（native <progress>） | | Meter | segments: MeterSegment[], size?: 'default' \| 'stacked' \| 'inline', label: string, value?: string | 内訳の帯。区分が複数あるとき（<progress> は値を 1 つしか持てない） | | Strip | cells: StripCell[], compact?, label: string, from?, to? | 時間の帯。from と to の両方で目盛が出る | | Skeleton | shape?: 'text' \| 'circle', width?, height?, label?: string \| null | 読み込み中の骨組み。label={null} で装飾扱い | | Spinner | size?: 'small' \| 'large', current?: boolean, label?: string \| null | 読み込み中インジケータ | | LoadingState | compact?, message?, label? | 領域中央のスピナー。EmptyState と余白が揃っている | | EmptyState | heading?, variant?: 'error', compact?, icon? | 中身が無いときの表示。空 / 読み込み中 / 失敗を同じ高さで置き換えられる |

フィードバック

| コンポーネント | Props | 説明 | |---|---|---| | Alert | variant?: 'success' \| 'warning' \| 'danger' | 本文の中に置く通知 | | Banner | variant?, onDismiss?: () => void | ページ上部の帯。行動ボタンを必ず 1 つ添える | | Modal | open, onClose, label, size?: 'default' \| 'wide', header?, footer? | モーダル。判断を 1 つ求めて閉じるとき | | Drawer | open, onClose, label, header?, footer? | 右端に固定する縦長のパネル。一覧を見たまま 1 件を長く読む・編集するとき | | Palette | open, onClose, label, query, onQueryChange, placeholder?, hints? | コマンドパレット。候補の絞り込みと上下移動は含まない（アプリ固有。adminkit 側も同じ範囲） | | Tabs | tabs: Tab[], active?, onActiveChange?, label | タブ。WAI-ARIA のキーボード操作つき |

未移植のコンポーネントは PARITY.md を参照。

開発

npm install
npm run typecheck   # tsc --noEmit
npm test            # vitest（判定ロジックの純粋関数）
npm run build       # dist/ へ ESM + 型定義を出力

リリースは vX.Y.Z タグを push すると CI が npm publish する（Trusted Publishing / OIDC）。 package.json の version は常に 0.0.0 のプレースホルダで、実バージョンはタグ駆動。 adminkit の CSS を先に公開してから依存を上げる手順は PARITY.md を参照。

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme