@pstdio/ui 0.0.3 → 0.1.0

package/src/components/menu-item.stories.tsx

@@ -1,162 +0,0 @@
-import { Box, Button, Menu, Stack } from "@chakra-ui/react";
-import { ChevronDown, ChevronRight, FileText, Folder, Settings, Star } from "lucide-react";
-import type { ComponentProps, ReactNode } from "react";
-
-import { MenuItem } from "./menu-item";
-
-type StoryFn = () => ReactNode;
-type MenuItemStoryArgs = ComponentProps<typeof MenuItem>;
-
-const meta = {
-  title: "Components/MenuItem",
-  component: MenuItem,
-  decorators: [
-    (Story: StoryFn) => (
-      <Box padding="sm" background="bg">
-        <Story />
-      </Box>
-    ),
-  ],
-  args: {
-    id: "reports",
-    primaryLabel: "Reports",
-    secondaryLabel: "Financial and tax summaries",
-    tooltipLabel: "Open reports",
-    leftIcon: FileText,
-    rightIcon: ChevronRight,
-  },
-};
-
-export default meta;
-
-const renderMenuList = (children: ReactNode) => (
-  <Menu.Root>
-    <Stack
-      width="20rem"
-      gap="2px"
-      padding="sm"
-      borderRadius="md"
-      borderWidth="1px"
-      borderColor="border.muted"
-      background="bg"
-    >
-      {children}
-    </Stack>
-  </Menu.Root>
-);
-
-const renderMenuItem = (args: MenuItemStoryArgs) => renderMenuList(<MenuItem {...args} />);
-
-export const Default = {
-  render: renderMenuItem,
-};
-
-export const WithTag = {
-  args: {
-    tagLabel: "WIP",
-    tagColorPalette: "yellow",
-  },
-  render: renderMenuItem,
-};
-
-export const Selected = {
-  args: {
-    isSelected: true,
-    rightIcon: Star,
-  },
-  render: renderMenuItem,
-};
-
-export const NoIcon = {
-  args: {
-    primaryLabel: "Activity log",
-    secondaryLabel: "Latest updates",
-    leftIcon: null,
-    rightIcon: null,
-  },
-  render: renderMenuItem,
-};
-
-export const NoDescription = {
-  args: {
-    primaryLabel: "Invoices",
-    secondaryLabel: undefined,
-    tooltipLabel: undefined,
-  },
-  render: renderMenuItem,
-};
-
-export const Compact = {
-  args: {
-    variant: "compact",
-    secondaryLabel: "Financial and tax summaries",
-  },
-  render: renderMenuItem,
-};
-
-export const Disabled = {
-  args: {
-    isDisabled: true,
-    secondaryLabel: "Requires admin access",
-  },
-  render: renderMenuItem,
-};
-
-export const MenuList = {
-  render: () =>
-    renderMenuList(
-      <>
-        <MenuItem id="files" primaryLabel="Files" secondaryLabel="Recent uploads" leftIcon={Folder} />
-        <MenuItem
-          id="reports"
-          primaryLabel="Reports"
-          secondaryLabel="Financial and tax summaries"
-          leftIcon={FileText}
-          rightIcon={ChevronRight}
-        />
-        <MenuItem
-          id="activity"
-          primaryLabel="Activity log"
-          secondaryLabel="Latest updates"
-          leftIcon={null}
-          rightIcon={null}
-        />
-        <MenuItem id="settings" primaryLabel="Settings" secondaryLabel="Workspace preferences" isSelected />
-        <MenuItem id="locked" primaryLabel="Billing" secondaryLabel="Requires admin access" isDisabled />
-      </>,
-    ),
-};
-
-export const DropdownMenu = {
-  render: () => (
-    <Menu.Root defaultOpen>
-      <Menu.Trigger asChild>
-        <Button size="sm" variant="outline">
-          Actions
-        </Button>
-      </Menu.Trigger>
-      <Menu.Positioner>
-        <Menu.Content minW="240px" bg="bg">
-          <MenuItem
-            id="sort"
-            primaryLabel="Sort by"
-            secondaryLabel="Newest first"
-            tooltipLabel="Change sort order"
-            leftIcon={ChevronDown}
-          />
-          <MenuItem id="duplicate" primaryLabel="Duplicate" secondaryLabel="Create a copy" leftIcon={FileText} />
-          <MenuItem
-            id="move"
-            primaryLabel="Move to folder"
-            secondaryLabel="Organize this item"
-            leftIcon={Folder}
-            rightIcon={ChevronRight}
-          />
-          <Menu.Separator />
-          <MenuItem id="settings" primaryLabel="Settings" secondaryLabel={undefined} leftIcon={Settings} />
-          <MenuItem id="archive" primaryLabel="Archive" secondaryLabel="Requires admin access" isDisabled />
-        </Menu.Content>
-      </Menu.Positioner>
-    </Menu.Root>
-  ),
-};

