@ttoss/components 2.17.0 → 2.19.0

package/README.md

@@ -23,6 +23,7 @@ import { OAuthConsent } from '@ttoss/components';
 
 <OAuthConsent
   clientName="My App"
+  logoUri={searchParams.get('logo_uri') ?? undefined}
   scopes={[
     {
       key: 'openid',

package/dist/index.d.mts

@@ -900,7 +900,13 @@ type OAuthConsentProps = {
    * the consent heading. Falls back to the first letter of `clientName` if the
    * image fails to load. When omitted, no logo is shown (backward-compatible).
    */
-  clientLogoUrl?: string; /** Scope tree to render. */
+  clientLogoUrl?: string;
+  /**
+   * Logo URL sourced directly from the OAuth `logo_uri` parameter appended by
+   * the consent-redirect flow. Takes precedence over `clientLogoUrl` when both
+   * are provided; otherwise the two are interchangeable.
+   */
+  logoUri?: string; /** Scope tree to render. */
   scopes: ConsentScope[];
   /**
    * Called when the user approves. Receives the minimal granted scope set
@@ -965,6 +971,7 @@ declare const collectGrantedScopes: (scopes: ConsentScope[], selected: Set<strin
 declare const OAuthConsent: ({
   clientName,
   clientLogoUrl,
+  logoUri,
   scopes,
   onAuthorize,
   onAuthorized,

package/dist/index.mjs

@@ -1186,9 +1186,28 @@ var FileUploader = ({
 
 //#endregion
 //#region src/components/InstallPwa/InstallPwa.tsx
+var messages$3 = defineMessages({
+  prompt: {
+    id: "d/l4Zg",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Deseja instalar o nosso aplicativo?"
+    }]
+  },
+  install: {
+    id: "rmaMPX",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Instalar"
+    }]
+  }
+});
 var InstallPwaUi = ({
   onInstall
 }) => {
+  const {
+    intl
+  } = useI18n();
   return /* @__PURE__ */jsx(Flex, {
     sx: {
       position: "absolute",
@@ -1209,10 +1228,10 @@ var InstallPwaUi = ({
         padding: 4
       },
       children: [/* @__PURE__ */jsx(Text, {
-        children: "Deseja instalar o nosso aplicativo?"
+        children: intl.formatMessage(messages$3.prompt)
       }), /* @__PURE__ */jsx(Button, {
         onClick: onInstall,
-        children: "Instalar"
+        children: intl.formatMessage(messages$3.install)
       })]
     })
   });
@@ -1800,7 +1819,7 @@ var Menu = ({
 
 //#endregion
 //#region src/components/MetricCard/MetricCard.tsx
-var messages = defineMessages({
+var messages$2 = defineMessages({
   ofMax: {
     id: "oYpm71",
     defaultMessage: [{
@@ -1984,7 +2003,7 @@ var PercentageMetricContent = ({
   });
   const showAlert = percentage !== null && metric.showAlertThreshold !== void 0 && percentage >= metric.showAlertThreshold;
   const isOverLimit = percentage !== null && percentage >= 100;
-  const maxText = metric.max !== null ? formatValue(metric.max) : intl.formatMessage(messages.infinity);
+  const maxText = metric.max !== null ? formatValue(metric.max) : intl.formatMessage(messages$2.infinity);
   return /* @__PURE__ */jsxs(Fragment, {
     children: [/* @__PURE__ */jsxs(Flex, {
       sx: {
@@ -2004,7 +2023,7 @@ var PercentageMetricContent = ({
           fontSize: "sm",
           color: "display.text.secondary.default"
         },
-        children: intl.formatMessage(messages.ofMax, {
+        children: intl.formatMessage(messages$2.ofMax, {
           max: maxText
         })
       })]
@@ -2035,9 +2054,9 @@ var PercentageMetricContent = ({
         sx: {
           color: "display.text.secondary.default"
         },
-        children: percentage !== null ? intl.formatMessage(messages.percentageUsed, {
+        children: percentage !== null ? intl.formatMessage(messages$2.percentageUsed, {
           percentage
-        }) : intl.formatMessage(messages.unlimited)
+        }) : intl.formatMessage(messages$2.unlimited)
       }), showAlert && !isOverLimit && /* @__PURE__ */jsxs(Flex, {
         sx: {
           alignItems: "center",
@@ -2050,7 +2069,7 @@ var PercentageMetricContent = ({
           sx: {
             fontWeight: "medium"
           },
-          children: intl.formatMessage(messages.nearLimit)
+          children: intl.formatMessage(messages$2.nearLimit)
         })]
       }), showAlert && isOverLimit && /* @__PURE__ */jsxs(Flex, {
         sx: {
@@ -2065,7 +2084,7 @@ var PercentageMetricContent = ({
             fontWeight: "medium",
             color: "feedback.text.negative.default"
           },
-          children: intl.formatMessage(messages.reachedLimit)
+          children: intl.formatMessage(messages$2.reachedLimit)
         })]
       })]
     })]
@@ -2083,7 +2102,7 @@ var NumberMetricContent = ({
   const formatValue = metric.formatValue || (val => {
     return val.toString();
   });
-  const maxText = metric.max !== null ? formatValue(metric.max) : intl.formatMessage(messages.infinity);
+  const maxText = metric.max !== null ? formatValue(metric.max) : intl.formatMessage(messages$2.infinity);
   return /* @__PURE__ */jsxs(Fragment, {
     children: [/* @__PURE__ */jsxs(Flex, {
       sx: {
@@ -2102,7 +2121,7 @@ var NumberMetricContent = ({
           fontSize: "sm",
           color: "display.text.secondary.default"
         },
-        children: intl.formatMessage(messages.ofMax, {
+        children: intl.formatMessage(messages$2.ofMax, {
           max: maxText
         })
       })]
@@ -2775,6 +2794,26 @@ var NotificationCard = props => {
 
 //#endregion
 //#region src/components/NotificationsMenu/NotificationsMenu.tsx
+var messages$1 = defineMessages({
+  clearAll: {
+    id: "TqUkps",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Limpar Tudo"
+    }]
+  },
+  empty: {
+    id: "fcbTJg",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Nenhuma notificação"
+    }]
+  }
+});
+/** Caps the unread badge at 99+. A formatted number, not translatable copy. */
+var formatBadgeCount = count => {
+  return count > 99 ? "99+" : String(count);
+};
 var NotificationsMenu = ({
   notifications,
   defaultOpen = false,
@@ -2785,6 +2824,9 @@ var NotificationsMenu = ({
   onClose,
   onClearAll
 }) => {
+  const {
+    intl
+  } = useI18n();
   const [isOpen, setIsOpen] = React.useState(defaultOpen);
   const [openToLeft, setOpenToLeft] = React.useState(false);
   const buttonRef = React.useRef(null);
@@ -2883,7 +2925,7 @@ var NotificationsMenu = ({
             justifyContent: "center",
             lineHeight: 1
           },
-          children: count > 99 ? "99+" : count
+          children: formatBadgeCount(count)
         })]
       }), isOpen && /* @__PURE__ */jsx("div", {
         ref: containerRef,
@@ -2948,7 +2990,7 @@ var NotificationsMenu = ({
                       marginTop: -.4,
                       fontSize: "sm"
                     },
-                    children: "Limpar Tudo"
+                    children: intl.formatMessage(messages$1.clearAll)
                   })]
                 })
               }), notifications.length === 0 ? /* @__PURE__ */jsx(Text, {
@@ -2957,7 +2999,7 @@ var NotificationsMenu = ({
                   textAlign: "center",
                   p: 4
                 },
-                children: "Nenhuma notificação"
+                children: intl.formatMessage(messages$1.empty)
               }) : notifications.map(notification => {
                 return /* @__PURE__ */jsx(NotificationCard, {
                   ...notification,
@@ -2982,10 +3024,25 @@ var NotificationsMenu = ({
 
 //#endregion
 //#region src/components/OAuthConsent/ClientLogo.tsx
+var messages = defineMessages({
+  logoAlt: {
+    id: "dx4ZnR",
+    defaultMessage: [{
+      "type": 1,
+      "value": "name"
+    }, {
+      "type": 0,
+      "value": " logo"
+    }]
+  }
+});
 var ClientLogo = ({
   src,
   clientName
 }) => {
+  const {
+    intl
+  } = useI18n();
   const [errored, setErrored] = React.useState(false);
   if (errored) return /* @__PURE__ */jsx(Flex, {
     "aria-hidden": "true",
@@ -3008,7 +3065,9 @@ var ClientLogo = ({
   });
   return /* @__PURE__ */jsx("img", {
     src,
-    alt: `${clientName} logo`,
+    alt: intl.formatMessage(messages.logoAlt, {
+      name: clientName
+    }),
     onError: () => {
       return setErrored(true);
     },
@@ -3222,6 +3281,7 @@ var ConsentCard = ({
 var OAuthConsent = ({
   clientName,
   clientLogoUrl,
+  logoUri,
   scopes,
   onAuthorize,
   onAuthorized,
@@ -3230,6 +3290,7 @@ var OAuthConsent = ({
   isValidRequest = true,
   labels
 }) => {
+  const resolvedLogoUrl = logoUri ?? clientLogoUrl;
   const [selected, setSelected] = React.useState(() => {
     return initSelected(scopes);
   });
@@ -3271,12 +3332,12 @@ var OAuthConsent = ({
     })]
   });
   return /* @__PURE__ */jsxs(ConsentCard, {
-    children: [clientLogoUrl && /* @__PURE__ */jsx(Box, {
+    children: [resolvedLogoUrl && /* @__PURE__ */jsx(Box, {
       sx: {
         marginBottom: 4
       },
       children: /* @__PURE__ */jsx(ClientLogo, {
-        src: clientLogoUrl,
+        src: resolvedLogoUrl,
         clientName
       })
     }), /* @__PURE__ */jsx(Heading, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "2.17.0",
+  "version": "2.19.0",
   "description": "React components for ttoss ecosystem.",
   "keywords": [
     "React",
@@ -53,20 +53,20 @@
     "react": "^19.2.6",
     "tsdown": "^0.22.2",
     "tsx": "^4.21.0",
-    "@ttoss/config": "^1.37.17",
-    "@ttoss/i18n-cli": "^0.8.17",
-    "@ttoss/react-hooks": "^2.3.20",
-    "@ttoss/react-icons": "^0.7.21",
-    "@ttoss/react-i18n": "^2.3.0",
-    "@ttoss/test-utils": "^4.2.18",
-    "@ttoss/ui": "^6.9.28"
+    "@ttoss/config": "^1.38.0",
+    "@ttoss/react-i18n": "^2.3.1",
+    "@ttoss/i18n-cli": "^0.9.0",
+    "@ttoss/react-icons": "^0.8.0",
+    "@ttoss/react-hooks": "^2.3.21",
+    "@ttoss/ui": "^6.9.29",
+    "@ttoss/test-utils": "^4.2.19"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/react-hooks": "^2.3.20",
-    "@ttoss/react-icons": "^0.7.21",
-    "@ttoss/ui": "^6.9.28",
-    "@ttoss/react-i18n": "^2.3.0"
+    "@ttoss/react-hooks": "^2.3.21",
+    "@ttoss/react-icons": "^0.8.0",
+    "@ttoss/ui": "^6.9.29",
+    "@ttoss/react-i18n": "^2.3.1"
   },
   "publishConfig": {
     "access": "public",