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

package/client/ui/Pagination/Pagination.stories.tsx

@@ -1,115 +1,195 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
 import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "../../components/ui/pagination";
+  PaginationV01,
+  PaginationV01Ellipsis,
+  PaginationV01Next,
+  PaginationV01Page,
+  PaginationV01Previous,
+  type PaginationV01State,
+} from "../../components/ui/pagination-v01";
+
+/** Args for the playground stories: one row of parts, driven from Controls. */
+type RowArgs = {
+  state: PaginationV01State;
+  page: string;
+  showPage: boolean;
+  showEllipsis: boolean;
+  previousLabel: string;
+  nextLabel: string;
+};
 
 const meta = {
-  title: "UI/Pagination",
-  component: Pagination,
+  title: "Components/Pagination",
+  component: PaginationV01,
   tags: ["autodocs"],
   parameters: {
-    layout: "padded",
+    layout: "centered",
+    docs: {
+      description: {
+        component: [
+          "Page navigation: Previous, Next, page number and ellipsis — each with a `default`, `active` and `disabled` state.",
+          "Existing `Draft/Pagination Legacy` (`Pagination`) is unchanged.",
+          "",
+          "---",
+          "",
+          "## Import",
+          "",
+          "```tsx",
+          `import {`,
+          `  PaginationV01,`,
+          `  PaginationV01Previous,`,
+          `  PaginationV01Page,`,
+          `  PaginationV01Ellipsis,`,
+          `  PaginationV01Next,`,
+          `} from "@syscore/ui-library"`,
+          "```",
+          "",
+          "## How to use",
+          "",
+          "```tsx",
+          "<PaginationV01>",
+          "  <PaginationV01Previous onClick={goPrev} />",
+          "  <PaginationV01Page>1</PaginationV01Page>",
+          "  <PaginationV01Page current>2</PaginationV01Page>",
+          "  <PaginationV01Ellipsis />",
+          "  <PaginationV01Next onClick={goNext} />",
+          "</PaginationV01>",
+          "```",
+          "",
+          "| Part | Prop | Values | Default | Effect |",
+          "|------|------|--------|---------|--------|",
+          "| Previous / Next / Page / Ellipsis | `state` | `default` `active` `disabled` | `default` | Color / chrome |",
+          '| Page | `current` | boolean | `false` | Same as `state="active"` (cyan-50 fill, cyan-300 border) |',
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    state: {
+      control: "inline-radio",
+      options: ["default", "active", "disabled"],
+      description: "Applied to every part in the row.",
+      table: { defaultValue: { summary: "default" } },
+    },
+    page: {
+      control: "text",
+      description: "Label on the page-number part.",
+      table: { defaultValue: { summary: "1" } },
+    },
+    showPage: {
+      control: "boolean",
+      description: "Render the page-number part.",
+    },
+    showEllipsis: {
+      control: "boolean",
+      description: "Render the ellipsis part.",
+    },
+    previousLabel: { control: "text" },
+    nextLabel: { control: "text" },
+  },
+  args: {
+    state: "default",
+    page: "1",
+    showPage: true,
+    showEllipsis: true,
+    previousLabel: "Previous",
+    nextLabel: "Next",
   },
-} satisfies Meta<typeof Pagination>;
+} satisfies Meta<RowArgs>;
 
 export default meta;
+type Story = StoryObj<RowArgs>;
 
-type Story = StoryObj<typeof meta>;
+function Parts({
+  state,
+  page = "1",
+  showPage = true,
+  showEllipsis = true,
+  previousLabel = "Previous",
+  nextLabel = "Next",
+}: Partial<RowArgs> & { state: PaginationV01State }) {
+  return (
+    <div className="sb-pagination-spec">
+      <PaginationV01Previous state={state}>
+        {previousLabel}
+      </PaginationV01Previous>
+      {showPage ? (
+        <PaginationV01Page state={state}>{page}</PaginationV01Page>
+      ) : null}
+      {showEllipsis ? <PaginationV01Ellipsis state={state} /> : null}
+      <PaginationV01Next state={state}>{nextLabel}</PaginationV01Next>
+    </div>
+  );
+}
 
-export const Default: Story = {
-  render: () => (
-    <Pagination>
-      <PaginationContent>
-        <PaginationItem>
-          <PaginationPrevious href="#" />
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#">1</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#" isActive>
-            2
-          </PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#">3</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationEllipsis />
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationNext href="#" />
-        </PaginationItem>
-      </PaginationContent>
-    </Pagination>
-  ),
-};
+const stateStory = (state: PaginationV01State): Story => ({
+  args: { state },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Previous, page number, ellipsis, Next. Use `showPage` / `showEllipsis` to drop a part and `page` to change the number.",
+      },
+    },
+  },
+  render: (args) => <Parts {...args} />,
+});
+
+export const Default: Story = stateStory("default");
+
+export const Active: Story = stateStory("active");
+
+export const Disabled: Story = stateStory("disabled");
 
