@transferwise/components 0.0.0-experimental-9f96230 → 0.0.0-experimental-9b505c9

package/src/table/Table.spec.tsx

@@ -1,89 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
-import '@testing-library/jest-dom';
-import { IntlProvider } from 'react-intl';
-import Table, { TableProps } from './Table';
-import { mockMatchMedia } from '../test-utils';
-
-mockMatchMedia();
-
-const renderWithIntl = (component: React.ReactNode) => {
-  return render(<IntlProvider locale="en">{component}</IntlProvider>);
-};
-
-describe('Table Component', () => {
-  const defaultProps: TableProps = {
-    data: {
-      headers: [{ header: 'Header 1' }, { header: 'Header 2' }],
-      rows: [
-        {
-          cells: [
-            { cell: { type: 'text', text: 'Cell content 1' } },
-            { cell: { type: 'text', text: 'Cell content 2' } },
-          ],
-        },
-        {
-          cells: [
-            { cell: { type: 'text', text: 'Cell content 3' } },
-            { cell: { type: 'text', text: 'Cell content 4' } },
-          ],
-        },
-      ],
-      onRowClick: jest.fn(),
-    },
-    loading: false,
-    className: '',
-    fullWidth: true,
-    error: undefined,
-    onRetry: jest.fn(),
-  };
-
-  it('renders table', () => {
-    renderWithIntl(<Table {...defaultProps} />);
-    expect(screen.getByText('Header 1')).toBeInTheDocument();
-    expect(screen.getByText('Header 2')).toBeInTheDocument();
-    expect(screen.getByText('Cell content 1')).toBeInTheDocument();
-    expect(screen.getByText('Cell content 2')).toBeInTheDocument();
-    expect(screen.getByText('Cell content 3')).toBeInTheDocument();
-    expect(screen.getByText('Cell content 4')).toBeInTheDocument();
-  });
-
-  it('renders `loading` state on loading', () => {
-    renderWithIntl(<Table {...defaultProps} loading />);
-    expect(screen.getAllByTestId('np-table-loader')).toHaveLength(1);
-  });
-
-  it('renders `empty data` message for empty table`s data', () => {
-    renderWithIntl(<Table {...defaultProps} data={{ headers: [], rows: [] }} />);
-    expect(screen.getAllByTestId('np-table-empty-data')).toHaveLength(1);
-  });
-
-  it('renders `error` message if `error` is passed', () => {
-    const errorProps: TableProps = {
-      ...defaultProps,
-      error: { message: 'Error occurred', action: { text: 'Retry' } },
-    };
-    renderWithIntl(<Table {...errorProps} />);
-    expect(screen.getByText('Error occurred')).toBeInTheDocument();
-    expect(screen.getByText('Retry')).toBeInTheDocument();
-  });
-
-  it('renders with custom class name', () => {
-    renderWithIntl(<Table {...defaultProps} className="custom-class" />);
-    expect(screen.getByTestId('np-table-container')).toHaveClass('custom-class');
-  });
-
-  it('renders with `fullWidth` set to false', () => {
-    renderWithIntl(<Table {...defaultProps} fullWidth={false} />);
-    expect(screen.getByTestId('np-table-outer-container')).toHaveClass(
-      'np-table-outer-container--center',
-    );
-  });
-
-  it('calls `onRowClick` when a row is clicked', async () => {
-    renderWithIntl(<Table {...defaultProps} />);
-    await userEvent.click(screen.getByText('Cell content 1'));
-    expect(defaultProps.data.onRowClick).toHaveBeenCalled();
-  });
-});

package/src/table/Table.story.tsx

