razorpay · RgnDunes · Apr 24, 2025 · Apr 24, 2025 · Apr 24, 2025 · Apr 24, 2025
diff --git a/packages/i18nify-playground/src/components/Dashboard/Sidebar/Sidebar.jsx b/packages/i18nify-playground/src/components/Dashboard/Sidebar/Sidebar.jsx
@@ -22,37 +22,52 @@ const SideNavBar = ({ toggleMobileNav, isMobileSidebarOpen }) => {
       top="52px"
       zIndex={2}
     >
-      <SideNavBody>
-        {sidebarItems.map((l1Sections) => (
-          <SideNavSection key={l1Sections.title} title={l1Sections.title}>
-            {l1Sections?.items.map((l1Item) => {
+      <SideNavBody key="sidebar-body">
+        {sidebarItems.map((l1Sections, index) => (
+          <SideNavSection
+            key={`section-${l1Sections.title || index}`}
+            title={l1Sections.title}
+          >
+            {l1Sections?.items.map((l1Item, l1Index) => {
               if (!l1Item.items) {
-                return <NavLink key={l1Item.title} {...l1Item} />;
+                return (
+                  <NavLink key={`l1-${l1Item.title || l1Index}`} {...l1Item} />
+                );
               }
 
               return (
                 <NavLink
-                  key={l1Item.title}
+                  key={`l1-${l1Item.title || l1Index}`}
                   {...l1Item}
                   activeOnLinks={getAllChildHrefs(l1Item.items)}
                   href={l1Item.items[0].href}
                 >
-                  <SideNavLevel key={l1Item.title}>
-                    {l1Item.items?.map((l2Item) => {
+                  <SideNavLevel key={`level-${l1Item.title || l1Index}`}>
+                    {l1Item.items?.map((l2Item, l2Index) => {
                       if (!l2Item.items) {
-                        return <NavLink key={l2Item.title} {...l2Item} />;
+                        return (
+                          <NavLink
+                            key={`l2-${l2Item.title || l2Index}`}
+                            {...l2Item}
+                          />
+                        );
                       }
 
                       return (
                         <NavLink
-                          key={l2Item.title}
+                          key={`l2-${l2Item.title || l2Index}`}
                           {...l2Item}
                           activeOnLinks={getAllChildHrefs(l2Item.items)}
                           href={undefined}
                         >
-                          <SideNavLevel key={l2Item.title}>
-                            {l2Item.items?.map((l3Item) => (
-                              <NavLink key={l3Item.title} {...l3Item} />
+                          <SideNavLevel
+                            key={`level-${l2Item.title || l2Index}`}
+                          >
+                            {l2Item.items?.map((l3Item, l3Index) => (
+                              <NavLink
+                                key={`l3-${l3Item.title || l3Index}`}
+                                {...l3Item}
+                              />
                             ))}
                           </SideNavLevel>
                         </NavLink>

diff --git a/packages/i18nify-playground/src/components/TextEditorForStrings/TextEditorForStrings.jsx b/packages/i18nify-playground/src/components/TextEditorForStrings/TextEditorForStrings.jsx
@@ -6,8 +6,7 @@ const TextEditorForStrings = ({ value }) => {
     <Box
       padding="spacing.4"
       width="100%"
-      // backgroundColor="surface.background.primary.intense"
-      backgroundColor="#223545"
+      backgroundColor="surface.background.primary.intense"
       borderRadius="medium"
     >
       <Text

diff --git a/packages/i18nify-playground/src/components/intlOptions/IntlOptionWithTooltip.jsx b/packages/i18nify-playground/src/components/intlOptions/IntlOptionWithTooltip.jsx
@@ -0,0 +1,72 @@
+import { Box, Tooltip } from '@razorpay/blade/components';
+import React from 'react';
+
+const IntlOptionWithTooltip = ({ children, optionKey }) => {
+  const getTooltipContent = (key) => {
+    const tooltips = {
+      style:
+        'The formatting style to use. Possible values are "decimal" for plain number formatting, "currency" for currency formatting, "percent" for percent formatting, and "unit" for unit formatting.',
+      notation:
+        'The formatting notation to use. Possible values are "standard", "scientific", "engineering", or "compact".',
+      currencyDisplay:
+        'How to display the currency in currency formatting. Possible values are "symbol" to use a localized currency symbol such as €, "code" to use the ISO currency code, "name" to use a localized currency name such as "dollar", and "narrowSymbol" to use a narrow format symbol ("$100" rather than "US$100").',
+      minimumFractionDigits:
+        'The minimum number of fraction digits to use. Possible values are from 0 to 20.',
+      maximumFractionDigits:
+        'The maximum number of fraction digits to use. Possible values are from 0 to 20.',
+      trailingZeroDisplay:
+        'How to display trailing zeros in fraction digits. Possible values are "auto" to keep trailing zeros as needed, and "stripIfInteger" to remove trailing zeros if the number is an integer.',
+      minimumSignificantDigits:
+        'The minimum number of significant digits to use. Possible values are from 1 to 21.',
+      maximumSignificantDigits:
+        'The maximum number of significant digits to use. Possible values are from 1 to 21.',
+      useGrouping:
+        'Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.',
+      compactDisplay:
+        'The compact display to use. Possible values are "short" or "long".',
+      minimumExponentDigits:
+        'The minimum number of exponent digits to use. Possible values are from 0 to 20.',
+      roundingType:
+        'The rounding type to use. Possible values are "ceil", "floor", "round", or "trunc".',
+      minimumIntegerDigits:
+        'The minimum number of integer digits to use. Possible values are from 1 to 21.',
+      calendar:
+        'The calendar to use. Possible values are "buddhist", "chinese", "coptic", "dangi", "ethioaa", "ethiopic", "gregory", "hebrew", "indian", "islamic", "islamic-umalqura", "islamic-tbla", "islamic-civil", "islamic-rgsa", "iso8601", "japanese", "persian", "roc".',
+      numberingSystem:
+        'The numbering system to use. Possible values are "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt".',
+      hourCycle:
+        'The hour cycle to use. Possible values are "h11", "h12", "h23", "h24".',
+      weekday:
+        'The weekday format to use. Possible values are "long", "short", "narrow".',
+      year: 'The year format to use. Possible values are "numeric", "2-digit".',
+      month:
+        'The month format to use. Possible values are "numeric", "2-digit", "long", "short", "narrow".',
+      day: 'The day format to use. Possible values are "numeric", "2-digit".',
+      dayPeriod:
+        'The day period format to use. Possible values are "narrow", "short", "long".',
+      hour: 'The hour format to use. Possible values are "numeric", "2-digit".',
+      minute:
+        'The minute format to use. Possible values are "numeric", "2-digit".',
+      second:
+        'The second format to use. Possible values are "numeric", "2-digit".',
+      fractionalSecondDigits:
+        'The number of fractional second digits to use. Possible values are 1, 2, or 3.',
+      timeZoneName:
+        'The time zone name format to use. Possible values are "long", "short".',
+      dateStyle:
+        'The date style to use. Possible values are "full", "long", "medium", "short".',
+      timeStyle:
+        'The time style to use. Possible values are "full", "long", "medium", "short".',
+    };
+
+    return tooltips[key] || 'No documentation available for this option.';
+  };
+
+  return (
+    <Tooltip content={getTooltipContent(optionKey)}>
+      <Box>{children}</Box>
+    </Tooltip>
+  );
+};
+
+export default IntlOptionWithTooltip;
diff --git a/packages/i18nify-playground/src/components/intlOptions/IntlOptionsDateForm.jsx b/packages/i18nify-playground/src/components/intlOptions/IntlOptionsDateForm.jsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { DATE_FORMAT_INTL_INPUTS } from 'src/constants/date';
 import { useIntlOptionsDateContext } from 'src/context/intlOptionsDateContext';
 import RenderContainer from 'src/pages/common/DropdownContainer';
+import IntlOptionWithTooltip from './IntlOptionWithTooltip';
 
 const IntlOptionsDateForm = ({ utilName }) => {
   const { intlDateOptions, setIntlDateOptions } = useIntlOptionsDateContext();
@@ -21,11 +22,13 @@ const IntlOptionsDateForm = ({ utilName }) => {
   const renderInput = (input) => {
     if (input.supportedUtilName.includes(utilName)) {
       return (
-        <RenderContainer
-          input={input}
-          handleInputChange={handleInputChange}
-          intlOptions={intlDateOptions}
-        />
+        <IntlOptionWithTooltip optionKey={input.key}>
+          <RenderContainer
+            input={input}
+            handleInputChange={handleInputChange}
+            intlOptions={intlDateOptions}
+          />
+        </IntlOptionWithTooltip>
       );
     }
   };

diff --git a/packages/i18nify-playground/src/components/intlOptions/IntlOptionsNumberForm.jsx b/packages/i18nify-playground/src/components/intlOptions/IntlOptionsNumberForm.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { NUMBER_FORMAT_INTL_INPUTS } from 'src/constants/number';
 import { useIntlOptionsContext } from 'src/context/intlOptionsContext';
 import RenderContainer from 'src/pages/common/DropdownContainer';
+import IntlOptionWithTooltip from './IntlOptionWithTooltip';
 
 const IntlOptionsNumberForm = () => {
   const { intlOptions, setIntlOptions } = useIntlOptionsContext();
@@ -18,11 +19,13 @@ const IntlOptionsNumberForm = () => {
 
   const renderInput = (input) => {
     return (
-      <RenderContainer
-        input={input}
-        handleInputChange={handleInputChange}
-        intlOptions={intlOptions}
-      />
+      <IntlOptionWithTooltip optionKey={input.key}>
+        <RenderContainer
+          input={input}
+          handleInputChange={handleInputChange}
+          intlOptions={intlOptions}
+        />
+      </IntlOptionWithTooltip>
     );
   };
 

diff --git a/packages/i18nify-playground/src/pages/Home/Home.jsx b/packages/i18nify-playground/src/pages/Home/Home.jsx
@@ -60,6 +60,7 @@ const Home = () => {
               {MODULES.map((module) => {
                 return (
                   <Link
+                    key={module.title}
                     color="primary"
                     onClick={() => navigate(module.navigatePath)}
                   >
@@ -100,18 +101,11 @@ const Home = () => {
               flexWrap="wrap"
               rowGap="spacing.2"
             >
-              <Box>
-                <Text>i18nify-go</Text>
-              </Box>
-              <Box>
-                <Text>i18nify-java</Text>
-              </Box>
-              <Box>
-                <Text>i18nify-php</Text>
-              </Box>
-              <Box>
-                <Text>i18nify-python</Text>
-              </Box>
+              {['go', 'java', 'php', 'python'].map((lang) => (
+                <Box key={lang}>
+                  <Text>i18nify-{lang}</Text>
+                </Box>
+              ))}
             </Box>
           </Box>
         </Box>

diff --git a/packages/i18nify-playground/src/pages/phone/common/PhoneNumberForm.jsx b/packages/i18nify-playground/src/pages/phone/common/PhoneNumberForm.jsx
@@ -1,6 +1,7 @@
 import {
   ActionList,
   ActionListItem,
+  ActionListItemAsset,
   Box,
   Dropdown,
   DropdownOverlay,
@@ -63,21 +64,21 @@ const PhoneNumberForm = ({
 
               <DropdownOverlay>
                 <ActionList>
-                  <ActionListItem title="-" value="-" />
+                  <ActionListItem title="-" value="-" key="default" />
                   {Object.entries(dialCodeMap).map(([code]) => {
                     return (
                       <ActionListItem
+                        key={code}
                         title={`+ ${code}`}
                         value={`+ ${code}`}
                         leading={
-                          <img
+                          <ActionListItemAsset
                             src={
                               getFlagOfCountry(
                                 dialCodeCountryCodeMap?.[code]?.[0] ?? 'US',
                               )?.original
                             }
-                            width="20px"
-                            height="20px"
+                            alt={`Flag of ${dialCodeCountryCodeMap?.[code]?.[0] ?? 'US'}`}
                           />
                         }
                       />