-export const Extended: Story = {
+export const AllVariants: Story = {
+  name: "All variants",
+  parameters: { controls: { disable: true } },
   render: () => (
-    <Pagination>
-      <PaginationContent>
-        <PaginationItem>
-          <PaginationPrevious href="#" />
-        </PaginationItem>
-        {[1, 2, 3, 4, 5, 6, 7, 8].map((page) => (
-          <PaginationItem key={page}>
-            <PaginationLink href="#" isActive={page === 3}>
-              {page}
-            </PaginationLink>
-          </PaginationItem>
-        ))}
-        <PaginationItem>
-          <PaginationEllipsis />
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationNext href="#" />
-        </PaginationItem>
-      </PaginationContent>
-    </Pagination>
+    <div className="sb-pagination-matrix">
+      {(["default", "active", "disabled"] as const).map((state) => (
+        <div key={state} className="sb-pagination-row">
+          <span className="sb-pagination-label font-mazzardSoft">{state}</span>
+          <Parts state={state} />
+        </div>
+      ))}
+    </div>
   ),
 };
 
-export const WithEllipsis: Story = {
-  render: () => (
-    <Pagination>
-      <PaginationContent>
-        <PaginationItem>
-          <PaginationPrevious href="#" />
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#">1</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationEllipsis />
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#">10</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#" isActive>
-            11
-          </PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#">12</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationEllipsis />
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationLink href="#">20</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationNext href="#" />
-        </PaginationItem>
-      </PaginationContent>
-    </Pagination>
-  ),
+export const InABar: Story = {
+  name: "In a bar",
+  parameters: { controls: { disable: true } },
+  render: function InABarStory() {
+    const [page, setPage] = useState(2);
+    const last = 12;
+    return (
+      <PaginationV01>
+        <PaginationV01Previous
+          state={page === 1 ? "disabled" : "default"}
+          onClick={() => setPage((p) => Math.max(1, p - 1))}
+        />
+        <PaginationV01Page current={page === 1} onClick={() => setPage(1)}>
+          1
+        </PaginationV01Page>
+        {page > 3 ? <PaginationV01Ellipsis /> : null}
+        {page !== 1 && page !== last ? (
+          <PaginationV01Page current onClick={() => setPage(page)}>
+            {page}
+          </PaginationV01Page>
+        ) : null}
+        {page < last - 2 ? <PaginationV01Ellipsis /> : null}
+        <PaginationV01Page
+          current={page === last}
+          onClick={() => setPage(last)}
+        >
+          {last}
+        </PaginationV01Page>
+        <PaginationV01Next
+          state={page === last ? "disabled" : "default"}
+          onClick={() => setPage((p) => Math.min(last, p + 1))}
+        />
+      </PaginationV01>
+    );
+  },
 };

package/client/ui/Pagination/PaginationLegacy.stories.tsx

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "../../components/ui/pagination";
+
+const meta = {
+  title: "Draft/Pagination Legacy",
+  component: Pagination,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "Previous pagination (shadcn). Unchanged. New work should use `PaginationV01` under Components/Pagination.",
+      },
+    },
+  },
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">1</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#" isActive>
+            2
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">3</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href="#" />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  ),
+};
+
+export const Extended: Story = {
+  render: () => (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" />
+        </PaginationItem>
+        {[1, 2, 3, 4, 5, 6, 7, 8].map((page) => (
+          <PaginationItem key={page}>
+            <PaginationLink href="#" isActive={page === 3}>
+              {page}
+            </PaginationLink>
+          </PaginationItem>
+        ))}
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href="#" />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  ),
+};
+
+export const WithEllipsis: Story = {
+  render: () => (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">1</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">10</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#" isActive>
+            11
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">12</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">20</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href="#" />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  ),
+};

package/client/ui/Panel.stories.tsx

