ViewUserブロック

ViewUser は、MUI 上に構築されたキー・バリュー表示ブロックで、ヘッダー（タイトルと任意のアクションボタン）、任意のサブヘッダーを備えています。

インストール

npm
yarn
pnpm
bun

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

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

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

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

必要なもの

項目	用途
`labels.headerTitle`	ヘッダーのメイン見出し
`data`	ユーザーフィールドを `Record<string, ReactNode>`（行キーがラベルになる）または値のみの行用の `ReactNode[]` として渡す
`labels.subheaderTitle` (任意)	ヘッダー下のセカンダリ行（例: 登録日）
`labels.headerActionButton` + `headerAction` (任意)	アウトラインのヘッダーボタンのラベルとクリックハンドラー
`layout` (任意)	`one-column` はキー/バリュー行を縦に積む; `two-column` は横並びで表示（デフォルト）

ユーザーデータはアプリ側で管理する

ViewUser はユーザー状態を保持しません — ページから labels、data、任意の headerAction を渡してください。オブジェクト形式の data のキーが行ラベルになり、値は文字列または React ノード（複数行テキスト、リンク、レイアウト）にできます。labels.headerActionButton と headerAction を設定すると、ハンドラー付きのヘッダーアクションボタンが表示されます。

コード例

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

ライブエディター

function Example() {
  const labels = {
    headerTitle: '佐藤 花子',
    subheaderTitle: '2023年11月22日から会員',
  };

  const data = {
    メール: 'hanako.sato@example.com',
    電話: '+81 (555) 123-4567',
    役割: 'フロントエンドエンジニア',
    所在地: '東京都渋谷区',
  };

  return <ViewUser labels={labels} data={data} />;
}

結果

レイアウトを切り替えてみてください。

ライブエディター

function Example() {
  const [layout, setLayout] = React.useState('two-column');

  const labels = {
    headerTitle: '佐藤 花子',
    subheaderTitle: '2023年11月22日から会員',
  };

  const data = {
    メール: 'hanako.sato@example.com',
    電話: '+81 (555) 123-4567',
    役割: 'フロントエンドエンジニア',
    所在地: '東京都渋谷区',
    スキル: 'React · TypeScript · Node.js · AWS',
  };

  return (
    <Box>
      <Box sx={{ display: 'flex', gap: 1, mb: 2 }}>
        <Box
          component="button"
          type="button"
          onClick={() => setLayout('two-column')}
          sx={{
            px: 1.5,
            py: 0.75,
            borderRadius: 1,
            border: '1px solid',
            borderColor: layout === 'two-column' ? 'primary.main' : 'divider',
            bgcolor: layout === 'two-column' ? 'primary.main' : 'background.paper',
            color: layout === 'two-column' ? 'primary.contrastText' : 'text.primary',
            cursor: 'pointer',
            fontSize: 14,
            fontWeight: layout === 'two-column' ? 600 : 400,
          }}
        >
          2列
        </Box>
        <Box
          component="button"
          type="button"
          onClick={() => setLayout('one-column')}
          sx={{
            px: 1.5,
            py: 0.75,
            borderRadius: 1,
            border: '1px solid',
            borderColor: layout === 'one-column' ? 'primary.main' : 'divider',
            bgcolor: layout === 'one-column' ? 'primary.main' : 'background.paper',
            color: layout === 'one-column' ? 'primary.contrastText' : 'text.primary',
            cursor: 'pointer',
            fontSize: 14,
            fontWeight: layout === 'one-column' ? 600 : 400,
          }}
        >
          1列
        </Box>
      </Box>
      <ViewUser labels={labels} data={data} layout={layout} />
    </Box>
  );
}

結果

レイアウトの動作

two-column（デフォルト）は各フィールドのラベルと値を横並びで表示します。one-column はラベルを値の上に積み、余白を広げます — 狭いビューポートや情報量の多いプロフィールに適しています。

ViewUser.Header、ViewUser.Subheader、ViewUser.ItemList を直接構成します。ルートだけでなく子コンポーネントにも labels、data、headerAction を渡します。

ライブエディター

function Example() {
  const [lastAction, setLastAction] = React.useState('');

  const data = {
    メール: 'hanako.sato@example.com',
    電話: '+81 (555) 123-4567',
    役割: 'フロントエンドエンジニア',
    所在地: '東京都渋谷区',
  };

  return (
    <Box>
      <ViewUser layout="two-column">
        <ViewUser.Header
          labels={{
            headerTitle: '佐藤 花子',
            headerActionButton: 'プロフィールを編集',
          }}
          headerAction={() => setLastAction('プロフィールを編集')}
          sx={{
            px: 2,
            py: 1.5,
            bgcolor: 'grey.50',
            borderRadius: 2,
            border: '1px solid',
            borderColor: 'divider',
          }}
        />
        <ViewUser.Subheader
          labels={{ subheaderTitle: '2023年11月22日から会員' }}
          sx={{ px: 2, fontStyle: 'italic', color: 'text.secondary' }}
        />
        <ViewUser.ItemList
          data={data}
          sx={{
            border: '1px solid',
            borderColor: 'divider',
            borderRadius: 2,
            overflow: 'hidden',
            '& .MuiListItem-root': { bgcolor: 'background.paper' },
          }}
        />
      </ViewUser>
      {lastAction ? (
        <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1 }}>
          最後のアクション: {lastAction}
        </Typography>
      ) : null}
    </Box>
  );
}

結果

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

