add simple table story and isLoading story

razorpay · Nov 22, 2023 · d63a18f · d63a18f
1 parent 5c18134
commit d63a18f
Show file tree

Hide file tree

Showing 4 changed files with 364 additions and 551 deletions.
diff --git a/packages/blade/src/components/Table/docs/SimpleTable.stories.tsx b/packages/blade/src/components/Table/docs/SimpleTable.stories.tsx
@@ -0,0 +1,192 @@
+import type { ComponentStory, Meta } from '@storybook/react';
+import type { TableData, TableProps } from '../Table';
+import { Table as TableComponent } from '../Table';
+import { TableHeader, TableHeaderRow, TableHeaderCell } from '../TableHeader';
+import { TableBody, TableRow, TableCell } from '../TableBody';
+import { TableFooter, TableFooterRow, TableFooterCell } from '../TableFooter';
+import { TablePagination } from '../TablePagination';
+import { TableToolbarActions, TableToolbar } from '../TableToolbar';
+import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
+import { Box } from '~components/Box';
+import { Button } from '~components/Button';
+import { useTheme } from '~utils';
+import { Amount } from '~components/Amount';
+import { Code } from '~components/Typography';
+import { Badge } from '~components/Badge';
+import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgTypes';
+
+export default {
+  title: 'Components/Table/SimpleTable',
+  component: TableComponent,
+  args: {
+    selectionType: undefined,
+    rowDensity: 'normal',
+  },
+  argTypes: {
+    ...getStyledPropsArgTypes(),
+  },
+  parameters: {
+    docs: {
+      page: () => <StoryPageWrapper componentDescription="" componentName="Table" />,
+    },
+  },
+} as Meta<TableProps<unknown>>;
+
+const nodes: Item[] = [
+  ...Array.from({ length: 200 }, (_, i) => ({
+    id: (i + 1).toString(),
+    paymentId: `rzp${Math.floor(Math.random() * 1000000)}`,
+    amount: Number((Math.random() * 10000).toFixed(2)),
+    status: ['Completed', 'Pending', 'Failed'][Math.floor(Math.random() * 3)],
+    date: new Date(2021, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1),
+    type: ['Payout', 'Refund'][Math.floor(Math.random() * 2)],
+    method: ['Bank Transfer', 'Credit Card', 'PayPal'][Math.floor(Math.random() * 3)],
+    bank: ['HDFC', 'ICICI', 'SBI'][Math.floor(Math.random() * 3)],
+    account: Math.floor(Math.random() * 1000000000).toString(),
+    name: [
+      'John Doe',
+      'Jane Doe',
+      'Bob Smith',
+      'Alice Smith',
+      'John Smith',
+      'Jane Smith',
+      'Bob Doe',
+      'Alice Doe',
+    ][Math.floor(Math.random() * 8)],
+  })),
+];
+
+type Item = {
+  id: string;
+  paymentId: string;
+  amount: number;
+  status: string;
+  date: Date;
+  type: string;
+  method: string;
+  bank: string;
+  account: string;
+  name: string;
+};
+const data: TableData<Item> = {
+  nodes,
+};
+
+const TableTemplate: ComponentStory<typeof TableComponent> = ({ ...args }) => {
+  const { platform } = useTheme();
+  const onMobile = platform === 'onMobile';
+
+  return (
+    <Box
+      backgroundColor="surface.background.level2.lowContrast"
+      padding="spacing.5"
+      overflow="auto"
+      minHeight="400px"
+    >
+      <TableComponent
+        {...args}
+        height="400px"
+        data={data}
+        onSelectionChange={({ values }) => console.log('Selected Rows:', values)}
+        sortFunctions={{
+          ID: (array) => array.sort((a, b) => Number(a.id) - Number(b.id)),
+          AMOUNT: (array) => array.sort((a, b) => a.amount - b.amount),
+          ACCOUNT: (array) => array.sort((a, b) => Number(a.account) - Number(b.account)),
+          PAYMENT_ID: (array) => array.sort((a, b) => a.paymentId.localeCompare(b.paymentId)),
+          DATE: (array) => array.sort((a, b) => a.date.getTime() - b.date.getTime()),
+          METHOD: (array) => array.sort((a, b) => a.method.localeCompare(b.method)),
+          STATUS: (array) => array.sort((a, b) => a.status.localeCompare(b.status)),
+        }}
+        onSortChange={({ sortKey, isSortReversed }) =>
+          console.log('Sort Key:', sortKey, 'Sort Reversed:', isSortReversed)
+        }
+        toolbar={
+          <TableToolbar>
+            <TableToolbarActions>
+              <Button variant="secondary" marginRight="spacing.2" isFullWidth={onMobile}>
+                Export
+              </Button>
+              <Button isFullWidth={onMobile}>Payout</Button>
+            </TableToolbarActions>
+          </TableToolbar>
+        }
+        pagination={
+          <TablePagination
+            onPageChange={console.log}
+            defaultPageSize={10}
+            onPageSizeChange={console.log}
+            showPageSizePicker
+            showPageNumberSelector
+          />
+        }
+      >
+        {(tableData) => (
+          <>
+            <TableHeader>
+              <TableHeaderRow>
+                <TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
+                <TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
+                <TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
+                <TableHeaderCell headerKey="DATE">Date</TableHeaderCell>
+                <TableHeaderCell headerKey="METHOD">Method</TableHeaderCell>
+                <TableHeaderCell headerKey="STATUS">Status</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>
+                  <TableCell>
+                    {tableItem.date?.toLocaleDateString('en-IN', {
+                      year: 'numeric',
+                      month: '2-digit',
+                      day: '2-digit',
+                    })}
+                  </TableCell>
+                  <TableCell>{tableItem.method}</TableCell>
+                  <TableCell>
+                    <Badge
+                      size="medium"
+                      color={
+                        tableItem.status === 'Completed'
+                          ? 'positive'
+                          : tableItem.status === 'Pending'
+                          ? 'notice'
+                          : tableItem.status === 'Failed'
+                          ? 'negative'
+                          : 'default'
+                      }
+                    >
+                      {tableItem.status}
+                    </Badge>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+            <TableFooter>
+              <TableFooterRow>
+                {args.selectionType === 'multiple' && <TableFooterCell>-</TableFooterCell>}
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+                <TableFooterCell>-</TableFooterCell>
+              </TableFooterRow>
+            </TableFooter>
+          </>
+        )}
+      </TableComponent>
+    </Box>
+  );
+};
+
+export const Table = TableTemplate.bind({});
+// Need to do this because of storybook's weird naming convention, More details here: https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#single-story-hoisting
+Table.storyName = 'Simple Table';