package/src/components/menu-item.tsx

@@ -1,207 +0,0 @@
-import type { IconProps } from "@chakra-ui/react";
-import { Badge, MenuItem as ChakraMenuItem, Flex, Icon, Stack, Text } from "@chakra-ui/react";
-import type { ComponentProps, MouseEvent as ReactMouseEvent, ReactNode } from "react";
-import { Tooltip } from "./tooltip";
-
-type ChakraMenuItemProps = ComponentProps<typeof ChakraMenuItem>;
-type MenuItemIcon = ComponentProps<typeof Icon>["as"];
-type MenuItemIconColor = IconProps["color"];
-type MenuItemTagColor = ComponentProps<typeof Badge>["colorPalette"];
-type MenuItemTagVariant = ComponentProps<typeof Badge>["variant"];
-type MenuItemVariant = "default" | "compact";
-
-const menuItemVariantStyles = {
-  default: {
-    paddingX: "sm",
-    paddingY: "xs",
-    minHeight: "2rem",
-    iconSize: "19px",
-    primaryTextStyle: "label/M/regular",
-    secondaryMarginLeft: "2px",
-    secondaryTextStyle: "label/XS/regular",
-  },
-  compact: {
-    paddingX: "xs",
-    paddingY: "2xs",
-    minHeight: "1.75rem",
-    iconSize: "16px",
-    primaryTextStyle: "label/S/regular",
-    secondaryMarginLeft: "0",
-    secondaryTextStyle: "label/XS/regular",
-  },
-} as const;
-
-interface MenuItemProps {
-  id?: string;
-  children?: ReactNode;
-  isDisabled?: boolean;
-  isSelected?: boolean;
-  primaryLabel: string;
-  secondaryLabel?: string;
-  tooltipLabel?: ReactNode;
-  leftIcon?: MenuItemIcon | null;
-  leftSlot?: ReactNode;
-  rightIcon?: MenuItemIcon | null;
-  leftIconColor?: MenuItemIconColor;
-  rightIconColor?: MenuItemIconColor;
-  leftIconSize?: string;
-  rightIconSize?: string;
-  rightIconAriaLabel?: string;
-  rightTooltipLabel?: ReactNode;
-  onRightIconClick?: () => void;
-  tagLabel?: ReactNode;
-  tagColorPalette?: MenuItemTagColor;
-  tagVariant?: MenuItemTagVariant;
-  variant?: MenuItemVariant;
-  tabIndex?: number;
-  width?: ChakraMenuItemProps["width"];
-  maxWidth?: ChakraMenuItemProps["maxWidth"];
-  setRefElement?: ChakraMenuItemProps["ref"];
-  onClick?: ChakraMenuItemProps["onClick"];
-  onMouseDown?: ChakraMenuItemProps["onMouseDown"];
-  onMouseEnter?: ChakraMenuItemProps["onMouseEnter"];
-}
-
-export const MenuItem = (props: MenuItemProps) => {
-  const {
-    id,
-    primaryLabel,
-    tooltipLabel,
-    secondaryLabel,
-    leftIcon = null,
-    leftSlot,
-    rightIcon,
-    leftIconColor = "fg",
-    rightIconColor = "fg",
-    leftIconSize,
-    rightIconSize,
-    rightIconAriaLabel,
-    rightTooltipLabel,
-    onRightIconClick,
-    isDisabled,
-    isSelected,
-    tagLabel,
-    tagColorPalette = "yellow",
-    tagVariant = "subtle",
-    variant = "default",
-    tabIndex,
-    width,
-    maxWidth,
-    setRefElement,
-  } = props;
-  const { onClick, onMouseDown, onMouseEnter } = props;
-  const variantStyles = menuItemVariantStyles[variant];
-  const backgroundColor = isSelected ? "bg.emphasized" : undefined;
-  const resolvedLeftIconSize = leftIconSize ?? variantStyles.iconSize;
-  const resolvedRightIconSize = rightIconSize ?? variantStyles.iconSize;
-  const isRightIconInteractive = Boolean(onRightIconClick && rightIcon);
-
-  const handleRightIconMouseDown = (event: ReactMouseEvent<HTMLElement>) => {
-    if (!isRightIconInteractive) {
-      return;
-    }
-
-    event.preventDefault();
-    event.stopPropagation();
-  };
-
-  const handleRightIconClick = (event: ReactMouseEvent<HTMLElement>) => {
-    if (!isRightIconInteractive || !onRightIconClick) {
-      return;
-    }
-
-    event.preventDefault();
-    event.stopPropagation();
-    onRightIconClick();
-  };
-
-  return (
-    <ChakraMenuItem
-      id={id}
-      ref={setRefElement}
-      tabIndex={tabIndex}
-      disabled={isDisabled}
-      aria-selected={isSelected}
-      paddingX={variantStyles.paddingX}
-      paddingY={variantStyles.paddingY}
-      onClick={onClick}
-      onMouseDown={onMouseDown}
-      onMouseEnter={onMouseEnter}
-      height="auto"
-      minHeight={variantStyles.minHeight}
-      role="option"
-      width={width}
-      maxWidth={maxWidth ?? "20rem"}
-      overflow={"hidden"}
-      position="relative"
-      cursor={isDisabled ? "default" : "pointer"}
-      value={id ?? primaryLabel}
-      bg={backgroundColor}
-      _hover={{ bg: "bg.muted" }}
-      _focus={{ bg: "bg.muted" }}
-    >
-      <Flex justifyContent="space-between" alignItems="center" gap="xs" flex="1">
-        <Tooltip positioning={{ placement: "right" }} content={tooltipLabel} disabled={!tooltipLabel}>
-          <Stack gap="2xs">
-            <Flex alignItems="flex-start" gap="xs" flex="1">
-              {leftSlot ? (
-                leftSlot
-              ) : leftIcon ? (
-                <Icon as={leftIcon} boxSize={resolvedLeftIconSize} color={leftIconColor} />
-              ) : null}
-              <Text lineClamp={1} textOverflow="ellipsis" textStyle={variantStyles.primaryTextStyle}>
-                {primaryLabel}
-              </Text>
-            </Flex>
-            {secondaryLabel && (
-              <Text
-                ml={variantStyles.secondaryMarginLeft}
-                lineClamp={1}
-                textOverflow="ellipsis"
-                textStyle={variantStyles.secondaryTextStyle}
-                color="fg.muted"
-              >
-                {secondaryLabel}
-              </Text>
-            )}
-          </Stack>
-        </Tooltip>
-        <Flex justifyContent="flex-end" color="fg">
-          {rightIcon ? (
-            <Tooltip positioning={{ placement: "right" }} content={rightTooltipLabel} disabled={!rightTooltipLabel}>
-              <Flex
-                as={isRightIconInteractive ? "button" : "div"}
-                alignItems="center"
-                aria-label={rightIconAriaLabel}
-                cursor={isRightIconInteractive ? "pointer" : "default"}
-                bg="transparent"
-                borderWidth="0"
-                padding="0"
-                onMouseDown={handleRightIconMouseDown}
-                onClick={handleRightIconClick}
-              >
-                <Icon as={rightIcon} boxSize={resolvedRightIconSize} color={rightIconColor} />
-              </Flex>
-            </Tooltip>
-          ) : null}
-        </Flex>
-      </Flex>
-      {tagLabel ? (
-        <Badge
-          position="absolute"
-          top="xs"
-          right="sm"
-          textStyle="label/XS/medium"
-          px="xs"
-          py="2px"
-          borderRadius="md"
-          colorPalette={tagColorPalette}
-          variant={tagVariant}
-          pointerEvents="none"
-        >
-          {tagLabel}
-        </Badge>
-      ) : null}
-    </ChakraMenuItem>
-  );
-};

