feat: i18nify SDK integrated for Amount component
#2003
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 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` | ||
tarun-khanna marked this conversation as resolved.
Show resolved
Hide resolved
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -1,23 +1,30 @@ | ||||||
| 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 { 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'; | ||||||
| import { Link } from '~components/Link'; | ||||||
|
|
||||||
| 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 with the formatting capabilities enabled by @razorpay/i18nify-js (https://www.npmjs.com/package/@razorpay/i18nify-js), it does not perform any currency conversion." | ||||||
|
There was a problem hiding this comment.
Suggested change
|
||||||
| figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=73328-558626&mode=design&t=JkDSnlo8KJOBJimR-4" | ||||||
| > | ||||||
| <Title>Usage</Title> | ||||||
|
|
@@ -31,6 +38,22 @@ const Page = (): React.ReactElement => { | |||||
| export default App; | ||||||
| `} | ||||||
| </Sandbox> | ||||||
| <Box marginBottom="spacing.10"> | ||||||
| <Text> | ||||||
| The Amount component automatically formats numbers based on the user's browser locale | ||||||
|
There was a problem hiding this comment. you can use the propname There was a problem hiding this comment. can you update the messaging a bit? for more details of what? please refer to the documentation of what? |
||||||
| enabled by{' '} | ||||||
| <Link href="https://www.npmjs.com/package/@razorpay/i18nify-js"> | ||||||
| @razorpay/i18nify-js | ||||||
| </Link> | ||||||
| . To adjust the locale according to your page, add{' '} | ||||||
| <Link href="https://www.npmjs.com/package/@razorpay/i18nify-react"> | ||||||
| @razorpay/i18nify-react | ||||||
| </Link>{' '} | ||||||
| library and utilise its hooks for updating the locale. For more details, please refer to | ||||||
| the{' '} | ||||||
| <Link href="https://www.npmjs.com/package/@razorpay/i18nify-react">documentation.</Link> | ||||||
| </Text> | ||||||
| </Box> | ||||||
| </StoryPageWrapper> | ||||||
| ); | ||||||
| }; | ||||||
|
|
@@ -176,7 +199,7 @@ HumanizeSuffix.args = { | |||||
| HumanizeSuffix.storyName = 'Humanize Suffix'; | ||||||
|
|
||||||
| const AmountCurrencyTemplate: StoryFn<typeof AmountComponent> = (args) => { | ||||||
| const values = Object.keys(getCurrencyList()); | ||||||
|
|
||||||
| return ( | ||||||
| <BaseBox justifyContent="flex-start" maxHeight="300px" overflowY="auto"> | ||||||
|
|
@@ -217,3 +240,98 @@ StrikeThrough.args = { | |||||
| isStrikethrough: true, | ||||||
| }; | ||||||
| StrikeThrough.storyName = 'Strike Through'; | ||||||
|
|
||||||
| // TODO: Replace below with i18nify getDefaultLocales API | ||||||
saurabhdaware marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
| 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 }); | ||||||
|
There was a problem hiding this comment. @tarun-khanna this is setting the context at a global amount's level ideally we shall scope it within this story itself? Why? There was a problem hiding this comment. Setting a state by I18nProvider's To deal with this,
Thoughts ? @kamleshchandnani There was a problem hiding this comment. Okay i'm saying keep it simple from demonstration point of view because right now there's no co-relation to the end consumer that changes in one story is affecting other. what I'm suggesting is wrap another i18n context around just the locale story so the state changes is only affected to that story and not goes all the stories of amount component. No changes in implementation, just how the story is written There was a problem hiding this comment. As discussed earlier, there is no finalised approach here that will resolve this issue so we will be addressing this issue in the next PR. The current one can still go as it is. |
||||||
| }} | ||||||
| /> | ||||||
| ))} | ||||||
| </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'; | ||||||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we shall also update the installation guide with installation of i18nify. its located at
packages/blade/docs/guides/Installation.stories.mdxThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sure, I was planning to send this in a separate PR, but we can incorporate these changes into this one.
I'll need your assist to finalize the content and format for inclusion here. @kamleshchandnani
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yes please add it in this PR itself because everything is related to Amount in this context. Let me know what exactly do you need help with?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
updated.