Skip to content

Commit 2f5acec

Browse files
snqbsnqb
authored
feat: customizable holy table (#257)
1 parent b6db032 commit 2f5acec

File tree

6 files changed

+137
-44
lines changed

6 files changed

+137
-44
lines changed

‎package.json

+5-3
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@
3030
"chromatic": "npx chromatic --project-token dqq8k95raoo",
3131
"semantic-release": "semantic-release",
3232
"commit": "cz",
33-
"publish-local": "yarn dlx yalc publish"
33+
"publish-local": "yalc publish --push",
34+
"push-local": "yalc push"
3435
},
3536
"peerDependencies": {
3637
"react": "^16.14.0",
@@ -83,7 +84,8 @@
8384
"react-dom": "^16.14.0",
8485
"react-scripts": "^3.4.1",
8586
"semantic-release": "^19.0.2",
86-
"typescript": "^4.6.2"
87+
"typescript": "^4.6.2",
88+
"yalc": "^1.0.0-pre.53"
8789
},
8890
"files": [
8991
"dist",
@@ -120,4 +122,4 @@
120122
"path": "./node_modules/cz-conventional-changelog"
121123
}
122124
}
123-
}
125+
}

‎src/components/holy-table/head-cell/head-cell.tsx

+4-8
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,16 @@
1-
import React, { ReactNode, useContext } from 'react';
1+
import React, { ReactNode } from 'react';
22
import { BoxProps } from 'rebass';
33
import Labeling from '../../typography/labeling';
4-
import HolyTableContext from '../holy-table.context';
54
import styles from './styles';
65

76
interface Props extends Omit<BoxProps, 'css'> {
8-
index: number;
7+
fillSpace?: boolean;
98
children: ReactNode;
109
}
1110

