|
1 | 1 | import type { StoryFn, Meta } from '@storybook/react'; |
2 | 2 | import { Title } from '@storybook/addon-docs'; |
| 3 | +import { getCurrencyList } from '@razorpay/i18nify-js/currency'; |
| 4 | +import { I18nProvider, useI18nContext } from '@razorpay/i18nify-react'; |
| 5 | +import { useState } from 'react'; |
3 | 6 | import type { AmountProps } from './Amount'; |
4 | 7 | import { Amount as AmountComponent } from './Amount'; |
5 | 8 | import type { AmountHeadingProps, AmountDisplayProps, AmountBodyProps } from './amountTokens'; |
6 | | -import { currencyIndicatorMapping } from './amountTokens'; |
7 | 9 | import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgTypes'; |
8 | 10 | import BaseBox from '~components/Box/BaseBox'; |
9 | 11 | import { Sandbox } from '~utils/storybook/Sandbox'; |
10 | 12 | import { Display, Text } from '~components/Typography'; |
11 | 13 | import StoryPageWrapper from '~utils/storybook/StoryPageWrapper'; |
12 | 14 | import { Box } from '~components/Box'; |
13 | 15 | import { objectKeysWithType } from '~utils/objectKeysWithType'; |
| 16 | +import { ActionList, ActionListItem } from '~components/ActionList'; |
| 17 | +import { SelectInput } from '~components/Input/DropdownInputTriggers'; |
| 18 | +import { Dropdown, DropdownOverlay } from '~components/Dropdown'; |
| 19 | +import { Divider } from '~components/Divider'; |
14 | 20 |
|
15 | 21 | const Page = (): React.ReactElement => { |
16 | 22 | return ( |
17 | 23 | <StoryPageWrapper |
18 | 24 | componentName="Amount" |
19 | 25 | componentDescription="Amounts are used to show small amount of color coded metadata, which are ideal for getting user attention." |
20 | | - note="This component only displays the provided value in the specified currency, it does not perform any currency conversion." |
| 26 | + 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." |
21 | 27 | figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=73328-558626&mode=design&t=JkDSnlo8KJOBJimR-4" |
| 28 | + 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 |
| 29 | + the documentation of @razorpay/i18nify-react library." |
22 | 30 | > |
23 | 31 | <Title>Usage</Title> |
24 | 32 | <Sandbox> |
@@ -176,7 +184,7 @@ HumanizeSuffix.args = { |
176 | 184 | HumanizeSuffix.storyName = 'Humanize Suffix'; |
177 | 185 |
|
178 | 186 | const AmountCurrencyTemplate: StoryFn<typeof AmountComponent> = (args) => { |
179 | | - const values = Object.keys(currencyIndicatorMapping); |
| 187 | + const values = Object.keys(getCurrencyList()); |
180 | 188 |
|
181 | 189 | return ( |
182 | 190 | <BaseBox justifyContent="flex-start" maxHeight="300px" overflowY="auto"> |
@@ -217,3 +225,98 @@ StrikeThrough.args = { |
217 | 225 | isStrikethrough: true, |
218 | 226 | }; |
219 | 227 | StrikeThrough.storyName = 'Strike Through'; |
| 228 | + |
| 229 | +// TODO: Replace below with i18nify getDefaultLocales API |
| 230 | +const localeList = [ |
| 231 | + { |
| 232 | + country: 'India', |
| 233 | + locale: 'en-IN', |
| 234 | + }, |
| 235 | + { |
| 236 | + country: 'USA', |
| 237 | + locale: 'en-US', |
| 238 | + }, |
| 239 | + { |
| 240 | + country: 'Malaysia', |
| 241 | + locale: 'ms-MY', |
| 242 | + }, |
| 243 | + { |
| 244 | + country: 'France', |
| 245 | + locale: 'fr-FR', |
| 246 | + }, |
| 247 | + { |
| 248 | + country: 'Germany', |
| 249 | + locale: 'de-DE', |
| 250 | + }, |
| 251 | +]; |
| 252 | + |
| 253 | +const I18nAmountWrapper = (args: AmountProps): JSX.Element => { |
| 254 | + const { setI18nState } = useI18nContext(); |
| 255 | + const [currency, setCurrency] = useState('INR'); |
| 256 | + |
| 257 | + return ( |
| 258 | + <> |
| 259 | + <AmountComponent {...args} currency={currency as AmountProps['currency']} /> |
| 260 | + <Divider marginY="spacing.4" marginTop="spacing.8" /> |
| 261 | + <Dropdown selectionType="single"> |
| 262 | + <SelectInput label="Select currency" /> |
| 263 | + <DropdownOverlay> |
| 264 | + <ActionList> |
| 265 | + {Object.keys(getCurrencyList()).map((value) => ( |
| 266 | + <ActionListItem |
| 267 | + key={value} |
| 268 | + title={value} |
| 269 | + value={value} |
| 270 | + onClick={({ name }) => { |
| 271 | + setCurrency(name); |
| 272 | + }} |
| 273 | + /> |
| 274 | + ))} |
| 275 | + </ActionList> |
| 276 | + </DropdownOverlay> |
| 277 | + </Dropdown> |
| 278 | + <Divider marginY="spacing.4" /> |
| 279 | + <Dropdown selectionType="single"> |
| 280 | + <SelectInput label="Select locale" /> |
| 281 | + <DropdownOverlay> |
| 282 | + <ActionList> |
| 283 | + {localeList.map((item) => ( |
| 284 | + <ActionListItem |
| 285 | + key={item.locale} |
| 286 | + title={`${item.country}(${item.locale})`} |
| 287 | + value={item.locale} |
| 288 | + onClick={({ name }) => { |
| 289 | + setI18nState?.({ locale: name }); |
| 290 | + }} |
| 291 | + /> |
| 292 | + ))} |
| 293 | + </ActionList> |
| 294 | + </DropdownOverlay> |
| 295 | + </Dropdown> |
| 296 | + </> |
| 297 | + ); |
| 298 | +}; |
| 299 | + |
| 300 | +const I18nAmountTemplate: StoryFn<typeof AmountComponent> = (args) => { |
| 301 | + return ( |
| 302 | + <I18nProvider> |
| 303 | + <BaseBox justifyContent="flex-start" minHeight="300px" overflowY="auto"> |
| 304 | + <BaseBox |
| 305 | + display="flex" |
| 306 | + alignItems="baseline" |
| 307 | + paddingRight="spacing.3" |
| 308 | + paddingTop="spacing.3" |
| 309 | + flexDirection="column" |
| 310 | + > |
| 311 | + <I18nAmountWrapper {...args} /> |
| 312 | + </BaseBox> |
| 313 | + </BaseBox> |
| 314 | + </I18nProvider> |
| 315 | + ); |
| 316 | +}; |
| 317 | + |
| 318 | +export const I18nAmount = I18nAmountTemplate.bind({}); |
| 319 | +I18nAmount.args = { |
| 320 | + ...defaultArgs, |
| 321 | +}; |
| 322 | +I18nAmount.storyName = 'Amount in diff locales'; |
0 commit comments