Skip to content

Commit

Permalink
feat(Amount): add new props & remove prefix (#1987)
Browse files Browse the repository at this point in the history
  • Loading branch information
@snitin315
snitin315 authored Jan 24, 2024
1 parent 26828b9 commit f9a5e27
Show file tree
Hide file tree
Showing 20 changed files with 1,712 additions and 284 deletions.
6 changes: 3 additions & 3 deletions packages/blade/.storybook/react/preview-head.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
Fix these overrides when there is better resolution to this issue-
https://github.com/storybookjs/storybook/discussions/21109
*/
* :where(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)),
* :where(p:not([data-blade-component="base-text"], .sb-anchor, .sb-unstyled, .sb-unstyled p)),
* :where(a:not(.sb-anchor, .sb-unstyled, .sb-unstyled a)),
* :where(div:not(.sb-anchor, .sb-unstyled, .sb-unstyled div)),
* :where(span:not(.sb-anchor, .sb-unstyled, .sb-unstyled span)),
* :where(div:not([data-blade-component="base-text"], .sb-anchor, .sb-unstyled, .sb-unstyled div)),
* :where(span:not([data-blade-component="base-text"], .sb-anchor, .sb-unstyled, .sb-unstyled span)),
* :where(ul:not(.sb-anchor, .sb-unstyled, .sb-unstyled ul)),
* :where(ol:not(.sb-anchor, .sb-unstyled, .sb-unstyled ol)),
* :where(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) {
Expand Down
300 changes: 177 additions & 123 deletions packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-amount.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,132 +1,186 @@
import { applyTransform } from '@hypermod/utils';
import * as transformer from '..';

it('should migrate the Amount component', async () => {
const result = await applyTransform(
transformer,
`
const App = () => (
<>
<Amount value={1234} intent="positive" />
<Amount value={1234} intent="negative" />
<Amount value={1234} intent="information" />
<Amount value={1234} intent="notice" />
<Amount size="body-small" value={123456.789} />
<Amount size="body-small-bold" value={123456.789} />
<Amount size="body-medium" value={123456.789} />
<Amount size="body-medium-bold" value={123456.789} />
<Amount size="heading-small" value={123456.789} />
<Amount size="heading-small-bold" value={123456.789} />
<Amount size="heading-large" value={123456.789} />
<Amount size="heading-large-bold" value={123456.789} />
<Amount size="title-small" value={123456.789} />
<CardHeaderAmount value={1234} intent="positive" />
<CardHeaderAmount value={1234} intent="negative" />
<CardHeaderAmount value={1234} intent="information" />
<CardHeaderAmount value={1234} intent="notice" />
<CardHeaderAmount size="title-medium" value={123456.789} />
<CardHeaderAmount size="body-small" value={123456.789} />
<CardHeaderAmount size="body-small-bold" value={123456.789} />
<CardHeaderAmount size="body-medium" value={123456.789} />
<CardHeaderAmount size="body-medium-bold" value={123456.789} />
<CardHeaderAmount size="heading-small" value={123456.789} />
<CardHeaderAmount size="heading-small-bold" value={123456.789} />
<CardHeaderAmount size="heading-large" value={123456.789} />
<CardHeaderAmount size="heading-large-bold" value={123456.789} />
<CardHeaderAmount size="title-small" value={123456.789} />
<CardHeaderAmount size="title-medium" value={123456.789} />
</>
);
`,
{ parser: 'tsx' },
);

expect(result).toMatchInlineSnapshot(`
"const App = () => (
<>
<Amount value={1234} color="feedback.text.positive.intense" />
<Amount value={1234} color="feedback.text.negative.intense" />
<Amount value={1234} color="feedback.text.information.intense" />
<Amount value={1234} color="feedback.text.notice.intense" />
<Amount value={123456.789} type="body" size="small" />
<Amount value={123456.789} type="body" size="small" weight="semibold" />
<Amount value={123456.789} type="body" size="medium" />
describe('should migrate the Amount & CardHeaderAmount components', () => {
it('should migrate the size prop', async () => {
const result = await applyTransform(
transformer,
`
const App = () => (
<>
<Amount size="body-small" value={123456.789} />
<Amount size="body-small-bold" value={123456.789} />
<Amount size="body-medium" value={123456.789} />
<Amount size="body-medium-bold" value={123456.789} />
<Amount size="heading-small" value={123456.789} />
<Amount size="heading-small-bold" value={123456.789} />
<Amount size="heading-large" value={123456.789} />
<Amount size="heading-large-bold" value={123456.789} />
<Amount size="title-small" value={123456.789} />
<CardHeaderAmount size="title-medium" value={123456.789} />
<CardHeaderAmount size="body-small" value={123456.789} />
<CardHeaderAmount size="body-small-bold" value={123456.789} />
<CardHeaderAmount size="body-medium" value={123456.789} />
<CardHeaderAmount size="body-medium-bold" value={123456.789} />
<CardHeaderAmount size="heading-small" value={123456.789} />
<CardHeaderAmount size="heading-small-bold" value={123456.789} />
<CardHeaderAmount size="heading-large" value={123456.789} />
<CardHeaderAmount size="heading-large-bold" value={123456.789} />
<CardHeaderAmount size="title-small" value={123456.789} />
<CardHeaderAmount size="title-medium" value={123456.789} />
</>
);
`,
{ parser: 'tsx' },
);

expect(result).toMatchInlineSnapshot(`
"const App = () => (
<>
<Amount value={123456.789} type="body" size="small" />
<Amount value={123456.789} type="body" size="medium" weight="semibold" />
<Amount value={123456.789} type="body" size="large" />
<Amount value={123456.789} type="body" size="small" weight="semibold" />
<Amount value={123456.789} type="body" size="medium" />
<Amount value={123456.789} type="body" size="medium" weight="semibold" />
<Amount value={123456.789} type="body" size="large" />
<Amount value={123456.789} type="body" size="large" weight="semibold" />
<Amount value={123456.789} type="heading" size="medium" />
<Amount value={123456.789} type="body" size="large" weight="semibold" />
<Amount value={123456.789} type="heading" size="medium" />
<Amount value={123456.789} type="heading" size="medium" weight="semibold" />
<Amount value={123456.789} type="heading" size="large" />
<CardHeaderAmount value={1234} color="feedback.text.positive.intense" />
<CardHeaderAmount value={1234} color="feedback.text.negative.intense" />
<CardHeaderAmount value={1234} color="feedback.text.information.intense" />
<CardHeaderAmount value={1234} color="feedback.text.notice.intense" />
<CardHeaderAmount value={123456.789} type="heading" size="xlarge" />
<CardHeaderAmount value={123456.789} type="body" size="small" />
<CardHeaderAmount value={123456.789} type="body" size="small" weight="semibold" />
<CardHeaderAmount value={123456.789} type="body" size="medium" />
<Amount value={123456.789} type="heading" size="medium" weight="semibold" />
<Amount value={123456.789} type="heading" size="large" />
<CardHeaderAmount value={123456.789} type="body" size="medium" weight="semibold" />
<CardHeaderAmount value={123456.789} type="body" size="large" />
<CardHeaderAmount value={123456.789} type="heading" size="xlarge" />
<CardHeaderAmount value={123456.789} type="body" size="large" weight="semibold" />
<CardHeaderAmount value={123456.789} type="heading" size="medium" />
<CardHeaderAmount value={123456.789} type="heading" size="medium" weight="semibold" />
<CardHeaderAmount value={123456.789} type="heading" size="large" />
<CardHeaderAmount value={123456.789} type="body" size="small" />
<CardHeaderAmount value={123456.789} type="body" size="small" weight="semibold" />
<CardHeaderAmount value={123456.789} type="body" size="medium" />
<CardHeaderAmount value={123456.789} type="body" size="medium" weight="semibold" />
<CardHeaderAmount value={123456.789} type="body" size="large" />
<CardHeaderAmount value={123456.789} type="body" size="large" weight="semibold" />
<CardHeaderAmount value={123456.789} type="heading" size="medium" />
<CardHeaderAmount value={123456.789} type="heading" size="medium" weight="semibold" />
<CardHeaderAmount value={123456.789} type="heading" size="large" />
<CardHeaderAmount value={123456.789} type="heading" size="xlarge" />
</>
);"
`);
});

it('should migrate the intent prop', async () => {
const result = await applyTransform(
transformer,
`
const App = () => (
<>
<Amount value={1234} intent="positive" />
<Amount value={1234} intent="negative" />
<Amount value={1234} intent="information" />
<Amount value={1234} intent="notice" />
<CardHeaderAmount value={1234} intent="positive" />
<CardHeaderAmount value={1234} intent="negative" />
<CardHeaderAmount value={1234} intent="information" />
<CardHeaderAmount value={1234} intent="notice" />
</>
);
`,
{ parser: 'tsx' },
);

expect(result).toMatchInlineSnapshot(`
"const App = () => (
<>
<Amount value={1234} color="feedback.text.positive.intense" />
<Amount value={1234} color="feedback.text.negative.intense" />
<Amount value={1234} color="feedback.text.information.intense" />
<Amount value={1234} color="feedback.text.notice.intense" />
<CardHeaderAmount value={1234} color="feedback.text.positive.intense" />
<CardHeaderAmount value={1234} color="feedback.text.negative.intense" />
<CardHeaderAmount value={1234} color="feedback.text.information.intense" />
<CardHeaderAmount value={1234} color="feedback.text.notice.intense" />
</>
);"
`);
});

it('should migrate the prefix prop', async () => {
const result = await applyTransform(
transformer,
`
const App = () => (
<>
<Amount value={1234} prefix="currency-symbol" />
<Amount value={1234} prefix="currency-code" />
<CardHeaderAmount value={1234} prefix="currency-symbol" />
<CardHeaderAmount value={1234} prefix="currency-code" />
</>
);
`,
{ parser: 'tsx' },
);

expect(result).toMatchInlineSnapshot(`
"const App = () => (
<>
<Amount value={1234} currencyIndicator="currency-symbol" />
<Amount value={1234} currencyIndicator="currency-code" />
<CardHeaderAmount value={123456.789} type="heading" size="xlarge" />
</>
);"
`);
<CardHeaderAmount value={1234} currencyIndicator="currency-symbol" />
<CardHeaderAmount value={1234} currencyIndicator="currency-code" />
</>
);"
`);
});
});
33 changes: 32 additions & 1 deletion packages/blade/codemods/brand-refresh/transformers/migrate-amount.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { red, isExpression } from './utils';

