ViewOrderブロック

ViewOrder は、MUI 上に構築されたキー・値表示ブロックで、ヘッダー（タイトルとステータスバッジ）と任意のサブヘッダーを備えています。

インストール

npm
yarn
pnpm
bun

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

yarn add @nodeblocks/frontend-view-order-block

pnpm add @nodeblocks/frontend-view-order-block

bun add @nodeblocks/frontend-view-order-block

必要なもの

項目	用途
`labels.headerTitle`	ヘッダー内のメイン見出し
`labels.statusText`	ステータスバッジの値。設定するとヘッダーに `ViewOrder.Status` が表示される
`data`	注文フィールドを `Record<string, ReactNode>`（行のキーがラベルになる）または値のみの行用の `ReactNode[]` で渡す
`labels.status` (任意)	ステータスバッジ上のラベル（デフォルト `'Status'`）
`statusColor` (任意)	ステータスバッジの背景色

注文データはアプリ側で管理する

ViewOrder は注文の状態を保持しません — ページから labels、data、任意の statusColor を渡してください。オブジェクト形式の data ではキーが行ラベルになり、値は文字列または React ノード（リンク、画像、レイアウト）にできます。ヘッダーにステータスバッジを表示するには labels.statusText を設定します。

コード例

クイックスタート
ラベル
複合コンポーネント
ブロックのオーバーライド

ライブエディター

function Example() {
  const labels = {
    headerTitle: '注文詳細',
    statusText: '処理中',
    status: '現在のステータス',
  };

  const data = {
    '注文 ID': '#12345',
    お客様: '山田太郎',
    日付: '2024-01-15',
    合計: '$199.99',
  };

  return (
    <ViewOrder labels={labels} statusColor="#e3f2fd" data={data} />
  );
}

結果

ヘッダーのコピー、ステータスバッジ、サブヘッダー、行コンテンツをカスタマイズします。layout で2列表示と積み上げ表示を切り替えられます。

ライブエディター

function Example() {
  const labels = {
    headerTitle: '注文 #ORD-2024-789',
    status: '配送',
    statusText: '発送済み',
    subheaderTitle: '2024年1月15日注文 · プレミアム配送',
  };

  const data = {
    '注文 ID': (
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
        <Typography
          component="a"
          href="#orders/ord-2024-789"
          variant="body2"
          sx={{ color: 'primary.main', fontWeight: 600, textDecoration: 'none', '&:hover': { textDecoration: 'underline' } }}
        >
          #ORD-2024-789
        </Typography>
        <Box
          component="img"
          src="https://docs.nodeblocks.dev/img/undraw_docusaurus_react.svg"
          alt="注文プレビュー"
          sx={{ maxWidth: '100%', maxHeight: 160, objectFit: 'contain', borderRadius: 1 }}
        />
      </Box>
    ),
    お客様: '佐藤花子',
    支払い方法: 'Visa ···· 4242',
    合計: '$1,299.99',
  };

  return (
    <ViewOrder
      labels={labels}
      statusColor="#e8f5e9"
      layout="two-column"
      data={data}
    />
  );
}

結果

コピーを設定する場所

headerTitle、status、statusText、subheaderTitle はルートの labels オブジェクト（または複合レイアウトでは ViewOrder.Header / ViewOrder.Status）に設定します。行ラベルは data オブジェクトのキーから取得されます。

ViewOrder.Header、ViewOrder.Subheader、ViewOrder.ItemList を直接構成します。ルートだけでなく子にプロパティを渡します。

ライブエディター

function Example() {
  const labels = {
    headerTitle: '注文詳細',
    status: '現在のステータス',
    statusText: '処理中',
    subheaderTitle: '2時間前に更新',
  };

  const data = {
    '注文 ID': '#12345',
    お客様: '山田太郎',
    日付: '2024-01-15',
    合計: '$199.99',
  };

  return (
    <ViewOrder labels={labels} statusColor="#fff3e0" data={data}>
      <ViewOrder.Header
        sx={{
          px: 2,
          py: 1.5,
          bgcolor: 'grey.50',
          borderRadius: 2,
          '& .nbb-view-order-status-text': { border: '1px solid', borderColor: 'warning.light' },
        }}
      />
      <ViewOrder.Subheader sx={{ px: 2, fontStyle: 'italic' }} />
      <ViewOrder.ItemList
        sx={{
          border: '1px solid',
          borderColor: 'divider',
          borderRadius: 2,
          overflow: 'hidden',
          '& .MuiListItem-root': { bgcolor: 'background.paper' },
        }}
      />
    </ViewOrder>
  );
}

