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

package/dist/components/ui/stacked-rows-panel.d.ts

@@ -1,58 +0,0 @@
-import type * as React from "react";
-/**
- * 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;
-}
-export declare function StackedRowsPanel({ rows, title, className }: StackedRowsPanelProps): React.JSX.Element;
-//# sourceMappingURL=stacked-rows-panel.d.ts.map

package/dist/components/ui/stacked-rows-panel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"stacked-rows-panel.d.ts","sourceRoot":"","sources":["../../../src/components/ui/stacked-rows-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAGnC;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC1D,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE5C,MAAM,WAAW,WAAW;IAC1B,iCAAiC;IACjC,GAAG,EAAE,MAAM,CAAA;IACX,gGAAgG;IAChG,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mCAAmC;IACnC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sEAAsE;IACtE,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACxB,sFAAsF;IACtF,MAAM,CAAC,EAAE,WAAW,CAAA;CACrB;AAED,MAAM,WAAW,QAAQ;IACvB,8BAA8B;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,oEAAoE;IACpE,OAAO,CAAC,EAAE,WAAW,EAAE,CAAA;IACvB,gFAAgF;IAChF,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,gGAAgG;IAChG,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAwGD,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,qBAAqB,qBAmBjF"}

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

@@ -1,187 +0,0 @@
-"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/StackedRowsPanel.stories.tsx

@@ -1,165 +0,0 @@
-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 /> }],
-  },
-}