// Amount component: changes to intent & size props
// Amount component: changes to intent, size, & prefix props
function migrateAmountComponent({ root, j, file }): void {
try {
// <Amount size=”heading-small-bold”> -> <Amount type=”heading” size=”small” weight=”semibold”>
Expand Down Expand Up @@ -137,6 +137,37 @@ function migrateAmountComponent({ root, j, file }): void {
`\n${red(error.stack)}\n`,
);
}

// <Amount prefix=”currency-symbol”> -> <Amount currencyIndicator=”currency-symbol”>
try {
root
.find(j.JSXElement, {
openingElement: {
name: {
name: (name) => ['Amount', 'CardHeaderAmount'].includes(name),
},
},
})
.find(j.JSXAttribute, {
name: {
name: (name) => name === 'prefix',
},
})
.replaceWith((path) => {
const { node } = path;

node.name.name = 'currencyIndicator';

return node;
});
} catch (error) {

Check warning on line 163 in packages/blade/codemods/brand-refresh/transformers/migrate-amount.ts

View workflow job for this annotation

GitHub Actions / Validate Source Code 

Implicit any in catch clause
console.error(
red(
`⛔️ ${file.path}: Oops! Ran into an issue while updating the "prefix" prop in "Amount" component.`,
),
`\n${red(error.stack)}\n`,
);
}
}