package/src/components/number-input.tsx

@@ -1,21 +0,0 @@
-import { NumberInput as ChakraNumberInput } from "@chakra-ui/react";
-import * as React from "react";
-
-export interface NumberInputProps extends ChakraNumberInput.RootProps {}
-
-export const NumberInputRoot = React.forwardRef<HTMLDivElement, NumberInputProps>(function NumberInput(props, ref) {
-  const { children, ...rest } = props;
-  return (
-    <ChakraNumberInput.Root ref={ref} variant="outline" {...rest}>
-      {children}
-      <ChakraNumberInput.Control>
-        <ChakraNumberInput.IncrementTrigger />
-        <ChakraNumberInput.DecrementTrigger />
-      </ChakraNumberInput.Control>
-    </ChakraNumberInput.Root>
-  );
-});
-
-export const NumberInputField = ChakraNumberInput.Input;
-export const NumberInputScrubber = ChakraNumberInput.Scrubber;
-export const NumberInputLabel = ChakraNumberInput.Label;

package/src/components/open-source-notices-screen.stories.tsx

@@ -1,69 +0,0 @@
-import { Box } from "@chakra-ui/react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { OpenSourceNoticesScreen } from "./open-source-notices-screen";
-
-const meta = {
-  title: "Components/OpenSourceNoticesScreen",
-  component: OpenSourceNoticesScreen,
-  parameters: {
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof OpenSourceNoticesScreen>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const notices = [
-  {
-    name: "react",
-    version: "19.0.0",
-    license: "MIT",
-    copyright: "Copyright (c) Meta Platforms, Inc.",
-    homepageUrl: "https://react.dev",
-    sourceUrl: "https://github.com/facebook/react",
-  },
-  {
-    name: "chakra-ui",
-    version: "3.28.0",
-    license: "MIT",
-    copyright: "Copyright (c) Chakra UI Team",
-    homepageUrl: "https://chakra-ui.com",
-    sourceUrl: "https://github.com/chakra-ui/chakra-ui",
-    attribution:
-      "Portions of this software include work distributed under the MIT License. See project repository for full text.",
-  },
-  {
-    name: "lucide-react",
-    version: "0.469.0",
-    license: "ISC",
-    sourceUrl: "https://github.com/lucide-icons/lucide",
-  },
-];
-
-export const Populated: Story = {
-  render: (props) => (
-    <Box minHeight="100vh" bg="bg">
-      <OpenSourceNoticesScreen {...props} />
-    </Box>
-  ),
-  args: {
-    notices,
-    productName: "Prompt Studio Desktop",
-    productVersion: "1.8.3",
-    generatedAt: "2026-02-27",
-  },
-};
-
-export const Empty: Story = {
-  render: (props) => (
-    <Box minHeight="100vh" bg="bg">
-      <OpenSourceNoticesScreen {...props} />
-    </Box>
-  ),
-  args: {
-    notices: [],
-    productName: "Prompt Studio Desktop",
-    productVersion: "1.8.3",
-    generatedAt: "2026-02-27",
-  },
-};

package/src/components/open-source-notices-screen.tsx

@@ -1,154 +0,0 @@
-import { Box, HStack, Link, Separator, Stack, Text } from "@chakra-ui/react";
-
-export interface OpenSourceNotice {
-  name: string;
-  version?: string;
-  license?: string;
-  copyright?: string;
-  homepageUrl?: string;
-  sourceUrl?: string;
-  attribution?: string;
-}
-
-export interface OpenSourceNoticesScreenProps {
-  notices: OpenSourceNotice[];
-  title?: string;
-  description?: string;
-  productName?: string;
-  productVersion?: string;
-  generatedAt?: string;
-  emptyTitle?: string;
-  emptyDescription?: string;
-}
-
-const getNoticeKey = (notice: OpenSourceNotice, index: number) => {
-  return `${notice.name}-${notice.version ?? "unknown"}-${index}`;
-};
-
-const getNoticeTitle = (notice: OpenSourceNotice) => {
-  if (!notice.version) return notice.name;
-
-  return `${notice.name} v${notice.version}`;
-};
-
-export const OpenSourceNoticesScreen = (props: OpenSourceNoticesScreenProps) => {
-  const {
-    notices,
-    title = "Open Source and Third-Party Notices",
-    description = "This product includes software developed by the open source community.",
-    productName,
-    productVersion,
-    generatedAt,
-    emptyTitle = "No third-party notices available",
-    emptyDescription = "No third-party packages were included in this build.",
-  } = props;
-
-  return (
-    <Stack width="full" minHeight="100%" background="bg" color="fg" padding={{ base: "md", md: "xl" }} gap="lg">
-      <Stack gap="xs">
-        <Text textStyle="heading/L">{title}</Text>
-        <Text textStyle="paragraph/S/regular" color="fg.muted">
-          {description}
-        </Text>
-
-        <HStack gap="md" flexWrap="wrap">
-          {productName ? (
-            <Text textStyle="label/XS" color="fg.muted">
-              Product: {productName}
-            </Text>
-          ) : null}
-
-          {productVersion ? (
-            <Text textStyle="label/XS" color="fg.muted">
-              Version: {productVersion}
-            </Text>
-          ) : null}
-
-          <Text textStyle="label/XS" color="fg.muted">
-            Packages: {notices.length}
-          </Text>
-
-          {generatedAt ? (
-            <Text textStyle="label/XS" color="fg.muted">
-              Generated: {generatedAt}
-            </Text>
-          ) : null}
-        </HStack>
-      </Stack>
-
-      <Separator borderColor="border.secondary" />
-
-      {notices.length === 0 ? (
-        <Stack borderWidth="1px" borderColor="border.muted" borderRadius="md" padding="lg" gap="xs">
-          <Text textStyle="label/L/medium">{emptyTitle}</Text>
-          <Text textStyle="paragraph/S/regular" color="fg.muted">
-            {emptyDescription}
-          </Text>
-        </Stack>
-      ) : (
-        <Stack gap="md">
-          {notices.map((notice, index) => (
-            <Box
-              key={getNoticeKey(notice, index)}
-              borderWidth="1px"
-              borderColor="border.muted"
-              borderRadius="md"
-              padding="md"
-            >
-              <Stack gap="sm">
-                <Stack gap="2xs">
-                  <Text textStyle="label/L/medium">{getNoticeTitle(notice)}</Text>
-                  <Text textStyle="label/S/regular" color="fg.muted">
-                    License: {notice.license ?? "Unknown"}
-                  </Text>
-                </Stack>
-
-                {notice.copyright ? (
-                  <Text textStyle="label/S/regular" color="fg.muted">
-                    {notice.copyright}
-                  </Text>
-                ) : null}
-
-                {(notice.homepageUrl || notice.sourceUrl) && (
-                  <Stack gap="2xs">
-                    {notice.homepageUrl ? (
-                      <Link
-                        href={notice.homepageUrl}
-                        target="_blank"
-                        rel="noreferrer"
-                        textStyle="label/S/medium"
-                        width="fit-content"
-                      >
-                        Homepage
-                      </Link>
-                    ) : null}
-
-                    {notice.sourceUrl ? (
-                      <Link
-                        href={notice.sourceUrl}
-                        target="_blank"
-                        rel="noreferrer"
-                        textStyle="label/S/medium"
-                        width="fit-content"
-                      >
-                        Source code
-                      </Link>
-                    ) : null}
-                  </Stack>
-                )}
-
-                {notice.attribution ? (
-                  <Box background="bg.muted" borderRadius="sm" padding="sm">
-                    <Text textStyle="label/S/regular" whiteSpace="pre-wrap">
-                      {notice.attribution}
-                    </Text>
-                  </Box>
-                ) : null}
-              </Stack>
-            </Box>
-          ))}
-        </Stack>
-      )}
-    </Stack>
-  );
-};

package/src/components/panel-menu.stories.tsx

@@ -1,44 +0,0 @@
-import { Box, Stack } from "@chakra-ui/react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { FileText, Folder, Settings } from "lucide-react";
-import { ItemSection } from "./item-section";
-import { MenuItem } from "./menu-item";
-import { PanelMenu } from "./panel-menu";
-
-const meta: Meta<typeof PanelMenu> = {
-  title: "Components/PanelMenu",
-  component: PanelMenu,
-  decorators: [
-    (Story) => (
-      <Box height="560px" bg="bg">
-        <Story />
-      </Box>
-    ),
-  ],
-  args: {
-    title: "Project",
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof PanelMenu>;
-
-export const Default: Story = {};
-
-export const WithSections: Story = {
-  args: {
-    title: "Resources",
-    children: (
-      <Stack gap="sm">
-        <ItemSection title="Workspace">
-          <MenuItem primaryLabel="Overview" leftIcon={FileText} />
-          <MenuItem primaryLabel="Files" leftIcon={Folder} />
-        </ItemSection>
-        <ItemSection title="Settings">
-          <MenuItem primaryLabel="Preferences" leftIcon={Settings} />
-        </ItemSection>
-      </Stack>
-    ),
-  },
-};

package/src/components/panel-menu.tsx

@@ -1,27 +0,0 @@
-import { Flex, Stack, Text } from "@chakra-ui/react";
-import type { ReactNode } from "react";
-
-interface PanelMenuProps {
-  title: string;
-  children?: ReactNode;
-}
-
-export function PanelMenu(props: PanelMenuProps) {
-  const { title, children } = props;
-
-  return (
-    <Stack borderRightWidth="1px" width="64" gap="0" minH="0">
-      <Flex height="49px" p="xs" borderBottomWidth="1px" alignItems="center">
-        <Text pb="0" textStyle="label/L/medium" color="fg.muted">
-          {title}
-        </Text>
-      </Flex>
-
-      {children && (
-        <Stack p="xs" gap="xs" flex="1" minH="0" overflowY="auto">
-          {children}
-        </Stack>
-      )}
-    </Stack>
-  );
-}