@replicated/portal-components 0.0.1

package/components/metadata/registry.json

@@ -0,0 +1,273 @@
+{
+  "version": "0.0.1",
+  "generatedAt": "2025-02-09T00:00:00.000Z",
+  "components": [
+    {
+      "name": "Button",
+      "displayName": "Button",
+      "versionIntroduced": "0.0.1",
+      "stability": "beta",
+      "category": "primitive",
+      "tags": [
+        "action",
+        "cta",
+        "form"
+      ],
+      "description": "Theme-aware CTA for triggering portal actions with optional icons and loading feedback.",
+      "props": [
+        {
+          "name": "variant",
+          "type": "\"primary\" | \"secondary\" | \"ghost\" | \"destructive\"",
+          "required": false,
+          "defaultValue": "\"primary\"",
+          "description": "Controls the color treatment to match semantic intent (primary for CTAs, ghost for subdued actions).",
+          "constraints": {
+            "allowedValues": [
+              "primary",
+              "secondary",
+              "ghost",
+              "destructive"
+            ]
+          }
+        },
+        {
+          "name": "size",
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "required": false,
+          "defaultValue": "\"md\"",
+          "description": "Adjusts vertical rhythm and padding to align with form density.",
+          "constraints": {
+            "allowedValues": [
+              "sm",
+              "md",
+              "lg"
+            ]
+          }
+        },
+        {
+          "name": "isLoading",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Replaces the leading icon slot with a spinner and disables the control until the action settles."
+        },
+        {
+          "name": "leadingIcon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon rendered before the label (ignored while loading)."
+        },
+        {
+          "name": "trailingIcon",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Icon rendered after the label for directional affordances."
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Button label describing the action. Keep concise."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Disables the button (automatically set when `isLoading` is true)."
+        },
+        {
+          "name": "type",
+          "type": "\"button\" | \"submit\" | \"reset\"",
+          "required": false,
+          "defaultValue": "\"button\"",
+          "description": "HTML button type. Use `submit` inside React Hook Form actions."
+        }
+      ],
+      "composition": {
+        "requiredParents": [],
+        "requiredChildren": [],
+        "forbiddenChildren": [],
+        "slots": [
+          "leadingIcon",
+          "label",
+          "trailingIcon"
+        ]
+      },
+      "examples": [
+        {
+          "id": "primary-save",
+          "description": "Primary CTA for saving entitlement edits.",
+          "scenario": "Server-action form submission from license edit modal.",
+          "code": "<Button type=\"submit\" variant=\"primary\">Save changes</Button>"
+        },
+        {
+          "id": "ghost-table-action",
+          "description": "Ghost button for inline table actions where emphasis should stay on row data.",
+          "scenario": "Row-level action menu expansion.",
+          "code": "<Button variant=\"ghost\" size=\"sm\" leadingIcon={<IconEllipsis />}>More</Button>"
+        },
+        {
+          "id": "loading-state",
+          "description": "Show async progress when invoking a Server Action.",
+          "scenario": "Triggering `rotateLicenseKey` via `useTransition`.",
+          "code": "<Button variant=\"secondary\" isLoading>Rotating key…</Button>"
+        }
+      ],
+      "behavior": {
+        "mode": "client",
+        "requiresJavaScript": true,
+        "dataAccess": "none",
+        "managesState": "local-state"
+      },
+      "accessibility": {
+        "aria": [
+          "`aria-busy` flips on during loading for screen reader context.",
+          "Button remains focusable while loading unless disabled."
+        ],
+        "keyboard": [
+          "Supports default Enter/Space activation.",
+          "Focus ring meets WCAG 2.1 AA contrast (uses portal tokens)."
+        ],
+        "screenReader": [
+          "Loading spinner is marked `aria-hidden`, users rely on `aria-busy` for announcement."
+        ],
+        "focusManagement": [
+          "Do not automatically move focus away; allow users to tab away when loading."
+        ]
+      },
+      "performance": {
+        "bundleImpact": "low",
+        "notes": "Renders minimal markup and only includes a CSS-based spinner. Tree-shakes cleanly.",
+        "lazyLoadable": false,
+        "virtualization": false
+      },
+      "relatedComponents": []
+    },
+    {
+      "name": "Login",
+      "displayName": "Login",
+      "versionIntroduced": "0.0.1",
+      "stability": "experimental",
+      "category": "pattern",
+      "tags": [
+        "auth",
+        "form",
+        "card"
+      ],
+      "description": "Bordered authentication form with centered branding, email capture, and CTA button built for initial portal logins.",
+      "props": [
+        {
+          "name": "logo",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional logo rendered above the title. Defaults to a stylized EP monogram."
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "required": false,
+          "defaultValue": "\"Enterprise Factory Installation Portal\"",
+          "description": "Headline displayed under the logo."
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "required": false,
+          "defaultValue": "\"Sign in to manage your enterprise installation\"",
+          "description": "Supporting copy below the title."
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "required": false,
+          "defaultValue": "\"Work email address\"",
+          "description": "Accessible label for the email input."
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "required": false,
+          "defaultValue": "\"you@company.com\"",
+          "description": "Placeholder text inside the email field."
+        },
+        {
+          "name": "ctaLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "\"Continue with email →\"",
+          "description": "Copy shown inside the submit button."
+        },
+        {
+          "name": "initialEmail",
+          "type": "string",
+          "required": false,
+          "description": "Prefills the input when the user already provided their email."
+        },
+        {
+          "name": "isSubmitting",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "When true the form disables interactions and shows the button spinner."
+        },
+        {
+          "name": "onContinue",
+          "type": "(email: string) => Promise<void> | void",
+          "required": false,
+          "description": "Callback invoked when the form submits. Receives the current email string."
+        }
+      ],
+      "composition": {
+        "requiredParents": [],
+        "requiredChildren": [],
+        "forbiddenChildren": [],
+        "slots": [
+          "logo"
+        ]
+      },
+      "examples": [
+        {
+          "id": "default-login",
+          "description": "Default login experience with built-in copy.",
+          "scenario": "Entry point for portal authentication.",
+          "code": "<Login onContinue={async (email) => createSession(email)} />"
+        },
+        {
+          "id": "custom-logo",
+          "description": "Override the logo with a vendor-specific mark.",
+          "scenario": "White-labeled portal for an ISV.",
+          "code": "<Login logo={<VendorLogo />} title=\"Acme Deployment Portal\" description=\"Access licenses, releases, and support\" />"
+        }
+      ],
+      "behavior": {
+        "mode": "client",
+        "requiresJavaScript": true,
+        "dataAccess": "none",
+        "managesState": "local-state"
+      },
+      "accessibility": {
+        "aria": [
+          "Labels the email input explicitly, and button uses Spinner aria-hidden content."
+        ],
+        "keyboard": [
+          "Form supports Enter submission; button focus ring mirrors Button component."
+        ],
+        "screenReader": [
+          "Announces loading state via disabled button text and spinner while submitting."
+        ],
+        "focusManagement": [
+          "Maintains focus on email field until submission completes, preventing unexpected jumps."
+        ]
+      },
+      "performance": {
+        "bundleImpact": "low",
+        "notes": "Wraps Button and a small controlled input; no external dependencies.",
+        "lazyLoadable": true,
+        "virtualization": false
+      },
+      "relatedComponents": [
+        "Button"
+      ]
+    }
+  ]
+}

