Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add codemod for Alert, Skeleton, Card, Chip, & Dropdown #1957

Merged
merged 7 commits into from
Jan 16, 2024
Merged

feat: add codemod for Alert, Skeleton, Card, Chip, & Dropdown #1957

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ec21b33
fix: add codemod for Alert & Skeleton
snitin315 Jan 11, 2024
05d35d5
fix: add codemod for Card
snitin315 Jan 11, 2024
3e817ed
fix: add codemod for ActionList
snitin315 Jan 11, 2024
d116bed
fix: add codemod for Dropdown
snitin315 Jan 12, 2024
65b91b8
fix: add codemod for Dropdown
snitin315 Jan 12, 2024
7d12927
fix: add codemod for Dropdown
snitin315 Jan 12, 2024
ca7106b
fix: add codemod for Chip
snitin315 Jan 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 88 additions & 0 deletions packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-actionlist.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import { applyTransform } from '@hypermod/utils';
import * as transformer from '..';

it('should migrate the ActionList component', async () => {
const result = await applyTransform(
transformer,
`
const App = () => (
<>
<ActionList surfaceLevel={2}>
<ActionListSection title="Help">
<ActionListItem
leading={<ActionListItemIcon icon={SettingsIcon} />}
title="Settings"
value="settings"
isDisabled={true}
/>
<ActionListItem
leading={<ActionListItemIcon icon={DownloadIcon} />}
title="Download"
value="download"
/>

</ActionListSection>
</ActionList>

<ActionList surfaceLevel={3}>
<ActionListSection title="Help">
<ActionListItem
leading={<ActionListItemIcon icon={SettingsIcon} />}
title="Settings"
value="settings"
isDisabled={true}
/>
<ActionListItem
leading={<ActionListItemIcon icon={DownloadIcon} />}
title="Download"
value="download"
/>

</ActionListSection>
</ActionList>
</>
);
`,
{ parser: 'tsx' },
);

expect(result).toMatchInlineSnapshot(`
"const App = () => (
<>
<ActionList>
<ActionListSection title="Help">
<ActionListItem
leading={<ActionListItemIcon icon={SettingsIcon} />}
title="Settings"
value="settings"
isDisabled={true}
/>
<ActionListItem
leading={<ActionListItemIcon icon={DownloadIcon} />}
title="Download"
value="download"
/>

</ActionListSection>
</ActionList>

<ActionList>
<ActionListSection title="Help">
<ActionListItem
leading={<ActionListItemIcon icon={SettingsIcon} />}
title="Settings"
value="settings"
isDisabled={true}
/>
<ActionListItem
leading={<ActionListItemIcon icon={DownloadIcon} />}
title="Download"
value="download"
/>

</ActionListSection>
</ActionList>
</>
);"
`);
});
48 changes: 44 additions & 4 deletions packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-amount.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { applyTransform } from '@hypermod/utils';
import * as transformer from '..';

