@pstdio/ui 0.0.3 → 0.1.0

package/src/components/ticket-board.tsx

@@ -1,167 +0,0 @@
-import { Badge, HStack, Icon, IconButton, Menu, Spacer, Stack, Text } from "@chakra-ui/react";
-import { MoreHorizontal, Plus } from "lucide-react";
-import { type ComponentProps, type ComponentType, type DragEvent, useState } from "react";
-
-import { MenuItem } from "@/components/menu-item";
-import { Tooltip } from "@/components/tooltip";
-
-import { TicketCard } from "./ticket-card";
-
-type TicketCardProps = ComponentProps<typeof TicketCard>;
-
-export interface TicketBoardItem {
-  id: string;
-  cardProps: Omit<TicketCardProps, "draggable" | "onDragStart" | "onDragEnd" | "isSelected">;
-}
-
-export interface TicketBoardColumnAction {
-  id: string;
-  label: string;
-  icon: ComponentType<{ size?: number | string }>;
-}
-
-export interface TicketBoardColumn {
-  id: string;
-  label: string;
-  color?: string;
-  items: TicketBoardItem[];
-  canDragIn: boolean;
-  canDragOut: boolean;
-  canCreate: boolean;
-  actions: TicketBoardColumnAction[];
-}
-
-interface TicketBoardProps {
-  columns: TicketBoardColumn[];
-  selectedItemId?: string | null;
-  onMoveItem?: (itemId: string, targetColumnId: string) => void;
-  onCreateStart?: (columnId: string) => void;
-  onColumnAction?: (columnId: string, actionId: string) => Promise<void> | void;
-}
-
-export const TicketBoard = (props: TicketBoardProps) => {
-  const { columns, selectedItemId = null, onMoveItem, onCreateStart, onColumnAction } = props;
-
-  const [activeColumn, setActiveColumn] = useState<string | null>(null);
-
-  const handleDragStart = (itemId: string) => (event: DragEvent<HTMLDivElement>) => {
-    event.dataTransfer.setData("text/plain", itemId);
-    event.dataTransfer.effectAllowed = "move";
-  };
-
-  const handleDragEnd = () => {
-    setActiveColumn(null);
-  };
-
-  const handleDragOver = (columnId: string) => (event: DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    event.dataTransfer.dropEffect = "move";
-    setActiveColumn(columnId);
-  };
-
-  const handleDrop = (columnId: string) => (event: DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    setActiveColumn(null);
-
-    const itemId = event.dataTransfer.getData("text/plain");
-    if (!itemId) return;
-
-    onMoveItem?.(itemId, columnId);
-  };
-
-  return (
-    <Stack
-      height="100%"
-      direction="row"
-      gap="2xs"
-      align="stretch"
-      overflowX="auto"
-      overflowY="hidden"
-      paddingBottom="2xs"
-    >
-      {columns.map((column) => (
-        <Stack
-          key={column.id}
-          gap="xs"
-          padding="xs"
-          _notFirst={{ borderLeft: "1px solid", borderColor: "border" }}
-          background={activeColumn === column.id ? "background.secondary" : "background.primary"}
-          height="100%"
-          minH="240px"
-          overflow="hidden"
-          minW="260px"
-          flex="1 0 260px"
-          onDragOver={column.canDragIn ? handleDragOver(column.id) : undefined}
-          onDrop={column.canDragIn ? handleDrop(column.id) : undefined}
-        >
-          <ColumnHeader column={column} onCreateStart={onCreateStart} onColumnAction={onColumnAction} />
-
-          <Stack gap="sm" flex="1" minH="0" overflowY="auto">
-            {column.items.map((item) => (
-              <TicketCard
-                key={item.id}
-                {...item.cardProps}
-                isSelected={item.id === selectedItemId}
-                draggable={column.canDragOut}
-                onDragStart={column.canDragOut ? handleDragStart(item.id) : undefined}
-                onDragEnd={column.canDragOut ? handleDragEnd : undefined}
-              />
-            ))}
-          </Stack>
-        </Stack>
-      ))}
-    </Stack>
-  );
-};
-
-interface ColumnHeaderProps {
-  column: TicketBoardColumn;
-  onCreateStart?: (columnId: string) => void;
-  onColumnAction?: (columnId: string, actionId: string) => Promise<void> | void;
-}
-
-const ColumnHeader = (props: ColumnHeaderProps) => {
-  const { column, onCreateStart, onColumnAction } = props;
-
-  return (
-    <HStack gap="xs" alignItems="center">
-      <Text textStyle="label/L/medium">{column.label}</Text>
-
-      <Badge variant="subtle" colorPalette={column.color ?? "gray"}>
-        {column.items.length}
-      </Badge>
-
-      <Spacer />
-
-      {column.canCreate && onCreateStart && (
-        <Tooltip content="Create new ticket">
-          <IconButton size="2xs" variant="outline" onClick={() => onCreateStart(column.id)} aria-label="Create ticket">
-            <Icon as={Plus} boxSize="12px" />
-          </IconButton>
-        </Tooltip>
-      )}
-
-      {column.actions.length > 0 && (
-        <Menu.Root>
-          <Menu.Trigger asChild>
-            <IconButton size="2xs" variant="ghost" aria-label={`Column actions for ${column.label}`}>
-              <Icon as={MoreHorizontal} boxSize="12px" />
-            </IconButton>
-          </Menu.Trigger>
-          <Menu.Positioner>
-            <Menu.Content minW="180px" bg="background.primary">
-              {column.actions.map((action) => (
-                <MenuItem
-                  key={action.id}
-                  primaryLabel={action.label}
-                  leftIcon={action.icon}
-                  onClick={() => onColumnAction?.(column.id, action.id)}
-                />
-              ))}
-            </Menu.Content>
-          </Menu.Positioner>
-        </Menu.Root>
-      )}
-    </HStack>
-  );
-};

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

