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

package/client/ui/TagV02/TagStatusV02.stories.tsx

@@ -0,0 +1,132 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TagStatusV02 } from "../../components/ui/tag-v02";
+
+const statuses = ["todo", "low", "medium", "high", "done", "new"] as const;
+const tones = ["light", "dark"] as const;
+
+const meta = {
+  title: "Components/TagStatus",
+  component: TagStatusV02,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: [
+          "Read-only status pill, paired with `Components/Tag`.",
+          "",
+          "Stories are the two tones: **Light** and **Dark**.",
+          "Use **Controls** for status and the label.",
+          "All Variants shows the full set of **12**.",
+          "",
+          "---",
+          "",
+          "## Import",
+          "",
+          "```tsx",
+          `import { TagStatusV02 } from "@syscore/ui-library"`,
+          "```",
+          "",
+          "## How to use",
+          "",
+          "Renders a `span` — it carries no interaction, so pair it with a real control",
+          "if the status is editable. The label defaults to the `status` value and is",
+          "uppercased by the overline type style, so pass mixed-case copy freely.",
+          "",
+          "```tsx",
+          `<TagStatusV02 status="high" tone="dark">High</TagStatusV02>`,
+          "```",
+          "",
+          "| Status | Light | Dark |",
+          "|--------|-------|------|",
+          "| `todo` | grey 100 / 600 | grey 600 / 100 |",
+          "| `low` | cyan 100 / 500 | cyan 700 / 100 |",
+          "| `medium` | plum 100 / 600 | plum 700 / 100 |",
+          "| `high` | coral 100 / 600 | coral 700 / 100 |",
+          "| `done` | emerald 100 / 600 | emerald 700 / 100 |",
+          "| `new` | gold 200 / 800 | gold 700 / 50 |",
+          "",
+          "## Props",
+          "",
+          "| Prop | Values | Default | Effect |",
+          "|------|--------|---------|--------|",
+          '| `status` | `"todo"` \\| `"low"` \\| `"medium"` \\| `"high"` \\| `"done"` \\| `"new"` | `"todo"` | Semantic status |',
+          '| `tone` | `"light"` \\| `"dark"` | `"light"` | Tinted background vs solid (stories) |',
+          "| `children` | `ReactNode` | the `status` value | Label |",
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    status: { control: "inline-radio", options: [...statuses] },
+    children: { control: "text", name: "label" },
+    tone: { table: { disable: true } },
+  },
+  args: {
+    status: "todo",
+  },
+} satisfies Meta<typeof TagStatusV02>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Light: Story = {
+  args: { tone: "light" },
+};
+
+export const Dark: Story = {
+  args: { tone: "dark" },
+};
+
+export const AllVariants: Story = {
+  name: "All Variants",
+  parameters: { layout: "padded" },
+  argTypes: { status: { table: { disable: true } } },
+  render: () => (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "minmax(0, 1fr)",
+        justifyItems: "center",
+        gap: 40,
+        width: "100%",
+      }}
+    >
+      {tones.map((tone) => (
+        <section key={tone} style={{ width: "100%", maxWidth: 460 }}>
+          <h3
+            style={{
+              margin: "0 0 16px",
+              fontSize: 14,
+              fontWeight: 600,
+              textTransform: "uppercase",
+              letterSpacing: 0.5,
+              color: "#52545d",
+              textAlign: "center",
+            }}
+          >
+            Status · {tone}
+          </h3>
+          <div
+            style={{
+              display: "grid",
+              gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))",
+              maxWidth: 416,
+              margin: "0 auto",
+              gap: 16,
+              justifyItems: "center",
+            }}
+          >
+            {statuses.map((status) => (
+              <TagStatusV02
+                key={`${tone}-${status}`}
+                status={status}
+                tone={tone}
+              />
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  ),
+};

package/client/ui/TagV02/TagV02.stories.tsx

@@ -0,0 +1,142 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { TagV02 } from "../../components/ui/tag-v02";
+
+const states = ["active", "inactive"] as const;
+const changeTypes = ["mild", "medium", "hot"] as const;
+
+const meta = {
+  title: "Components/Tag",
+  component: TagV02,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: [
+          "Filter chip. Existing `Components/TagLegacy` (`Tag`) is unchanged.",
+          "",
+          "Stories are the two states: **Active** and **Inactive**.",
+          "Use **Controls** for the label and the optional dot and change glyph.",
+          "Status pills live separately at `Components/TagStatus`.",
+          "",
+          "---",
+          "",
+          "## Import",
+          "",
+          "```tsx",
+          `import { TagV02 } from "@syscore/ui-library"`,
+          "```",
+          "",
+          "## How to use",
+          "",
+          "Renders a `button` with `aria-pressed`, so it reads as a toggle to assistive",
+          "tech. Drive `state` from your own selection state.",
+          "",
+          "```tsx",
+          "const [on, setOn] = useState(false)",
+          "",
+          "<TagV02",
+          `  state={on ? "active" : "inactive"}`,
+          "  onClick={() => setOn(!on)}",
+          "  dot",
+          "  change",
+          ">",
+          "  Tag",
+          "</TagV02>",
+          "```",
+          "",
+          "| Situation | Use |",
+          "|-----------|-----|",
+          '| Selected filter | `state="active"` |',
+          '| Unselected filter | `state="inactive"` (default) |',
+          "| Branded marker | `dot` |",
+          "| Change-type marker | `change`, with `changeType` |",
+          "",
+          "## Props",
+          "",
+          "| Prop | Values | Default | Effect |",
+          "|------|--------|---------|--------|",
+          '| `state` | `"active"` \\| `"inactive"` | `"inactive"` | Selection state (stories) |',
+          "| `dot` | `boolean` | `false` | 12px branded dot after the label |",
+          "| `change` | `boolean` | `false` | Change-type triangle after the dot |",
+          '| `changeType` | `"mild"` \\| `"medium"` \\| `"hot"` | `"mild"` | Which triangle |',
+          "| `children` | `ReactNode` | — | Label (14px/19.6, weight 500) |",
+          "| `disabled` | `boolean` | `false` | Dims and blocks interaction |",
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    dot: { control: "boolean" },
+    change: { control: "boolean" },
+    changeType: { control: "inline-radio", options: [...changeTypes] },
+    children: { control: "text", name: "label" },
+    disabled: { control: "boolean" },
+    state: { table: { disable: true } },
+  },
+  args: {
+    children: "Tag",
+    dot: true,
+    change: true,
+    changeType: "mild",
+    disabled: false,
+  },
+} satisfies Meta<typeof TagV02>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Active: Story = {
+  args: { state: "active" },
+};
+
+export const Inactive: Story = {
+  args: { state: "inactive" },
+};
+
+const sectionHeading: React.CSSProperties = {
+  margin: "0 0 16px",
+  fontSize: 14,
+  fontWeight: 600,
+  textTransform: "uppercase",
+  letterSpacing: 0.5,
+  color: "#52545d",
+  textAlign: "center",
+};
+
+const row: React.CSSProperties = {
+  display: "flex",
+  flexWrap: "wrap",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: 16,
+};
+
+export const AllVariants: Story = {
+  name: "All Variants",
+  parameters: { layout: "padded" },
+  argTypes: { state: { table: { disable: true } } },
+  render: (args) => (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "minmax(0, 1fr)",
+        justifyItems: "center",
+        gap: 40,
+        width: "100%",
+      }}
+    >
+      <section style={{ width: "100%", maxWidth: 460 }}>
+        <h3 style={sectionHeading}>Base</h3>
+        <div style={row}>
+          {states.map((state) => (
+            <TagV02 key={state} {...args} state={state}>
+              Tag
+            </TagV02>
+          ))}
+        </div>
+      </section>
+    </div>
+  ),
+};

