Merge branches 'master' and 'master' of github.com:razorpay/blade

packages/blade/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @razorpay/blade
 
+## 11.2.0
+
+### Minor Changes
+
+- f104cbf3: **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 as dependency `yarn add @razorpay/i18nify-js`
+  2. _[Optional]_: Install i18nify-react as dependency to manage state effectively `yarn add @razorpay/i18nify-react`
+  3. Install latest Blade `yarn add @razorpay/blade@latest`
+
+## 11.1.1
+
+### Patch Changes
+
+- 9801ff86: - feat(Dropdown): add E2E tests
+
+  - fix(Dropdown): dropdown getting closed without explicit isOpen={false} in controlled dropdown
+
+  > [!Note]
+  >
+  > if you have used ControlledDropdown in a similar way how it was documented, things should work fine.
+  >
+  > If you have used `isOpen` from Controlled Dropdown but you're not handling it inside `onOpenChange`, you will have to handle that state as well. E.g. `isOpen={isDropdownOpen} onOpenChange={(isOpen) => setIsDropdownOpen(isOpen)}`
+
 ## 11.1.0
 
 ### Minor Changes

packages/blade/docs/guides/Installation.stories.mdx

@@ -40,47 +40,52 @@ Before you install the package, make sure that you have performed the following
 
 ## ⬇ Add blade to your application
 
-1. Install blade as a dependency. 
-Blade has a peer dependency on a few libraries, you can skip adding it if you already have it installed in your project.
+1. Install blade as a dependency.
+   Blade has a peer dependency on a few libraries, you can skip adding it if you already have it installed in your project.
 
-  - `styled-components`
+```shell
+yarn add @razorpay/blade [email protected] @razorpay/i18nify-js @razorpay/i18nify-react
+```
+
+- `styled-components`
   > **Note**
   >
   > Currently, blade only supports styled-components v5 only
+- `@razorpay/i18nify-js`
+  - Blade uses this library for formatting capabilities in [Amount](https://blade.razorpay.com/?path=/docs/components-amount--docs) and other components based on the locale. Follow [this guide](https://www.npmjs.com/package/@razorpay/i18nify-js) to install it.
+- `@razorpay/i18nify-react`
+  - A state management React wrapper for `@razorpay/i18nify-js` that maintains locale state of your page. Follow [this guide](https://www.npmjs.com/package/@razorpay/i18nify-react) to configure and install it.
 
-   ```shell
-   yarn add @razorpay/blade [email protected]
-   ```
 2. Follow [this guide](#-install-fonts) to install the fonts.
 
-3. For **React Native** projects you need to do additional setup for the peer dependencies: 
-
-  ```shell
-  yarn add @floating-ui/[email protected] [email protected] [email protected] [email protected] [email protected] [email protected] @gorhom/[email protected] @gorhom/[email protected]
-  ```
-
-  - `react-native-reanimated`
-    - Follow [this guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation) to install it on Android & iOS which is required by Blade.
-  - `react-native-svg`
-    - Follow [this guide](https://github.com/react-native-svg/react-native-svg#with-react-native-cli) to install it on Android & iOS which is required by Blade.
-  - `react-native-gesture-handler`
-    - Follow [this guide](https://docs.swmansion.com/react-native-gesture-handler/docs/installation) to install it, note that you don't need to add `<GestureHandlerRootView style={{ flex: 1 }}>` again on the root because BladeProvider already adds that out of the box.
-  - `@gorhom/bottom-sheet`
-    - Add this as peer dependency, no need to do additional setup since BladeProvider already sets everything up.
-  - `@gorhom/portal`
-    - Add this as peer dependency, no need to do additional setup since BladeProvider already sets everything up.
-  - `@floating-ui/react-native`
-    - Add this as peer dependency, no need to do additional setup.
-  - `react-native-tab-view`
-    - Add this as peer dependency, no need to do additional setup. This is needed for react-native Tabs component as per [this guide](https://reactnavigation.org/docs/tab-view/#installation).
-  - `react-native-pager-view`
-    - Add this as peer dependency, no need to do additional setup. This is needed for react-native Tabs component as per [this guide](https://reactnavigation.org/docs/tab-view/#installation).
-
-  And finally run `pod install` command so that blade's RN dependencies are linked to your project: 
-
-   ```shell
-    cd ios && pod install
-   ```
+3. For **React Native** projects you need to do additional setup for the peer dependencies:
+
+```shell
+yarn add @floating-ui/[email protected] [email protected] [email protected] [email protected] [email protected] [email protected] @gorhom/[email protected] @gorhom/[email protected]
+```
+
+- `react-native-reanimated`
+  - Follow [this guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation) to install it on Android & iOS which is required by Blade.
+- `react-native-svg`
+  - Follow [this guide](https://github.com/react-native-svg/react-native-svg#with-react-native-cli) to install it on Android & iOS which is required by Blade.
+- `react-native-gesture-handler`
+  - Follow [this guide](https://docs.swmansion.com/react-native-gesture-handler/docs/installation) to install it, note that you don't need to add `<GestureHandlerRootView style={{ flex: 1 }}>` again on the root because BladeProvider already adds that out of the box.
+- `@gorhom/bottom-sheet`
+  - Add this as peer dependency, no need to do additional setup since BladeProvider already sets everything up.
+- `@gorhom/portal`
+  - Add this as peer dependency, no need to do additional setup since BladeProvider already sets everything up.
+- `@floating-ui/react-native`
+  - Add this as peer dependency, no need to do additional setup.
+- `react-native-tab-view`
+  - Add this as peer dependency, no need to do additional setup. This is needed for react-native Tabs component as per [this guide](https://reactnavigation.org/docs/tab-view/#installation).
+- `react-native-pager-view`
+  - Add this as peer dependency, no need to do additional setup. This is needed for react-native Tabs component as per [this guide](https://reactnavigation.org/docs/tab-view/#installation).
+
+And finally run `pod install` command so that blade's RN dependencies are linked to your project:
+
+```shell
+ cd ios && pod install
+```
 
 ## 🔜 Add blade libraries to your Figma project
 
@@ -162,4 +167,4 @@ We use 2 fonts. [TASA Orbiter](https://tasatype.localremote.co/) (for our headin
       ReactFontManager.getInstance().addCustomFont(this, "TASA Orbiter Display", R.font.tasa);
       // rest of the content of the method
     }
-    ```
+    ```

packages/blade/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "11.1.0",
+  "version": "11.2.0",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"
@@ -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": {

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

@@ -1,24 +1,32 @@
 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 (
     <StoryPageWrapper
       componentName="Amount"
       componentDescription="Amounts are used to show small amount of color coded metadata, which are ideal for getting user attention."
-      note="This component only displays the provided value in the specified currency, it does not perform any currency conversion."
+      note="This component only displays the provided value in the specified currency with the formatting capabilities enabled by @razorpay/i18nify-react, it does not perform any currency conversion."
       figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=73328-558626&mode=design&t=JkDSnlo8KJOBJimR-4"
+      propsDescription="The Amount component automatically formats numbers based on the user's browser locale enabled by @razorpay/i18nify-react. To adjust the locale according to your page, utilise its hooks for updating the locale. For more details, please refer to
+      the documentation of @razorpay/i18nify-react library."
     >
       <Title>Usage</Title>
       <Sandbox>
@@ -176,7 +184,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 +225,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';