注文詳細ブロック

ViewOrderコンポーネントは、ReactとTypeScriptで構築された完全にカスタマイズ可能な注文表示コンポーネントです。ヘッダー、ステータス情報、カスタマイズ可能な情報行を含む注文詳細を表示するための完全なインターフェースを、モダンなデザインパターンとともに提供します。

---

🚀 インストール

npm install @nodeblocks/frontend-view-order-block@0.2.0

---

📖 使用法

import {ViewOrder} from '@nodeblocks/frontend-view-order-block';

基本的な使用法

ライブエディター

function BasicViewOrder() {
  const orderInfoRows = [
    {label: '注文ID', value: '#12345'},
    {label: 'お客様', value: '田中太郎'},
    {label: '日付', value: '2024-01-15'},
    {label: '合計', value: '¥19,999'},
  ];

  return (
    <ViewOrder
      headerLabel="注文詳細"
      statusText="処理中"
      statusLabel="現在のステータス"
      infoRows={orderInfoRows}
      style={{backgroundColor: 'white', padding: '16px'}}
    >
      <ViewOrder.Header />
      <ViewOrder.InfoRowList />
    </ViewOrder>
  );
}

結果

Loading...

高度な使用法

ライブエディター

function AdvancedViewOrder() {
  const orderInfoRows = [
    {
      label: '📦 注文ID',
      value: (
        <span
          style={{
            fontFamily: 'monospace',
            background: 'rgba(105, 124, 213, 0.1)',
            padding: '4px 8px',
            borderRadius: '6px',
            fontWeight: 'bold',
          }}
        >
          #ORD-2024-789
        </span>
      ),
    },
    {
      label: '👤 お客様',
      value: (
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <div
            style={{
              width: '32px',
              height: '32px',
              borderRadius: '50%',
              background: 'linear-gradient(135deg, rgb(105, 124, 213), rgb(85, 104, 193))',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              color: 'white',
              fontSize: '14px',
              fontWeight: 'bold',
            }}
          >
            田中
          </div>
          <span style={{ fontWeight: '600', color: '#2c3e50' }}>田中太郎</span>
        </div>
      ),
    },
    {
      label: '📅 注文日',
      value: (
        <div
          style={{
            background: 'linear-gradient(135deg, #e8f5e8, #f0f8f0)',
            padding: '8px 12px',
            borderRadius: '8px',
            border: '1px solid #4CAF50',
            color: '#2e7d32',
            fontWeight: 'bold',
          }}
        >
          2024年1月15日
        </div>
      ),
    },
    {
      label: '💰 合計金額',
      value: (
        <div
          style={{
            fontSize: '24px',
            fontWeight: 'bold',
            color: '#27ae60',
          }}
        >
          ¥129,999
        </div>
      ),
    },
  ];

  return (
    <ViewOrder
      headerLabel="🎯 注文 #ORD-2024-789"
      statusText="✅ 配送済み"
      statusLabel=""
      infoRows={orderInfoRows}
    >
      {({defaultBlocks, defaultBlockOrder}) => ({
        blocks: {
          header: {
            ...defaultBlocks.header,
            props: {
              ...defaultBlocks.header.props,
              sx: {
                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                color: 'white',
                padding: '24px',
                borderRadius: '16px 16px 0 0',
                 '& .nbb-view-order-status': {
                  color: 'black',
                  fontWeight: 'bold',
                },
              },
            },
          },
          infoRowList: {
            ...defaultBlocks.infoRowList,
            props: {
              ...defaultBlocks.infoRowList.props,
              sx: {
                background: 'white',
                padding: '24px',
                borderRadius: '0 0 16px 16px',
                boxShadow: '0 4px 20px rgba(0,0,0,0.1)',
              },
            },
          },
        },
        blockOrder: defaultBlockOrder,
      })}
    </ViewOrder>
  );
}

結果

Loading...

---

🔧 プロパティリファレンス

メインコンポーネントのプロパティ

プロパティ	型	デフォルト	説明
headerLabel	string	"Order Details"	注文ヘッダーセクションのラベルテキスト
statusText	string	undefined	注文ステータス表示のテキストコンテンツ
statusLabel	string	"Status"	ステータスフィールドのラベルテキスト
imageSrc	string	undefined	注文画像のソースURL（コンテキストで利用可能）
infoRows	Array<{label: string, value: ReactNode}>	[]	表示する情報行の配列
className	string	undefined	コンテナスタイリング用の追加CSSクラス名
children	BlocksOverride	undefined	デフォルトブロックをオーバーライドまたはカスタムコンポーネントレンダリングするための関数

