@stigmer/react 0.0.71 → 0.0.73

package/src/identity-provider/ProviderPicker.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { cn } from "@stigmer/theme";
+import { PROVIDER_PRESETS, type ProviderPreset } from "./presets";
+
+/** Props for {@link ProviderPicker}. */
+export interface ProviderPickerProps {
+  /** Fired when the user selects a provider preset. */
+  readonly onSelect: (preset: ProviderPreset) => void;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * Grid of well-known identity provider cards for the first step of
+ * the creation wizard.
+ *
+ * Each card shows an icon, provider name, and short description.
+ * Clicking a card fires {@link ProviderPickerProps.onSelect} with
+ * the corresponding {@link ProviderPreset}.
+ *
+ * The "Custom OIDC" card is visually distinct (dashed border) to
+ * signal that it triggers a different flow (OIDC Discovery).
+ *
+ * All visual properties flow through `--stgm-*` design tokens.
+ *
+ * @example
+ * ```tsx
+ * <ProviderPicker onSelect={(preset) => setSelectedPreset(preset)} />
+ * ```
+ */
+export function ProviderPicker({ onSelect, className }: ProviderPickerProps) {
+  return (
+    <div
+      className={cn("grid grid-cols-2 gap-2 sm:grid-cols-3", className)}
+      role="listbox"
+      aria-label="Choose an identity provider"
+    >
+      {PROVIDER_PRESETS.map((preset) => (
+        <button
+          key={preset.id}
+          type="button"
+          role="option"
+          aria-selected={false}
+          onClick={() => onSelect(preset)}
+          className={cn(
+            "flex flex-col items-start gap-2 rounded-lg px-3 py-3 text-left transition-colors",
+            "border hover:border-primary/60 hover:bg-accent/30",
+            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+            preset.id === "custom"
+              ? "border-dashed border-border"
+              : "border-border/60",
+          )}
+        >
+          <ProviderIcon presetId={preset.id} />
+          <div className="min-w-0">
+            <span className="block text-sm font-medium text-foreground">
+              {preset.label}
+            </span>
+            <span className="block text-[0.65rem] leading-tight text-muted-foreground">
+              {preset.description}
+            </span>
+          </div>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Provider icons — simple thematic SVGs, one per preset
+// ---------------------------------------------------------------------------
+
+function ProviderIcon({ presetId }: { presetId: string }) {
+  const Icon = ICON_MAP[presetId] ?? DefaultIcon;
+  return (
+    <span className="flex size-8 items-center justify-center rounded-lg bg-muted">
+      <Icon />
+    </span>
+  );
+}
+
+const ICON_MAP: Record<string, React.ComponentType> = {
+  auth0: LockIcon,
+  okta: KeyIcon,
+  google: GlobeIcon,
+  "azure-ad": CloudIcon,
+  "aws-cognito": UsersIcon,
+  custom: CodeIcon,
+};
+
+function LockIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-muted-foreground">
+      <rect x="3.5" y="7" width="9" height="7" rx="1.5" />
+      <path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2" />
+    </svg>
+  );
+}
+
+function KeyIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-muted-foreground">
+      <circle cx="5.5" cy="10" r="3" />
+      <path d="M8 8l5.5-5.5M11 5l2-0.5L13.5 2.5" />
+    </svg>
+  );
+}
+
+function GlobeIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-muted-foreground">
+      <circle cx="8" cy="8" r="6" />
+      <path d="M2 8h12M8 2c2 2 2.5 4 2.5 6S10 14 8 14c-2-2-2.5-4-2.5-6S6 2 8 2z" />
+    </svg>
+  );
+}
+
+function CloudIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-muted-foreground">
+      <path d="M4 12.5h8.5a3 3 0 0 0 0-6 .5.5 0 0 1-.5-.4A4.5 4.5 0 0 0 3.5 8v.5a3 3 0 0 0 .5 6z" />
+    </svg>
+  );
+}
+
+function UsersIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-muted-foreground">
+      <circle cx="6" cy="5" r="2.5" />
+      <path d="M1.5 14c0-2.5 2-4.5 4.5-4.5S10.5 11.5 10.5 14" />
+      <circle cx="11.5" cy="5.5" r="1.5" />
+      <path d="M14.5 14c0-1.5-1-3-2.5-3.5" />
+    </svg>
+  );
+}
+
+function CodeIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-muted-foreground">
+      <path d="M5 4.5L1.5 8 5 11.5M11 4.5l3.5 3.5-3.5 3.5M9 2.5l-2 11" />
+    </svg>
+  );
+}
+
+function DefaultIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-muted-foreground">
+      <circle cx="8" cy="8" r="6" />
+    </svg>
+  );
+}