12-
const HeadCell = ({ sx, index, children, ...props }: Props) => {
13-
const { middleColumn } = useContext(HolyTableContext);
14-
const shouldCellFillSpace = index === middleColumn;
15-
11+
const HeadCell = ({ sx, fillSpace = false, children, ...props }: Props) => {
1612
return (
17-
<Labeling as="th" gray pb="4px" sx={styles(shouldCellFillSpace)} {...props}>
13+
<Labeling as="th" gray pb="4px" sx={styles(fillSpace)} {...props}>
1814
{children}
1915
</Labeling>
2016
);

‎src/components/holy-table/holy-table.stories.tsx

+51-17
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,68 @@
11
import { Meta, Story } from '@storybook/react/types-6-0';
22
import React from 'react';
33
import { Box } from 'rebass';
4-
import HolyTable from '.';
4+
import { default as HT } from '.';
55
import { Props } from './holy-table';
66

77
export default {
88
title: 'Quartz/HolyTable',
9-
component: HolyTable,
9+
component: HT,
1010
} as Meta;
1111

12-
export const HolyTableExample: Story = (props: Omit<Props, 'children'>) => (
12+
export const HolyTableWithLegend: Story = (props: Omit<Props, 'children'>) => (
1313
<Box width="700px">
14-
<HolyTable {...props} legend={['name', 'hex', 'rgb']}>
15-
<HolyTable.Row>
16-
<HolyTable.Cell>Black</HolyTable.Cell>
17-
<HolyTable.Cell>#000000</HolyTable.Cell>
18-
<HolyTable.Cell>0, 0, 0</HolyTable.Cell>
19-
</HolyTable.Row>
20-
<HolyTable.Row>
21-
<HolyTable.Cell>White</HolyTable.Cell>
22-
<HolyTable.Cell>#ffffff</HolyTable.Cell>
23-
<HolyTable.Cell>255, 255, 255</HolyTable.Cell>
24-
</HolyTable.Row>
25-
</HolyTable>
14+
<HT {...props} legend={['name', 'hex', 'rgb']}>
15+
<HT.Row>
16+
<HT.Cell>Black</HT.Cell>
17+
<HT.Cell>#000000</HT.Cell>
18+
<HT.Cell>0, 0, 0</HT.Cell>
19+
</HT.Row>
20+
<HT.Row>
21+
<HT.Cell>White</HT.Cell>
22+
<HT.Cell>#ffffff</HT.Cell>
23+
<HT.Cell>255, 255, 255</HT.Cell>
24+
</HT.Row>
25+
</HT>
2626
</Box>
2727
);
2828

29-
HolyTableExample.args = {
29+
export const HolyTableCustom: Story = (
30+
props: Omit<Props, 'children' | 'legend'>,
31+
) => (
32+
<Box width="700px">
33+
<HT {...props}>
34+
<thead style={{ background: 'magenta' }}>
35+
<tr>
36+
<HT.HeadCell>Name</HT.HeadCell>
37+
<HT.HeadCell>hex</HT.HeadCell>
38+
<HT.HeadCell>rgb</HT.HeadCell>
39+
</tr>
40+
</thead>
41+
<tbody>
42+
<HT.Row>
43+
<HT.Cell>Black</HT.Cell>
44+
<HT.Cell>#000000</HT.Cell>
45+
<HT.Cell>0, 0, 0</HT.Cell>
46+
</HT.Row>
47+
<HT.Row>
48+
<HT.Cell>White</HT.Cell>
49+
<HT.Cell>#ffffff</HT.Cell>
50+
<HT.Cell>255, 255, 255</HT.Cell>
51+
</HT.Row>
52+
</tbody>
53+
</HT>
54+
</Box>
55+
);
56+
57+
const args = {
3058
standalone: false,
3159
padded: true,
3260
bordered: true,
3361
hoverable: true,
3462
rowHeight: '50px',
3563
};
3664

37-
HolyTableExample.argTypes = {
65+
const argTypes = {
3866
standalone: {
3967
control: {
4068
type: 'boolean',
@@ -85,3 +113,9 @@ HolyTableExample.argTypes = {
85113
},
86114
},
87115
};
116+
117+
HolyTableWithLegend.args = args;
118+
HolyTableWithLegend.argTypes = argTypes;
119+
120+
HolyTableCustom.args = args;
121+
HolyTableCustom.argTypes = argTypes;

‎src/components/holy-table/holy-table.tsx

+22-13
Original file line numberDiff line numberDiff line change
@@ -30,20 +30,29 @@ const HolyTable: FC<Props> = ({
3030
value={{ bordered, padded, hoverable, middleColumn, rowHeight, standalone }}
3131
>
3232
<Box as="table" sx={styles} {...props}>
33-
<Box as="thead">
34-
{legend && (
35-
<Box as="tr" width="100%">
36-
{legend.map((name, index) => (
37-
// there was no other way for generating keys :()
38-
// eslint-disable-next-line react/no-array-index-key
39-
<HeadCell key={name + index} index={index}>
40-
{name}
41-
</HeadCell>
42-
))}
33+
{legend ? (
34+
/* the logic is that if there is a `legend`, then this is a very simple table and we can insert `tbody` and `thead`.//
35+
otherwise, we want to be able to put our own `thead` and `tbody` with custom children
36+
37+
so, there are two ways to do this:
38+
*/
39+
<>
40+
<Box as="thead">
41+
<Box as="tr" width="100%">
42+
{legend.map((name, index) => (
43+
// there was no other way for generating keys :()
44+
// eslint-disable-next-line react/no-array-index-key
45+
<HeadCell key={name + index} fillSpace={middleColumn === index}>
46+
{name}
47+
</HeadCell>
48+
))}
49+
</Box>
4350
</Box>
44-
)}
45-
</Box>
46-
<Box as="tbody">{children}</Box>
51+
<Box as="tbody">{children}</Box>
52+
</>
53+
) : (
54+
children
55+
)}
4756
</Box>
4857
</HolyTableContext.Provider>
4958
);

‎src/components/holy-table/index.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
import Cell from './cell/cell';
22
import Row from './row';
33
import HolyTable from './holy-table';
4+
import HeadCell from './head-cell';
45

56
type IHolyTable = typeof HolyTable;
67

78
interface HolyTableComponent extends IHolyTable {
9+
HeadCell: typeof HeadCell;
810
Cell: typeof Cell;
911
Row: typeof Row;
1012
}
1113

14+
(HolyTable as HolyTableComponent).HeadCell = HeadCell;
1215
(HolyTable as HolyTableComponent).Cell = Cell;
1316
(HolyTable as HolyTableComponent).Row = Row;
1417

‎yarn.lock

+52-3
Original file line numberDiff line numberDiff line change
@@ -2526,6 +2526,7 @@ __metadata:
25262526
resize-observer-polyfill: ^1.5.1
25272527
semantic-release: ^19.0.2
25282528
typescript: ^4.6.2
2529+
yalc: ^1.0.0-pre.53
25292530
peerDependencies:
25302531
react: ^16.14.0
25312532
react-dom: ^16.14.0
@@ -9765,6 +9766,13 @@ __metadata:
97659766
languageName: node
97669767
linkType: hard
97679768

9769+
"detect-indent@npm:^6.0.0":
9770+
version: 6.1.0
9771+
resolution: "detect-indent@npm:6.1.0"
9772+
checksum: ab953a73c72dbd4e8fc68e4ed4bfd92c97eb6c43734af3900add963fd3a9316f3bc0578b018b24198d4c31a358571eff5f0656e81a1f3b9ad5c547d58b2d093d
9773+
languageName: node
9774+
linkType: hard
9775+
97689776
"detect-newline@npm:^2.1.0":
97699777
version: 2.1.0
97709778
resolution: "detect-newline@npm:2.1.0"
@@ -12016,7 +12024,7 @@ __metadata:
1201612024
languageName: node
1201712025
linkType: hard
1201812026

12019-
"fs-extra@npm:8.1.0, fs-extra@npm:^8.1.0":
12027+
"fs-extra@npm:8.1.0, fs-extra@npm:^8.0.1, fs-extra@npm:^8.1.0":
1202012028
version: 8.1.0
1202112029
resolution: "fs-extra@npm:8.1.0"
1202212030
dependencies:
@@ -13364,6 +13372,15 @@ __metadata:
1336413372
languageName: node
1336513373
linkType: hard
1336613374

13375+
"ignore-walk@npm:^3.0.3":
13376+
version: 3.0.4
13377+
resolution: "ignore-walk@npm:3.0.4"
13378+
dependencies:
13379+
minimatch: ^3.0.4
13380+
checksum: 9e9c5ef6c3e0ed7ef5d797991abb554dbb7e60d5fedf6cf05c7129819689eba2b462f625c6e3561e0fc79841904eb829565513eeeab1b44f4fbec4d3146b1a8d
13381+
languageName: node
13382+
linkType: hard
13383+
1336713384
"ignore-walk@npm:^4.0.1":
1336813385
version: 4.0.1
1336913386
resolution: "ignore-walk@npm:4.0.1"
@@ -13387,7 +13404,7 @@ __metadata:
1338713404
languageName: node
1338813405
linkType: hard
1338913406

13390-
"ignore@npm:^5.1.1, ignore@npm:^5.1.8, ignore@npm:^5.2.0":
13407+
"ignore@npm:^5.0.4, ignore@npm:^5.1.1, ignore@npm:^5.1.8, ignore@npm:^5.2.0":
1339113408
version: 5.2.0
1339213409
resolution: "ignore@npm:5.2.0"
1339313410
checksum: 6b1f926792d614f64c6c83da3a1f9c83f6196c2839aa41e1e32dd7b8d174cef2e329d75caabb62cb61ce9dc432f75e67d07d122a037312db7caa73166a1bdb77
@@ -17401,6 +17418,20 @@ __metadata:
1740117418
languageName: node
1740217419
linkType: hard
1740317420

17421+
"npm-packlist@npm:^2.1.5":
17422+
version: 2.2.2
17423+
resolution: "npm-packlist@npm:2.2.2"
17424+
dependencies:
17425+
glob: ^7.1.6
17426+
ignore-walk: ^3.0.3
17427+
npm-bundled: ^1.1.1
17428+
npm-normalize-package-bin: ^1.0.1
17429+
bin:
17430+
npm-packlist: bin/index.js
17431+
checksum: 799ce94b077e4dc366a9a5bcc5f006669263bb1a48d6948161aed915fd2f11dea8a7cf516a63fc78e5df059915591dade5928f0738baadc99a8ab4685d8b58c3
17432+
languageName: node
17433+
linkType: hard
17434+
1740417435
"npm-packlist@npm:^4.0.0":
1740517436
version: 4.0.0
1740617437
resolution: "npm-packlist@npm:4.0.0"
@@ -25651,6 +25682,24 @@ __metadata:
2565125682
languageName: node
2565225683
linkType: hard
2565325684

25685+
"yalc@npm:^1.0.0-pre.53":
25686+
version: 1.0.0-pre.53
25687+
resolution: "yalc@npm:1.0.0-pre.53"
25688+
dependencies:
25689+
chalk: ^4.1.0
25690+
detect-indent: ^6.0.0
25691+
fs-extra: ^8.0.1
25692+
glob: ^7.1.4
25693+
ignore: ^5.0.4
25694+
ini: ^2.0.0
25695+
npm-packlist: ^2.1.5
25696+
yargs: ^16.1.1
25697+
bin:
25698+
yalc: src/yalc.js
25699+
checksum: 3421e20039909fd0497e43ec05278e9f661d2300506deeaf06d8698e2f4dd37f905a267e85ec51e29811fd3d3844051172f4bb31049113774d502a69b0ecf2a1
25700+
languageName: node
25701+
linkType: hard
25702+
2565425703
"yallist@npm:^3.0.2":
2565525704
version: 3.1.1
2565625705
resolution: "yallist@npm:3.1.1"
@@ -25689,7 +25738,7 @@ __metadata:
2568925738
languageName: node
2569025739
linkType: hard
2569125740

25692-
"yargs@npm:16.2.0, yargs@npm:^16.2.0":
25741+
"yargs@npm:16.2.0, yargs@npm:^16.1.1, yargs@npm:^16.2.0":
2569325742
version: 16.2.0
2569425743
resolution: "yargs@npm:16.2.0"
2569525744
dependencies:

0 commit comments

Comments
 (0)