注意: メインコンポーネントはMUI Stackプロパティを継承します。ルートコンテナはデフォルトでspacing={4}とsx={{ p: 3 }}を使用します。

サブコンポーネント

ViewOrderコンポーネントは、異なるセクション用の複数のサブコンポーネントを提供します。すべてのサブコンポーネントは、メインコンポーネントのコンテキストからデフォルト値を受け取り、プロパティを通じてこれらの値をオーバーライドできます。

ViewOrder.Header

タイトルとステータス情報を含む注文ヘッダーのコンテナ。

プロパティ	型	デフォルト	説明
children	ReactNode	undefined	デフォルトヘッダーレンダリングをオーバーライドするカスタムコンテンツ
headerLabel	string	コンテキストから	ヘッダーのラベルテキスト
className	string	undefined	スタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI Stackプロパティを継承します。デフォルトレイアウトはdirection="row"でspacing={4}、justifyContent: 'space-between'、alignItems: 'center'です。

ViewOrder.Status

ラベルとスタイル付きステータスボックスを含む注文ステータス情報を表示します。

プロパティ	型	デフォルト	説明
children	ReactNode	undefined	デフォルトステータスレンダリングをオーバーライドするカスタムコンテンツ
statusLabel	string	コンテキストから	ステータスフィールドのラベル
statusText	string	コンテキストから	ステータスのテキストコンテンツ
className	string	undefined	スタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI Stackプロパティを継承します。デフォルトでspacing={1}を使用します。ステータスボックスは最小幅200pxです。

ViewOrder.InfoRow

ラベルと値を持つ単一の情報行を表示します。

プロパティ	型	デフォルト	説明
label	ReactNode	必須	情報行のラベルコンテンツ
value	ReactNode	必須	情報行の値コンテンツ
className	string	undefined	スタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI Stackプロパティを継承します。下部ボーダー区切り線付きのdirection="row"を使用します。ラベルは最小幅180pxです。

ViewOrder.InfoRowList

infoRows配列から複数の情報行を表示するコンテナ。

プロパティ	型	デフォルト	説明
children	ReactNode	undefined	デフォルト情報行レンダリングをオーバーライドするカスタムコンテンツ
infoRows	Array<{label: string, value: ReactNode}>	コンテキストから	表示する情報行の配列
className	string	undefined	スタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI Stackプロパティを継承します。デフォルトで上部ボーダー区切り線があります。

---

🎨 Configuration examples

Custom Styled Components

function StyledViewOrderComponents() {
  const orderInfoRows = [
    {label: '注文ID', value: '#12345'},
    {label: 'ステータス', value: '完了'},
  ];

  return (
    <ViewOrder headerLabel="スタイル付き注文" statusText="完了" statusLabel="ステータス" infoRows={orderInfoRows}>
      <ViewOrder.Header
        sx={{
          bgcolor: 'primary.main',
          color: 'white',
          borderRadius: 2,
          p: 3,
        }}
      />
      <ViewOrder.Status
        sx={{
          '& .nbb-view-order-status': {
            bgcolor: 'success.main',
            color: 'white',
          },
        }}
      />
      <ViewOrder.InfoRowList
        sx={{
          bgcolor: 'grey.50',
          borderRadius: 2,
          p: 2,
        }}
      />
    </ViewOrder>
  );
}

Block Override Pattern

