@syscore/ui-library 1.25.0 → 2.0.0

package/client/ui/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,293 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { DatePicker, DateRangePicker, type DateRange } from "../../components/ui/date-picker";
+
+const meta = {
+  title: "UI/DatePicker",
+  component: DatePicker,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: [
+          "A text input that opens a Calendar popover when clicked. Supports single date and date range selection.",
+          "",
+          "**The difference from Calendar:**",
+          "- `Calendar` — always visible grid, sits on the page",
+          "- `DatePicker` — input field that pops open a calendar, closes after selection",
+          "",
+          "**Import:**",
+          "```tsx",
+          `import { DatePicker, DateRangePicker } from "@syscore/ui-library"`,
+          "```",
+          "",
+          "**Key props:**",
+          "",
+          "| Prop | Type | Default | Effect |",
+          "|------|------|---------|--------|",
+          "| `value` | `Date` | — | Controlled selected date |",
+          "| `onChange` | `(date?: Date) => void` | — | Called when date is picked |",
+          "| `placeholder` | string | `\"Select date\"` | Input placeholder text |",
+          "| `dateFormat` | string | `\"MMM d, yyyy\"` | Display format (date-fns) |",
+          "| `fromDate` | `Date` | — | Disable dates before this |",
+          "| `toDate` | `Date` | — | Disable dates after this |",
+          "| `disabled` | boolean | `false` | Disable the input |",
+        ].join("\n"),
+      },
+    },
+  },
+} satisfies Meta<typeof DatePicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `import { DatePicker } from "@syscore/ui-library"
+import { useState } from "react"
+
+const [date, setDate] = useState<Date>()
+
+<DatePicker
+  value={date}
+  onChange={setDate}
+  placeholder="Select date"
+/>`,
+      },
+    },
+  },
+  render: () => {
+    const [date, setDate] = useState<Date>();
+    return (
+      <div className="max-w-xs">
+        <DatePicker
+          value={date}
+          onChange={setDate}
+          placeholder="Select date"
+        />
+        {date && (
+          <p className="mt-2 text-sm text-gray-500">Selected: {date.toDateString()}</p>
+        )}
+      </div>
+    );
+  },
+};
+
+export const WithDefaultValue: Story = {
+  name: "With default value",
+  parameters: {
+    docs: {
+      source: {
+        code: `import { DatePicker } from "@syscore/ui-library"
+import { useState } from "react"
+
+const [date, setDate] = useState<Date>(new Date())
+
+<DatePicker value={date} onChange={setDate} />`,
+      },
+    },
+  },
+  render: () => {
+    const [date, setDate] = useState<Date>(new Date());
+    return (
+      <div className="max-w-xs">
+        <DatePicker value={date} onChange={setDate} />
+      </div>
+    );
+  },
+};
+
+export const WithDateLimits: Story = {
+  name: "With date limits",
+  parameters: {
+    docs: {
+      source: {
+        code: `import { DatePicker } from "@syscore/ui-library"
+import { useState } from "react"
+
+// Only allow dates from today onwards
+const [date, setDate] = useState<Date>()
+const today = new Date()
+
+<DatePicker
+  value={date}
+  onChange={setDate}
+  fromDate={today}
+  placeholder="Select future date"
+/>`,
+      },
+    },
+  },
+  render: () => {
+    const [date, setDate] = useState<Date>();
+    const today = new Date();
+    return (
+      <div className="max-w-xs">
+        <DatePicker
+          value={date}
+          onChange={setDate}
+          fromDate={today}
+          placeholder="Select future date"
+        />
+        <p className="mt-2 text-xs text-gray-400">Dates before today are disabled</p>
+      </div>
+    );
+  },
+};
+
+export const CustomFormat: Story = {
+  name: "Custom date format",
+  parameters: {
+    docs: {
+      source: {
+        code: `import { DatePicker } from "@syscore/ui-library"
+
+// Uses date-fns format tokens
+<DatePicker
+  value={date}
+  onChange={setDate}
+  dateFormat="dd/MM/yyyy"
+/>`,
+      },
+    },
+  },
+  render: () => {
+    const [date, setDate] = useState<Date>(new Date());
+    return (
+      <div className="flex flex-col gap-4 max-w-xs">
+        <div className="flex flex-col gap-1">
+          <span className="text-xs text-gray-500">MMM d, yyyy (default)</span>
+          <DatePicker value={date} onChange={setDate} dateFormat="MMM d, yyyy" />
+        </div>
+        <div className="flex flex-col gap-1">
+          <span className="text-xs text-gray-500">dd/MM/yyyy</span>
+          <DatePicker value={date} onChange={setDate} dateFormat="dd/MM/yyyy" />
+        </div>
+        <div className="flex flex-col gap-1">
+          <span className="text-xs text-gray-500">MMMM do, yyyy</span>
+          <DatePicker value={date} onChange={setDate} dateFormat="MMMM do, yyyy" />
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `import { DatePicker } from "@syscore/ui-library"
+
+<DatePicker disabled placeholder="Not available" />`,
+      },
+    },
+  },
+  render: () => (
+    <div className="max-w-xs">
+      <DatePicker disabled placeholder="Not available" />
+    </div>
+  ),
+};
+
+export const RangePicker: Story = {
+  name: "Date range picker",
+  parameters: {
+    docs: {
+      source: {
+        code: `import { DateRangePicker, type DateRange } from "@syscore/ui-library"
+import { useState } from "react"
+
+const [range, setRange] = useState<DateRange>()
+
+<DateRangePicker
+  value={range}
+  onChange={setRange}
+  placeholder="Select date range"
+/>`,
+      },
+    },
+  },
+  render: () => {
+    const [range, setRange] = useState<DateRange>();
+    return (
+      <div className="max-w-sm">
+        <DateRangePicker
+          value={range}
+          onChange={setRange}
+          placeholder="Select date range"
+        />
+        {range?.from && (
+          <p className="mt-2 text-sm text-gray-500">
+            {range.from.toDateString()} {range.to ? `→ ${range.to.toDateString()}` : "→ pick end date"}
+          </p>
+        )}
+      </div>
+    );
+  },
+};
+
+export const InForm: Story = {
+  name: "Inside a form",
+  parameters: {
+    docs: {
+      source: {
+        code: `import { DatePicker, DateRangePicker } from "@syscore/ui-library"
+import { Stack, Text, Button } from "@syscore/ui-library"
+
+<Stack gap={6}>
+  <Stack gap={2}>
+    <Text variant="overline-small">Payment date</Text>
+    <DatePicker
+      value={paymentDate}
+      onChange={setPaymentDate}
+      placeholder="Select date"
+    />
+  </Stack>
+
+  <Stack gap={2}>
+    <Text variant="overline-small">Project period</Text>
+    <DateRangePicker
+      value={period}
+      onChange={setPeriod}
+      placeholder="Start — End"
+    />
+  </Stack>
+
+  <Button variant="primary-dark" size="large">Save</Button>
+</Stack>`,
+      },
+    },
+  },
+  render: () => {
+    const [paymentDate, setPaymentDate] = useState<Date>();
+    const [period, setPeriod] = useState<DateRange>();
+    return (
+      <div className="max-w-sm 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">Payment date</span>
+            <DatePicker
+              value={paymentDate}
+              onChange={setPaymentDate}
+              placeholder="Select date"
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <span className="text-xs font-semibold uppercase tracking-wider text-gray-500">Project period</span>
+            <DateRangePicker
+              value={period}
+              onChange={setPeriod}
+              placeholder="Start — End"
+            />
+          </div>
+          <button className="w-full bg-gray-900 text-white rounded-lg py-2.5 text-sm font-medium">
+            Save
+          </button>
+        </div>
+      </div>
+    );
+  },
+};

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: "UI/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>
+        </>
+      }
+    />
+  ),
+};