package/components/metadata/registry.md

@@ -0,0 +1,77 @@
+# Component Registry
+
+- Version: 0.0.1
+- Generated: 2025-02-09T00:00:00.000Z
+
+## Button
+
+Theme-aware CTA for triggering portal actions with optional icons and loading feedback.
+
+**Category:** primitive
+**Stability:** beta
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| variant | `"primary" \| "secondary" \| "ghost" \| "destructive"` | No | Controls the color treatment to match semantic intent (primary for CTAs, ghost for subdued actions). |
+| size | `"sm" \| "md" \| "lg"` | No | Adjusts vertical rhythm and padding to align with form density. |
+| isLoading | `boolean` | No | Replaces the leading icon slot with a spinner and disables the control until the action settles. |
+| leadingIcon | `ReactNode` | No | Icon rendered before the label (ignored while loading). |
+| trailingIcon | `ReactNode` | No | Icon rendered after the label for directional affordances. |
+| children | `ReactNode` | Yes | Button label describing the action. Keep concise. |
+| disabled | `boolean` | No | Disables the button (automatically set when `isLoading` is true). |
+| type | `"button" \| "submit" \| "reset"` | No | HTML button type. Use `submit` inside React Hook Form actions. |
+
+**Examples**
+
+**Primary CTA for saving entitlement edits.**
+
+```tsx
+<Button type="submit" variant="primary">Save changes</Button>
+```
+
+**Ghost button for inline table actions where emphasis should stay on row data.**
+
+```tsx
+<Button variant="ghost" size="sm" leadingIcon={<IconEllipsis />}>More</Button>
+```
+
+**Show async progress when invoking a Server Action.**
+
+```tsx
+<Button variant="secondary" isLoading>Rotating key…</Button>
+```
+
+---
+
+## Login
+
+Bordered authentication form with centered branding, email capture, and CTA button built for initial portal logins.
+
+**Category:** pattern
+**Stability:** experimental
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| logo | `ReactNode` | No | Optional logo rendered above the title. Defaults to a stylized EP monogram. |
+| title | `string` | No | Headline displayed under the logo. |
+| description | `string` | No | Supporting copy below the title. |
+| label | `string` | No | Accessible label for the email input. |
+| placeholder | `string` | No | Placeholder text inside the email field. |
+| ctaLabel | `string` | No | Copy shown inside the submit button. |
+| initialEmail | `string` | No | Prefills the input when the user already provided their email. |
+| isSubmitting | `boolean` | No | When true the form disables interactions and shows the button spinner. |
+| onContinue | `(email: string) => Promise<void> \| void` | No | Callback invoked when the form submits. Receives the current email string. |
+
+**Examples**
+
+**Default login experience with built-in copy.**
+
+```tsx
+<Login onContinue={async (email) => createSession(email)} />
+```
+
+**Override the logo with a vendor-specific mark.**
+
+```tsx
+<Login logo={<VendorLogo />} title="Acme Deployment Portal" description="Access licenses, releases, and support" />
+```

