人物セルPersonCellExperimental
The atomic identity cell: an avatar paired with a name plus secondary/tertiary lines (role / department / email), an optional presence dot and a trailing slot (status badge, chevron, count, actions). Fallback initials are derived from the name (Japanese family-name aware) when no image is given; sm/md/lg sizes; everything truncates so it fits a table cell. The 'who is this person' unit repeated across directories, table rows, assignee pickers, comment attributions, approver/reviewer rows and detail panels. Presentational by default — let an interactive row (DataTable onRowClick, a wrapping link) own activation rather than nesting a button.
プレビュー
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| name | ReactNode | - | 主行（氏名）。文字列なら頭文字フォールバックを自動導出（日本語の姓に対応）。 |
| secondary | ReactNode | - | 副行（役職 / 部署 / メール）。 |
| tertiary | ReactNode | - | 3行目（雇用形態 / 勤務地 など）。 |
| avatar | { src?, alt?, fallback? } | - | 画像＋フォールバック。src 無しなら fallback か氏名頭文字を表示。 |
| presence | "online" | "offline" | "away" | "busy" | … | - | 在席ドット（Avatar に委譲）。presenceLabel で読み上げ名。 |
| size | "sm" | "md" | "lg" | "md" | アバター＋テキストのスケール。 |
| trailing | ReactNode | - | 末尾スロット（ステータスバッジ / シェブロン / 件数 / アクション）。 |
| avatarClassName | string | - | アバターの追加クラス（名前由来の背景色など）。 |
Usage
import { PersonCell, Badge } from "@gunjo/ui"
<PersonCell
name="佐藤 美咲"
secondary="プロダクト本部 / シニアUXデザイナー"
tertiary="正社員・東京本社"
avatar={{ src: "/avatars/sato.jpg" }} // omit → 氏名から頭文字フォールバック
presence="online"
trailing={<Badge variant="success">在籍</Badge>}
/>
// テーブル行など、行自体が onRowClick で活性なら PersonCell は素のまま置く
<DataTable
columns={[{ accessorKey: "name", header: "氏名",
cell: ({ row }) => <PersonCell name={row.original.name} secondary={row.original.role} /> }]}
onRowClick={open}
/>