Skip to content

Commit f0a9834

Browse files
alexcambosealexcambose
authored
Merge pull request #3088 from pyth-network/feat/table-grid
feat(component-library): table grid
2 parents 6248709 + 42ca144 commit f0a9834

File tree

10 files changed

+426
-3
lines changed

10 files changed

+426
-3
lines changed

‎packages/component-library/.storybook/storybook.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ body,
66
}
77

88
.contents {
9-
height: 100vh;
9+
min-height: 100vh;
1010
width: 100vw;
1111
color: theme.color("foreground");
1212
background: theme.color("background", "primary");

‎packages/component-library/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@
4545
"@amplitude/plugin-autocapture-browser": "catalog:",
4646
"@axe-core/react": "catalog:",
4747
"@next/third-parties": "catalog:",
48+
"ag-grid-community": "catalog:",
49+
"ag-grid-react": "catalog:",
4850
"@react-hookz/web": "catalog:",
4951
"bcp-47": "catalog:",
5052
"clsx": "catalog:",

‎packages/component-library/src/SymbolPairTag/index.stories.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Meta, StoryObj } from "@storybook/react";
2-
import CryptoIcon from "cryptocurrency-icons/svg/color/btc.svg";
2+
import BtcIcon from "cryptocurrency-icons/svg/color/btc.svg";
33

