@pstdio/ui 0.0.1

package/src/components/info-card.stories.tsx

@@ -0,0 +1,120 @@
+import { Badge, Box, Button, HStack, Icon, Menu, Text } from "@chakra-ui/react";
+import { MoreHorizontal, PlayIcon, Settings, ShieldCheck, Sparkles } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+
+import { InfoCard } from "./info-card";
+import { MenuItem } from "./menu-item";
+
+type StoryFn = () => ReactNode;
+type InfoCardArgs = ComponentProps<typeof InfoCard>;
+
+const meta = {
+  title: "Components/InfoCard",
+  component: InfoCard,
+  decorators: [
+    (Story: StoryFn) => (
+      <Box padding="sm" background="bg">
+        <Story />
+      </Box>
+    ),
+  ],
+  args: {
+    title: "Fraud review pipeline",
+    description: "Checks incoming claims against historical activity for anomalies.",
+    infoItems: [
+      { label: "Created", value: "Sep 18, 2024" },
+      { label: "Updated", value: "Oct 2, 2024" },
+    ],
+  },
+};
+
+export default meta;
+
+export const Default = {
+  render: (args: InfoCardArgs) => (
+    <Box maxWidth="520px">
+      <InfoCard {...args} />
+    </Box>
+  ),
+};
+
+export const WithActions = {
+  render: (args: InfoCardArgs) => {
+    const actions = [
+      <Button key="run" size="md" variant="solid">
+        <HStack gap="2px">
+          <Icon as={PlayIcon} boxSize="18px" />
+          <Text>Run</Text>
+        </HStack>
+      </Button>,
+      <Menu.Root key="options">
+        <Menu.Trigger asChild>
+          <Button size="md" variant="outline" aria-label="Options menu">
+            <Icon as={MoreHorizontal} boxSize="18px" />
+          </Button>
+        </Menu.Trigger>
+        <Menu.Positioner>
+          <Menu.Content minW="240px" bg="bg">
+            <MenuItem
+              id="favorite"
+              primaryLabel="Feature pipeline"
+              secondaryLabel="Pin to overview"
+              leftIcon={Sparkles}
+            />
+            <MenuItem
+              id="restrict"
+              primaryLabel="Restrict access"
+              secondaryLabel="Limit to admins"
+              leftIcon={ShieldCheck}
+            />
+            <Menu.Separator />
+            <MenuItem
+              id="settings"
+              primaryLabel="Pipeline settings"
+              secondaryLabel="Configure inputs and outputs"
+              leftIcon={Settings}
+            />
+          </Menu.Content>
+        </Menu.Positioner>
+      </Menu.Root>,
+    ];
+
+    return (
+      <Box maxWidth="520px">
+        <InfoCard {...args} actions={actions} />
+      </Box>
+    );
+  },
+};
+
+export const WithBadge = {
+  args: {
+    badge: (
+      <Badge size="lg" variant="subtle" colorPalette="blue">
+        Pipeline
+      </Badge>
+    ),
+  },
+  render: (args: InfoCardArgs) => (
+    <Box maxWidth="520px">
+      <InfoCard {...args} />
+    </Box>
+  ),
+};
+
+export const LongCopy = {
+  args: {
+    title: "Northwind Traders Q4 validation",
+    description:
+      "Monthly invoice and credit memo validation set with regional edge cases, multi-currency rounding, and fallback parsing rules.",
+    infoItems: [
+      { label: "Rows", value: "1,248" },
+      { label: "Coverage", value: "85%" },
+    ],
+  },
+  render: (args: InfoCardArgs) => (
+    <Box maxWidth="520px">
+      <InfoCard {...args} />
+    </Box>
+  ),
+};

package/src/components/info-card.tsx

