@manufac/react-components-potli 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +2 -0
- package/dist/index.js.LICENSE.txt +37 -0
- package/dist/tsc/components/CustomEventTimelineChart/index.js +133 -0
- package/dist/tsc/components/CustomEventTimelineChart/index.js.map +1 -0
- package/dist/tsc/components/CustomEventTimelineChart/index.stories.js +16 -0
- package/dist/tsc/components/CustomEventTimelineChart/index.stories.js.map +1 -0
- package/dist/tsc/components/CustomEventTimelineChart/utils.js +38 -0
- package/dist/tsc/components/CustomEventTimelineChart/utils.js.map +1 -0
- package/dist/tsc/components/CustomTable/index.js +33 -0
- package/dist/tsc/components/CustomTable/index.js.map +1 -0
- package/dist/tsc/components/CustomTable/index.stories.js +48 -0
- package/dist/tsc/components/CustomTable/index.stories.js.map +1 -0
- package/dist/tsc/components/CustomTable/utils.js +46 -0
- package/dist/tsc/components/CustomTable/utils.js.map +1 -0
- package/dist/tsc/index.js +3 -0
- package/dist/tsc/index.js.map +1 -0
- package/dist/tsc/tsconfig.tsbuildinfo +1 -0
- package/dist/types/components/CustomEventTimelineChart/index.d.ts +8 -0
- package/dist/types/components/CustomEventTimelineChart/index.d.ts.map +1 -0
- package/dist/types/components/CustomEventTimelineChart/index.stories.d.ts +7 -0
- package/dist/types/components/CustomEventTimelineChart/index.stories.d.ts.map +1 -0
- package/dist/types/components/CustomEventTimelineChart/utils.d.ts +9 -0
- package/dist/types/components/CustomEventTimelineChart/utils.d.ts.map +1 -0
- package/dist/types/components/CustomTable/index.d.ts +11 -0
- package/dist/types/components/CustomTable/index.d.ts.map +1 -0
- package/dist/types/components/CustomTable/index.stories.d.ts +6 -0
- package/dist/types/components/CustomTable/index.stories.d.ts.map +1 -0
- package/dist/types/components/CustomTable/utils.d.ts +18 -0
- package/dist/types/components/CustomTable/utils.d.ts.map +1 -0
- package/dist/types/index.d.ts +3 -0
- package/dist/types/index.d.ts.map +1 -0
- package/package.json +57 -0
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* ZRender, a high performance 2d drawing library.
|
|
3
|
+
*
|
|
4
|
+
* Copyright (c) 2013, Baidu Inc.
|
|
5
|
+
* All rights reserved.
|
|
6
|
+
*
|
|
7
|
+
* LICENSE
|
|
8
|
+
* https://github.com/ecomfe/zrender/blob/master/LICENSE.txt
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* react-table
|
|
13
|
+
*
|
|
14
|
+
* Copyright (c) TanStack
|
|
15
|
+
*
|
|
16
|
+
* This source code is licensed under the MIT license found in the
|
|
17
|
+
* LICENSE.md file in the root directory of this source tree.
|
|
18
|
+
*
|
|
19
|
+
* @license MIT
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* @license @tabler/icons-react v3.35.0 - MIT
|
|
24
|
+
*
|
|
25
|
+
* This source code is licensed under the MIT license.
|
|
26
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
27
|
+
*/
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* @license React
|
|
31
|
+
* react-jsx-runtime.production.js
|
|
32
|
+
*
|
|
33
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
34
|
+
*
|
|
35
|
+
* This source code is licensed under the MIT license found in the
|
|
36
|
+
* LICENSE file in the root directory of this source tree.
|
|
37
|
+
*/
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { LineChart } from "echarts/charts";
|
|
3
|
+
import { GridComponent, TitleComponent, TooltipComponent } from "echarts/components";
|
|
4
|
+
import { init, use as echartsUse, getInstanceByDom, format } from "echarts/core";
|
|
5
|
+
import { CanvasRenderer } from "echarts/renderers";
|
|
6
|
+
import { useRef, useEffect, useMemo } from "react";
|
|
7
|
+
echartsUse([TitleComponent, GridComponent, LineChart, CanvasRenderer, TooltipComponent]);
|
|
8
|
+
export function EventTimelineChart({ theme, data }) {
|
|
9
|
+
const chartRef = useRef(null);
|
|
10
|
+
const series = useMemo(() => {
|
|
11
|
+
const output = data.flatMap((event) => {
|
|
12
|
+
const start = new Date(event.start).getTime();
|
|
13
|
+
const end = new Date(event.end).getTime();
|
|
14
|
+
const mid = (start + end) / 2;
|
|
15
|
+
return [
|
|
16
|
+
{
|
|
17
|
+
type: "line",
|
|
18
|
+
name: event.event,
|
|
19
|
+
data: [
|
|
20
|
+
[start, 0],
|
|
21
|
+
[end, 0],
|
|
22
|
+
],
|
|
23
|
+
lineStyle: {
|
|
24
|
+
width: 4,
|
|
25
|
+
color: event.color,
|
|
26
|
+
},
|
|
27
|
+
symbol: "none",
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
type: "line",
|
|
31
|
+
name: event.event,
|
|
32
|
+
data: [[mid, 0]],
|
|
33
|
+
symbol: event.icon,
|
|
34
|
+
symbolSize: 32,
|
|
35
|
+
symbolOffset: [0, -25],
|
|
36
|
+
tooltip: {
|
|
37
|
+
formatter: () => {
|
|
38
|
+
const startTime = new Date(event.start).toLocaleString(undefined, {
|
|
39
|
+
year: "numeric",
|
|
40
|
+
month: "short",
|
|
41
|
+
day: "2-digit",
|
|
42
|
+
hour: "2-digit",
|
|
43
|
+
minute: "2-digit",
|
|
44
|
+
});
|
|
45
|
+
const endTime = new Date(event.end).toLocaleString(undefined, {
|
|
46
|
+
year: "numeric",
|
|
47
|
+
month: "short",
|
|
48
|
+
day: "2-digit",
|
|
49
|
+
hour: "2-digit",
|
|
50
|
+
minute: "2-digit",
|
|
51
|
+
});
|
|
52
|
+
return `
|
|
53
|
+
<div style="padding:6px">
|
|
54
|
+
<b>${format.encodeHTML(event.event.toUpperCase())}</b><br/>
|
|
55
|
+
Start: ${format.encodeHTML(startTime)}<br/>
|
|
56
|
+
End: ${format.encodeHTML(endTime)}<br/>
|
|
57
|
+
</div>
|
|
58
|
+
`;
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
},
|
|
62
|
+
];
|
|
63
|
+
});
|
|
64
|
+
return output;
|
|
65
|
+
}, [data]);
|
|
66
|
+
useEffect(() => {
|
|
67
|
+
let chart;
|
|
68
|
+
let observer;
|
|
69
|
+
if (chartRef.current !== null) {
|
|
70
|
+
chart = init(chartRef.current, theme);
|
|
71
|
+
observer = new ResizeObserver(() => {
|
|
72
|
+
chart?.resize();
|
|
73
|
+
});
|
|
74
|
+
observer.observe(chartRef.current);
|
|
75
|
+
}
|
|
76
|
+
return () => {
|
|
77
|
+
chart?.dispose();
|
|
78
|
+
observer?.disconnect();
|
|
79
|
+
};
|
|
80
|
+
}, [theme]);
|
|
81
|
+
useEffect(() => {
|
|
82
|
+
if (chartRef.current !== null) {
|
|
83
|
+
const chart = getInstanceByDom(chartRef.current);
|
|
84
|
+
const option = {
|
|
85
|
+
title: {
|
|
86
|
+
text: "Event Timeline",
|
|
87
|
+
left: "center",
|
|
88
|
+
},
|
|
89
|
+
xAxis: {
|
|
90
|
+
type: "time",
|
|
91
|
+
position: "bottom",
|
|
92
|
+
axisTick: {
|
|
93
|
+
show: true,
|
|
94
|
+
length: 15,
|
|
95
|
+
lineStyle: {
|
|
96
|
+
color: "#999",
|
|
97
|
+
width: 2,
|
|
98
|
+
},
|
|
99
|
+
inside: true,
|
|
100
|
+
},
|
|
101
|
+
axisLine: {
|
|
102
|
+
lineStyle: {
|
|
103
|
+
color: "#999",
|
|
104
|
+
width: 2,
|
|
105
|
+
},
|
|
106
|
+
},
|
|
107
|
+
axisLabel: {
|
|
108
|
+
formatter: (value) => {
|
|
109
|
+
const date = new Date(value);
|
|
110
|
+
const h = date.getHours().toString().padStart(2, "0");
|
|
111
|
+
const m = date.getMinutes().toString().padStart(2, "0");
|
|
112
|
+
return `${h}:${m}`;
|
|
113
|
+
},
|
|
114
|
+
margin: 10,
|
|
115
|
+
},
|
|
116
|
+
},
|
|
117
|
+
yAxis: {
|
|
118
|
+
type: "value",
|
|
119
|
+
min: 0,
|
|
120
|
+
max: 0,
|
|
121
|
+
show: false,
|
|
122
|
+
},
|
|
123
|
+
tooltip: {
|
|
124
|
+
trigger: "item",
|
|
125
|
+
},
|
|
126
|
+
series,
|
|
127
|
+
};
|
|
128
|
+
chart?.setOption(option, true);
|
|
129
|
+
}
|
|
130
|
+
}, [theme, series]);
|
|
131
|
+
return _jsx("div", { ref: chartRef, style: { height: "100%", width: "100%" } });
|
|
132
|
+
}
|
|
133
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/CustomEventTimelineChart/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { EventTimelineChart } from ".";
|
|
3
|
+
import { DummyData } from "./utils";
|
|
4
|
+
import { useDarkMode } from "@vueless/storybook-dark-mode";
|
|
5
|
+
export default {
|
|
6
|
+
title: "EventTimelineChart",
|
|
7
|
+
component: EventTimelineChart,
|
|
8
|
+
args: {
|
|
9
|
+
data: DummyData,
|
|
10
|
+
},
|
|
11
|
+
};
|
|
12
|
+
export const Template = (args) => {
|
|
13
|
+
const isDark = useDarkMode();
|
|
14
|
+
return (_jsx("div", { style: { height: 400, width: "100%" }, children: _jsx(EventTimelineChart, { ...args, theme: isDark === true ? "dark" : "light" }) }));
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=index.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/CustomEventTimelineChart/index.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,GAAG,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAI3D,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,kBAAkB;IAC7B,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;KAChB;CACiC,CAAC;AAErC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAE,EAAE;IACxD,MAAM,MAAM,GAAG,WAAW,EAAE,CAAC;IAE7B,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,YACxC,KAAC,kBAAkB,OAAK,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,GAAI,GACvE,CACP,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
export const DummyData = [
|
|
2
|
+
{
|
|
3
|
+
start: "2025-01-01T00:00:00.000Z",
|
|
4
|
+
end: "2025-01-01T01:30:00.000Z",
|
|
5
|
+
event: "sleep",
|
|
6
|
+
icon: "image://https://img.icons8.com/emoji/48/000000/sleeping-face.png",
|
|
7
|
+
color: "#444",
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
start: "2025-01-01T01:30:00.000Z",
|
|
11
|
+
end: "2025-01-01T02:00:00.000Z",
|
|
12
|
+
event: "drive",
|
|
13
|
+
icon: "image://https://img.icons8.com/emoji/48/000000/racing-car.png",
|
|
14
|
+
color: "#00BFFF",
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
start: "2025-01-01T02:00:00.000Z",
|
|
18
|
+
end: "2025-01-01T03:15:00.000Z",
|
|
19
|
+
event: "work",
|
|
20
|
+
icon: "image://https://img.icons8.com/emoji/48/laptop-emoji.png",
|
|
21
|
+
color: "#FFD700",
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
start: "2025-01-01T03:15:00.000Z",
|
|
25
|
+
end: "2025-01-01T04:00:00.000Z",
|
|
26
|
+
event: "walk",
|
|
27
|
+
icon: "image://https://img.icons8.com/emoji/48/000000/person-walking.png",
|
|
28
|
+
color: "#FF69B4",
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
start: "2025-01-01T04:00:00.000Z",
|
|
32
|
+
end: "2025-01-01T05:00:00.000Z",
|
|
33
|
+
event: "lunch",
|
|
34
|
+
icon: "image://https://img.icons8.com/emoji/48/pizza-emoji.png",
|
|
35
|
+
color: "#00BFFF",
|
|
36
|
+
},
|
|
37
|
+
];
|
|
38
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/CustomEventTimelineChart/utils.tsx"],"names":[],"mappings":"AASA,MAAM,CAAC,MAAM,SAAS,GAAyB;IAC7C;QACE,KAAK,EAAE,0BAA0B;QACjC,GAAG,EAAE,0BAA0B;QAC/B,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,kEAAkE;QACxE,KAAK,EAAE,MAAM;KACd;IACD;QACE,KAAK,EAAE,0BAA0B;QACjC,GAAG,EAAE,0BAA0B;QAC/B,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,+DAA+D;QACrE,KAAK,EAAE,SAAS;KACjB;IACD;QACE,KAAK,EAAE,0BAA0B;QACjC,GAAG,EAAE,0BAA0B;QAC/B,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,0DAA0D;QAChE,KAAK,EAAE,SAAS;KACjB;IACD;QACE,KAAK,EAAE,0BAA0B;QACjC,GAAG,EAAE,0BAA0B;QAC/B,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,mEAAmE;QACzE,KAAK,EAAE,SAAS;KACjB;IACD;QACE,KAAK,EAAE,0BAA0B;QACjC,GAAG,EAAE,0BAA0B;QAC/B,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,yDAAyD;QAC/D,KAAK,EAAE,SAAS;KACjB;CACF,CAAC"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { getSortingIcon, getTableBody, Sort } from "./utils";
|
|
3
|
+
import { ActionIcon, Group, ScrollArea, Table } from "@mantine/core";
|
|
4
|
+
import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
|
|
5
|
+
import { useState } from "react";
|
|
6
|
+
export function CustomTable({ data, isLoading, error, columns, }) {
|
|
7
|
+
const [sorting, setSorting] = useState([]);
|
|
8
|
+
const table = useReactTable({
|
|
9
|
+
data,
|
|
10
|
+
columns,
|
|
11
|
+
getCoreRowModel: getCoreRowModel(),
|
|
12
|
+
getSortedRowModel: getSortedRowModel(),
|
|
13
|
+
onSortingChange: setSorting,
|
|
14
|
+
state: {
|
|
15
|
+
sorting,
|
|
16
|
+
},
|
|
17
|
+
});
|
|
18
|
+
return (_jsx(ScrollArea, { children: _jsxs(Table, { highlightOnHover: true, withTableBorder: true, withColumnBorders: true, children: [_jsx(Table.Thead, { children: table.getHeaderGroups().map((headerGroup) => {
|
|
19
|
+
return (_jsx(Table.Tr, { children: headerGroup.headers.map((header) => {
|
|
20
|
+
return (_jsx(Table.Th, { onClick: header.column.getToggleSortingHandler(), children: _jsxs(Group, { gap: "xs", wrap: "nowrap", children: [flexRender(header.column.columnDef.header, header.getContext()), _jsx(ActionIcon, { variant: "subtle", size: "sm", children: (() => {
|
|
21
|
+
const sortState = header.column.getIsSorted();
|
|
22
|
+
const sortOrder = sortState === false ? Sort.Default : sortState;
|
|
23
|
+
return getSortingIcon(sortOrder, header.column.getCanSort());
|
|
24
|
+
})() })] }) }, header.id));
|
|
25
|
+
}) }, headerGroup.id));
|
|
26
|
+
}) }), _jsx(Table.Tbody, { children: getTableBody({
|
|
27
|
+
isLoading,
|
|
28
|
+
error,
|
|
29
|
+
tableRows: table.getRowModel().rows,
|
|
30
|
+
columnCount: columns.length,
|
|
31
|
+
}) })] }) }));
|
|
32
|
+
}
|
|
33
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/CustomTable/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,EACL,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,aAAa,GACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAWjC,MAAM,UAAU,WAAW,CAAI,EAC7B,IAAI,EACJ,SAAS,EACT,KAAK,EACL,OAAO,GACa;IACpB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAe,EAAE,CAAC,CAAC;IAEzD,MAAM,KAAK,GAAG,aAAa,CAAC;QAC1B,IAAI;QACJ,OAAO;QACP,eAAe,EAAE,eAAe,EAAE;QAClC,iBAAiB,EAAE,iBAAiB,EAAE;QACtC,eAAe,EAAE,UAAU;QAC3B,KAAK,EAAE;YACL,OAAO;SACR;KACF,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,UAAU,cACT,MAAC,KAAK,IAAC,gBAAgB,QAAC,eAAe,QAAC,iBAAiB,mBACvD,KAAC,KAAK,CAAC,KAAK,cACT,KAAK,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE;wBAC3C,OAAO,CACL,KAAC,KAAK,CAAC,EAAE,cACN,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;gCAClC,OAAO,CACL,KAAC,KAAK,CAAC,EAAE,IAAiB,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,uBAAuB,EAAE,YACxE,MAAC,KAAK,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,aAC1B,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,EAChE,KAAC,UAAU,IAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,YACnC,CAAC,GAAG,EAAE;oDACL,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;oDAC9C,MAAM,SAAS,GAAG,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;oDACjE,OAAO,cAAc,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC;gDAC/D,CAAC,CAAC,EAAE,GACO,IACP,IAVK,MAAM,CAAC,EAAE,CAWb,CACZ,CAAC;4BACJ,CAAC,CAAC,IAhBW,WAAW,CAAC,EAAE,CAiBlB,CACZ,CAAC;oBACJ,CAAC,CAAC,GACU,EACd,KAAC,KAAK,CAAC,KAAK,cACT,YAAY,CAAC;wBACZ,SAAS;wBACT,KAAK;wBACL,SAAS,EAAE,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI;wBACnC,WAAW,EAAE,OAAO,CAAC,MAAM;qBAC5B,CAAC,GACU,IACR,GACG,CACd,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { CustomTable } from ".";
|
|
3
|
+
import { createColumnHelper } from "@tanstack/react-table";
|
|
4
|
+
const DummyRows = [
|
|
5
|
+
{ id: 1, name: "Alice", email: "alice@example.com", createdAt: new Date("2025-04-28T09:30:00") },
|
|
6
|
+
{ id: 2, name: "Bob", email: "bob@example.com", createdAt: new Date("2025-04-28T10:00:00") },
|
|
7
|
+
{
|
|
8
|
+
id: 3,
|
|
9
|
+
name: "Charlie",
|
|
10
|
+
email: "charlie@example.com",
|
|
11
|
+
createdAt: new Date("2025-04-28T11:15:00"),
|
|
12
|
+
},
|
|
13
|
+
];
|
|
14
|
+
const ColumnHelper = createColumnHelper();
|
|
15
|
+
const Columns = [
|
|
16
|
+
ColumnHelper.accessor("id", {
|
|
17
|
+
header: "ID",
|
|
18
|
+
}),
|
|
19
|
+
ColumnHelper.accessor("name", {
|
|
20
|
+
header: "Name",
|
|
21
|
+
}),
|
|
22
|
+
ColumnHelper.accessor("email", {
|
|
23
|
+
header: "Email",
|
|
24
|
+
}),
|
|
25
|
+
ColumnHelper.accessor("createdAt", {
|
|
26
|
+
id: "createdAtDate",
|
|
27
|
+
header: "Date",
|
|
28
|
+
cell: ({ getValue }) => {
|
|
29
|
+
return new Date(getValue()).toLocaleString();
|
|
30
|
+
},
|
|
31
|
+
}),
|
|
32
|
+
];
|
|
33
|
+
export default {
|
|
34
|
+
title: "Components/CustomTable",
|
|
35
|
+
component: CustomTable,
|
|
36
|
+
args: {
|
|
37
|
+
data: DummyRows,
|
|
38
|
+
columns: Columns,
|
|
39
|
+
isLoading: false,
|
|
40
|
+
error: null,
|
|
41
|
+
},
|
|
42
|
+
};
|
|
43
|
+
export const Default = {
|
|
44
|
+
render: function Wrapper(args) {
|
|
45
|
+
return _jsx(CustomTable, { ...args });
|
|
46
|
+
},
|
|
47
|
+
};
|
|
48
|
+
//# sourceMappingURL=index.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/CustomTable/index.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAChC,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAU3D,MAAM,SAAS,GAAgB;IAC7B,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,IAAI,IAAI,CAAC,qBAAqB,CAAC,EAAE;IAChG,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,IAAI,IAAI,CAAC,qBAAqB,CAAC,EAAE;IAC5F;QACE,EAAE,EAAE,CAAC;QACL,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,qBAAqB;QAC5B,SAAS,EAAE,IAAI,IAAI,CAAC,qBAAqB,CAAC;KAC3C;CACF,CAAC;AAEF,MAAM,YAAY,GAAG,kBAAkB,EAAa,CAAC;AAErD,MAAM,OAAO,GAAG;IACd,YAAY,CAAC,QAAQ,CAAC,IAAI,EAAE;QAC1B,MAAM,EAAE,IAAI;KACb,CAAC;IAEF,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;QAC5B,MAAM,EAAE,MAAM;KACf,CAAC;IAEF,YAAY,CAAC,QAAQ,CAAC,OAAO,EAAE;QAC7B,MAAM,EAAE,OAAO;KAChB,CAAC;IAEF,YAAY,CAAC,QAAQ,CAAC,WAAW,EAAE;QACjC,EAAE,EAAE,eAAe;QACnB,MAAM,EAAE,MAAM;QACd,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;YACrB,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,cAAc,EAAE,CAAC;QAC/C,CAAC;KACF,CAAC;CACH,CAAC;AAEF,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;QACf,OAAO,EAAE,OAAO;QAChB,SAAS,EAAE,KAAK;QAChB,KAAK,EAAE,IAAI;KACZ;CAC0B,CAAC;AAE9B,MAAM,CAAC,MAAM,OAAO,GAAiC;IACnD,MAAM,EAAE,SAAS,OAAO,CAAC,IAAI;QAC3B,OAAO,KAAC,WAAW,OAAK,IAAI,GAAI,CAAC;IACnC,CAAC;CACF,CAAC"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Alert, Skeleton, Table } from "@mantine/core";
|
|
3
|
+
import { IconChevronUp, IconChevronDown, IconSelector } from "@tabler/icons-react";
|
|
4
|
+
import { flexRender } from "@tanstack/react-table";
|
|
5
|
+
export const Sort = {
|
|
6
|
+
Ascending: "asc",
|
|
7
|
+
Descending: "desc",
|
|
8
|
+
Default: "default",
|
|
9
|
+
};
|
|
10
|
+
const SortIcons = {
|
|
11
|
+
[Sort.Ascending]: _jsx(IconChevronUp, {}),
|
|
12
|
+
[Sort.Descending]: _jsx(IconChevronDown, {}),
|
|
13
|
+
[Sort.Default]: _jsx(IconSelector, {}),
|
|
14
|
+
};
|
|
15
|
+
export function getSortingIcon(sortOrder, canSort) {
|
|
16
|
+
let result;
|
|
17
|
+
if (canSort === true) {
|
|
18
|
+
result = SortIcons[sortOrder];
|
|
19
|
+
}
|
|
20
|
+
return result;
|
|
21
|
+
}
|
|
22
|
+
export function getTableBody({ isLoading, error, tableRows, columnCount, }) {
|
|
23
|
+
let tableBody;
|
|
24
|
+
if (isLoading === true) {
|
|
25
|
+
tableBody = Array.from({ length: 5 }).map((_, rowIndex) => {
|
|
26
|
+
return (_jsx(Table.Tr, { children: Array.from({ length: columnCount }).map((_, colIndex) => {
|
|
27
|
+
return (_jsx(Table.Td, { children: _jsx(Skeleton, { height: 16, width: "100%" }) }, colIndex));
|
|
28
|
+
}) }, rowIndex));
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
else if (error instanceof Error) {
|
|
32
|
+
tableBody = (_jsx(Table.Tr, { children: _jsx(Table.Td, { colSpan: columnCount, align: "center", children: _jsx(Alert, { color: "red", children: error.message }) }) }));
|
|
33
|
+
}
|
|
34
|
+
else if (tableRows.length === 0) {
|
|
35
|
+
tableBody = (_jsx(Table.Tr, { children: _jsx(Table.Td, { colSpan: columnCount, align: "center", children: "No data available." }) }));
|
|
36
|
+
}
|
|
37
|
+
else {
|
|
38
|
+
tableBody = tableRows.map((row) => {
|
|
39
|
+
return (_jsx(Table.Tr, { children: row.getVisibleCells().map((cell) => {
|
|
40
|
+
return (_jsx(Table.Td, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
|
|
41
|
+
}) }, row.id));
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
return tableBody;
|
|
45
|
+
}
|
|
46
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/CustomTable/utils.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAC;AACtD,cAAc,0BAA0B,CAAC"}
|