@@ -544,7 +544,7 @@ export const ExploreSidePanel = {
 };
 
 const meta = {
-  title: "Review/Panel",
+  title: "Components/Panel",
   component: ExploreSidePanelView,
   tags: ["autodocs"],
   parameters: {

package/client/ui/Popover/Popover.stories.tsx

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

package/client/ui/Progress/Progress.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Progress } from "../../components/ui/progress";
 
 const meta = {
-  title: "UI/Progress",
+  title: "Components/Progress",
   component: Progress,
   tags: ["autodocs"],
   parameters: {

package/client/ui/RadioGroup/RadioGroup.stories.tsx

@@ -4,7 +4,7 @@ import { Label } from "../../components/ui/label";
 import { useState } from "react";
 
 const meta = {
-  title: "UI/RadioGroup",
+  title: "Components/RadioGroup",
   component: RadioGroup,
   tags: ["autodocs"],
   parameters: {

package/client/ui/Resizable/Resizable.stories.tsx

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

package/client/ui/ScrollArea/ScrollArea.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { ScrollArea } from "../../components/ui/scroll-area";
 
 const meta = {
-  title: "UI/ScrollArea",
+  title: "Draft/ScrollArea",
   component: ScrollArea,
   tags: ["autodocs"],
   parameters: {

package/client/ui/SearchField/SearchField.stories.tsx

@@ -0,0 +1,153 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import {
+  SearchFieldV01,
+  type SearchFieldV01Props,
+  type SearchFieldV01State,
+} from "../../components/ui/search-field-v01";
+
+const meta = {
+  title: "Components/SearchField",
+  component: SearchFieldV01,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: [
+          "Search input with inline typeahead and a clear button.",
+          "",
+          "```tsx",
+          `import { SearchFieldV01 } from "@syscore/ui-library"`,
+          "",
+          '<SearchFieldV01 placeholder="Search projects" onClear={clear} />',
+          "```",
+          "",
+          "The state is derived from focus and value, so you normally pass nothing:",
+          "",
+          "| | empty | has value |",
+          "|---|---|---|",
+          "| **blurred** | search icon + placeholder | value + clear button |",
+          "| **focused** | cyan border, icon hidden | cyan border, typeahead + Enter |",
+          "",
+          "Pass `state` only to pin one for a spec or a screenshot.",
+          "",
+          "| Prop | Values | Default |",
+          "|------|--------|---------|",
+          "| `state` | `default` \\| `focus` \\| `active` \\| `filled` \\| `disabled` | derived |",
+          "| `suggestion` | inline typeahead remainder shown after the value | — |",
+          "| `onClear` | shows the clear button once there is a value | — |",
+          "| `placeholder` | `string` | `Placeholder` |",
+          "",
+          "Anything else is forwarded to the `<input>`.",
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    state: {
+      control: "inline-radio",
+      options: ["default", "focus", "active", "filled", "disabled"],
+    },
+    placeholder: { control: "text" },
+    suggestion: { control: "text" },
+    value: { control: "text" },
+    onClear: { table: { disable: true } },
+    containerClassName: { table: { disable: true } },
+  },
+  args: {
+    placeholder: "Placeholder",
+  },
+} satisfies Meta<typeof SearchFieldV01>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const STATES: SearchFieldV01State[] = [
+  "default",
+  "focus",
+  "active",
+  "filled",
+  "disabled",
+];
+
+/** Each story pins one state so every variant is visible without interacting. */
+const stateArgs: Record<SearchFieldV01State, Partial<SearchFieldV01Props>> = {
+  default: {},
+  focus: {},
+  active: { value: "Entry", suggestion: "typeahead" },
+  filled: { value: "Entry" },
+  disabled: {},
+};
+
+export const Default: Story = {
+  args: { state: "default" },
+};
+
+export const Focus: Story = {
+  args: { state: "focus" },
+};
+
+export const Active: Story = {
+  args: { state: "active", value: "Entry", suggestion: "typeahead" },
+};
+
+export const Filled: Story = {
+  args: { state: "filled", value: "Entry", onClear: () => {} },
+};
+
+export const Disabled: Story = {
+  args: { state: "disabled" },
+};
+
+export const AllVariants: Story = {
+  name: "All variants",
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story: "Every state, one row each.",
+      },
+    },
+  },
+  render: () => (
+    <div className="sb-searchfield-matrix">
+      {STATES.map((state) => (
+        <div key={state} className="sb-searchfield-row">
+          <span className="sb-searchfield-label font-mazzardSoft">{state}</span>
+          <SearchFieldV01
+            state={state}
+            placeholder="Placeholder"
+            onClear={() => {}}
+            {...stateArgs[state]}
+          />
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const Interactive: Story = {
+  name: "Interactive",
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          "No pinned `state` — focus it, type, and blur to move through default, focus, active and filled.",
+      },
+    },
+  },
+  render: function InteractiveField() {
+    const [value, setValue] = useState("");
+    return (
+      <SearchFieldV01
+        value={value}
+        suggestion={value === "Ent" ? "ry" : undefined}
+        placeholder="Placeholder"
+        onChange={(event) => setValue(event.target.value)}
+        onClear={() => setValue("")}
+      />
+    );
+  },
+};

package/client/ui/{SearchField.stories.tsx → SearchField/SearchFieldLegacy.stories.tsx}

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { SearchField } from "../components/ui/search";
+import { SearchField } from "../../components/ui/search";
 
 const meta = {
-  title: "Review/SearchField",
+  title: "Draft/SearchField Legacy",
   component: SearchField,
   tags: ["autodocs"],
   parameters: {

package/client/ui/SectionBadge.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { SectionBadge } from "../components/ui/section-badge";
 
 const meta = {
-  title: "Review/SectionBadge",
+  title: "Components/SectionBadge",
   component: SectionBadge,
   tags: ["autodocs"],
   parameters: {

package/client/ui/Select.stories.tsx

@@ -9,7 +9,7 @@ import {
 import { useState } from "react";
 
 const meta = {
-  title: "Review/Select",
+  title: "Components/Select",
   component: Select,
   tags: ["autodocs"],
   parameters: {

package/client/ui/Separator/Separator.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Separator } from "../../components/ui/separator";
 
 const meta = {
-  title: "UI/Separator",
+  title: "Components/Separator",
   component: Separator,
   tags: ["autodocs"],
   parameters: {

package/client/ui/Sheet/Sheet.stories.tsx

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