@syscore/ui-library 1.27.3 → 2.0.0-beta-publish-workflow-beta.2

package/client/ui/Sidebar/Sidebar.stories.tsx

@@ -2,24 +2,53 @@ import type { Meta, StoryObj } from "@storybook/react";
 import {
   Sidebar,
   SidebarContent,
+  SidebarFooter,
   SidebarGroup,
   SidebarGroupContent,
   SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-  SidebarHeader,
-  SidebarFooter,
+  SidebarProvider,
+  SidebarTrigger,
 } from "../../components/ui/sidebar";
 import { Home, Settings, Users, CreditCard, LogOut } from "lucide-react";
 
 const meta = {
-  title: "UI/Sidebar",
+  title: "Draft/Sidebar",
   component: Sidebar,
   tags: ["autodocs"],
   parameters: {
     layout: "padded",
+    docs: {
+      description: {
+        component: [
+          "`Sidebar` reads collapse/open state from context. Always wrap it in `SidebarProvider`.",
+          "",
+          "```tsx",
+          `import { Sidebar, SidebarProvider, SidebarInset, SidebarTrigger } from "@syscore/ui-library"`,
+          "",
+          "<SidebarProvider>",
+          "  <Sidebar>…</Sidebar>",
+          "  <SidebarInset>",
+          "    <SidebarTrigger />",
+          "    {children}",
+          "  </SidebarInset>",
+          "</SidebarProvider>",
+          "```",
+        ].join("\n"),
+      },
+    },
   },
+  decorators: [
+    (Story) => (
+      <SidebarProvider style={{ minHeight: 384, height: 384 }}>
+        <Story />
+      </SidebarProvider>
+    ),
+  ],
 } satisfies Meta<typeof Sidebar>;
 
 export default meta;
@@ -27,8 +56,25 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `<SidebarProvider>
+  <Sidebar>
+    <SidebarHeader>App</SidebarHeader>
+    <SidebarContent>…</SidebarContent>
+    <SidebarFooter>…</SidebarFooter>
+  </Sidebar>
+  <SidebarInset>
+    <SidebarTrigger />
+    Main content
+  </SidebarInset>
+</SidebarProvider>`,
+      },
+    },
+  },
   render: () => (
-    <div className="flex gap-4 border rounded-lg overflow-hidden h-96">
+    <>
       <Sidebar>
         <SidebarHeader>
           <h2 className="font-semibold">App</h2>
@@ -84,9 +130,12 @@ export const Default: Story = {
           </SidebarMenu>
         </SidebarFooter>
       </Sidebar>
-      <div className="flex-1 p-4 bg-gray-50">
-        <p className="text-sm text-gray-600">Main content area</p>
-      </div>
-    </div>
+      <SidebarInset>
+        <div className="p-4">
+          <SidebarTrigger />
+          <p className="text-sm text-gray-600 mt-3">Main content area</p>
+        </div>
+      </SidebarInset>
+    </>
   ),
 };