package/dist/actions/index.d.mts

@@ -0,0 +1,23 @@
+/**
+ * Light-weight type helpers for defining Server Actions that align with the
+ * enterprise portal guardrails. The component library does not implement
+ * specific actions, but it exports helpers so downstream portals can describe
+ * their actions with consistent metadata.
+ */
+type PortalActionVisibility = "vendor" | "customer";
+interface PortalActionContext {
+    vendorId: string;
+    licenseId: string;
+    userId: string;
+    signal?: AbortSignal;
+}
+interface PortalServerActionDefinition<Input, Output> {
+    id: string;
+    description: string;
+    visibility: PortalActionVisibility;
+    tags: string[];
+    run: (input: Input, context: PortalActionContext) => Promise<Output>;
+}
+declare const defineServerAction: <Input, Output>(definition: PortalServerActionDefinition<Input, Output>) => PortalServerActionDefinition<Input, Output>;
+
+export { type PortalActionContext, type PortalActionVisibility, type PortalServerActionDefinition, defineServerAction };

package/dist/actions/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Light-weight type helpers for defining Server Actions that align with the
+ * enterprise portal guardrails. The component library does not implement
+ * specific actions, but it exports helpers so downstream portals can describe
+ * their actions with consistent metadata.
+ */
+type PortalActionVisibility = "vendor" | "customer";
+interface PortalActionContext {
+    vendorId: string;
+    licenseId: string;
+    userId: string;
+    signal?: AbortSignal;
+}
+interface PortalServerActionDefinition<Input, Output> {
+    id: string;
+    description: string;
+    visibility: PortalActionVisibility;
+    tags: string[];
+    run: (input: Input, context: PortalActionContext) => Promise<Output>;
+}
+declare const defineServerAction: <Input, Output>(definition: PortalServerActionDefinition<Input, Output>) => PortalServerActionDefinition<Input, Output>;
+
+export { type PortalActionContext, type PortalActionVisibility, type PortalServerActionDefinition, defineServerAction };