@@ -0,0 +1,60 @@
+import { HStack, Stack, Text } from "@chakra-ui/react";
+import type { ReactNode } from "react";
+
+interface InfoCardProps {
+  title: string;
+  description: string;
+  infoItems?: Array<{ label: string; value: ReactNode }>;
+  actions?: ReactNode | ReactNode[];
+  badge?: ReactNode;
+}
+
+export const InfoCard = (props: InfoCardProps) => {
+  const { title, description, infoItems = [], actions, badge } = props;
+  const hasInfoItems = infoItems.length > 0;
+
+  const renderedActions = (() => {
+    if (!actions) return null;
+
+    return Array.isArray(actions) ? actions : [actions];
+  })();
+
+  return (
+    <Stack gap="xs">
+      <HStack alignItems="flex-start" justifyContent="space-between" gap="md">
+        <Stack flex="1" minW="0">
+          <HStack gap="2">
+            {badge}
+            <Text textStyle="heading/M">{title}</Text>
+          </HStack>
+          <Text textStyle="paragraph/S/regular" color="fg.muted">
+            {description}
+          </Text>
+        </Stack>
+
+        {renderedActions ? (
+          <HStack gap="xs" alignItems="center">
+            {renderedActions.map((action, index) => (
+              <Stack key={`info-card-action-${index}`} gap="0">
+                {action}
+              </Stack>
+            ))}
+          </HStack>
+        ) : null}
+      </HStack>
+
+      {hasInfoItems ? (
+        <HStack gap="lg" mt="sm" flexWrap="wrap">
+          {infoItems.map((info, index) => (
+            <Stack key={`info-item-${index}`} gap="2px">
+              <Text textStyle="label/S/medium" color="fg.muted">
+                {info.label}
+              </Text>
+              {typeof info.value === "string" ? <Text textStyle="paragraph/S/regular">{info.value}</Text> : info.value}
+            </Stack>
+          ))}
+        </HStack>
+      ) : null}
+    </Stack>
+  );
+};

package/src/components/item-section.stories.tsx

