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

package/client/ui/EmptyState/empty-state.stories.tsx

@@ -0,0 +1,251 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EmptyState, EmptyStateAction } from "../../components/ui/empty-state";
+
+// ─── Inline SVG icons ─────────────────────────────────────────────────────────
+
+function IconSearch() {
+  return (
+    <svg
+      width="64"
+      height="64"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="11" cy="11" r="8" />
+      <line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+  );
+}
+
+function IconCheckCircle() {
+  return (
+    <svg
+      width="64"
+      height="64"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+      <polyline points="22 4 12 14.01 9 11.01" />
+    </svg>
+  );
+}
+
+function IconFileText() {
+  return (
+    <svg
+      width="64"
+      height="64"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+      <polyline points="14 2 14 8 20 8" />
+      <line x1="16" y1="13" x2="8" y2="13" />
+      <line x1="16" y1="17" x2="8" y2="17" />
+      <polyline points="10 9 9 9 8 9" />
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+const meta = {
+  title: "Draft/EmptyState",
+  component: EmptyState,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {
+    headline: { control: "text" },
+    title: { control: "text" },
+    subtitle: { control: "text" },
+    text: { control: "text" },
+    image: { control: "text" },
+    actionText: { control: "text" },
+  },
+} satisfies Meta<typeof EmptyState>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ─── Default ─────────────────────────────────────────────────────────────────
+// Simplest form — headline + title + body text only, no media.
+
+export const Default: Story = {
+  render: () => (
+    <EmptyState
+      headline="No Messages Yet"
+      title="Check back later."
+      text="You haven't received any messages yet. When you do, they'll appear here."
+    />
+  ),
+};
+
+// ─── Content ─────────────────────────────────────────────────────────────────
+// Props: headline, title, subtitle, text.
+
+export const Content: Story = {
+  render: () => (
+    <EmptyState
+      headline="Whoops, 404"
+      title="Page not found"
+      subtitle="The requested resource couldn't be located."
+      text="The page you were looking for does not exist. Please check the URL or go back to the home page."
+    />
+  ),
+};
+
+// ─── Media — Icon ─────────────────────────────────────────────────────────────
+// Pass a React node to the `icon` prop to render it in the media area.
+
+export const MediaIcon: Story = {
+  render: () => (
+    <EmptyState
+      icon={<IconSearch />}
+      title="We couldn't find a match."
+      text="Try adjusting your search terms or filters. Sometimes less specific terms or broader queries can help you find what you're looking for."
+    />
+  ),
+};
+
+// ─── Media — Image ────────────────────────────────────────────────────────────
+// Pass a URL to the `image` prop for an illustration.
+
+export const MediaImage: Story = {
+  render: () => (
+    <EmptyState
+      image="https://cdn.vuetifyjs.com/docs/images/components/v-empty-state/teamwork.png"
+      imageAlt="Two people working together"
+      title="Manage your inventory transfers"
+      text="Track and receive your incoming inventory from suppliers"
+    />
+  ),
+};
+
+// ─── Actions ─────────────────────────────────────────────────────────────────
+// Use `actionText` + `onClickAction` for a single auto-rendered CTA button.
+
+export const Actions: Story = {
+  render: () => (
+    <EmptyState
+      image="https://cdn.vuetifyjs.com/docs/images/components/v-empty-state/connection.svg"
+      imageAlt="Connection error illustration"
+      title="Something Went Wrong"
+      text="There might be a problem with your connection or our servers. Please check your internet connection or try again later. We appreciate your patience."
+      actionText="Retry Request"
+      onClickAction={() => alert("Retrying…")}
+    />
+  ),
+};
+
+// ─── Slot: Default ────────────────────────────────────────────────────────────
+// Anything passed as children renders in the default slot below the text.
+
+export const SlotDefault: Story = {
+  render: () => (
+    <EmptyState
+      headline="Welcome,"
+      icon={<IconFileText />}
+      title="What would you like to do today?"
+    >
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+          gap: "1rem",
+          marginTop: "1.5rem",
+          width: "100%",
+        }}
+      >
+        {[
+          { title: "Learn More", description: "Start with our dedicated feature guides" },
+          { title: "Try the Playground", description: "Test things out interactively" },
+          { title: "Create a Bin", description: "Create a new bin to store your code" },
+          { title: "Report a Bug", description: "File a bug report for Vuetify" },
+        ].map((card) => (
+          <div key={card.title} className="empty-state-card">
+            <div className="empty-state-card-title">{card.title}</div>
+            <div className="empty-state-card-desc">{card.description}</div>
+          </div>
+        ))}
+      </div>
+    </EmptyState>
+  ),
+};
+
+// ─── Slot: Media ─────────────────────────────────────────────────────────────
+// `mediaSlot` fully replaces the media area.
+
+export const SlotMedia: Story = {
+  render: () => (
+    <EmptyState
+      mediaSlot={
+        <span style={{ color: "var(--color-gray-400, #9ca3af)", display: "flex" }}>
+          <IconCheckCircle />
+        </span>
+      }
+      headlineSlot={
+        <div style={{ fontSize: "2rem", fontWeight: 700, color: "var(--color-gray-700, #3d3f47)" }}>
+          All Done For Now!
+        </div>
+      }
+      titleSlot={
+        <div style={{ fontSize: "1.25rem", fontWeight: 600 }}>
+          You're all caught up.
+        </div>
+      }
+      textSlot={
+        <div style={{ color: "var(--color-gray-500, #71747d)", fontSize: "0.875rem" }}>
+          Great job on completing all your tasks! This might be a good time to
+          relax or consider planning your next set of goals. If you think of
+          something new, just hit the button below to add a new task.
+        </div>
+      }
+    />
+  ),
+};
+
+// ─── Slot: Actions ────────────────────────────────────────────────────────────
+// `actionsSlot` lets you compose multiple buttons in the actions area.
+
+export const SlotActions: Story = {
+  render: () => (
+    <EmptyState
+      image="https://cdn.vuetifyjs.com/docs/images/components/v-empty-state/teamwork.png"
+      imageAlt="Teamwork illustration"
+      titleSlot={
+        <div style={{ fontSize: "1rem", fontWeight: 600, marginTop: "2rem" }}>
+          Manage your inventory transfers
+        </div>
+      }
+      textSlot={
+        <div style={{ fontSize: "0.875rem", color: "var(--color-gray-500, #71747d)" }}>
+          Track and receive your incoming inventory from suppliers
+        </div>
+      }
+      actionsSlot={
+        <>
+          <EmptyStateAction variant="outline">Learn more</EmptyStateAction>
+          <EmptyStateAction variant="primary">Add transfer</EmptyStateAction>
+        </>
+      }
+    />
+  ),
+};

