@pstdio/ui 0.0.1

package/src/components/style-guide.stories.tsx

@@ -0,0 +1,212 @@
+import { Box, SimpleGrid, Stack, Text } from "@chakra-ui/react";
+import type { ReactNode } from "react";
+import { expect, within } from "storybook/test";
+
+import { StyleGuide } from "./style-guide";
+
+type StoryFn = () => ReactNode;
+
+interface ColorToken {
+  label: string;
+  token: string;
+}
+
+const backgroundTokens: ColorToken[] = [
+  { label: "Background primary", token: "bg" },
+  { label: "Background secondary", token: "bg.muted" },
+  { label: "Background subtle", token: "bg.subtle" },
+  { label: "Background active", token: "bg.emphasized" },
+  { label: "Background hover", token: "bg.muted" },
+  { label: "Background inverse", token: "bg.inverted" },
+  { label: "Background dark", token: "bg.dark" },
+  { label: "Background white", token: "bg.white" },
+  { label: "Background light", token: "bg.panel" },
+  { label: "Background display very light", token: "bg.display.very-light" },
+
+  { label: "Accent primary very light", token: "bg.accent-primary.very-light" },
+  { label: "Accent primary light", token: "bg.accent-primary.light" },
+  { label: "Accent primary medium", token: "bg.accent-primary.medium" },
+  { label: "Accent primary dark", token: "bg.accent-primary.dark" },
+
+  { label: "Accent secondary grey dark", token: "bg.accent-secondary.grey-dark" },
+  { label: "Accent secondary grey light", token: "bg.accent-secondary.grey-light" },
+  { label: "Accent secondary red very light", token: "bg.accent-secondary.red-very-light" },
+  { label: "Accent secondary red light", token: "bg.accent-secondary.red-light" },
+  { label: "Accent secondary pink light", token: "bg.accent-secondary.pink-light" },
+  { label: "Accent secondary pink medium", token: "bg.accent-secondary.pink-medium" },
+  { label: "Accent secondary blue very light", token: "bg.accent-secondary.blue-very-light" },
+  { label: "Accent secondary blue light", token: "bg.accent-secondary.blue-light" },
+  { label: "Accent secondary blue medium", token: "bg.accent-secondary.blue-medium" },
+  { label: "Accent secondary blue dark", token: "bg.accent-secondary.blue-dark" },
+  { label: "Accent secondary cyan light", token: "bg.accent-secondary.cyan-light" },
+  { label: "Accent secondary green light", token: "bg.accent-secondary.green-light" },
+  { label: "Accent secondary yellow light", token: "bg.accent-secondary.yellow-light" },
+  { label: "Accent secondary yellow medium", token: "bg.accent-secondary.yellow-medium" },
+  { label: "Accent secondary sand light", token: "bg.accent-secondary.sand-light" },
+];
+
+const foregroundTokens: ColorToken[] = [
+  { label: "Foreground primary", token: "fg" },
+  { label: "Foreground secondary", token: "fg.muted" },
+  { label: "Foreground tertiary", token: "fg.subtle" },
+  { label: "Foreground inverse", token: "fg.inverted" },
+  { label: "Foreground feedback success", token: "fg.success" },
+  { label: "Foreground feedback alert", token: "fg.error" },
+  { label: "Foreground accent pink dark", token: "fg.accent.pink-dark" },
+  { label: "Foreground green dark", token: "fg.green-dark" },
+  { label: "Foreground blue dark", token: "fg.blue-dark" },
+  { label: "Foreground blue very dark", token: "fg.blue-very-dark" },
+];
+
+interface ColorCombinationTileProps {
+  background: ColorToken;
+  foreground: ColorToken;
+}
+
+const ColorCombinationTile = (props: ColorCombinationTileProps) => {
+  const { background, foreground } = props;
+
+  return (
+    <Box background="bg" borderWidth="1px" borderColor="border.muted" borderRadius="sm" overflow="hidden">
+      <Box padding="sm" background={background.token} color={foreground.token} minHeight="96px">
+        <Stack gap="2xs">
+          <Text textStyle="label/M/medium">Aa</Text>
+          <Text textStyle="paragraph/XS/regular">Sample text</Text>
+        </Stack>
+      </Box>
+
+      <Box padding="sm">
+        <Stack gap="2xs">
+          <Text textStyle="label/XS" color="fg">
+            {foreground.label}
+          </Text>
+          <Text textStyle="label/XS" color="fg.muted">
+            {foreground.token}
+          </Text>
+        </Stack>
+      </Box>
+    </Box>
+  );
+};
+
+interface BackgroundForegroundCardProps {
+  background: ColorToken;
+}
+
+const BackgroundForegroundCard = (props: BackgroundForegroundCardProps) => {
+  const { background } = props;
+
+  return (
+    <Box borderWidth="1px" borderColor="border.muted" borderRadius="md" background="bg" padding="md">
+      <Stack gap="sm">
+        <Stack gap="2xs">
+          <Text textStyle="label/L/medium">{background.label}</Text>
+          <Text textStyle="label/XS" color="fg.muted">
+            {background.token}
+          </Text>
+        </Stack>
+
+        <SimpleGrid columns={{ base: 1, md: 2 }} gap="sm">
+          {foregroundTokens.map((foreground) => (
+            <ColorCombinationTile
+              key={`${background.token}-${foreground.token}`}
+              background={background}
+              foreground={foreground}
+            />
+          ))}
+        </SimpleGrid>
+      </Stack>
+    </Box>
+  );
+};
+
+const BackgroundForegroundStory = () => (
+  <Stack gap="lg">
+    <Stack gap="xs">
+      <Text textStyle="heading/M">Background and foreground permutations</Text>
+      <Text textStyle="paragraph/S/regular" color="fg.muted">
+        Every background token combined with each foreground text color to check legibility.
+      </Text>
+    </Stack>
+
+    <SimpleGrid columns={{ base: 1, xl: 2 }} gap="md">
+      {backgroundTokens.map((backgroundToken) => (
+        <BackgroundForegroundCard key={backgroundToken.token} background={backgroundToken} />
+      ))}
+    </SimpleGrid>
+  </Stack>
+);
+
+const meta = {
+  title: "Foundations/Style Guide",
+  decorators: [
+    (Story: StoryFn) => (
+      <Box height="100vh" background="bg" overflowY="auto" overflowX="hidden">
+        <Box padding="sm">
+          <Story />
+        </Box>
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+
+export const Overview = {
+  render: () => <StyleGuide />,
+};
+
+export const BackgroundForegroundPermutations = {
+  name: "Background x foreground",
+  render: () => <BackgroundForegroundStory />,
+};
+
+export const AccentPrimaryShades = {
+  name: "Accent Primary Shades",
+  render: () => (
+    <Stack gap="sm">
+      <Text textStyle="label/L/medium">Accent primary token comparison</Text>
+      <SimpleGrid columns={2} gap="sm">
+        <Stack gap="xs">
+          <Text textStyle="label/XS">bg.accent-primary.medium</Text>
+          <Box
+            data-testid="accent-primary-medium"
+            borderRadius="sm"
+            height="56px"
+            background="bg.accent-primary.medium"
+          />
+        </Stack>
+        <Stack gap="xs">
+          <Text textStyle="label/XS">bg.accent-primary.dark</Text>
+          <Box data-testid="accent-primary-dark" borderRadius="sm" height="56px" background="bg.accent-primary.dark" />
+        </Stack>
+      </SimpleGrid>
+    </Stack>
+  ),
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
+    const medium = canvas.getByTestId("accent-primary-medium");
+    const dark = canvas.getByTestId("accent-primary-dark");
+
+    const mediumBackgroundColor = getComputedStyle(medium).backgroundColor;
+    const darkBackgroundColor = getComputedStyle(dark).backgroundColor;
+
+    await expect(darkBackgroundColor).not.toBe(mediumBackgroundColor);
+  },
+};
+
+export const InputsNoShadow = {
+  name: "Inputs No Shadow",
+  render: () => <StyleGuide />,
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByPlaceholderText("Company name");
+    const textarea = canvas.getByPlaceholderText("Notes");
+
+    const inputStyles = getComputedStyle(input);
+    const textareaStyles = getComputedStyle(textarea);
+
+    await expect(inputStyles.boxShadow).toBe("none");
+    await expect(textareaStyles.boxShadow).toBe("none");
+  },
+};

package/src/components/style-guide.tsx

@@ -0,0 +1,305 @@
+import { Badge, Box, Button, HStack, Input, Separator, SimpleGrid, Stack, Text, Textarea } from "@chakra-ui/react";
+
+import {
+  type ColorSwatch,
+  colorGroups,
+  fontSamples,
+  radiusSamples,
+  shadowSamples,
+  spacingSamples,
+  typographySamples,
+} from "./style-guide-data";
+
+interface SectionHeaderProps {
+  title: string;
+  description: string;
+  kicker?: string;
+}
+
+const swatchVariants = {
+  fill: (swatch: ColorSwatch) => ({
+    background: swatch.token,
+    color: swatch.textToken ?? "fg",
+    borderColor: "transparent",
+    borderWidth: "0px",
+  }),
+  stroke: (swatch: ColorSwatch) => ({
+    background: "bg",
+    color: swatch.textToken ?? "fg",
+    borderColor: swatch.token,
+    borderWidth: "2px",
+  }),
+};
+
+const getScaledSpacing = (value: string) => `calc(${value} * 6)`;
+
+const SectionHeader = (props: SectionHeaderProps) => {
+  const { title, description, kicker } = props;
+
+  return (
+    <Stack gap="xs">
+      {kicker ? (
+        <Text textStyle="label/L/medium/uppercase" color="fg.muted">
+          {kicker}
+        </Text>
+      ) : null}
+      <Text textStyle="heading/M">{title}</Text>
+      <Text textStyle="paragraph/S/regular" color="fg.muted">
+        {description}
+      </Text>
+    </Stack>
+  );
+};
+
+export const StyleGuide = () => (
+  <Stack gap="2xl" padding="xl" color="fg">
+    <Box>
+      <Stack gap="2xs">
+        <Text textStyle="brand">PSTDIO design system</Text>
+        <Text textStyle="paragraph/L/regular" color="fg.muted">
+          A shared language for product, engineering, and operations teams shipping automation at scale.
+        </Text>
+      </Stack>
+    </Box>
+
+    <Separator />
+
+    <Stack gap="lg">
+      <SectionHeader
+        kicker="Typography"
+        title="Fonts and text styles"
+        description="Type scales keep dashboards readable while supporting editorial moments in marketing."
+      />
+
+      <SimpleGrid columns={{ base: 1, md: 3 }} gap="md">
+        {fontSamples.map((font) => (
+          <Box
+            key={font.label}
+            borderWidth="1px"
+            borderColor="border.muted"
+            borderRadius="md"
+            padding="md"
+            background="bg"
+          >
+            <Stack gap="xs">
+              <Text textStyle="label/L/medium">{font.label}</Text>
+              <Text textStyle="label/XS" color="fg.muted">
+                {font.role}
+              </Text>
+              <Text fontFamily={font.fontFamily} fontSize="xl">
+                {font.sample}
+              </Text>
+            </Stack>
+          </Box>
+        ))}
+      </SimpleGrid>
+
+      <Stack gap="sm">
+        {typographySamples.map((sample) => (
+          <Stack
+            key={sample.label}
+            gap="md"
+            paddingY="sm"
+            borderBottomWidth="1px"
+            borderColor="border.muted"
+            direction={{ base: "column", lg: "row" }}
+            justifyContent="space-between"
+            alignItems={{ base: "flex-start", lg: "center" }}
+          >
+            <Stack gap="xs" maxWidth={{ base: "100%", lg: "45%" }}>
+              <Text textStyle="label/L/medium">{sample.label}</Text>
+              <Text textStyle="label/XS" color="fg.muted">
+                {sample.description}
+              </Text>
+            </Stack>
+            <Text textStyle={sample.textStyle}>{sample.sample}</Text>
+          </Stack>
+        ))}
+      </Stack>
+    </Stack>
+
+    <Stack gap="lg">
+      <SectionHeader
+        kicker="Color"
+        title="Semantic palette"
+        description="Surface, accent, and border tokens keep light and dark themes aligned."
+      />
+
+      <Stack gap="lg">
+        {colorGroups.map((group) => (
+          <Stack key={group.title} gap="sm">
+            <Stack gap="xs">
+              <Text textStyle="label/L/medium">{group.title}</Text>
+              <Text textStyle="paragraph/S/regular" color="fg.muted">
+                {group.description}
+              </Text>
+            </Stack>
+
+            <SimpleGrid columns={{ base: 1, md: 2, xl: 3 }} gap="sm">
+              {group.swatches.map((swatch) => {
+                const variantKey = swatch.variant ?? "fill";
+                const style = swatchVariants[variantKey](swatch);
+
+                return (
+                  <Box key={swatch.token} borderWidth="1px" borderColor="border.muted" borderRadius="md">
+                    <Box
+                      minHeight="96px"
+                      padding="md"
+                      background={style.background}
+                      color={style.color}
+                      borderWidth={style.borderWidth}
+                      borderColor={style.borderColor}
+                      borderTopRadius="md"
+                    >
+                      <Stack gap="xs">
+                        <Text textStyle="label/M/medium">{swatch.label}</Text>
+                        <Text textStyle="label/XS">{swatch.token}</Text>
+                      </Stack>
+                    </Box>
+                    <Box padding="sm">
+                      <Text textStyle="label/XS" color="fg.muted">
+                        {swatch.description}
+                      </Text>
+                    </Box>
+                  </Box>
+                );
+              })}
+            </SimpleGrid>
+          </Stack>
+        ))}
+      </Stack>
+    </Stack>
+
+    <Stack gap="lg">
+      <SectionHeader
+        kicker="Layout"
+        title="Spacing, radius, and elevation"
+        description="Consistent rhythm and depth cues create polish across dashboards."
+      />
+
+      <SimpleGrid columns={{ base: 1, lg: 3 }} gap="md">
+        <Box borderWidth="1px" borderColor="border.muted" borderRadius="md" padding="md">
+          <Stack gap="sm">
+            <Text textStyle="label/L/medium">Spacing scale</Text>
+            {spacingSamples.map((sample) => (
+              <Stack key={sample.token} gap="xs">
+                <HStack justifyContent="space-between">
+                  <Text textStyle="label/S/medium">{sample.label}</Text>
+                  <Text textStyle="label/XS" color="fg.muted">
+                    {sample.value}
+                  </Text>
+                </HStack>
+                <Box height="8px" background="bg.muted">
+                  <Box height="8px" background="fg" width={getScaledSpacing(sample.value)} maxWidth="240px" />
+                </Box>
+                <Text textStyle="label/XS" color="fg.muted">
+                  {sample.helper}
+                </Text>
+              </Stack>
+            ))}
+          </Stack>
+        </Box>
+
+        <Box borderWidth="1px" borderColor="border.muted" borderRadius="md" padding="md">
+          <Stack gap="sm">
+            <Text textStyle="label/L/medium">Radius scale</Text>
+            <SimpleGrid columns={{ base: 2, md: 3 }} gap="sm">
+              {radiusSamples.map((sample) => (
+                <Stack key={sample.token} gap="xs">
+                  <Box
+                    height="56px"
+                    borderWidth="1px"
+                    borderColor="border.muted"
+                    borderRadius={sample.token}
+                    background="bg"
+                  />
+                  <Text textStyle="label/S/medium">{sample.label}</Text>
+                  <Text textStyle="label/XS" color="fg.muted">
+                    {sample.helper}
+                  </Text>
+                </Stack>
+              ))}
+            </SimpleGrid>
+          </Stack>
+        </Box>
+
+        <Box borderWidth="1px" borderColor="border.muted" borderRadius="md" padding="md">
+          <Stack gap="sm">
+            <Text textStyle="label/L/medium">Elevation</Text>
+            {shadowSamples.map((sample) => (
+              <Stack key={sample.token} gap="xs">
+                <Box
+                  height="56px"
+                  borderRadius="md"
+                  borderWidth="1px"
+                  borderColor="border.muted"
+                  background="bg"
+                  boxShadow={sample.token}
+                />
+                <Text textStyle="label/S/medium">{sample.label}</Text>
+                <Text textStyle="label/XS" color="fg.muted">
+                  {sample.helper}
+                </Text>
+              </Stack>
+            ))}
+          </Stack>
+        </Box>
+      </SimpleGrid>
+    </Stack>
+
+    <Stack gap="lg">
+      <SectionHeader
+        kicker="Components"
+        title="Core UI building blocks"
+        description="Buttons, badges, and inputs are ready for use across flows."
+      />
+
+      <SimpleGrid columns={{ base: 1, lg: 3 }} gap="md">
+        <Box borderWidth="1px" borderColor="border.muted" borderRadius="md" padding="md">
+          <Stack gap="sm">
+            <Text textStyle="label/L/medium">Buttons</Text>
+            <HStack gap="sm" flexWrap="wrap">
+              <Button variant="primary">Primary</Button>
+              <Button variant="solid">Approve</Button>
+              <Button variant="surface">Preview</Button>
+              <Button variant="outline">Cancel</Button>
+              <Button variant="solid" colorPalette="red">
+                Delete
+              </Button>
+            </HStack>
+          </Stack>
+        </Box>
+
+        <Box borderWidth="1px" borderColor="border.muted" borderRadius="md" padding="md">
+          <Stack gap="sm">
+            <Text textStyle="label/L/medium">Badges</Text>
+            <HStack gap="sm" flexWrap="wrap">
+              <Badge colorPalette="green" variant="subtle">
+                Success
+              </Badge>
+              <Badge colorPalette="yellow" variant="subtle">
+                Pending
+              </Badge>
+              <Badge colorPalette="red" variant="subtle">
+                Attention
+              </Badge>
+              <Badge colorPalette="blue" variant="subtle">
+                Info
+              </Badge>
+            </HStack>
+          </Stack>
+        </Box>
+
+        <Box borderWidth="1px" borderColor="border.muted" borderRadius="md" padding="md">
+          <Stack gap="sm">
+            <Text textStyle="label/L/medium">Inputs</Text>
+            <Stack gap="sm">
+              <Input placeholder="Company name" />
+              <Textarea placeholder="Notes" minHeight="96px" />
+            </Stack>
+          </Stack>
+        </Box>
+      </SimpleGrid>
+    </Stack>
+  </Stack>
+);

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

@@ -0,0 +1,109 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Archive } from "lucide-react";
+import { useState } from "react";
+
+import { TicketBoard, type TicketBoardColumn } from "./ticket-board";
+
+const meta: Meta = {
+  title: "Tickets/TicketBoard",
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+const mockColumns: TicketBoardColumn[] = [
+  {
+    id: "todo",
+    label: "todo",
+    color: "gray",
+    canDragIn: true,
+    canDragOut: true,
+    canCreate: true,
+    actions: [],
+    items: [
+      {
+        id: "t1",
+        cardProps: {
+          ticketId: "PRJ-1",
+          title: "Set up auth",
+          badges: [
+            { label: "medium", color: "yellow" },
+            { label: "PRJ-0", color: "gray" },
+          ],
+        },
+      },
+      {
+        id: "t2",
+        cardProps: {
+          ticketId: "PRJ-2",
+          title: "Build dashboard",
+          badges: [{ label: "high", color: "red" }],
+        },
+      },
+    ],
+  },
+  {
+    id: "in_progress",
+    label: "in progress",
+    color: "blue",
+    canDragIn: true,
+    canDragOut: true,
+    canCreate: false,
+    actions: [],
+    items: [
+      {
+        id: "t3",
+        cardProps: {
+          ticketId: "PRJ-3",
+          title: "Write tests",
+          badges: [{ label: "low", color: "green" }],
+        },
+      },
+    ],
+  },
+  {
+    id: "done",
+    label: "done",
+    color: "green",
+    canDragIn: true,
+    canDragOut: false,
+    canCreate: false,
+    actions: [{ id: "archive_all", label: "Archive all", icon: Archive }],
+    items: [
+      {
+        id: "t4",
+        cardProps: {
+          ticketId: "PRJ-4",
+          title: "Deploy to prod",
+        },
+      },
+    ],
+  },
+];
+
+const Wrapper = () => {
+  const [selected, setSelected] = useState<string | null>(null);
+
+  const columns = mockColumns.map((col) => ({
+    ...col,
+    items: col.items.map((item) => ({
+      ...item,
+      cardProps: { ...item.cardProps, onClick: () => setSelected(item.id) },
+    })),
+  }));
+
+  return (
+    <TicketBoard
+      columns={columns}
+      selectedItemId={selected}
+      onMoveItem={(itemId, columnId) => console.log("move", itemId, "to", columnId)}
+      onCreateStart={(columnId) => console.log("create in", columnId)}
+      onColumnAction={(columnId, actionId) => console.log("action", actionId, "on", columnId)}
+    />
+  );
+};
+
+export const Default: Story = {
+  render: () => <Wrapper />,
+};