結果

関数形式の children と defaultBlocks、defaultBlockOrder を使い、ブロックの注入、デフォルトの差し替え、順序の制御を行います。

ライブエディター

function Example() {
  const [noticeVisible, setNoticeVisible] = React.useState(true);

  const labels = {
    headerTitle: '注文詳細',
    status: '現在のステータス',
    statusText: '処理中',
    subheaderTitle: '倉庫でのピッキング作業中',
  };

  const data = {
    '注文 ID': '#12345',
    お客様: '山田太郎',
    日付: '2024-01-15',
    合計: '$199.99',
  };

  return (
    <ViewOrder labels={labels} statusColor="#e3f2fd" data={data}>
      {({ defaultBlocks, defaultBlockOrder }) => ({
        blocks: {
          ...defaultBlocks,
          processingNotice: noticeVisible ? (
            <Box
              sx={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                gap: 2,
                px: 2,
                py: 1.5,
                mb: 1,
                borderRadius: 2,
                bgcolor: 'info.main',
                color: 'info.contrastText',
              }}
            >
              <Typography variant="body2" sx={{ fontWeight: 600 }}>
                注文を処理中です
              </Typography>
              <Box
                component="button"
                type="button"
                onClick={() => setNoticeVisible(false)}
                aria-label="通知を閉じる"
                sx={{
                  flexShrink: 0,
                  border: '1px solid rgba(255,255,255,0.35)',
                  bgcolor: 'rgba(255,255,255,0.12)',
                  color: 'inherit',
                  borderRadius: '50%',
                  width: 28,
                  height: 28,
                  cursor: 'pointer',
                  fontSize: 16,
                  lineHeight: 1,
                }}
              >
                ×
              </Box>
            </Box>
          ) : null,
          header: (
            <ViewOrder.Header
              labels={labels}
              sx={{
                px: 2,
                py: 2,
                borderRadius: 2,
                border: '1px solid',
                borderColor: 'divider',
                bgcolor: 'background.paper',
              }}
            />
          ),
          itemList: (
            <ViewOrder.ItemList
              data={data}
              sx={{
                mt: 2,
                border: '1px solid',
                borderColor: 'divider',
                borderRadius: 2,
                '& .MuiListItem-root:nth-of-type(even)': { bgcolor: 'grey.50' },
              }}
            />
          ),
        },
        blockOrder: [
          ...(noticeVisible ? ['processingNotice'] : []),
          'header',
          'subheader',
          'itemList',
        ],
      })}
    </ViewOrder>
  );
}

結果

ブロックのオーバーライドを使うタイミング

デフォルトの defaultBlockOrder は header、subheader、itemList、item、itemKey、itemValue です。デフォルトのレンダリングでは itemList が data をマッピングします。item / itemKey / itemValue は細かいオーバーライド用です。この例では、閉じられる processingNotice を前置し、header と itemList をスタイル付きのバリアントに差し替え、blockOrder から未使用のブロックキーを除外しています。

主要プロパティ

コアプロパティ

プロパティ	型	必須	デフォルト	説明
`data`	`Record<string, ReactNode> \| ReactNode[]`	いいえ	`undefined`	行コンテンツ: オブジェクトのキーがフィールドラベルになり、配列は値のみの行をレンダリングする
`labels`	`{ headerTitle?: string; subheaderTitle?: string; status?: string; statusText?: string }`	いいえ	`{}`	ヘッダータイトル、任意のサブヘッダー、ステータスバッジのコピー（`statusText` でデフォルトヘッダーにバッジを表示）

コンテンツプロパティ

プロパティ	型	必須	デフォルト	説明
`labels.headerTitle`	`string`	いいえ	`undefined`	`ViewOrder.Header` 内のメイン見出し
`labels.subheaderTitle`	`string`	いいえ	`undefined`	ヘッダー下のセカンダリ行（`ViewOrder.Subheader`）
`labels.status`	`string`	いいえ	`'Status'`	ステータスバッジ上のラベル（`ViewOrder.Status`）
`labels.statusText`	`string`	いいえ	`undefined`	ステータスバッジの値。設定するとデフォルトヘッダーに表示される
`statusColor`	`string`	いいえ	`undefined`	ステータスバッジの背景。未設定時は `theme.palette.grey[50]` にフォールバック
`layout`	`'one-column' \| 'two-column'`	いいえ	`'two-column'`	行レイアウト: キー/値の積み上げ vs 横並びの2列

