@razorpay/blade 11.34.1 → 11.36.0

package/codemods/aicodemod/knowledge/presets/dashboard/table-pattern-1.md

@@ -0,0 +1,319 @@
+### 2. Custom Component Definitions
+
+#### EntityItemRow Component
+
+```jsx
+import { Component } from 'react';
+import { connect } from 'react-redux';
+
+class EntityItemRow extends Component {
+  render() {
+    const {
+      id,
+      luminateRowId,
+      activeEntityId,
+      activeSecEntityId,
+      rowClasses = '',
+      onRowClick,
+      item,
+      isDisabled,
+    } = this.props;
+    const receiverType = item?.receiver_type || '';
+    const sourceChannel = item?.source_channel || '';
+    return (
+      <tr
+        onClick={() => {
+          onRowClick?.({
+            id,
+            rowData: { receiverType, sourceChannel },
+          });
+        }}
+        className={`${luminateRowId === id ? 'luminate' : ''}${
+          activeEntityId === id || activeSecEntityId === id ? ' active' : ''
+        }${rowClasses ?? ''}${isDisabled?.(item) ? ' disabled' : ''}`}
+        data-testid={`entity-item-row-${id}`}
+      >
+        {this.props.children}
+      </tr>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  return state.app;
+};
+
+export default connect(mapStateToProps, null)(EntityItemRow);
+```
+
+#### TableBody Component
+
+```jsx
+import React from 'react';
+import TableLoader from 'common/ui/TableLoader';
+import EmptyTableRow from 'common/ui/EmptyTableRow';
+
+export default (props) => {
+  let tableRowComponent;
+  const {
+    isLoading,
+    emptyTableRow,
+    emptyTableMsg,
+    colSpan,
+    rows,
+    children,
+    SpinnerComponent,
+  } = props;
+
+  if (isLoading) {
+    tableRowComponent = SpinnerComponent || <TableLoader colSpan={colSpan} />;
+  } else if (!rows.length) {
+    tableRowComponent = emptyTableRow || (
+      <EmptyTableRow colSpan={colSpan} message={emptyTableMsg} />
+    );
+  }
+
+  return (
+    <tbody>
+      {tableRowComponent
+        ? typeof tableRowComponent === 'function'
+          ? tableRowComponent(colSpan)
+          : tableRowComponent
+        : children}
+    </tbody>
+  );
+};
+```
+
+#### ShowWhen Component
+
+```jsx
+export const ShowWhen = (props) => {
+  const i18 = useI18Service();
+  // creating an abstraction of just consuming splitz experiment, rest service should not be accessed via RouteGuard
+  const { abExperiments } = useSplitzService();
+
+  const { loader, children, session, ...rest } = props;
+
+  const showWhenUtilResult = validateUtil(
+    {
+      options: rest,
+      session,
+    },
+    {
+      i18,
+      splitz: { abExperiments },
+    },
+  );
+
+  if (showWhenUtilResult === TAGS_API_NOT_RESOLVED_YET) {
+    return loader || <Loader />;
+  } else if (showWhenUtilResult) {
+    return children;
+  }
+  return null;
+};
+```
+
+### 3. Migration Example
+
+#### Original Custom Implimentation Code
+
+```jsx
+import Text from '@razorpay/blade-old/src/atoms/Text';
+import View from '@razorpay/blade-old/src/atoms/View';
+import Flex from '@razorpay/blade-old/src/atoms/Flex';
+import Icon from '@razorpay/blade-old/src/atoms/Icon';
+
+import TableBody from 'common/ui/TableBody';
+import MobileListView from 'common/ui/MobileListView';
+import { amount, createdAt } from 'common/ui/item/pair';
+
+import EntityItemRow from 'merchant/containers/EntityItemRow';
+import { isMobileDevice } from 'merchant/components/Home/data';
+import {
+  customer,
+  invoiceId,
+  invoiveStatus,
+  paymentLink,
+  paymentLinkId,
+  receiptNumber,
+  referenceId,
+} from 'merchant/views/Invoices/Invoices/item';
+import { shareURL } from 'merchant/views/Invoices/Invoices/helpers';
+
+const PaymentLinkMobileTableListView = (items) => {
+  const { item, onShareLinkSuccess = () => {} } = items;
+
+  return (
+    <EntityItemRow id={item?.id}>
+      <td>
+        {paymentLinkId.value(item)}
+
+        {item?.customer_details && customer.value(item)}
+
+        {item?.short_url && (
+          <View
+            className="link-container"
+            data-tip="Copied"
+            onClick={() => {
+              onShareLinkSuccess();
+              shareURL(item.short_url, item?.id);
+            }}
+          >
+            <Flex alignItems="center">
+              <Text size="small">
+                <div className="share-payment-link">
+                  <Icon name="share" size="small" />
+                </div>
+                Share payment link
+              </Text>
+            </Flex>
+          </View>
+        )}
+      </td>
+
+      <td>{amount.value(item)}</td>
+      <td>{invoiveStatus.value(item)}</td>
+    </EntityItemRow>
+  );
+};
+
+const InvoiceListItem = (props) => {
+  const { invoice, columns } = props;
+
+  return (
+    <EntityItemRow id={invoice.id}>
+      {columns.map(({ title, value }) => (
+        <td key={title}>{value(invoice)}</td>
+      ))}
+    </EntityItemRow>
+  );
+};
+
+export default (props) => {
+  const {
+    type,
+    invoices,
+    isLoading,
+    onCopy = () => {},
+    EmptyList,
+    isPaymentlinksV2Enabled,
+  } = props;
+
+  const isPaymentLinksType = type === 'link';
+  const label = isPaymentLinksType ? paymentLinkId : invoiceId;
+  const listStyle = isPaymentLinksType ? 'Payment-link-list' : 'Invoice-list';
+  const receipt = isPaymentlinksV2Enabled ? referenceId : receiptNumber;
+
+  const columns = [label, createdAt, amount, receipt, customer, paymentLink(onCopy), invoiveStatus];
+
+  return isMobileDevice() && isPaymentLinksType ? (
+    <MobileListView
+      headers={['Payment Link Id', 'Amount', 'Status']}
+      TableListItem={PaymentLinkMobileTableListView}
+      tableWrapperClass={listStyle}
+      items={invoices}
+      {...props}
+    />
+  ) : (
+    <div className="table-responsive">
+      <table className="table table-hover">
+        <thead>
+          <tr>
+            {columns.map(({ title }) => (
+              <th key={title}>{title}</th>
+            ))}
+          </tr>
+        </thead>
+        <TableBody isLoading={isLoading} colSpan={8} rows={invoices} emptyTableRow={EmptyList}>
+          {invoices.map((invoice) => (
+            <InvoiceListItem key={invoice.id} invoice={invoice} columns={columns} />
+          ))}
+        </TableBody>
+      </table>
+    </div>
+  );
+};
+```
+
+#### Expected Code after Migration
+
+```jsx
+import {
+  Table,
+  TableHeader,
+  TableHeaderRow,
+  TableHeaderCell,
+  TableBody,
+  TableRow,
+  TableCell,
+} from '@razorpay/blade/components';
+
+import { amount, createdAt } from 'common/ui/item/pair';
+
+import {
+  customer,
+  invoiceId,
+  invoiveStatus,
+  paymentLink,
+  paymentLinkId,
+  receiptNumber,
+  referenceId,
+} from 'merchant/views/Invoices/Invoices/item';
+import { shareURL } from 'merchant/views/Invoices/Invoices/helpers';
+
+const InvoiceListItem = (props) => {
+  const { invoice, columns } = props;
+
+  return (
+    <TableRow item={invoice}>
+      {columns.map(({ title, value }) => (
+        <TableCell key={title}>{value(invoice)}</TableCell>
+      ))}
+    </TableRow>
+  );
+};
+
+export default (props) => {
+  const {
+    type,
+    invoices,
+    isLoading,
+    onCopy = () => {},
+    EmptyList,
+    isPaymentlinksV2Enabled,
+  } = props;
+
+  const isPaymentLinksType = type === 'link';
+  const label = isPaymentLinksType ? paymentLinkId : invoiceId;
+  const receipt = isPaymentlinksV2Enabled ? referenceId : receiptNumber;
+
+  const columns = [label, createdAt, amount, receipt, customer, paymentLink(onCopy), invoiveStatus];
+
+  return (
+    <Table data={{ nodes: invoices }} isLoading={isLoading}>
+      {(tableData) => (
+        <>
+          <TableHeader>
+            <TableHeaderRow>
+              {columns.map(({ title }) => (
+                <TableHeaderCell key={title}>{title}</TableHeaderCell>
+              ))}
+            </TableHeaderRow>
+          </TableHeader>
+          <TableBody>
+            {tableData.length <= 0 ? (
+              <EmptyList />
+            ) : (
+              tableData.map((invoice) => (
+                <InvoiceListItem key={invoice.id} invoice={invoice} columns={columns} />
+              ))
+            )}
+          </TableBody>
+        </>
+      )}
+    </Table>
+  );
+};
+```

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "11.34.1",
+  "version": "11.36.0",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"
   },
   "bin": {
-    "migrate-typography": "./codemods/migrate-typography/transformers/migrate-typography.ts"
+    "migrate-typography": "./codemods/migrate-typography/transformers/migrate-typography.ts",
+    "aicodemod": "./codemods/aicodemod/bin.mjs"
   },
   "repository": {
     "type": "git",
@@ -235,6 +236,7 @@
     "dedent": "0.7.0",
     "eslint-plugin-mdx": "1.16.0",
     "execa": "5.0.0",
+    "fastify": "4.28.1",
     "figures": "3.2.0",
     "flat": "5.0.2",
     "globby": "14.0.1",