it('should update token values contextually', async () => {
it('should migrate the Amount component', async () => {
const result = await applyTransform(
transformer,
`
const App = () => (
<>
<Amount value={1234} color="positive" />
<Amount value={1234} intent="positive" />

<Amount size="body-small" value={123456.789} />

Expand All @@ -27,7 +27,27 @@ it('should update token values contextually', async () => {

<Amount size="title-small" value={123456.789} />

<Amount size="title-medium" 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} />
</>
);
`,
Expand Down Expand Up @@ -57,7 +77,27 @@ it('should update token values contextually', async () => {

<Amount value={123456.789} type="heading" size="large" />

<Amount value={123456.789} type="heading" size="xlarge" />
<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" />

<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" />
</>
);"
`);
Expand Down
2 changes: 1 addition & 1 deletion packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-badge.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { applyTransform } from '@hypermod/utils';
import * as transformer from '..';

it('should update token values contextually', async () => {
it('should migrate the Badge component', async () => {
const result = await applyTransform(
transformer,
`
Expand Down
174 changes: 147 additions & 27 deletions packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-card.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,171 @@
import { applyTransform } from '@hypermod/utils';
import * as transformer from '..';

it('should update token values contextually', async () => {
it('should migrate the Card component', async () => {
const result = await applyTransform(
transformer,
`
const App = () => (
<>
<Card elevation="lowRaised" padding="spacing.7" surfaceLevel={2}>
<CardBody>
<Text>
Create Razorpay Payments Links and share them with your customers from the Razorpay Dashboard or using APIs and start accepting payments. Check the advantages, payment methods, international currency support and more.
</Text>
</CardBody>
</Card>

<Card elevation="lowRaised" padding="spacing.7" surfaceLevel={3}>
<CardBody>
<Text>
Create Razorpay Payments Links and share them with your customers from the Razorpay Dashboard or using APIs and start accepting payments. Check the advantages, payment methods, international currency support and more.
</Text>
</CardBody>
</Card>
</>
);
`,
{ parser: 'tsx' },
);

expect(result).toMatchInlineSnapshot(`
"const App = () => (
<>
<Card elevation="lowRaised" padding="spacing.7" backgroundColor="surface.background.gray.intense">
<Card elevation="lowRaised" padding="spacing.7" surfaceLevel={2}>
<CardBody>
<Text>
Create Razorpay Payments Links and share them with your customers from the Razorpay Dashboard or using APIs and start accepting payments. Check the advantages, payment methods, international currency support and more.
</Text>
</CardBody>
</Card>

<Card elevation="lowRaised" padding="spacing.7" backgroundColor="surface.background.gray.moderate">
<Card elevation="lowRaised" padding="spacing.7" surfaceLevel={3}>
<CardBody>
<Text>
Create Razorpay Payments Links and share them with your customers from the Razorpay Dashboard or using APIs and start accepting payments. Check the advantages, payment methods, international currency support and more.
</Text>
</CardBody>
</Card>

<Card>
<CardHeader>
<CardHeaderLeading
title="Card Header"
subtitle="Subtitle"
prefix={<CardHeaderIcon icon={InfoIcon} />}
suffix={<CardHeaderCounter intent="positive" value={12} />}
/>
<CardHeaderTrailing visual={<CardHeaderBadge variant="positive">NEW</CardHeaderBadge>} />
</CardHeader>
<CardBody>
<Text> Hello World</Text>
</CardBody>
</Card>

<Card>
<CardHeader>
<CardHeaderLeading
title="Card Header"
subtitle="Subtitle"
prefix={<CardHeaderIcon icon={InfoIcon} />}
suffix={<CardHeaderCounter intent="positive" value={12} />}
/>
<CardHeaderTrailing visual={<CardHeaderText weight="bold">NEW</CardHeaderText>} />
</CardHeader>
<CardBody>
<Text> Hello World</Text>
</CardBody>
</Card>

<Card>
<CardHeader>
<CardHeaderLeading
title="Card Header"
subtitle="Subtitle"
prefix={<CardHeaderIcon icon={InfoIcon} />}
suffix={<CardHeaderCounter intent="positive" value={12} />}
/>
<CardHeaderTrailing visual={<CardHeaderIconButton color="default">NEW</CardHeaderIconButton>} />
</CardHeader>
<CardBody>
<Text> Hello World</Text>
</CardBody>
</Card>

<Card>
<CardHeader>
<CardHeaderLeading
title="Card Header"
subtitle="Subtitle"
prefix={<CardHeaderIcon icon={InfoIcon} />}
suffix={<CardHeaderCounter intent="positive" value={12} />}
/>
<CardHeaderTrailing visual={<CardHeaderAmount value={123} intent="positive" size="title-small" />} />
</CardHeader>
<CardBody>
<Text> Hello World</Text>
</CardBody>
</Card>
</>
);
`,
{ parser: 'tsx' },
);

expect(result).toMatchInlineSnapshot(`
"const App = () => (
<>
<Card elevation="lowRaised" padding="spacing.7" backgroundColor="surface.background.gray.intense">
<CardBody>
<Text>
Create Razorpay Payments Links and share them with your customers from the Razorpay Dashboard or using APIs and start accepting payments. Check the advantages, payment methods, international currency support and more.
</Text>
</CardBody>
</Card>

<Card elevation="lowRaised" padding="spacing.7" backgroundColor="surface.background.gray.moderate">
<CardBody>
<Text>
Create Razorpay Payments Links and share them with your customers from the Razorpay Dashboard or using APIs and start accepting payments. Check the advantages, payment methods, international currency support and more.
</Text>
</CardBody>
</Card>

<Card>
<CardHeader>
<CardHeaderLeading
title="Card Header"
subtitle="Subtitle"
prefix={<CardHeaderIcon icon={InfoIcon} />}
suffix={<CardHeaderCounter value={12} color="positive" />}
/>
<CardHeaderTrailing visual={<CardHeaderBadge color="positive">NEW</CardHeaderBadge>} />
</CardHeader>
<CardBody>
<Text> Hello World</Text>
</CardBody>
</Card>

<Card>
<CardHeader>
<CardHeaderLeading
title="Card Header"
subtitle="Subtitle"
prefix={<CardHeaderIcon icon={InfoIcon} />}
suffix={<CardHeaderCounter value={12} color="positive" />}
/>
<CardHeaderTrailing visual={<CardHeaderText weight="semibold">NEW</CardHeaderText>} />
</CardHeader>
<CardBody>
<Text> Hello World</Text>
</CardBody>
</Card>

<Card>
<CardHeader>
<CardHeaderLeading
title="Card Header"
subtitle="Subtitle"
prefix={<CardHeaderIcon icon={InfoIcon} />}
suffix={<CardHeaderCounter value={12} color="positive" />}
/>
<CardHeaderTrailing visual={<CardHeaderIconButton color="primary">NEW</CardHeaderIconButton>} />
</CardHeader>
<CardBody>
<Text> Hello World</Text>
</CardBody>
</Card>

<Card>
<CardHeader>
<CardHeaderLeading
title="Card Header"
subtitle="Subtitle"
prefix={<CardHeaderIcon icon={InfoIcon} />}
suffix={<CardHeaderCounter value={12} color="positive" />}
/>
<CardHeaderTrailing visual={<CardHeaderAmount value={123} color="positive" type="heading" size="large" />} />
</CardHeader>
<CardBody>
<Text> Hello World</Text>
</CardBody>
</Card>
</>
);"
`);
Expand Down
2 changes: 1 addition & 1 deletion packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-colors.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ it('should update token values contextually', async () => {
`);
});

it('should create syntax error for highContrast tokens', async () => {
it('should create TS error for highContrast tokens', async () => {
const result = await applyTransform(
transformer,
`
Expand Down
Loading
Loading