@tribepad/themis 1.0.5 → 1.0.7

package/src/elements/Tabs/Tabs.stories.tsx

@@ -26,8 +26,8 @@ const meta = {
   argTypes: {
     variant: {
       control: 'select',
-      options: ['default', 'block'],
-      description: 'Visual variant: underline (default) or block/pill',
+      options: ['default', 'block', 'stepper'],
+      description: 'Visual variant: underline (default), block/pill, or stepper (numbered steps)',
     },
     orientation: {
       control: 'select',
@@ -131,6 +131,235 @@ export const Block: Story = {
   ),
 };
 
+// ============================================================================
+// Stepper Variant Stories
+// ============================================================================
+
+/**
+ * Stepper: Numbered step circles with connecting lines.
+ * Completed steps show a checkmark, the active step is highlighted.
+ */
+export const Stepper: Story = {
+  render: () => (
+    <Tabs variant="stepper" defaultSelectedKey="form" className="w-[600px]">
+      <TabList aria-label="Blueprint setup steps">
+        <Tab id="details">Job Details</Tab>
+        <Tab id="form">Application Form</Tab>
+        <Tab id="statuses">Statuses</Tab>
+        <Tab id="journeys">Journeys</Tab>
+      </TabList>
+      <TabPanel id="details">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Job Details</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Configure the basic job information and requirements.
+          </p>
+        </div>
+      </TabPanel>
+      <TabPanel id="form">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Application Form</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Build the candidate application form with fields and sections.
+          </p>
+        </div>
+      </TabPanel>
+      <TabPanel id="statuses">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Statuses</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Define the status workflow for applications.
+          </p>
+        </div>
+      </TabPanel>
+      <TabPanel id="journeys">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Journeys</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Configure candidate journeys for each status.
+          </p>
+        </div>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
+/**
+ * StepperFirstStep: Stepper with the first step active (no completed steps).
+ */
+export const StepperFirstStep: Story = {
+  render: () => (
+    <Tabs variant="stepper" defaultSelectedKey="details" className="w-[600px]">
+      <TabList aria-label="Setup wizard">
+        <Tab id="details">Details</Tab>
+        <Tab id="form">Form</Tab>
+        <Tab id="statuses">Statuses</Tab>
+        <Tab id="journeys">Journeys</Tab>
+      </TabList>
+      <TabPanel id="details">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Step 1: Details</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            First step is active. No completed steps yet.
+          </p>
+        </div>
+      </TabPanel>
+      <TabPanel id="form">
+        <div className="p-4">Step 2 content</div>
+      </TabPanel>
+      <TabPanel id="statuses">
+        <div className="p-4">Step 3 content</div>
+      </TabPanel>
+      <TabPanel id="journeys">
+        <div className="p-4">Step 4 content</div>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
+/**
+ * StepperLastStep: Stepper with the last step active (all previous completed).
+ */
+export const StepperLastStep: Story = {
+  render: () => (
+    <Tabs variant="stepper" defaultSelectedKey="journeys" className="w-[600px]">
+      <TabList aria-label="Setup wizard">
+        <Tab id="details">Details</Tab>
+        <Tab id="form">Form</Tab>
+        <Tab id="statuses">Statuses</Tab>
+        <Tab id="journeys">Journeys</Tab>
+      </TabList>
+      <TabPanel id="details">
+        <div className="p-4">Step 1 content</div>
+      </TabPanel>
+      <TabPanel id="form">
+        <div className="p-4">Step 2 content</div>
+      </TabPanel>
+      <TabPanel id="statuses">
+        <div className="p-4">Step 3 content</div>
+      </TabPanel>
+      <TabPanel id="journeys">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Step 4: Journeys</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            All previous steps show checkmarks as completed.
+          </p>
+        </div>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
+/**
+ * StepperControlled: Stepper with external step navigation controls.
+ */
+export const StepperControlled: Story = {
+  render: function StepperControlledDemo() {
+    const steps = ['details', 'form', 'statuses', 'journeys'] as const;
+    const [selected, setSelected] = useState<Key>('details');
+    const currentIndex = steps.indexOf(selected as typeof steps[number]);
+
+    return (
+      <div className="w-[600px]">
+        <Tabs variant="stepper" selectedKey={selected} onSelectionChange={setSelected}>
+          <TabList aria-label="Controlled stepper">
+            <Tab id="details">Details</Tab>
+            <Tab id="form">Form</Tab>
+            <Tab id="statuses">Statuses</Tab>
+            <Tab id="journeys">Journeys</Tab>
+          </TabList>
+          <TabPanel id="details">
+            <div className="p-4">Step 1: Configure details</div>
+          </TabPanel>
+          <TabPanel id="form">
+            <div className="p-4">Step 2: Build the form</div>
+          </TabPanel>
+          <TabPanel id="statuses">
+            <div className="p-4">Step 3: Define statuses</div>
+          </TabPanel>
+          <TabPanel id="journeys">
+            <div className="p-4">Step 4: Set up journeys</div>
+          </TabPanel>
+        </Tabs>
+        <div className="flex justify-between mt-4 px-4">
+          <button
+            onClick={() => currentIndex > 0 && setSelected(steps[currentIndex - 1])}
+            disabled={currentIndex === 0}
+            className="px-4 py-2 text-sm rounded-md bg-[var(--secondary)] text-[var(--secondary-foreground)] disabled:opacity-50"
+          >
+            Previous
+          </button>
+          <button
+            onClick={() => currentIndex < steps.length - 1 && setSelected(steps[currentIndex + 1])}
+            disabled={currentIndex === steps.length - 1}
+            className="px-4 py-2 text-sm rounded-md bg-[var(--primary)] text-[var(--primary-foreground)] disabled:opacity-50"
+          >
+            Next
+          </button>
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * StepperWithDisabledTabs: Stepper with some tabs disabled.
+ */
+export const StepperWithDisabledTabs: Story = {
+  render: () => (
+    <Tabs variant="stepper" defaultSelectedKey="form" disabledKeys={['journeys']} className="w-[600px]">
+      <TabList aria-label="Steps with disabled">
+        <Tab id="details">Details</Tab>
+        <Tab id="form">Form</Tab>
+        <Tab id="statuses">Statuses</Tab>
+        <Tab id="journeys">Journeys</Tab>
+      </TabList>
+      <TabPanel id="details">
+        <div className="p-4">Step 1 content</div>
+      </TabPanel>
+      <TabPanel id="form">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Step 2: Form</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            The &quot;Journeys&quot; step is disabled and cannot be selected.
+          </p>
+        </div>
+      </TabPanel>
+      <TabPanel id="statuses">
+        <div className="p-4">Step 3 content</div>
+      </TabPanel>
+      <TabPanel id="journeys">
+        <div className="p-4">Step 4 content (disabled)</div>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
+/**
+ * StepperTwoSteps: Minimal stepper with only 2 steps.
+ */
+export const StepperTwoSteps: Story = {
+  render: () => (
+    <Tabs variant="stepper" defaultSelectedKey="review" className="w-[400px]">
+      <TabList aria-label="Two-step process">
+        <Tab id="configure">Configure</Tab>
+        <Tab id="review">Review</Tab>
+      </TabList>
+      <TabPanel id="configure">
+        <div className="p-4">Configuration step content</div>
+      </TabPanel>
+      <TabPanel id="review">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Review</h3>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            The first step shows a checkmark. This is the active step.
+          </p>
+        </div>
+      </TabPanel>
+    </Tabs>
+  ),
+};
+
 // ============================================================================
 // Orientation Stories
 // ============================================================================