44
import { SymbolPairTag as SymbolPairTagComponent } from "./index.jsx";
55
const meta = {
@@ -29,7 +29,7 @@ export const SymbolPairTag = {
2929
args: {
3030
displaySymbol: "BTC/USD",
3131
isLoading: false,
32-
icon: <CryptoIcon width="100%" height="100%" viewBox="0 0 32 32" />,
32+
icon: <BtcIcon width="100%" height="100%" viewBox="0 0 32 32" />,
3333
description: "Bitcoin",
3434
},
3535
} satisfies StoryObj<typeof SymbolPairTagComponent>;

‎packages/component-library/src/TableGrid/dummy-row-data.ts‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
export const dummyRowData = [
2+
{ id: 1, feed: "BTC/USD", price: 54_392.28, confidence: 4.31 },
3+
{ id: 2, feed: "ETH/USD", price: 3129.5, confidence: 7.92 },
4+
{ id: 3, feed: "SOL/USD", price: 142.11, confidence: 2.48 },
5+
{ id: 4, feed: "DOGE/USD", price: 0.21, confidence: 8.17 },
6+
{ id: 5, feed: "BNB/USD", price: 587.44, confidence: 3.22 },
7+
{ id: 6, feed: "XRP/USD", price: 0.76, confidence: 6.43 },
8+
{ id: 7, feed: "ADA/USD", price: 1.42, confidence: 9.88 },
9+
{ id: 8, feed: "DOT/USD", price: 32.67, confidence: 1.76 },
10+
{ id: 9, feed: "MATIC/USD", price: 2.04, confidence: 12.11 },
11+
{ id: 10, feed: "ATOM/USD", price: 14.55, confidence: 4.98 },
12+
13+
{ id: 11, feed: "LTC/USD", price: 228.77, confidence: 5.66 },
14+
{ id: 12, feed: "TRX/USD", price: 0.12, confidence: 6.44 },
15+
{ id: 13, feed: "NEAR/USD", price: 9.83, confidence: 7.15 },
16+
{ id: 14, feed: "APT/USD", price: 11.25, confidence: 3.9 },
17+
{ id: 15, feed: "SUI/USD", price: 1.77, confidence: 9.28 },
18+
{ id: 16, feed: "ARB/USD", price: 1.54, confidence: 11.32 },
19+
{ id: 17, feed: "OP/USD", price: 2.12, confidence: 10.44 },
20+
{ id: 18, feed: "FIL/USD", price: 36.8, confidence: 2.27 },
21+
{ id: 19, feed: "ICP/USD", price: 18.93, confidence: 6.15 },
22+
{ id: 20, feed: "BTC/USD", price: 61_034.72, confidence: 4.08 },
23+
24+
{ id: 21, feed: "ETH/USD", price: 2940.18, confidence: 7.54 },
25+
{ id: 22, feed: "SOL/USD", price: 153.22, confidence: 2.17 },
26+
{ id: 23, feed: "DOGE/USD", price: 0.25, confidence: 11.28 },
27+
{ id: 24, feed: "BNB/USD", price: 612.93, confidence: 3.1 },
28+
{ id: 25, feed: "XRP/USD", price: 0.79, confidence: 5.94 },
29+
{ id: 26, feed: "ADA/USD", price: 1.52, confidence: 9.45 },
30+
{ id: 27, feed: "DOT/USD", price: 28.65, confidence: 1.93 },
31+
{ id: 28, feed: "MATIC/USD", price: 2.14, confidence: 11.57 },
32+
{ id: 29, feed: "ATOM/USD", price: 13.72, confidence: 5.36 },
33+
{ id: 30, feed: "LTC/USD", price: 239.85, confidence: 4.79 },
34+
35+
{ id: 31, feed: "TRX/USD", price: 0.11, confidence: 6.72 },
36+
{ id: 32, feed: "NEAR/USD", price: 10.44, confidence: 7.09 },
37+
{ id: 33, feed: "APT/USD", price: 10.85, confidence: 4.02 },
38+
{ id: 34, feed: "SUI/USD", price: 1.83, confidence: 9.91 },
39+
{ id: 35, feed: "ARB/USD", price: 1.61, confidence: 10.75 },
40+
{ id: 36, feed: "OP/USD", price: 2.25, confidence: 8.66 },
41+
{ id: 37, feed: "FIL/USD", price: 34.72, confidence: 3.48 },
42+
{ id: 38, feed: "ICP/USD", price: 19.14, confidence: 5.28 },
43+
{ id: 39, feed: "BTC/USD", price: 57_902.41, confidence: 3.76 },
44+
{ id: 40, feed: "ETH/USD", price: 3055.91, confidence: 7.11 },
45+
46+
{ id: 41, feed: "SOL/USD", price: 161.83, confidence: 1.99 },
47+
{ id: 42, feed: "DOGE/USD", price: 0.19, confidence: 8.74 },
48+
{ id: 43, feed: "BNB/USD", price: 595.27, confidence: 3.85 },
49+
{ id: 44, feed: "XRP/USD", price: 0.73, confidence: 6.2 },
50+
{ id: 45, feed: "ADA/USD", price: 1.48, confidence: 10.51 },
51+
{ id: 46, feed: "DOT/USD", price: 30.12, confidence: 2.09 },
52+
{ id: 47, feed: "MATIC/USD", price: 2.19, confidence: 12.88 },
53+
{ id: 48, feed: "ATOM/USD", price: 14.04, confidence: 4.62 },
54+
{ id: 49, feed: "LTC/USD", price: 244.31, confidence: 5.12 },
55+
{ id: 50, feed: "TRX/USD", price: 0.13, confidence: 6.91 },
56+
57+
{ id: 51, feed: "NEAR/USD", price: 9.95, confidence: 6.84 },
58+
{ id: 52, feed: "APT/USD", price: 11.42, confidence: 4.44 },
59+
{ id: 53, feed: "SUI/USD", price: 1.79, confidence: 8.93 },
60+
{ id: 54, feed: "ARB/USD", price: 1.59, confidence: 10.13 },
61+
{ id: 55, feed: "OP/USD", price: 2.31, confidence: 9.2 },
62+
{ id: 56, feed: "FIL/USD", price: 37.02, confidence: 2.72 },
63+
{ id: 57, feed: "ICP/USD", price: 18.67, confidence: 6.01 },
64+
{ id: 58, feed: "BTC/USD", price: 59_243.82, confidence: 3.92 },
65+
{ id: 59, feed: "ETH/USD", price: 3089.27, confidence: 7.47 },
66+
{ id: 60, feed: "SOL/USD", price: 158.71, confidence: 2.26 },
67+
68+
{ id: 61, feed: "DOGE/USD", price: 0.22, confidence: 8.55 },
69+
{ id: 62, feed: "BNB/USD", price: 601.35, confidence: 3.69 },
70+
{ id: 63, feed: "XRP/USD", price: 0.75, confidence: 5.72 },
71+
{ id: 64, feed: "ADA/USD", price: 1.55, confidence: 9.68 },
72+
{ id: 65, feed: "DOT/USD", price: 31.44, confidence: 1.88 },
73+
{ id: 66, feed: "MATIC/USD", price: 2.23, confidence: 11.83 },
74+
{ id: 67, feed: "ATOM/USD", price: 14.88, confidence: 4.34 },
75+
{ id: 68, feed: "LTC/USD", price: 237.72, confidence: 5.55 },
76+
{ id: 69, feed: "TRX/USD", price: 0.14, confidence: 6.63 },
77+
{ id: 70, feed: "NEAR/USD", price: 10.17, confidence: 7.03 },
78+
79+
{ id: 71, feed: "APT/USD", price: 11.07, confidence: 3.71 },
80+
{ id: 72, feed: "SUI/USD", price: 1.81, confidence: 9.44 },
81+
{ id: 73, feed: "ARB/USD", price: 1.63, confidence: 11.09 },
82+
{ id: 74, feed: "OP/USD", price: 2.19, confidence: 10.27 },
83+
{ id: 75, feed: "FIL/USD", price: 35.91, confidence: 3.18 },
84+
{ id: 76, feed: "ICP/USD", price: 19.35, confidence: 5.64 },
85+
{ id: 77, feed: "BTC/USD", price: 60_517.49, confidence: 4.02 },
86+
{ id: 78, feed: "ETH/USD", price: 3112.84, confidence: 7.21 },
87+
{ id: 79, feed: "SOL/USD", price: 149.26, confidence: 2.51 },
88+
{ id: 80, feed: "DOGE/USD", price: 0.2, confidence: 9.12 },
89+
];

‎packages/component-library/src/TableGrid/index.module.scss‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@use "../theme";
2+
3+
.tableGrid {
4+
--ag-browser-color-scheme: light-dark(light, dark);
5+
--ag-background-color: #{theme.color("background", "primary")};
6+
--ag-header-background-color: var(--ag-background-color);
7+
--ag-foreground-color: #{theme.color("paragraph")};
8+
--ag-accent-color: #{theme.color("button", "outline", "background", "active")};
9+
--ag-header-font-size: #{theme.font-size("xs")};
10+
--ag-header-font-weight: #{theme.font-weight("medium")};
11+
--ag-cell-font-size: #{theme.font-size("xs")};
12+
--ag-wrapper-border: none;
13+
--ag-cell-text-color: #{theme.color("paragraph")};
14+
--ag-data-font-size: #{theme.font-size("base")};
15+
16+
height: 100%;
17+
}
18+
19+
.defaultCellContainer {
20+
height: 100%;
21+
display: flex;
22+
align-items: center;
23+
}
24+
25+
.skeletonContainer {
26+
height: theme.spacing(10);
27+
width: 100%;
28+
}

‎packages/component-library/src/TableGrid/index.stories.tsx‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
import { ChartLine } from "@phosphor-icons/react/dist/ssr/ChartLine";
2+
import type { Meta, StoryObj } from "@storybook/react";
3+
import BtcIcon from "cryptocurrency-icons/svg/color/btc.svg";
4+
5+
import { Badge } from "../Badge";
6+
import { SymbolPairTag } from "../SymbolPairTag";
7+
import { dummyRowData } from "./dummy-row-data";
8+
import { TableGrid as TableGridComponent } from "./index.jsx";
9+
10+
const meta = {
11+
component: TableGridComponent,
12+
parameters: {
13+
layout: "padded",
14+
},
15+
argTypes: {
16+
columnDefs: {
17+
table: {
18+
disable: true,
19+
},
20+
},
21+
rowData: {
22+
table: {
23+
disable: true,
24+
},
25+
},
26+
className: {
27+
table: {
28+
disable: true,
29+
},
30+
},
31+
cardProps: {
32+
table: {
33+
category: "Outer Card",
34+
},
35+
},
36+
loading: {
37+
control: "boolean",
38+
table: {
39+
category: "State",
40+
},
41+
},
42+
},
43+
} satisfies Meta<typeof TableGridComponent>;
44+
export default meta;
45+
46+
const PriceCellRenderer = ({ value }: { value: number }) => (
47+
<span style={{ height: "100%", display: "flex", alignItems: "center" }}>
48+
{`$${value.toLocaleString(undefined, {
49+
minimumFractionDigits: 2,
50+
maximumFractionDigits: 2,
51+
})}`}
52+
</span>
53+
);
54+
55+
const ConfidenceCellRenderer = ({ value }: { value: number }) => (
56+
<span
57+
style={{ height: "100%", display: "flex", alignItems: "center" }}
58+
>{`+/- ${value.toFixed(2)}%`}</span>
59+
);
60+
61+
const FeedCellRenderer = ({ value }: { value: string }) => (
62+
<div style={{ height: "100%", display: "flex", alignItems: "center" }}>
63+
<SymbolPairTag
64+
displaySymbol={value}
65+
icon={<BtcIcon />}
66+
description={value}
67+
/>
68+
</div>
69+
);
70+
71+
const FeedCellRendererLoading = () => (
72+
<div style={{ height: "100%", display: "flex", alignItems: "center" }}>
73+
<SymbolPairTag isLoading />
74+
</div>
75+
);
76+
77+
const args = {
78+
columnDefs: [
79+
{
80+
headerName: "ID",
81+
field: "id",
82+
},
83+
{
84+
headerName: "PRICE FEED",
85+
field: "feed",
86+
cellRenderer: FeedCellRenderer,
87+
loadingCellRenderer: FeedCellRendererLoading,
88+
flex: 2,
89+
},
90+
{
91+
headerName: "PRICE",
92+
field: "price",
93+
flex: 3,
94+
cellRenderer: PriceCellRenderer,
95+
},
96+
{
97+
headerName: "CONFIDENCE",
98+
field: "confidence",
99+
cellRenderer: ConfidenceCellRenderer,
100+
},
101+
],
102+
rowHeight: 70,
103+
rowData: dummyRowData,
104+
};
105+
106+
export const TableGrid = {
107+
args,
108+
} satisfies StoryObj<typeof TableGridComponent>;
109+
110+
export const PriceFeedsCard = {
111+
render: (props) => {
112+
return <TableGridComponent {...props} />;
113+
},
114+
args: {
115+
...args,
116+
pagination: true,
117+
cardProps: {
118+
icon: <ChartLine />,
119+
title: (
120+
<>
121+
<span>Price Feeds</span>
122+
<Badge style="filled" variant="neutral" size="md">
123+
{args.rowData.length}
124+
</Badge>
125+
</>
126+
),
127+
},
128+
},
129+
} satisfies StoryObj<typeof TableGridComponent>;

0 commit comments

Comments
 (0)