package/client/ui/FileUpload/FileUpload.stories.tsx

@@ -0,0 +1,218 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FileUpload } from "../../components/ui/file-upload";
+
+const meta = {
+  title: "Components/FileUpload",
+  component: FileUpload,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: [
+          "A drag-and-drop file upload zone with file list, size validation, and error states.",
+          "",
+          "**Import:**",
+          "```tsx",
+          `import { FileUpload } from "@syscore/ui-library"`,
+          "```",
+          "",
+          "**Key props:**",
+          "",
+          "| Prop | Type | Default | Effect |",
+          "|------|------|---------|--------|",
+          "| `accept` | string | — | Allowed file types e.g. `\".pdf,.png\"` |",
+          "| `multiple` | boolean | `false` | Allow selecting multiple files |",
+          "| `maxSize` | number (bytes) | — | Reject files larger than this |",
+          "| `maxFiles` | number | — | Cap the number of accepted files |",
+          "| `variant` | `\"default\"` \\| `\"compact\"` | `\"default\"` | Full zone vs inline row |",
+          "| `disabled` | boolean | `false` | Disable all interaction |",
+          "| `onFilesChange` | `(files: File[]) => void` | — | Called whenever the file list changes |",
+        ].join("\n"),
+      },
+    },
+  },
+} satisfies Meta<typeof FileUpload>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `import { FileUpload } from "@syscore/ui-library"
+
+<FileUpload
+  accept=".pdf,.png,.jpg"
+  maxSize={5 * 1024 * 1024}
+  onFilesChange={(files) => console.log(files)}
+/>`,
+      },
+    },
+  },
+  render: () => (
+    <div className="max-w-lg">
+      <FileUpload
+        accept=".pdf,.png,.jpg"
+        maxSize={5 * 1024 * 1024}
+        onFilesChange={(files) => console.log("Files:", files)}
+      />
+    </div>
+  ),
+};
+
+export const Multiple: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `import { FileUpload } from "@syscore/ui-library"
+
+<FileUpload
+  multiple
+  maxFiles={5}
+  accept=".pdf,.docx,.xlsx"
+  maxSize={10 * 1024 * 1024}
+  onFilesChange={(files) => console.log(files)}
+/>`,
+      },
+    },
+  },
+  render: () => (
+    <div className="max-w-lg">
+      <FileUpload
+        multiple
+        maxFiles={5}
+        accept=".pdf,.docx,.xlsx"
+        maxSize={10 * 1024 * 1024}
+        onFilesChange={(files) => console.log("Files:", files)}
+      />
+    </div>
+  ),
+};
+
+export const Compact: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `import { FileUpload } from "@syscore/ui-library"
+
+{/* Inline row layout — fits inside a form field row */}
+<FileUpload
+  variant="compact"
+  accept=".pdf"
+  maxSize={2 * 1024 * 1024}
+  onFilesChange={(files) => console.log(files)}
+/>`,
+      },
+    },
+  },
+  render: () => (
+    <div className="max-w-lg">
+      <FileUpload
+        variant="compact"
+        accept=".pdf"
+        maxSize={2 * 1024 * 1024}
+        onFilesChange={(files) => console.log("Files:", files)}
+      />
+    </div>
+  ),
+};
+
+export const ImagesOnly: Story = {
+  name: "Images only",
+  parameters: {
+    docs: {
+      source: {
+        code: `import { FileUpload } from "@syscore/ui-library"
+
+<FileUpload
+  accept="image/*"
+  multiple
+  maxSize={3 * 1024 * 1024}
+  onFilesChange={(files) => console.log(files)}
+/>`,
+      },
+    },
+  },
+  render: () => (
+    <div className="max-w-lg">
+      <FileUpload
+        accept="image/*"
+        multiple
+        maxSize={3 * 1024 * 1024}
+        onFilesChange={(files) => console.log("Files:", files)}
+      />
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `import { FileUpload } from "@syscore/ui-library"
+
+<FileUpload disabled />`,
+      },
+    },
+  },
+  render: () => (
+    <div className="max-w-lg">
+      <FileUpload disabled />
+    </div>
+  ),
+};
+
+export const InForm: Story = {
+  name: "Inside a form",
+  parameters: {
+    docs: {
+      source: {
+        code: `import { FileUpload } from "@syscore/ui-library"
+import { Stack, Text, Button } from "@syscore/ui-library"
+
+<Stack gap="xl">
+  <Stack gap="xs">
+    <Text variant="overline-small">Project name</Text>
+    <Input placeholder="My WELL project" />
+  </Stack>
+
+  <Stack gap="xs">
+    <Text variant="overline-small">Supporting documents</Text>
+    <FileUpload
+      multiple
+      maxFiles={3}
+      accept=".pdf,.docx"
+      maxSize={10 * 1024 * 1024}
+      onFilesChange={(files) => setDocuments(files)}
+    />
+  </Stack>
+
+  <Button variant="primary-dark" size="large">Submit</Button>
+</Stack>`,
+      },
+    },
+  },
+  render: () => (
+    <div className="max-w-md border border-gray-100 rounded-xl p-6">
+      <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-2">
+          <span className="text-xs font-semibold uppercase tracking-wider text-gray-500">Project name</span>
+          <input className="border border-gray-200 rounded-md px-3 py-2 text-sm w-full" placeholder="My WELL project" />
+        </div>
+        <div className="flex flex-col gap-2">
+          <span className="text-xs font-semibold uppercase tracking-wider text-gray-500">Supporting documents</span>
+          <FileUpload
+            multiple
+            maxFiles={3}
+            accept=".pdf,.docx"
+            maxSize={10 * 1024 * 1024}
+            onFilesChange={(files) => console.log("Files:", files)}
+          />
+        </div>
+        <button className="w-full bg-gray-900 text-white rounded-lg py-2.5 text-sm font-medium">Submit</button>
+      </div>
+    </div>
+  ),
+};