function BlockOverrideViewOrder() {
  const orderInfoRows = [
    {label: '注文ID', value: '#12345'},
    {label: '合計', value: '¥9,999'},
  ];

  return (
    <ViewOrder headerLabel="注文" statusText="保留中" statusLabel="ステータス" infoRows={orderInfoRows}>
      {({defaultBlocks, defaultBlockOrder}) => ({
        blocks: {
          header: {
            ...defaultBlocks.header,
            props: {
              ...defaultBlocks.header.props,
              sx: {background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'},
            },
          },
        },
        blockOrder: defaultBlockOrder,
      })}
    </ViewOrder>
  );
}

Complete Order Details

function CompleteOrderDetails() {
  const orderItems = [
    {name: '商品A', qty: 2, price: 49.99},
    {name: '商品B', qty: 1, price: 89.99},
    {name: '配送', qty: 1, price: 9.99},
  ];

  const orderInfoRows = [
    {
      label: '注文番号',
      value: (
        <span
          style={{
            fontFamily: 'monospace',
            fontWeight: 'bold',
            color: '#3b82f6',
          }}
        >
          #ORD-2024-12345
        </span>
      ),
    },
    {label: '注文日', value: '2024年1月15日'},
    {label: '支払い方法', value: 'クレジットカード (****1234)'},
    {
      label: '商品',
      value: (
        <div style={{display: 'flex', flexDirection: 'column', gap: '4px'}}>
          {orderItems.map((item, index) => (
            <div
              key={index}
              style={{
                display: 'flex',
                justifyContent: 'space-between',
                fontSize: '14px',
              }}
            >
              <span>
                {item.name} × {item.qty}
              </span>
              <span style={{fontWeight: '500'}}>¥{item.price.toFixed(2)}</span>
            </div>
          ))}
        </div>
      ),
    },
    {
      label: '小計',
      value: (
        <span style={{fontWeight: '600'}}>
          ¥{orderItems.reduce((sum, item) => sum + item.price * item.qty, 0).toFixed(2)}
        </span>
      ),
    },
    {
      label: '配送先住所',
      value: (
        <div style={{fontSize: '14px', lineHeight: '1.5'}}>
          田中太郎
          <br />
          新宿区新宿1-2-3
          <br />
          東京都 100-0001
          <br />
          日本
        </div>
      ),
    },
  ];

  return (
    <ViewOrder
      headerLabel="注文確認"
      statusText="配送済み"
      statusLabel="配送ステータス"
      infoRows={orderInfoRows}
    >
      <ViewOrder.Header />
      <ViewOrder.InfoRowList />
    </ViewOrder>
  );
}

---

🔧 TypeScriptサポート

包括的な型定義による完全なTypeScriptサポート:

import {ViewOrder} from '@nodeblocks/frontend-view-order-block';
import {ReactNode} from 'react';

// Info row interface
interface OrderInfoRow {
  label: string;
  value: ReactNode;
}

// Custom order data interface
interface CustomOrderData {
  orderId: string;
  customerName: string;
  status: 'pending' | 'processing' | 'shipped' | 'delivered' | 'cancelled';
  total: number;
  items: {
    id: string;
    name: string;
    quantity: number;
    price: number;
  }[];
  shippingAddress: {
    street: string;
    city: string;
    country: string;
  };
}

function TypedViewOrderExample() {
  const orderData: CustomOrderData = {
    orderId: 'ORD-2024-001',
    customerName: '田中太郎',
    status: 'processing',
    total: 299.99,
    items: [
      {id: '1', name: 'プレミアムヘッドフォン', quantity: 1, price: 199.99},
      {id: '2', name: 'USBケーブル', quantity: 2, price: 50.0},
    ],
    shippingAddress: {
      street: '123 Main St',
      city: 'New York',
      country: 'USA',
    },
  };

  const orderInfoRows: OrderInfoRow[] = [
    {label: '注文ID', value: orderData.orderId},
    {label: 'お客様', value: orderData.customerName},
    {label: '合計金額', value: `$${orderData.total}`},
    {label: '商品数', value: String(orderData.items.length)},
    {
      label: '配送先住所',
      value: `${orderData.shippingAddress.street}, ${orderData.shippingAddress.city}, ${orderData.shippingAddress.country}`,
    },
  ];

  return (
    <ViewOrder
      headerLabel="注文情報"
      statusText={orderData.status.charAt(0).toUpperCase() + orderData.status.slice(1)}
      statusLabel="現在のステータス"
      infoRows={orderInfoRows}
      className="custom-order-view"
    >
      <ViewOrder.Header />
      <ViewOrder.InfoRowList />
    </ViewOrder>
  );
}

---

📝 注意事項

• ルートコンポーネントはMUIのStackを使用し、デフォルトでspacing={4}とsx={{ p: 3 }}パディングを持ちます
• headerLabelが提供されない場合、デフォルトは"Order Details"です
• statusLabelが提供されない場合、デフォルトは"Status"です
• imageSrcプロパティはコンテキストで利用可能ですが、デフォルトのサブコンポーネントでは使用されません（カスタム実装用に利用可能）
• ViewOrder.HeaderはデフォルトでタイトルTypographyとViewOrder.Statusをレンダリングします
• ViewOrder.Statusは最小幅200pxの中央揃えテキストを持つスタイル付きボックスを表示します
• ViewOrder.InfoRowは最小幅180pxのラベル列を持ちます
• ViewOrder.InfoRowListは上部ボーダーがあり、ViewOrder.InfoRowを使用してすべてのinfoRowsをレンダリングします
• すべてのサブコンポーネントはMUI Stackプロパティを継承し、スタイリング用のsxプロパティをサポートします
• ブロックオーバーライドパターンにより、デフォルトブロックのカスタマイズ、置換、並べ替えが可能です

---

React、TypeScript、MUIを使用して❤️で構築されました。