package/client/ui/TextAreaV01/TextAreaV01.stories.tsx

@@ -0,0 +1,146 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { TextAreaV01 } from "../../components/ui/text-area-v01";
+
+const SHORT =
+  "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
+
+const LONG =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla";
+
+const FILLED =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.";
+
+const DISABLED =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ";
+
+const specimens = [
+  { name: "Default", props: {} },
+  { name: "Focus", props: { focused: true } },
+  { name: "Active", props: { focused: true, defaultValue: SHORT } },
+  { name: "In progress", props: { focused: true, defaultValue: LONG } },
+  { name: "Filled", props: { defaultValue: FILLED } },
+  { name: "Disabled", props: { disabled: true, defaultValue: DISABLED } },
+] as const;
+
+const sectionHeading: React.CSSProperties = {
+  margin: "0 0 20px",
+  fontSize: 14,
+  fontWeight: 600,
+  textTransform: "uppercase",
+  letterSpacing: 0.5,
+  color: "#52545d",
+};
+
+const meta = {
+  title: "Components/TextArea",
+  component: TextAreaV01,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: [
+          "Multi-line input. Existing `Components/TextareaLegacy` (`Textarea`) is unchanged.",
+          "",
+          "Stories are the six states: **Default**, **Focus**, **Active**,",
+          "**In progress**, **Filled** and **Disabled**. Use **Controls** for the",
+          "placeholder and value. All Variants shows every state.",
+          "",
+          "---",
+          "",
+          "## Import",
+          "",
+          "```tsx",
+          `import { TextAreaV01 } from "@syscore/ui-library"`,
+          "```",
+          "",
+          "## How to use",
+          "",
+          "It starts at 112px and grows with the content, so Active, In progress and",
+          "Filled differ only by how much text they hold. Focus styling comes from",
+          "`:focus`, so it needs no prop in real use — `focused` only holds the ring",
+          "still for these specimens.",
+          "",
+          "```tsx",
+          "<TextAreaV01",
+          `  placeholder="Tell us what you think"`,
+          "  value={note}",
+          "  onChange={(e) => setNote(e.target.value)}",
+          "/>",
+          "```",
+          "",
+          "## Props",
+          "",
+          "| Prop | Values | Default | Effect |",
+          "|------|--------|---------|--------|",
+          '| `placeholder` | `string` | `"Tell us what you think"` | Empty-state text |',
+          "| `value` / `defaultValue` | `string` | — | Content |",
+          "| `disabled` | `boolean` | `false` | Grey fill, not editable |",
+          "| `focused` | `boolean` | `false` | Holds the focus ring for specimens |",
+          "",
+          "Growth uses `field-sizing: content`. Where that is unsupported the box keeps",
+          "its 112px height and scrolls instead.",
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    placeholder: { control: "text" },
+    disabled: { control: "boolean" },
+    rows: { table: { disable: true } },
+    focused: { table: { disable: true } },
+    value: { table: { disable: true } },
+  },
+  args: {
+    placeholder: "Tell us what you think",
+  },
+} satisfies Meta<typeof TextAreaV01>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Focus: Story = {
+  args: { focused: true, autoFocus: true },
+};
+
+export const Active: Story = {
+  args: { focused: true, autoFocus: true, defaultValue: SHORT },
+};
+
+export const InProgress: Story = {
+  name: "In progress",
+  args: { focused: true, autoFocus: true, defaultValue: LONG },
+};
+
+export const Filled: Story = {
+  args: { defaultValue: FILLED },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true, defaultValue: DISABLED },
+};
+
+export const AllVariants: Story = {
+  name: "All Variants",
+  parameters: { layout: "padded" },
+  render: (args) => (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 56,
+        padding: "32px 24px 48px",
+      }}
+    >
+      {specimens.map((specimen) => (
+        <section key={specimen.name}>
+          <h3 style={sectionHeading}>{specimen.name}</h3>
+          <TextAreaV01 placeholder={args.placeholder} {...specimen.props} />
+        </section>
+      ))}
+    </div>
+  ),
+};

