@pstdio/ui 0.0.2 → 0.0.4

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

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

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

@@ -1,109 +0,0 @@
-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 />,
-};