@flamingo-stack/openframe-frontend-core 0.0.342 → 0.0.343-snapshot.20260630133421

package/src/components/ui/stacked-rows-panel.tsx

@@ -0,0 +1,187 @@
+"use client"
+
+import type * as React from "react"
+import { cn } from "../../utils/cn"
+
+/**
+ * StackedRowsPanel — a single bordered card that stacks rows inside it.
+ *
+ * Each row can be:
+ * - a single full-width element (e.g. title + subtitle) — pass one column,
+ * - N columns (each a value + label, possibly a tag/avatar) — pass several columns,
+ * - an arbitrary node (e.g. a nested table) — pass `content`.
+ *
+ * Border-radius behaviour is handled entirely by the container: `rounded-md` +
+ * `overflow-clip` clip the first/last rows to the rounded corners. So a single row
+ * rounds all four corners, while many rows visually round only the top corners of
+ * the first row and the bottom corners of the last — with no per-row corner logic.
+ *
+ * Cells render the ODS `value` (`text-h4`) over `label` (`text-h6`) pattern with an
+ * optional leading icon, matching the app's detail layouts. Pass a node as `value`
+ * (e.g. a `Tag`) to render a status chip with a caption beneath it.
+ */
+
+export type PanelColumnAlign = "left" | "center" | "right"
+export type PanelHideAt = "md" | "lg" | "xl"
+
+export interface PanelColumn {
+  /** Stable key for the column. */
+  key: string
+  /** Custom cell content (tag, avatar + text, button…). Takes precedence over `value`/`label`. */
+  content?: React.ReactNode
+  /** Primary value rendered in the ODS h4 style when `content` is not set. */
+  value?: React.ReactNode
+  /** Secondary label rendered under the value (ODS h6, secondary colour). */
+  label?: string
+  /** Icon shown before the value. */
+  icon?: React.ReactNode
+  /** When set, the cell becomes an external link. */
+  href?: string
+  /** Tailwind width class. Defaults to `flex-[1_0_0] min-w-0`. */
+  width?: string
+  /** Horizontal alignment of the column content. Defaults to `left`. */
+  align?: PanelColumnAlign
+  /** Hide the column below this breakpoint (mirrors the DataTable `hideAt` concept). */
+  hideAt?: PanelHideAt
+}
+
+export interface PanelRow {
+  /** Stable key for the row. */
+  id: string
+  /** One column → full-width row; several columns → a columns row. */
+  columns?: PanelColumn[]
+  /** Arbitrary content (e.g. a nested table). Takes precedence over `columns`. */
+  content?: React.ReactNode
+  /** Per-row overrides (e.g. height, or `p-0` for a nested table that should reach the edges). */
+  className?: string
+}
+
+export interface StackedRowsPanelProps {
+  rows: PanelRow[]
+  /** Optional uppercase caption rendered above the card. */
+  title?: string
+  className?: string
+}
+
+const ALIGN_CLASS: Record<PanelColumnAlign, string> = {
+  left: "justify-start items-start",
+  center: "justify-center items-center",
+  right: "justify-end items-end",
+}
+
+// Horizontal alignment for value/label cells. `left` keeps the default stretch so
+// the value/label can truncate; center/right shrink to content and align the cell.
+const CELL_ITEMS_ALIGN: Record<PanelColumnAlign, string> = {
+  left: "",
+  center: "items-center",
+  right: "items-end",
+}
+
+const HIDE_CLASS: Record<PanelHideAt, string> = {
+  md: "hidden md:flex",
+  lg: "hidden lg:flex",
+  xl: "hidden xl:flex",
+}
+
+// Base column-row class. Row height is content-driven via the min-heights, matching
+// the joined-row pattern used across the detail layouts (56px mobile, 80px tablet+).
+const ROW_CLASS =
+  "flex items-center gap-[var(--spacing-system-m)] px-[var(--spacing-system-m)] min-h-14 md:min-h-20 border-b border-ods-border last:border-b-0"
+
+function CellValue({ column }: { column: PanelColumn }) {
+  const valueNode = (
+    <div
+      className="text-ods-text-primary text-h4 truncate"
+      title={typeof column.value === "string" ? column.value : undefined}
+    >
+      {column.value}
+    </div>
+  )
+
+  return (
+    <>
+      <div className="flex items-center gap-[var(--spacing-system-xxs)] min-w-0">
+        {column.icon && <span className="shrink-0">{column.icon}</span>}
+        {column.href ? (
+          <a
+            href={column.href}
+            target="_blank"
+            rel="noreferrer"
+            className="min-w-0 transition-opacity hover:opacity-80"
+          >
+            {valueNode}
+          </a>
+        ) : (
+          valueNode
+        )}
+      </div>
+      {column.label ? <p className="text-ods-text-secondary text-h6 truncate">{column.label}</p> : null}
+    </>
+  )
+}
+
+function PanelCell({ column }: { column: PanelColumn }) {
+  const widthClass = column.width ?? "flex-[1_0_0] min-w-0"
+  const hideClass = column.hideAt ? HIDE_CLASS[column.hideAt] : "flex"
+
+  if (column.content !== undefined) {
+    return (
+      <div className={cn(hideClass, "flex-col", ALIGN_CLASS[column.align ?? "left"], widthClass)}>{column.content}</div>
+    )
+  }
+
+  return (
+    <div className={cn(hideClass, "flex-col justify-center", CELL_ITEMS_ALIGN[column.align ?? "left"], widthClass)}>
+      <CellValue column={column} />
+    </div>
+  )
+}
+
+function PanelRowView({ row }: { row: PanelRow }) {
+  // Arbitrary content (e.g. a nested table): keep it edge-to-edge unless the caller
+  // overrides via `className`. No fixed height — let the content size itself.
+  if (row.content !== undefined) {
+    return <div className={cn("border-b border-ods-border last:border-b-0", row.className)}>{row.content}</div>
+  }
+
+  const columns = row.columns ?? []
+  const isFullWidth = columns.length === 1
+
+  // A single-column row is a full-width title/subtitle row: pad symmetrically
+  // (ODS `m`) instead of using a fixed column-row height.
+  const rowClass = isFullWidth
+    ? cn(
+        "flex items-center gap-[var(--spacing-system-m)] p-[var(--spacing-system-m)] border-b border-ods-border last:border-b-0",
+        row.className,
+      )
+    : cn(ROW_CLASS, row.className)
+
+  return (
+    <div className={rowClass}>
+      {columns.map(column => (
+        <PanelCell key={column.key} column={column} />
+      ))}
+    </div>
+  )
+}
+
+export function StackedRowsPanel({ rows, title, className }: StackedRowsPanelProps) {
+  const card = (
+    <div className="flex flex-col overflow-clip rounded-md border border-ods-border bg-ods-card">
+      {rows.map(row => (
+        <PanelRowView key={row.id} row={row} />
+      ))}
+    </div>
+  )
+
+  if (!title) {
+    return <div className={className}>{card}</div>
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-[var(--spacing-system-xxs)]", className)}>
+      <p className="text-h5 uppercase text-ods-text-secondary">{title}</p>
+      {card}
+    </div>
+  )
+}