package/dist/actions/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+/**
+ * Enterprise Portal Components
+ * This file is generated by tsup. Do not edit manually.
+ */
+
+// src/actions/index.ts
+var defineServerAction = (definition) => definition;
+
+exports.defineServerAction = defineServerAction;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/actions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/actions/index.ts"],"names":[],"mappings":";;;;;;;;AAwBO,IAAM,kBAAA,GAAqB,CAChC,UAAA,KACG","file":"index.js","sourcesContent":["/**\n * Light-weight type helpers for defining Server Actions that align with the\n * enterprise portal guardrails. The component library does not implement\n * specific actions, but it exports helpers so downstream portals can describe\n * their actions with consistent metadata.\n */\n\nexport type PortalActionVisibility = \"vendor\" | \"customer\";\n\nexport interface PortalActionContext {\n  vendorId: string;\n  licenseId: string;\n  userId: string;\n  signal?: AbortSignal;\n}\n\nexport interface PortalServerActionDefinition<Input, Output> {\n  id: string;\n  description: string;\n  visibility: PortalActionVisibility;\n  tags: string[];\n  run: (input: Input, context: PortalActionContext) => Promise<Output>;\n}\n\nexport const defineServerAction = <Input, Output>(\n  definition: PortalServerActionDefinition<Input, Output>\n) => definition;\n"]}

package/dist/esm/actions/index.js

@@ -0,0 +1,11 @@
+/**
+ * Enterprise Portal Components
+ * This file is generated by tsup. Do not edit manually.
+ */
+
+// src/actions/index.ts
+var defineServerAction = (definition) => definition;
+
+export { defineServerAction };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/esm/actions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/actions/index.ts"],"names":[],"mappings":";;;;;;AAwBO,IAAM,kBAAA,GAAqB,CAChC,UAAA,KACG","file":"index.js","sourcesContent":["/**\n * Light-weight type helpers for defining Server Actions that align with the\n * enterprise portal guardrails. The component library does not implement\n * specific actions, but it exports helpers so downstream portals can describe\n * their actions with consistent metadata.\n */\n\nexport type PortalActionVisibility = \"vendor\" | \"customer\";\n\nexport interface PortalActionContext {\n  vendorId: string;\n  licenseId: string;\n  userId: string;\n  signal?: AbortSignal;\n}\n\nexport interface PortalServerActionDefinition<Input, Output> {\n  id: string;\n  description: string;\n  visibility: PortalActionVisibility;\n  tags: string[];\n  run: (input: Input, context: PortalActionContext) => Promise<Output>;\n}\n\nexport const defineServerAction = <Input, Output>(\n  definition: PortalServerActionDefinition<Input, Output>\n) => definition;\n"]}

package/dist/esm/index.js

