@pickle-ui/react 0.0.0-stage → 1.0.0-beta.3

package/src/components/Sidebar.tsx

@@ -0,0 +1,166 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+type SidebarContentProps = React.ComponentProps<'div'>;
+type SidebarFooterProps = React.ComponentProps<'div'>;
+type SidebarGroupLabelProps = React.ComponentProps<'div'>;
+type SidebarGroupProps = React.ComponentProps<'div'>;
+type SidebarHeaderProps = React.ComponentProps<'div'>;
+type SidebarMenuItemProps = React.ComponentProps<'li'>;
+type SidebarMenuLinkProps = React.ComponentProps<'a'>;
+type SidebarMenuListProps = React.ComponentProps<'ul'>;
+type SidebarMenuProps = React.ComponentProps<'nav'>;
+type SidebarProps = React.ComponentProps<'aside'>;
+
+function SidebarContent({ className, ...props }: SidebarContentProps) {
+  return (
+    <div
+      className={cn('min-h-0 flex-1 overflow-auto px-3 py-4', className)}
+      data-slot="sidebar-content"
+      {...props}
+    />
+  );
+}
+
+function SidebarFooter({ className, ...props }: SidebarFooterProps) {
+  return (
+    <div
+      className={cn('border-sidebar-border border-t p-4', className)}
+      data-slot="sidebar-footer"
+      {...props}
+    />
+  );
+}
+
+function SidebarGroup({ className, ...props }: SidebarGroupProps) {
+  return (
+    <div
+      className={cn('flex flex-col gap-1', className)}
+      data-slot="sidebar-group"
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupLabel({ className, ...props }: SidebarGroupLabelProps) {
+  return (
+    <div
+      className={cn(
+        'text-sidebar-foreground/70 px-2 py-1 text-xs font-medium tracking-wide uppercase',
+        className,
+      )}
+      data-slot="sidebar-group-label"
+      {...props}
+    />
+  );
+}
+
+function SidebarHeader({ className, ...props }: SidebarHeaderProps) {
+  return (
+    <div
+      className={cn('border-sidebar-border border-b px-5 py-4', className)}
+      data-slot="sidebar-header"
+      {...props}
+    />
+  );
+}
+
+function SidebarMenu({ className, ...props }: SidebarMenuProps) {
+  return (
+    <nav
+      className={cn('flex flex-col gap-1', className)}
+      data-slot="sidebar-menu"
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuItem({ className, ...props }: SidebarMenuItemProps) {
+  return (
+    <li
+      className={cn('w-full', className)}
+      data-slot="sidebar-menu-item"
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuLink({
+  children,
+  className,
+  ...props
+}: SidebarMenuLinkProps) {
+  return (
+    <a
+      className={cn(
+        'focus-ring text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground aria-[current=page]:bg-sidebar-primary aria-[current=page]:text-sidebar-primary-foreground flex h-9 w-full items-center gap-2 rounded-md px-2.5 text-sm font-medium transition-colors [&_svg]:size-4 [&_svg]:shrink-0',
+        className,
+      )}
+      data-slot="sidebar-menu-link"
+      {...props}
+    >
+      {children}
+    </a>
+  );
+}
+
+function SidebarMenuList({ className, ...props }: SidebarMenuListProps) {
+  return (
+    <ul
+      className={cn('flex list-none flex-col gap-1 p-0', className)}
+      data-slot="sidebar-menu-list"
+      {...props}
+    />
+  );
+}
+
+function SidebarRoot({ className, ...props }: SidebarProps) {
+  return (
+    <aside
+      className={cn(
+        'border-sidebar-border bg-sidebar text-sidebar-foreground flex w-64 shrink-0 flex-col border-r',
+        className,
+      )}
+      data-slot="sidebar"
+      {...props}
+    />
+  );
+}
+
+const Sidebar = Object.assign(SidebarRoot, {
+  Content: SidebarContent,
+  Footer: SidebarFooter,
+  Group: SidebarGroup,
+  GroupLabel: SidebarGroupLabel,
+  Header: SidebarHeader,
+  Menu: SidebarMenu,
+  MenuItem: SidebarMenuItem,
+  MenuLink: SidebarMenuLink,
+  MenuList: SidebarMenuList,
+});
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuLink,
+  SidebarMenuList,
+};
+export type {
+  SidebarContentProps,
+  SidebarFooterProps,
+  SidebarGroupLabelProps,
+  SidebarGroupProps,
+  SidebarHeaderProps,
+  SidebarMenuItemProps,
+  SidebarMenuLinkProps,
+  SidebarMenuListProps,
+  SidebarMenuProps,
+  SidebarProps,
+};

package/src/components/Spinner.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Story } from './_internal/Story';
+import { Spinner } from './Spinner';
+import { Text } from './Text';
+
+const meta = {
+  component: Spinner,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/Spinner',
+} satisfies Meta<typeof Spinner>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-3xl" title="Spinner">
+      <Story.Section title="Sizes">
+        <div className="flex items-center gap-6">
+          <Spinner className="size-4" />
+          <Spinner className="size-6" />
+          <Spinner className="size-8" />
+        </div>
+      </Story.Section>
+      <Story.Section title="With a label">
+        <div className="text-muted-foreground flex items-center gap-2">
+          <Spinner aria-hidden className="size-4" />
+          <Text tone="muted" variant="body">
+            Loading your workspace…
+          </Text>
+        </div>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/Spinner.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Spinner } from './Spinner';
+
+describe('Spinner', () => {
+  it('announces a loading status', () => {
+    render(<Spinner />);
+
+    expect(screen.getByRole('status', { name: 'Loading' })).toBeInTheDocument();
+  });
+
+  it('accepts a custom accessible name', () => {
+    render(<Spinner aria-label="Saving" />);
+
+    expect(screen.getByRole('status', { name: 'Saving' })).toBeInTheDocument();
+  });
+
+  it('is decorative when aria-hidden', () => {
+    const { container } = render(<Spinner aria-hidden />);
+
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+    expect(container.querySelector('svg')).not.toHaveAttribute('aria-label');
+  });
+});

package/src/components/Spinner.tsx

@@ -0,0 +1,31 @@
+import { IconLoader2 } from '@tabler/icons-react';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+type SpinnerProps = React.ComponentProps<typeof IconLoader2>;
+
+/**
+ * Announced as a loading status by default. Pass `aria-hidden` when visible
+ * text already says what is loading, and it becomes purely decorative.
+ */
+function Spinner({
+  'aria-hidden': ariaHidden,
+  className,
+  ...props
+}: SpinnerProps) {
+  const decorative = ariaHidden === true || ariaHidden === 'true';
+
+  return (
+    <IconLoader2
+      aria-hidden={ariaHidden}
+      aria-label={decorative ? undefined : 'Loading'}
+      className={cn('animate-spin', className)}
+      role={decorative ? undefined : 'status'}
+      {...props}
+    />
+  );
+}
+
+export { Spinner };
+export type { SpinnerProps };

package/src/components/Table.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Story } from './_internal/Story';
+import { Badge } from './Badge';
+import { Table } from './Table';
+import { Text } from './Text';
+
+const meta = {
+  component: Table,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/Table',
+} satisfies Meta<typeof Table>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+const deployments = [
+  {
+    branch: 'main',
+    environment: 'Production',
+    id: 'dep-1042',
+    status: 'Success',
+    statusVariant: 'success' as const,
+  },
+  {
+    branch: 'release/2.4',
+    environment: 'Staging',
+    id: 'dep-1041',
+    status: 'Running',
+    statusVariant: 'inProgress' as const,
+  },
+  {
+    branch: 'feat/billing',
+    environment: 'Preview',
+    id: 'dep-1040',
+    status: 'Failed',
+    statusVariant: 'failed' as const,
+  },
+];
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-4xl" title="Table">
+      <Story.Section title="Deployments">
+        <Table aria-label="Deployments">
+          <Table.Header>
+            <Table.Row>
+              <Table.Head>Deployment</Table.Head>
+              <Table.Head>Environment</Table.Head>
+              <Table.Head>Branch</Table.Head>
+              <Table.Head>Status</Table.Head>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {deployments.map((deployment) => (
+              <Table.Row key={deployment.id}>
+                <Table.Cell>
+                  <Text variant="code">{deployment.id}</Text>
+                </Table.Cell>
+                <Table.Cell>{deployment.environment}</Table.Cell>
+                <Table.Cell>
+                  <Text variant="code">{deployment.branch}</Text>
+                </Table.Cell>
+                <Table.Cell>
+                  <Badge variant={deployment.statusVariant}>
+                    {deployment.status}
+                  </Badge>
+                </Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/Table.tsx

@@ -0,0 +1,151 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+type TableBodyProps = React.ComponentProps<'tbody'>;
+type TableCaptionProps = React.ComponentProps<'caption'>;
+type TableCellProps = React.ComponentProps<'td'>;
+type TableFooterProps = React.ComponentProps<'tfoot'>;
+type TableHeaderProps = React.ComponentProps<'thead'>;
+type TableHeadProps = React.ComponentProps<'th'>;
+type TableProps = React.ComponentProps<'table'> & {
+  containerClassName?: string;
+  containerProps?: Omit<React.ComponentProps<'div'>, 'children' | 'className'>;
+};
+type TableRowProps = React.ComponentProps<'tr'>;
+
+function TableBody({ className, ...props }: TableBodyProps) {
+  return (
+    <tbody
+      className={cn('[&_tr:last-child]:border-0', className)}
+      data-slot="table-body"
+      {...props}
+    />
+  );
+}
+
+function TableCaption({ className, ...props }: TableCaptionProps) {
+  return (
+    <caption
+      className={cn('text-muted-foreground mt-4 text-sm', className)}
+      data-slot="table-caption"
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: TableCellProps) {
+  return (
+    <td
+      className={cn('p-4 align-middle text-sm', className)}
+      data-slot="table-cell"
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: TableFooterProps) {
+  return (
+    <tfoot
+      className={cn(
+        'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
+        className,
+      )}
+      data-slot="table-footer"
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: TableHeadProps) {
+  return (
+    <th
+      className={cn(
+        'text-muted-foreground h-10 px-4 text-left align-middle text-xs font-medium tracking-wide uppercase',
+        className,
+      )}
+      data-slot="table-head"
+      {...props}
+    />
+  );
+}
+
+function TableHeader({ className, ...props }: TableHeaderProps) {
+  return (
+    <thead
+      className={cn('[&_tr]:border-b', className)}
+      data-slot="table-header"
+      {...props}
+    />
+  );
+}
+
+function TableRoot({
+  children,
+  className,
+  containerClassName,
+  containerProps,
+  ref,
+  ...props
+}: TableProps) {
+  return (
+    <div
+      className={cn('relative w-full overflow-auto', containerClassName)}
+      data-slot="table-container"
+      {...containerProps}
+    >
+      <table
+        className={cn('w-full caption-bottom text-sm', className)}
+        data-slot="table"
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </table>
+    </div>
+  );
+}
+
+function TableRow({ className, ...props }: TableRowProps) {
+  return (
+    <tr
+      className={cn(
+        'border-border hover:bg-muted/30 border-b transition-none',
+        className,
+      )}
+      data-slot="table-row"
+      {...props}
+    />
+  );
+}
+
+const Table = Object.assign(TableRoot, {
+  Body: TableBody,
+  Caption: TableCaption,
+  Cell: TableCell,
+  Footer: TableFooter,
+  Head: TableHead,
+  Header: TableHeader,
+  Row: TableRow,
+});
+
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+};
+export type {
+  TableBodyProps,
+  TableCaptionProps,
+  TableCellProps,
+  TableFooterProps,
+  TableHeaderProps,
+  TableHeadProps,
+  TableProps,
+  TableRowProps,
+};

package/src/components/Text.stories.tsx

@@ -0,0 +1,148 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type * as React from 'react';
+
+import { type ComponentMatrixCellProps, Story } from './_internal/Story';
+import { Text, type TextProps } from './Text';
+
+const meta = {
+  component: Text,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'components/Text',
+} satisfies Meta<typeof Text>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+type TextTone = NonNullable<TextProps['tone']>;
+type TextVariant = NonNullable<TextProps['variant']>;
+
+const VARIANT_ROWS: { key: TextVariant; label: string }[] = [
+  { key: 'h1', label: 'H1' },
+  { key: 'h2', label: 'H2' },
+  { key: 'h3', label: 'H3' },
+  { key: 'h4', label: 'H4' },
+  { key: 'lead', label: 'Lead' },
+  { key: 'body', label: 'Body' },
+  { key: 'small', label: 'Small' },
+  { key: 'code', label: 'Code' },
+];
+
+const TONE_COLUMNS: { key: TextTone; label: string }[] = [
+  { key: 'primary', label: 'Primary' },
+  { key: 'muted', label: 'Muted' },
+  { key: 'destructive', label: 'Destructive' },
+];
+
+const WEIGHT_ROWS: { key: NonNullable<TextProps['weight']>; label: string }[] =
+  [
+    { key: 'normal', label: 'Normal' },
+    { key: 'bold', label: 'Bold' },
+  ];
+
+function ToneCell({ column, row }: ComponentMatrixCellProps) {
+  return (
+    <Text tone={column.key as TextTone} variant={row.key as TextVariant}>
+      Sample text
+    </Text>
+  );
+}
+
+function WeightCell({ column, row }: ComponentMatrixCellProps) {
+  return (
+    <Text variant="body" weight={row.key as NonNullable<TextProps['weight']>}>
+      {column.label} weight
+    </Text>
+  );
+}
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-5xl" title="Text">
+      <Story.Section title="Variant scale">
+        <div className="flex flex-col gap-4">
+          {VARIANT_ROWS.map(({ key, label }) => (
+            <div className="flex items-baseline gap-4" key={key}>
+              <span className="text-muted-foreground w-12 shrink-0 text-xs">
+                {label}
+              </span>
+              <Text variant={key}>
+                {key === 'code'
+                  ? 'npm install pickle-ui'
+                  : 'The quick brown fox jumps over the lazy dog.'}
+              </Text>
+            </div>
+          ))}
+        </div>
+      </Story.Section>
+
+      <Story.Section title="Tone (color axis)">
+        <Story.Matrix
+          Cell={ToneCell}
+          cellWidth="14rem"
+          columns={TONE_COLUMNS}
+          rows={VARIANT_ROWS.slice(0, 4)}
+        />
+      </Story.Section>
+
+      <Story.Section title="Weight">
+        <Story.Matrix
+          Cell={WeightCell}
+          cellWidth="14rem"
+          columns={[{ key: 'body', label: 'Body' }]}
+          rows={WEIGHT_ROWS}
+        />
+      </Story.Section>
+
+      <Story.Section title="Size tokens">
+        <div
+          className="flex flex-col gap-4"
+          style={
+            {
+              '--text-body': '1rem',
+              '--text-h1': '2.25rem',
+              '--text-small': '0.875rem',
+            } as React.CSSProperties
+          }
+        >
+          {VARIANT_ROWS.map(({ key, label }) => (
+            <div className="flex items-baseline gap-4" key={key}>
+              <span className="text-muted-foreground w-12 shrink-0 text-xs">
+                {label}
+              </span>
+              <Text variant={key}>
+                {key === 'code'
+                  ? 'npm install pickle-ui'
+                  : 'The quick brown fox jumps over the lazy dog.'}
+              </Text>
+            </div>
+          ))}
+        </div>
+      </Story.Section>
+
+      <Story.Section title="Truncation">
+        <div className="max-w-xs">
+          <Text className="border border-dashed" truncate variant="body">
+            This is a very long line of text that will be truncated because
+            there is not enough horizontal space to display it all.
+          </Text>
+        </div>
+      </Story.Section>
+
+      <Story.Section title="Polymorphism (as prop)">
+        <div className="flex flex-col gap-3">
+          <Text as="h1" variant="h2">
+            h2 styles on an &lt;h1&gt; element
+          </Text>
+          <Text as="div" variant="body">
+            Body copy rendered as a &lt;div&gt;
+          </Text>
+          <Text as="label" tone="muted" variant="small">
+            Small muted text rendered as a &lt;label&gt;
+          </Text>
+        </div>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};