package/src/identity-provider/SsoLoginPrompt.tsx

@@ -0,0 +1,404 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState, type FormEvent, type KeyboardEvent } from "react";
+import { cn } from "@stigmer/theme";
+import { getUserMessage } from "@stigmer/sdk";
+import type { SsoProviderInfo } from "@stigmer/protos/ai/stigmer/iam/identityprovider/v1/io_pb";
+import { useSsoProvider } from "./useSsoProvider";
+
+/** Props for {@link SsoLoginPrompt}. */
+export interface SsoLoginPromptProps {
+  /**
+   * Pre-filled organization slug, typically read from a URL query
+   * parameter (e.g., `?org=acme`).
+   *
+   * When provided, the component auto-triggers the SSO provider
+   * lookup on mount, skipping the org input step.
+   */
+  readonly initialOrg?: string;
+
+  /**
+   * Called when the user clicks the SSO sign-in button.
+   *
+   * The consumer is responsible for the actual OIDC redirect — this
+   * component owns the discovery UI, not the authentication mechanics.
+   */
+  readonly onSsoLogin: (provider: SsoProviderInfo, org: string) => void;
+
+  /** Additional CSS classes for the root container. */
+  readonly className?: string;
+}
+
+type Phase =
+  | "input"
+  | "loading"
+  | "found"
+  | "not-found"
+  | "error";
+
+/**
+ * Org-aware SSO discovery prompt.
+ *
+ * Guides the user through finding and connecting to their
+ * organization's SSO provider:
+ *
+ * 1. Enter an organization slug (or receive one via `initialOrg`)
+ * 2. The component calls {@link useSsoProvider} to look up the SSO
+ *    configuration
+ * 3. If found, displays a prominent "Sign in with [provider]" button
+ * 4. If not found, displays a clear message
+ *
+ * Platform builders embed this component in their own login pages to
+ * offer SSO authentication. The Console composes it with an Auth0
+ * fallback and OIDC redirect handling.
+ *
+ * All visual properties flow through `--stgm-*` design tokens.
+ *
+ * @example
+ * ```tsx
+ * <SsoLoginPrompt
+ *   initialOrg="acme"
+ *   onSsoLogin={(provider, org) => {
+ *     // Initiate OIDC redirect with provider.issuer, provider.oidcClientId
+ *   }}
+ * />
+ * ```
+ */
+export function SsoLoginPrompt({
+  initialOrg,
+  onSsoLogin,
+  className,
+}: SsoLoginPromptProps) {
+  const [orgInput, setOrgInput] = useState(initialOrg ?? "");
+  const [submittedOrg, setSubmittedOrg] = useState<string | null>(
+    initialOrg ?? null,
+  );
+  const { ssoProvider, isLoading, error } = useSsoProvider(submittedOrg);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const phase = resolvePhase(submittedOrg, isLoading, ssoProvider, error);
+
+  // Focus the org input when returning to the input phase.
+  useEffect(() => {
+    if (phase === "input") {
+      inputRef.current?.focus();
+    }
+  }, [phase]);
+
+  const handleSubmitOrg = useCallback(
+    (e: FormEvent) => {
+      e.preventDefault();
+      const trimmed = orgInput.trim().toLowerCase();
+      if (trimmed) setSubmittedOrg(trimmed);
+    },
+    [orgInput],
+  );
+
+  const handleReset = useCallback(() => {
+    setSubmittedOrg(null);
+    setOrgInput("");
+  }, []);
+
+  const handleRetry = useCallback(() => {
+    if (submittedOrg) {
+      setSubmittedOrg(null);
+      // Re-trigger after clearing so the hook resets, then re-set.
+      queueMicrotask(() => setSubmittedOrg(submittedOrg));
+    }
+  }, [submittedOrg]);
+
+  const handleSsoClick = useCallback(() => {
+    if (ssoProvider && submittedOrg) {
+      onSsoLogin(ssoProvider, submittedOrg);
+    }
+  }, [ssoProvider, submittedOrg, onSsoLogin]);
+
+  const handleSsoKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLButtonElement>) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleSsoClick();
+      }
+    },
+    [handleSsoClick],
+  );
+
+  return (
+    <div
+      className={cn("w-full", className)}
+      role="region"
+      aria-label="SSO sign-in"
+    >
+      {phase === "input" && (
+        <OrgInputForm
+          ref={inputRef}
+          value={orgInput}
+          onChange={setOrgInput}
+          onSubmit={handleSubmitOrg}
+        />
+      )}
+
+      {phase === "loading" && (
+        <LoadingState org={submittedOrg!} />
+      )}
+
+      {phase === "found" && ssoProvider && (
+        <FoundState
+          provider={ssoProvider}
+          org={submittedOrg!}
+          onClick={handleSsoClick}
+          onKeyDown={handleSsoKeyDown}
+          onChangeOrg={handleReset}
+        />
+      )}
+
+      {phase === "not-found" && (
+        <NotFoundState org={submittedOrg!} onBack={handleReset} />
+      )}
+
+      {phase === "error" && error && (
+        <ErrorState error={error} onRetry={handleRetry} onBack={handleReset} />
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Phase resolution
+// ---------------------------------------------------------------------------
+
+function resolvePhase(
+  submittedOrg: string | null,
+  isLoading: boolean,
+  ssoProvider: SsoProviderInfo | null,
+  error: Error | null,
+): Phase {
+  if (!submittedOrg) return "input";
+  if (isLoading) return "loading";
+  if (error) return "error";
+  if (ssoProvider) return "found";
+  return "not-found";
+}
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+
+import { forwardRef } from "react";
+
+interface OrgInputFormProps {
+  readonly value: string;
+  readonly onChange: (value: string) => void;
+  readonly onSubmit: (e: FormEvent) => void;
+}
+
+const OrgInputForm = forwardRef<HTMLInputElement, OrgInputFormProps>(
+  function OrgInputForm({ value, onChange, onSubmit }, ref) {
+    return (
+      <form onSubmit={onSubmit} className="space-y-3">
+        <label
+          htmlFor="sso-org-input"
+          className="block text-sm font-medium text-foreground"
+        >
+          Organization
+        </label>
+        <input
+          ref={ref}
+          id="sso-org-input"
+          type="text"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder="Enter your organization slug"
+          autoComplete="organization"
+          spellCheck={false}
+          className={cn(
+            "block w-full rounded-md border border-input bg-background px-3 py-2",
+            "text-sm text-foreground placeholder:text-muted-foreground",
+            "focus:outline-none focus:ring-2 focus:ring-ring",
+            "transition-colors",
+          )}
+        />
+        <button
+          type="submit"
+          disabled={!value.trim()}
+          className={cn(
+            "w-full rounded-md px-4 py-2 text-sm font-medium",
+            "bg-primary text-primary-foreground",
+            "hover:bg-primary-hover",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "disabled:pointer-events-none disabled:opacity-50",
+            "transition-colors",
+          )}
+        >
+          Continue
+        </button>
+      </form>
+    );
+  },
+);
+
+function LoadingState({ org }: { org: string }) {
+  return (
+    <div
+      className="flex flex-col items-center gap-3 py-4"
+      aria-busy="true"
+      aria-label={`Looking up SSO provider for ${org}`}
+    >
+      <SpinnerIcon />
+      <p className="text-sm text-muted-foreground">
+        Looking up <span className="font-medium text-foreground">{org}</span>&hellip;
+      </p>
+    </div>
+  );
+}
+
+function FoundState({
+  provider,
+  org,
+  onClick,
+  onKeyDown,
+  onChangeOrg,
+}: {
+  provider: SsoProviderInfo;
+  org: string;
+  onClick: () => void;
+  onKeyDown: (e: KeyboardEvent<HTMLButtonElement>) => void;
+  onChangeOrg: () => void;
+}) {
+  return (
+    <div className="space-y-4">
+      <div className="text-center">
+        <p className="text-xs text-muted-foreground">
+          Signing in to{" "}
+          <span className="font-medium text-foreground">{org}</span>
+        </p>
+      </div>
+
+      <button
+        type="button"
+        onClick={onClick}
+        onKeyDown={onKeyDown}
+        className={cn(
+          "flex w-full items-center justify-center gap-2 rounded-md px-4 py-2.5",
+          "text-sm font-medium",
+          "bg-primary text-primary-foreground",
+          "hover:bg-primary-hover",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "transition-colors",
+        )}
+      >
+        <SsoShieldIcon />
+        Sign in with {provider.displayName}
+      </button>
+
+      <button
+        type="button"
+        onClick={onChangeOrg}
+        className="block w-full text-center text-xs text-muted-foreground hover:text-foreground transition-colors"
+      >
+        Not your organization? Change
+      </button>
+    </div>
+  );
+}
+
+function NotFoundState({
+  org,
+  onBack,
+}: {
+  org: string;
+  onBack: () => void;
+}) {
+  return (
+    <div className="space-y-3 text-center">
+      <p className="text-sm text-muted-foreground">
+        No SSO provider configured for{" "}
+        <span className="font-medium text-foreground">{org}</span>.
+      </p>
+      <button
+        type="button"
+        onClick={onBack}
+        className="text-xs text-primary hover:text-primary-hover transition-colors"
+      >
+        Try a different organization
+      </button>
+    </div>
+  );
+}
+
+function ErrorState({
+  error,
+  onRetry,
+  onBack,
+}: {
+  error: Error;
+  onRetry: () => void;
+  onBack: () => void;
+}) {
+  return (
+    <div className="space-y-3 text-center" role="alert">
+      <p className="text-sm text-destructive">{getUserMessage(error)}</p>
+      <div className="flex items-center justify-center gap-3">
+        <button
+          type="button"
+          onClick={onRetry}
+          className={cn(
+            "rounded-md px-3 py-1.5 text-xs font-medium",
+            "bg-primary text-primary-foreground hover:bg-primary-hover",
+            "transition-colors",
+          )}
+        >
+          Retry
+        </button>
+        <button
+          type="button"
+          onClick={onBack}
+          className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+        >
+          Back
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Icons
+// ---------------------------------------------------------------------------
+
+function SpinnerIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      className="animate-spin text-muted-foreground"
+      aria-hidden="true"
+    >
+      <path d="M8 2a6 6 0 1 0 6 6" />
+    </svg>
+  );
+}
+
+function SsoShieldIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M8 1.5L2 4v4c0 3.5 2.5 5.5 6 7 3.5-1.5 6-3.5 6-7V4L8 1.5z" />
+      <path d="M6 8l1.5 1.5L10 6.5" />
+    </svg>
+  );
+}

package/src/identity-provider/index.ts

@@ -0,0 +1,67 @@
+export {
+  useIdentityProviderList,
+  type UseIdentityProviderListReturn,
+} from "./useIdentityProviderList";
+
+export {
+  useIdentityProvider,
+  type UseIdentityProviderReturn,
+} from "./useIdentityProvider";
+
+export {
+  useSsoProvider,
+  type UseSsoProviderReturn,
+} from "./useSsoProvider";
+
+export {
+  useCreateIdentityProvider,
+  type UseCreateIdentityProviderReturn,
+} from "./useCreateIdentityProvider";
+
+export {
+  useUpdateIdentityProvider,
+  type UseUpdateIdentityProviderReturn,
+} from "./useUpdateIdentityProvider";
+
+export {
+  useDeleteIdentityProvider,
+  type UseDeleteIdentityProviderReturn,
+} from "./useDeleteIdentityProvider";
+
+export {
+  IdentityProviderListPanel,
+  type IdentityProviderListPanelProps,
+} from "./IdentityProviderListPanel";
+
+export {
+  CreateIdentityProviderForm,
+  type CreateIdentityProviderFormProps,
+} from "./CreateIdentityProviderForm";
+
+export {
+  type ProviderPreset,
+  type ProviderVariable,
+  type ProviderConfig,
+  PROVIDER_PRESETS,
+  getPreset,
+} from "./presets";
+
+export {
+  ProviderPicker,
+  type ProviderPickerProps,
+} from "./ProviderPicker";
+
+export {
+  IdentityProviderWizard,
+  type IdentityProviderWizardProps,
+} from "./IdentityProviderWizard";
+
+export {
+  IdentityProviderDetailPanel,
+  type IdentityProviderDetailPanelProps,
+} from "./IdentityProviderDetailPanel";
+
+export {
+  SsoLoginPrompt,
+  type SsoLoginPromptProps,
+} from "./SsoLoginPrompt";