package/client/ui/TextFieldV01/PasswordFieldV01.stories.tsx

@@ -0,0 +1,161 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { PasswordFieldV01 } from "../../components/ui/password-field-v01";
+
+const specimens = [
+  { name: "Default", props: {} },
+  { name: "Focus", props: { focused: true } },
+  {
+    name: "Active",
+    props: { focused: true, defaultValue: "aaaaaghdovnmnvbj" },
+  },
+  { name: "Filled", props: { defaultValue: "aaaaaghdovnmnvbj" } },
+  {
+    name: "Error",
+    props: { error: true, helperText: "Helper text goes here" },
+  },
+  {
+    name: "Warning",
+    props: { warning: true, helperText: "Helper text goes here" },
+  },
+  { name: "Disabled", props: { disabled: true } },
+] as const;
+
+const sectionHeading: React.CSSProperties = {
+  margin: "0 0 20px",
+  fontSize: 14,
+  fontWeight: 600,
+  textTransform: "uppercase",
+  letterSpacing: 0.5,
+  color: "#52545d",
+};
+
+const meta = {
+  title: "Components/PasswordField",
+  component: PasswordFieldV01,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: [
+          "Password input — the text field plus a show/hide toggle.",
+          "",
+          "Stories are the seven states: **Default**, **Focus**, **Active**, **Filled**,",
+          "**Error**, **Warning** and **Disabled**. Use **Controls** for the label,",
+          "placeholder and helper text. All Variants shows every state.",
+          "",
+          "---",
+          "",
+          "## Import",
+          "",
+          "```tsx",
+          `import { PasswordFieldV01 } from "@syscore/ui-library"`,
+          "```",
+          "",
+          "## How to use",
+          "",
+          "It wraps `TextFieldV01`, so every state and prop carries over. The toggle",
+          "flips the input between `password` and `text` and is uncontrolled by",
+          "default; pass `visible` to drive it yourself.",
+          "",
+          "```tsx",
+          "<PasswordFieldV01",
+          `  label="Password"`,
+          "  value={password}",
+          "  onChange={(e) => setPassword(e.target.value)}",
+          "  error={tooShort}",
+          `  helperText={tooShort ? "Use at least 12 characters" : undefined}`,
+          "/>",
+          "```",
+          "",
+          "The toggle is a real button carrying `aria-pressed` and a label that reads",
+          "Show password / Hide password.",
+          "",
+          "## Props",
+          "",
+          "| Prop | Values | Default | Effect |",
+          "|------|--------|---------|--------|",
+          "| `visible` | `boolean` | — | Controlled reveal |",
+          "| `defaultVisible` | `boolean` | `false` | Uncontrolled reveal |",
+          "| `onVisibleChange` | `(visible: boolean) => void` | — | Fires on toggle |",
+          "| `warning` | `boolean` | `false` | Bronze border, tinted fill, bronze message |",
+          "| `error` | `boolean` | `false` | Coral border, tinted fill, coral message |",
+          "",
+          "Everything else matches `Components/TextField`.",
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    label: { control: "text" },
+    placeholder: { control: "text" },
+    helperText: { control: "text" },
+    error: { control: "boolean" },
+    warning: { control: "boolean" },
+    disabled: { control: "boolean" },
+    defaultVisible: { control: "boolean" },
+    focused: { table: { disable: true } },
+    visible: { table: { disable: true } },
+    value: { table: { disable: true } },
+  },
+  args: {
+    label: "Label",
+    placeholder: "Placeholder",
+  },
+} satisfies Meta<typeof PasswordFieldV01>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Focus: Story = {
+  args: { focused: true },
+};
+
+export const Active: Story = {
+  args: { focused: true, defaultValue: "aaaaaghdovnmnvbj" },
+};
+
+export const Filled: Story = {
+  args: { defaultValue: "aaaaaghdovnmnvbj" },
+};
+
+export const Error: Story = {
+  args: { error: true, helperText: "Helper text goes here" },
+};
+
+export const Warning: Story = {
+  args: { warning: true, helperText: "Helper text goes here" },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+};
+
+export const AllVariants: Story = {
+  name: "All Variants",
+  parameters: { layout: "padded" },
+  render: (args) => (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 56,
+        padding: "32px 24px 48px",
+      }}
+    >
+      {specimens.map((specimen) => (
+        <section key={specimen.name}>
+          <h3 style={sectionHeading}>{specimen.name}</h3>
+          <PasswordFieldV01
+            label={args.label}
+            placeholder={args.placeholder}
+            {...specimen.props}
+          />
+        </section>
+      ))}
+    </div>
+  ),
+};