@pstdio/ui 0.0.1

package/src/components/delete-confirmation-modal.tsx

@@ -0,0 +1,56 @@
+import { Button, CloseButton, Dialog, Stack, Text } from "@chakra-ui/react";
+import { useState } from "react";
+
+interface DeleteConfirmationModalProps {
+  open: boolean;
+  onClose: () => void;
+  onDelete: () => void | Promise<void>;
+  headline?: string;
+  notificationText?: string;
+  buttonText?: string;
+}
+
+export type { DeleteConfirmationModalProps };
+
+export const DeleteConfirmationModal = (props: DeleteConfirmationModalProps) => {
+  const [isDeleting, setIsDeleting] = useState(false);
+  const { headline, buttonText, notificationText, onDelete, open, onClose } = props;
+
+  const handleDelete = async () => {
+    setIsDeleting(true);
+
+    try {
+      await onDelete();
+      onClose();
+    } catch {
+      // Errors surface through parent state.
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <Dialog.Root open={open} onOpenChange={onClose}>
+      <Dialog.Backdrop />
+      <Dialog.Positioner>
+        <Dialog.Content>
+          <Dialog.Header>
+            <Text textStyle="heading/M">{headline}</Text>
+            <Dialog.CloseTrigger asChild>
+              <CloseButton size="sm" />
+            </Dialog.CloseTrigger>
+          </Dialog.Header>
+          <Dialog.Body>{notificationText}</Dialog.Body>
+          <Dialog.Footer>
+            <Stack direction="row" gap="1">
+              <Button onClick={onClose}>Close</Button>
+              <Button loading={isDeleting} variant="solid" colorPalette="red" onClick={handleDelete}>
+                {buttonText}
+              </Button>
+            </Stack>
+          </Dialog.Footer>
+        </Dialog.Content>
+      </Dialog.Positioner>
+    </Dialog.Root>
+  );
+};

package/src/components/diff-bubble.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { DiffBubble } from "./diff-bubble";
+
+const meta: Meta<typeof DiffBubble> = {
+  title: "Components/DiffBubble",
+  component: DiffBubble,
+  args: {
+    fileName: "src/index.ts",
+    additions: 12,
+    deletions: 4,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DiffBubble>;
+
+export const Default: Story = {};
+
+export const Ghost: Story = {
+  args: {
+    variant: "ghost",
+    label: "Changes",
+  },
+};
+
+export const NoFileName: Story = {
+  args: {
+    fileName: undefined,
+    label: "Modified",
+  },
+};
+
+export const GhostNoFileName: Story = {
+  args: {
+    variant: "ghost",
+    fileName: undefined,
+    label: "Total diff:",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    variant: "ghost",
+    size: "small",
+    fileName: undefined,
+  },
+};
+
+export const Clickable: Story = {
+  args: {
+    variant: "ghost",
+    size: "small",
+    fileName: undefined,
+    onClick: () => {},
+  },
+};
+
+export const LongFileName: Story = {
+  args: {
+    fileName: "src/very/long/path/to/a/deeply/nested/file/component-with-a-very-long-name.tsx",
+  },
+};
+
+export const LargeDiff: Story = {
+  args: {
+    additions: 1240,
+    deletions: 892,
+  },
+};

package/src/components/diff-bubble.tsx

@@ -0,0 +1,70 @@
+import { Span } from "@chakra-ui/react";
+import type React from "react";
+import type { ComponentProps, MouseEvent } from "react";
+
+interface DiffBubbleProps extends Omit<ComponentProps<typeof Span>, "onClick"> {
+  fileName?: string;
+  additions: number;
+  deletions: number;
+  label?: React.ReactNode;
+  variant?: "outline" | "ghost";
+  size?: "default" | "small";
+  onClick?: (event: MouseEvent<HTMLSpanElement>) => void;
+  onClickFileLink?: () => void;
+}
+
+export const DiffBubble = (props: DiffBubbleProps) => {
+  const {
+    fileName,
+    additions,
+    deletions,
+    label,
+    variant = "outline",
+    size = "default",
+    onClick,
+    onClickFileLink,
+  } = props;
+
+  const isSmall = size === "small";
+
+  return (
+    <Span
+      display="inline-flex"
+      alignItems="center"
+      gap={"2xs"}
+      border={variant === "outline" ? "1px solid" : "none"}
+      borderColor="border.muted"
+      color="fg.muted"
+      paddingX={variant === "outline" ? (isSmall ? "3xs" : "2xs") : "0"}
+      paddingY="1px"
+      borderRadius="xs"
+      textStyle={isSmall ? "label/S/regular" : undefined}
+      cursor={onClick ? "pointer" : "default"}
+      onClick={onClick}
+    >
+      {label}
+      {fileName && (
+        <Span
+          display="inline-block"
+          maxW="24ch"
+          truncate
+          mr="xs"
+          title={fileName}
+          onClick={(e) => {
+            e.stopPropagation();
+            onClickFileLink?.();
+          }}
+          cursor={onClickFileLink ? "pointer" : "default"}
+          _hover={{
+            textDecoration: onClickFileLink ? "underline" : "none",
+            color: onClickFileLink ? "fg.blue-dark" : "fg.muted",
+          }}
+        >
+          {fileName}
+        </Span>
+      )}
+      <Span color="fg.success">{`+${additions}`}</Span>
+      <Span color="fg.error">{`-${deletions}`}</Span>
+    </Span>
+  );
+};

package/src/components/diff-card.tsx

@@ -0,0 +1,139 @@
+import { Box, Grid, IconButton, Text } from "@chakra-ui/react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { useState } from "react";
+import { DiffBubble } from "@/components/diff-bubble";
+import { DiffEditor } from "./diff-editor";
+
+export interface Diff {
+  change: "added" | "deleted" | "modified" | "renamed" | "copied" | "permissionChange";
+  oldPath?: string;
+  newPath?: string;
+  oldContent?: string;
+  newContent?: string;
+  additions?: number;
+  deletions?: number;
+}
+
+interface DiffCardProps {
+  diff: Diff;
+}
+
+const getLanguage = (path: string) => {
+  const ext = path.split(".").pop()?.toLowerCase();
+  switch (ext) {
+    case "ts":
+    case "tsx":
+      return "typescript";
+    case "js":
+    case "jsx":
+      return "javascript";
+    case "json":
+      return "json";
+    case "md":
+      return "markdown";
+    case "py":
+      return "python";
+    case "go":
+      return "go";
+    case "rs":
+      return "rust";
+    case "css":
+      return "css";
+    case "html":
+      return "html";
+    case "sh":
+      return "shell";
+    case "yml":
+    case "yaml":
+      return "yaml";
+    default:
+      return "plaintext";
+  }
+};
+
+export const DiffCard = (props: DiffCardProps) => {
+  const { diff } = props;
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const filePath = diff.newPath || diff.oldPath || "unknown";
+  const language = getLanguage(filePath);
+
+  const additions = diff.additions ?? 0;
+  const deletions = diff.deletions ?? 0;
+
+  return (
+    <Box
+      border="1px solid"
+      borderColor="border.muted"
+      borderRadius="xs"
+      overflow="hidden"
+      bg="bg"
+      width="100%"
+      maxW="100%"
+    >
+      <Grid
+        templateColumns="auto minmax(0, 1fr) auto"
+        px="xs"
+        py="2xs"
+        alignItems="center"
+        justifyContent="space-between"
+        borderBottom={isExpanded ? "1px solid" : "none"}
+        borderColor="border.muted"
+        cursor="pointer"
+        onClick={() => setIsExpanded(!isExpanded)}
+        gap="sm"
+      >
+        <IconButton
+          aria-label={isExpanded ? "Collapse" : "Expand"}
+          variant="ghost"
+          size="2xs"
+          onClick={(event) => {
+            event.stopPropagation();
+            setIsExpanded(!isExpanded);
+          }}
+          flexShrink={0}
+        >
+          {isExpanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
+        </IconButton>
+
+        <Box minW={0} overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" title={filePath}>
+          {diff.change === "renamed" ? (
+            <Text as="span" textStyle="sm">
+              <Text as="span" color="fg.muted" textDecoration="line-through" mr="xs">
+                {diff.oldPath}
+              </Text>
+              <Box as="span" display="inline-flex" alignItems="center" verticalAlign="middle" mr="xs">
+                <ChevronRight size={12} />
+              </Box>
+              {diff.newPath}
+            </Text>
+          ) : diff.change === "deleted" ? (
+            <Text as="span" color="fg.muted" textDecoration="line-through" textStyle="sm">
+              {filePath}
+            </Text>
+          ) : (
+            <Text as="span" textStyle="sm">
+              {filePath}
+            </Text>
+          )}
+        </Box>
+
+        <Box flexShrink={0}>
+          <DiffBubble variant="ghost" additions={additions} deletions={deletions} />
+        </Box>
+      </Grid>
+
+      {isExpanded && (
+        <Box height="400px" bg="bg">
+          <DiffEditor
+            original={diff.oldContent || ""}
+            modified={diff.newContent || ""}
+            language={language}
+            sideBySide={false}
+            disableScroll={false}
+          />
+        </Box>
+      )}
+    </Box>
+  );
+};

package/src/components/diff-drawer.stories.tsx

@@ -0,0 +1,106 @@
+import { Box, Flex } from "@chakra-ui/react";
+import type { Meta, StoryObj } from "@storybook/react";
+import type { ReactNode } from "react";
+import { type Diff, DiffDrawer } from "./diff-drawer";
+
+type StoryFn = () => ReactNode;
+
+const sampleDiffs: Diff[] = [
+  {
+    change: "modified",
+    oldPath: "src/index.ts",
+    newPath: "src/index.ts",
+    oldContent: `import { foo } from "./foo";\n\nconsole.log(foo);\n`,
+    newContent: `import { foo, bar } from "./foo";\n\nconsole.log(foo);\nconsole.log(bar);\n`,
+    additions: 2,
+    deletions: 0,
+  },
+  {
+    change: "added",
+    newPath: "src/new-file.tsx",
+    oldContent: "",
+    newContent: `export const NewFile = () => {\n  return <div>New File</div>;\n};\n`,
+    additions: 3,
+    deletions: 0,
+  },
+  {
+    change: "deleted",
+    oldPath: "src/old-file.ts",
+    oldContent: `export const old = true;\n`,
+    newContent: "",
+    additions: 0,
+    deletions: 1,
+  },
+  {
+    change: "renamed",
+    oldPath: "src/utils.ts",
+    newPath: "src/helpers.ts",
+    oldContent: `export const util = () => {};\n`,
+    newContent: `export const helper = () => {};\n`,
+    additions: 1,
+    deletions: 1,
+  },
+  {
+    change: "modified",
+    oldPath:
+      "packages/very-long-directory-name-that-should-be-truncated-because-it-is-so-long/and-another-subdirectory/even-more-nesting/the-final-file-name-which-is-also-quite-long.ts",
+    newPath:
+      "packages/very-long-directory-name-that-should-be-truncated-because-it-is-so-long/and-another-subdirectory/even-more-nesting/the-final-file-name-which-is-also-quite-long.ts",
+    oldContent: "// long path test\n",
+    newContent: "// long path test - updated\n",
+    additions: 1,
+    deletions: 0,
+  },
+];
+
+const meta: Meta<typeof DiffDrawer> = {
+  title: "Components/DiffDrawer",
+  component: DiffDrawer,
+  decorators: [
+    (Story: StoryFn) => (
+      <Flex height="100vh" border="1px solid" borderColor="border.muted" borderRadius="md" overflow="hidden">
+        <Box flex="1" p="md"></Box>
+        <Box w="400px" h="full">
+          <Story />
+        </Box>
+      </Flex>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DiffDrawer>;
+
+export const Default: Story = {
+  render: (args) => <DiffDrawer {...args} />,
+  args: {
+    diffs: sampleDiffs,
+  },
+};
+
+export const SingleFile: Story = {
+  render: (args) => <DiffDrawer {...args} />,
+  args: {
+    diffs: [sampleDiffs[0]],
+  },
+};
+
+const changes: Diff["change"][] = ["modified", "added", "deleted", "renamed"];
+
+const manyDiffs: Diff[] = Array.from({ length: 200 }, (_, i) => ({
+  change: changes[i % changes.length],
+  oldPath: `src/components/file-${i}.ts`,
+  newPath: `src/components/file-${i}.ts`,
+  oldContent: `// file ${i} original\nexport const value = ${i};\n`,
+  newContent: `// file ${i} updated\nexport const value = ${i + 1};\n`,
+  additions: 1,
+  deletions: 1,
+}));
+
+export const ManyFiles: Story = {
+  render: (args) => <DiffDrawer {...args} />,
+  args: {
+    diffs: manyDiffs,
+  },
+};

package/src/components/diff-drawer.tsx

@@ -0,0 +1,59 @@
+import { Box, Stack } from "@chakra-ui/react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useRef } from "react";
+import { type Diff, DiffCard } from "./diff-card";
+import { EmptyState } from "./empty-state";
+
+interface DiffDrawerProps {
+  diffs: Diff[];
+}
+
+export type { Diff };
+
+export function DiffDrawer(props: DiffDrawerProps) {
+  const { diffs } = props;
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const virtualizer = useVirtualizer({
+    count: diffs.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => 42,
+    overscan: 5,
+  });
+
+  if (diffs.length === 0) {
+    return (
+      <Stack h="full" minH="0" gap="0">
+        <Stack flex="1" minH="0" overflowY="auto" p="xs" gap="xs">
+          <EmptyState title="No changes detected" description="Make some changes to see the diff here." paddingY="sm" />
+        </Stack>
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack h="full" minH="0" gap="0">
+      <Box position="relative" flex="1" minH="0">
+        <Box ref={scrollRef} position="absolute" inset="0" overflowY="auto" p="xs">
+          <Box position="relative" width="100%" style={{ height: virtualizer.getTotalSize() }}>
+            {virtualizer.getVirtualItems().map((virtualItem) => (
+              <Box
+                key={virtualItem.key}
+                data-index={virtualItem.index}
+                ref={virtualizer.measureElement}
+                position="absolute"
+                top="0"
+                left="0"
+                width="100%"
+                pb="xs"
+                style={{ transform: `translateY(${virtualItem.start}px)` }}
+              >
+                <DiffCard diff={diffs[virtualItem.index]} />
+              </Box>
+            ))}
+          </Box>
+        </Box>
+      </Box>
+    </Stack>
+  );
+}

package/src/components/diff-editor.tsx

@@ -0,0 +1,55 @@
+import { DiffEditor as MonacoDiffEditor } from "@monaco-editor/react";
+import { useMemo } from "react";
+import { customTheme } from "./code-editor";
+
+interface DiffEditorProps {
+  original: string;
+  modified: string;
+  language?: string;
+  sideBySide?: boolean;
+  disableScroll?: boolean;
+}
+
+export function DiffEditor(props: DiffEditorProps) {
+  const { original, modified, language = "plaintext", sideBySide = false, disableScroll = true } = props;
+
+  const options = useMemo(() => {
+    return {
+      renderSideBySide: sideBySide,
+      readOnly: true,
+      fontSize: 11,
+      minimap: { enabled: false },
+      wordWrap: "on" as const,
+      scrollBeyondLastLine: false,
+      ...(disableScroll
+        ? {
+            scrollbar: {
+              vertical: "hidden" as const,
+              horizontal: "hidden" as const,
+              useShadows: false,
+              alwaysConsumeMouseWheel: false,
+            },
+            overviewRulerLanes: 0,
+          }
+        : {}),
+    } as const;
+  }, [sideBySide, disableScroll]);
+
+  return (
+    <MonacoDiffEditor
+      width="100%"
+      height="100%"
+      original={original}
+      modified={modified}
+      language={language}
+      theme="ps-theme"
+      options={options}
+      beforeMount={(monaco) => {
+        monaco.editor.defineTheme("ps-theme", customTheme);
+      }}
+      onMount={(_editor, monaco) => {
+        monaco.editor.setTheme("ps-theme");
+      }}
+    />
+  );
+}

package/src/components/drawer-inline.stories.tsx

@@ -0,0 +1,124 @@
+import { Box, Button, Flex, Text } from "@chakra-ui/react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { DrawerInline, DrawerInlineBody, DrawerInlineFooter, DrawerInlineHeader } from "./drawer-inline";
+
+const meta: Meta<typeof DrawerInline> = {
+  title: "Components/DrawerInline",
+  component: DrawerInline,
+  decorators: [
+    (Story) => (
+      <Box height="500px" width="100%" p="md">
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof DrawerInline>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Flex height="100%" border="1px solid" borderColor="border.muted" borderRadius="md" overflow="hidden">
+      <Box flex="1" p="md">
+        <Text>Main Content Area</Text>
+        <Text color="fg.muted" textStyle="label/XS">
+          The drawer will appear to the right of this content.
+        </Text>
+      </Box>
+      <DrawerInline {...args}>
+        <DrawerInlineHeader title="Drawer Title" onClose={() => {}} />
+        <DrawerInlineBody p="md">
+          <Text>This is the drawer body content.</Text>
+          <Text color="fg.muted">It has a vertical separator on the left and scrolls if the content is too long.</Text>
+          {Array.from({ length: 10 }).map((_, i) => (
+            <Box key={i} p="sm" bg="bg.muted" borderRadius="sm">
+              Item {i + 1}
+            </Box>
+          ))}
+        </DrawerInlineBody>
+        <DrawerInlineFooter>
+          <Button variant="outline" size="sm">
+            Cancel
+          </Button>
+          <Button variant="solid" size="sm">
+            Save
+          </Button>
+        </DrawerInlineFooter>
+      </DrawerInline>
+    </Flex>
+  ),
+  args: {
+    open: true,
+    width: "320px",
+  },
+};
+
+export const WithActions: Story = {
+  render: (args) => (
+    <Flex height="100%" border="1px solid" borderColor="border.muted" borderRadius="md" overflow="hidden">
+      <Box flex="1" p="md">
+        <Text>Main Content Area</Text>
+        <Text color="fg.muted" textStyle="label/XS">
+          The drawer will appear to the right of this content.
+        </Text>
+      </Box>
+      <DrawerInline {...args}>
+        <DrawerInlineHeader
+          title="Project Settings"
+          onClose={() => {}}
+          actions={
+            <Button variant="ghost" size="sm">
+              Edit
+            </Button>
+          }
+        />
+        <DrawerInlineBody p="md">
+          <Text textStyle="label/L/medium">General Settings</Text>
+          <Box height="100px" bg="bg.muted" borderRadius="md" />
+          <Text textStyle="label/L/medium">Advanced Settings</Text>
+          <Box height="200px" bg="bg.muted" borderRadius="md" />
+        </DrawerInlineBody>
+      </DrawerInline>
+    </Flex>
+  ),
+  args: {
+    open: true,
+    width: "400px",
+  },
+};
+
+export const Interactive: Story = {
+  render: function Render(args) {
+    const [open, setOpen] = useState(false);
+    return (
+      <Flex height="100%" border="1px solid" borderColor="border.muted" borderRadius="md" overflow="hidden">
+        <Box flex="1" p="md">
+          <Text mb="md">Main Content Area</Text>
+          <Button onClick={() => setOpen(true)} size="sm">
+            Open Drawer
+          </Button>
+        </Box>
+        <DrawerInline {...args} open={open}>
+          <DrawerInlineHeader title="Interactive Drawer" onClose={() => setOpen(false)} />
+          <DrawerInlineBody p="md">
+            <Text>Click the close icon in the header to close me.</Text>
+            <Text color="fg.muted">
+              The drawer is rendered inline with the main content, pushing it if necessary or simply occupying the
+              assigned space.
+            </Text>
+          </DrawerInlineBody>
+          <DrawerInlineFooter>
+            <Button variant="outline" size="sm" onClick={() => setOpen(false)}>
+              Close
+            </Button>
+          </DrawerInlineFooter>
+        </DrawerInline>
+      </Flex>
+    );
+  },
+  args: {
+    width: "320px",
+  },
+};