refactor tables

Author: eugenebelov

…c/lib/assets/icons/ic-cep18-contract.svg …c/lib/assets/icons/ic-token-contract.svgsrc/lib/assets/icons/ic-cep18-contract.svg renamed to src/lib/assets/icons/ic-token-contract.svg src/lib/assets/icons/ic-cep18-contract.svg renamed to src/lib/assets/icons/ic-token-contract.svg

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import Identicon from './identicon';
+
+export default {
+  component: Identicon,
+  title: 'Components/Display/Identicon',
+  // tags: ['autodocs', '!dev'],
+  args: {
+    size: 30,
+    hexString:
+      '01f5f1fa995ab7e966428e5a1aed797526ad5b2454c50a63a7aaa2dfeae6a996c2',
+  },
+  argTypes: {
+    hexString: { control: { type: 'text' } },
+    size: {
+      control: { type: 'number' },
+    },
+  },
+} as Meta<typeof Identicon>;
+
+const Template: StoryFn<typeof Identicon> = (args) => <Identicon {...args} />;
+
+export const Primary = Template.bind({});

src/lib/components/identicon/identicon.stories.tsx

@@ -10,10 +10,12 @@ import { PrecisionCase } from '../../utils/currency';
 import CSPR from '../cspr/cspr';
 import PageTile from '../page-tile/page-tile';
 import FlexRow from '../flex-row/flex-row';
+import TableHead from '../table-head/table-head';
 
 export default {
   component: PaginatedTable,
-  title: 'Components/Display/PaginatedTable',
+  title: 'Components/Display/Table',
+  subcomponents: { TableDataHeader, TableRow, TableData, TableHead },
   args: {
     renderHeader: () => (
       <HeaderText size={2} tag={'h1'} scale={'xs'}>
@@ -173,4 +175,4 @@ const Template: StoryFn<typeof PaginatedTable> = (
   );
 };
 
-export const Primary = Template.bind({});
+export const WithPagination = Template.bind({});

src/lib/components/paginated-table/paginated-table.stories.tsx

@@ -5,6 +5,7 @@ import TableDataHeader, { TableDataHeaderProps } from './table-data-header';
 export default {
   component: TableDataHeader,
   title: 'Components/Display/TableDataHeader',
+  excludeStories: ['Primary'],
 } as Meta<typeof TableDataHeader>;
 
 const Template: StoryFn<typeof TableDataHeader> = (

src/lib/components/table-data-header/table-data-header.stories.tsx

@@ -1,23 +1,27 @@
 import React from 'react';
-import { Table, TableProps } from './table';
-import { Meta, StoryFn } from '@storybook/react';
+import { Table } from './table';
+import { Meta } from '@storybook/react';
 import TableDataHeader from '../table-data-header/table-data-header';
 import TableRow from '../table-row/table-row';
 import TableData from '../table-data/table-data';
 import BodyText from '../body-text/body-text';
 import { PrecisionCase } from '../../utils/currency';
 import CSPR from '../cspr/cspr';
 import PageTile from '../page-tile/page-tile';
+import TableHead from '../table-head/table-head';
+import { StoryObj } from '@storybook/react-vite';
+import { TableLoader } from '../paginated-table/table-loader';
 
 const mockedData = [
   { rank: 1, motes: '50000000000000', owner: 'konrad.cspr' },
   { rank: 2, motes: '482900000000000', owner: 'victoria.cspr' },
   { rank: 3, motes: '1000000', owner: 'ab.cspr' },
 ];
 
-export default {
+const meta = {
   component: Table,
   title: 'Components/Display/Table',
+  subcomponents: { TableDataHeader, TableRow, TableData, TableHead },
   args: {
     renderDataHeaders: () => (
       <TableRow>
@@ -51,16 +55,47 @@ export default {
   },
 } as Meta<typeof Table>;
 
-const Template: StoryFn<typeof Table> = (args: TableProps) => {
-  return (
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const WithHeader: Story = {
+  render: (args) => (
     <PageTile>
       <Table
+        {...args}
         renderDataHeaders={args.renderDataHeaders}
         renderData={args.renderData}
         renderFooter={args.renderFooter}
+        renderHeader={() => <h3>Main table header</h3>}
       />
     </PageTile>
-  );
+  ),
 };
 
-export const Primary = Template.bind({});
+export const WithFooter: Story = {
+  render: (args) => (
+    <PageTile>
+      <Table
+        {...args}
+        renderDataHeaders={args.renderDataHeaders}
+        renderData={args.renderData}
+        renderFooter={() => <h4>Main table gooter</h4>}
+        renderHeader={() => <h3>Main table header</h3>}
+      />
+    </PageTile>
+  ),
+};
+
+export const Loading: Story = {
+  render: (args) => (
+    <PageTile>
+      <Table
+        {...args}
+        renderDataHeaders={args.renderDataHeaders}
+        renderFooter={args.renderFooter}
+        renderData={() => <TableLoader columnsLength={3} rowsLength={3} />}
+      />
+    </PageTile>
+  ),
+};

src/lib/components/table/table.stories.tsx

@@ -12,8 +12,6 @@ import AuctionContractIcon from './assets/icons/ic-auction-contract.svg';
 export { AuctionContractIcon };
 import BidContractIcon from './assets/icons/ic-bid-contract.svg';
 export { BidContractIcon };
-import Cep18ContractIcon from './assets/icons/ic-cep18-contract.svg';
-export { Cep18ContractIcon };
 import CheckIcon from './assets/icons/ic-check.svg';
 export { CheckIcon };
 import CheckboxCheckedInactiveIcon from './assets/icons/ic-checkbox-checked-inactive.svg';
@@ -124,6 +122,8 @@ import SuccessIcon from './assets/icons/ic-success.svg';
 export { SuccessIcon };
 import TelegramIcon from './assets/icons/ic-telegram.svg';
 export { TelegramIcon };
+import TokenContractIcon from './assets/icons/ic-token-contract.svg';
+export { TokenContractIcon };
 import TwitterIcon from './assets/icons/ic-twitter.svg';
 export { TwitterIcon };
 import Twitter_xIcon from './assets/icons/ic-twitter_x.svg';