diff --git a/src/lib/assets/icons/ic-cep18-contract.svg b/src/lib/assets/icons/ic-token-contract.svg similarity index 100% rename from src/lib/assets/icons/ic-cep18-contract.svg rename to src/lib/assets/icons/ic-token-contract.svg diff --git a/src/lib/components/identicon/identicon.stories.tsx b/src/lib/components/identicon/identicon.stories.tsx new file mode 100644 index 00000000..852ae0c4 --- /dev/null +++ b/src/lib/components/identicon/identicon.stories.tsx @@ -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; + +const Template: StoryFn = (args) => ; + +export const Primary = Template.bind({}); diff --git a/src/lib/components/paginated-table/paginated-table.stories.tsx b/src/lib/components/paginated-table/paginated-table.stories.tsx index b22834dd..50314732 100644 --- a/src/lib/components/paginated-table/paginated-table.stories.tsx +++ b/src/lib/components/paginated-table/paginated-table.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: () => ( @@ -173,4 +175,4 @@ const Template: StoryFn = ( ); }; -export const Primary = Template.bind({}); +export const WithPagination = Template.bind({}); diff --git a/src/lib/components/table-data-header/table-data-header.stories.tsx b/src/lib/components/table-data-header/table-data-header.stories.tsx index 88b654ff..e5f54aa3 100644 --- a/src/lib/components/table-data-header/table-data-header.stories.tsx +++ b/src/lib/components/table-data-header/table-data-header.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; const Template: StoryFn = ( diff --git a/src/lib/components/table/table.stories.tsx b/src/lib/components/table/table.stories.tsx index 31afd1c0..5329f329 100644 --- a/src/lib/components/table/table.stories.tsx +++ b/src/lib/components/table/table.stories.tsx @@ -1,6 +1,6 @@ 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'; @@ -8,6 +8,9 @@ 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' }, @@ -15,9 +18,10 @@ const mockedData = [ { rank: 3, motes: '1000000', owner: 'ab.cspr' }, ]; -export default { +const meta = { component: Table, title: 'Components/Display/Table', + subcomponents: { TableDataHeader, TableRow, TableData, TableHead }, args: { renderDataHeaders: () => ( @@ -51,16 +55,47 @@ export default { }, } as Meta; -const Template: StoryFn = (args: TableProps) => { - return ( +export default meta; + +type Story = StoryObj; + +export const WithHeader: Story = { + render: (args) => (

Main table header

} /> - ); + ), }; -export const Primary = Template.bind({}); +export const WithFooter: Story = { + render: (args) => ( + +

Main table gooter

} + renderHeader={() =>

Main table header

} + /> + + ), +}; + +export const Loading: Story = { + render: (args) => ( + +
} + /> + + ), +}; diff --git a/src/lib/icons-index.ts b/src/lib/icons-index.ts index c3182e03..00b96e73 100644 --- a/src/lib/icons-index.ts +++ b/src/lib/icons-index.ts @@ -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';