@pstdio/ui 0.0.1

package/src/components/ticket-board.tsx

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

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

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

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

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

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

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

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

package/src/theme/index.ts

@@ -0,0 +1,10 @@
+import "@fontsource/inter/400.css";
+import "@fontsource/inter/500.css";
+import "@fontsource/playfair-display/400.css";
+import "@fontsource/playfair-display/600.css";
+import "@fontsource/playfair-display/700.css";
+import "@fontsource/onest/400.css";
+import "@fontsource/onest/500.css";
+import "@fontsource/onest/700.css";
+
+export { default as psTheme } from "./theme";