@sovereignfs/ui 0.83.1 → 0.89.1

package/src/stories/SwipableMobileCarousel.stories.tsx

@@ -1,362 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { SwipableMobileCarousel } from '../components/SwipableMobileCarousel/SwipableMobileCarousel';
-import { SwipableMobileCarouselSlide } from '../components/SwipableMobileCarousel/SwipableMobileCarouselSlide';
-import { SwipableMobileCarouselSlideHeader } from '../components/SwipableMobileCarousel/SwipableMobileCarouselSlideHeader';
-import { SwipableMobileCarouselSlideBody } from '../components/SwipableMobileCarousel/SwipableMobileCarouselSlideBody';
-import { SwipableMobileCarouselSlideFooter } from '../components/SwipableMobileCarousel/SwipableMobileCarouselSlideFooter';
-import { SwipableMobileCarouselDots } from '../components/SwipableMobileCarouselDots/SwipableMobileCarouselDots';
-
-const SLIDES = [
-  { key: 'lists', label: 'Lists' },
-  { key: 'groceries', label: 'Groceries' },
-  { key: 'errands', label: 'Errands' },
-  { key: 'work', label: 'Work' },
-];
-
-function slideBodyStyle(): React.CSSProperties {
-  return {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: '100%',
-    fontFamily: 'var(--sv-font-family)',
-    color: 'var(--sv-color-text-primary)',
-  };
-}
-
-function headerStyle(): React.CSSProperties {
-  return {
-    padding: 'var(--sv-space-4)',
-    fontFamily: 'var(--sv-font-family)',
-    fontWeight: 'var(--sv-font-weight-semibold)',
-    color: 'var(--sv-color-text-primary)',
-    borderBottom: '1px solid var(--sv-color-border)',
-  };
-}
-
-function CarouselFrame({ children }: { children: React.ReactNode }) {
-  return (
-    <div
-      style={{
-        height: 480,
-        maxWidth: 375,
-        margin: '0 auto',
-        border: '1px solid var(--sv-color-border)',
-        borderRadius: 'var(--sv-radius-md)',
-        overflow: 'hidden',
-      }}
-    >
-      {children}
-    </div>
-  );
-}
-
-function DefaultDemo() {
-  const [activeIndex, setActiveIndex] = useState(0);
-  return (
-    <CarouselFrame>
-      <SwipableMobileCarousel
-        activeIndex={activeIndex}
-        onSettle={setActiveIndex}
-        aria-label="Task lists"
-      >
-        {SLIDES.map((slide) => (
-          <SwipableMobileCarouselSlide key={slide.key} slideKey={slide.key} label={slide.label}>
-            <SwipableMobileCarouselSlideHeader>
-              <div style={headerStyle()}>{slide.label}</div>
-            </SwipableMobileCarouselSlideHeader>
-            <SwipableMobileCarouselSlideBody>
-              <div style={slideBodyStyle()}>{slide.label} content</div>
-            </SwipableMobileCarouselSlideBody>
-          </SwipableMobileCarouselSlide>
-        ))}
-      </SwipableMobileCarousel>
-    </CarouselFrame>
-  );
-}
-
-function LazyLoadingBodyDemo() {
-  const [activeIndex, setActiveIndex] = useState(0);
-  const [loadedKeys, setLoadedKeys] = useState<Set<string>>(new Set(['lists']));
-
-  function simulateLoad(key: string) {
-    setTimeout(() => setLoadedKeys((s) => new Set(s).add(key)), 1200);
-  }
-
-  return (
-    <CarouselFrame>
-      <SwipableMobileCarousel
-        activeIndex={activeIndex}
-        onSettle={(i) => {
-          setActiveIndex(i);
-          const key = SLIDES[i]?.key;
-          if (key && !loadedKeys.has(key)) simulateLoad(key);
-        }}
-        aria-label="Task lists (simulated fetch)"
-      >
-        {SLIDES.map((slide) => (
-          <SwipableMobileCarouselSlide key={slide.key} slideKey={slide.key} label={slide.label}>
-            {/* The title renders immediately from already-known metadata —
-                only the Body below waits on its own simulated 1.2s fetch. */}
-            <SwipableMobileCarouselSlideHeader>
-              <div style={headerStyle()}>{slide.label}</div>
-            </SwipableMobileCarouselSlideHeader>
-            <SwipableMobileCarouselSlideBody loading={!loadedKeys.has(slide.key)}>
-              <div style={slideBodyStyle()}>{slide.label} content (loaded)</div>
-            </SwipableMobileCarouselSlideBody>
-          </SwipableMobileCarouselSlide>
-        ))}
-      </SwipableMobileCarousel>
-    </CarouselFrame>
-  );
-}
-
-function CustomIndicatorDemo() {
-  const [activeIndex, setActiveIndex] = useState(0);
-  return (
-    <CarouselFrame>
-      <SwipableMobileCarousel
-        activeIndex={activeIndex}
-        onSettle={setActiveIndex}
-        aria-label="Task lists"
-        renderIndicator={({ count, activeIndex: i, onJump }) => (
-          <div
-            style={{
-              position: 'absolute',
-              top: 8,
-              right: 8,
-              fontFamily: 'var(--sv-font-family)',
-              fontSize: 'var(--sv-font-size-sm)',
-              color: 'var(--sv-color-text-primary)',
-              background: 'var(--sv-color-surface-raised)',
-              borderRadius: 'var(--sv-radius-md)',
-              padding: 'var(--sv-space-1) var(--sv-space-2)',
-            }}
-          >
-            <button type="button" onClick={() => onJump(Math.max(0, i - 1))}>
-              ‹
-            </button>{' '}
-            {i + 1} / {count}{' '}
-            <button type="button" onClick={() => onJump(Math.min(count - 1, i + 1))}>
-              ›
-            </button>
-          </div>
-        )}
-      >
-        {SLIDES.map((slide) => (
-          <SwipableMobileCarouselSlide key={slide.key} slideKey={slide.key} label={slide.label}>
-            <SwipableMobileCarouselSlideHeader>
-              <div style={headerStyle()}>{slide.label}</div>
-            </SwipableMobileCarouselSlideHeader>
-            <SwipableMobileCarouselSlideBody>
-              <div style={slideBodyStyle()}>{slide.label} content</div>
-            </SwipableMobileCarouselSlideBody>
-          </SwipableMobileCarouselSlide>
-        ))}
-      </SwipableMobileCarousel>
-    </CarouselFrame>
-  );
-}
-
-function NoIndicatorDemo() {
-  const [activeIndex, setActiveIndex] = useState(0);
-  return (
-    <CarouselFrame>
-      <SwipableMobileCarousel
-        activeIndex={activeIndex}
-        onSettle={setActiveIndex}
-        aria-label="Task lists"
-        renderIndicator={null}
-      >
-        {SLIDES.map((slide) => (
-          <SwipableMobileCarouselSlide key={slide.key} slideKey={slide.key} label={slide.label}>
-            <SwipableMobileCarouselSlideHeader>
-              <div style={headerStyle()}>{slide.label}</div>
-            </SwipableMobileCarouselSlideHeader>
-            <SwipableMobileCarouselSlideBody>
-              <div style={slideBodyStyle()}>{slide.label} content</div>
-            </SwipableMobileCarouselSlideBody>
-          </SwipableMobileCarouselSlide>
-        ))}
-      </SwipableMobileCarousel>
-    </CarouselFrame>
-  );
-}
-
-function FooterDemo() {
-  const [activeIndex, setActiveIndex] = useState(0);
-  return (
-    <CarouselFrame>
-      <SwipableMobileCarousel
-        activeIndex={activeIndex}
-        onSettle={setActiveIndex}
-        aria-label="Task lists"
-      >
-        {SLIDES.map((slide) => (
-          <SwipableMobileCarouselSlide key={slide.key} slideKey={slide.key} label={slide.label}>
-            <SwipableMobileCarouselSlideHeader>
-              <div style={headerStyle()}>{slide.label}</div>
-            </SwipableMobileCarouselSlideHeader>
-            <SwipableMobileCarouselSlideBody>
-              <div style={slideBodyStyle()}>{slide.label} content</div>
-            </SwipableMobileCarouselSlideBody>
-            <SwipableMobileCarouselSlideFooter>
-              <div
-                style={{
-                  padding: 'var(--sv-space-3) var(--sv-space-4)',
-                  borderTop: '1px solid var(--sv-color-border)',
-                  fontFamily: 'var(--sv-font-family)',
-                  fontSize: 'var(--sv-font-size-sm)',
-                  color: 'var(--sv-color-text-muted)',
-                }}
-              >
-                + Add to {slide.label}
-              </div>
-            </SwipableMobileCarouselSlideFooter>
-          </SwipableMobileCarouselSlide>
-        ))}
-      </SwipableMobileCarousel>
-    </CarouselFrame>
-  );
-}
-
-function DotsStandaloneDemo() {
-  const [activeIndex, setActiveIndex] = useState(0);
-  return (
-    <SwipableMobileCarouselDots
-      count={4}
-      activeIndex={activeIndex}
-      onJump={setActiveIndex}
-      labels={['Lists', 'Groceries', 'Errands', 'Work']}
-      aria-label="Task lists"
-    />
-  );
-}
-
-// Matches the real scenario `density="compact"` was added for: a many-list
-// mobile task manager whose default-spacing dot row reads as long/cramped in
-// a 375px viewport — see docs/design-system.md's carousel section.
-const MANY_LABELS = [
-  'Lists',
-  'Starred',
-  'List 1',
-  'Groceries',
-  'Work',
-  'List 2',
-  'List 3',
-  'List 4',
-  'List 5',
-  'List 6',
-  'List 7',
-  'List 8',
-];
-
-function DotsManyDemo({ density }: { density?: 'default' | 'compact' }) {
-  const [activeIndex, setActiveIndex] = useState(2);
-  return (
-    <div style={{ maxWidth: 375, margin: '0 auto' }}>
-      <SwipableMobileCarouselDots
-        count={MANY_LABELS.length}
-        activeIndex={activeIndex}
-        onJump={setActiveIndex}
-        labels={MANY_LABELS}
-        aria-label="Task lists"
-        density={density}
-      />
-    </div>
-  );
-}
-
-const meta = {
-  title: 'Components/SwipableMobileCarousel',
-  component: SwipableMobileCarousel,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          "A compound component for swiping between full-width slides (each an independent route/view on mobile), wrapping useSnapCarousel. Owns rendering and mount-window mechanics only — it has no opinion on where slide data lives. Do NOT aggregate cross-slide data or mount a detail overlay (Sheet, Dialog) inside a Slide's children; see docs/design-system.md's carousel section.",
-      },
-    },
-  },
-  // Every story below supplies its own render(), which is stateful (activeIndex
-  // lives in useState) — these args only satisfy the required-prop typing.
-  args: {
-    activeIndex: 0,
-    onSettle: () => {},
-    'aria-label': 'Task lists',
-    children: null,
-  },
-} satisfies Meta<typeof SwipableMobileCarousel>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = { render: () => <DefaultDemo /> };
-
-export const LazyLoadingBody: Story = {
-  render: () => <LazyLoadingBodyDemo />,
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Swipe to a new slide — its title renders immediately from already-known metadata, while only the Body region shows a brief loading placeholder for its simulated 1.2s fetch. This is the fix for the "whole slide blanks out, title included, until its own fetch resolves" bug.',
-      },
-    },
-  },
-};
-
-export const CustomIndicator: Story = { render: () => <CustomIndicatorDemo /> };
-
-export const NoIndicator: Story = { render: () => <NoIndicatorDemo /> };
-
-export const WithFooter: Story = { render: () => <FooterDemo /> };
-
-export const MobileViewport: Story = {
-  render: () => <DefaultDemo />,
-  parameters: { viewport: { defaultViewport: 'mobile1' } },
-};
-
-// ---------------------------------------------------------------------------
-// SwipableMobileCarouselDots — standalone, also this carousel's default
-// indicator. Grouped in this file rather than its own (Table's sub-parts
-// share one story file too), though it has its own component subfolder and
-// barrel export for independent reuse.
-// ---------------------------------------------------------------------------
-
-export const DotsStandalone: Story = {
-  render: () => <DotsStandaloneDemo />,
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'SwipableMobileCarouselDots used on its own, outside a carousel — a real role="tablist"/role="tab" component (tappable, labeled, focusable), unlike the aria-hidden decorative dots both sovereign-tasks and sovereign-shopper currently hand-roll.',
-      },
-    },
-  },
-};
-
-export const DotsManyDefault: Story = {
-  render: () => <DotsManyDemo />,
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Default density with 12 slides in a 375px viewport — the row reads as long/cramped once an instance has more than a handful of lists. Compare to DotsManyCompact.',
-      },
-    },
-  },
-};
-
-export const DotsManyCompact: Story = {
-  render: () => <DotsManyDemo density="compact" />,
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'density="compact" halves the gap between dots and shrinks each dot\'s own hit target from 20px to 16px — the visible 6px dot itself is unchanged; only its surrounding tap-target box shrinks. Opt-in: every existing consumer\'s spacing is unchanged unless it passes this prop.',
-      },
-    },
-  },
-};

