@you-agent-factory/components 0.0.0

package/src/charts/chart.tsx

@@ -0,0 +1,287 @@
+import type {
+  CSSProperties,
+  HTMLAttributes,
+  MouseEvent as ReactMouseEvent,
+  ReactNode,
+} from "react";
+import { createContext, useContext } from "react";
+import {
+  Legend as RechartsLegend,
+  Tooltip as RechartsTooltip,
+  ResponsiveContainer,
+  type TooltipContentProps,
+} from "recharts";
+import type {
+  LegendPayload,
+  Props as RechartsLegendContentProps,
+} from "recharts/types/component/DefaultLegendContent";
+import type {
+  NameType,
+  ValueType,
+} from "recharts/types/component/DefaultTooltipContent";
+
+import { cn } from "../utilities/cn";
+
+export interface ChartConfigEntry {
+  color: string;
+  label: string;
+}
+
+export type ChartConfig = Record<string, ChartConfigEntry>;
+
+const ChartContext = createContext<ChartConfig | null>(null);
+
+export type ChartPresentation = "embedded" | "standalone";
+
+// tailwind-exception: intrinsic-sizing
+const CHART_CONTAINER_STANDALONE_CLASS =
+  "relative h-[18rem] rounded-2xl border border-outline bg-surface-container-low p-4 text-on-surface";
+// tailwind-exception: intrinsic-sizing
+const CHART_CONTAINER_EMBEDDED_CLASS =
+  "relative flex h-full min-h-0 min-w-0 w-full flex-1 flex-col text-on-surface";
+const DEFAULT_CHART_INITIAL_DIMENSION = { height: 288, width: 640 } as const;
+
+const CHART_LEGEND_BUTTON_CLASS =
+  "inline-flex min-h-0 items-center justify-center rounded-md border border-transparent bg-transparent px-0 py-1 text-left text-xs font-normal text-on-surface-variant focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-af-focus";
+
+function chartContainerClassName(
+  presentation: ChartPresentation,
+  className?: string,
+): string {
+  return cn(
+    presentation === "embedded"
+      ? CHART_CONTAINER_EMBEDDED_CLASS
+      : CHART_CONTAINER_STANDALONE_CLASS,
+    className,
+  );
+}
+
+function useChartConfig() {
+  const context = useContext(ChartContext);
+
+  if (context === null) {
+    throw new Error("Chart components must be rendered inside ChartContainer.");
+  }
+
+  return context;
+}
+
+export function ChartContainer({
+  children,
+  className,
+  config,
+  footer,
+  interactionAttributes,
+  overlay,
+  presentation = "standalone",
+  rootAttributes,
+  style,
+  title,
+}: {
+  children: ReactNode;
+  className?: string;
+  config: ChartConfig;
+  footer?: ReactNode;
+  interactionAttributes?: HTMLAttributes<HTMLDivElement>;
+  overlay?: ReactNode;
+  presentation?: ChartPresentation;
+  rootAttributes?: Record<string, string>;
+  style?: CSSProperties;
+  title: string;
+}) {
+  const chartSurface = (
+    <ResponsiveContainer
+      height="100%"
+      initialDimension={DEFAULT_CHART_INITIAL_DIMENSION}
+      minHeight={0}
+      minWidth={0}
+      width="100%"
+    >
+      {children}
+    </ResponsiveContainer>
+  );
+
+  return (
+    <ChartContext.Provider value={config}>
+      <div
+        aria-label={title}
+        className={chartContainerClassName(presentation, className)}
+        data-chart-container=""
+        data-chart-presentation={presentation}
+        role="img"
+        {...interactionAttributes}
+        {...rootAttributes}
+        style={
+          {
+            ...Object.fromEntries(
+              Object.entries(config).map(([key, value]) => [
+                `--color-${key}`,
+                value.color,
+              ]),
+            ),
+            ...style,
+          } as CSSProperties
+        }
+      >
+        {overlay ? (
+          <div className="pointer-events-none absolute inset-0">{overlay}</div>
+        ) : null}
+        {footer ? (
+          <div className="flex min-h-0 flex-1 basis-0 flex-col">
+            <div className="h-full min-h-0 flex-1 basis-0">{chartSurface}</div>
+            {footer}
+          </div>
+        ) : (
+          chartSurface
+        )}
+      </div>
+    </ChartContext.Provider>
+  );
+}
+
+export const ChartTooltip = RechartsTooltip;
+export const ChartLegend = RechartsLegend;
+
+export function ChartTooltipContent({
+  active,
+  className,
+  label,
+  payload,
+}: TooltipContentProps<ValueType, NameType> & { className?: string }) {
+  const config = useChartConfig();
+
+  if (!active || !payload?.length) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        "grid min-w-40 gap-2 rounded-xl border border-outline bg-surface-container-high px-3 py-2 text-sm shadow-af-card",
+        className,
+      )}
+    >
+      <p className="m-0 font-semibold text-on-surface">{String(label)}</p>
+      <div className="grid gap-1">
+        {payload.map((entry) => {
+          const key = entry.dataKey?.toString() ?? "";
+          const item = config[key];
+
+          return (
+            <div
+              className="flex items-center justify-between gap-3 text-on-surface-variant"
+              key={key}
+            >
+              <div className="flex items-center gap-2">
+                <span
+                  className="h-2.5 w-2.5 rounded-full"
+                  style={{
+                    backgroundColor:
+                      item?.color ?? entry.color ?? "currentColor",
+                  }}
+                />
+                <span>{item?.label ?? key}</span>
+              </div>
+              <span className="font-medium text-on-surface">{entry.value}</span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export function ChartLegendContent({
+  className,
+  getToggleLabel,
+  hiddenSeries = new Set<string>(),
+  itemClassName,
+  onToggleSeries,
+  payload,
+  swatchClassName,
+}: RechartsLegendContentProps & {
+  className?: string;
+  getToggleLabel?: (label: string, hidden: boolean) => string;
+  hiddenSeries?: ReadonlySet<string>;
+  itemClassName?: string;
+  onToggleSeries?: (key: string) => void;
+  swatchClassName?: string;
+}) {
+  const config = useChartConfig();
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  const stopChartInteraction = (event: ReactMouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex flex-wrap items-center gap-4 pt-3 text-xs text-on-surface-variant",
+        className,
+      )}
+    >
+      {payload.map((entry: LegendPayload) => {
+        const key = entry.dataKey?.toString() ?? "";
+        const item = config[key];
+        const label = item?.label ?? key;
+        const hidden = hiddenSeries.has(key);
+        const content = (
+          <>
+            <span
+              aria-hidden="true"
+              className={cn(
+                "rounded-full",
+                swatchClassName ?? "h-2.5 w-2.5",
+                hidden ? "border border-outline bg-surface-container-low" : "",
+              )}
+              style={{
+                backgroundColor: hidden
+                  ? undefined
+                  : (item?.color ?? entry.color ?? "currentColor"),
+              }}
+            />
+            <span>{label}</span>
+          </>
+        );
+
+        if (!onToggleSeries) {
+          return (
+            <div
+              className={cn("flex items-center gap-2", itemClassName)}
+              key={key}
+            >
+              {content}
+            </div>
+          );
+        }
+
+        return (
+          <button
+            aria-label={getToggleLabel?.(label, hidden) ?? label}
+            aria-pressed={!hidden}
+            className={cn(
+              CHART_LEGEND_BUTTON_CLASS,
+              hidden ? "text-on-surface-disabled" : "",
+              itemClassName,
+            )}
+            data-chart-legend-series={key}
+            data-chart-legend-series-hidden={hidden ? "true" : "false"}
+            key={key}
+            onClick={(event) => {
+              event.stopPropagation();
+              onToggleSeries(key);
+            }}
+            onMouseDown={stopChartInteraction}
+            type="button"
+          >
+            {content}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/charts/index.ts

@@ -0,0 +1,21 @@
+/** Stable category path for `@you-agent-factory/components/charts`. */
+export const COMPONENTS_CATEGORY = "charts" as const;
+
+export type ComponentsCategory = typeof COMPONENTS_CATEGORY;
+
+export {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+  type ChartConfigEntry,
+  type ChartPresentation,
+} from "./chart";
+
+export {
+  ChartStatePanel,
+  type ChartStatePanelProps,
+  type ChartStateStatus,
+} from "./chart-state-panel";

package/src/data-display/code-panel.tsx

@@ -0,0 +1,67 @@
+import { forwardRef, type HTMLAttributes } from "react";
+
+import { cn } from "../utilities/cn";
+
+type CodePanelPadding = "compact" | "default";
+type CodePanelSurface = "high" | "low";
+type CodePanelMaxHeight = "none" | "sm" | "md" | "lg";
+
+export interface CodePanelProps extends HTMLAttributes<HTMLPreElement> {
+  maxHeight?: CodePanelMaxHeight;
+  padding?: CodePanelPadding;
+  surface?: CodePanelSurface;
+}
+
+const CODE_PANEL_PADDING_CLASS: Record<CodePanelPadding, string> = {
+  compact: "p-2",
+  default: "p-3",
+};
+const CODE_PANEL_SURFACE_CLASS: Record<CodePanelSurface, string> = {
+  high: "bg-surface-container-high",
+  low: "bg-surface-container-low",
+};
+const CODE_PANEL_MAX_HEIGHT_CLASS: Record<CodePanelMaxHeight, string> = {
+  none: "",
+  sm: "max-h-48 overflow-y-auto",
+  md: "max-h-72 overflow-y-auto",
+  lg: "max-h-96 overflow-y-auto",
+};
+
+const CODE_PANEL_BODY_CODE_CLASS = "font-mono text-code-medium text-code";
+
+const CODE_PANEL_CONTAINMENT_CLASS =
+  "m-0 min-w-0 w-full max-w-full overflow-x-auto whitespace-pre-wrap rounded-lg border border-outline [overflow-wrap:anywhere] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary";
+
+export function codePanelVariants({
+  className,
+  maxHeight = "none",
+  padding = "compact",
+  surface = "high",
+}: Pick<CodePanelProps, "className" | "maxHeight" | "padding" | "surface">) {
+  return cn(
+    CODE_PANEL_CONTAINMENT_CLASS,
+    CODE_PANEL_PADDING_CLASS[padding],
+    CODE_PANEL_SURFACE_CLASS[surface],
+    CODE_PANEL_MAX_HEIGHT_CLASS[maxHeight],
+    CODE_PANEL_BODY_CODE_CLASS,
+    className,
+  );
+}
+
+export const CodePanel = forwardRef<HTMLPreElement, CodePanelProps>(
+  function CodePanel(
+    { className, maxHeight = "none", padding, surface, tabIndex, ...props },
+    ref,
+  ) {
+    const isScrollable = maxHeight !== "none";
+
+    return (
+      <pre
+        className={codePanelVariants({ className, maxHeight, padding, surface })}
+        ref={ref}
+        tabIndex={tabIndex ?? (isScrollable ? 0 : undefined)}
+        {...props}
+      />
+    );
+  },
+);

package/src/data-display/data-table.tsx

@@ -0,0 +1,180 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+import { cn } from "../utilities/cn";
+import {
+  Table,
+  type TableSize,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./table";
+
+export type DataTableState = "empty" | "error" | "loading" | "success";
+
+export interface DataTableColumn<Row> {
+  cell: (row: Row) => ReactNode;
+  header: ReactNode;
+  id: string;
+  cellClassName?: string;
+  headerClassName?: string;
+}
+
+export interface DataTableProps<Row> {
+  columns: DataTableColumn<Row>[];
+  data: Row[];
+  getRowKey: (row: Row) => string;
+  ariaLabel?: string;
+  caption?: ReactNode;
+  containerClassName?: string;
+  containerProps?: HTMLAttributes<HTMLDivElement>;
+  emptyMessage?: ReactNode;
+  errorMessage?: ReactNode;
+  loadingMessage?: ReactNode;
+  rowClassName?: (row: Row) => string | undefined;
+  size?: TableSize;
+  state?: DataTableState;
+  tableClassName?: string;
+}
+
+function DataTablePlaceholderBar({ className }: { className?: string }) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn("animate-pulse rounded-xl bg-af-overlay", className)}
+    />
+  );
+}
+
+function DataTableStatusRow({
+  children,
+  colSpan,
+  role,
+  ariaBusy,
+  ariaLive,
+  cellClassName,
+}: {
+  children: ReactNode;
+  colSpan: number;
+  role: "alert" | "status";
+  ariaBusy?: boolean;
+  ariaLive?: "assertive" | "polite";
+  cellClassName?: string;
+}) {
+  return (
+    <TableRow>
+      <TableCell className={cellClassName} colSpan={colSpan}>
+        <div
+          aria-busy={ariaBusy || undefined}
+          aria-live={ariaLive}
+          role={role}
+        >
+          {children}
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export function DataTable<Row>({
+  columns,
+  data,
+  getRowKey,
+  ariaLabel,
+  caption,
+  containerClassName,
+  containerProps,
+  emptyMessage,
+  errorMessage,
+  loadingMessage,
+  rowClassName,
+  size,
+  state = "success",
+  tableClassName,
+}: DataTableProps<Row>) {
+  const renderBody = () => {
+    if (state === "loading") {
+      return (
+        <DataTableStatusRow
+          ariaBusy
+          ariaLive="polite"
+          colSpan={columns.length}
+          role="status"
+        >
+          <div className="grid gap-3 py-1">
+            {loadingMessage}
+            <div aria-hidden="true" className="grid gap-2">
+              <DataTablePlaceholderBar className="h-4 w-full max-w-48" />
+              <DataTablePlaceholderBar className="h-8 w-full" />
+              <DataTablePlaceholderBar className="h-4 w-full max-w-48" />
+            </div>
+          </div>
+        </DataTableStatusRow>
+      );
+    }
+
+    if (state === "error") {
+      return (
+        <DataTableStatusRow
+          ariaLive="assertive"
+          cellClassName="text-af-text-subtle"
+          colSpan={columns.length}
+          role="alert"
+        >
+          {errorMessage}
+        </DataTableStatusRow>
+      );
+    }
+
+    if (state === "empty" || (state === "success" && data.length === 0)) {
+      return (
+        <DataTableStatusRow
+          ariaLive="polite"
+          cellClassName="text-af-text-subtle"
+          colSpan={columns.length}
+          role="status"
+        >
+          {emptyMessage}
+        </DataTableStatusRow>
+      );
+    }
+
+    return data.map((row) => (
+      <TableRow className={rowClassName?.(row)} key={getRowKey(row)}>
+        {columns.map((column) => (
+          <TableCell className={column.cellClassName} key={column.id}>
+            {column.cell(row)}
+          </TableCell>
+        ))}
+      </TableRow>
+    ));
+  };
+
+  return (
+    <Table
+      aria-label={ariaLabel}
+      className={tableClassName}
+      containerClassName={containerClassName}
+      containerProps={containerProps}
+      size={size}
+    >
+      {caption ? <TableCaption>{caption}</TableCaption> : null}
+      <TableHeader>
+        <TableRow>
+          {columns.map((column) => (
+            <TableHead
+              className={column.headerClassName}
+              key={column.id}
+              scope="col"
+            >
+              {column.header}
+            </TableHead>
+          ))}
+        </TableRow>
+      </TableHeader>
+      <TableBody>{renderBody()}</TableBody>
+    </Table>
+  );
+}

package/src/data-display/description-list.tsx

@@ -0,0 +1,24 @@
+import { forwardRef, type HTMLAttributes } from "react";
+
+import { BODY_TEXT_CLASS } from "../primitives/typography-roles";
+import { cn } from "../utilities/cn";
+
+export interface DescriptionListProps
+  extends HTMLAttributes<HTMLDListElement> {}
+
+export const DescriptionList = forwardRef<
+  HTMLDListElement,
+  DescriptionListProps
+>(function DescriptionList({ className, ...props }, ref) {
+  return (
+    <dl
+      className={cn(
+        "m-0 grid min-w-0 gap-1.5 [&_dd]:m-0 [&_dd]:min-w-0 [&_div]:grid [&_div]:min-w-0 [&_div]:gap-2",
+        BODY_TEXT_CLASS,
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});

package/src/data-display/index.ts

@@ -0,0 +1,34 @@
+/** Stable category path for `@you-agent-factory/components/data-display`. */
+export const COMPONENTS_CATEGORY = "data-display" as const;
+
+export type ComponentsCategory = typeof COMPONENTS_CATEGORY;
+
+export { CodePanel, codePanelVariants } from "./code-panel";
+export type { CodePanelProps } from "./code-panel";
+export { DescriptionList } from "./description-list";
+export type { DescriptionListProps } from "./description-list";
+
+export { DataTable } from "./data-table";
+export type {
+  DataTableColumn,
+  DataTableProps,
+  DataTableState,
+} from "./data-table";
+
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./table";
+export type { TableProps, TableSize } from "./table";
+
+export {
+  tableCellTruncateClassName,
+  tableCellWrapClassName,
+  tableMinWidthWideClassName,
+  tableNarrowContainerClassName,
+} from "./table-layout";

package/src/data-display/table-layout.ts

@@ -0,0 +1,12 @@
+/** Wrap long cell content without forcing page-level horizontal overflow. */
+export const tableCellWrapClassName = "min-w-0 [overflow-wrap:anywhere]";
+
+/** Truncate overflowing cell content with ellipsis. */
+export const tableCellTruncateClassName =
+  "block min-w-0 max-w-full truncate whitespace-nowrap";
+
+/** Minimum table width for wide datasets; pair with a narrow scroll container. */
+export const tableMinWidthWideClassName = "min-w-2xl";
+
+/** Scroll container classes for narrow viewport table containment. */
+export const tableNarrowContainerClassName = "min-w-0 overscroll-x-contain";