package/client/ui/Footer/footer.stories.tsx

@@ -0,0 +1,194 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Footer,
+  FooterRow,
+  FooterLinks,
+  FooterLink,
+  FooterIconButton,
+  FooterDivider,
+  FooterCopyright,
+  FooterBand,
+} from "../../components/ui/footer";
+
+// ─── Social icons (inline SVGs — no extra dep needed) ─────────────────────
+
+function IconFacebook() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
+    </svg>
+  );
+}
+function IconTwitter() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
+    </svg>
+  );
+}
+function IconLinkedIn() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
+      <rect x="2" y="9" width="4" height="12" />
+      <circle cx="4" cy="4" r="2" />
+    </svg>
+  );
+}
+function IconInstagram() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
+      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
+      <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
+    </svg>
+  );
+}
+
+const SOCIAL_ICONS = [
+  { icon: <IconFacebook />, label: "Facebook" },
+  { icon: <IconTwitter />, label: "Twitter" },
+  { icon: <IconLinkedIn />, label: "LinkedIn" },
+  { icon: <IconInstagram />, label: "Instagram" },
+];
+
+const NAV_LINKS = ["Home", "About Us", "Team", "Services", "Blog", "Contact Us"];
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+const meta = {
+  title: "Draft/Footer",
+  component: Footer,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  argTypes: {
+    bordered: { control: "boolean" },
+    rounded: { control: "boolean" },
+    elevated: { control: "boolean" },
+    color: { control: "color" },
+  },
+} satisfies Meta<typeof Footer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// ─── Default ─────────────────────────────────────────────────────────────────
+// Simplest form — just a container with a copyright line.
+
+export const Default: Story = {
+  render: () => (
+    <Footer>
+      <FooterCopyright />
+    </Footer>
+  ),
+};
+
+// ─── Bordered ────────────────────────────────────────────────────────────────
+// Adds a visible top border.
+
+export const Bordered: Story = {
+  render: () => (
+    <Footer bordered>
+      <FooterCopyright />
+    </Footer>
+  ),
+};
+
+// ─── Company Footer ───────────────────────────────────────────────────────────
+// Nav links + copyright. Matches the Vuetify "company footer" example.
+
+export const CompanyFooter: Story = {
+  render: () => (
+    <Footer>
+      <FooterLinks>
+        {NAV_LINKS.map((link) => (
+          <FooterLink key={link} href="#">
+            {link}
+          </FooterLink>
+        ))}
+      </FooterLinks>
+      <FooterCopyright />
+    </Footer>
+  ),
+};
+
+// ─── Indigo Footer ────────────────────────────────────────────────────────────
+// Social icons + paragraph + copyright on an indigo background.
+// Uses --color-indigo-300 from the global token system.
+
+export const IndigoFooter: Story = {
+  render: () => (
+    <Footer
+      color="var(--color-indigo-300, #a5b4fc)"
+      className="footer--indigo"
+    >
+      {/* Social icon row */}
+      <FooterRow className="footer-row--center">
+        {SOCIAL_ICONS.map(({ icon, label }) => (
+          <FooterIconButton key={label} aria-label={label}>
+            {icon}
+          </FooterIconButton>
+        ))}
+      </FooterRow>
+
+      {/* Divider */}
+      <FooterDivider width="50px" className="footer-divider--thick" />
+
+      {/* Body copy */}
+      <p className="footer-body-text">
+        Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet.
+        Mauris cursus commodo interdum. Praesent ut risus eget metus luctus
+        accumsan id ultrices nunc. Sed at orci sed massa consectetur dignissim a
+        sit amet dui. Duis commodo vitae velit et faucibus. Morbi vehicula
+        lacinia malesuada. Nulla placerat augue vel ipsum ultrices, cursus
+        iaculis dui sollicitudin.
+      </p>
+
+      {/* Full-width divider */}
+      <FooterDivider />
+
+      {/* Copyright */}
+      <FooterCopyright />
+    </Footer>
+  ),
+};
+
+// ─── Teal Footer ─────────────────────────────────────────────────────────────
+// Two-section footer: top row with tagline + social icons,
+// bottom band with copyright. Rounded corners.
+
+export const TealFooter: Story = {
+  render: () => (
+    <Footer
+      color="var(--color-cyan-800, #0f748a)"
+      rounded
+      className="footer--teal"
+    >
+      {/* Top row */}
+      <FooterRow className="footer-row--space-between footer-row--padded">
+        <strong className="footer-tagline">
+          Get connected with us on social networks!
+        </strong>
+        <div className="footer-row footer-row--gap">
+          {SOCIAL_ICONS.map(({ icon, label }) => (
+            <FooterIconButton
+              key={label}
+              aria-label={label}
+              className="footer-icon-btn--small footer-icon-btn--plain"
+            >
+              {icon}
+            </FooterIconButton>
+          ))}
+        </div>
+      </FooterRow>
+
+      {/* Bottom band */}
+      <FooterBand>
+        <FooterCopyright />
+      </FooterBand>
+    </Footer>
+  ),
+};

package/client/ui/Form/Form.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 type Story = StoryObj;
 
 const meta = {
-  title: "UI/Form",
+  title: "Draft/Form",
   tags: ["autodocs"],
   parameters: {
     layout: "padded",

package/client/ui/Hero.stories.tsx

@@ -5,7 +5,7 @@ import { HeroSection } from "../components/ui/hero-section";
 import { motion } from "motion/react";
 
 const meta = {
-    title: "Review/Hero",
+    title: "Components/Hero",
     component: HeroSection,
     tags: ["autodocs"],
     parameters: {

package/client/ui/HoverCard/HoverCard.stories.tsx

@@ -6,7 +6,7 @@ import {
 } from "../../components/ui/hover-card";
 
 const meta = {
-  title: "UI/HoverCard",
+  title: "Draft/HoverCard",
   component: HoverCard,
   tags: ["autodocs"],
   parameters: {