package/src/stories/SwipeStack.stories.tsx

@@ -1,200 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { SwipeStack } from '../components/SwipeStack/SwipeStack';
-import { SwipeStackCard } from '../components/SwipeStack/SwipeStackCard';
-
-const AGENDA_TASKS = [
-  { id: 'water-plants', title: 'Water the plants', detail: 'Living room + balcony' },
-  { id: 'standup', title: 'Team standup', detail: '9:30am · 15 min' },
-  { id: 'groceries', title: 'Buy groceries', detail: 'Milk, eggs, bread' },
-  { id: 'review-pr', title: "Review teammate's PR", detail: 'sovereign/sovereign #482' },
-  { id: 'call-dentist', title: 'Call the dentist', detail: 'Reschedule cleaning' },
-];
-
-function taskCardStyle(): React.CSSProperties {
-  return {
-    height: '100%',
-    boxSizing: 'border-box',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    padding: 'var(--sv-space-6)',
-    fontFamily: 'var(--sv-font-family)',
-  };
-}
-
-function TaskCardDemo({ title, detail }: { title: string; detail: string }) {
-  return (
-    <div style={taskCardStyle()}>
-      <div
-        style={{
-          fontSize: 'var(--sv-font-size-lg)',
-          fontWeight: 'var(--sv-font-weight-semibold)',
-          color: 'var(--sv-color-text-primary)',
-          marginBottom: 'var(--sv-space-2)',
-        }}
-      >
-        {title}
-      </div>
-      <div style={{ fontSize: 'var(--sv-font-size-sm)', color: 'var(--sv-color-text-muted)' }}>
-        {detail}
-      </div>
-    </div>
-  );
-}
-
-function StackFrame({ children }: { children: React.ReactNode }) {
-  return (
-    <div
-      style={{
-        height: 420,
-        maxWidth: 375,
-        margin: '0 auto',
-        padding: 'var(--sv-space-4)',
-        border: '1px solid var(--sv-color-border)',
-        borderRadius: 'var(--sv-radius-md)',
-        boxSizing: 'border-box',
-      }}
-    >
-      {children}
-    </div>
-  );
-}
-
-function AgendaDemo() {
-  const [log, setLog] = useState<string[]>([]);
-  return (
-    <StackFrame>
-      <SwipeStack
-        aria-label="Today's agenda"
-        directions={{
-          up: { label: 'Done', icon: 'check' },
-          down: { label: 'Defer', icon: 'history' },
-          right: { label: 'Skip', icon: 'chevron-right' },
-        }}
-        onSwipe={(direction, cardId) =>
-          setLog((l) => [`${cardId} → ${direction}`, ...l].slice(0, 5))
-        }
-      >
-        {AGENDA_TASKS.map((task) => (
-          <SwipeStackCard key={task.id} cardId={task.id}>
-            <TaskCardDemo title={task.title} detail={task.detail} />
-          </SwipeStackCard>
-        ))}
-      </SwipeStack>
-      <div
-        style={{
-          marginTop: 'var(--sv-space-3)',
-          fontFamily: 'var(--sv-font-family)',
-          fontSize: 'var(--sv-font-size-xs)',
-          color: 'var(--sv-color-text-muted)',
-        }}
-      >
-        {log.map((entry, i) => (
-          <div key={i}>{entry}</div>
-        ))}
-      </div>
-    </StackFrame>
-  );
-}
-
-function TwoDirectionsDemo() {
-  return (
-    <StackFrame>
-      <SwipeStack
-        aria-label="Photo picker"
-        directions={{
-          left: { label: 'Skip' },
-          right: { label: 'Keep', icon: 'check' },
-        }}
-        onSwipe={() => {}}
-      >
-        {AGENDA_TASKS.map((task) => (
-          <SwipeStackCard key={task.id} cardId={task.id}>
-            <TaskCardDemo title={task.title} detail={task.detail} />
-          </SwipeStackCard>
-        ))}
-      </SwipeStack>
-    </StackFrame>
-  );
-}
-
-function EmptyDemo() {
-  return (
-    <StackFrame>
-      <SwipeStack
-        aria-label="Today's agenda"
-        directions={{ up: { label: 'Done', icon: 'check' } }}
-        onSwipe={() => {}}
-      >
-        {[]}
-      </SwipeStack>
-    </StackFrame>
-  );
-}
-
-const meta = {
-  title: 'Components/SwipeStack',
-  component: SwipeStack,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'A compound component for triaging one card at a time by dragging it left/right/up/down, plus an always-visible non-gesture fallback (a button per configured direction) wired to the identical commit path and exit animation as a real drag. Every direction is independently optional and has no baked-in meaning — the caller supplies label/icon per direction and reacts to onSwipe; once triggered, a direction always removes the card for good, there is no reversible "go back".',
-      },
-    },
-  },
-  // Every story below supplies its own render(), stateless or with its own
-  // useState — these args only satisfy the required-prop typing.
-  args: {
-    'aria-label': "Today's agenda",
-    directions: {},
-    onSwipe: () => {},
-    children: null,
-  },
-} satisfies Meta<typeof SwipeStack>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => <AgendaDemo />,
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'up/down/right configured, left intentionally omitted — SwipeStack does not require all 4 directions. The log below the stack shows onSwipe firing with (direction, cardId) for both a drag and a fallback-button click.',
-      },
-    },
-  },
-};
-
-export const TwoDirections: Story = {
-  render: () => <TwoDirectionsDemo />,
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Only left/right configured — up/down are a wall, not just an unreachable outcome, so the card never visually drifts vertically, and touch-action stays pan-y so a page can still scroll vertically through the stack.',
-      },
-    },
-  },
-};
-
-export const Empty: Story = {
-  render: () => <EmptyDemo />,
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'No cards left — SwipeStack renders its empty region and disables the fallback button rather than showing any built-in empty-state copy; that vocabulary belongs to the caller, same as SwipableMobileCarousel has no opinion on where slide data lives.',
-      },
-    },
-  },
-};
-
-export const MobileViewport: Story = {
-  render: () => <AgendaDemo />,
-  parameters: { viewport: { defaultViewport: 'mobile1' } },
-};

