@pstdio/ui 0.0.3 → 0.1.0

package/src/components/rich-text/theme/rich-text-theme.tsx

@@ -1,81 +0,0 @@
-import type { EditorThemeClasses } from "lexical";
-
-import "./rich-text-theme.css";
-
-const theme: EditorThemeClasses = {
-  code: "rich-text__code",
-  codeHighlight: {
-    atrule: "rich-text__tokenAttr",
-    attr: "rich-text__tokenAttr",
-    boolean: "rich-text__tokenProperty",
-    builtin: "rich-text__tokenSelector",
-    cdata: "rich-text__tokenComment",
-    char: "rich-text__tokenSelector",
-    class: "rich-text__tokenFunction",
-    "class-name": "rich-text__tokenFunction",
-    comment: "rich-text__tokenComment",
-    constant: "rich-text__tokenProperty",
-    deleted: "rich-text__tokenProperty",
-    doctype: "rich-text__tokenComment",
-    entity: "rich-text__tokenOperator",
-    function: "rich-text__tokenFunction",
-    important: "rich-text__tokenVariable",
-    inserted: "rich-text__tokenSelector",
-    keyword: "rich-text__tokenAttr",
-    namespace: "rich-text__tokenVariable",
-    number: "rich-text__tokenProperty",
-    operator: "rich-text__tokenOperator",
-    prolog: "rich-text__tokenComment",
-    property: "rich-text__tokenProperty",
-    punctuation: "rich-text__tokenPunctuation",
-    regex: "rich-text__tokenVariable",
-    selector: "rich-text__tokenSelector",
-    string: "rich-text__tokenSelector",
-    symbol: "rich-text__tokenProperty",
-    tag: "rich-text__tokenProperty",
-    url: "rich-text__tokenOperator",
-    variable: "rich-text__tokenVariable",
-  },
-  embedBlock: {
-    base: "rich-text__embedBlock",
-    focus: "rich-text__embedBlockFocus",
-  },
-  list: {
-    checklist: "rich-text__checklist",
-    listitem: "rich-text__listItem",
-    listitemChecked: "rich-text__listItemChecked",
-    listitemUnchecked: "rich-text__listItemUnchecked",
-    nested: {
-      listitem: "rich-text__nestedListItem",
-    },
-    olDepth: ["rich-text__ol1", "rich-text__ol2", "rich-text__ol3", "rich-text__ol4", "rich-text__ol5"],
-    ol: "rich-text__ol",
-    ul: "rich-text__ul",
-  },
-  heading: {
-    h1: "rich-text__h1",
-    h2: "rich-text__h2",
-    h3: "rich-text__h3",
-  },
-  paragraph: "rich-text__p",
-  text: {
-    underline: "rich-text__textUnderline",
-    italic: "rich-text__textItalic",
-    code: "rich-text__textCode",
-  },
-  link: "rich-text__link",
-  quote: "rich-text__quote",
-  reference: "rich-text__reference",
-  table: "rich-text__table",
-  tableCell: "rich-text__tableCell",
-  tableRow: "rich-text__tableRow",
-  tableCellHeader: "rich-text__tableCellHeader",
-  layoutContainer: "rich-text__layoutContainer",
-  layoutItem: "rich-text__layoutItem",
-  draggableBlockDemo: {
-    row: "rich-text__row",
-    content: "rich-text__content",
-  },
-};
-
-export default theme;

package/src/components/rich-text/types.ts

@@ -1,9 +0,0 @@
-export type ResourceType = "table" | "connector" | "text" | "image" | "pdf" | "markdown" | "csv" | "json" | "code";
-
-export interface Resource {
-  resourceId: string;
-  resourceType: ResourceType;
-  name: string;
-  description?: string;
-  mediaType?: string;
-}

package/src/components/rich-text/utils/inferResourceType.ts

@@ -1,17 +0,0 @@
-import type { ResourceType } from "../types";
-
-export function inferResourceTypeFromMediaType(mediaType: string) {
-  const normalized = mediaType.toLowerCase().trim();
-  if (!normalized) return "text";
-
-  if (normalized.startsWith("image/")) return "image";
-  if (normalized === "application/pdf") return "pdf";
-  if (normalized === "text/markdown") return "markdown";
-  if (normalized === "text/csv" || normalized === "text/tab-separated-values") return "table";
-  if (normalized === "application/json") return "json";
-  if (normalized.startsWith("text/")) return "text";
-  if (normalized.startsWith("application/")) return "text";
-
-  const fallback: ResourceType = "text";
-  return fallback;
-}