@@ -0,0 +1,225 @@
+import { forwardRef, useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+/**
+ * Enterprise Portal Components
+ * This file is generated by tsup. Do not edit manually.
+ */
+
+// package.json
+var package_default = {
+  version: "0.0.1"};
+
+// src/tokens/index.ts
+var baseTokens = {
+  colors: {
+    background: "#0b0d12",
+    foreground: "#f4f6fb",
+    surfaceMuted: "#1b1f2a",
+    primary: "#0d6efd",
+    onPrimary: "#ffffff",
+    secondary: "#6c757d",
+    onSecondary: "#ffffff",
+    success: "#22c55e",
+    warning: "#fbbf24",
+    danger: "#ef4444"
+  },
+  radii: {
+    lg: "16px",
+    md: "10px",
+    sm: "6px"
+  },
+  spacing: {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "0.75rem",
+    lg: "1rem",
+    xl: "1.5rem"
+  },
+  typography: {
+    fontFamily: "Inter, 'SF Pro Display', 'Segoe UI', system-ui, -apple-system, sans-serif",
+    monoFamily: "'JetBrains Mono', 'SFMono-Regular', Consolas, monospace",
+    lineHeight: {
+      tight: "1.2",
+      normal: "1.5",
+      relaxed: "1.75"
+    }
+  },
+  shadows: {
+    focus: "0 0 0 3px color-mix(in srgb, #0d6efd 35%, transparent)",
+    overlay: "0px 20px 55px rgba(5, 7, 11, 0.5)"
+  }
+};
+var mergeTokens = (base, overrides) => {
+  if (!overrides) {
+    return base;
+  }
+  const clone = structuredClone(base);
+  const apply = (target, source) => {
+    Object.entries(source).forEach(([key, value]) => {
+      if (value && typeof value === "object" && !Array.isArray(value) && typeof target[key] === "object") {
+        apply(target[key], value);
+        return;
+      }
+      target[key] = value;
+    });
+  };
+  apply(clone, overrides);
+  return clone;
+};
+var portalThemeTokens = mergeTokens(baseTokens);
+var createPortalTheme = (overrides) => mergeTokens(baseTokens, overrides);
+var variantStyles = {
+  primary: "bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-primary",
+  secondary: "bg-secondary/20 text-secondary-foreground hover:bg-secondary/30 focus-visible:ring-secondary",
+  ghost: "bg-transparent text-primary hover:bg-primary/10 focus-visible:ring-primary/60",
+  destructive: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger"
+};
+var sizeStyles = {
+  sm: "h-8 px-3 text-sm",
+  md: "h-10 px-4 text-sm",
+  lg: "h-12 px-6 text-base"
+};
+var inlineFlexBase = "inline-flex items-center justify-center gap-2 rounded-md font-medium tracking-tight transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-60";
+var Spinner = () => /* @__PURE__ */ jsx("span", { className: "inline-flex h-3.5 w-3.5 animate-spin items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "h-3 w-3 rounded-full border-2 border-transparent border-t-current" }) });
+var composeClassName = (...values) => values.filter(Boolean).join(" ");
+var Button = forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    type = "button",
+    isLoading = false,
+    leadingIcon,
+    trailingIcon,
+    disabled,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const computedLeading = isLoading ? /* @__PURE__ */ jsx(Spinner, {}) : leadingIcon;
+    const computedDisabled = disabled ?? isLoading;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type,
+        className: composeClassName(
+          inlineFlexBase,
+          variantStyles[variant],
+          sizeStyles[size],
+          className
+        ),
+        "aria-busy": isLoading || void 0,
+        disabled: computedDisabled,
+        ...props,
+        children: [
+          computedLeading ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex", children: computedLeading }) : null,
+          /* @__PURE__ */ jsx("span", { className: "flex-1 whitespace-nowrap", children }),
+          trailingIcon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex", children: trailingIcon }) : null
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Login = forwardRef(
+  ({
+    logo,
+    title = "Enterprise Factory Installation Portal",
+    description = "Sign in to manage your enterprise installation",
+    label = "Work email address",
+    placeholder = "you@company.com",
+    ctaLabel = "Continue with email \u2192",
+    initialEmail = "",
+    isSubmitting = false,
+    onContinue,
+    className,
+    ...props
+  }, ref) => {
+    const [email, setEmail] = useState(initialEmail);
+    const [pending, setPending] = useState(false);
+    const handleSubmit = async (event) => {
+      event.preventDefault();
+      if (!onContinue) {
+        return;
+      }
+      try {
+        setPending(true);
+        await onContinue(email);
+      } finally {
+        setPending(false);
+      }
+    };
+    const disabled = isSubmitting || pending;
+    return /* @__PURE__ */ jsxs(
+      "form",
+      {
+        ref,
+        className: [
+          "w-full max-w-md rounded-3xl border border-white/15 bg-slate-950/80 p-10 shadow-[0_25px_70px_rgba(5,7,11,0.65)] backdrop-blur",
+          "text-white transition-shadow",
+          className
+        ].filter(Boolean).join(" "),
+        onSubmit: handleSubmit,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 text-center", children: [
+            logo ?? /* @__PURE__ */ jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-2xl border border-white/20 bg-white/10 text-lg font-semibold leading-tight", children: "EP" }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-base font-semibold uppercase tracking-[0.35em] text-white/65", children: "Enterprise Portal" }),
+              /* @__PURE__ */ jsx("h1", { className: "mt-3 text-3xl font-semibold tracking-tight", children: title }),
+              /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-white/70", children: description })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-8 space-y-3", children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: "login-email",
+                className: "text-sm font-medium text-white/70",
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: "login-email",
+                type: "email",
+                inputMode: "email",
+                autoComplete: "email",
+                placeholder,
+                value: email,
+                onChange: (event) => setEmail(event.target.value),
+                className: "w-full rounded-2xl border border-white/15 bg-white/5 px-5 py-4 text-base text-white placeholder:text-white/40 focus:border-white/40 focus:outline-none focus:ring-2 focus:ring-white/25",
+                disabled,
+                required: true
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "submit",
+                size: "lg",
+                className: "w-full justify-center",
+                disabled,
+                isLoading: disabled,
+                children: ctaLabel
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+Login.displayName = "Login";
+
+// src/actions/index.ts
+var defineServerAction = (definition) => definition;
+
+// src/index.ts
+var portalComponentsVersion = package_default.version;
+
+export { Button, Login, createPortalTheme, defineServerAction, portalComponentsVersion, portalThemeTokens };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map