@pstdio/ui 0.0.1

package/src/components/drawer-inline.tsx

@@ -0,0 +1,90 @@
+import { Box, Flex, type FlexProps, Icon, IconButton, Stack, type StackProps, Text } from "@chakra-ui/react";
+import { PanelRightClose } from "lucide-react";
+import type { ReactNode } from "react";
+import { ContentPlaceholder } from "./content-placeholder";
+import { HorizontalMenuStack } from "./horizontal-menu-stack";
+
+interface DrawerInlineProps extends FlexProps {
+  open?: boolean;
+  children?: FlexProps["children"];
+  width?: FlexProps["width"];
+}
+
+export function DrawerInline(props: DrawerInlineProps) {
+  const { open, width, children, ...rest } = props;
+
+  if (!open) return null;
+
+  return (
+    <Flex height="100%" width={width} maxW="100%" bg="bg" {...rest}>
+      <Box width="8px" height="100%" borderRightWidth={"1px"}>
+        <ContentPlaceholder height="100%" />
+      </Box>
+      <Stack flex="1" minH="0" gap="0">
+        {children}
+      </Stack>
+    </Flex>
+  );
+}
+
+interface DrawerInlineHeaderProps extends StackProps {
+  title?: string;
+  actions?: ReactNode;
+  onClose?: () => void;
+  children?: StackProps["children"];
+}
+
+export function DrawerInlineHeader(props: DrawerInlineHeaderProps) {
+  const { title, actions, onClose, children, ...rest } = props;
+
+  return (
+    <HorizontalMenuStack {...rest} gap="sm" px="sm" py="xs" alignItems="center" borderBottomWidth="1px" bg="bg">
+      {onClose ? (
+        <IconButton onClick={onClose} aria-label="Close preview" variant="ghost" size="sm">
+          <Icon as={PanelRightClose} boxSize="16px" />
+        </IconButton>
+      ) : null}
+
+      <Flex align="center" gap="xs" minW="0" flex="1">
+        {title ? (
+          <Text textStyle="paragraph/M/medium" overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap">
+            {title}
+          </Text>
+        ) : null}
+        {children}
+      </Flex>
+
+      <Flex align="center" gap="xs" flexWrap="wrap" justify="flex-end">
+        {actions}
+      </Flex>
+    </HorizontalMenuStack>
+  );
+}
+
+interface DrawerInlineBodyProps extends FlexProps {
+  children?: FlexProps["children"];
+}
+
+export function DrawerInlineBody(props: DrawerInlineBodyProps) {
+  const { children, ...rest } = props;
+
+  return (
+    <Flex {...rest} direction="column" flex="1" minH="0" gap="sm" borderWidth="0" overflowY="auto">
+      {children}
+    </Flex>
+  );
+}
+
+interface DrawerInlineFooterProps extends FlexProps {
+  children?: FlexProps["children"];
+}
+
+export function DrawerInlineFooter(props: DrawerInlineFooterProps) {
+  const { children, ...rest } = props;
+
+  return (
+    <Flex {...rest} justify="flex-end" align="center" gap="xs" px="sm" py="xs" borderTopWidth="1px" bg="bg">
+      {children}
+    </Flex>
+  );
+}

package/src/components/empty-state.stories.tsx

