🧩 Nodeblocks フロントエンドブロック
モダンなビジネスアプリケーションのための完全なコンポーネントライブラリ ⚡
Nodeblocks フロントエンドブロックは、アプリ開発を加速する 42 の本番環境対応 React コンポーネント のコレクションです。モジュール式でカスタマイズ可能なブロックが、アプリケーションの UI を形作ります。
📋 目次
🎯 フロントエンドブロックとは
フロントエンドブロックは、アプリケーションの視覚的基盤となる 事前構築済みのカスタマイズ可能な React コンポーネント です。
- 🎨 完全にカスタマイズ可能: ブランドやデザイン要件に適合
- 🔧 本番環境対応: TypeScript で構築、テスト済み、最適化済み
- 🧩 モジュール式: 単体でも組み合わせても利用可能
- ⚡ 高パフォーマンス: モダンな React のベストプラクティス
🏗️ コンポーネントカテゴリ
バックエンドのドメインではなく、画面上の UI ジョブ でグループ化されています。サイドバーのカテゴリから閲覧できます。
ドキュメントは frontend-blocks/ 配下のフォルダ構造に沿っています（例: layout-and-navigation/navbar/）。
🧭 レイアウトとナビゲーション
| コンポーネント | 説明 |
|---|---|
| navbar | レスポンシブなメインナビゲーションバー |
| side-navigation | 折りたたみ可能なサイドバーナビゲーション |
| breadcrumb | ページ階層のパンくずリスト |
| footer | フッターコンポーネント |
🔐 認証
| コンポーネント | 説明 |
|---|---|
| sign-in | ログイン・認証 |
| sign-up | 新規ユーザー登録 |
| reset-password | パスワード再設定 |
| accept-invitation | 組織招待の承諾フロー |
| change-email | メールアドレス変更 |
| change-password | パスワード変更 |
📋 リストとテーブル
| コンポーネント | 説明 |
|---|---|
| list-users | ユーザー一覧・管理 |
| list-organizations | 組織一覧・管理 |
| list-invites | 組織招待の管理 |
| list-products-table | 商品一覧（テーブル） |
| list-products-grid | 商品一覧（グリッド） |
| list-order | 受注一覧・管理 |
| list-order-table | 受注一覧（テーブル） |
🔍 詳細ビュー
| コンポーネント | 説明 |
|---|---|
| view-user | ユーザープロフィール詳細 |
| view-organization | 組織の詳細情報 |
| view-product | 商品の詳細表示 |
| view-order | 受注の詳細情報 |
| view-basic-information | 基本情報の読み取り専用表示 |
| view-attribute-selection | 属性選択の読み取り専用表示 |
📝 フォームとウィザード
| コンポーネント | 説明 |
|---|---|
| create-organization | 組織作成ワークフロー |
| create-product | 商品作成 UI |
| edit-product | 商品編集ワークフロー |
| basic-information | プロフィール・基本情報フォーム |
| edit-basic-information | 基本情報の編集 |
| attribute-selection | 商品属性の選択 |
| edit-attribute-selection | 商品属性の編集 |
🔎 検索とフィルター
| コンポーネント | 説明 |
|---|---|
| filter-search-panel | 高度な検索・フィルタリング |
| filter-list | フィルタ可能なリスト |
| search-by-chips | チップによる検索 |
✨ マーケティングとコンテンツ
| コンポーネント | 説明 |
|---|---|
| hero | ヒーローセクション |
| faq | よくある質問セクション |
| merits | 実績・メリットの表示 |
| how-to-use | 使い方・ガイド |
💬 コミュニケーション
| コンポーネント | 説明 |
|---|---|
| chat-conversation | リアルタイムチャット UI |
| chat-conversation-list | チャット会話一覧 |
⚙️ システムとフィードバック
| コンポーネント | 説明 |
|---|---|
| settings | アプリ設定画面 |
| error-block | エラーメッセージ表示 |
| notifications | アプリ内通知 |
✨ 主な特長
🎨 デザインシステム
- コンポーネント間で一貫したスタイル
- カスタマイズ可能なテーマ
- レスポンシブデザイン
- モダンな UI/UX
🔧 開発者体験
- 全体で TypeScript サポート
- 充実したドキュメント
- 明確な props インターフェース
🚀 パフォーマンス
- 本番環境向けに最適化
- 遅延読み込み対応
- 効率的なレンダリング
📱 アクセシビリティ
- キーボード操作
- スクリーンリーダー対応
- フォーカス管理
🚀 はじめに
各コンポーネントは個別にインストールします。
npm install @nodeblocks/frontend-navbar-block
npm install @nodeblocks/frontend-signin-block
詳細なセットアップは クイックスタート と Vite セットアップガイド を参照してください。
Basal の Nodeblocks チームが ❤️ を込めて構築