package/client/ui/Skeleton/Skeleton.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Skeleton } from "../../components/ui/skeleton";
 
 const meta = {
-  title: "UI/Skeleton",
+  title: "Components/Skeleton",
   component: Skeleton,
   tags: ["autodocs"],
   parameters: {

package/client/ui/Slider/Slider.stories.tsx

@@ -3,7 +3,7 @@ import { Slider } from "../../components/ui/slider";
 import { useState } from "react";
 
 const meta = {
-  title: "UI/Slider",
+  title: "Components/Slider",
   component: Slider,
   tags: ["autodocs"],
   parameters: {

package/client/ui/StandardNavigation.stories.tsx

@@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button";
 
 
 const meta = {
-  title: "Review/StandardNavigation",
+  title: "Components/StandardNavigation",
   component: StandardNavigation,
   tags: ["autodocs"],
   parameters: {

package/client/ui/Stepper/Stepper.stories.tsx

@@ -0,0 +1,344 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Stepper } from "../../components/ui/stepper";
+import { Button } from "../../components/ui/button";
+
+const meta = {
+  title: "Components/Stepper",
+  component: Stepper,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: [
+          "A step indicator for multi-step flows — registration wizards, certification processes, onboarding.",
+          "",
+          "**Import:**",
+          "```tsx",
+          `import { Stepper } from "@syscore/ui-library"`,
+          "```",
+          "",
+          "**Key props:**",
+          "",
+          "| Prop | Type | Default | Effect |",
+          "|------|------|---------|--------|",
+          "| `steps` | `{ title, description? }[]` | — | The step definitions |",
+          "| `currentStep` | number | — | 0-indexed active step |",
+          "| `orientation` | `\"horizontal\"` \\| `\"vertical\"` | `\"horizontal\"` | Layout direction |",
+          "| `variant` | `\"default\"` \\| `\"outlined\"` | `\"default\"` | Filled vs outlined indicators |",
+          "| `size` | `\"sm\"` \\| `\"md\"` \\| `\"lg\"` | `\"md\"` | Size of indicators and labels |",
+          "| `onStepClick` | `(index) => void` | — | Makes completed steps clickable |",
+        ].join("\n"),
+      },
+    },
+  },
+  args: {
+    steps: [
+      { title: "Project details", description: "Basic information" },
+      { title: "Documents", description: "Upload required files" },
+      { title: "Review", description: "Check your submission" },
+      { title: "Submit", description: "Complete registration" },
+    ],
+    currentStep: 1,
+  },
+} satisfies Meta<typeof Stepper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const REGISTRATION_STEPS = [
+  { title: "Project details", description: "Basic information" },
+  { title: "Documents", description: "Upload required files" },
+  { title: "Review", description: "Check your submission" },
+  { title: "Submit", description: "Complete registration" },
+];
+
+const SIMPLE_STEPS = [
+  { title: "Account" },
+  { title: "Profile" },
+  { title: "Preferences" },
+  { title: "Done" },
+];
+
+// ---------------------------------------------------------------------------
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `import { Stepper } from "@syscore/ui-library"
+
+const steps = [
+  { title: "Project details", description: "Basic information" },
+  { title: "Documents", description: "Upload required files" },
+  { title: "Review", description: "Check your submission" },
+  { title: "Submit", description: "Complete registration" },
+]
+
+<Stepper steps={steps} currentStep={1} />`,
+      },
+    },
+  },
+  render: () => (
+    <Stepper steps={REGISTRATION_STEPS} currentStep={1} />
+  ),
+};
+
+export const AllStepsState: Story = {
+  name: "Step states",
+  parameters: {
+    docs: {
+      source: {
+        code: `import { Stepper } from "@syscore/ui-library"
+
+// currentStep=0 → all upcoming
+<Stepper steps={steps} currentStep={0} />
+
+// currentStep=2 → 2 complete, 1 current, 1 upcoming
+<Stepper steps={steps} currentStep={2} />
+
+// currentStep=4 → all complete
+<Stepper steps={steps} currentStep={4} />`,
+      },
+    },
+  },
+  render: () => (
+    <div className="flex flex-col gap-10 w-full">
+      <div className="flex flex-col gap-2">
+        <span className="text-xs text-gray-400 font-medium">Not started (currentStep=0)</span>
+        <Stepper steps={SIMPLE_STEPS} currentStep={0} />
+      </div>
+      <div className="flex flex-col gap-2">
+        <span className="text-xs text-gray-400 font-medium">In progress (currentStep=2)</span>
+        <Stepper steps={SIMPLE_STEPS} currentStep={2} />
+      </div>
+      <div className="flex flex-col gap-2">
+        <span className="text-xs text-gray-400 font-medium">Complete (currentStep=4)</span>
+        <Stepper steps={SIMPLE_STEPS} currentStep={4} />
+      </div>
+    </div>
+  ),
+};
+
+export const Vertical: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `import { Stepper } from "@syscore/ui-library"
+
+<Stepper
+  steps={steps}
+  currentStep={1}
+  orientation="vertical"
+/>`,
+      },
+    },
+  },
+  render: () => (
+    <div className="max-w-xs">
+      <Stepper
+        steps={REGISTRATION_STEPS}
+        currentStep={1}
+        orientation="vertical"
+      />
+    </div>
+  ),
+};
+
+export const Outlined: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `import { Stepper } from "@syscore/ui-library"
+
+<Stepper steps={steps} currentStep={2} variant="outlined" />`,
+      },
+    },
+  },
+  render: () => (
+    <Stepper steps={REGISTRATION_STEPS} currentStep={2} variant="outlined" />
+  ),
+};
+
+export const Sizes: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `import { Stepper } from "@syscore/ui-library"
+
+<Stepper steps={steps} currentStep={1} size="sm" />
+<Stepper steps={steps} currentStep={1} size="md" />
+<Stepper steps={steps} currentStep={1} size="lg" />`,
+      },
+    },
+  },
+  render: () => (
+    <div className="flex flex-col gap-10 w-full">
+      {(["sm", "md", "lg"] as const).map((size) => (
+        <div key={size} className="flex flex-col gap-2">
+          <span className="text-xs text-gray-400 font-medium">size="{size}"</span>
+          <Stepper steps={SIMPLE_STEPS} currentStep={1} size={size} />
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const Clickable: Story = {
+  name: "Clickable steps",
+  parameters: {
+    docs: {
+      source: {
+        code: `import { Stepper } from "@syscore/ui-library"
+import { useState } from "react"
+
+const [currentStep, setCurrentStep] = useState(2)
+
+{/* Completed steps are clickable — lets users go back */}
+<Stepper
+  steps={steps}
+  currentStep={currentStep}
+  onStepClick={setCurrentStep}
+/>`,
+      },
+    },
+  },
+  render: () => {
+    const [currentStep, setCurrentStep] = useState(2);
+    return (
+      <div className="flex flex-col gap-6 w-full">
+        <Stepper
+          steps={REGISTRATION_STEPS}
+          currentStep={currentStep}
+          onStepClick={setCurrentStep}
+        />
+        <p className="text-sm text-gray-500 text-center">
+          Click a completed step (green) to go back
+        </p>
+      </div>
+    );
+  },
+};
+
+export const WithNavigation: Story = {
+  name: "With next / back buttons",
+  parameters: {
+    docs: {
+      source: {
+        code: `import { Stepper } from "@syscore/ui-library"
+import { Button, Stack } from "@syscore/ui-library"
+import { useState } from "react"
+
+const [currentStep, setCurrentStep] = useState(0)
+
+<Stack gap="xl">
+  <Stepper steps={steps} currentStep={currentStep} />
+
+  <Stack direction="horizontal" justify="between">
+    <Button
+      variant="secondary-light"
+      size="large"
+      disabled={currentStep === 0}
+      onClick={() => setCurrentStep(s => s - 1)}
+    >
+      Back
+    </Button>
+    <Button
+      variant="primary-dark"
+      size="large"
+      disabled={currentStep === steps.length}
+      onClick={() => setCurrentStep(s => s + 1)}
+    >
+      {currentStep === steps.length - 1 ? "Submit" : "Next"}
+    </Button>
+  </Stack>
+</Stack>`,
+      },
+    },
+  },
+  render: () => {
+    const [currentStep, setCurrentStep] = useState(0);
+    const steps = REGISTRATION_STEPS;
+
+    return (
+      <div className="w-full max-w-2xl border border-gray-100 rounded-xl p-8 flex flex-col gap-8">
+        <Stepper steps={steps} currentStep={currentStep} />
+
+        {/* Step content placeholder */}
+        <div className="min-h-[120px] flex items-center justify-center rounded-lg border border-dashed border-gray-200 bg-gray-50">
+          <span className="text-sm text-gray-400">
+            {currentStep < steps.length
+              ? `${steps[currentStep].title} — step content goes here`
+              : "All steps complete!"}
+          </span>
+        </div>
+
+        {/* Navigation */}
+        <div className="flex justify-between">
+          <Button
+            variant="secondary-light"
+            size="large"
+            disabled={currentStep === 0}
+            onClick={() => setCurrentStep((s) => s - 1)}
+          >
+            Back
+          </Button>
+          <Button
+            variant="primary-dark"
+            size="large"
+            disabled={currentStep >= steps.length}
+            onClick={() => setCurrentStep((s) => s + 1)}
+          >
+            {currentStep === steps.length - 1 ? "Submit" : "Next"}
+          </Button>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const CertificationWizard: Story = {
+  name: "WELL certification wizard",
+  parameters: {
+    docs: {
+      source: {
+        code: `import { Stepper } from "@syscore/ui-library"
+
+const certificationSteps = [
+  { title: "Registration", description: "Project & team details" },
+  { title: "Documentation", description: "Upload project files" },
+  { title: "Assessment", description: "WELL scorecard review" },
+  { title: "Verification", description: "On-site performance tests" },
+  { title: "Certification", description: "Award & seal issuance" },
+]
+
+<Stepper
+  steps={certificationSteps}
+  currentStep={2}
+  orientation="vertical"
+  size="lg"
+/>`,
+      },
+    },
+  },
+  render: () => {
+    const certificationSteps = [
+      { title: "Registration", description: "Project & team details" },
+      { title: "Documentation", description: "Upload project files" },
+      { title: "Assessment", description: "WELL scorecard review" },
+      { title: "Verification", description: "On-site performance tests" },
+      { title: "Certification", description: "Award & seal issuance" },
+    ];
+    return (
+      <div className="max-w-xs border border-gray-100 rounded-xl p-6">
+        <Stepper
+          steps={certificationSteps}
+          currentStep={2}
+          orientation="vertical"
+          size="lg"
+        />
+      </div>
+    );
+  },
+};

package/client/ui/Switch.stories.tsx

@@ -4,7 +4,7 @@ import { Label } from "../components/ui/label";
 import { useState } from "react";
 
 const meta = {
-  title: "Review/Switch",
+  title: "Draft/Switch Legacy",
   component: Switch,
   tags: ["autodocs"],
   parameters: {

package/client/ui/SwitchV01/SwitchV01.stories.tsx

@@ -0,0 +1,152 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SwitchV01 } from "../../components/ui/switch-v01";
+
+const directions = ["right", "left"] as const;
+const states = [
+  { label: "Active", checked: true },
+  { label: "Inactive", checked: false },
+] as const;
+
+const meta = {
+  title: "Components/Switch",
+  component: SwitchV01,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: [
+          "Binary toggle. Existing `Components/SwitchLegacy` (`Switch`) is unchanged.",
+          "",
+          "Stories are the two states: **Active** and **Inactive**.",
+          "Use **Controls** for text direction, label, and disabled.",
+          "All Variants shows the full set of **4**.",
+          "",
+          "---",
+          "",
+          "## Import",
+          "",
+          "```tsx",
+          `import { SwitchV01 } from "@syscore/ui-library"`,
+          "```",
+          "",
+          "## How to use",
+          "",
+          "Wraps the Radix switch, so it is a real checkbox-role control: space toggles it,",
+          "it takes focus, and the label is clickable. Leave it uncontrolled with",
+          "`defaultChecked`, or drive it with `checked` and `onCheckedChange`.",
+          "",
+          "```tsx",
+          "const [enabled, setEnabled] = useState(false)",
+          "",
+          "<SwitchV01",
+          `  label="Email alerts"`,
+          `  textDirection="right"`,
+          "  checked={enabled}",
+          "  onCheckedChange={setEnabled}",
+          "/>",
+          "```",
+          "",
+          "| Situation | Use |",
+          "|-----------|-----|",
+          '| Label after the toggle | `textDirection="right"` (default) |',
+          '| Label before the toggle | `textDirection="left"` |',
+          "| Toggle on its own | `showText={false}` |",
+          "| Read-only row | `disabled` |",
+          "",
+          "## Props",
+          "",
+          "| Prop | Values | Default | Effect |",
+          "|------|--------|---------|--------|",
+          "| `checked` | `boolean` | — | Controlled state (stories) |",
+          "| `defaultChecked` | `boolean` | `false` | Uncontrolled initial state |",
+          "| `onCheckedChange` | `(checked: boolean) => void` | — | Fires on toggle |",
+          '| `textDirection` | `"right"` \\| `"left"` | `"right"` | Which side the label sits on |',
+          '| `label` | `ReactNode` | `"Label"` | Overline text beside the toggle |',
+          "| `showText` | `boolean` | `true` | Drop the label and render the toggle alone |",
+          "| `disabled` | `boolean` | `false` | Dims and blocks interaction |",
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    textDirection: { control: "inline-radio", options: [...directions] },
+    label: { control: "text" },
+    showText: { control: "boolean" },
+    disabled: { control: "boolean" },
+    checked: { table: { disable: true } },
+  },
+  args: {
+    textDirection: "right",
+    label: "Label",
+    showText: true,
+    disabled: false,
+  },
+} satisfies Meta<typeof SwitchV01>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Active: Story = {
+  args: { checked: true },
+};
+
+export const Inactive: Story = {
+  args: { checked: false },
+};
+
+export const AllVariants: Story = {
+  name: "All Variants",
+  render: (args) => (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "minmax(0, 1fr)",
+        justifyItems: "center",
+        gap: 40,
+        width: "100%",
+      }}
+    >
+      {directions.map((textDirection) => (
+        <section key={textDirection} style={{ width: "100%", maxWidth: 460 }}>
+          <h3
+            style={{
+              margin: "0 0 16px",
+              fontSize: 14,
+              fontWeight: 600,
+              textTransform: "uppercase",
+              letterSpacing: 0.5,
+              color: "#52545d",
+              textAlign: "center",
+            }}
+          >
+            Text {textDirection}
+          </h3>
+          <div
+            style={{
+              display: "grid",
+              gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
+              maxWidth: 416,
+              margin: "0 auto",
+              gap: 16,
+              justifyItems: "center",
+            }}
+          >
+            {states.map((state) => (
+              <SwitchV01
+                key={`${textDirection}-${state.label}`}
+                {...args}
+                textDirection={textDirection}
+                checked={state.checked}
+              />
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  ),
+  argTypes: {
+    textDirection: { table: { disable: true } },
+  },
+  parameters: { layout: "padded" },
+};