feat: i18nify SDK integrated for Amount component

.changeset/purple-flies-end.md

@@ -0,0 +1,23 @@
+---
+'@razorpay/blade': minor
+---
+
+**feat: Added internationalization in Amount component via i18nify.
+References**
+
+- **i18nify-js:** https://www.npmjs.com/package/@razorpay/i18nify-js
+- **i18nify-react:** https://www.npmjs.com/package/@razorpay/i18nify-react
+
+**What changes ?**
+
+1. The `<Amount />` component will now automatically format numbers based on the user's browser locale. For example, `<Amount value={123456.789} currency="INR">` will render `₹1,23,456.79` for browsers with the `en-IN` default locale, whereas it will render `₹123,456.79` for browsers with the `en-US` locale.
+
+2. If you want to enable users to change the locale of your page, add the `@razorpay/i18nify-react` package and wrap your app inside the `I18nProvider`. Utilize the `setI18nState` utility to modify the locale. For more details, please refer to the [documentation](https://www.npmjs.com/package/@razorpay/i18nify-react).
+
+3. Additionally, if you prefer to maintain a fixed locale for your page and amount component, enclose your app within `<I18nProvider initData={{locale: 'locale-you-want'}}>..`. For more details, please refer to the [documentation](https://www.npmjs.com/package/@razorpay/i18nify-react).
+
+**How to update ?**
+
+1. Install i18nify peer dependency `yarn add @razorpay/i18nify-js`
+2. _[Optional]_: Install i18nify-react peer dependency to manage state effectively `yarn add @razorpay/i18nify-react`
+3. Install latest Blade `yarn add @razorpay/blade@latest`

packages/blade/package.json

@@ -269,7 +269,9 @@
     "typescript": "4.9",
     "typescript-transform-paths": "3.4.6",
     "@types/body-scroll-lock": "3.1.0",
-    "ramda": "0.29.1"
+    "ramda": "0.29.1",
+    "@razorpay/i18nify-js": "^1.4.0",
+    "@razorpay/i18nify-react": "^4.0.0"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -283,7 +285,8 @@
     "react-native-svg": "^12.3.0",
     "react-native-gesture-handler": "^2.9.0",
     "@gorhom/bottom-sheet": "^4.4.6",
-    "@gorhom/portal": "^1.0.14"
+    "@gorhom/portal": "^1.0.14",
+    "@razorpay/i18nify-js": "^1.4.0"
   },
   "peerDependenciesMeta": {
     "react-native": {
@@ -298,7 +301,9 @@
     "@storybook/**/react": "18.2.0",
     "react-dom": "18.2.0",
     "react": "18.2.0",
-    "styled-components": "^5"
+    "styled-components": "^5",
+    "@types/react": "17.0.38",
+    "@types/react-native": "0.72.2"
   },
   "bundlemon": {
     "files": [

packages/blade/src/components/Amount/Amount.stories.tsx

@@ -1,16 +1,22 @@
 import type { StoryFn, Meta } from '@storybook/react';
 import { Title } from '@storybook/addon-docs';
+import { getCurrencyList } from '@razorpay/i18nify-js/currency';
+import { I18nProvider, useI18nContext } from '@razorpay/i18nify-react';
+import { useState } from 'react';
 import type { AmountProps } from './Amount';
 import { Amount as AmountComponent } from './Amount';
 import type { AmountHeadingProps, AmountDisplayProps, AmountBodyProps } from './amountTokens';
-import { currencyIndicatorMapping } from './amountTokens';
 import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgTypes';
 import BaseBox from '~components/Box/BaseBox';
 import { Sandbox } from '~utils/storybook/Sandbox';
 import { Display, Text } from '~components/Typography';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
 import { Box } from '~components/Box';
 import { objectKeysWithType } from '~utils/objectKeysWithType';
+import { ActionList, ActionListItem } from '~components/ActionList';
+import { SelectInput } from '~components/Input/DropdownInputTriggers';
+import { Dropdown, DropdownOverlay } from '~components/Dropdown';
+import { Divider } from '~components/Divider';
 
 const Page = (): React.ReactElement => {
   return (
@@ -176,7 +182,7 @@ HumanizeSuffix.args = {
 HumanizeSuffix.storyName = 'Humanize Suffix';
 
 const AmountCurrencyTemplate: StoryFn<typeof AmountComponent> = (args) => {
-  const values = Object.keys(currencyIndicatorMapping);
+  const values = Object.keys(getCurrencyList());
 
   return (
     <BaseBox justifyContent="flex-start" maxHeight="300px" overflowY="auto">
@@ -217,3 +223,98 @@ StrikeThrough.args = {
   isStrikethrough: true,
 };
 StrikeThrough.storyName = 'Strike Through';
+
+// TODO: Replace below with i18nify getDefaultLocales API
+const localeList = [
+  {
+    country: 'India',
+    locale: 'en-IN',
+  },
+  {
+    country: 'USA',
+    locale: 'en-US',
+  },
+  {
+    country: 'Malaysia',
+    locale: 'ms-MY',
+  },
+  {
+    country: 'France',
+    locale: 'fr-FR',
+  },
+  {
+    country: 'Germany',
+    locale: 'de-DE',
+  },
+];
+
+const I18nAmountWrapper = (args: AmountProps): JSX.Element => {
+  const { setI18nState } = useI18nContext();
+  const [currency, setCurrency] = useState('INR');
+
+  return (
+    <>
+      <AmountComponent {...args} currency={currency as AmountProps['currency']} />
+      <Divider marginY="spacing.4" marginTop="spacing.8" />
+      <Dropdown selectionType="single">
+        <SelectInput label="Select currency" />
+        <DropdownOverlay>
+          <ActionList>
+            {Object.keys(getCurrencyList()).map((value) => (
+              <ActionListItem
+                key={value}
+                title={value}
+                value={value}
+                onClick={({ name }) => {
+                  setCurrency(name);
+                }}
+              />
+            ))}
+          </ActionList>
+        </DropdownOverlay>
+      </Dropdown>
+      <Divider marginY="spacing.4" />
+      <Dropdown selectionType="single">
+        <SelectInput label="Select locale" />
+        <DropdownOverlay>
+          <ActionList>
+            {localeList.map((item) => (
+              <ActionListItem
+                key={item.locale}
+                title={`${item.country}(${item.locale})`}
+                value={item.locale}
+                onClick={({ name }) => {
+                  setI18nState?.({ locale: name });
+                }}
+              />
+            ))}
+          </ActionList>
+        </DropdownOverlay>
+      </Dropdown>
+    </>
+  );
+};
+
+const I18nAmountTemplate: StoryFn<typeof AmountComponent> = (args) => {
+  return (
+    <I18nProvider>
+      <BaseBox justifyContent="flex-start" minHeight="300px" overflowY="auto">
+        <BaseBox
+          display="flex"
+          alignItems="baseline"
+          paddingRight="spacing.3"
+          paddingTop="spacing.3"
+          flexDirection="column"
+        >
+          <I18nAmountWrapper {...args} />
+        </BaseBox>
+      </BaseBox>
+    </I18nProvider>
+  );
+};
+
+export const I18nAmount = I18nAmountTemplate.bind({});
+I18nAmount.args = {
+  ...defaultArgs,
+};
+I18nAmount.storyName = 'Amount in diff locales';