package/src/stories/Textarea.stories.tsx

@@ -1,63 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Textarea } from '../components/Textarea/Textarea';
-
-// Wrap in a label so a11y checks pass (Textarea is a bare <textarea> — no
-// built-in label association).
-function Labeled({ label, ...props }: React.ComponentProps<typeof Textarea> & { label: string }) {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, width: 280 }}>
-      <label
-        htmlFor="sb-textarea"
-        style={{ fontSize: 14, color: 'var(--sv-color-text-primary)', fontFamily: 'system-ui' }}
-      >
-        {label}
-      </label>
-      <Textarea id="sb-textarea" {...props} />
-    </div>
-  );
-}
-
-const meta = {
-  title: 'Components/Textarea',
-  component: Textarea,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'The primitive multi-line text field. RSC-safe; forwards all native `<textarea>` props. No label is built-in — always pair with a `<label>` (or `FormField`) for accessibility.',
-      },
-    },
-  },
-} satisfies Meta<typeof Textarea>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (_args) => <Labeled label="Description" placeholder="Add a description…" />,
-};
-
-export const WithValue: Story = {
-  render: (_args) => <Labeled label="Notes" defaultValue="Follow up next week." />,
-};
-
-export const CustomRows: Story = {
-  render: (_args) => <Labeled label="Message" rows={8} placeholder="Write your message…" />,
-};
-
-export const Disabled: Story = {
-  render: (_args) => <Labeled label="Read-only field" defaultValue="Cannot be changed" disabled />,
-};
-
-export const AutoGrow: Story = {
-  render: (_args) => (
-    <Labeled
-      label="Title (grows with content)"
-      autoGrow
-      rows={1}
-      defaultValue="A short title"
-      placeholder="Add a title…"
-    />
-  ),
-};