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

package/client/ui/ButtonV01/ButtonV01.stories.tsx

@@ -0,0 +1,417 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  ButtonV01,
+  type ButtonV01Appearance,
+  type ButtonV01Context,
+  type ButtonV01Hierarchy,
+  type ButtonV01Icon,
+  type ButtonV01Size,
+  type ButtonV01Theme,
+  type ButtonV01Type,
+} from "../../components/ui/button-v01";
+
+const sizes: ButtonV01Size[] = ["large", "medium", "small"];
+const types: ButtonV01Type[] = ["cta", "utility", "icon"];
+const hierarchies: ButtonV01Hierarchy[] = ["primary", "secondary", "tertiary"];
+const appearances: ButtonV01Appearance[] = ["solid", "gradient", "stroke"];
+const themes: ButtonV01Theme[] = ["default", "light", "transparent", "color"];
+const contexts: ButtonV01Context[] = [
+  "default",
+  "general",
+  "tooltip",
+  "confirm",
+  "error",
+  "cancel",
+  "redirect",
+  "done",
+  "floating",
+  "back",
+];
+const icons: ButtonV01Icon[] = ["none", "check", "close", "delete", "back"];
+
+const meta = {
+  title: "Components/Button",
+  component: ButtonV01,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: [
+          "Pill button. Existing `Components/ButtonLegacy` (`Button`) is unchanged.",
+          "",
+          "Axes: **size**, **type**, **hierarchy**, **appearance**,",
+          "**theme**, **context**, and **icon** (icon-only buttons).",
+          "",
+          "---",
+          "",
+          "## Import",
+          "",
+          "```tsx",
+          `import { ButtonV01 } from "@syscore/ui-library"`,
+          "```",
+          "",
+          "## How to use",
+          "",
+          "Default is the large primary CTA (gradient). Change `typeVariant`, `hierarchy`,",
+          "`appearance`, and `context` to match the variant you need.",
+          "",
+          "```tsx",
+          "<ButtonV01 onClick={handleContinue}>",
+          "  Call to action",
+          "</ButtonV01>",
+          "",
+          "<ButtonV01",
+          `  typeVariant="utility"`,
+          `  appearance="solid"`,
+          `  context="confirm"`,
+          "  onClick={handleSave}",
+          ">",
+          "  Confirm",
+          "</ButtonV01>",
+          "",
+          "<ButtonV01",
+          `  typeVariant="icon"`,
+          `  icon="close"`,
+          `  theme="light"`,
+          `  aria-label="Close"`,
+          "  onClick={handleClose}",
+          "/>",
+          "```",
+          "",
+          "| Situation | Use |",
+          "|-----------|-----|",
+          "| Primary marketing / page CTA | default (`typeVariant=\"cta\"`, `appearance=\"gradient\"`) |",
+          "| Outline CTA | `hierarchy=\"secondary\"` or `\"tertiary\"`, `appearance=\"stroke\"` |",
+          "| Form / dialog utility | `typeVariant=\"utility\"`, `appearance=\"solid\"` |",
+          "| Confirm / error / tooltip color | `context=\"confirm\"` \\| `\"error\"` \\| `\"tooltip\"` |",
+          "| Floating action with device icon | `context=\"floating\"` |",
+          "| Icon-only 32px control | `typeVariant=\"icon\"` and `icon` |",
+          "",
+          "Existing `Components/ButtonLegacy` (`Button`) is the previous API — keep using it where it",
+          "is already wired. New work should import `ButtonV01`.",
+          "",
+          "## Props",
+          "",
+          "| Prop | Values | Default | Effect |",
+          "|------|--------|---------|--------|",
+          "| `size` | `\"large\"` \\| `\"medium\"` \\| `\"small\"` | `\"large\"` | Height and padding |",
+          "| `typeVariant` | `\"cta\"` \\| `\"utility\"` \\| `\"icon\"` | `\"cta\"` | CTA, utility, or icon |",
+          "| `hierarchy` | `\"primary\"` \\| `\"secondary\"` \\| `\"tertiary\"` | `\"primary\"` | Weight in the set |",
+          "| `appearance` | `\"solid\"` \\| `\"gradient\"` \\| `\"stroke\"` | `\"gradient\"` | Surface treatment |",
+          "| `theme` | `\"default\"` \\| `\"light\"` \\| `\"transparent\"` \\| `\"color\"` | `\"default\"` | Icon-button surfaces |",
+          "| `context` | `\"default\"` \\| `\"confirm\"` \\| `\"error\"` \\| `\"floating\"` … | `\"default\"` | Semantic / floating looks |",
+          "| `icon` | `\"none\"` \\| `\"close\"` \\| `\"check\"` \\| `\"delete\"` \\| `\"back\"` | `\"none\"` | Icon-only glyph |",
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    size: { control: "select", options: [...sizes] },
+    typeVariant: { control: "select", options: [...types] },
+    hierarchy: { control: "select", options: [...hierarchies] },
+    appearance: { control: "select", options: [...appearances] },
+    theme: { control: "select", options: [...themes] },
+    context: { control: "select", options: [...contexts] },
+    icon: { control: "select", options: [...icons] },
+    disabled: { control: "boolean" },
+    children: { control: "text" },
+  },
+  args: {
+    size: "large",
+    typeVariant: "cta",
+    hierarchy: "primary",
+    appearance: "gradient",
+    theme: "default",
+    context: "default",
+    icon: "none",
+    disabled: false,
+  },
+} satisfies Meta<typeof ButtonV01>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+const catalog = [
+  {
+    label: "CTA · Primary · Gradient",
+    props: {
+      typeVariant: "cta" as const,
+      hierarchy: "primary" as const,
+      appearance: "gradient" as const,
+      theme: "default" as const,
+      context: "default" as const,
+    },
+  },
+  {
+    label: "CTA · Secondary · Stroke",
+    props: {
+      typeVariant: "cta" as const,
+      hierarchy: "secondary" as const,
+      appearance: "stroke" as const,
+      theme: "light" as const,
+      context: "default" as const,
+    },
+  },
+  {
+    label: "CTA · Tertiary · Stroke",
+    props: {
+      typeVariant: "cta" as const,
+      hierarchy: "tertiary" as const,
+      appearance: "stroke" as const,
+      theme: "light" as const,
+      context: "default" as const,
+    },
+  },
+  {
+    label: "Utility · Primary",
+    props: {
+      typeVariant: "utility" as const,
+      hierarchy: "primary" as const,
+      appearance: "solid" as const,
+      theme: "default" as const,
+      context: "default" as const,
+    },
+  },
+  {
+    label: "Utility · Secondary",
+    props: {
+      typeVariant: "utility" as const,
+      hierarchy: "secondary" as const,
+      appearance: "solid" as const,
+      theme: "default" as const,
+      context: "default" as const,
+    },
+  },
+  {
+    label: "Utility · Tertiary",
+    props: {
+      typeVariant: "utility" as const,
+      hierarchy: "tertiary" as const,
+      appearance: "stroke" as const,
+      theme: "light" as const,
+      context: "default" as const,
+    },
+  },
+  {
+    label: "Confirm",
+    props: {
+      typeVariant: "utility" as const,
+      hierarchy: "primary" as const,
+      appearance: "solid" as const,
+      theme: "light" as const,
+      context: "confirm" as const,
+    },
+  },
+  {
+    label: "Redirect",
+    props: {
+      typeVariant: "cta" as const,
+      hierarchy: "primary" as const,
+      appearance: "solid" as const,
+      theme: "light" as const,
+      context: "redirect" as const,
+    },
+  },
+  {
+    label: "Error",
+    props: {
+      typeVariant: "utility" as const,
+      hierarchy: "primary" as const,
+      appearance: "solid" as const,
+      theme: "light" as const,
+      context: "error" as const,
+    },
+  },
+  {
+    label: "Tooltip",
+    props: {
+      typeVariant: "utility" as const,
+      hierarchy: "primary" as const,
+      appearance: "solid" as const,
+      theme: "light" as const,
+      context: "tooltip" as const,
+    },
+  },
+  {
+    label: "Floating",
+    props: {
+      typeVariant: "cta" as const,
+      hierarchy: "primary" as const,
+      appearance: "gradient" as const,
+      theme: "default" as const,
+      context: "floating" as const,
+    },
+  },
+];
+
+export const CTA: Story = {
+  args: {
+    typeVariant: "cta",
+    hierarchy: "primary",
+    appearance: "gradient",
+  },
+};
+
+export const Utility: Story = {
+  args: {
+    typeVariant: "utility",
+    hierarchy: "primary",
+    appearance: "solid",
+    theme: "default",
+    children: "Utility",
+  },
+};
+
+export const Confirm: Story = {
+  args: {
+    typeVariant: "utility",
+    appearance: "solid",
+    theme: "light",
+    context: "confirm",
+  },
+};
+
+export const Floating: Story = {
+  args: {
+    context: "floating",
+    appearance: "gradient",
+  },
+};
+
+export const IconButtons: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
+      {(["light", "transparent", "color"] as const).map((theme) => (
+        <div
+          key={theme}
+          style={{
+            display: "flex",
+            gap: 16,
+            alignItems: "center",
+            padding: 16,
+            borderRadius: 12,
+            background: theme === "transparent" ? "#3e4049" : undefined,
+          }}
+        >
+          {(["close", "check", "delete", "back"] as const).map((icon) =>
+            theme === "color" && icon === "back" ? null : (
+              <ButtonV01
+                key={icon}
+                typeVariant="icon"
+                icon={icon}
+                theme={theme}
+              />
+            ),
+          )}
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: "grid", gap: 32, padding: 24 }}>
+      <section>
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "72px repeat(11, max-content)",
+            gap: 24,
+            alignItems: "center",
+          }}
+        >
+          <span />
+          {catalog.map((col) => (
+            <span
+              key={col.label}
+              style={{
+                fontSize: 11,
+                fontWeight: 600,
+                color: "#71747d",
+                textTransform: "uppercase",
+                letterSpacing: 0.4,
+              }}
+            >
+              {col.label}
+            </span>
+          ))}
+          {sizes.map((size) => (
+            <React.Fragment key={size}>
+              <span
+                style={{
+                  fontSize: 12,
+                  fontWeight: 600,
+                  color: "#52545d",
+                }}
+              >
+                {size}
+              </span>
+              {catalog.map((col) => (
+                <ButtonV01
+                  key={`${size}-${col.label}`}
+                  size={size}
+                  {...col.props}
+                />
+              ))}
+            </React.Fragment>
+          ))}
+        </div>
+      </section>
+      <section>
+        <h3
+          style={{
+            margin: "0 0 16px",
+            fontSize: 14,
+            fontWeight: 600,
+            color: "#52545d",
+          }}
+        >
+          Icon
+        </h3>
+        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+          {(["light", "transparent", "color"] as const).map((theme) => (
+            <div
+              key={theme}
+              style={{
+                display: "flex",
+                gap: 24,
+                alignItems: "center",
+                padding: 12,
+                borderRadius: 12,
+                background: theme === "transparent" ? "#3e4049" : undefined,
+              }}
+            >
+              <span
+                style={{
+                  width: 88,
+                  fontSize: 12,
+                  fontWeight: 600,
+                  color: theme === "transparent" ? "#fff" : "#52545d",
+                  textTransform: "capitalize",
+                }}
+              >
+                {theme}
+              </span>
+              {(["close", "check", "delete", "back"] as const).map((icon) =>
+                theme === "color" && icon === "back" ? null : (
+                  <ButtonV01
+                    key={icon}
+                    typeVariant="icon"
+                    icon={icon}
+                    theme={theme}
+                  />
+                ),
+              )}
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  ),
+  parameters: { layout: "padded" },
+};

package/client/ui/Calendar/Calendar.stories.tsx

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