@@ -1,364 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import Table from './Table';
-import { TableHeaderType } from './TableHeader';
-import { TableRowType, TableRowClickableType } from './TableRow';
-
-export default {
-  component: Table,
-  title: 'Option/Table',
-  tags: ['autodocs'],
-} satisfies Meta<typeof Table>;
-
-type Story = StoryObj<typeof Table>;
-
-const tableData = {
-  headers: [
-    {
-      header: 'Employee',
-      width: '200px',
-    },
-    {
-      header: 'Location',
-      width: '15%',
-    },
-    {
-      header: 'Emplpyment Date',
-      className: 'np-table-header--custom-class',
-    },
-    {
-      header: 'Payment',
-      alignment: 'right',
-    },
-    {
-      header: 'Status',
-      status: 'error',
-    },
-  ] satisfies TableHeaderType[],
-  rows: [
-    {
-      id: 0,
-      cells: [
-        {
-          cell: {
-            type: 'leading',
-            primaryText: 'Bob Brown',
-            secondaryText: 'Software Engineer',
-            avatar: {
-              fullName: 'Bob Brown',
-            },
-          },
-        },
-        {
-          cell: {
-            type: 'text',
-            text: 'FR, Paris',
-          },
-        },
-        {
-          cell: {
-            type: 'text',
-            text: '11 Oct 2022',
-          },
-        },
-        {
-          cell: {
-            type: 'currency',
-            primaryCurrency: {
-              value: '12345.67',
-              currency: 'eur',
-            },
-            secondaryCurrency: {
-              value: '11000.00',
-              currency: 'gbp',
-            },
-          },
-          alignment: 'right',
-        },
-        {
-          cell: {
-            type: 'status',
-            primaryText: 'Cancelled',
-            secondaryText: '1 day ago',
-            sentiment: 'negative',
-          },
-        },
-      ],
-    },
-    {
-      id: 1,
-      cells: [
-        {
-          cell: {
-            type: 'leading',
-            primaryText: 'Jan Kowalski',
-            secondaryText: 'Product Manager',
-            avatar: {
-              fullName: 'Jan Kowalski',
-              backgroundColorSeed: 'Jan Kowalski',
-            },
-          },
-        },
-        {
-          cell: {
-            type: 'text',
-            text: 'US, New York',
-          },
-        },
-        {
-          cell: {
-            type: 'text',
-            text: '24 Jan 2024',
-          },
-        },
-        {
-          cell: {
-            type: 'currency',
-            primaryCurrency: {
-              value: 23456.78,
-              currency: 'usd',
-            },
-            secondaryCurrency: {
-              value: 21000.0,
-              currency: 'gbp',
-            },
-          },
-          alignment: 'right',
-        },
-        {
-          cell: {
-            type: 'status',
-            primaryText: 'Scheduled',
-            secondaryText: 'Tomorrow',
-            sentiment: 'neutral',
-          },
-        },
-      ],
-    },
-    {
-      id: 2,
-      cells: [
-        {
-          cell: {
-            type: 'leading',
-            primaryText: 'William Davis',
-            secondaryText: 'Data Scientist',
-            avatar: {
-              fullName: 'William Davis',
-              backgroundColorSeed: 'William Davis',
-            },
-          },
-        },
-        {
-          cell: {
-            type: 'text',
-            text: 'UK, London',
-          },
-        },
-        {
-          cell: {
-            type: 'text',
-            text: '9 Sept 2023',
-          },
-        },
-        {
-          cell: {
-            type: 'currency',
-            primaryCurrency: {
-              value: '34567.89',
-              currency: 'gbp',
-            },
-            secondaryCurrency: {
-              value: '31000.00',
-              currency: 'eur',
-            },
-          },
-          alignment: 'right',
-        },
-        {
-          cell: {
-            type: 'status',
-            primaryText: 'Paid',
-            secondaryText: 'Yesterday',
-            sentiment: 'positive',
-          },
-        },
-      ],
-    },
-    {
-      id: 3,
-      cells: [
-        {
-          cell: {
-            type: 'leading',
-            primaryText: 'Jane Smith',
-            secondaryText: 'IT Support Specialist',
-            status: 'success',
-            avatar: {
-              src: 'avatar-square-dude.webp',
-            },
-          },
-        },
-        {
-          cell: {
-            type: 'text',
-            text: 'NO, Oslo',
-          },
-        },
-        {
-          cell: {
-            type: 'text',
-            text: '12 Apr 2024',
-            status: 'success',
-          },
-        },
-        {
-          cell: {
-            type: 'currency',
-            primaryCurrency: {
-              value: '45678.90',
-              currency: 'nok',
-            },
-            secondaryCurrency: {
-              value: '41000.00',
-              currency: 'gbp',
-            },
-            status: 'success',
-          },
-          alignment: 'right',
-        },
-        {
-          cell: {
-            type: 'status',
-            primaryText: 'Overdue',
-            secondaryText: '3 days ago',
-            sentiment: 'warning',
-          },
-        },
-      ],
-    },
-    {
-      id: 4,
-      cells: [
-        {
-          cell: {
-            type: 'leading',
-            primaryText: 'Alice Johnson',
-            secondaryText: 'Frontend Developer',
-            status: 'error',
-            avatar: {
-              src: 'avatar-square-dude.webp',
-            },
-          },
-        },
-        {
-          cell: {
-            type: 'text',
-            text: 'JP, Tokyo',
-          },
-        },
-        {
-          cell: {
-            type: 'text',
-            text: '27 Nov 2023',
-            status: 'error',
-          },
-        },
-        {
-          cell: {
-            type: 'currency',
-            primaryCurrency: {
-              value: '56789.01', // JPY currency's value is always cropped to zero decimals, you'll see `56789` instead of `56789.01` in screen/tests
-              currency: 'jpy',
-            },
-            secondaryCurrency: {
-              value: '51000.00',
-              currency: 'gbp',
-            },
-            status: 'error',
-          },
-          alignment: 'right',
-        },
-        {
-          cell: {
-            type: 'status',
-            primaryText: 'Overdue',
-            secondaryText: '6 days ago',
-            sentiment: 'pending',
-          },
-        },
-      ],
-    },
-  ] satisfies TableRowType[] | TableRowClickableType[],
-};
-
-export const Basic: Story = {
-  args: {
-    'aria-labelledby': 'Basic Table',
-    data: tableData,
-  },
-  render: (args) => {
-    return <Table {...args} />;
-  },
-};
-
-export const WithClickableRow: Story = {
-  args: {
-    'aria-labelledby': 'Table With Clickable Row',
-    data: {
-      ...tableData,
-      onRowClick: (rowData: TableRowType | TableRowClickableType) => {
-        // eslint-disable-next-line no-console
-        console.log(`Row clicked, data:`, rowData);
-      },
-    },
-  },
-  render: (args) => {
-    return <Table {...args} />;
-  },
-};
-
-export const WithLoading: Story = {
-  args: {
-    'aria-labelledby': 'Table With Loading',
-    loading: true,
-  },
-};
-
-export const WithEmptyData: Story = {
-  args: {
-    'aria-labelledby': 'Table With Empty Data',
-    data: {
-      headers: tableData.headers,
-      rows: [],
-    },
-  },
-};
-
-export const WithError: Story = {
-  args: {
-    error: {
-      message: 'Something went wrong during data fetching',
-      action: {
-        href: '/?path=/story/option-table--with-error',
-        text: 'To Refresh page, click here',
-      },
-    },
-  },
-};
-
-export const WithAFewColums: Story = {
-  args: {
-    'aria-labelledby': 'Table With A Few Columns',
-    data: {
-      headers: tableData.headers
-        .slice(0, 1)
-        .concat(tableData.headers[3])
-        .concat(tableData.headers[4]),
-      rows: tableData.rows.map((row) => ({
-        id: row.id,
-        cells: row.cells.slice(0, 1).concat(row.cells[3]).concat(row.cells[4]),
-      })),
-    },
-    fullWidth: false,
-  },
-};