package/src/components/rich-text/utils/markdown.ts

@@ -1,12 +0,0 @@
-const FRONTMATTER_PATTERN = /^---\s*\n([\s\S]*?)\n---\s*(?:\n|$)/;
-
-export function splitFrontmatter(content: string) {
-  const match = content.match(FRONTMATTER_PATTERN);
-  if (!match) {
-    return { frontmatter: "", body: content };
-  }
-  return {
-    frontmatter: match[0],
-    body: content.slice(match[0].length),
-  };
-}

package/src/components/rich-text/utils/mediaType.ts

@@ -1,31 +0,0 @@
-const extensionToMediaType: Record<string, string> = {
-  csv: "text/csv",
-  tsv: "text/tab-separated-values",
-  json: "application/json",
-  md: "text/markdown",
-  markdown: "text/markdown",
-  txt: "text/plain",
-  pdf: "application/pdf",
-  png: "image/png",
-  jpg: "image/jpeg",
-  jpeg: "image/jpeg",
-  gif: "image/gif",
-  svg: "image/svg+xml",
-  webp: "image/webp",
-  mp4: "video/mp4",
-  mov: "video/quicktime",
-  ts: "text/typescript",
-  tsx: "text/typescript",
-  js: "text/javascript",
-  jsx: "text/javascript",
-  sql: "text/x-sql",
-  yml: "text/yaml",
-  yaml: "text/yaml",
-};
-
-export function mediaTypeFromPath(path: string) {
-  const cleaned = path.split("?")[0]?.split("#")[0] ?? "";
-  const ext = cleaned.split(".").pop()?.toLowerCase();
-  if (!ext) return null;
-  return extensionToMediaType[ext] ?? null;
-}

package/src/components/session-indicator.stories.tsx