ライブエディター

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

  const labels = {
    headerTitle: '佐藤 花子',
    subheaderTitle: 'プロフィール審査中',
  };

  const data = {
    メール: 'hanako.sato@example.com',
    電話: '+81 (555) 123-4567',
    役割: 'フロントエンドエンジニア',
    所在地: '東京都渋谷区',
  };

  return (
    <ViewUser labels={labels} data={data}>
      {({ defaultBlocks, defaultBlockOrder }) => ({
        blocks: {
          ...defaultBlocks,
          profileNotice: 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: (
            <ViewUser.Header
              labels={labels}
              sx={{
                px: 2,
                py: 2,
                borderRadius: 2,
                border: '1px solid',
                borderColor: 'divider',
                bgcolor: 'background.paper',
              }}
            />
          ),
          itemList: (
            <ViewUser.ItemList
              data={data}
              sx={{
                mt: 2,
                border: '1px solid',
                borderColor: 'divider',
                borderRadius: 2,
                '& .MuiListItem-root:nth-of-type(even)': { bgcolor: 'grey.50' },
              }}
            />
          ),
        },
        blockOrder: [
          ...(noticeVisible ? ['profileNotice'] : []),
          'header',
          'subheader',
          'itemList',
        ],
      })}
    </ViewUser>
  );
}

結果

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

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

主要プロパティ

コアプロパティ

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

コンテンツプロパティ

プロパティ	型	必須	デフォルト	説明
`labels.headerTitle`	`string`	いいえ	`undefined`	`ViewUser.Header` のメイン見出し
`labels.subheaderTitle`	`string`	いいえ	`undefined`	ヘッダー下のセカンダリ行（`ViewUser.Subheader`）
`labels.headerActionButton`	`string`	いいえ	`undefined`	アウトラインのヘッダーボタンのラベル; `labels.headerActionButton` または `headerAction` が設定されている場合（または `ViewUser.HeaderActionButton` に渡されている場合）に表示
`headerAction`	`() => void`	いいえ	`undefined`	デフォルトのヘッダーアクションボタンがクリックされたときに呼び出される
`layout`	`'one-column' \| 'two-column'`	いいえ	`'two-column'`	行レイアウト: キー/バリューを縦に積む vs 横並びの列

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

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

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

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

サブコンポーネントはコンテキストから読み取り、同じコンテンツキーをプロパティとして渡すとローカルで上書きできます。

サブコンポーネント	主要プロパティ	継承	ベース
`ViewUser.Header`	`labels`（`headerTitle`、`headerActionButton`）、`headerAction`、`children`、`className`、`sx`	`StackProps`	`Stack` + `Typography` + 任意の `ViewUser.HeaderActionButton`
`ViewUser.HeaderActionButton`	`labels`（`headerActionButton`）、`headerAction`、`children`、`className`、`onClick`	`ButtonProps`	`Button`（`variant="outlined"`、`size="medium"`）
`ViewUser.Subheader`	`labels`（`subheaderTitle`、`headerTitle`、`headerActionButton`）、`children`、`className`、`sx`	`StackProps`	`Stack` + `Typography`
`ViewUser.ItemList`	`data`、`children`、`className`、`sx`	`ListProps`	`List`（`component="dl"`）+ `ViewUser.Item` 行
`ViewUser.Item`	`layout`、`children`、`className`、`sx`	`ListItemProps`	`ListItem`
`ViewUser.Item.Key`	`layout`、`children`、`className`、`sx`	`TypographyProps`	`Typography`（`component="dt"`、`variant="subtitle1"`）
`ViewUser.Item.Value`	`layout`、`children`、`className`、`sx`	`TypographyProps`	`Typography`（`component="dd"`、`variant="body2"`）

デフォルト UI ブロック

ブロック	ベース	備考
`ViewUser`（ルート）	`Stack`	`spacing={3}`、`margin: 'auto'` の縦レイアウト（`nbb-view-user`）
`header`（`ViewUser.Header`）	`Stack`	`labels.headerTitle`、`labels.headerActionButton`、またはカスタム `children` が設定されている場合にレンダリング; `headerAction` または `labels.headerActionButton` が設定されている場合は `ViewUser.HeaderActionButton` を含む
`subheader`（`ViewUser.Subheader`）	`Stack`	`labels.subheaderTitle` またはカスタム `children` が設定されている場合にレンダリング
`itemList`（`ViewUser.ItemList`）	`List`	`data` オブジェクトのエントリまたは配列の値をキー/バリュー行にマッピング

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

TypeScript

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

type UserLabels = {
  headerTitle?: string;
  headerActionButton?: string;
  subheaderTitle?: string;
};

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

export function UserDetailView() {
  const labels: UserLabels = {
    headerTitle: '佐藤 花子',
    subheaderTitle: '2023年11月22日から会員',
    headerActionButton: 'プロフィールを編集',
  };

  const data: UserData = {
    メール: 'hanako.sato@example.com',
    電話: '+81 (555) 123-4567',
    役割: 'フロントエンドエンジニア',
  };

  return (
    <ViewUser
      labels={labels}
      data={data}
      headerAction={() => {
        /* 遷移または編集ダイアログを開く */
      }}
    />
  );
}

インストール​

必要なもの​

コード例​

主要プロパティ​

コアプロパティ​

コンテンツプロパティ​

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

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

デフォルト UI ブロック​

TypeScript​

インストール

必要なもの

コード例

主要プロパティ

コアプロパティ

コンテンツプロパティ

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

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

デフォルト UI ブロック

TypeScript