@tribepad/themis 1.1.3 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tribepad/themis",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "Accessible React component library built on React Aria primitives",
   "author": "Tribepad <mbasford@tribepad.com>",
   "license": "MIT",

package/src/elements/Wizard/Wizard.stories.tsx

@@ -0,0 +1,285 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState, type ReactElement } from 'react';
+import { Image, Palette, Sparkles, Upload, CheckCircle } from 'lucide-react';
+import { Wizard } from './Wizard';
+import type { WizardStepDescriptor } from './Wizard.types';
+
+const STEPS: WizardStepDescriptor[] = [
+  { id: 'welcome', label: 'Welcome', description: 'Getting started' },
+  { id: 'logo', label: 'Logo', description: 'Upload your company logo' },
+  { id: 'colours', label: 'Colours', description: 'Choose your brand colours' },
+  { id: 'image', label: 'Login image', description: 'Upload a login image' },
+  { id: 'done', label: 'All done' },
+];
+
+const meta = {
+  title: 'Elements/Wizard',
+  component: Wizard,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Linear multi-step wizard with WCAG 2.2 AAA compliance. Compound components (Wizard.Stepper, Wizard.Content, Wizard.Step, Wizard.Navigation, Wizard.MobileProgress, Wizard.Layout) share state via context. Steps keyed by `id` (not positional index). Polite live region announces "Step N of M"; assertive region handles errors.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Wizard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function DefaultHarness(): ReactElement {
+  const [step, setStep] = useState(0);
+  return (
+    <div className="h-screen">
+      <Wizard
+        currentStep={step}
+        steps={STEPS}
+        onStepChange={(ev): void => setStep(ev.index)}
+      >
+        <Wizard.Layout
+          stepper={
+            <Wizard.Stepper sectionLabel="Branding" sectionNumber={1} totalSections={3} />
+          }
+          helpText="All steps optional — everything can be revisited later in ATS Settings."
+        >
+          <Wizard.MobileProgress />
+          <Wizard.Content>
+            <Wizard.Step id="welcome" icon={<Sparkles />}>
+              <p>Welcome to the branding setup. We&apos;ll guide you through a few steps.</p>
+            </Wizard.Step>
+            <Wizard.Step id="logo" icon={<Image />}>
+              <p>Upload your logo. SVG or PNG recommended.</p>
+            </Wizard.Step>
+            <Wizard.Step id="colours" icon={<Palette />}>
+              <p>Pick your primary and accent colours.</p>
+            </Wizard.Step>
+            <Wizard.Step id="image" icon={<Upload />}>
+              <p>Upload an image for the login screen.</p>
+            </Wizard.Step>
+            <Wizard.Step id="done" icon={<CheckCircle />}>
+              <p>That&apos;s it! You can revisit any step later.</p>
+            </Wizard.Step>
+          </Wizard.Content>
+          <Wizard.Navigation
+            showSkip
+            labels={{
+              start: "Let's go",
+              next: 'Next',
+              finish: 'Finish setup',
+              back: 'Back',
+              skip: 'Skip for now',
+            }}
+          />
+        </Wizard.Layout>
+      </Wizard>
+    </div>
+  );
+}
+
+export const Default: Story = {
+  render: () => <DefaultHarness />,
+};
+
+function WithPreviewHarness(): ReactElement {
+  const [step, setStep] = useState(1);
+  return (
+    <div className="h-screen">
+      <Wizard
+        currentStep={step}
+        steps={STEPS}
+        onStepChange={(ev): void => setStep(ev.index)}
+      >
+        <Wizard.Layout
+          stepper={
+            <Wizard.Stepper sectionLabel="Branding" sectionNumber={1} totalSections={3} />
+          }
+          preview={
+            <div>
+              <h4 className="text-sm font-semibold text-[var(--content-foreground)]">
+                Live preview
+              </h4>
+              <p className="mt-2 text-xs text-[var(--menu-muted)]">
+                Decorative aside — not exposed to assistive tech.
+              </p>
+            </div>
+          }
+          helpText="All steps optional — everything can be revisited later."
+        >
+          <Wizard.MobileProgress />
+          <Wizard.Content>
+            {STEPS.map((s) => (
+              <Wizard.Step key={s.id} id={s.id}>
+                <p>{s.label} step content</p>
+              </Wizard.Step>
+            ))}
+          </Wizard.Content>
+          <Wizard.Navigation
+            showSkip
+            labels={{ start: "Let's go", finish: 'Finish setup' }}
+          />
+        </Wizard.Layout>
+      </Wizard>
+    </div>
+  );
+}
+
+export const WithPreview: Story = {
+  render: () => <WithPreviewHarness />,
+};
+
+function MobileHarness(): ReactElement {
+  const [step, setStep] = useState(1);
+  const mobileSteps = STEPS.slice(0, 4);
+  // Override `lg:hidden` on MobileProgress so it renders at any viewport for docs.
+  // In real usage, the stepper takes over at lg+ and MobileProgress stays hidden.
+  return (
+    <div style={{ maxWidth: 420, margin: '0 auto' }} className="rounded-lg border border-[var(--border)] bg-[var(--content-background)]">
+      <Wizard
+        currentStep={step}
+        steps={mobileSteps}
+        onStepChange={(ev): void => setStep(ev.index)}
+      >
+        <Wizard.MobileProgress className="lg:flex" />
+        <div className="px-4 pb-4">
+          <Wizard.Content>
+            {mobileSteps.map((s) => (
+              <Wizard.Step key={s.id} id={s.id}>
+                <p className="text-sm text-[var(--menu-muted)]">{s.label} step body. Narrow viewport: the progress dots above replace the vertical stepper.</p>
+              </Wizard.Step>
+            ))}
+          </Wizard.Content>
+          <Wizard.Navigation showSkip />
+        </div>
+      </Wizard>
+    </div>
+  );
+}
+
+export const Mobile: Story = {
+  render: () => <MobileHarness />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'At <1024px viewports, the vertical `Wizard.Stepper` hides and `Wizard.MobileProgress` replaces it with a role="progressbar" dot indicator. aria-valuetext announces "Step N of M: Title".',
+      },
+    },
+  },
+};
+
+function LoadingHarness(): ReactElement {
+  return (
+    <div className="h-screen">
+      <Wizard
+        currentStep={1}
+        steps={STEPS}
+        onStepChange={(): void => undefined}
+        isLoading
+      >
+        <Wizard.Stepper sectionLabel="Branding" sectionNumber={1} totalSections={3} />
+        <Wizard.Content>
+          {STEPS.map((s) => (
+            <Wizard.Step key={s.id} id={s.id}>
+              <p>{s.label} body — saving…</p>
+            </Wizard.Step>
+          ))}
+        </Wizard.Content>
+        <Wizard.Navigation />
+      </Wizard>
+    </div>
+  );
+}
+
+export const Loading: Story = {
+  render: () => <LoadingHarness />,
+};
+
+function ErrorsHarness(): ReactElement {
+  const [step, setStep] = useState(1);
+  return (
+    <div className="h-screen">
+      <Wizard
+        currentStep={step}
+        steps={STEPS}
+        onStepChange={(ev): void => setStep(ev.index)}
+        errors={['Email is required', 'Password is too short']}
+      >
+        <Wizard.Content>
+          {STEPS.map((s) => (
+            <Wizard.Step key={s.id} id={s.id}>
+              <p>{s.label} body</p>
+            </Wizard.Step>
+          ))}
+        </Wizard.Content>
+        <Wizard.Navigation />
+      </Wizard>
+    </div>
+  );
+}
+
+export const WithErrors: Story = {
+  render: () => <ErrorsHarness />,
+};
+
+function AllDoneHarness(): ReactElement {
+  return (
+    <div className="h-screen">
+      <Wizard
+        currentStep={STEPS.length - 1}
+        steps={STEPS}
+        onStepChange={(): void => undefined}
+      >
+        <Wizard.Stepper sectionLabel="Branding" sectionNumber={1} totalSections={3} />
+        <Wizard.Content>
+          {STEPS.map((s) => (
+            <Wizard.Step
+              key={s.id}
+              id={s.id}
+              icon={s.id === 'done' ? <CheckCircle /> : undefined}
+            >
+              <p>{s.label} body</p>
+            </Wizard.Step>
+          ))}
+        </Wizard.Content>
+        <Wizard.Navigation />
+      </Wizard>
+    </div>
+  );
+}
+
+export const AllDone: Story = {
+  render: () => <AllDoneHarness />,
+};
+
+function RTLHarness(): ReactElement {
+  const [step, setStep] = useState(1);
+  return (
+    <div dir="rtl" className="h-screen">
+      <Wizard
+        currentStep={step}
+        steps={STEPS.slice(0, 4)}
+        onStepChange={(ev): void => setStep(ev.index)}
+      >
+        <Wizard.Stepper sectionLabel="الإعداد" sectionNumber={1} totalSections={3} />
+        <Wizard.Content>
+          {STEPS.slice(0, 4).map((s) => (
+            <Wizard.Step key={s.id} id={s.id}>
+              <p>{s.label} body (RTL)</p>
+            </Wizard.Step>
+          ))}
+        </Wizard.Content>
+        <Wizard.Navigation
+          labels={{ back: 'رجوع', next: 'التالي', skip: 'تخطي' }}
+          showSkip
+        />
+      </Wizard>
+    </div>
+  );
+}
+
+export const RTL: Story = {
+  render: () => <RTLHarness />,
+};