@ttoss/components 2.15.0 → 2.16.1

package/README.md

@@ -14,6 +14,52 @@ pnpm add @ttoss/components @ttoss/ui @emotion/react @ttoss/react-hooks
 
 All components are theme-aware and integrate seamlessly with `@ttoss/ui`.
 
+### OAuthConsent
+
+OAuth consent screen with flat and GitHub-style hierarchical scopes. Granting a parent scope automatically locks all descendants. All visible copy is injected via the `labels` prop — no hardcoded strings. [Docs](https://storybook.ttoss.dev/?path=/docs/components-oauthconsent--docs)
+
+```tsx
+import { OAuthConsent } from '@ttoss/components';
+
+<OAuthConsent
+  clientName="My App"
+  scopes={[
+    {
+      key: 'openid',
+      label: 'OpenID Connect',
+      description: 'Verify your identity',
+      required: true,
+    },
+    {
+      key: 'profile',
+      label: 'Profile',
+      description: 'Read your public profile information',
+    },
+  ]}
+  onAuthorize={async (grantedScopes) => {
+    const res = await authorize({ scopes: grantedScopes });
+    return { ok: res.ok };
+  }}
+  onAuthorized={() => {
+    window.location.href = resumeUrl;
+  }}
+  onDeny={() => navigate('/')}
+  labels={{
+    title: 'Authorize access',
+    requestedBy: (name) => (
+      <>
+        <strong>{name}</strong> is requesting access.
+      </>
+    ),
+    permissionsHeading: 'Requested permissions',
+    approve: 'Authorize',
+    deny: 'Deny',
+    invalidRequestTitle: 'Invalid request',
+    invalidRequestBody: 'Missing required OAuth parameters. Please try again.',
+  }}
+/>;
+```
+
 ### Accordion
 
 Accessible accordion component with collapsible content sections. [Docs](https://storybook.ttoss.dev/?path=/docs/components-accordion--docs)

package/dist/index.d.mts

@@ -854,6 +854,119 @@ declare const NotificationsMenu: ({
   onClearAll
 }: Props) => import("react/jsx-runtime").JSX.Element;
 //#endregion
+//#region src/components/OAuthConsent/OAuthConsent.d.ts
+/**
+ * A single OAuth scope, optionally with implied child scopes.
+ */
+type ConsentScope = {
+  /** OAuth scope token, e.g. 'repo', 'write:packages', 'read'. */key: string; /** Bold display name shown on the left. Pre-translated by the consumer. */
+  label: string; /** Scope description shown below the label. Pre-translated by the consumer. */
+  description: string;
+  /**
+   * Child scopes implied by this one. When this scope is granted, every
+   * descendant is granted and locked (checked + disabled).
+   */
+  children?: ConsentScope[];
+  /**
+   * Pre-checked on mount.
+   * @default false
+   */
+  defaultGranted?: boolean;
+  /**
+   * Always granted; cannot be unchecked. Renders checked + disabled.
+   * @default false
+   */
+  required?: boolean;
+};
+/**
+ * All visible copy for the consent screen. Pre-translated by the consumer.
+ */
+type OAuthConsentLabels = {
+  /** Page heading, e.g. "Authorize access". */title: string; /** Client request line. Receives the client identifier for interpolation. */
+  requestedBy: (clientName: string) => React.ReactNode; /** Section heading above the scope list, e.g. "Requested permissions". */
+  permissionsHeading: string; /** Approve button label, e.g. "Authorize". */
+  approve: string; /** Deny button label, e.g. "Deny". */
+  deny: string; /** Heading shown when required OAuth params are missing. */
+  invalidRequestTitle: string; /** Body text shown when required OAuth params are missing. */
+  invalidRequestBody: string;
+};
+/**
+ * Props for the OAuthConsent component.
+ */
+type OAuthConsentProps = {
+  /** Display name or identifier of the requesting OAuth client. */clientName: string; /** Scope tree to render. */
+  scopes: ConsentScope[];
+  /**
+   * Called when the user approves. Receives the minimal granted scope set
+   * (top-most selected keys; implied descendants omitted). Return `{ ok: true }`
+   * to signal success; the component then calls `onAuthorized`.
+   */
+  onAuthorize: (grantedScopes: string[]) => Promise<{
+    ok: boolean;
+  }>;
+  /**
+   * Called after a successful `onAuthorize`. Use this to redirect to the OAuth
+   * server's resumed /authorize URL. The component does not navigate itself.
+   */
+  onAuthorized: () => void; /** Called when the user clicks Deny. Use this to navigate away. */
+  onDeny: () => void;
+  /**
+   * True while the authorize call is in flight (disables both buttons).
+   * The component also tracks its own internal loading state.
+   */
+  isAuthorizing?: boolean;
+  /**
+   * When false, renders the invalid-request error state instead of the form.
+   * @default true
+   */
+  isValidRequest?: boolean; /** All visible copy. Pre-translated by the consumer. */
+  labels: OAuthConsentLabels;
+};
+/**
+ * Walk the scope tree and return the minimal set of granted scope keys.
+ * When a node is selected, its key is emitted and its subtree is skipped
+ * (the server expands parent scopes to their children). Nodes not in
+ * `selected` are recursed into so that individually-selected children
+ * are still captured.
+ */
+declare const collectGrantedScopes: (scopes: ConsentScope[], selected: Set<string>) => string[];
+/**
+ * Accessible, framework-agnostic OAuth consent screen component.
+ *
+ * Renders a standards-compliant "authorize this client" page with support for
+ * flat and GitHub-style grouped/hierarchical scopes. Granting a parent scope
+ * automatically locks all descendant scopes (checked + disabled). All visible
+ * copy is injected via `labels`; no strings are hardcoded inside this component.
+ *
+ * @example
+ * ```tsx
+ * <OAuthConsent
+ *   clientName="My App"
+ *   scopes={[
+ *     { key: 'read', label: 'Read', description: 'Read access', required: true },
+ *     { key: 'write', label: 'Write', description: 'Write access' },
+ *   ]}
+ *   onAuthorize={async (scopes) => {
+ *     const res = await authorize({ variables: { scopes } });
+ *     return { ok: !!res.ok };
+ *   }}
+ *   onAuthorized={() => { window.location.href = resumeUrl; }}
+ *   onDeny={() => navigate('/')}
+ *   labels={labels}
+ * />
+ * ```
+ */
+declare const OAuthConsent: ({
+  clientName,
+  scopes,
+  onAuthorize,
+  onAuthorized,
+  onDeny,
+  isAuthorizing,
+  isValidRequest,
+  labels
+}: OAuthConsentProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
 //#region src/components/Search/Search.d.ts
 type SearchProps = Omit<InputProps, 'onChange'> & {
   loading?: boolean;
@@ -926,4 +1039,4 @@ declare const Tabs: {
 declare const ToastContainer: (props: ToastContainerProps) => import("react/jsx-runtime").JSX.Element;
 declare const toast: typeof toast$1;
 //#endregion
-export { Accordion, AccordionItem, AccordionProps, AccordionRenderItemProps, BaseMetric, DateMetric, DatePicker, DateRange, Drawer, DrawerProps, EnhancedTitle, EnhancedTitleBadge, EnhancedTitleProps, EnhancedTitleVariant, FileUploadState, FileUploader, FileUploaderProps, InstallPwa, InstallPwaUi, InstallPwaUiProps, JsonEditor, JsonView, type LinkComponentProps, List, ListItem, ListItemProps, ListProps, LockedOverlay, Markdown, MarkdownProps, Menu, MenuProps, Metric, MetricCard, MetricCardProps, Modal, ModalProps, NavList, type NavListGroup, type NavListItem, type NavListProps, Notification, NotificationAction, NotificationButton, NotificationButtonProps, NotificationCard, NotificationCardProps, NotificationsMenu, NumberMetric, OnFilesChange, OnRemove, OnUpload, OnUploadComplete, OnUploadError, OnUploadProgress, OnUploadStart, PercentageMetric, Search, SearchProps, SpotlightCard, SpotlightCardProps, type TabListProps, type TabPanelProps, type TabProps, Table, Tabs, type TabsProps, ToastContainer, type ToastContainerProps, type ToastOptions, UploadResult, UploadedFile, createCell, createColumnHelper, flexRender, getCoreRowModel, toast, useReactTable };
+export { Accordion, AccordionItem, AccordionProps, AccordionRenderItemProps, BaseMetric, ConsentScope, DateMetric, DatePicker, DateRange, Drawer, DrawerProps, EnhancedTitle, EnhancedTitleBadge, EnhancedTitleProps, EnhancedTitleVariant, FileUploadState, FileUploader, FileUploaderProps, InstallPwa, InstallPwaUi, InstallPwaUiProps, JsonEditor, JsonView, type LinkComponentProps, List, ListItem, ListItemProps, ListProps, LockedOverlay, Markdown, MarkdownProps, Menu, MenuProps, Metric, MetricCard, MetricCardProps, Modal, ModalProps, NavList, type NavListGroup, type NavListItem, type NavListProps, Notification, NotificationAction, NotificationButton, NotificationButtonProps, NotificationCard, NotificationCardProps, NotificationsMenu, NumberMetric, OAuthConsent, OAuthConsentLabels, OAuthConsentProps, OnFilesChange, OnRemove, OnUpload, OnUploadComplete, OnUploadError, OnUploadProgress, OnUploadStart, PercentageMetric, Search, SearchProps, SpotlightCard, SpotlightCardProps, type TabListProps, type TabPanelProps, type TabProps, Table, Tabs, type TabsProps, ToastContainer, type ToastContainerProps, type ToastOptions, UploadResult, UploadedFile, collectGrantedScopes, createCell, createColumnHelper, flexRender, getCoreRowModel, toast, useReactTable };

package/dist/index.mjs

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Badge, BaseStyles, Box, Button, Card, CloseButton, Divider, Flex, Heading, IconButton, Input, Label, Link, Stack, Tag, Text, TooltipIcon, keyframes, useResponsiveValue, useTheme } from "@ttoss/ui";
+import { Badge, BaseStyles, Box, Button, Card, Checkbox, CloseButton, Divider, Flex, Heading, IconButton, Input, Label, Link, Stack, Tag, Text, TooltipIcon, keyframes, useResponsiveValue, useTheme } from "@ttoss/ui";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Icon } from "@ttoss/react-icons";
@@ -2980,6 +2980,331 @@ var NotificationsMenu = ({
   });
 };
 
+//#endregion
+//#region src/components/OAuthConsent/OAuthConsent.tsx
+/**
+* Walk the scope tree and return the minimal set of granted scope keys.
+* When a node is selected, its key is emitted and its subtree is skipped
+* (the server expands parent scopes to their children). Nodes not in
+* `selected` are recursed into so that individually-selected children
+* are still captured.
+*/
+var collectGrantedScopes = (scopes, selected) => {
+  const result = [];
+  const walk = nodes => {
+    for (const node of nodes) if (selected.has(node.key)) result.push(node.key);else if (node.children) walk(node.children);
+  };
+  walk(scopes);
+  return result;
+};
+var initSelected = scopes => {
+  const selected = /* @__PURE__ */new Set();
+  const walk = nodes => {
+    for (const node of nodes) {
+      if (node.required || node.defaultGranted) selected.add(node.key);
+      if (node.children) walk(node.children);
+    }
+  };
+  walk(scopes);
+  return selected;
+};
+var getScopeRowState = ({
+  scope,
+  ancestorSelected,
+  selected,
+  busy
+}) => {
+  const isChecked = ancestorSelected || selected.has(scope.key);
+  const isLocked = !!scope.required || ancestorSelected;
+  return {
+    isChecked,
+    isDisabled: isLocked || busy,
+    isInteractive: !isLocked && !busy
+  };
+};
+var ScopeRow = ({
+  scope,
+  ancestorSelected,
+  selected,
+  busy,
+  onToggle
+}) => {
+  const {
+    isChecked,
+    isDisabled,
+    isInteractive
+  } = getScopeRowState({
+    scope,
+    ancestorSelected,
+    selected,
+    busy
+  });
+  const checkboxId = `consent-scope-${scope.key}`;
+  const labelId = `consent-scope-label-${scope.key}`;
+  const descId = `consent-scope-desc-${scope.key}`;
+  return /* @__PURE__ */jsxs(Box, {
+    as: "li",
+    sx: {
+      listStyle: "none"
+    },
+    children: [/* @__PURE__ */jsxs(Flex, {
+      as: "label",
+      sx: {
+        gap: 3,
+        alignItems: "flex-start",
+        paddingX: 3,
+        paddingY: 3,
+        borderRadius: "md",
+        opacity: ancestorSelected ? .55 : 1,
+        transition: "background-color 0.15s ease",
+        cursor: isInteractive ? "pointer" : "default",
+        ...(isInteractive && {
+          "&:hover": {
+            backgroundColor: "display.background.muted.default"
+          }
+        })
+      },
+      children: [/* @__PURE__ */jsx(Box, {
+        sx: {
+          paddingTop: "3px",
+          flexShrink: 0
+        },
+        children: /* @__PURE__ */jsx(Checkbox, {
+          id: checkboxId,
+          checked: isChecked,
+          disabled: isDisabled,
+          "aria-labelledby": labelId,
+          "aria-describedby": descId,
+          onChange: () => {
+            onToggle(scope, ancestorSelected);
+          }
+        })
+      }), /* @__PURE__ */jsxs(Box, {
+        sx: {
+          flex: 1,
+          minWidth: 0
+        },
+        children: [/* @__PURE__ */jsx(Text, {
+          as: "span",
+          id: labelId,
+          sx: {
+            fontWeight: "semibold",
+            fontSize: "md",
+            lineHeight: "short",
+            color: "display.text.primary.default",
+            display: "block"
+          },
+          children: scope.label
+        }), /* @__PURE__ */jsx(Text, {
+          id: descId,
+          sx: {
+            fontSize: "sm",
+            lineHeight: "short",
+            color: "display.text.muted.default",
+            display: "block",
+            marginTop: "1"
+          },
+          children: scope.description
+        })]
+      })]
+    }), scope.children?.length ? /* @__PURE__ */jsx(Box, {
+      as: "ul",
+      sx: {
+        listStyle: "none",
+        margin: 0,
+        padding: 0,
+        marginLeft: 5,
+        paddingLeft: 2,
+        borderLeft: "sm",
+        borderColor: "display.border.muted.default"
+      },
+      children: scope.children?.map(child => {
+        return /* @__PURE__ */jsx(ScopeRow, {
+          scope: child,
+          ancestorSelected: isChecked,
+          selected,
+          busy,
+          onToggle
+        }, child.key);
+      })
+    }) : null]
+  });
+};
+/** Shared centered card shell for the consent and invalid-request views. */
+var ConsentCard = ({
+  children
+}) => {
+  return /* @__PURE__ */jsx(Flex, {
+    sx: {
+      justifyContent: "center",
+      paddingX: 4,
+      paddingY: 6
+    },
+    children: /* @__PURE__ */jsx(Card, {
+      sx: {
+        width: "100%",
+        maxWidth: 480,
+        alignItems: "stretch",
+        padding: 6
+      },
+      children
+    })
+  });
+};
+/**
+* Accessible, framework-agnostic OAuth consent screen component.
+*
+* Renders a standards-compliant "authorize this client" page with support for
+* flat and GitHub-style grouped/hierarchical scopes. Granting a parent scope
+* automatically locks all descendant scopes (checked + disabled). All visible
+* copy is injected via `labels`; no strings are hardcoded inside this component.
+*
+* @example
+* ```tsx
+* <OAuthConsent
+*   clientName="My App"
+*   scopes={[
+*     { key: 'read', label: 'Read', description: 'Read access', required: true },
+*     { key: 'write', label: 'Write', description: 'Write access' },
+*   ]}
+*   onAuthorize={async (scopes) => {
+*     const res = await authorize({ variables: { scopes } });
+*     return { ok: !!res.ok };
+*   }}
+*   onAuthorized={() => { window.location.href = resumeUrl; }}
+*   onDeny={() => navigate('/')}
+*   labels={labels}
+* />
+* ```
+*/
+var OAuthConsent = ({
+  clientName,
+  scopes,
+  onAuthorize,
+  onAuthorized,
+  onDeny,
+  isAuthorizing = false,
+  isValidRequest = true,
+  labels
+}) => {
+  const [selected, setSelected] = React.useState(() => {
+    return initSelected(scopes);
+  });
+  const [isLoading, setIsLoading] = React.useState(false);
+  const busy = isAuthorizing || isLoading;
+  const handleToggle = React.useCallback((scope, ancestorSelected) => {
+    if (scope.required || ancestorSelected) return;
+    setSelected(prev => {
+      const next = new Set(prev);
+      if (next.has(scope.key)) next.delete(scope.key);else next.add(scope.key);
+      return next;
+    });
+  }, []);
+  const handleApprove = React.useCallback(async () => {
+    const grantedScopes = collectGrantedScopes(scopes, selected);
+    setIsLoading(true);
+    try {
+      if ((await onAuthorize(grantedScopes)).ok) onAuthorized();
+    } finally {
+      setIsLoading(false);
+    }
+  }, [scopes, selected, onAuthorize, onAuthorized]);
+  if (!isValidRequest) return /* @__PURE__ */jsxs(ConsentCard, {
+    children: [/* @__PURE__ */jsx(Heading, {
+      as: "h1",
+      sx: {
+        fontSize: "3xl",
+        color: "display.text.primary.default",
+        marginBottom: 3
+      },
+      children: labels.invalidRequestTitle
+    }), /* @__PURE__ */jsx(Text, {
+      sx: {
+        fontSize: "md",
+        lineHeight: "moderate",
+        color: "display.text.secondary.default"
+      },
+      children: labels.invalidRequestBody
+    })]
+  });
+  return /* @__PURE__ */jsxs(ConsentCard, {
+    children: [/* @__PURE__ */jsx(Heading, {
+      as: "h1",
+      sx: {
+        fontSize: "3xl",
+        lineHeight: "shorter",
+        color: "display.text.primary.default",
+        marginBottom: 2
+      },
+      children: labels.title
+    }), /* @__PURE__ */jsx(Text, {
+      sx: {
+        fontSize: "md",
+        lineHeight: "moderate",
+        color: "display.text.secondary.default"
+      },
+      children: labels.requestedBy(clientName)
+    }), /* @__PURE__ */jsx(Divider, {
+      sx: {
+        marginY: 5,
+        borderColor: "display.border.muted.default"
+      }
+    }), /* @__PURE__ */jsx(Heading, {
+      as: "h3",
+      sx: {
+        fontSize: "xs",
+        fontWeight: "semibold",
+        letterSpacing: "wider",
+        textTransform: "uppercase",
+        color: "display.text.muted.default",
+        marginBottom: 2
+      },
+      children: labels.permissionsHeading
+    }), /* @__PURE__ */jsx(Box, {
+      as: "ul",
+      sx: {
+        listStyle: "none",
+        margin: 0,
+        padding: 0
+      },
+      children: scopes.map(scope => {
+        return /* @__PURE__ */jsx(ScopeRow, {
+          scope,
+          ancestorSelected: false,
+          selected,
+          busy,
+          onToggle: handleToggle
+        }, scope.key);
+      })
+    }), /* @__PURE__ */jsxs(Flex, {
+      sx: {
+        gap: 3,
+        marginTop: 6
+      },
+      children: [/* @__PURE__ */jsx(Button, {
+        variant: "secondary",
+        onClick: onDeny,
+        disabled: busy,
+        sx: {
+          flex: 1,
+          justifyContent: "center"
+        },
+        children: labels.deny
+      }), /* @__PURE__ */jsx(Button, {
+        variant: "accent",
+        onClick: handleApprove,
+        disabled: busy,
+        loading: isLoading || isAuthorizing,
+        sx: {
+          flex: 1,
+          justifyContent: "center"
+        },
+        children: labels.approve
+      })]
+    })]
+  });
+};
+
 //#endregion
 //#region src/components/Search/Search.tsx
 var Search = ({
@@ -3178,4 +3503,4 @@ var ToastContainer = props => {
 var toast = toast$1;
 
 //#endregion
-export { Accordion, DatePicker, Drawer, EnhancedTitle, FileUploader, InstallPwa, InstallPwaUi, JsonEditor, JsonView, List, ListItem, LockedOverlay, Markdown, Menu, MetricCard, Modal, NavList, NotificationButton, NotificationCard, NotificationsMenu, Search, SpotlightCard, Table, Tabs, ToastContainer, createCell, createColumnHelper, flexRender, getCoreRowModel, toast, useReactTable };
+export { Accordion, DatePicker, Drawer, EnhancedTitle, FileUploader, InstallPwa, InstallPwaUi, JsonEditor, JsonView, List, ListItem, LockedOverlay, Markdown, Menu, MetricCard, Modal, NavList, NotificationButton, NotificationCard, NotificationsMenu, OAuthConsent, Search, SpotlightCard, Table, Tabs, ToastContainer, collectGrantedScopes, createCell, createColumnHelper, flexRender, getCoreRowModel, toast, useReactTable };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "2.15.0",
+  "version": "2.16.1",
   "description": "React components for ttoss ecosystem.",
   "keywords": [
     "React",
@@ -55,11 +55,11 @@
     "tsx": "^4.21.0",
     "@ttoss/config": "^1.37.17",
     "@ttoss/i18n-cli": "^0.8.17",
-    "@ttoss/react-hooks": "^2.3.20",
     "@ttoss/react-i18n": "^2.3.0",
     "@ttoss/react-icons": "^0.7.21",
-    "@ttoss/ui": "^6.9.28",
-    "@ttoss/test-utils": "^4.2.18"
+    "@ttoss/react-hooks": "^2.3.20",
+    "@ttoss/test-utils": "^4.2.18",
+    "@ttoss/ui": "^6.9.28"
   },
   "peerDependencies": {
     "react": ">=16.8.0",