@@ -0,0 +1,65 @@
+import { Box, Button, Icon } from "@chakra-ui/react";
+import { FileText, Folder } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { EmptyState, type EmptyStateProps } from "./empty-state";
+
+type StoryFn = () => ReactNode;
+
+const meta = {
+  title: "Components/EmptyState",
+  component: EmptyState,
+  decorators: [
+    (Story: StoryFn) => (
+      <Box padding="sm" background="bg">
+        <Story />
+      </Box>
+    ),
+  ],
+  args: {
+    title: "No documents yet.",
+    description: "Upload files to start building extractions.",
+  },
+};
+
+export default meta;
+
+export const Default = {
+  render: (args: EmptyStateProps) => (
+    <Box width="100%" maxWidth="420px">
+      <EmptyState {...args} />
+    </Box>
+  ),
+};
+
+export const WithIconAndAction = {
+  args: {
+    title: "Nothing uploaded yet.",
+    description: "Drop files into sample-raw or use the upload action.",
+    icon: <Icon as={FileText} boxSize="28px" color="fg.muted" />,
+  },
+  render: (args: EmptyStateProps) => (
+    <Box width="100%" maxWidth="420px">
+      <EmptyState {...args}>
+        <Button size="sm" variant="outline">
+          Upload files
+        </Button>
+      </EmptyState>
+    </Box>
+  ),
+};
+
+export const Compact = {
+  args: {
+    title: "This folder is empty.",
+    size: "sm",
+    textAlign: "left",
+    alignItems: "flex-start",
+    icon: <Icon as={Folder} boxSize="20px" color="fg.muted" />,
+  },
+  render: (args: EmptyStateProps) => (
+    <Box width="100%" maxWidth="420px">
+      <EmptyState {...args} />
+    </Box>
+  ),
+};

package/src/components/empty-state.tsx

@@ -0,0 +1,28 @@
+import { EmptyState as ChakraEmptyState, VStack } from "@chakra-ui/react";
+import * as React from "react";
+
+export interface EmptyStateProps extends ChakraEmptyState.RootProps {
+  title: string;
+  description?: string;
+  icon?: React.ReactNode;
+}
+
+export const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(function EmptyState(props, ref) {
+  const { title, description, icon, children, ...rest } = props;
+  return (
+    <ChakraEmptyState.Root ref={ref} {...rest}>
+      <ChakraEmptyState.Content>
+        {icon && <ChakraEmptyState.Indicator>{icon}</ChakraEmptyState.Indicator>}
+        {description ? (
+          <VStack textAlign="center">
+            <ChakraEmptyState.Title fontWeight="normal">{title}</ChakraEmptyState.Title>
+            <ChakraEmptyState.Description>{description}</ChakraEmptyState.Description>
+          </VStack>
+        ) : (
+          <ChakraEmptyState.Title fontWeight="normal">{title}</ChakraEmptyState.Title>
+        )}
+        {children}
+      </ChakraEmptyState.Content>
+    </ChakraEmptyState.Root>
+  );
+});

package/src/components/error-boundary.tsx

@@ -0,0 +1,80 @@
+import { AbsoluteCenter, Button, Stack, Text } from "@chakra-ui/react";
+import { Component, type ErrorInfo, type ReactNode } from "react";
+
+import { AlertMessage } from "./alert";
+import { ContentPlaceholder } from "./content-placeholder";
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+  label?: string;
+  onReset?: () => void;
+}
+
+interface ErrorBoundaryState {
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState = { error: null };
+
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error("Dashboard error boundary caught an error", error, info);
+  }
+
+  handleReset = () => {
+    this.setState({ error: null });
+    this.props.onReset?.();
+  };
+
+  render() {
+    const { children, fallback, label } = this.props;
+    const { error } = this.state;
+
+    if (error) {
+      if (fallback) {
+        return fallback;
+      }
+
+      return <ErrorFallback error={error} label={label} onReset={this.handleReset} />;
+    }
+
+    return children;
+  }
+}
+
+interface ErrorFallbackProps {
+  error: Error;
+  label?: string;
+  onReset?: () => void;
+}
+
+export const ErrorFallback = (props: ErrorFallbackProps) => {
+  const { error, label, onReset } = props;
+
+  return (
+    <ContentPlaceholder height="100%" width="100%">
+      <AbsoluteCenter>
+        <AlertMessage
+          status="error"
+          title={<Text textStyle="paragraph/M/medium">{label ?? "Something went wrong"}</Text>}
+        >
+          <Stack gap="sm">
+            <Text textStyle="paragraph/S/regular">
+              {error.message || "An unexpected error occurred while rendering this section."}
+            </Text>
+            {onReset ? (
+              <Button size="sm" variant="solid" colorScheme={"black"} onClick={onReset}>
+                Try again
+              </Button>
+            ) : null}
+          </Stack>
+        </AlertMessage>
+      </AbsoluteCenter>
+    </ContentPlaceholder>
+  );
+};

