@pstdio/ui 0.0.2 → 0.0.4

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

@@ -1,120 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,341 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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>
-  );
-};