@echothink-ui/identity 0.1.0

package/src/components/ApprovalPolicyEditor.tsx

@@ -0,0 +1,131 @@
+import { useId } from "react";
+import {
+  Badge,
+  FormField,
+  NumberInput,
+  Surface,
+  Tag,
+  TextInput,
+  Textarea,
+  type SurfaceComponentProps
+} from "@echothink-ui/core";
+import { RuleBuilder, type RuleDefinition } from "@echothink-ui/forms";
+import type { ApprovalPolicy, ApprovalPolicySchema } from "./types";
+
+export interface ApprovalPolicyEditorProps extends Omit<
+  SurfaceComponentProps,
+  "children" | "onChange"
+> {
+  policy: ApprovalPolicy;
+  schema: ApprovalPolicySchema;
+  onChange?: (policy: ApprovalPolicy) => void;
+}
+
+export function ApprovalPolicyEditor({
+  policy,
+  schema,
+  onChange,
+  title,
+  description,
+  actions,
+  className,
+  ...props
+}: ApprovalPolicyEditorProps) {
+  const generatedId = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const policyDomId = `eth-identity-policy-${String(policy.id ?? generatedId).replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+  const variables = schema.variables ?? Object.keys(schema.properties ?? {});
+  const rules = policy.rules ?? [];
+  const approvers = policy.approvers ?? [];
+  const requiredApprovals = policy.requiredApprovals ?? 1;
+  const update = (patch: Partial<ApprovalPolicy>) => onChange?.({ ...policy, ...patch });
+
+  return (
+    <Surface
+      {...props}
+      title={title ?? "Approval policy"}
+      description={
+        description ??
+        schema.description ??
+        "Configure approval thresholds, reviewers, and workflow rules for governed actions."
+      }
+      actions={actions ?? policy.actions}
+      className={["eth-identity-approval-policy-editor", className].filter(Boolean).join(" ")}
+      data-eth-component="ApprovalPolicyEditor"
+    >
+      <div className="eth-identity-approval-policy-editor__layout">
+        <div className="eth-identity-approval-policy-editor__fields">
+          <FormField id={`${policyDomId}-name`} label="Policy name" required>
+            <TextInput
+              id={`${policyDomId}-name`}
+              value={policy.name ?? ""}
+              onChange={(event) => update({ name: event.currentTarget.value })}
+            />
+          </FormField>
+          <FormField id={`${policyDomId}-description`} label="Description">
+            <Textarea
+              id={`${policyDomId}-description`}
+              value={policy.description ?? ""}
+              onChange={(event) => update({ description: event.currentTarget.value })}
+            />
+          </FormField>
+          <FormField
+            id={`${policyDomId}-required`}
+            label="Required approvals"
+            helperText="Minimum number of reviewers who must approve before the workflow can continue."
+          >
+            <NumberInput
+              id={`${policyDomId}-required`}
+              min={1}
+              value={requiredApprovals}
+              onChange={(event) => update({ requiredApprovals: Number(event.currentTarget.value) })}
+            />
+          </FormField>
+        </div>
+
+        <aside
+          className="eth-identity-approval-policy-editor__summary"
+          aria-label="Approval policy summary"
+        >
+          <div className="eth-identity-approval-policy-editor__summary-header">
+            <h3>Workflow gates</h3>
+            <Badge severity={rules.length ? "success" : "warning"}>
+              {rules.length ? "Configured" : "Needs rules"}
+            </Badge>
+          </div>
+          <dl className="eth-identity-approval-policy-editor__summary-grid">
+            <div>
+              <dt>Required approvals</dt>
+              <dd>{requiredApprovals}</dd>
+            </div>
+            <div>
+              <dt>Rules</dt>
+              <dd>{rules.length}</dd>
+            </div>
+            <div>
+              <dt>Approvers</dt>
+              <dd>{approvers.length ? approvers.length : "Unassigned"}</dd>
+            </div>
+          </dl>
+          <div className="eth-identity-approval-policy-editor__approvers">
+            <span>Reviewer pool</span>
+            {approvers.length ? (
+              <div className="eth-identity-approval-policy-editor__approver-list">
+                {approvers.map((approver) => (
+                  <Tag key={approver.id}>{approver.label}</Tag>
+                ))}
+              </div>
+            ) : (
+              <p>No approvers assigned to this policy.</p>
+            )}
+          </div>
+        </aside>
+      </div>
+      <RuleBuilder
+        className="eth-identity-approval-policy-editor__rules"
+        rules={rules as RuleDefinition[]}
+        variables={variables}
+        onChange={(nextRules) => update({ rules: nextRules })}
+      />
+    </Surface>
+  );
+}

package/src/components/AuditTrail.tsx

@@ -0,0 +1,105 @@
+import { Badge, EmptyState, Surface, type EthSeverity, type SurfaceComponentProps } from "@echothink-ui/core";
+import { DataTable, type DataColumn } from "@echothink-ui/data";
+import type { AuditTrailEntry } from "./types";
+
+export interface AuditTrailProps extends Omit<SurfaceComponentProps, "children"> {
+  entries: AuditTrailEntry[];
+}
+
+type AuditTrailRow = Record<string, unknown> & AuditTrailEntry;
+
+export function AuditTrail({
+  entries,
+  title = "Audit trail",
+  subtitle,
+  description = "Identity and access audit history ordered by latest event.",
+  density = "compact",
+  metadata,
+  className,
+  role,
+  "aria-label": ariaLabel,
+  ...props
+}: AuditTrailProps) {
+  const rows: AuditTrailRow[] = entries.map((entry) => ({ ...entry }));
+  const successCount = entries.filter((entry) => entry.outcome === "success").length;
+  const failureCount = entries.length - successCount;
+  const resolvedSubtitle = subtitle ?? `${entries.length} ${entries.length === 1 ? "event" : "events"}`;
+  const resolvedMetadata =
+    metadata ?? [
+      { label: "Events", value: entries.length },
+      { label: "Successful", value: successCount },
+      { label: "Failures", value: failureCount }
+    ];
+  const columns: DataColumn<AuditTrailRow>[] = [
+    {
+      key: "timestamp",
+      header: "Time",
+      width: "8.5rem",
+      render: (row) => (
+        <time className="eth-identity-audit-trail__time">{row.timestamp}</time>
+      )
+    },
+    {
+      key: "actor",
+      header: "Actor",
+      width: "9rem",
+      render: (row) => <span className="eth-identity-audit-trail__actor">{row.actor}</span>
+    },
+    {
+      key: "action",
+      header: "Action",
+      width: "11rem",
+      render: (row) => <span className="eth-identity-audit-trail__action">{row.action}</span>
+    },
+    {
+      key: "resource",
+      header: "Resource",
+      render: (row) => <span className="eth-identity-audit-trail__resource">{row.resource}</span>
+    },
+    {
+      key: "outcome",
+      header: "Outcome",
+      width: "8rem",
+      render: (row) => (
+        <span className="eth-identity-audit-trail__outcome">
+          <Badge severity={outcomeSeverity(row.outcome)}>{outcomeLabel(row.outcome)}</Badge>
+        </span>
+      )
+    }
+  ];
+
+  return (
+    <Surface
+      {...props}
+      title={title}
+      subtitle={resolvedSubtitle}
+      description={description}
+      density={density}
+      metadata={resolvedMetadata}
+      className={["eth-identity-audit-trail", className].filter(Boolean).join(" ")}
+      data-eth-component="AuditTrail"
+      role={role ?? "region"}
+      aria-label={ariaLabel ?? (typeof title === "string" ? title : "Audit trail")}
+    >
+      <DataTable
+        rows={rows}
+        columns={columns}
+        density={density}
+        emptyState={
+          <EmptyState
+            title="No audit events"
+            description="Identity and access events will appear here when they are recorded."
+          />
+        }
+      />
+    </Surface>
+  );
+}
+
+function outcomeSeverity(outcome: AuditTrailEntry["outcome"]): EthSeverity {
+  return outcome === "success" ? "success" : "danger";
+}
+
+function outcomeLabel(outcome: AuditTrailEntry["outcome"]) {
+  return outcome === "success" ? "Success" : "Failure";
+}

package/src/components/GroupPicker.tsx

@@ -0,0 +1,175 @@
+import * as React from "react";
+import { Tag, TextInput, type SurfaceComponentProps } from "@echothink-ui/core";
+import type { IdentityRef } from "./types";
+
+export interface GroupPickerProps extends Omit<
+  SurfaceComponentProps,
+  "children" | "onChange" | "value"
+> {
+  value: string[];
+  onChange?: (value: string[]) => void;
+  onSearch?: (query: string) => void;
+  suggestions?: IdentityRef[];
+  multiple?: boolean;
+  defaultOpen?: boolean;
+  disabled?: boolean;
+}
+
+export function GroupPicker({
+  value,
+  onChange,
+  onSearch,
+  suggestions = [],
+  multiple = true,
+  defaultOpen = false,
+  disabled = false,
+  loading = false,
+  className
+}: GroupPickerProps) {
+  const [query, setQuery] = React.useState("");
+  const [open, setOpen] = React.useState(defaultOpen);
+  const searchRef = React.useRef<HTMLInputElement>(null);
+  const selected = value.map(
+    (id) => suggestions.find((item) => item.id === id) ?? { id, label: id }
+  );
+  const normalizedQuery = query.trim().toLocaleLowerCase();
+  const visibleSuggestions = normalizedQuery
+    ? suggestions.filter((suggestion) =>
+        [suggestion.label, suggestion.email, suggestion.role, suggestion.kind]
+          .filter((field): field is string => typeof field === "string")
+          .some((field) => field.toLocaleLowerCase().includes(normalizedQuery))
+      )
+    : suggestions;
+  const selectedLabel = selected.length
+    ? `${selected.length} selected`
+    : multiple
+      ? "No groups selected"
+      : "No group selected";
+  const triggerLabel = multiple ? "Add groups" : selected.length ? "Change group" : "Choose group";
+
+  const toggle = (id: string) => {
+    if (disabled || loading) return;
+
+    if (!multiple) {
+      onChange?.([id]);
+      setOpen(false);
+      return;
+    }
+
+    onChange?.(value.includes(id) ? value.filter((item) => item !== id) : [...value, id]);
+  };
+
+  return (
+    <div
+      className={["eth-identity-group-picker", className].filter(Boolean).join(" ")}
+      data-eth-component="GroupPicker"
+      data-disabled={disabled || loading ? "true" : undefined}
+      data-open={open ? "true" : undefined}
+    >
+      <div className="eth-identity-group-picker__control">
+        <div className="eth-identity-group-picker__chips" aria-label="Selected groups">
+          {selected.length ? (
+            selected.map((item) => (
+              <Tag
+                key={item.id}
+                removable={!disabled && !loading}
+                onRemove={() => onChange?.(value.filter((id) => id !== item.id))}
+              >
+                {item.label}
+              </Tag>
+            ))
+          ) : (
+            <span className="eth-identity-group-picker__placeholder">
+              {multiple ? "Select groups" : "Select a group"}
+            </span>
+          )}
+        </div>
+        <details
+          open={open}
+          className="eth-popover eth-identity-group-picker__popover"
+          onToggle={(event) => {
+            const nextOpen = event.currentTarget.open;
+            setOpen(nextOpen);
+
+            if (nextOpen) window.setTimeout(() => searchRef.current?.focus(), 0);
+          }}
+        >
+          <summary
+            aria-label={`${triggerLabel}. ${selectedLabel}`}
+            aria-disabled={disabled || loading ? true : undefined}
+            onClick={(event) => {
+              if (disabled || loading) event.preventDefault();
+            }}
+          >
+            <span className="eth-identity-group-picker__trigger">
+              <span>{triggerLabel}</span>
+              <span className="eth-identity-group-picker__count">{selectedLabel}</span>
+              <span className="eth-identity-group-picker__chevron" aria-hidden="true" />
+            </span>
+          </summary>
+          <div className="eth-popover__content eth-identity-group-picker__content">
+            <TextInput
+              ref={searchRef}
+              type="search"
+              placeholder="Search groups"
+              value={query}
+              disabled={disabled || loading}
+              onChange={(event) => {
+                setQuery(event.currentTarget.value);
+                onSearch?.(event.currentTarget.value);
+              }}
+            />
+            <div
+              className="eth-identity-group-picker__suggestions"
+              role="listbox"
+              aria-label="Group suggestions"
+              aria-multiselectable={multiple ? true : undefined}
+            >
+              {loading ? (
+                <div className="eth-identity-group-picker__empty" role="status">
+                  Loading groups...
+                </div>
+              ) : visibleSuggestions.length ? (
+                visibleSuggestions.map((suggestion) => {
+                  const isSelected = value.includes(suggestion.id);
+                  const meta =
+                    suggestion.role ??
+                    suggestion.email ??
+                    (suggestion.kind === "group" ? "Group" : undefined);
+
+                  return (
+                    <button
+                      key={suggestion.id}
+                      type="button"
+                      className="eth-identity-group-picker__option"
+                      role="option"
+                      aria-selected={isSelected}
+                      onClick={() => toggle(suggestion.id)}
+                    >
+                      <span className="eth-identity-group-picker__option-main">
+                        <span className="eth-identity-group-picker__option-label">
+                          {suggestion.label}
+                        </span>
+                        {meta ? (
+                          <span className="eth-identity-group-picker__option-meta">{meta}</span>
+                        ) : null}
+                      </span>
+                      <span
+                        className="eth-identity-group-picker__option-check"
+                        aria-hidden="true"
+                      />
+                    </button>
+                  );
+                })
+              ) : (
+                <div className="eth-identity-group-picker__empty" role="status">
+                  {query ? "No matching groups" : "No groups available"}
+                </div>
+              )}
+            </div>
+          </div>
+        </details>
+      </div>
+    </div>
+  );
+}

package/src/components/IdentityCard.tsx

@@ -0,0 +1,78 @@
+import {
+  ActionGroup,
+  Badge,
+  StatusDot,
+  Surface,
+  type EthAction,
+  type EthOperationalStatus,
+  type SurfaceComponentProps
+} from "@echothink-ui/core";
+import { RoleBadge } from "./RoleBadge";
+
+export interface IdentityCardProps extends Omit<SurfaceComponentProps, "children" | "actions"> {
+  identity: {
+    id: string;
+    label: string;
+    email?: string;
+    avatar?: string;
+    role?: string;
+    kind: "user" | "service-account" | "group";
+    status?: EthOperationalStatus;
+  };
+  actions?: EthAction[];
+}
+
+export function IdentityCard({ identity, actions, className, ...props }: IdentityCardProps) {
+  return (
+    <Surface
+      {...props}
+      className={["eth-identity-card", `eth-identity-card--${identity.kind}`, className]
+        .filter(Boolean)
+        .join(" ")}
+      data-eth-component="IdentityCard"
+    >
+      <div className="eth-identity-card__body">
+        <Avatar label={identity.label} src={identity.avatar} />
+        <div className="eth-identity-card__main">
+          <h3>{identity.label}</h3>
+          {identity.email ? <p>{identity.email}</p> : null}
+          <div className="eth-identity-card__meta">
+            <Badge severity="neutral">{formatIdentityKind(identity.kind)}</Badge>
+            {identity.role ? <RoleBadge role={identity.role} /> : null}
+            {identity.status ? (
+              <StatusDot status={identity.status} label={formatIdentityStatus(identity.status)} />
+            ) : null}
+          </div>
+        </div>
+        <ActionGroup actions={actions} />
+      </div>
+    </Surface>
+  );
+}
+
+function Avatar({ label, src }: { label: string; src?: string }) {
+  if (src) return <img className="eth-identity-card__avatar" src={src} alt="" aria-hidden="true" />;
+  return (
+    <span className="eth-identity-card__avatar" aria-hidden="true">
+      {initials(label)}
+    </span>
+  );
+}
+
+function initials(label: string) {
+  return label
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase())
+    .join("");
+}
+
+function formatIdentityKind(kind: IdentityCardProps["identity"]["kind"]) {
+  if (kind === "service-account") return "service account";
+  return kind;
+}
+
+function formatIdentityStatus(status: NonNullable<IdentityCardProps["identity"]["status"]>) {
+  return status.replace(/-/g, " ");
+}

package/src/components/InviteUserPanel.tsx

@@ -0,0 +1,162 @@
+import * as React from "react";
+import {
+  Button,
+  FormField,
+  Select,
+  Surface,
+  TextInput,
+  type SurfaceComponentProps
+} from "@echothink-ui/core";
+
+export type InviteRole = string | { id: string; label: string };
+
+export interface InviteUserPanelProps extends Omit<SurfaceComponentProps, "children"> {
+  roles: InviteRole[];
+  onInvite?: (email: string, role: string) => void;
+  defaultEmail?: string;
+  defaultRole?: string;
+  inviteLabel?: React.ReactNode;
+}
+
+function isValidInviteEmail(email: string) {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+}
+
+export function InviteUserPanel({
+  roles,
+  onInvite,
+  title = "Invite user",
+  description = "Send a workspace invitation and assign the recipient's initial access role.",
+  defaultEmail = "",
+  defaultRole,
+  inviteLabel = "Send invite",
+  className,
+  ...props
+}: InviteUserPanelProps) {
+  const options = React.useMemo(
+    () =>
+      roles.map((role) =>
+        typeof role === "string"
+          ? { value: role, label: role }
+          : { value: role.id, label: role.label }
+      ),
+    [roles]
+  );
+  const preferredRole = options.some((option) => option.value === defaultRole)
+    ? defaultRole
+    : options[0]?.value;
+  const [email, setEmail] = React.useState(defaultEmail);
+  const [emailTouched, setEmailTouched] = React.useState(false);
+  const [role, setRole] = React.useState(preferredRole ?? "");
+  const [roleTouched, setRoleTouched] = React.useState(false);
+  const baseId = React.useId();
+  const emailId = `${baseId}-email`;
+  const roleId = `${baseId}-role`;
+  const trimmedEmail = email.trim();
+  const emailIsValid = isValidInviteEmail(trimmedEmail);
+  const selectedRole = options.find((option) => option.value === role);
+  const emailError = emailTouched
+    ? trimmedEmail
+      ? emailIsValid
+        ? undefined
+        : "Enter a valid email address."
+      : "Email is required."
+    : undefined;
+  const roleError = roleTouched && !role ? "Select a role." : undefined;
+  const canInvite = Boolean(onInvite && emailIsValid && role);
+  const inviteStatus = onInvite
+    ? canInvite
+      ? "Ready to send"
+      : "Needs required fields"
+    : "Unavailable";
+
+  React.useEffect(() => {
+    if (!options.some((option) => option.value === role)) {
+      setRole(preferredRole ?? "");
+    }
+  }, [options, preferredRole, role]);
+
+  return (
+    <Surface
+      {...props}
+      title={title}
+      description={description}
+      className={["eth-identity-invite-user", className].filter(Boolean).join(" ")}
+      data-eth-component="InviteUserPanel"
+    >
+      <form
+        noValidate
+        onSubmit={(event) => {
+          event.preventDefault();
+          setEmailTouched(true);
+          setRoleTouched(true);
+          if (emailIsValid && role) onInvite?.(trimmedEmail, role);
+        }}
+      >
+        <div className="eth-identity-invite-user__layout">
+          <div className="eth-identity-invite-user__fields">
+            <FormField
+              id={emailId}
+              label="Email"
+              helperText="Use the recipient's managed workspace email address."
+              error={emailError}
+              required
+            >
+              <TextInput
+                id={emailId}
+                type="email"
+                value={email}
+                placeholder="name@company.com"
+                autoComplete="email"
+                onBlur={() => setEmailTouched(true)}
+                onChange={(event) => setEmail(event.currentTarget.value)}
+              />
+            </FormField>
+            <FormField
+              id={roleId}
+              label="Role"
+              helperText="Choose the initial permission set for this invite."
+              error={roleError}
+              required
+            >
+              <Select
+                id={roleId}
+                value={role}
+                options={options}
+                disabled={!options.length}
+                onBlur={() => setRoleTouched(true)}
+                onChange={(event) => {
+                  setRoleTouched(true);
+                  setRole(event.currentTarget.value);
+                }}
+              />
+            </FormField>
+          </div>
+          <div className="eth-identity-invite-user__summary" aria-live="polite">
+            <span className="eth-identity-invite-user__summary-label">Invitation summary</span>
+            <dl>
+              <div>
+                <dt>Recipient</dt>
+                <dd>{trimmedEmail || "Waiting for email"}</dd>
+              </div>
+              <div>
+                <dt>Initial role</dt>
+                <dd>{selectedRole?.label ?? "No role selected"}</dd>
+              </div>
+              <div>
+                <dt>Status</dt>
+                <dd>{inviteStatus}</dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+        <div className="eth-identity-invite-user__actions">
+          <Button type="submit" disabled={!canInvite}>
+            {inviteLabel}
+          </Button>
+          <p>Access can be reviewed after the recipient accepts the invitation.</p>
+        </div>
+      </form>
+    </Surface>
+  );
+}