レイアウトと構成プロパティ

プロパティ	型	必須	デフォルト	説明
`children`	`BlocksOverride \| ReactNode`	いいえ	`undefined`	複合 JSX の子、または `blocks` と `blockOrder` を返す関数オーバーライド
`className`	`string`	いいえ	`undefined`	ルートスタック（`nbb-view-order`）のクラス名
`sx`	`SxProps`	いいえ	`undefined`	ルートスタック用の MUI システムスタイル

ViewOrder は StackProps（children を除く）を継承します。デフォルトの defaultBlockOrder: header、subheader、itemList、item、itemKey、itemValue。

サブコンポーネントのプロパティ

サブコンポーネントはコンテキストから読み取り、同じコンテンツキーをプロパティとして受け取り、ローカルでオーバーライドできます。

サブコンポーネント	主要プロパティ	継承	ベース
`ViewOrder.Header`	`labels`（`headerTitle`、`status`、`statusText`）、`children`、`className`、`sx`	`StackProps`	`Stack` + `Typography` + `statusText` 設定時は `ViewOrder.Status`
`ViewOrder.Status`	`labels`（`status`、`statusText`）、`statusColor`、`children`、`className`、`sx`	`StackProps`	`Stack` + `Box` + `Typography`
`ViewOrder.Subheader`	`labels`（`subheaderTitle`、`headerTitle`、`headerActionButton`）、`children`、`className`、`sx`	`StackProps`	`Stack` + `Typography`
`ViewOrder.ItemList`	`data`、`children`、`className`、`sx`	`ListProps`	`List`（`component="dl"`）+ `ViewOrder.Item` 行
`ViewOrder.Item`	`layout`、`children`、`className`、`sx`	`ListItemProps`	`ListItem`
`ViewOrder.Item.Key`	`layout`、`children`、`className`、`sx`	`TypographyProps`	`Typography`（`component="dt"`、`variant="subtitle1"`）
`ViewOrder.Item.Value`	`layout`、`children`、`className`、`sx`	`TypographyProps`	`Typography`（`component="dd"`、`variant="body2"`）

デフォルト UI ブロック

ブロック	ベース	備考
`ViewOrder` (ルート)	`Stack`	`spacing={3}` の縦レイアウト（`nbb-view-order`）
`header` (`ViewOrder.Header`)	`Stack`	`headerTitle` + `labels.statusText` 設定時は任意の `ViewOrder.Status`
`subheader` (`ViewOrder.Subheader`)	`Stack`	`labels.subheaderTitle` またはカスタム `children` があるときにレンダリング
`itemList` (`ViewOrder.ItemList`)	`List`	`data` オブジェクトのエントリまたは配列の値をキー/値行にマッピング

デフォルトのルートレンダリング順: header → subheader → itemList。

TypeScript

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

type OrderLabels = {
  headerTitle?: string;
  subheaderTitle?: string;
  status?: string;
  statusText?: string;
};

type OrderData = Record<string, ReactNode> | ReactNode[];

export function OrderDetailView() {
  const labels: OrderLabels = {
    headerTitle: '注文詳細',
    status: '現在のステータス',
    statusText: '処理中',
  };

  const data: OrderData = {
    '注文 ID': '#12345',
    お客様: '山田太郎',
    日付: '2024-01-15',
    合計: '$199.99',
  };

  return <ViewOrder labels={labels} statusColor="#e3f2fd" data={data} />;
}

インストール​

必要なもの​

コード例​

主要プロパティ​

コアプロパティ​

コンテンツプロパティ​

レイアウトと構成プロパティ​

サブコンポーネントのプロパティ​

デフォルト UI ブロック​

TypeScript​

インストール

必要なもの

コード例

主要プロパティ

コアプロパティ

コンテンツプロパティ

レイアウトと構成プロパティ

サブコンポーネントのプロパティ

デフォルト UI ブロック

TypeScript