@kopai/ui 0.0.5 → 0.2.0

package/src/components/dashboard/Stack/Stack.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Stack } from "./index.js";
+
+const meta: Meta<typeof Stack> = {
+  title: "Dashboard/Stack",
+  component: Stack,
+};
+export default meta;
+type Story = StoryObj<typeof Stack>;
+
+const StackItem = ({ label }: { label: string }) => (
+  <div
+    style={{
+      padding: 12,
+      background: "hsl(var(--card))",
+      border: "1px solid hsl(var(--border))",
+      borderRadius: "var(--radius)",
+    }}
+  >
+    {label}
+  </div>
+);
+
+export const Vertical: Story = {
+  render: () => (
+    <Stack
+      element={{
+        props: { direction: "vertical", gap: "md", align: "stretch" },
+      }}
+    >
+      <StackItem label="Item 1" />
+      <StackItem label="Item 2" />
+      <StackItem label="Item 3" />
+    </Stack>
+  ),
+};
+
+export const Horizontal: Story = {
+  render: () => (
+    <Stack
+      element={{
+        props: { direction: "horizontal", gap: "md", align: "center" },
+      }}
+    >
+      <StackItem label="Item 1" />
+      <StackItem label="Item 2" />
+      <StackItem label="Item 3" />
+    </Stack>
+  ),
+};
+
+export const SmallGap: Story = {
+  render: () => (
+    <Stack
+      element={{ props: { direction: "vertical", gap: "sm", align: "start" } }}
+    >
+      <StackItem label="Item 1" />
+      <StackItem label="Item 2" />
+    </Stack>
+  ),
+};

package/src/components/dashboard/Stack/index.tsx

