Skip to content

Commit 372faa4

Browse files
rwieruchrwieruch
committed
piun etc
1 parent 8665544 commit 372faa4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

83 files changed

+250
-265
lines changed

‎.storybook/preview.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export const parameters = {
5151
'Chakra UI',
5252
'Material UI',
5353
'Semantic UI (WIP)',
54-
'Bootstrap UI (WIP)',
54+
'Bootstrap (WIP)',
5555
'Ant Design (WIP)',
5656
],
5757
'Product Themes',

‎.storybook/stories/Features/column-hide.story.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ storiesOf('Features/Column Hiding', module)
142142
</>
143143
);
144144
})
145-
.add('with callback', () => {
145+
.add('with callbacks', () => {
146146
const data = { nodes };
147147

148148
const [hiddenColumns, setHiddenColumns] = React.useState(['deadline', 'complete']);
@@ -164,6 +164,8 @@ storiesOf('Features/Column Hiding', module)
164164
console.log(action, state);
165165
}
166166

167+
const handleLayoutChange = (widths) => console.log(widths);
168+
167169
return (
168170
<>
169171
<div>
@@ -231,7 +233,7 @@ storiesOf('Features/Column Hiding', module)
231233
</label>
232234
</div>
233235

234-
<Table data={data} layout={{ hiddenColumns }}>
236+
<Table data={data} layout={{ hiddenColumns, onLayoutChange: handleLayoutChange }}>
235237
{(tableList) => (
236238
<>
237239
<Header>

‎.storybook/stories/Features/resize.story.js

Lines changed: 8 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -187,67 +187,22 @@ storiesOf('Features/Resize', module)
187187
</Table>
188188
);
189189
})
190-
.add('onDragMove', () => {
190+
.add('on layout change', () => {
191191
const data = { nodes };
192192

193-
const resize = {
194-
onDragMove: (widths) => console.log(widths),
195-
};
193+
const handleLayoutChange = (widths) => console.log(widths);
196194

197195
return (
198-
<Table data={data}>
199-
{(tableList) => (
200-
<>
201-
<Header>
202-
<HeaderRow>
203-
<HeaderCell resize={resize}>Task</HeaderCell>
204-
<HeaderCell resize={resize}>Deadline</HeaderCell>
205-
<HeaderCell resize={resize}>Type</HeaderCell>
206-
<HeaderCell resize={resize}>Complete</HeaderCell>
207-
<HeaderCell resize={resize}>Tasks</HeaderCell>
208-
</HeaderRow>
209-
</Header>
210-
211-
<Body>
212-
{tableList.map((item) => (
213-
<Row key={item.id} item={item}>
214-
<Cell>{item.name}</Cell>
215-
<Cell>
216-
{item.deadline.toLocaleDateString('en-US', {
217-
year: 'numeric',
218-
month: '2-digit',
219-
day: '2-digit',
220-
})}
221-
</Cell>
222-
<Cell>{item.type}</Cell>
223-
<Cell>{item.isComplete.toString()}</Cell>
224-
<Cell>{item.nodes?.length}</Cell>
225-
</Row>
226-
))}
227-
</Body>
228-
</>
229-
)}
230-
</Table>
231-
);
232-
})
233-
.add('onDragEnd', () => {
234-
const data = { nodes };
235-
236-
const resize = {
237-
onDragEnd: (widths) => console.log(widths),
238-
};
239-
240-
return (
241-
<Table data={data}>
196+
<Table data={data} layout={{ onLayoutChange: handleLayoutChange }}>
242197
{(tableList) => (
243198
<>
244199
<Header>
245200
<HeaderRow>
246-
<HeaderCell resize={resize}>Task</HeaderCell>
247-
<HeaderCell resize={resize}>Deadline</HeaderCell>
248-
<HeaderCell resize={resize}>Type</HeaderCell>
249-
<HeaderCell resize={resize}>Complete</HeaderCell>
250-
<HeaderCell resize={resize}>Tasks</HeaderCell>
201+
<HeaderCell resize>Task</HeaderCell>
202+
<HeaderCell resize>Deadline</HeaderCell>
203+
<HeaderCell resize>Type</HeaderCell>
204+
<HeaderCell resize>Complete</HeaderCell>
205+
<HeaderCell resize>Tasks</HeaderCell>
251206
</HeaderRow>
252207
</Header>
253208

‎.storybook/stories/Introduction/demo.story.js

Lines changed: 72 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import StarOutlineIcon from '@mui/icons-material/StarOutline';
2424
import PieChartIcon from '@mui/icons-material/PieChart';
2525
import MoreVertIcon from '@mui/icons-material/MoreVert';
2626
import CloseIcon from '@mui/icons-material/Close';
27-
import { Sparklines, SparklinesLine, SparklinesReferenceLine } from 'react-sparklines';
27+
import { Sparklines, SparklinesLine } from 'react-sparklines';
2828

2929
import {
3030
Table,
@@ -36,7 +36,7 @@ import {
3636
Cell,
3737
} from '@table-library/react-table-library/table';
3838
import { useTheme } from '@table-library/react-table-library/theme';
39-
import { DEFAULT_OPTIONS, getTheme } from '@table-library/react-table-library/themes/material-ui';
39+
import { DEFAULT_OPTIONS, getTheme } from '@table-library/react-table-library/material-ui';
4040
import { usePagination } from '@table-library/react-table-library/pagination';
4141

4242
const queryClient = new QueryClient();
@@ -291,6 +291,21 @@ const PRICE_CHANGE_PERCENTAGE = {
291291
},
292292
};
293293

294+
const CATEGORIES = {
295+
cryptocurrencies: {
296+
label: 'Cryptocurrencies',
297+
},
298+
'decentralized-finance-defi': {
299+
label: 'DeFi',
300+
},
301+
'non-fungible-tokens-nft': {
302+
label: 'NFT',
303+
},
304+
metaverse: {
305+
label: 'Metaverse',
306+
},
307+
};
308+
294309
const CUSTOM_COLUMNS = {
295310
ath: {
296311
label: 'ATH',
@@ -326,6 +341,10 @@ const CUSTOM_COLUMNS = {
326341
},
327342
};
328343

344+
const DEFAULT_PAGE = 1;
345+
const DEFAULT_SIZE = 10;
346+
const DEFAULT_CATEGORY = 'cryptocurrencies';
347+
329348
const StyledSelect = styled(Select)`
330349
& .MuiSelect-select {
331350
padding-left: 0;
@@ -376,12 +395,18 @@ const ViewMarket = ({ marketData, item, isExpanded, onOpen, onClose }) => {
376395
);
377396
};
378397

379-
const queryCurrencies = ({ page, size }) => () =>
380-
axios
398+
const queryCurrencies = ({ page, size, category }) => () => {
399+
let extra = '';
400+
if (category !== DEFAULT_CATEGORY) {
401+
extra = `category=${category}&`;
402+
}
403+
404+
return axios
381405
.get(
382-
`https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=${size}&page=${page}&sparkline=true&price_change_percentage=1h%2C24h%2C7d%2C14d%2C30d%2C200d%2C1y`,
406+
`https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&${extra}order=market_cap_desc&per_page=${size}&page=${page}&sparkline=true&price_change_percentage=1h%2C24h%2C7d%2C14d%2C30d%2C200d%2C1y`,
383407
)
384408
.then((result) => result.data);
409+
};
385410

386411
const queryMarkets = (id) => () =>
387412
axios
@@ -402,8 +427,6 @@ const Demo = () => {
402427
const [expandedMarketIds, setExpandedMarketIds] = React.useState([]);
403428

404429
const handleExpand = (incomingId) => {
405-
console.log(expandedMarketIds, incomingId, isDropdownOpen);
406-
407430
const id = incomingId ?? isDropdownOpen.id;
408431

409432
if (expandedMarketIds.includes(id)) {
@@ -413,14 +436,6 @@ const Demo = () => {
413436
}
414437
};
415438

416-
// search
417-
418-
const [search, setSearch] = React.useState('');
419-
420-
const handleSearch = (event) => {
421-
setSearch(event.target.value);
422-
};
423-
424439
// percentages
425440

426441
const [percentageUnitOne, setPercentageUnitOne] = React.useState(
@@ -457,14 +472,19 @@ const Demo = () => {
457472
error: null,
458473
});
459474

460-
const fetchCurrencies = async ({ page, size }, fetchState) => {
475+
const fetchCurrencies = async ({ page, size, category }, fetchState) => {
461476
setFetchState(fetchState);
462-
setCurrencies(await queryClient.fetchQuery('currencies', queryCurrencies({ page, size })));
477+
setCurrencies(
478+
await queryClient.fetchQuery('currencies', queryCurrencies({ page, size, category })),
479+
);
463480
setFetchState({ isLoading: false, isOverlayLoading: false, error: null });
464481
};
465482

466483
React.useEffect(() => {
467-
fetchCurrencies({ page: 1, size: 10 }, { isLoading: true });
484+
fetchCurrencies(
485+
{ page: DEFAULT_PAGE, size: DEFAULT_SIZE, category: activeCategory },
486+
{ isLoading: true },
487+
);
468488
}, []);
469489

470490
const marketsData = useQueries(
@@ -476,14 +496,27 @@ const Demo = () => {
476496

477497
const data = { nodes: isWatchlistActive ? favorites : currencies };
478498

499+
// category
500+
501+
const [activeCategory, setActiveCategory] = React.useState(DEFAULT_CATEGORY);
502+
503+
React.useEffect(() => {
504+
pagination.fns.onSetPage(DEFAULT_PAGE);
505+
pagination.fns.onSetSize(50); // TODO
506+
fetchCurrencies(
507+
{ page: DEFAULT_PAGE, size: 50, category: activeCategory },
508+
{ overlayLoading: true },
509+
);
510+
}, [activeCategory]);
511+
479512
// pagination
480513

481514
const pagination = usePagination(
482515
data,
483516
{
484517
state: {
485-
page: 0,
486-
size: 10,
518+
page: DEFAULT_PAGE,
519+
size: DEFAULT_SIZE,
487520
},
488521
onChange: onPaginationChange,
489522
},
@@ -493,7 +526,10 @@ const Demo = () => {
493526
);
494527

495528
function onPaginationChange(action, state) {
496-
fetchCurrencies({ page: state.page + 1, size: state.size }, { isOverlayLoading: true });
529+
fetchCurrencies(
530+
{ page: state.page + 1, size: state.size, category: activeCategory },
531+
{ isOverlayLoading: true },
532+
);
497533
}
498534

499535
// watchlist handler
@@ -507,8 +543,8 @@ const Demo = () => {
507543
};
508544

509545
const handleWatchList = () => {
510-
pagination.fns.onSetPage(1);
511-
pagination.fns.onSetSize(10);
546+
pagination.fns.onSetPage(DEFAULT_PAGE);
547+
pagination.fns.onSetSize(DEFAULT_SIZE);
512548
setWatchlistActive(!isWatchlistActive);
513549
};
514550

@@ -528,21 +564,15 @@ const Demo = () => {
528564
Portfolio
529565
</Button>
530566
<Divider orientation="vertical" flexItem />
531-
<Button color="primary" size="small" onClick={() => {}}>
532-
Cryptocurrencies
533-
</Button>
534-
<Button color="inherit" size="small" onClick={() => {}}>
535-
Categories
536-
</Button>
537-
<Button color="inherit" size="small" onClick={() => {}}>
538-
DeFi
539-
</Button>
540-
<Button color="inherit" size="small" onClick={() => {}}>
541-
NFT
542-
</Button>
543-
<Button color="inherit" size="small" onClick={() => {}}>
544-
Metaverse
545-
</Button>
567+
{Object.keys(CATEGORIES).map((key) => (
568+
<Button
569+
color={key === activeCategory ? 'primary' : 'inherit'}
570+
size="small"
571+
onClick={() => setActiveCategory(key)}
572+
>
573+
{CATEGORIES[key].label}
574+
</Button>
575+
))}
546576
</Stack>
547577

548578
<Stack direction="row" spacing={1} m={1}>
@@ -716,7 +746,6 @@ const Demo = () => {
716746
<Cell>
717747
<Sparklines data={item.sparkline_in_7d.price} height={40}>
718748
<SparklinesLine color="#1976d2" />
719-
<SparklinesReferenceLine type="mean" />
720749
</Sparklines>
721750
</Cell>
722751
{customColumnsActive.map((column) => (
@@ -756,10 +785,12 @@ const Demo = () => {
756785
{fetchState.isOverlayLoading && <OverlayLoading />}
757786

758787
<TablePagination
759-
count={isWatchlistActive ? data.nodes.length : 9688} // API does not offer this number
788+
count={
789+
isWatchlistActive ? data.nodes.length : 9688 // TODO API does not offer this number
790+
}
760791
page={pagination.state.page}
761792
rowsPerPage={pagination.state.size}
762-
rowsPerPageOptions={[10, 25, 100]}
793+
rowsPerPageOptions={activeCategory === DEFAULT_CATEGORY ? [10, 25, 50, 100] : [50]} // TODO
763794
onRowsPerPageChange={(event) => pagination.fns.onSetSize(parseInt(event.target.value, 10))}
764795
onPageChange={(event, page) => pagination.fns.onSetPage(page)}
765796
/>

‎.storybook/stories/Introduction/installation.story.mdx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,13 @@ import { Meta } from '@storybook/addon-docs/blocks';
1818

1919
React Table Library -- an almost headless table library -- which prioritzes:
2020

21-
- composition over configuration
22-
- customization
23-
- extensibility
24-
- server-side
21+
- opt-in feature richness
22+
- built-in themes and custom theming
23+
- server-side operations as first-class citizen
24+
- small library size
2525
- developer experience
26+
- TypeScript support
27+
- SSR support
2628

2729
## Requirements
2830

‎.storybook/stories/Themes/Libraries/bootstrap/bootstrap.story.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { useTheme } from '@table-library/react-table-library/theme';
1515

1616
import { nodes } from '../../../data';
1717

18-
storiesOf('Library Themes/Bootstrap UI (WIP)', module)
18+
storiesOf('Library Themes/Bootstrap (WIP)', module)
1919
.addParameters({ component: Table })
2020
.add('base', () => {
2121
const data = { nodes };

‎.storybook/stories/Themes/Libraries/chakra-ui/base.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22

33
import { CompactTable } from '@table-library/react-table-library/compact';
44
import { useTheme } from '@table-library/react-table-library/theme';
5-
import { DEFAULT_OPTIONS, getTheme } from '@table-library/react-table-library/themes/chakra-ui';
5+
import { DEFAULT_OPTIONS, getTheme } from '@table-library/react-table-library/chakra-ui';
66
import { Box } from '@chakra-ui/react';
77

88
import { DocumentationSee } from '../../../documentation';
@@ -52,7 +52,7 @@ import * as React from 'react';
5252
5353
import { CompactTable } from '@table-library/react-table-library/compact';
5454
import { useTheme } from '@table-library/react-table-library/theme';
55-
import { DEFAULT_OPTIONS, getTheme } from '@table-library/react-table-library/themes/chakra-ui';
55+
import { DEFAULT_OPTIONS, getTheme } from '@table-library/react-table-library/chakra-ui';
5656
import { Box } from '@chakra-ui/react';
5757
5858
import { DocumentationSee } from '../../../documentation';

0 commit comments

Comments
 (0)