@syscore/ui-library 1.27.3 → 2.0.0

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: "UI/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={6}>
+  <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/SystemBar/system-bar.stories.tsx

@@ -0,0 +1,179 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  SystemBar,
+  SystemBarSpacer,
+  SystemBarIcon,
+  SystemBarAction,
+} from "../../components/ui/system-bar";
+
+// ─── Inline SVG icons ─────────────────────────────────────────────────────────
+
+function IconWifi({ strength = 4 }: { strength?: 1 | 2 | 3 | 4 }) {
+  // Simple wifi icon — bars filled based on strength
+  const bars = [1, 2, 3, 4];
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      {strength >= 1 && <path d="M1 9l2 2c5-5 13-5 18 0l2-2C16.93 2.93 7.08 2.93 1 9z" opacity={strength === 1 ? 1 : 0.4} />}
+      {strength >= 2 && <path d="M5 13l2 2a7 7 0 0 1 10 0l2-2C15.14 9.14 8.87 9.14 5 13z" opacity={strength === 2 ? 1 : 0.6} />}
+      {strength >= 3 && <path d="M9 17l3 3 3-3a4.237 4.237 0 0 0-6 0z" />}
+      <circle cx="12" cy="20" r="1" />
+    </svg>
+  );
+}
+
+function IconSignal() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <rect x="2" y="16" width="3" height="6" rx="0.5" />
+      <rect x="7" y="12" width="3" height="10" rx="0.5" />
+      <rect x="12" y="8" width="3" height="14" rx="0.5" />
+      <rect x="17" y="4" width="3" height="18" rx="0.5" opacity="0.3" />
+    </svg>
+  );
+}
+
+function IconBattery() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <rect x="2" y="7" width="18" height="11" rx="2" stroke="currentColor" strokeWidth="1.5" fill="none" />
+      <rect x="3.5" y="8.5" width="12" height="8" rx="1" />
+      <path d="M20 10h2v5h-2z" />
+    </svg>
+  );
+}
+
+function IconMessage() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+    </svg>
+  );
+}
+
+function IconMinus() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" fill="none" aria-hidden="true">
+      <line x1="5" y1="12" x2="19" y2="12" />
+    </svg>
+  );
+}
+
+function IconMaximize() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" fill="none" aria-hidden="true">
+      <rect x="3" y="3" width="18" height="18" rx="1" />
+    </svg>
+  );
+}
+
+function IconClose() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" fill="none" aria-hidden="true">
+      <line x1="18" y1="6" x2="6" y2="18" />
+      <line x1="6" y1="6" x2="18" y2="18" />
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+const meta = {
+  title: "UI/SystemBar",
+  component: SystemBar,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  argTypes: {
+    color: { control: "color" },
+    window: { control: "boolean" },
+  },
+} satisfies Meta<typeof SystemBar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// ─── Default ─────────────────────────────────────────────────────────────────
+// Android-style status bar with wifi, signal, battery and a clock.
+
+export const Default: Story = {
+  render: () => (
+    <SystemBar>
+      <SystemBarIcon>
+        <IconWifi strength={4} />
+      </SystemBarIcon>
+      <SystemBarIcon>
+        <IconSignal />
+      </SystemBarIcon>
+      <SystemBarIcon>
+        <IconBattery />
+      </SystemBarIcon>
+      <SystemBarSpacer />
+      <span className="system-bar-time">3:13 PM</span>
+    </SystemBar>
+  ),
+};
+
+// ─── Colors ───────────────────────────────────────────────────────────────────
+// Three bars with different background colors — text/icons auto-switch to white.
+
+export const Colors: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+      {/* Primary blue */}
+      <SystemBar color="#0284c7">
+        <SystemBarIcon><IconWifi strength={4} /></SystemBarIcon>
+        <SystemBarIcon><IconSignal /></SystemBarIcon>
+        <SystemBarIcon><IconBattery /></SystemBarIcon>
+        <SystemBarSpacer />
+        <span className="system-bar-time">08:30</span>
+      </SystemBar>
+
+      {/* Red */}
+      <SystemBar color="#f87171">
+        <SystemBarIcon><IconWifi strength={2} /></SystemBarIcon>
+        <SystemBarIcon><IconSignal /></SystemBarIcon>
+        <SystemBarIcon><IconBattery /></SystemBarIcon>
+        <SystemBarSpacer />
+        <span className="system-bar-time">18:30</span>
+      </SystemBar>
+
+      {/* Indigo */}
+      <SystemBar color="#3730a3">
+        <SystemBarIcon><IconWifi strength={3} /></SystemBarIcon>
+        <SystemBarIcon><IconSignal /></SystemBarIcon>
+        <SystemBarIcon><IconBattery /></SystemBarIcon>
+        <SystemBarSpacer />
+        <span className="system-bar-time">13:24</span>
+      </SystemBar>
+    </div>
+  ),
+};
+
+// ─── Window ───────────────────────────────────────────────────────────────────
+// Desktop-style title bar: message on the left, window controls on the right.
+
+export const Window: Story = {
+  render: () => (
+    <SystemBar window>
+      <SystemBarIcon>
+        <IconMessage />
+      </SystemBarIcon>
+      <span className="system-bar-label">10 unread messages</span>
+      <SystemBarSpacer />
+      <SystemBarAction aria-label="Minimise window">
+        <IconMinus />
+      </SystemBarAction>
+      <SystemBarAction aria-label="Maximise window">
+        <IconMaximize />
+      </SystemBarAction>
+      <SystemBarAction
+        aria-label="Close window"
+        className="system-bar-action--close"
+      >
+        <IconClose />
+      </SystemBarAction>
+    </SystemBar>
+  ),
+};