@@ -0,0 +1,33 @@
+import { dashboardCatalog } from "../../../lib/catalog.js";
+import type { CatalogueComponentProps } from "../../../lib/component-catalog.js";
+
+export function Stack({
+  element,
+  children,
+}: CatalogueComponentProps<typeof dashboardCatalog.components.Stack>) {
+  const { direction, gap, align } = element.props;
+  const gaps: Record<string, string> = {
+    sm: "8px",
+    md: "16px",
+    lg: "24px",
+  };
+  const alignments: Record<string, string> = {
+    start: "flex-start",
+    center: "center",
+    end: "flex-end",
+    stretch: "stretch",
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: direction === "horizontal" ? "row" : "column",
+        gap: gaps[gap || "md"],
+        alignItems: alignments[align || "stretch"],
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/dashboard/Table/Table.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Table } from "./index.js";
+
+const meta: Meta<typeof Table> = {
+  title: "Dashboard/Table",
+  component: Table,
+};
+export default meta;
+type Story = StoryObj<typeof Table>;
+
+export const Default: Story = {
+  args: {
+    element: {
+      props: {
+        dataPath: "users",
+        columns: [
+          { key: "name", label: "Name", format: "text" },
+          { key: "status", label: "Status", format: "badge" },
+          { key: "amount", label: "Amount", format: "currency" },
+        ],
+      },
+    },
+  },
+};
+
+export const TwoColumns: Story = {
+  args: {
+    element: {
+      props: {
+        dataPath: "items",
+        columns: [
+          { key: "name", label: "Name", format: "text" },
+          { key: "amount", label: "Amount", format: "currency" },
+        ],
+      },
+    },
+  },
+};

package/src/components/dashboard/Table/index.tsx

@@ -0,0 +1,104 @@
+import { dashboardCatalog } from "../../../lib/catalog.js";
+import type { CatalogueComponentProps } from "../../../lib/component-catalog.js";
+
+export function Table({
+  element,
+}: CatalogueComponentProps<typeof dashboardCatalog.components.Table>) {
+  const { dataPath, columns } = element.props;
+
+  // Static mock data for example page
+  const mockData = [
+    { id: 1, name: "Item A", status: "Active", amount: 1250 },
+    { id: 2, name: "Item B", status: "Pending", amount: 830 },
+    { id: 3, name: "Item C", status: "Completed", amount: 2100 },
+  ];
+
+  const formatCell = (
+    value: unknown,
+    format?: "text" | "currency" | "date" | "badge" | null
+  ) => {
+    if (value === null || value === undefined) return "-";
+    if (format === "currency" && typeof value === "number") {
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+      }).format(value);
+    }
+    if (format === "date" && typeof value === "string") {
+      const d = new Date(value);
+      return isNaN(d.getTime()) ? String(value) : d.toLocaleDateString();
+    }
+    if (format === "badge") {
+      return (
+        <span
+          style={{
+            padding: "2px 8px",
+            borderRadius: 12,
+            fontSize: 12,
+            fontWeight: 500,
+            background: "hsl(var(--border))",
+            color: "hsl(var(--foreground))",
+          }}
+        >
+          {String(value)}
+        </span>
+      );
+    }
+    return String(value);
+  };
+
+  return (
+    <div>
+      <table style={{ width: "100%", borderCollapse: "collapse" }}>
+        <thead>
+          <tr>
+            {columns.map((col) => (
+              <th
+                key={col.key}
+                style={{
+                  textAlign: "left",
+                  padding: "12px 8px",
+                  borderBottom: "1px solid hsl(var(--border))",
+                  fontSize: 12,
+                  fontWeight: 500,
+                  color: "hsl(var(--muted-foreground))",
+                  textTransform: "uppercase",
+                  letterSpacing: "0.05em",
+                }}
+              >
+                {col.label}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {mockData.map((row, i) => (
+            <tr key={i}>
+              {columns.map((col) => (
+                <td
+                  key={col.key}
+                  style={{
+                    padding: "12px 8px",
+                    borderBottom: "1px solid hsl(var(--border))",
+                    fontSize: 14,
+                  }}
+                >
+                  {formatCell(row[col.key as keyof typeof row], col.format)}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <p
+        style={{
+          margin: "8px 0 0",
+          fontSize: 12,
+          color: "hsl(var(--muted-foreground))",
+        }}
+      >
+        Data: {dataPath}
+      </p>
+    </div>
+  );
+}

package/src/components/dashboard/Text/Text.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Text } from "./index.js";
+
+const meta: Meta<typeof Text> = {
+  title: "Dashboard/Text",
+  component: Text,
+};
+export default meta;
+type Story = StoryObj<typeof Text>;
+
+export const Default: Story = {
+  args: {
+    element: {
+      props: {
+        content: "Default text content",
+        variant: null,
+        color: "default",
+      },
+    },
+  },
+};
+
+export const Muted: Story = {
+  args: {
+    element: {
+      props: { content: "Muted text content", variant: null, color: "muted" },
+    },
+  },
+};
+
+export const Success: Story = {
+  args: {
+    element: {
+      props: { content: "Success message", variant: null, color: "success" },
+    },
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    element: {
+      props: { content: "Warning message", variant: null, color: "warning" },
+    },
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    element: {
+      props: { content: "Error message", variant: null, color: "danger" },
+    },
+  },
+};

package/src/components/dashboard/Text/index.tsx

@@ -0,0 +1,18 @@
+import { dashboardCatalog } from "../../../lib/catalog.js";
+import type { CatalogueComponentProps } from "../../../lib/component-catalog.js";
+
+export function Text({
+  element,
+}: CatalogueComponentProps<typeof dashboardCatalog.components.Text>) {
+  const { content, color } = element.props;
+  const colors: Record<string, string> = {
+    default: "hsl(var(--foreground))",
+    muted: "hsl(var(--muted-foreground))",
+    success: "#22c55e",
+    warning: "#eab308",
+    danger: "#ef4444",
+  };
+  return (
+    <p style={{ margin: 0, color: colors[color || "default"] }}>{content}</p>
+  );
+}

package/src/components/dashboard/index.ts

@@ -0,0 +1,46 @@
+export { Badge } from "./Badge/index.js";
+export { Button } from "./Button/index.js";
+export { Card } from "./Card/index.js";
+export { Chart } from "./Chart/index.js";
+export { DatePicker } from "./DatePicker/index.js";
+export { Divider } from "./Divider/index.js";
+export { Empty } from "./Empty/index.js";
+export { Grid } from "./Grid/index.js";
+export { Heading } from "./Heading/index.js";
+export { List } from "./List/index.js";
+export { Metric } from "./Metric/index.js";
+export { Stack } from "./Stack/index.js";
+export { Table } from "./Table/index.js";
+export { Text } from "./Text/index.js";
+
+import { Badge } from "./Badge/index.js";
+import { Button } from "./Button/index.js";
+import { Card } from "./Card/index.js";
+import { Chart } from "./Chart/index.js";
+import { DatePicker } from "./DatePicker/index.js";
+import { Divider } from "./Divider/index.js";
+import { Empty } from "./Empty/index.js";
+import { Grid } from "./Grid/index.js";
+import { Heading } from "./Heading/index.js";
+import { List } from "./List/index.js";
+import { Metric } from "./Metric/index.js";
+import { Stack } from "./Stack/index.js";
+import { Table } from "./Table/index.js";
+import { Text } from "./Text/index.js";
+
+export const componentRegistry = {
+  Badge,
+  Button,
+  Card,
+  Chart,
+  DatePicker,
+  Divider,
+  Empty,
+  Grid,
+  Heading,
+  List,
+  Metric,
+  Stack,
+  Table,
+  Text,
+};

package/src/components/index.ts

@@ -0,0 +1,17 @@
+export {
+  Badge,
+  Button,
+  Card,
+  Chart,
+  DatePicker,
+  Divider,
+  Empty,
+  Grid,
+  Heading,
+  List,
+  Metric,
+  Stack,
+  Table,
+  Text,
+  componentRegistry,
+} from "./dashboard/index.js";

package/src/components/observability/LogTimeline/LogDetailPane/AttributesTab.tsx

@@ -0,0 +1,56 @@
+import { useMemo } from "react";
+import type { LogEntry } from "../../types.js";
+import {
+  formatAttributeValue,
+  isComplexValue,
+} from "../../utils/attributes.js";
+
+export interface AttributesTabProps {
+  log: LogEntry;
+}
+
+export function AttributesTab({ log }: AttributesTabProps) {
+  const sortedAttributes = useMemo(() => {
+    return Object.entries(log.attributes).sort(([a], [b]) =>
+      a.localeCompare(b)
+    );
+  }, [log.attributes]);
+
+  if (sortedAttributes.length === 0) {
+    return (
+      <div className="text-sm text-muted-foreground text-center py-8">
+        No attributes available
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {sortedAttributes.map(([key, value]) => {
+        const isComplex = isComplexValue(value);
+        const formattedValue = formatAttributeValue(value);
+        return (
+          <div key={key} className="p-2 rounded bg-muted">
+            <div
+              className="font-mono font-medium text-xs text-foreground mb-1"
+              title={key}
+            >
+              {key}
+            </div>
+            <div>
+              {isComplex ? (
+                <pre className="text-xs text-foreground bg-background p-2 rounded border border-border overflow-x-auto">
+                  {formattedValue}
+                </pre>
+              ) : (
+                <span className="text-sm text-foreground break-words">
+                  {formattedValue}
+                </span>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/observability/LogTimeline/LogDetailPane/JsonTreeView.tsx

@@ -0,0 +1,139 @@
+import { useState } from "react";
+
+export interface JsonTreeViewProps {
+  data: Record<string, unknown> | unknown[];
+  level?: number;
+}
+
+export function JsonTreeView({ data, level = 0 }: JsonTreeViewProps) {
+  return (
+    <div className="font-mono text-sm">
+      {Array.isArray(data) ? (
+        <ArrayView items={data} level={level} />
+      ) : (
+        <ObjectView obj={data} level={level} />
+      )}
+    </div>
+  );
+}
+
+function ObjectView({
+  obj,
+  level,
+}: {
+  obj: Record<string, unknown>;
+  level: number;
+}) {
+  const entries = Object.entries(obj);
+  if (entries.length === 0)
+    return <span className="text-muted-foreground">{"{}"}</span>;
+  return (
+    <div>
+      {entries.map(([key, value]) => (
+        <JsonTreeNode key={key} objKey={key} value={value} level={level} />
+      ))}
+    </div>
+  );
+}
+
+function ArrayView({ items, level }: { items: unknown[]; level: number }) {
+  if (items.length === 0)
+    return <span className="text-muted-foreground">[]</span>;
+  return (
+    <div>
+      {items.map((item, index) => (
+        <JsonTreeNode
+          key={index}
+          objKey={String(index)}
+          value={item}
+          level={level}
+          isArrayItem
+        />
+      ))}
+    </div>
+  );
+}
+
+function JsonTreeNode({
+  objKey,
+  value,
+  level,
+  isArrayItem = false,
+}: {
+  objKey: string;
+  value: unknown;
+  level: number;
+  isArrayItem?: boolean;
+}) {
+  const [isExpanded, setIsExpanded] = useState(level < 2);
+
+  const isExpandable =
+    value !== null &&
+    typeof value === "object" &&
+    (Array.isArray(value) ? value.length > 0 : Object.keys(value).length > 0);
+
+  const indent = level * 16;
+
+  if (!isExpandable) {
+    return (
+      <div
+        style={{ paddingLeft: `${indent}px` }}
+        className="py-0.5 hover:bg-muted"
+      >
+        {!isArrayItem && (
+          <span className="text-blue-600 dark:text-blue-400">
+            {objKey}
+            {": "}
+          </span>
+        )}
+        <span className="text-foreground">{formatPrimitiveValue(value)}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div
+        style={{ paddingLeft: `${indent}px` }}
+        className="py-0.5 hover:bg-muted cursor-pointer"
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <span className="inline-block w-4 text-muted-foreground">
+          {isExpanded ? "▼" : "▶"}
+        </span>
+        {!isArrayItem && (
+          <span className="text-blue-600 dark:text-blue-400">
+            {objKey}
+            {": "}
+          </span>
+        )}
+        <span className="text-muted-foreground">
+          {Array.isArray(value)
+            ? `Array(${value.length})`
+            : `Object(${Object.keys(value).length})`}
+        </span>
+      </div>
+      {isExpanded && (
+        <div>
+          {Array.isArray(value) ? (
+            <ArrayView items={value} level={level + 1} />
+          ) : (
+            <ObjectView
+              obj={value as Record<string, unknown>}
+              level={level + 1}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function formatPrimitiveValue(value: unknown): string {
+  if (value === null) return "null";
+  if (value === undefined) return "undefined";
+  if (typeof value === "string") return `"${value}"`;
+  if (typeof value === "boolean") return value ? "true" : "false";
+  if (typeof value === "number") return String(value);
+  return String(value);
+}