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

package/src/components/Progress.tsx

@@ -0,0 +1,111 @@
+import { Progress as ProgressPrimitive } from '@base-ui/react/progress';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+type ProgressIndicatorProps = React.ComponentProps<
+  typeof ProgressPrimitive.Indicator
+> & {
+  indicatorClassName?: string;
+};
+
+type ProgressLabelProps = React.ComponentProps<typeof ProgressPrimitive.Label>;
+type ProgressProps = React.ComponentProps<typeof ProgressPrimitive.Root>;
+type ProgressTrackProps = React.ComponentProps<typeof ProgressPrimitive.Track>;
+
+type ProgressValueProps = React.ComponentProps<typeof ProgressPrimitive.Value>;
+
+function ProgressIndicator({
+  className,
+  indicatorClassName,
+  ...props
+}: ProgressIndicatorProps) {
+  return (
+    <ProgressPrimitive.Indicator
+      className={cn(
+        'bg-primary h-full rounded-full transition-[width] duration-300',
+        className,
+        indicatorClassName,
+      )}
+      data-slot="progress-indicator"
+      {...props}
+    />
+  );
+}
+
+function ProgressLabel({ className, ...props }: ProgressLabelProps) {
+  return (
+    <ProgressPrimitive.Label
+      className={cn('text-sm leading-none font-medium', className)}
+      data-slot="progress-label"
+      {...props}
+    />
+  );
+}
+
+function ProgressRoot({ children, className, ...props }: ProgressProps) {
+  return (
+    <ProgressPrimitive.Root
+      className={cn('grid w-full gap-2', className)}
+      data-slot="progress"
+      {...props}
+    >
+      {children ?? (
+        <ProgressTrack>
+          <ProgressIndicator />
+        </ProgressTrack>
+      )}
+    </ProgressPrimitive.Root>
+  );
+}
+
+function ProgressTrack({ children, className, ...props }: ProgressTrackProps) {
+  return (
+    <ProgressPrimitive.Track
+      className={cn(
+        'bg-muted h-2 w-full overflow-hidden rounded-full',
+        className,
+      )}
+      data-slot="progress-track"
+      {...props}
+    >
+      {children ?? <ProgressIndicator />}
+    </ProgressPrimitive.Track>
+  );
+}
+
+function ProgressValue({ className, ...props }: ProgressValueProps) {
+  return (
+    <ProgressPrimitive.Value
+      className={cn(
+        'text-muted-foreground text-right text-sm tabular-nums',
+        className,
+      )}
+      data-slot="progress-value"
+      {...props}
+    />
+  );
+}
+
+const Progress = Object.assign(ProgressRoot, {
+  Indicator: ProgressIndicator,
+  Label: ProgressLabel,
+  Track: ProgressTrack,
+  Value: ProgressValue,
+});
+
+export {
+  Progress,
+  ProgressIndicator,
+  ProgressLabel,
+  ProgressRoot,
+  ProgressTrack,
+  ProgressValue,
+};
+export type {
+  ProgressIndicatorProps,
+  ProgressLabelProps,
+  ProgressProps,
+  ProgressTrackProps,
+  ProgressValueProps,
+};

