Appkit React

業務アプリケーション向けの React 19 コンポーネント、スキーマ駆動フォーム、レコードビューです。

概要

JSON Schema から検証付きフォームを作り、独自のバックエンドに保存処理を接続できます。フォームにレコードテーブル、共通 UI プリミティブ、AI 提案の確認画面を組み合わせられます。

導入する理由と価値

Appkit のスキーマとレコードの契約に表示層が必要な場合に React を使用します。認証済みのデータアダプターとサーバーのルールを用意すると、フォームがそのアダプターを使用して保存結果を UI に通知します。

React は Appkit Core に依存します。以下の例のように、自分のコードが Core の型や関数をインポートする場合は、Core も直接インストールしてください。バックエンドだけで検証、ストレージ、グラフ計算を行う場合は Core のみを使用します。

主な機能

スキーマフォームとレコードテーブル: 共通のレコード契約を基に入力、フィルター、CRUD ビューを構築します。Tools ガイド
React UI プリミティブ: ボタン、ダイアログ、共有プロバイダー、フックを組み合わせます。UI ガイド
AI インターフェース: チャットと提案確認を、アプリケーションの明示的な承認・実行の境界に接続します。AI ガイド
明示的な連携: スタイルをインポートし、ホストのプロバイダーとデータアダプターを用意します。フォームの完全な手順

クイックスタート

要件とインストール

既存の React アプリケーションを使用します。パッケージが宣言する Node.js の要件は 24 以降で、React と React DOM の ^19.2.3 が必要です。ESM、CommonJS、TypeScript の型宣言を提供します。

npm install @alneas/appkit-react @alneas/appkit-core react@^19.2.3 react-dom@^19.2.3 @tanstack/[email protected]
# Or use bun add with the same package names and versions.

この例は TanStack Query を直接インポートするため、依存を明示しています。アプリケーションのスタイルシートのエントリーポイントで Appkit CSS を一度インポートしてください。FormView には QueryClientProvider と DataAccessProvider も必要ですが、単独の Button にはこれらのデータプロバイダーは不要です。チャート、バーコード、QR、AI の任意のピア依存は、対応する機能を使う場合にのみインストールしてください。エクスポートリファレンスを参照してください。

申請フォームを表示して保存する

このコンポーネントは、アプリケーションの DataAccessAdapter を受け取ります。バックエンドに対応するアダプターを実装し、adapter プロパティとして渡してください。デモ用バックエンドや認証情報は含まれません。

import { useState, type ComponentProps } from 'react';
import type { DataAccessAdapter } from '@alneas/appkit-core/data';
import { QueryClientProvider } from '@tanstack/react-query';
import {
  createQueryClient,
  DataAccessProvider,
} from '@alneas/appkit-react/tools/data-access/react';
import { FormView } from '@alneas/appkit-react/tools/form';
import '@alneas/appkit-react/styles';

const schema: ComponentProps<typeof FormView>['schema'] = {
  type: 'object',
  properties: {
    name: { type: 'string', title: 'Name', minLength: 2 },
    reason: { type: 'string', title: 'Reason', 'x-ui': { widget: 'textarea' } },
  },
  required: ['name'],
};

export function RequestForm({ adapter }: { adapter: DataAccessAdapter }) {
  const [client] = useState(createQueryClient);
  const [saved, setSaved] = useState('');

  return (
    <QueryClientProvider client={client}>
      <DataAccessProvider adapter={adapter}>
        <FormView
          testId="persistence"
          collection="records"
          mode="create"
          schema={schema}
          validation={{
            emptyStrings: 'preserve',
            locale: 'en',
            cast: { numericMode: 'strict' },
          }}
          onSuccess={record => setSaved(JSON.stringify(record))}
        />
        <output aria-label="Persisted">{saved}</output>
      </DataAccessProvider>
    </QueryClientProvider>
  );
}

フォームには Name と Reason のフィールドが表示されます。2文字未満の名前は検証に失敗する必要があります。保存が成功すると、アダプターから返されたレコードを表示します。認可、業務ルール、並行処理の制御はバックエンドで実施してください。ブラウザーでの検証は UI の境界にすぎません。すでにアプリケーションに共有の Query クライアントがある場合は、別のプロバイダーを追加せず既存のものを再利用してください。失敗と再試行の検査は、完全な手順を参照してください。

次のステップ

スキーマフォームとレコードテーブル: 業務 UI のエントリーポイント。
UI プリミティブとプロバイダー: コンポーネントとホストの共通設定。
公開エクスポートと任意のピア依存: 正確な機能別パスと追加の依存関係。
AI 連携とセキュリティ: 提案確認と実行の境界。
移行ガイド: 以前の個別パッケージ構成からの移行。

コーディングエージェント向け

エージェント向け指示から始め、API カタログとドキュメント全文を使用してください。インストール済みパッケージには、これらのファイルが consumer-ai/ と llms-full.txt 配下に含まれます。場所は manifest の appkit.agent フィールドにも記載しています。

開発への参加とライセンス

開発への参加 · リリース手順 · MIT ライセンス

コンパイル済み CSS から保持したサードパーティーのライセンス文は、THIRD_PARTY_NOTICES.md に含まれ、パッケージのルートにも同梱されます。