package/src/table/Table.tsx

@@ -1,167 +0,0 @@
-import { useIntl } from 'react-intl';
-import TableCell from './TableCell';
-import TableHeader, { TableHeaderType } from './TableHeader';
-import TableRow, { TableRowClickableType, TableRowType } from './TableRow';
-import Alert from '../alert';
-
-import messages from './Table.messages';
-import Loader from '../loader';
-import { Sentiment, Size } from '../common';
-import StatusIcon from '../statusIcon';
-import { clsx } from 'clsx';
-import { useTheme } from '@wise/components-theming';
-
-export interface TableProps {
-  'aria-labelledby'?: string;
-  data: {
-    headers?: TableHeaderType[];
-    rows?: TableRowType[] | TableRowClickableType[];
-    onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;
-  };
-  loading?: boolean;
-  className?: string | undefined;
-  fullWidth?: boolean;
-  error?: {
-    message?: string;
-    action?: {
-      href?: string;
-      text?: string;
-    };
-  };
-  onRetry?: () => void;
-}
-
-const Table: React.FC<TableProps> = ({
-  'aria-labelledby': ariaLabelledBy,
-  data,
-  loading,
-  className,
-  fullWidth = true,
-  error,
-}) => {
-  const { formatMessage } = useIntl();
-  const { theme } = useTheme();
-
-  const getRowLength = () => {
-    const columnsLength = data?.headers?.length ?? 0;
-    return data?.onRowClick ? columnsLength + 1 : columnsLength;
-  };
-
-  const getTableContent = () => {
-    if (loading) {
-      return (
-        <TableRow>
-          <TableCell>
-            <Loader data-testid="np-table-loader" />
-          </TableCell>
-        </TableRow>
-      );
-    }
-
-    // Shows the `emptyData` message when there is no data to display
-    if (!data?.rows?.length) {
-      return (
-        <TableRow>
-          <TableCell colSpan={data?.headers?.length ? data?.headers?.length : undefined}>
-            <div className="np-table-empty-data" data-testid="np-table-empty-data">
-              <StatusIcon sentiment={Sentiment.WARNING} size={Size.MEDIUM} />
-              <div className="np-text-body-default-bold">{formatMessage(messages.emptyData)}</div>
-            </div>
-          </TableCell>
-        </TableRow>
-      );
-    }
-
-    return data?.rows?.map((rowData, rowIndex) => {
-      return (
-        <TableRow
-          key={'table-row-'.concat(rowIndex.toString())}
-          rowData={rowData}
-          hasSeparator={data?.rows?.length ? data.rows.length - 1 !== rowIndex : false}
-          onRowClick={data?.onRowClick}
-        />
-      );
-    });
-  };
-
-  if (error) {
-    return (
-      <Alert
-        className="np-table-error"
-        message={error.message}
-        type={Sentiment.NEGATIVE}
-        action={{
-          href: error?.action?.href ?? '/',
-          text: error?.action?.text ?? formatMessage(messages.refreshPage),
-        }}
-        data-testid="np-table-error"
-      />
-    );
-  }
-
-  return (
-    <>
-      <div aria-live="polite" className="sr-only">
-        {formatMessage(messages[loading ? 'loading' : 'loaded'])}
-      </div>
-      <div
-        role={loading ? 'presentation' : 'region'}
-        aria-labelledby={ariaLabelledBy}
-        className={clsx('np-table-outer-container', {
-          'np-theme-personal': theme === 'bright-green',
-          'np-table-outer-container--center': !fullWidth,
-          'np-table-outer-container--full-width': fullWidth,
-        })}
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        tabIndex={0}
-        data-testid="np-table-outer-container"
-      >
-        <div
-          className={clsx('np-table-container', className, {
-            'np-table-container--loading': loading,
-          })}
-          data-testid="np-table-container"
-        >
-          <div className="np-table-inner-container">
-            <table className="np-table">
-              <thead role={loading ? 'presentation' : undefined}>
-                <tr>
-                  {(loading ?? (data?.headers && !data?.headers.length)) ? (
-                    <TableHeader />
-                  ) : (
-                    data?.headers?.map((headerItem: TableHeaderType, index) => (
-                      <TableHeader
-                        key={headerItem.header?.concat(index.toString())}
-                        {...headerItem}
-                      />
-                    ))
-                  )}
-                  {data?.onRowClick && <TableHeader isActionHeader />}
-                </tr>
-              </thead>
-              <tbody>
-                <tr
-                  key="first-presentation"
-                  role="presentation"
-                  className="np-table-row np-table-row--cosmetic"
-                >
-                  <td className="np-table-cell" colSpan={getRowLength()} />
-                </tr>
-                {getTableContent()}
-                <tr
-                  key="last-presentation"
-                  role="presentation"
-                  className="np-table-row np-table-row--cosmetic"
-                >
-                  <td className="np-table-cell" colSpan={getRowLength()} />
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default Table;