package/src/components/file-selector.stories.tsx

@@ -0,0 +1,166 @@
+import { Badge, Box, Stack, Text } from "@chakra-ui/react";
+import type { ReactNode } from "react";
+import { useState } from "react";
+
+import { type FileTreeItem, mapFilesById } from "@/components/file-tree-helpers";
+import { FileSelector } from "./file-selector";
+
+type StoryFn = () => ReactNode;
+
+const fileTree: FileTreeItem[] = [
+  {
+    id: "sample-raw",
+    name: "sample-raw",
+    type: "folder",
+    meta: "4 items",
+    children: [
+      {
+        id: "sample-raw/invoices",
+        name: "invoices",
+        type: "folder",
+        meta: "2 items",
+        children: [
+          {
+            id: "sample-raw/invoices/2024-05.pdf",
+            name: "2024-05.pdf",
+            type: "file",
+            meta: "1.4 MB · May 2, 2024",
+          },
+          {
+            id: "sample-raw/invoices/2024-06.pdf",
+            name: "2024-06.pdf",
+            type: "file",
+            meta: "1.1 MB · Jun 4, 2024",
+          },
+        ],
+      },
+      {
+        id: "sample-raw/receipts",
+        name: "receipts",
+        type: "folder",
+        meta: "1 item",
+        children: [
+          {
+            id: "sample-raw/receipts/ameris.csv",
+            name: "ameris.csv",
+            type: "file",
+            meta: "120 KB · Apr 1, 2024",
+          },
+        ],
+      },
+      {
+        id: "sample-raw/notes.md",
+        name: "notes.md",
+        type: "file",
+        meta: "6 KB · Apr 8, 2024",
+      },
+    ],
+  },
+  {
+    id: "sample-artifacts",
+    name: "sample-artifacts",
+    type: "folder",
+    meta: "2 items",
+    children: [
+      {
+        id: "sample-artifacts/run-042",
+        name: "run-042",
+        type: "folder",
+        meta: "1 item",
+        children: [
+          {
+            id: "sample-artifacts/run-042/output.json",
+            name: "output.json",
+            type: "file",
+            meta: "48 KB · May 8, 2024",
+          },
+        ],
+      },
+      {
+        id: "sample-artifacts/summary.json",
+        name: "summary.json",
+        type: "file",
+        meta: "12 KB · May 10, 2024",
+      },
+    ],
+  },
+];
+
+const initialCheckedIds = ["sample-raw/invoices/2024-05.pdf", "sample-raw/notes.md"];
+const filesById = mapFilesById(fileTree);
+const initialSelectedFiles = initialCheckedIds.flatMap((id) => {
+  const file = filesById.get(id);
+
+  return file ? [file] : [];
+});
+
+const meta = {
+  title: "Components/FileSelector",
+  component: FileSelector,
+  decorators: [
+    (Story: StoryFn) => (
+      <Box padding="sm" background="bg">
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+
+export const Default = {
+  render: () => {
+    const [checkedFileIds, setCheckedFileIds] = useState<string[]>(initialCheckedIds);
+    const [selectedFiles, setSelectedFiles] = useState<FileTreeItem[]>(initialSelectedFiles);
+
+    const handleCheckedFilesChange = (files: FileTreeItem[]) => {
+      setSelectedFiles(files);
+
+      setCheckedFileIds(files.map((file) => file.id));
+    };
+
+    return (
+      <Stack gap="md" maxWidth="420px">
+        <FileSelector
+          files={fileTree}
+          label="Raw bucket files"
+          checkedFileIds={checkedFileIds}
+          maxHeight="280px"
+          onCheckedFilesChange={handleCheckedFilesChange}
+        />
+        <Stack gap="xs">
+          <Text textStyle="paragraph/XS/regular" color="fg.muted">
+            Selected files ({selectedFiles.length})
+          </Text>
+          {selectedFiles.length === 0 ? (
+            <Text textStyle="paragraph/S/regular">None</Text>
+          ) : (
+            <Stack gap="xs">
+              {selectedFiles.map((file) => (
+                <Badge key={file.id} variant="subtle" colorPalette="blue">
+                  {file.name}
+                </Badge>
+              ))}
+            </Stack>
+          )}
+        </Stack>
+      </Stack>
+    );
+  },
+};
+
+export const Loading = {
+  render: () => (
+    <Box maxWidth="420px">
+      <FileSelector files={fileTree} label="Raw bucket files" isLoading maxHeight="280px" />
+    </Box>
+  ),
+};
+
+export const Empty = {
+  render: () => (
+    <Box maxWidth="420px">
+      <FileSelector files={[]} label="Raw bucket files" emptyLabel="No files in this bucket yet." maxHeight="280px" />
+    </Box>
+  ),
+};

package/src/components/file-selector.tsx

@@ -0,0 +1,192 @@
+import {
+  Box,
+  Checkmark,
+  createTreeCollection,
+  Icon,
+  Spinner,
+  Stack,
+  Text,
+  TreeView,
+  useTreeViewNodeContext,
+} from "@chakra-ui/react";
+import { FileText, Folder } from "lucide-react";
+
+import type { FileTreeItem } from "@/components/file-tree-helpers";
+import { EmptyState } from "./empty-state";
+
+interface FileSelectorProps {
+  files: FileTreeItem[];
+  checkedFileIds?: string[];
+  defaultCheckedFileIds?: string[];
+  label?: string;
+  emptyLabel?: string;
+  maxHeight?: string | number;
+  isLoading?: boolean;
+  onCheckedFilesChange?: (files: FileTreeItem[]) => void;
+}
+
+const TreeNodeCheckbox = (props: TreeView.NodeCheckboxProps) => {
+  const nodeState = useTreeViewNodeContext();
+
+  return (
+    <TreeView.NodeCheckbox aria-label="Select node" {...props}>
+      <Checkmark
+        bg={{
+          base: "bg",
+          _checked: "colorPalette.solid",
+          _indeterminate: "colorPalette.solid",
+        }}
+        size="sm"
+        checked={nodeState.checked === true}
+        indeterminate={nodeState.checked === "indeterminate"}
+      />
+    </TreeView.NodeCheckbox>
+  );
+};
+
+const collectFiles = (nodes: FileTreeItem[]) => {
+  const files: FileTreeItem[] = [];
+
+  nodes.forEach((node) => {
+    if (node.type === "file") {
+      files.push(node);
+      return;
+    }
+
+    if (node.children) {
+      files.push(...collectFiles(node.children));
+    }
+  });
+
+  return files;
+};
+
+const indexNodesById = (nodes: FileTreeItem[]) => {
+  const map = new Map<string, FileTreeItem>();
+
+  const visit = (items: FileTreeItem[]) => {
+    items.forEach((item) => {
+      map.set(item.id, item);
+
+      if (item.children) {
+        visit(item.children);
+      }
+    });
+  };
+
+  visit(nodes);
+
+  return map;
+};
+
+export const FileSelector = (props: FileSelectorProps) => {
+  const {
+    files,
+    checkedFileIds,
+    defaultCheckedFileIds = [],
+    label = "Files",
+    emptyLabel = "No files available.",
+    maxHeight = "360px",
+    isLoading,
+    onCheckedFilesChange,
+  } = props;
+
+  const collection = createTreeCollection<FileTreeItem>({
+    rootNode: { id: "__root__", name: "root", type: "folder", children: files },
+    nodeToValue: (node) => node.id,
+    nodeToString: (node) => node.name,
+    nodeToChildren: (node) => node.children ?? [],
+  });
+
+  const expandedBranches = files.filter((item) => item.type === "folder").map((item) => item.id);
+  const nodesById = indexNodesById(files);
+
+  const handleCheckedChange = (details: { checkedValue: string[] }) => {
+    if (!onCheckedFilesChange) return;
+
+    const uniqueFiles = new Map<string, FileTreeItem>();
+
+    details.checkedValue.forEach((value) => {
+      const node = nodesById.get(value);
+
+      if (!node) return;
+
+      const filesFromNode = node.type === "file" ? [node] : collectFiles(node.children ?? []);
+
+      filesFromNode.forEach((file) => {
+        uniqueFiles.set(file.id, file);
+      });
+    });
+
+    onCheckedFilesChange([...uniqueFiles.values()]);
+  };
+
+  if (isLoading) {
+    return (
+      <Stack gap="xs">
+        <Text textStyle="paragraph/M/medium">{label}</Text>
+        <Stack direction="row" gap="xs" align="center">
+          <Spinner color="fg" size="sm" />
+          <Text textStyle="paragraph/S/regular" color="fg.muted">
+            Loading files...
+          </Text>
+        </Stack>
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack gap="xs">
+      <Text textStyle="paragraph/M/medium">{label}</Text>
+
+      <Box borderWidth="1px" borderColor="border.muted" borderRadius="md" p="xs" maxH={maxHeight} overflow="auto">
+        {files.length === 0 ? (
+          <EmptyState title={emptyLabel} size="sm" textAlign="left" alignItems="flex-start" />
+        ) : (
+          <TreeView.Root
+            collection={collection}
+            selectionMode="multiple"
+            aria-label={label}
+            {...(checkedFileIds ? { checkedValue: checkedFileIds } : { defaultCheckedValue: defaultCheckedFileIds })}
+            defaultExpandedValue={expandedBranches}
+            onCheckedChange={handleCheckedChange}
+          >
+            <TreeView.Tree>
+              <TreeView.Node
+                render={({ node, nodeState }) =>
+                  nodeState.isBranch ? (
+                    <TreeView.BranchControl gap="xs" py="2px">
+                      <TreeNodeCheckbox />
+                      <Icon as={Folder} boxSize="16px" color="fg" />
+                      <Stack gap="1px">
+                        <TreeView.BranchText textStyle="paragraph/S/medium">{node.name}</TreeView.BranchText>
+                        {node.meta ? (
+                          <Text textStyle="paragraph/XS/regular" color="fg.muted">
+                            {node.meta}
+                          </Text>
+                        ) : null}
+                      </Stack>
+                    </TreeView.BranchControl>
+                  ) : (
+                    <TreeView.Item gap="xs" py="2px">
+                      <TreeNodeCheckbox />
+                      <Icon as={FileText} boxSize="16px" color="fg.muted" />
+                      <Stack gap="1px">
+                        <TreeView.ItemText textStyle="paragraph/S/regular">{node.name}</TreeView.ItemText>
+                        {node.meta ? (
+                          <Text textStyle="paragraph/XS/regular" color="fg.muted">
+                            {node.meta}
+                          </Text>
+                        ) : null}
+                      </Stack>
+                    </TreeView.Item>
+                  )
+                }
+              />
+            </TreeView.Tree>
+          </TreeView.Root>
+        )}
+      </Box>
+    </Stack>
+  );
+};

package/src/components/file-tree-helpers.ts

@@ -0,0 +1,28 @@
+export type FileTreeItem = {
+  id: string;
+  name: string;
+  type: "file" | "folder";
+  meta?: string;
+  children?: FileTreeItem[];
+};
+
+export const mapFilesById = (nodes: FileTreeItem[]) => {
+  const map = new Map<string, FileTreeItem>();
+
+  const visit = (items: FileTreeItem[]) => {
+    items.forEach((item) => {
+      if (item.type === "file") {
+        map.set(item.id, item);
+        return;
+      }
+
+      if (item.children) {
+        visit(item.children);
+      }
+    });
+  };
+
+  visit(nodes);
+
+  return map;
+};

package/src/components/horizontal-menu-stack.tsx

@@ -0,0 +1,15 @@
+import { HStack, type StackProps } from "@chakra-ui/react";
+
+interface HorizontalMenuStackProps extends StackProps {
+  children?: StackProps["children"];
+}
+
+export function HorizontalMenuStack(props: HorizontalMenuStackProps) {
+  const { children, ...rest } = props;
+
+  return (
+    <HStack {...rest} minH="49px" justify="space-between" align="center" borderBottomWidth="1px" p="xs">
+      {children}
+    </HStack>
+  );
+}