@pstdio/ui 0.0.3 → 0.0.4

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

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

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

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

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

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

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

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

@@ -1,124 +0,0 @@
-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",
-  },
-};