package/src/components/ScrollArea.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Story } from './_internal/Story';
+import { ScrollArea } from './ScrollArea';
+import { Text } from './Text';
+
+const meta = {
+  component: ScrollArea,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/ScrollArea',
+} satisfies Meta<typeof ScrollArea>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+const releases = Array.from({ length: 18 }, (_, index) => ({
+  date: `Jun ${20 - index}`,
+  version: `0.${18 - index}.0`,
+}));
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-4xl" title="ScrollArea">
+      <Story.Section title="Vertical">
+        <ScrollArea
+          className="border-border h-72 w-80 overflow-hidden rounded-md border"
+          contentClassName="p-4 pr-6 pb-0"
+        >
+          <Text as="h3" className="mb-3" weight="bold">
+            Releases
+          </Text>
+          {releases.map((release) => (
+            <div
+              className="border-border flex justify-between border-t py-3 text-sm"
+              key={release.version}
+            >
+              <Text as="span">{release.version}</Text>
+              <Text as="span" tone="muted">
+                {release.date}
+              </Text>
+            </div>
+          ))}
+        </ScrollArea>
+      </Story.Section>
+
+      <Story.Section title="Both axes">
+        <ScrollArea
+          className="border-border h-44 w-full overflow-hidden rounded-md border"
+          contentClassName="w-max p-4"
+          orientation="both"
+        >
+          <div className="grid grid-cols-8 gap-3">
+            {Array.from({ length: 24 }, (_, index) => (
+              <div
+                className="bg-muted flex h-20 w-32 items-center justify-center rounded-md text-sm"
+                key={index}
+              >
+                <Text as="span">Item {index + 1}</Text>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/ScrollArea.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { ScrollArea } from './ScrollArea';
+
+describe('ScrollArea', () => {
+  it('composes its viewport and content automatically', async () => {
+    const { container } = render(<ScrollArea>Scrollable content</ScrollArea>);
+
+    await waitFor(() =>
+      expect(
+        container.querySelector('[data-slot="scroll-area-viewport"]'),
+      ).toContainElement(screen.getByText('Scrollable content')),
+    );
+  });
+
+  it('keeps low-level parts available for custom composition', async () => {
+    render(
+      <ScrollArea.Root>
+        <ScrollArea.Viewport data-testid="custom-viewport">
+          <ScrollArea.Content>Custom content</ScrollArea.Content>
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>,
+    );
+
+    await waitFor(() =>
+      expect(screen.getByTestId('custom-viewport')).toHaveTextContent(
+        'Custom content',
+      ),
+    );
+  });
+});

package/src/components/ScrollArea.tsx

@@ -0,0 +1,160 @@
+import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+type ScrollAreaContentProps = React.ComponentProps<
+  typeof ScrollAreaPrimitive.Content
+>;
+type ScrollAreaCornerProps = React.ComponentProps<
+  typeof ScrollAreaPrimitive.Corner
+>;
+type ScrollAreaProps = Omit<ScrollAreaRootProps, 'children'> & {
+  children?: React.ReactNode;
+  contentClassName?: string;
+  orientation?: 'both' | 'horizontal' | 'vertical';
+  viewportClassName?: string;
+};
+type ScrollAreaRootProps = React.ComponentProps<
+  typeof ScrollAreaPrimitive.Root
+>;
+type ScrollAreaScrollbarProps = React.ComponentProps<
+  typeof ScrollAreaPrimitive.Scrollbar
+>;
+type ScrollAreaThumbProps = React.ComponentProps<
+  typeof ScrollAreaPrimitive.Thumb
+>;
+type ScrollAreaViewportProps = React.ComponentProps<
+  typeof ScrollAreaPrimitive.Viewport
+>;
+
+function ScrollAreaContent({ className, ...props }: ScrollAreaContentProps) {
+  return (
+    <ScrollAreaPrimitive.Content
+      className={cn('min-w-full', className)}
+      data-slot="scroll-area-content"
+      {...props}
+    />
+  );
+}
+
+function ScrollAreaCorner({ className, ...props }: ScrollAreaCornerProps) {
+  return (
+    <ScrollAreaPrimitive.Corner
+      className={cn('absolute right-0 bottom-0 bg-transparent', className)}
+      data-slot="scroll-area-corner"
+      {...props}
+    />
+  );
+}
+
+function ScrollAreaFacade({
+  children,
+  contentClassName,
+  orientation = 'vertical',
+  viewportClassName,
+  ...props
+}: ScrollAreaProps) {
+  const hasHorizontalScrollbar =
+    orientation === 'horizontal' || orientation === 'both';
+  const hasVerticalScrollbar =
+    orientation === 'vertical' || orientation === 'both';
+
+  return (
+    <ScrollAreaRoot {...props}>
+      <ScrollAreaViewport className={viewportClassName}>
+        <ScrollAreaContent className={contentClassName}>
+          {children}
+        </ScrollAreaContent>
+      </ScrollAreaViewport>
+      {hasVerticalScrollbar ? <ScrollAreaScrollbar /> : null}
+      {hasHorizontalScrollbar ? (
+        <ScrollAreaScrollbar orientation="horizontal" />
+      ) : null}
+      {orientation === 'both' ? <ScrollAreaCorner /> : null}
+    </ScrollAreaRoot>
+  );
+}
+
+function ScrollAreaRoot({ className, ...props }: ScrollAreaRootProps) {
+  return (
+    <ScrollAreaPrimitive.Root
+      className={cn('relative', className)}
+      data-slot="scroll-area"
+      {...props}
+    />
+  );
+}
+
+function ScrollAreaScrollbar({
+  children,
+  className,
+  orientation = 'vertical',
+  ...props
+}: ScrollAreaScrollbarProps) {
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      className={cn(
+        'pointer-events-none absolute flex touch-none p-0.5 opacity-0 transition-opacity duration-150 select-none data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100',
+        orientation === 'vertical' && 'inset-y-0 right-0 w-2.5 justify-center',
+        orientation === 'horizontal' && 'inset-x-0 bottom-0 h-2.5 items-center',
+        className,
+      )}
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      {...props}
+    >
+      {children ?? <ScrollAreaThumb />}
+    </ScrollAreaPrimitive.Scrollbar>
+  );
+}
+
+function ScrollAreaThumb({ className, ...props }: ScrollAreaThumbProps) {
+  return (
+    <ScrollAreaPrimitive.Thumb
+      className={cn(
+        'bg-border relative rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-(--scroll-area-thumb-width) data-[orientation=vertical]:h-(--scroll-area-thumb-height) data-[orientation=vertical]:w-1.5',
+        className,
+      )}
+      data-slot="scroll-area-thumb"
+      {...props}
+    />
+  );
+}
+
+function ScrollAreaViewport({ className, ...props }: ScrollAreaViewportProps) {
+  return (
+    <ScrollAreaPrimitive.Viewport
+      className={cn('size-full rounded-[inherit] outline-none', className)}
+      data-slot="scroll-area-viewport"
+      {...props}
+    />
+  );
+}
+
+const ScrollArea = Object.assign(ScrollAreaFacade, {
+  Content: ScrollAreaContent,
+  Corner: ScrollAreaCorner,
+  Root: ScrollAreaRoot,
+  Scrollbar: ScrollAreaScrollbar,
+  Thumb: ScrollAreaThumb,
+  Viewport: ScrollAreaViewport,
+});
+
+export {
+  ScrollArea,
+  ScrollAreaContent,
+  ScrollAreaCorner,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+};
+export type {
+  ScrollAreaContentProps,
+  ScrollAreaCornerProps,
+  ScrollAreaProps,
+  ScrollAreaRootProps,
+  ScrollAreaScrollbarProps,
+  ScrollAreaThumbProps,
+  ScrollAreaViewportProps,
+};

package/src/components/Separator.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Story } from './_internal/Story';
+import { Separator } from './Separator';
+import { Text } from './Text';
+
+const meta = {
+  component: Separator,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/Separator',
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-3xl" title="Separator">
+      <Story.Section title="Horizontal">
+        <div className="flex max-w-sm flex-col gap-3">
+          <Text variant="body">Account</Text>
+          <Separator />
+          <Text tone="muted" variant="body">
+            Manage your profile and preferences.
+          </Text>
+        </div>
+      </Story.Section>
+      <Story.Section title="Vertical">
+        <div className="flex h-5 items-center gap-3">
+          <Text variant="body">Docs</Text>
+          <Separator orientation="vertical" />
+          <Text variant="body">Components</Text>
+          <Separator orientation="vertical" />
+          <Text variant="body">Theming</Text>
+        </div>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};

package/src/components/Separator.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Separator } from './Separator';
+
+describe('Separator', () => {
+  it('renders a horizontal separator by default', () => {
+    render(<Separator />);
+
+    expect(screen.getByRole('separator')).toHaveAttribute(
+      'data-orientation',
+      'horizontal',
+    );
+  });
+
+  it('renders a vertical separator', () => {
+    render(<Separator orientation="vertical" />);
+
+    expect(screen.getByRole('separator')).toHaveAttribute(
+      'aria-orientation',
+      'vertical',
+    );
+  });
+});