@@ -1,133 +0,0 @@
-import { Box } from "@chakra-ui/react";
-import type { Meta, StoryObj } from "@storybook/react";
-
-import { TicketCard } from "./ticket-card";
-
-const meta: Meta<typeof TicketCard> = {
-  title: "Tickets/TicketCard",
-  component: TicketCard,
-  parameters: { layout: "padded" },
-  args: {
-    ticketId: "TK0001",
-  },
-  decorators: [
-    (Story) => (
-      <Box maxWidth="300px">
-        <Story />
-      </Box>
-    ),
-  ],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof TicketCard>;
-
-export const Default: Story = {
-  args: {
-    title: "Implement user authentication flow",
-  },
-};
-
-export const Selected: Story = {
-  args: {
-    title: "Implement user authentication flow",
-    isSelected: true,
-  },
-};
-
-export const WithSingleBadge: Story = {
-  args: {
-    title: "Fix login redirect loop",
-    badges: [{ label: "bug", color: "red" }],
-  },
-};
-
-export const WithMultipleBadges: Story = {
-  args: {
-    ticketId: "TK0012",
-    title: "Add dark mode support to settings panel",
-    badges: [
-      { label: "in progress", color: "yellow" },
-      { label: "high", color: "red" },
-      { label: "medium", color: "orange" },
-      { label: "frontend", color: "purple" },
-      { label: "design", color: "pink" },
-    ],
-  },
-};
-
-export const WithParentAndStatus: Story = {
-  args: {
-    ticketId: "TK0005",
-    title: "Create API endpoint for user preferences",
-    badges: [
-      { label: "backend", color: "blue" },
-      { label: "todo", color: "gray" },
-    ],
-  },
-};
-
-export const WithAllBadgeColors: Story = {
-  args: {
-    title: "Badge color showcase",
-    badges: [
-      { label: "gray" },
-      { label: "blue", color: "blue" },
-      { label: "cyan", color: "cyan" },
-      { label: "green", color: "green" },
-      { label: "yellow", color: "yellow" },
-      { label: "orange", color: "orange" },
-      { label: "red", color: "red" },
-      { label: "purple", color: "purple" },
-      { label: "pink", color: "pink" },
-    ],
-  },
-};
-
-export const LongTitle: Story = {
-  args: {
-    title:
-      "Refactor the entire authentication module to support OAuth2 and SAML providers with backward-compatible session handling",
-    badges: [
-      { label: "refactor", color: "purple" },
-      { label: "high", color: "red" },
-    ],
-  },
-};
-
-export const NoBadges: Story = {
-  args: {
-    title: "Quick typo fix in README",
-  },
-};
-
-export const WithDiffBadge: Story = {
-  args: {
-    title: "Implement ticket card workspace shortcut",
-    diffAdditions: 12,
-    diffDeletions: 4,
-  },
-};
-
-export const WithSessionIndicator: Story = {
-  args: {
-    title: "Implement ticket card workspace shortcut",
-    sessionIndicatorLabel: "A0054",
-  },
-};
-
-export const WithoutSessionIndicator: Story = {
-  args: {
-    title: "Implement ticket card workspace shortcut",
-    sessionIndicatorLabel: undefined,
-  },
-};
-
-export const Draggable: Story = {
-  args: {
-    title: "Drag me around",
-    draggable: true,
-    badges: [{ label: "todo", color: "gray" }],
-  },
-};

package/src/components/ticket-card.tsx

@@ -1,126 +0,0 @@
-import { Badge, HStack, Stack, Text, Wrap } from "@chakra-ui/react";
-import { GitBranchIcon } from "lucide-react";
-import type { DragEventHandler, MouseEvent } from "react";
-import { DiffBubble } from "@/components/diff-bubble";
-import { Tooltip } from "@/components/tooltip";
-import { type SessionCompletionStatus, SessionIndicator } from "./session-indicator";
-
-export interface TicketCardBadge {
-  label: string;
-  color?: string;
-}
-
-interface TicketCardProps {
-  ticketId: string;
-  sessionIndicatorLabel?: string;
-  sessionIndicatorStatus?: SessionCompletionStatus;
-  title: string;
-  badges?: TicketCardBadge[];
-  diffAdditions?: number;
-  diffDeletions?: number;
-  isSelected?: boolean;
-  draggable?: boolean;
-  onDragStart?: DragEventHandler<HTMLDivElement>;
-  onDragEnd?: DragEventHandler<HTMLDivElement>;
-  onClick?: () => void;
-  onDiffBadgeClick?: () => void;
-  onSessionIndicatorClick?: () => void;
-}
-
-export const TicketCard = (props: TicketCardProps) => {
-  const {
-    ticketId,
-    sessionIndicatorLabel,
-    sessionIndicatorStatus,
-    title,
-    badges = [],
-    diffAdditions,
-    diffDeletions,
-    isSelected = false,
-    draggable,
-    onDragStart,
-    onDragEnd,
-    onClick,
-    onDiffBadgeClick,
-    onSessionIndicatorClick,
-  } = props;
-
-  const handleDiffBadgeClick = (event: MouseEvent<HTMLSpanElement>) => {
-    event.stopPropagation();
-    onDiffBadgeClick?.();
-  };
-
-  const handleSessionIndicatorClick = (event: MouseEvent<SVGSVGElement>) => {
-    event.stopPropagation();
-    onSessionIndicatorClick?.();
-  };
-
-  return (
-    <Stack
-      gap="xs"
-      padding="sm"
-      borderRadius="sm"
-      borderWidth="1px"
-      borderColor={isSelected ? "border.accent" : "border.secondary"}
-      background="background.primary"
-      boxShadow={isSelected ? "mid" : "none"}
-      transition="box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out"
-      _hover={{
-        borderColor: isSelected ? "border.accent" : "border.primary",
-        boxShadow: "mid",
-      }}
-      cursor={draggable ? "grab" : onClick ? "pointer" : "default"}
-      draggable={draggable}
-      onDragStart={onDragStart}
-      onDragEnd={onDragEnd}
-      onClick={onClick}
-      data-selected={isSelected ? "true" : undefined}
-    >
-      <HStack justifyContent={"space-between"} gap="2xs" flexWrap="wrap">
-        <HStack gap="2xs" flexShrink={0}>
-          <Text textStyle="label/S/regular" flexShrink={0}>
-            {ticketId}
-          </Text>
-          {sessionIndicatorLabel ? (
-            <Tooltip content={`Session ${sessionIndicatorLabel}`}>
-              <SessionIndicator
-                status={sessionIndicatorStatus}
-                boxSize="12px"
-                aria-label={`Session ${sessionIndicatorLabel}`}
-                cursor={onSessionIndicatorClick ? "pointer" : "default"}
-                onClick={onSessionIndicatorClick ? handleSessionIndicatorClick : undefined}
-              />
-            </Tooltip>
-          ) : null}
-        </HStack>
-        {typeof diffAdditions === "number" && typeof diffDeletions === "number" ? (
-          <DiffBubble
-            additions={diffAdditions}
-            deletions={diffDeletions}
-            variant="ghost"
-            size="small"
-            label={<GitBranchIcon size="12" />}
-            onClick={handleDiffBadgeClick}
-            data-testid="ticket-diff-badge"
-          />
-        ) : null}
-      </HStack>
-
-      <HStack align="start" gap="2xs" flexWrap="wrap">
-        <Text textStyle="label/S/regular" flex="1" minW="0">
-          {title}
-        </Text>
-      </HStack>
-
-      {badges.length > 0 && (
-        <Wrap gap="2xs">
-          {badges.map((badge) => (
-            <Badge key={badge.label} variant="subtle" colorPalette={badge.color ?? "gray"} textStyle="label/XS/medium">
-              {badge.label}
-            </Badge>
-          ))}
-        </Wrap>
-      )}
-    </Stack>
-  );
-};

package/src/components/toaster.stories.tsx

@@ -1,79 +0,0 @@
-import { Box, Button, HStack, Stack, Text } from "@chakra-ui/react";
-import type { ReactNode } from "react";
-
-import { Toaster, toaster } from "./toaster";
-
-type StoryFn = () => ReactNode;
-
-const meta = {
-  title: "Components/Toaster",
-  component: Toaster,
-  decorators: [
-    (Story: StoryFn) => (
-      <Box minH="320px" padding="sm" background="bg">
-        <Story />
-      </Box>
-    ),
-  ],
-};
-
-export default meta;
-
-export const Variants = {
-  render: () => {
-    const handleSuccess = () => {
-      toaster.create({
-        type: "success",
-        title: "Pipeline saved",
-        description: "The latest version is ready to run.",
-      });
-    };
-
-    const handleWarning = () => {
-      toaster.create({
-        type: "warning",
-        title: "Missing source files",
-        description: "Add at least one file before starting the job.",
-      });
-    };
-
-    const handleError = () => {
-      toaster.create({
-        type: "error",
-        title: "Upload failed",
-        description: "We could not reach the storage bucket.",
-      });
-    };
-
-    const handleLoading = () => {
-      toaster.create({
-        type: "loading",
-        title: "Preparing export",
-        description: "Generating the bundle for this pipeline.",
-      });
-    };
-
-    return (
-      <Stack gap="md">
-        <Text textStyle="paragraph/S/regular" color="fg.muted">
-          Trigger a toast to preview styling and placement.
-        </Text>
-        <HStack gap="sm" flexWrap="wrap">
-          <Button size="sm" onClick={handleSuccess}>
-            Success
-          </Button>
-          <Button size="sm" variant="outline" onClick={handleWarning}>
-            Warning
-          </Button>
-          <Button size="sm" variant="outline" colorPalette="red" onClick={handleError}>
-            Error
-          </Button>
-          <Button size="sm" variant="ghost" onClick={handleLoading}>
-            Loading
-          </Button>
-        </HStack>
-        <Toaster />
-      </Stack>
-    );
-  },
-};

package/src/components/toaster.tsx

@@ -1,26 +0,0 @@
-import { Toaster as ChakraToaster, createToaster, Portal, Spinner, Stack, Toast } from "@chakra-ui/react";
-
-export const toaster = createToaster({
-  placement: "bottom-end",
-  pauseOnPageIdle: true,
-});
-
-export const Toaster = () => {
-  return (
-    <Portal>
-      <ChakraToaster toaster={toaster} insetInline={{ mdDown: "4" }}>
-        {(toast) => (
-          <Toast.Root width={{ md: "sm" }}>
-            {toast.type === "loading" ? <Spinner size="sm" color="blue.solid" /> : <Toast.Indicator />}
-            <Stack gap="1" flex="1" maxWidth="100%">
-              {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
-              {toast.description && <Toast.Description>{toast.description}</Toast.Description>}
-            </Stack>
-            {toast.action && <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>}
-            {toast.closable && <Toast.CloseTrigger />}
-          </Toast.Root>
-        )}
-      </ChakraToaster>
-    </Portal>
-  );
-};

package/src/components/tooltip.tsx

@@ -1,43 +0,0 @@
-import { Tooltip as ChakraTooltip, Portal } from "@chakra-ui/react";
-import * as React from "react";
-
-export interface TooltipProps extends ChakraTooltip.RootProps {
-  children?: React.ReactElement;
-  showArrow?: boolean;
-  portalled?: boolean;
-  portalRef?: React.RefObject<HTMLElement>;
-  content: React.ReactNode;
-  contentProps?: ChakraTooltip.ContentProps;
-  disabled?: boolean;
-}
-
-export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(props, ref) {
-  const { showArrow, children, disabled, portalled = true, content, contentProps, portalRef, ...rest } = props;
-
-  const isEmptyContent = (node: React.ReactNode): boolean => {
-    if (node === null || node === undefined || node === false) return true;
-    const arr = React.Children.toArray(node);
-    if (arr.length === 0) return true;
-    return arr.every((child) => (typeof child === "string" ? child.trim().length === 0 : false));
-  };
-
-  if (disabled || isEmptyContent(content)) return children;
-
-  return (
-    <ChakraTooltip.Root openDelay={100} closeDelay={100} {...rest}>
-      <ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
-      <Portal disabled={!portalled} container={portalRef}>
-        <ChakraTooltip.Positioner>
-          <ChakraTooltip.Content ref={ref} {...contentProps}>
-            {showArrow && (
-              <ChakraTooltip.Arrow>
-                <ChakraTooltip.ArrowTip />
-              </ChakraTooltip.Arrow>
-            )}
-            {content}
-          </ChakraTooltip.Content>
-        </ChakraTooltip.Positioner>
-      </Portal>
-    </ChakraTooltip.Root>
-  );
-});

package/src/index.ts

@@ -1,16 +0,0 @@
-export { ChakraProvider } from "@chakra-ui/react";
-export type { AlertProps } from "./components/alert";
-export { AlertMessage } from "./components/alert";
-export { ContentPlaceholder, Label as ContentPlaceholderLabel } from "./components/content-placeholder";
-export { DeleteConfirmationModal } from "./components/delete-confirmation-modal";
-export type { EmptyStateProps } from "./components/empty-state";
-export { EmptyState } from "./components/empty-state";
-export { ErrorBoundary } from "./components/error-boundary";
-export { MenuItem } from "./components/menu-item";
-export type { OpenSourceNotice, OpenSourceNoticesScreenProps } from "./components/open-source-notices-screen";
-export { OpenSourceNoticesScreen } from "./components/open-source-notices-screen";
-export { Toaster, toaster } from "./components/toaster";
-export { Tooltip } from "./components/tooltip";
-export { psTheme } from "./theme";
-export { applyThemePreference, type ThemePreference } from "./utils/apply-theme-preference";
-export { getInitialThemePreference, ThemePreferenceProvider, useThemePreference } from "./utils/theme-preference";

package/src/theme/global.ts

@@ -1,49 +0,0 @@
-export const globalCss = {
-  "*::selection": {
-    bg: {
-      base: "bg.accent-secondary.blue-medium",
-      _dark: "bg.accent-secondary.blue-medium",
-    },
-  },
-
-  ":root": {
-    "--focus-border": "blue.border",
-    "--separator-border": "transparent !important",
-  },
-
-  html: {
-    height: "100%",
-    width: "100%",
-    overflow: "hidden",
-  },
-
-  body: {
-    height: "100%",
-    width: "100%",
-    fontFamily: "body",
-    fontWeight: "regular",
-    fontSize: "md",
-    bg: "bg",
-    color: "fg",
-    borderColor: "border",
-    overflow: "hidden",
-  },
-
-  "#root": {
-    height: "100%",
-    width: "100%",
-    display: "flex",
-  },
-
-  ".sash": {
-    zIndex: "docked",
-  },
-
-  "@media (min-width: 2560px)": {
-    html: { fontSize: "1.25rem" },
-  },
-
-  "@media (min-width: 3840px)": {
-    html: { fontSize: "1.5rem" },
-  },
-};