@pstdio/ui 0.0.3 → 0.0.4

package/src/components/drawer-inline.tsx

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

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

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

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

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

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

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

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