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

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: "Components/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="xl">
+  <Stack gap="xs">
+    <Text variant="overline-small">Payment date</Text>
+    <DatePicker
+      value={paymentDate}
+      onChange={setPaymentDate}
+      placeholder="Select date"
+    />
+  </Stack>
+
+  <Stack gap="xs">
+    <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/Dialog.stories.tsx

@@ -37,7 +37,7 @@ function useIsMobile(breakpoint = 640) {
 }
 
 const meta = {
-  title: "Review/Dialog",
+  title: "Components/Dialog",
   component: Dialog,
   tags: ["autodocs"],
   parameters: {

package/client/ui/Drawer/Drawer.stories.tsx

@@ -13,7 +13,7 @@ import { Button } from "../../components/ui/button";
 import { useState } from "react";
 
 const meta = {
-  title: "UI/Drawer",
+  title: "Draft/Drawer",
   component: Drawer,
   tags: ["autodocs"],
   parameters: {

package/client/ui/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,205 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Dropdown } from "../../components/ui/dropdown";
+
+const items = [
+  { value: "item-1", label: "Item" },
+  { value: "item-2", label: "Item" },
+  { value: "item-3", label: "Item" },
+];
+
+const typeaheadItems = [
+  { value: "entry-typeahead", label: "Entrytypeahead" },
+  { value: "entry-unmatch-1", label: "Entryunmatch" },
+  { value: "entry-unmatch-2", label: "Entryunmatch" },
+];
+
+const autoSuggestItems = [
+  {
+    value: "create",
+    label: "Appendix I: Environmental",
+    actionLabel: "Create new",
+  },
+  {
+    value: "680924a0ffb5a0bb2880e677",
+    label: "Appendix I: Environmental satisfaction survey criteria",
+    secondary: "680924a0ffb5a0bb2880e677",
+  },
+];
+
+const meta = {
+  title: "Components/Dropdown",
+  component: Dropdown,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: [
+          "Labeled combobox.",
+          "",
+          "States: **Default**, **Focus**, **Active** (typeahead), **Filled**,",
+          "**Auto suggest**, and **Error**. Open the menu by focusing the field,",
+          "or lock a state with `open` / `error` in Controls.",
+          "",
+          "---",
+          "",
+          "## Import",
+          "",
+          "```tsx",
+          `import { Dropdown } from "@syscore/ui-library"`,
+          "```",
+          "",
+          "## How to use",
+          "",
+          "Pass `options` and read the selected value from `onValueChange`.",
+          "This is a labeled combobox, not a menu of actions — use `DropdownMenu` for that.",
+          "",
+          "```tsx",
+          "const [value, setValue] = useState<string>()",
+          "",
+          "<Dropdown",
+          `  label="Theme"`,
+          `  placeholder="Choose a theme"`,
+          "  value={value}",
+          "  onValueChange={setValue}",
+          "  options={[",
+          `    { value: "community", label: "Community" },`,
+          `    { value: "movement", label: "Movement" },`,
+          "  ]}",
+          "/>",
+          "```",
+          "",
+          "Two-line suggestions use `secondary`. A trailing action uses `actionLabel`.",
+          "Validation uses `error` and `errorMessage`.",
+          "",
+          "```tsx",
+          "<Dropdown",
+          `  label="Appendix"`,
+          "  error={!value}",
+          `  errorMessage="Choose an option"`,
+          "  options={[",
+          "    {",
+          `      value: "create",`,
+          `      label: "Appendix I: Environmental",`,
+          `      actionLabel: "Create new",`,
+          "    },",
+          "    {",
+          `      value: "6809",`,
+          `      label: "Appendix I: Environmental satisfaction survey criteria",`,
+          `      secondary: "680924a0ffb5a0bb2880e677",`,
+          "    },",
+          "  ]}",
+          "/>",
+          "```",
+          "",
+          "## Props",
+          "",
+          "| Prop | Values | Default | Effect |",
+          "|------|--------|---------|--------|",
+          "| `label` | `string` | `\"Label\"` | Field label |",
+          "| `placeholder` | `string` | `\"Placeholder\"` | Empty-state text |",
+          "| `options` | `{ value, label, secondary?, actionLabel? }[]` | `[]` | Menu items |",
+          "| `value` / `defaultValue` | `string` | — | Selected option |",
+          "| `onValueChange` | `(value: string) => void` | — | Selection handler |",
+          "| `error` | `boolean` | `false` | Error chrome |",
+          "| `errorMessage` | `string` | `\"Choose an option\"` | Helper under the field |",
+          "| `disabled` | `boolean` | `false` | Blocks input |",
+          "| `open` / `defaultOpen` | `boolean` | — | Controlled / initial menu |",
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    label: { control: "text" },
+    placeholder: { control: "text" },
+    error: { control: "boolean" },
+    errorMessage: { control: "text" },
+    disabled: { control: "boolean" },
+    open: { control: "boolean" },
+  },
+  args: {
+    label: "Label",
+    placeholder: "Placeholder",
+    options: items,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ minHeight: 280, width: 344 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Dropdown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Focus: Story = {
+  args: { open: true },
+};
+
+export const Active: Story = {
+  args: {
+    open: true,
+    defaultInputValue: "Entry",
+    options: typeaheadItems,
+  },
+};
+
+export const Filled: Story = {
+  args: {
+    defaultValue: "item-1",
+    options: [{ value: "item-1", label: "Entry" }],
+  },
+};
+
+export const AutoSuggest: Story = {
+  args: {
+    open: true,
+    defaultInputValue: "Appendix I: Environmental",
+    options: autoSuggestItems,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    error: true,
+    errorMessage: "Choose an option",
+  },
+};
+
+const tags = [
+  { id: "t1", label: "Tag", dot: true, changeType: "mild" as const },
+  { id: "t2", label: "Tag", dot: true, changeType: "medium" as const },
+  { id: "t3", label: "Tag", dot: true, changeType: "hot" as const },
+  { id: "t4", label: "Tag" },
+];
+
+export const WithTags: Story = {
+  name: "Tags",
+  args: {
+    label: "Label",
+    placeholder: "Placeholder",
+    options: items,
+    tags,
+    onTagRemove: () => {},
+    onClearTags: () => {},
+  },
+};
+
+export const TagsChangeTypes: Story = {
+  name: "Tags · change types",
+  args: {
+    label: "Label",
+    placeholder: "Placeholder",
+    options: items,
+    tags: [
+      { id: "m", label: "Mild", changeType: "mild" as const },
+      { id: "d", label: "Medium", changeType: "medium" as const },
+      { id: "h", label: "Hot", changeType: "hot" as const },
+      { id: "b", label: "Branded", dot: true },
+    ],
+  },
+};