@@ -1,46 +0,0 @@
-import { HStack, Text } from "@chakra-ui/react";
-import type { Meta, StoryObj } from "@storybook/react";
-
-import { SessionIndicator } from "./session-indicator";
-
-const meta: Meta<typeof SessionIndicator> = {
-  title: "Components/SessionIndicator",
-  component: SessionIndicator,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof SessionIndicator>;
-
-export const InProgress: Story = {
-  args: { status: "in_progress" },
-};
-
-export const AwaitingInput: Story = {
-  args: { status: "awaiting_input" },
-};
-
-export const Completed: Story = {
-  args: { status: "completed" },
-};
-
-export const Failed: Story = {
-  args: { status: "failed" },
-};
-
-export const Undefined: Story = {
-  args: {},
-};
-
-export const AllStatuses: Story = {
-  render: () => (
-    <HStack gap="md">
-      {(["in_progress", "awaiting_input", "completed", "failed", undefined] as const).map((status) => (
-        <HStack key={status ?? "undefined"} gap="xs">
-          <SessionIndicator status={status} />
-          <Text textStyle="label/S/regular">{status ?? "undefined"}</Text>
-        </HStack>
-      ))}
-    </HStack>
-  ),
-};

package/src/components/session-indicator.tsx

@@ -1,40 +0,0 @@
-import { Icon } from "@chakra-ui/react";
-import { CircleAlert, CircleCheck, CircleDashed } from "lucide-react";
-import type { ComponentProps } from "react";
-
-export type SessionCompletionStatus = "in_progress" | "awaiting_input" | "completed" | "failed";
-
-export const resolveSessionIndicatorIcon = (status: SessionCompletionStatus | undefined) => {
-  if (status === "completed") return CircleCheck;
-  if (status === "failed") return CircleAlert;
-  return CircleDashed;
-};
-
-export const resolveSessionIndicatorColor = (status: SessionCompletionStatus | undefined) => {
-  if (status === "completed") return "foreground.feedback.success";
-  if (status === "failed") return "foreground.feedback.alert";
-  return "foreground.secondary";
-};
-
-interface SessionIndicatorProps {
-  status?: SessionCompletionStatus;
-  boxSize?: ComponentProps<typeof Icon>["boxSize"];
-  ariaLabel?: string;
-  cursor?: ComponentProps<typeof Icon>["cursor"];
-  onClick?: ComponentProps<typeof Icon>["onClick"];
-}
-
-export const SessionIndicator = (props: SessionIndicatorProps) => {
-  const { status, boxSize = "14px", ariaLabel = "Session status", cursor, onClick } = props;
-
-  return (
-    <Icon
-      as={resolveSessionIndicatorIcon(status)}
-      boxSize={boxSize}
-      color={resolveSessionIndicatorColor(status)}
-      aria-label={ariaLabel}
-      cursor={cursor}
-      onClick={onClick}
-    />
-  );
-};

package/src/components/slider.stories.tsx

@@ -1,38 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import type { ReactNode } from "react";
-import { expect } from "storybook/test";
-
-import { Slider } from "./slider";
-
-const meta = {
-  title: "Components/Slider",
-  component: Slider,
-  args: {
-    min: 0,
-    max: 100,
-    defaultValue: [40],
-  },
-  decorators: [
-    (Story: () => ReactNode) => (
-      <div style={{ padding: "24px", width: "320px" }}>
-        <Story />
-      </div>
-    ),
-  ],
-} satisfies Meta<typeof Slider>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const SquareTrack: Story = {
-  play: async ({ canvasElement }) => {
-    const track = canvasElement.querySelector('[data-scope="slider"][data-part="track"]');
-
-    await expect(track).not.toBeNull();
-    if (!track) return;
-
-    const borderRadius = getComputedStyle(track).borderRadius;
-    await expect(borderRadius).toBe("0px");
-  },
-};

package/src/components/slider.tsx

@@ -1,20 +0,0 @@
-import { Slider as ChakraSlider } from "@chakra-ui/react";
-import * as React from "react";
-
-export interface SliderProps extends ChakraSlider.RootProps {}
-
-export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(function Slider(props, ref) {
-  const { children, ...rest } = props;
-
-  return (
-    <ChakraSlider.Root ref={ref} variant="solid" {...rest}>
-      <ChakraSlider.Control>
-        <ChakraSlider.Track borderRadius="0">
-          <ChakraSlider.Range />
-        </ChakraSlider.Track>
-        <ChakraSlider.Thumbs />
-      </ChakraSlider.Control>
-      {children}
-    </ChakraSlider.Root>
-  );
-});

package/src/components/style-guide-data.ts

@@ -1,374 +0,0 @@
-import { spacing } from "../theme/primitives/sizes";
-
-export interface TypographySample {
-  label: string;
-  textStyle: string;
-  description: string;
-  sample: string;
-}
-
-export interface FontSample {
-  label: string;
-  role: string;
-  fontFamily: string;
-  sample: string;
-}
-
-export interface ColorSwatch {
-  label: string;
-  token: string;
-  description: string;
-  textToken?: string;
-  variant?: "fill" | "stroke";
-}
-
-export interface ColorGroup {
-  title: string;
-  description: string;
-  swatches: ColorSwatch[];
-}
-
-export interface SpacingSample {
-  label: string;
-  token: string;
-  value: string;
-  helper: string;
-}
-
-export interface RadiusSample {
-  label: string;
-  token: string;
-  helper: string;
-}
-
-export interface ShadowSample {
-  label: string;
-  token: string;
-  helper: string;
-}
-
-export const fontSamples: FontSample[] = [
-  {
-    label: "Display",
-    role: "Editorial headlines and hero statements.",
-    fontFamily: "display",
-    sample: "Playfair Display 012345",
-  },
-  {
-    label: "Heading + Labels",
-    role: "UI titles, navigation, and controls.",
-    fontFamily: "heading",
-    sample: "Onest 012345",
-  },
-  {
-    label: "Body",
-    role: "Paragraphs and long-form reading.",
-    fontFamily: "body",
-    sample: "Inter 012345",
-  },
-];
-
-export const typographySamples: TypographySample[] = [
-  {
-    label: "Display L",
-    textStyle: "heading/display/L",
-    description: "Hero statements and landing headlines.",
-    sample: "Automation you can trust",
-  },
-  {
-    label: "Display M",
-    textStyle: "heading/display/M",
-    description: "Campaign headers and marketing sections.",
-    sample: "Mission control for document AI",
-  },
-  {
-    label: "Display S",
-    textStyle: "heading/display/S",
-    description: "Editorial callouts and sub-hero messaging.",
-    sample: "Confidence for every doc",
-  },
-
-  {
-    label: "Heading XL",
-    textStyle: "heading/XL",
-    description: "Top-level page titles.",
-    sample: "Operations center",
-  },
-  {
-    label: "Heading L",
-    textStyle: "heading/L",
-    description: "Primary dashboard sections.",
-    sample: "Operational overview",
-  },
-  {
-    label: "Heading M",
-    textStyle: "heading/M",
-    description: "Card titles and panels.",
-    sample: "Pipeline performance",
-  },
-  {
-    label: "Heading S",
-    textStyle: "heading/S",
-    description: "Secondary sections and panels.",
-    sample: "Queue insights",
-  },
-
-  {
-    label: "Brand",
-    textStyle: "brand",
-    description: "Wordmark accents and brand moments.",
-    sample: "Schub",
-  },
-
-  {
-    label: "Label XL Regular",
-    textStyle: "label/XL/regular",
-    description: "Oversized labels and hero UI.",
-    sample: "Portfolio summary",
-  },
-
-  {
-    label: "Label L Regular",
-    textStyle: "label/L/regular",
-    description: "Supporting labels and helper headers.",
-    sample: "Source files",
-  },
-  {
-    label: "Label L Medium",
-    textStyle: "label/L/medium",
-    description: "Buttons, tabs, and key labels.",
-    sample: "Workflow status",
-  },
-  {
-    label: "Label L Medium Underline",
-    textStyle: "label/L/medium/underline",
-    description: "Linked actions and emphasized controls.",
-    sample: "View details",
-  },
-  {
-    label: "Label L Medium Uppercase",
-    textStyle: "label/L/medium/uppercase",
-    description: "Overlines and category markers.",
-    sample: "System status",
-  },
-
-  {
-    label: "Label M Regular",
-    textStyle: "label/M/regular",
-    description: "Form labels and metadata.",
-    sample: "Owner",
-  },
-  {
-    label: "Label M Regular Underline",
-    textStyle: "label/M/regular/underline",
-    description: "Inline links and actions.",
-    sample: "Open report",
-  },
-  {
-    label: "Label M Medium",
-    textStyle: "label/M/medium",
-    description: "Compact UI labels.",
-    sample: "Assigned",
-  },
-
-  {
-    label: "Label S Regular",
-    textStyle: "label/S/regular",
-    description: "Secondary metadata and timestamps.",
-    sample: "Last updated",
-  },
-  {
-    label: "Label S Medium",
-    textStyle: "label/S/medium",
-    description: "Tag labels and small controls.",
-    sample: "In review",
-  },
-  {
-    label: "Label S Italic",
-    textStyle: "label/S/italic",
-    description: "Emphasis in microcopy.",
-    sample: "Optional",
-  },
-  {
-    label: "Label XS",
-    textStyle: "label/XS",
-    description: "Captions and helper text.",
-    sample: "Updated 2 min ago",
-  },
-
-  {
-    label: "Paragraph XL Regular",
-    textStyle: "paragraph/XL/regular",
-    description: "Intro copy and highlights.",
-    sample: "Ship compliant automation without slowing teams down.",
-  },
-  {
-    label: "Paragraph XL Medium",
-    textStyle: "paragraph/XL/medium",
-    description: "Emphasized intro copy.",
-    sample: "Trusted automation for teams that cannot wait.",
-  },
-
-  {
-    label: "Paragraph L Regular",
-    textStyle: "paragraph/L/regular",
-    description: "Long-form reading and descriptions.",
-    sample: "Write clear guidance for reviewers and operators.",
-  },
-  {
-    label: "Paragraph L Medium",
-    textStyle: "paragraph/L/medium",
-    description: "Highlighted body copy.",
-    sample: "Highlight the insight that matters most.",
-  },
-
-  {
-    label: "Paragraph M Regular",
-    textStyle: "paragraph/M/regular",
-    description: "Default body copy.",
-    sample: "Use clear, concise language across dense data surfaces.",
-  },
-  {
-    label: "Paragraph M Medium",
-    textStyle: "paragraph/M/medium",
-    description: "Emphasized body text.",
-    sample: "Keep status messages short and confident.",
-  },
-];
-
-export const colorGroups: ColorGroup[] = [
-  {
-    title: "Surface layers",
-    description: "Foundational canvases for pages, cards, and panels.",
-    swatches: [
-      {
-        label: "Background primary",
-        token: "bg",
-        description: "Default app canvas.",
-      },
-      {
-        label: "Background secondary",
-        token: "bg.muted",
-        description: "Secondary panels and cards.",
-      },
-      {
-        label: "Background subtle",
-        token: "bg.subtle",
-        description: "Muted surfaces and quiet states.",
-      },
-      {
-        label: "Background active",
-        token: "bg.emphasized",
-        description: "Selected states and active rows.",
-      },
-      {
-        label: "Background hover",
-        token: "bg.muted",
-        description: "Hover state for cards and rows.",
-      },
-      {
-        label: "Background inverse",
-        token: "bg.inverted",
-        description: "Dark surfaces and overlays.",
-        textToken: "fg.inverted",
-      },
-    ],
-  },
-  {
-    title: "Accent surfaces",
-    description: "Accent backgrounds for emphasis and status.",
-    swatches: [
-      {
-        label: "Accent primary light",
-        token: "bg.accent-primary.light",
-        description: "Primary highlight backgrounds.",
-      },
-      {
-        label: "Accent primary medium",
-        token: "bg.accent-primary.medium",
-        description: "Hover highlights and banners.",
-      },
-      {
-        label: "Accent primary dark",
-        token: "bg.accent-primary.dark",
-        description: "Pressed highlights and stronger accent surfaces.",
-      },
-      {
-        label: "Accent blue light",
-        token: "bg.accent-secondary.blue-light",
-        description: "Informational messaging.",
-      },
-      {
-        label: "Accent red light",
-        token: "bg.accent-secondary.red-light",
-        description: "Error feedback surfaces.",
-      },
-      {
-        label: "Accent green light",
-        token: "bg.accent-secondary.green-light",
-        description: "Success feedback surfaces.",
-      },
-      {
-        label: "Accent yellow medium",
-        token: "bg.accent-secondary.yellow-medium",
-        description: "Warning and pending emphasis surfaces.",
-      },
-    ],
-  },
-  {
-    title: "Borders",
-    description: "Stroke colors for dividers, cards, and focus rings.",
-    swatches: [
-      {
-        label: "Border primary",
-        token: "border",
-        description: "High contrast borders.",
-        variant: "stroke",
-      },
-      {
-        label: "Border secondary",
-        token: "border.muted",
-        description: "Default card outlines.",
-        variant: "stroke",
-      },
-      {
-        label: "Border accent",
-        token: "blue.border",
-        description: "Brand focus state.",
-        variant: "stroke",
-      },
-      {
-        label: "Border accent light",
-        token: "border.accent-light",
-        description: "Subtle accent strokes.",
-        variant: "stroke",
-      },
-    ],
-  },
-];
-
-export const spacingSamples: SpacingSample[] = [
-  { label: "2xs", token: "2xs", value: spacing["2xs"].value, helper: "Hairline gaps and tight stacks." },
-  { label: "xs", token: "xs", value: spacing.xs.value, helper: "Compact UI padding." },
-  { label: "sm", token: "sm", value: spacing.sm.value, helper: "Controls and list spacing." },
-  { label: "md", token: "md", value: spacing.md.value, helper: "Default section padding." },
-  { label: "lg", token: "lg", value: spacing.lg.value, helper: "Roomy card gutters." },
-  { label: "xl", token: "xl", value: spacing.xl.value, helper: "Hero sections and modals." },
-  { label: "2xl", token: "2xl", value: spacing["2xl"].value, helper: "Page-level layout gaps." },
-];
-
-export const radiusSamples: RadiusSample[] = [
-  { label: "2xs", token: "2xs", helper: "Hairline controls." },
-  { label: "xs", token: "xs", helper: "Inputs and chips." },
-  { label: "sm", token: "sm", helper: "Buttons and cards." },
-  { label: "md", token: "md", helper: "Panels and modals." },
-  { label: "lg", token: "lg", helper: "Hero cards." },
-  { label: "xl", token: "xl", helper: "Display surfaces." },
-  { label: "full", token: "full", helper: "Pills and badges." },
-];
-
-export const shadowSamples: ShadowSample[] = [
-  { label: "Low", token: "low", helper: "Inputs and inline UI." },
-  { label: "Mid", token: "mid", helper: "Cards and drawers." },
-  { label: "High", token: "high", helper: "Floating dialogs." },
-];