package/src/stories/DashboardInfoCard.stories.tsx

@@ -30,7 +30,7 @@ const meta = {
     },
     progressSize: {
       control: { type: 'number' },
-      description: 'Ring diameter in px (number), or `{ base, lg }` for a responsive ring. Default 56.',
+      description: 'Ring diameter in px (number), or `{ base, md?, lg? }` for a responsive ring. Default 56.',
     },
     href: { control: 'text', description: 'Navigation URL — renders as a Next.js Link with pointer cursor' },
     tooltip: { control: 'text', description: 'Tooltip content for the question-mark icon' },
@@ -276,7 +276,7 @@ export const DeviceStatusesOverview: Story = {
         showProgress
         progressVariant="success"
         percentageDisplay="plain"
-        progressSize={{ base: 24, lg: 56 }}
+        progressSize={{ base: 24, md: 56 }}
       />
       <DashboardInfoCard
         title="Offline Devices"
@@ -285,7 +285,7 @@ export const DeviceStatusesOverview: Story = {
         showProgress
         progressVariant="error"
         percentageDisplay="plain"
-        progressSize={{ base: 24, lg: 56 }}
+        progressSize={{ base: 24, md: 56 }}
       />
       <DashboardInfoCard
         title="Pending Devices"
@@ -294,7 +294,7 @@ export const DeviceStatusesOverview: Story = {
         showProgress
         progressVariant="warning"
         percentageDisplay="plain"
-        progressSize={{ base: 24, lg: 56 }}
+        progressSize={{ base: 24, md: 56 }}
       />
       <DashboardInfoCard
         title="Archived Devices"
@@ -303,7 +303,7 @@ export const DeviceStatusesOverview: Story = {
         showProgress
         progressVariant="info"
         percentageDisplay="plain"
-        progressSize={{ base: 24, lg: 56 }}
+        progressSize={{ base: 24, md: 56 }}
       />
     </div>
   ),
@@ -311,7 +311,7 @@ export const DeviceStatusesOverview: Story = {
     docs: {
       description: {
         story:
-          'Matches the Figma "Devices Overview" — green/red/amber/grey rings with neutral percentages via `percentageDisplay="plain"`, and a responsive ring (`progressSize={{ base: 24, lg: 56 }}`) that is 24px on mobile and 56px from the `lg` breakpoint up.',
+          'Matches the Figma "Devices Overview" — green/red/amber/grey rings with neutral percentages via `percentageDisplay="plain"`, and a responsive ring (`progressSize={{ base: 24, md: 56 }}`) that is 24px on mobile and 56px on tablet and desktop (from the `md` breakpoint up).',
       },
     },
   },
@@ -320,7 +320,7 @@ export const DeviceStatusesOverview: Story = {
 /**
  * `progressSize` controls the ring diameter (stroke scales with it). Left: the
  * 24px mobile spec. Right: the 56px desktop default. In production pass
- * `progressSize={{ base: 24, lg: 56 }}` for the responsive switch.
+ * `progressSize={{ base: 24, md: 56 }}` for the responsive switch.
  */
 export const ProgressSizeComparison: Story = {
   render: () => (

package/src/stories/StackedRowsPanel.stories.tsx

@@ -0,0 +1,165 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { useMemo } from 'react'
+import { type ColumnDef, DataTable, type Row, useDataTable } from '../components/ui/data-table'
+import { EntityImage } from '../components/ui/entity-image'
+import { StackedRowsPanel } from '../components/ui/stacked-rows-panel'
+import { Tag } from '../components/ui/tag'
+
+const meta = {
+  title: 'UI/StackedRowsPanel',
+  component: StackedRowsPanel,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'A single bordered card that stacks rows inside it. Each row can be one full-width element ' +
+          '(title + subtitle), several columns (value + label, optionally a tag/avatar), or an arbitrary ' +
+          'node such as a nested table. The container handles all rounding: one row rounds every corner, ' +
+          'while many rows round only the first row’s top corners and the last row’s bottom corners.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof StackedRowsPanel>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** Header card: a full-width title/description row followed by a columns row. */
+export const HeaderCard: Story = {
+  args: {
+    rows: [
+      {
+        id: 'title',
+        columns: [
+          {
+            key: 'title',
+            value: 'Monitors sustained high processor utilization indicating performance bottlenecks',
+            label: 'Description',
+          },
+        ],
+      },
+      {
+        id: 'meta',
+        columns: [
+          { key: 'severity', value: 'Critical', label: 'Severity' },
+          { key: 'status', value: <Tag label="Failing" variant="error" />, label: 'Status' },
+          { key: 'author', value: 'Jane Doe', label: 'Author' },
+        ],
+      },
+    ],
+  },
+}
+
+/** Standard table: uniform multi-column rows (avatar + name/email, role, status tag). */
+export const StandardTable: Story = {
+  args: {
+    rows: [
+      {
+        id: 'jane',
+        columns: [
+          {
+            key: 'user',
+            content: (
+              <div className="flex items-center gap-[var(--spacing-system-m)] min-w-0">
+                <EntityImage alt="Jane Doe" fallbackText="Jane Doe" className="size-8 rounded-full" />
+                <div className="flex flex-col min-w-0">
+                  <span className="text-ods-text-primary text-h4 truncate">Jane Doe</span>
+                  <span className="text-ods-text-secondary text-h6 truncate">jane.doe@example.com</span>
+                </div>
+              </div>
+            ),
+          },
+          { key: 'role', value: 'Admin', hideAt: 'md' },
+          { key: 'status', content: <Tag label="Active" variant="success" />, align: 'right' },
+        ],
+      },
+      {
+        id: 'john',
+        columns: [
+          {
+            key: 'user',
+            content: (
+              <div className="flex items-center gap-[var(--spacing-system-m)] min-w-0">
+                <EntityImage alt="John Roe" fallbackText="John Roe" className="size-8 rounded-full" />
+                <div className="flex flex-col min-w-0">
+                  <span className="text-ods-text-primary text-h4 truncate">John Roe</span>
+                  <span className="text-ods-text-secondary text-h6 truncate">john.roe@example.com</span>
+                </div>
+              </div>
+            ),
+          },
+          { key: 'role', value: 'Admin', hideAt: 'md' },
+          { key: 'status', content: <Tag label="Offline" variant="grey" />, align: 'right' },
+        ],
+      },
+    ],
+  },
+}
+
+/** A single row rounds all four corners. */
+export const SingleRow: Story = {
+  args: {
+    rows: [{ id: 'only', columns: [{ key: 'only', value: 'High CPU Usage >85%', label: 'Policy' }] }],
+  },
+}
+
+interface DemoDevice {
+  id: string
+  name: string
+  status: 'NON-COMPLIANT' | 'COMPLIANT'
+}
+
+const DEMO_DEVICES: DemoDevice[] = [
+  { id: '1', name: "John's Device", status: 'NON-COMPLIANT' },
+  { id: '2', name: 'Workstation-04', status: 'COMPLIANT' },
+]
+
+function NestedDevicesTable() {
+  const columns = useMemo<ColumnDef<DemoDevice>[]>(
+    () => [
+      {
+        accessorKey: 'name',
+        header: 'DEVICE',
+        cell: ({ row }: { row: Row<DemoDevice> }) => (
+          <div className="flex flex-col">
+            <span className="text-ods-text-primary text-h4 truncate">{row.original.name}</span>
+            <span className="text-ods-text-secondary text-h6 truncate">Last Online: 2 hours ago</span>
+          </div>
+        ),
+      },
+      {
+        accessorKey: 'status',
+        header: 'STATUS',
+        cell: ({ row }: { row: Row<DemoDevice> }) => (
+          <Tag label={row.original.status} variant={row.original.status === 'COMPLIANT' ? 'success' : 'error'} />
+        ),
+        meta: { width: 'w-[180px]' },
+      },
+    ],
+    [],
+  )
+
+  const table = useDataTable<DemoDevice>({
+    data: DEMO_DEVICES,
+    columns,
+    getRowId: (row: DemoDevice) => row.id,
+    enableSorting: false,
+  })
+
+  return (
+    <DataTable table={table}>
+      <DataTable.Header />
+      <DataTable.Body />
+    </DataTable>
+  )
+}
+
+/** A panel row can host an arbitrary node — here a nested DataTable. */
+export const WithNestedTable: Story = {
+  args: {
+    title: 'Devices',
+    rows: [{ id: 'devices', className: 'p-[var(--spacing-system-m)]', content: <NestedDevicesTable /> }],
+  },
+}