基本的な利用

基本UIとrenderによる合成

react-uiは表示部品・操作状態・テーマを所有します。スキーマの解釈とCRUDはreact-toolsで扱います。

<DialogTrigger render={<Button />}>開く</DialogTrigger>
<Button nativeButton={false} render={<a href="/help" />}>ヘルプ</Button>

カスタム部品はref、イベント、aria属性、classNameを転送してください。 Buttonのloadingはdisabledとaria-busyを設定します。リンクにはnativeButton={false}を指定します。 Field、FieldLabel、FieldControlを組み合わせると、フォームProviderなしでラベル・説明を接続できます。 SearchableSelectInputは値・候補・検索・作成callbackを受け取り、DBに依存しません。

実行サンプルをStorybookでも使います。 bun run test:storybookでChromiumの操作とaxe検査を実行し、アクセシビリティ違反はエラーとします。 /stylesを明示的に読み込みます。全体resetが必要な場合だけ、その前に/reset.cssを指定します。

利用アプリのAI設定は node node_modules/@alneas/react-ui/dist/ai/setup.mjs --write で追加できます。