@syscore/ui-library 1.27.3 → 2.0.0

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: "UI/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={6}>
+  <Stack gap={2}>
+    <Text variant="overline-small">Project name</Text>
+    <Input placeholder="My WELL project" />
+  </Stack>
+
+  <Stack gap={2}>
+    <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: "UI/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>
+  ),
+};