@@ -0,0 +1,57 @@
+import { Box, Stack } from "@chakra-ui/react";
+import { FileText, Folder, Settings, Star } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { ItemSection } from "./item-section";
+import { MenuItem } from "./menu-item";
+
+type StoryFn = () => ReactNode;
+
+const meta = {
+  title: "Components/ItemSection",
+  component: ItemSection,
+  decorators: [
+    (Story: StoryFn) => (
+      <Box padding="lg" background="bg" maxWidth="300px">
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+
+export const Default = {
+  render: () => (
+    <ItemSection title="Files">
+      <MenuItem primaryLabel="Project Overview" leftIcon={FileText} />
+      <MenuItem primaryLabel="Assets" leftIcon={Folder} />
+      <MenuItem primaryLabel="Settings" leftIcon={Settings} />
+    </ItemSection>
+  ),
+};
+
+export const MultipleSections = {
+  render: () => (
+    <Stack gap="sm">
+      <ItemSection title="Favorites">
+        <MenuItem primaryLabel="Main Dashboard" leftIcon={Star} />
+        <MenuItem primaryLabel="Reports" leftIcon={FileText} />
+      </ItemSection>
+      <ItemSection title="Recent" defaultOpen={false}>
+        <MenuItem primaryLabel="Project Alpha" leftIcon={Folder} />
+        <MenuItem primaryLabel="Project Beta" leftIcon={Folder} />
+      </ItemSection>
+    </Stack>
+  ),
+};
+
+export const WithSecondaryLabels = {
+  render: () => (
+    <ItemSection title="Members">
+      <MenuItem primaryLabel="John Doe" secondaryLabel="Admin" />
+      <MenuItem primaryLabel="Jane Smith" secondaryLabel="Editor" />
+      <MenuItem primaryLabel="Bob Wilson" secondaryLabel="Viewer" isDisabled />
+    </ItemSection>
+  ),
+};

package/src/components/item-section.tsx

@@ -0,0 +1,57 @@
+import { Box, Collapsible, Flex, Menu, Stack, Text } from "@chakra-ui/react";
+import { ChevronRight } from "lucide-react";
+import type { ReactNode } from "react";
+
+export interface ItemSectionProps {
+  children: ReactNode;
+  title?: string;
+  defaultOpen?: boolean;
+  action?: ReactNode;
+}
+
+/**
+ * A collapsible component that displays a section of items (typically MenuItems).
+ */
+export const ItemSection = (props: ItemSectionProps) => {
+  const { children, title, defaultOpen = true, action } = props;
+
+  return (
+    <Collapsible.Root defaultOpen={defaultOpen} width="full">
+      <Flex>
+        <Collapsible.Trigger
+          _hover={{
+            background: "bg.muted",
+          }}
+          borderRadius={"xs"}
+          padding="sm"
+          height="2rem"
+          display="flex"
+          gap="2"
+          alignItems="center"
+          cursor="pointer"
+        >
+          {title && (
+            <Text fontWeight="600" textStyle="label/S/medium">
+              {title}
+            </Text>
+          )}
+          <Collapsible.Indicator transition="transform 0.2s" _open={{ transform: "rotate(90deg)" }}>
+            <ChevronRight size={16} />
+          </Collapsible.Indicator>
+        </Collapsible.Trigger>
+        {action && (
+          <Box marginLeft="auto" onClick={(e) => e.stopPropagation()}>
+            {action}
+          </Box>
+        )}
+      </Flex>
+      <Collapsible.Content>
+        <Menu.Root>
+          <Stack gap="0" paddingLeft="xs" paddingY="xs">
+            {children}
+          </Stack>
+        </Menu.Root>
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+};

package/src/components/layout.stories.tsx

@@ -0,0 +1,341 @@
+import { Box, Button, Flex, HStack, Stack, Text } from "@chakra-ui/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  RouterProvider,
+} from "@tanstack/react-router";
+import type { ReactNode } from "react";
+
+import { ContentPlaceholder } from "@/components/content-placeholder";
+import { Layout, PanelLayout, PanelSectionLayout } from "./layout";
+
+type StoryFn = () => ReactNode;
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      staleTime: Number.POSITIVE_INFINITY,
+    },
+    mutations: {
+      retry: false,
+    },
+  },
+});
+
+interface PanelActions {
+  primaryLabel: string;
+  secondaryLabel: string;
+}
+
+interface PanelContentSection {
+  id: string;
+  title: string;
+  description: string;
+  placeholderHeight?: string;
+}
+
+interface PanelStoryPageProps {
+  title: string;
+  description: string;
+  menuItems: string[];
+  actions: PanelActions;
+  contentSections: PanelContentSection[];
+}
+
+interface PanelStoryMenuProps {
+  items: string[];
+}
+
+const PanelStoryMenu = (props: PanelStoryMenuProps) => {
+  const { items } = props;
+
+  return (
+    <Stack gap="xs">
+      {items.map((item) => (
+        <Stack key={item} gap="2xs" p="xs" borderWidth="1px" borderRadius="md">
+          <Text textStyle="label/M/medium">{item}</Text>
+          <Text textStyle="paragraph/XS/regular" color="fg.muted">
+            Quick links and filters live here inside the panel menu.
+          </Text>
+        </Stack>
+      ))}
+    </Stack>
+  );
+};
+
+interface PanelSectionActionsProps {
+  title: string;
+  primaryLabel: string;
+  secondaryLabel: string;
+}
+
+const PanelSectionActions = (props: PanelSectionActionsProps) => {
+  const { title, primaryLabel, secondaryLabel } = props;
+
+  return (
+    <Flex width="100%" alignItems="center" gap="sm" flexWrap="wrap">
+      <Stack gap="2xs">
+        <Text textStyle="label/L/medium">{title}</Text>
+      </Stack>
+      <HStack gap="sm" ml="auto">
+        <Button size="sm" variant="solid">
+          {primaryLabel}
+        </Button>
+        <Button size="sm" variant="ghost">
+          {secondaryLabel}
+        </Button>
+      </HStack>
+    </Flex>
+  );
+};
+
+interface PanelSectionContentProps {
+  sections: PanelContentSection[];
+}
+
+const PanelSectionContent = (props: PanelSectionContentProps) => {
+  const { sections } = props;
+
+  return (
+    <Stack flex="1" minH="0" width="100%" p="md" gap="lg" overflowY="auto">
+      {sections.map((section) => (
+        <Stack key={section.id} gap="md">
+          <Stack gap="2xs">
+            <Text textStyle="label/L/medium">{section.title}</Text>
+            <Text textStyle="paragraph/XS/regular" color="fg.muted">
+              {section.description}
+            </Text>
+          </Stack>
+          <ContentPlaceholder minH={section.placeholderHeight ?? "260px"} borderRadius="md" />
+        </Stack>
+      ))}
+    </Stack>
+  );
+};
+
+const PanelStoryPage = (props: PanelStoryPageProps) => {
+  const { title, menuItems, actions, contentSections } = props;
+
+  return (
+    <PanelLayout
+      title={title}
+      menuContent={<PanelStoryMenu items={menuItems} />}
+      errorLabel={`Unable to render the ${title} panel.`}
+    >
+      <Stack gap="lg" height="100%" width="100%">
+        <PanelSectionLayout
+          actions={
+            <PanelSectionActions
+              title={`${title} workspace`}
+              primaryLabel={actions.primaryLabel}
+              secondaryLabel={actions.secondaryLabel}
+            />
+          }
+          content={<PanelSectionContent sections={contentSections} />}
+        />
+      </Stack>
+    </PanelLayout>
+  );
+};
+
+const createPanelPage = (panelStoryProps: PanelStoryPageProps) => () => <PanelStoryPage {...panelStoryProps} />;
+
+const filesPage = createPanelPage({
+  title: "Files",
+  description: "Browse uploads, assets, and artifacts across the Schub buckets.",
+  menuItems: ["Inbox", "Archive", "Shared"],
+  actions: { primaryLabel: "Upload file", secondaryLabel: "Refresh" },
+  contentSections: [
+    {
+      id: "incoming",
+      title: "Incoming uploads",
+      description: "Newly added files ready for ingestion.",
+      placeholderHeight: "360px",
+    },
+    {
+      id: "processing",
+      title: "Processing queue",
+      description: "Jobs running extraction or cleanup.",
+      placeholderHeight: "240px",
+    },
+    {
+      id: "library",
+      title: "Library",
+      description: "Previously processed documents and assets.",
+      placeholderHeight: "320px",
+    },
+  ],
+});
+
+const pipelinesPage = createPanelPage({
+  title: "Pipelines",
+  description: "Configure workflows, versions, and execution targets.",
+  menuItems: ["Active pipelines", "Drafts", "Retired"],
+  actions: { primaryLabel: "New pipeline", secondaryLabel: "Import" },
+  contentSections: [
+    {
+      id: "versions",
+      title: "Current versions",
+      description: "Rollouts and approvals for each pipeline.",
+      placeholderHeight: "300px",
+    },
+    {
+      id: "runs",
+      title: "Recent runs",
+      description: "Latest executions with status and outputs.",
+      placeholderHeight: "260px",
+    },
+    {
+      id: "approvals",
+      title: "Approval queue",
+      description: "Changes awaiting review before shipping.",
+      placeholderHeight: "220px",
+    },
+  ],
+});
+
+const jobsPage = createPanelPage({
+  title: "Jobs",
+  description: "Track status and outputs for each processing run.",
+  menuItems: ["Running", "Completed", "Failed"],
+  actions: { primaryLabel: "Create job", secondaryLabel: "Retry failed" },
+  contentSections: [
+    {
+      id: "live",
+      title: "Live jobs",
+      description: "Active runs streaming logs and metrics.",
+      placeholderHeight: "340px",
+    },
+    {
+      id: "history",
+      title: "History",
+      description: "Completed work with artifacts and summaries.",
+      placeholderHeight: "280px",
+    },
+    {
+      id: "alerts",
+      title: "Alerts",
+      description: "Failures that need your attention.",
+      placeholderHeight: "200px",
+    },
+  ],
+});
+
+const extractionPage = createPanelPage({
+  title: "Extraction",
+  description: "Manage schemas, previews, and extraction templates.",
+  menuItems: ["Schemas", "Previews", "Mappings"],
+  actions: { primaryLabel: "New schema", secondaryLabel: "Run preview" },
+  contentSections: [
+    {
+      id: "schemas",
+      title: "Schemas",
+      description: "Fields and validation rules for incoming data.",
+      placeholderHeight: "260px",
+    },
+    {
+      id: "previews",
+      title: "Previews",
+      description: "Sample documents and rendered results.",
+      placeholderHeight: "320px",
+    },
+    {
+      id: "templates",
+      title: "Templates",
+      description: "Reusable extraction logic across datasets.",
+      placeholderHeight: "240px",
+    },
+  ],
+});
+
+const evalsPage = createPanelPage({
+  title: "Evals",
+  description: "Review evals, datasets, and validation runs.",
+  menuItems: ["Datasets", "Runs", "Reports"],
+  actions: { primaryLabel: "New eval", secondaryLabel: "Refresh" },
+  contentSections: [
+    {
+      id: "datasets",
+      title: "Datasets",
+      description: "Collections of labeled documents for checks.",
+      placeholderHeight: "300px",
+    },
+    {
+      id: "runs",
+      title: "Eval runs",
+      description: "Execution history across evaluators.",
+      placeholderHeight: "260px",
+    },
+    {
+      id: "reports",
+      title: "Reports",
+      description: "Metrics, charts, and downloadable summaries.",
+      placeholderHeight: "340px",
+    },
+  ],
+});
+
+const rootRoute = createRootRoute({
+  component: Layout,
+});
+
+const filesRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "files",
+  component: filesPage,
+});
+
+const pipelinesRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "pipelines",
+  component: pipelinesPage,
+});
+
+const jobsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "jobs",
+  component: jobsPage,
+});
+
+const extractionRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "extraction",
+  component: extractionPage,
+});
+
+const evalsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "evals",
+  component: evalsPage,
+});
+
+const routeTree = rootRoute.addChildren([filesRoute, pipelinesRoute, jobsRoute, extractionRoute, evalsRoute]);
+
+const router = createRouter({
+  routeTree,
+  history: createMemoryHistory({ initialEntries: ["/files"] }),
+});
+
+const meta = {
+  title: "Components/Layout",
+  component: Layout,
+  decorators: [
+    (Story: StoryFn) => (
+      <QueryClientProvider client={queryClient}>
+        <Box height="100vh" background="bg" display="flex" flexDirection="column" overflow="hidden">
+          <Story />
+        </Box>
+      </QueryClientProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+export const AppShell = {
+  render: () => <RouterProvider router={router} />,
+};

package/src/components/layout.tsx

@@ -0,0 +1,67 @@
+import { Box, Flex, Stack } from "@chakra-ui/react";
+import { Outlet, useRouterState } from "@tanstack/react-router";
+import { ErrorBoundary } from "@/components/error-boundary";
+import { HorizontalMenuStack } from "@/components/horizontal-menu-stack";
+import { PanelMenu } from "@/components/panel-menu";
+import { Toaster } from "@/components/toaster";
+
+export const Layout = () => {
+  const { location } = useRouterState();
+  return (
+    <>
+      <Stack flex="1" minH="100vh" gap="0" overflow="hidden">
+        <Flex flex="1" height="100%" alignItems="stretch" overflow="hidden">
+          <Box flex="1" bg="bg" overflowY="auto">
+            <ErrorBoundary key={location.pathname} label="Unable to render this page.">
+              <Outlet />
+            </ErrorBoundary>
+          </Box>
+        </Flex>
+      </Stack>
+      <Toaster />
+    </>
+  );
+};
+
+interface PanelLayoutProps {
+  title: string;
+  menuContent?: React.ReactNode;
+  errorLabel?: string;
+  children?: React.ReactNode;
+}
+
+export const PanelLayout = (props: PanelLayoutProps) => {
+  const { title, menuContent, errorLabel, children } = props;
+
+  return (
+    <Flex height="100%" width="100%" minH="0">
+      <PanelMenu title={title}>{menuContent}</PanelMenu>
+      <ErrorBoundary label={errorLabel ?? "Unable to render the panel."}>
+        <Flex flex="1" overflow="hidden" minH="0">
+          {children ?? <Outlet />}
+        </Flex>
+      </ErrorBoundary>
+    </Flex>
+  );
+};
+
+interface PanelSectionLayoutProps {
+  actions: React.ReactNode;
+  content: React.ReactNode;
+}
+
+export const PanelSectionLayout = (props: PanelSectionLayoutProps) => {
+  const { actions, content } = props;
+  return (
+    <Stack height="100%" width="100%" gap="0" minH="0">
+      <HorizontalMenuStack align="flex-start" flexWrap="wrap" gap="sm">
+        {actions}
+      </HorizontalMenuStack>
+      <ErrorBoundary label="Unable to render the panel.">
+        <Flex flex="1" overflow="hidden" minH="0">
+          {content}
+        </Flex>
+      </ErrorBoundary>
+    </Stack>
+  );
+};