package/src/components/Separator.tsx

@@ -0,0 +1,27 @@
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+type SeparatorProps = React.ComponentProps<typeof SeparatorPrimitive>;
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  ...props
+}: SeparatorProps) {
+  return (
+    <SeparatorPrimitive
+      className={cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^="h-"]]:not-[[class*="_h-"]]:self-stretch',
+        className,
+      )}
+      data-slot="separator"
+      orientation={orientation}
+      {...props}
+    />
+  );
+}
+
+export { Separator };
+export type { SeparatorProps };

package/src/components/Sidebar.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import {
+  IconLayoutDashboard,
+  IconSearch,
+  IconSettings,
+} from '@tabler/icons-react';
+
+import { Story } from './_internal/Story';
+import { Sidebar } from './Sidebar';
+import { Text } from './Text';
+import { XStack } from './XStack';
+import { YStack } from './YStack';
+
+const meta = {
+  component: Sidebar,
+  parameters: { layout: 'fullscreen' },
+  title: 'components/Sidebar',
+} satisfies Meta<typeof Sidebar>;
+
+export default meta;
+type StoryDefinition = StoryObj<typeof meta>;
+
+export const All: StoryDefinition = {
+  render: () => (
+    <Story.Layout className="max-w-4xl" title="Sidebar">
+      <Story.Section title="Navigation shell">
+        <Sidebar className="h-96">
+          <Sidebar.Header>
+            <XStack align="center" gap={3}>
+              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex size-8 items-center justify-center rounded-md text-sm font-semibold">
+                P
+              </div>
+              <YStack gap={0.5}>
+                <Text variant="h4" weight="bold">
+                  Pickle
+                </Text>
+                <Text tone="muted" variant="small">
+                  Workspace
+                </Text>
+              </YStack>
+            </XStack>
+          </Sidebar.Header>
+          <Sidebar.Content>
+            <Sidebar.Menu aria-label="Workspace navigation">
+              <Sidebar.MenuList>
+                <Sidebar.MenuItem>
+                  <Sidebar.MenuLink aria-current="page" href="#dashboard">
+                    <IconLayoutDashboard stroke={1.75} />
+                    Dashboard
+                  </Sidebar.MenuLink>
+                </Sidebar.MenuItem>
+                <Sidebar.MenuItem>
+                  <Sidebar.MenuLink href="#search">
+                    <IconSearch stroke={1.75} />
+                    Search
+                  </Sidebar.MenuLink>
+                </Sidebar.MenuItem>
+                <Sidebar.MenuItem>
+                  <Sidebar.MenuLink href="#settings">
+                    <IconSettings stroke={1.75} />
+                    Settings
+                  </Sidebar.MenuLink>
+                </Sidebar.MenuItem>
+              </Sidebar.MenuList>
+            </Sidebar.Menu>
+          </Sidebar.Content>
+          <Sidebar.Footer>
+            <XStack align="center" gap={3}>
+              <div className="bg-sidebar-accent text-sidebar-accent-foreground flex size-8 items-center justify-center rounded-md text-sm font-semibold">
+                U
+              </div>
+              <YStack gap={0.5}>
+                <Text className="font-medium" variant="small">
+                  Ugo Onali
+                </Text>
+                <Text tone="muted" variant="small">
+                  Pro workspace
+                </Text>
+              </YStack>
+            </XStack>
+          </Sidebar.Footer>
+        </Sidebar>
+      </Story.Section>
+    </Story.Layout>
+  ),
+};