@echothink-ui/identity 0.1.0

package/src/components/UserPicker.tsx

@@ -0,0 +1,174 @@
+import * as React from "react";
+import { Tag, TextInput, type SurfaceComponentProps } from "@echothink-ui/core";
+import type { IdentityRef } from "./types";
+
+export interface UserPickerProps
+  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 UserPicker({
+  value,
+  onChange,
+  onSearch,
+  suggestions = [],
+  multiple = true,
+  defaultOpen = false,
+  disabled = false,
+  loading = false,
+  className
+}: UserPickerProps) {
+  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 users selected"
+      : "No user selected";
+  const triggerLabel = multiple ? "Add users" : selected.length ? "Change user" : "Choose user";
+
+  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-user-picker", className].filter(Boolean).join(" ")}
+      data-eth-component="UserPicker"
+      data-disabled={disabled || loading ? "true" : undefined}
+      data-open={open ? "true" : undefined}
+    >
+      <div className="eth-identity-user-picker__control">
+        <div className="eth-identity-user-picker__chips" aria-label="Selected users">
+          {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-user-picker__placeholder">
+              {multiple ? "Select users" : "Select a user"}
+            </span>
+          )}
+        </div>
+        <details
+          open={open}
+          className="eth-popover eth-identity-user-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}
+            tabIndex={disabled || loading ? -1 : undefined}
+            onClick={(event) => {
+              if (disabled || loading) event.preventDefault();
+            }}
+          >
+            <span className="eth-identity-user-picker__trigger">
+              <span>{triggerLabel}</span>
+              <span className="eth-identity-user-picker__count">{selectedLabel}</span>
+              <span className="eth-identity-user-picker__chevron" aria-hidden="true" />
+            </span>
+          </summary>
+          <div className="eth-popover__content eth-identity-user-picker__content">
+            <TextInput
+              ref={searchRef}
+              type="search"
+              labelText="Search users"
+              hideLabel
+              placeholder="Search users"
+              value={query}
+              disabled={disabled || loading}
+              onChange={(event) => {
+                setQuery(event.currentTarget.value);
+                onSearch?.(event.currentTarget.value);
+              }}
+            />
+            <div
+              className="eth-identity-user-picker__suggestions"
+              role="listbox"
+              aria-label="User suggestions"
+              aria-multiselectable={multiple ? true : undefined}
+            >
+              {loading ? (
+                <div className="eth-identity-user-picker__empty" role="status">
+                  Loading users...
+                </div>
+              ) : visibleSuggestions.length ? (
+                visibleSuggestions.map((suggestion) => {
+                  const isSelected = value.includes(suggestion.id);
+                  const meta =
+                    suggestion.email ??
+                    suggestion.role ??
+                    (suggestion.kind === "service-account" ? "Service account" : undefined);
+
+                  return (
+                    <button
+                      key={suggestion.id}
+                      type="button"
+                      className="eth-identity-user-picker__option"
+                      role="option"
+                      aria-selected={isSelected}
+                      disabled={disabled || loading}
+                      onClick={() => toggle(suggestion.id)}
+                    >
+                      <span className="eth-identity-user-picker__option-main">
+                        <span className="eth-identity-user-picker__option-label">
+                          {suggestion.label}
+                        </span>
+                        {meta ? (
+                          <span className="eth-identity-user-picker__option-meta">{meta}</span>
+                        ) : null}
+                      </span>
+                      <span className="eth-identity-user-picker__option-check" aria-hidden="true" />
+                    </button>
+                  );
+                })
+              ) : (
+                <div className="eth-identity-user-picker__empty" role="status">
+                  {query ? "No matching users" : "No users available"}
+                </div>
+              )}
+            </div>
+          </div>
+        </details>
+      </div>
+    </div>
+  );
+}

package/src/components/types.ts

@@ -0,0 +1,89 @@
+import type { EthAction, EthOperationalStatus } from "@echothink-ui/core";
+import type { JsonSchema, RuleDefinition } from "@echothink-ui/forms";
+
+export interface IdentityRef {
+  id: string;
+  label: string;
+  email?: string;
+  avatar?: string;
+  role?: string;
+  kind?: "user" | "service-account" | "group";
+  status?: EthOperationalStatus;
+}
+
+export interface IdentitySubject {
+  id: string;
+  label: string;
+  kind: string;
+  role?: string;
+  description?: string;
+}
+
+export interface PermissionAction {
+  id: string;
+  label: string;
+  group?: string;
+  resource?: string;
+  scope?: string;
+  description?: string;
+}
+
+export type PermissionValue = "allow" | "deny" | "inherit";
+
+export interface AccessReviewResource {
+  resourceId: string;
+  resourceLabel: string;
+  permissions: string[];
+  lastUsedAt?: string;
+}
+
+export interface AccessReviewSubject extends IdentityRef {
+  accessTo: AccessReviewResource[];
+}
+
+export interface AccessFinding {
+  id: string;
+  subjectId: string;
+  reason: string;
+  severity: "info" | "warning" | "error" | "critical";
+}
+
+export interface OrganizationRef {
+  id: string;
+  label: string;
+  description?: string;
+  status?: EthOperationalStatus;
+}
+
+export interface AuditTrailEntry {
+  id: string;
+  timestamp: string;
+  actor: string;
+  action: string;
+  resource: string;
+  outcome: "success" | "failure";
+}
+
+export interface PolicyRule {
+  id: string;
+  effect: "allow" | "deny";
+  subjects: string[];
+  actions: string[];
+  resources: string[];
+  conditions?: string;
+}
+
+export interface ApprovalPolicy {
+  id?: string;
+  name?: string;
+  description?: string;
+  requiredApprovals?: number;
+  rules?: RuleDefinition[];
+  approvers?: IdentityRef[];
+  actions?: EthAction[];
+  [key: string]: unknown;
+}
+
+export interface ApprovalPolicySchema extends JsonSchema {
+  variables?: string[];
+}

package/src/index.tsx

@@ -0,0 +1,35 @@
+import "./styles.css";
+
+export * from "./components/types";
+export * from "./components/IdentityCard";
+export * from "./components/UserPicker";
+export * from "./components/GroupPicker";
+export * from "./components/TeamList";
+export * from "./components/RoleBadge";
+export * from "./components/PermissionMatrix";
+export * from "./components/AccessReviewPanel";
+export * from "./components/InviteUserPanel";
+export * from "./components/OrganizationSwitcher";
+export * from "./components/AccountMenu";
+export * from "./components/SessionStatus";
+export * from "./components/AuditTrail";
+export * from "./components/PolicyRuleViewer";
+export * from "./components/ApprovalPolicyEditor";
+
+export const IdentityComponentNames = [
+  "IdentityCard",
+  "UserPicker",
+  "GroupPicker",
+  "TeamList",
+  "RoleBadge",
+  "PermissionMatrix",
+  "AccessReviewPanel",
+  "InviteUserPanel",
+  "OrganizationSwitcher",
+  "AccountMenu",
+  "SessionStatus",
+  "AuditTrail",
+  "PolicyRuleViewer",
+  "ApprovalPolicyEditor"
+] as const;
+export type IdentityComponentName = (typeof IdentityComponentNames)[number];