@razorpay/blade 10.23.4 → 11.0.0

package/codemods/brand-refresh/transformers/__tests__/migrate-dropdown.test.ts

@@ -0,0 +1,282 @@
+import { applyTransform } from '@hypermod/utils';
+import * as transformer from '..';
+
+it('should migrate the Dropdown component', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    const App = () => {
+        const [status, setStatus] = React.useState<string | undefined>('latest-added');
+        const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+
+        return (
+            <Box padding="spacing.10" display="flex" alignItems="center" gap="spacing.2">
+                <Text>Sort By</Text>
+                <Box flex="1">
+                    <Dropdown onDismiss={() => setIsDropdownOpen(false)}>
+                        <DropdownLink
+                            icon={isDropdownOpen ? ChevronUpIcon : ChevronDownIcon}
+                            iconPosition="right"
+                            onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                        >
+                            {status ?? ''}
+                        </DropdownLink>
+                        <DropdownOverlay>
+                            <ActionList>
+                                <ActionListItem
+                                    onClick={({ name, value }) => {
+                                    console.log({ name, value });
+                                    setStatus(name);
+                                    }}
+                                    isSelected={status === 'latest-added'}
+                                    title="Latest Added"
+                                    value="latest-added"
+                                />
+                                <ActionListItem
+                                    onClick={({ name, value }) => {
+                                    console.log({ name, value });
+                                    setStatus(name);
+                                    }}
+                                    isSelected={status === 'latest-invoice'}
+                                    title="Latest Invoice"
+                                    value="latest-invoice"
+                                />
+                            </ActionList>
+                        </DropdownOverlay>
+                    </Dropdown>
+                </Box>
+            </Box>
+        );
+    }
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => {
+            const [status, setStatus] = React.useState<string | undefined>('latest-added');
+            const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+
+            return (
+                <Box padding="spacing.10" display="flex" alignItems="center" gap="spacing.2">
+                    <Text>Sort By</Text>
+                    <Box flex="1">
+                        <Dropdown onOpenChange={isOpen => {
+                            if (!isOpen) {
+                                setIsDropdownOpen(false);
+                            }
+                        }}>
+                            <DropdownLink
+                                icon={isDropdownOpen ? ChevronUpIcon : ChevronDownIcon}
+                                iconPosition="right"
+                                onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                            >
+                                {status ?? ''}
+                            </DropdownLink>
+                            <DropdownOverlay>
+                                <ActionList>
+                                    <ActionListItem
+                                        onClick={({ name, value }) => {
+                                        console.log({ name, value });
+                                        setStatus(name);
+                                        }}
+                                        isSelected={status === 'latest-added'}
+                                        title="Latest Added"
+                                        value="latest-added"
+                                    />
+                                    <ActionListItem
+                                        onClick={({ name, value }) => {
+                                        console.log({ name, value });
+                                        setStatus(name);
+                                        }}
+                                        isSelected={status === 'latest-invoice'}
+                                        title="Latest Invoice"
+                                        value="latest-invoice"
+                                    />
+                                </ActionList>
+                            </DropdownOverlay>
+                        </Dropdown>
+                    </Box>
+                </Box>
+            );
+        }"
+  `);
+});
+
+it('should migrate various scenarios for the onDismiss prop', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+      const App = () => {
+          return (
+            <Box padding="spacing.10" display="flex" alignItems="center" gap="spacing.2">
+                <Dropdown
+                    onDismiss={() => console.log("Dismissed!!!")}
+                >
+                    <DropdownButton icon={MyAccountIcon} variant="secondary">
+                        My Account
+                    </DropdownButton>
+                    <DropdownOverlay>
+                        <ActionList>
+                            <ActionListItem
+                                intent="negative"
+                                title="Log Out"
+                                value="logout"
+                            />
+                        </ActionList>
+                    </DropdownOverlay>
+                </Dropdown>
+
+                <Dropdown
+                    onDismiss={function () {
+                        console.log("Dismissed!!!")
+                        setIsDropdownOpen(false);
+                    }}
+                >
+                    <DropdownButton icon={MyAccountIcon} variant="secondary">
+                        My Account
+                    </DropdownButton>
+                    <DropdownOverlay>
+                        <ActionList>
+                            <ActionListItem
+                                intent="negative"
+                                title="Log Out"
+                                value="logout"
+                            />
+                        </ActionList>
+                    </DropdownOverlay>
+                </Dropdown>
+
+                <Dropdown
+                    onDismiss={() => {
+                        console.log("Dismissed!!!");
+                        setIsDropdownOpen(false);
+                    }}
+                >
+                    <DropdownButton icon={MyAccountIcon} variant="secondary">
+                        My Account
+                    </DropdownButton>
+                    <DropdownOverlay>
+                        <ActionList>
+                            <ActionListItem
+                                intent="negative"
+                                title="Log Out"
+                                value="logout"
+                            />
+                        </ActionList>
+                    </DropdownOverlay>
+                </Dropdown>
+            
+                <Dropdown onDismiss={handleDropdownDismiss} >
+                    <DropdownButton icon={MyAccountIcon} variant="secondary">
+                        My Account
+                    </DropdownButton>
+                    <DropdownOverlay>
+                        <ActionList>
+                            <ActionListItem
+                                intent="negative"
+                                title="Log Out"
+                                value="logout"
+                            />
+                        </ActionList>
+                    </DropdownOverlay>
+                </Dropdown>
+            </Box>
+          );
+      }
+      `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => {
+              return (
+                  <Box padding="spacing.10" display="flex" alignItems="center" gap="spacing.2">
+                      <Dropdown
+                          onOpenChange={isOpen => {
+                              if (!isOpen) {
+                                  console.log("Dismissed!!!");
+                              }
+                          }}
+                      >
+                          <DropdownButton icon={MyAccountIcon} variant="secondary">
+                              My Account
+                          </DropdownButton>
+                          <DropdownOverlay>
+                              <ActionList>
+                                  <ActionListItem
+                                      intent="negative"
+                                      title="Log Out"
+                                      value="logout"
+                                  />
+                              </ActionList>
+                          </DropdownOverlay>
+                      </Dropdown>
+
+                      <Dropdown
+                          onOpenChange={isOpen => {
+                              if (!isOpen) {
+                                  console.log("Dismissed!!!")
+                                  setIsDropdownOpen(false);
+                              }
+                          }}
+                      >
+                          <DropdownButton icon={MyAccountIcon} variant="secondary">
+                              My Account
+                          </DropdownButton>
+                          <DropdownOverlay>
+                              <ActionList>
+                                  <ActionListItem
+                                      intent="negative"
+                                      title="Log Out"
+                                      value="logout"
+                                  />
+                              </ActionList>
+                          </DropdownOverlay>
+                      </Dropdown>
+
+                      <Dropdown
+                          onOpenChange={isOpen => {
+                              if (!isOpen) {
+                                  console.log("Dismissed!!!");
+                                  setIsDropdownOpen(false);
+                              }
+                          }}
+                      >
+                          <DropdownButton icon={MyAccountIcon} variant="secondary">
+                              My Account
+                          </DropdownButton>
+                          <DropdownOverlay>
+                              <ActionList>
+                                  <ActionListItem
+                                      intent="negative"
+                                      title="Log Out"
+                                      value="logout"
+                                  />
+                              </ActionList>
+                          </DropdownOverlay>
+                      </Dropdown>
+                  
+                      <Dropdown onOpenChange={isOpen => {
+                          if (!isOpen) {
+                              handleDropdownDismiss();
+                          }
+                      }} >
+                          <DropdownButton icon={MyAccountIcon} variant="secondary">
+                              My Account
+                          </DropdownButton>
+                          <DropdownOverlay>
+                              <ActionList>
+                                  <ActionListItem
+                                      intent="negative"
+                                      title="Log Out"
+                                      value="logout"
+                                  />
+                              </ActionList>
+                          </DropdownOverlay>
+                      </Dropdown>
+                  </Box>
+              );
+          }"
+  `);
+});

package/codemods/brand-refresh/transformers/__tests__/migrate-table.test.ts

@@ -0,0 +1,182 @@
+import { applyTransform } from '@hypermod/utils';
+import * as transformer from '..';
+
+it('should migrate the ActionList component', async () => {
+  const result = await applyTransform(
+    transformer,
+    `
+    const App = () => (
+        <>
+            <Table {...args} data={data} surfaceLevel={3}>
+                {(tableData) => (
+                    <>
+                        <TableHeader>
+                        <TableHeaderRow>
+                            <TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
+                            <TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
+                            <TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
+                        </TableHeaderRow>
+                        </TableHeader>
+                        <TableBody>
+                        {tableData.map((tableItem, index) => (
+                            <TableRow key={index} item={tableItem}>
+                            <TableCell>
+                                <Code size="medium">{tableItem.paymentId}</Code>
+                            </TableCell>
+                            <TableCell>
+                                <Amount value={tableItem.amount} />
+                            </TableCell>
+                            <TableCell>{tableItem.account}</TableCell>
+                            </TableRow>
+                        ))}
+                        </TableBody>
+                    </>
+                )}
+            </Table>
+
+            <Table {...args} data={data} surfaceLevel={2}>
+                {(tableData) => (
+                    <>
+                        <TableHeader>
+                        <TableHeaderRow>
+                            <TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
+                            <TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
+                            <TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
+                        </TableHeaderRow>
+                        </TableHeader>
+                        <TableBody>
+                        {tableData.map((tableItem, index) => (
+                            <TableRow key={index} item={tableItem}>
+                            <TableCell>
+                                <Code size="medium">{tableItem.paymentId}</Code>
+                            </TableCell>
+                            <TableCell>
+                                <Amount value={tableItem.amount} />
+                            </TableCell>
+                            <TableCell>{tableItem.account}</TableCell>
+                            </TableRow>
+                        ))}
+                        </TableBody>
+                    </>
+                )}
+            </Table>
+
+            <Table {...args} data={data} surfaceLevel={1}>
+                {(tableData) => (
+                    <>
+                        <TableHeader>
+                        <TableHeaderRow>
+                            <TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
+                            <TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
+                            <TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
+                        </TableHeaderRow>
+                        </TableHeader>
+                        <TableBody>
+                        {tableData.map((tableItem, index) => (
+                            <TableRow key={index} item={tableItem}>
+                            <TableCell>
+                                <Code size="medium">{tableItem.paymentId}</Code>
+                            </TableCell>
+                            <TableCell>
+                                <Amount value={tableItem.amount} />
+                            </TableCell>
+                            <TableCell>{tableItem.account}</TableCell>
+                            </TableRow>
+                        ))}
+                        </TableBody>
+                    </>
+                )}
+            </Table>
+        </>
+      );
+    `,
+    { parser: 'tsx' },
+  );
+
+  expect(result).toMatchInlineSnapshot(`
+    "const App = () => (
+            <>
+                <Table {...args} data={data}>
+                    {(tableData) => (
+                        <>
+                            <TableHeader>
+                            <TableHeaderRow>
+                                <TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
+                                <TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
+                                <TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
+                            </TableHeaderRow>
+                            </TableHeader>
+                            <TableBody>
+                            {tableData.map((tableItem, index) => (
+                                <TableRow key={index} item={tableItem}>
+                                <TableCell>
+                                    <Code size="medium">{tableItem.paymentId}</Code>
+                                </TableCell>
+                                <TableCell>
+                                    <Amount value={tableItem.amount} />
+                                </TableCell>
+                                <TableCell>{tableItem.account}</TableCell>
+                                </TableRow>
+                            ))}
+                            </TableBody>
+                        </>
+                    )}
+                </Table>
+
+                <Table {...args} data={data}>
+                    {(tableData) => (
+                        <>
+                            <TableHeader>
+                            <TableHeaderRow>
+                                <TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
+                                <TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
+                                <TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
+                            </TableHeaderRow>
+                            </TableHeader>
+                            <TableBody>
+                            {tableData.map((tableItem, index) => (
+                                <TableRow key={index} item={tableItem}>
+                                <TableCell>
+                                    <Code size="medium">{tableItem.paymentId}</Code>
+                                </TableCell>
+                                <TableCell>
+                                    <Amount value={tableItem.amount} />
+                                </TableCell>
+                                <TableCell>{tableItem.account}</TableCell>
+                                </TableRow>
+                            ))}
+                            </TableBody>
+                        </>
+                    )}
+                </Table>
+
+                <Table {...args} data={data}>
+                    {(tableData) => (
+                        <>
+                            <TableHeader>
+                            <TableHeaderRow>
+                                <TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
+                                <TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
+                                <TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
+                            </TableHeaderRow>
+                            </TableHeader>
+                            <TableBody>
+                            {tableData.map((tableItem, index) => (
+                                <TableRow key={index} item={tableItem}>
+                                <TableCell>
+                                    <Code size="medium">{tableItem.paymentId}</Code>
+                                </TableCell>
+                                <TableCell>
+                                    <Amount value={tableItem.amount} />
+                                </TableCell>
+                                <TableCell>{tableItem.account}</TableCell>
+                                </TableRow>
+                            ))}
+                            </TableBody>
+                        </>
+                    )}
+                </Table>
+            </>
+          );"
+  `);
+});