export default migrateAmountComponent;
11 changes: 9 additions & 2 deletions packages/blade/src/components/Amount/Amount.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Title } from '@storybook/addon-docs';
import type { AmountProps } from './Amount';
import { Amount as AmountComponent } from './Amount';
import type { AmountHeadingProps, AmountDisplayProps, AmountBodyProps } from './amountTokens';
import { currencyPrefixMapping } 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';
Expand Down Expand Up @@ -176,7 +176,7 @@ HumanizeSuffix.args = {
HumanizeSuffix.storyName = 'Humanize Suffix';

const AmountCurrencyTemplate: StoryFn<typeof AmountComponent> = (args) => {
const values = Object.keys(currencyPrefixMapping);
const values = Object.keys(currencyIndicatorMapping);

return (
<BaseBox justifyContent="flex-start" maxHeight="300px" overflowY="auto">
Expand Down Expand Up @@ -210,3 +210,10 @@ AffixSubtleOff.args = {
isAffixSubtle: false,
};
AffixSubtleOff.storyName = 'Affix Subtle Off';

export const StrikeThrough = AmountDefaultTemplate.bind({});
StrikeThrough.args = {
...defaultArgs,
isStrikethrough: true,
};
StrikeThrough.storyName = 'Strike Through';
Loading

0 comments on commit f9a5e27

Please sign in to comment.