@caseparts-org/caseblocks 0.0.145 → 0.0.146
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/Table-rSK2f682.js +172 -0
- package/dist/assets/Icon.css +1 -1
- package/dist/assets/Table.css +1 -0
- package/dist/atoms/Icon/Icon.d.ts +1 -1
- package/dist/atoms/Icon/Icon.js +32 -29
- package/dist/molecules/Table/Table.d.ts +56 -0
- package/dist/molecules/Table/Table.js +9 -0
- package/dist/molecules/Table/Table.stories.d.ts +24 -0
- package/dist/molecules/Table/Table.stories.js +177 -0
- package/package.json +1 -1
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
import { jsxs as K, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import c from "react";
|
|
3
|
+
import { c as m } from "./clsx-OuTLNxxd.js";
|
|
4
|
+
import { Icon as X } from "./atoms/Icon/Icon.js";
|
|
5
|
+
import './assets/Table.css';const Y = "_table_14k11_2", Z = "_noPaddingRow_14k11_71", $ = "_clickableRow_14k11_82", I = "_clickableCell_14k11_83", P = "_expandedContentCell_14k11_85", ee = "_expandedContentRow_14k11_94", ne = "_expandedRow_14k11_99", le = "_expanded_14k11_85", te = "_columnContent_14k11_135", ae = "_clickableHeader_14k11_155", n = {
|
|
6
|
+
"table-container": "_table-container_14k11_2",
|
|
7
|
+
table: Y,
|
|
8
|
+
"table-alternating": "_table-alternating_14k11_17",
|
|
9
|
+
"sorted-column": "_sorted-column_14k11_22",
|
|
10
|
+
noPaddingRow: Z,
|
|
11
|
+
clickableRow: $,
|
|
12
|
+
clickableCell: I,
|
|
13
|
+
expandedContentCell: P,
|
|
14
|
+
expandedContentRow: ee,
|
|
15
|
+
expandedRow: ne,
|
|
16
|
+
expanded: le,
|
|
17
|
+
columnContent: te,
|
|
18
|
+
clickableHeader: ae,
|
|
19
|
+
"icon-ascending": "_icon-ascending_14k11_156"
|
|
20
|
+
}, S = ({ children: d }) => null;
|
|
21
|
+
S.displayName = "Table.Columns";
|
|
22
|
+
const v = ({ children: d }) => null;
|
|
23
|
+
v.displayName = "Table.Column";
|
|
24
|
+
const V = ({ children: d }) => null;
|
|
25
|
+
V.displayName = "Table.Body";
|
|
26
|
+
const j = ({ children: d }) => null;
|
|
27
|
+
j.displayName = "Table.Row";
|
|
28
|
+
const z = ({ children: d }) => null;
|
|
29
|
+
z.displayName = "Table.Cell";
|
|
30
|
+
const u = ({ children: d, className: D, alternatingRows: M = !1, isSortable: w = !1, sortField: q, sortFieldKey: G, sortOrder: J = "descending", onSort: F, ...L }) => {
|
|
31
|
+
const H = [];
|
|
32
|
+
let k, x;
|
|
33
|
+
const i = (t, l) => {
|
|
34
|
+
var e;
|
|
35
|
+
return !!t && c.isValidElement(t) && ((e = t.type) == null ? void 0 : e.displayName) === l;
|
|
36
|
+
};
|
|
37
|
+
c.Children.forEach(d, (t) => {
|
|
38
|
+
i(t, "Table.Columns") ? k = t : i(t, "Table.Body") ? x = t : H.push(t);
|
|
39
|
+
});
|
|
40
|
+
const O = () => {
|
|
41
|
+
if (!k) return null;
|
|
42
|
+
const t = c.Children.toArray(k.props.children);
|
|
43
|
+
return /* @__PURE__ */ o("thead", { className: n.thead, children: /* @__PURE__ */ o("tr", { children: t.map((l, e) => {
|
|
44
|
+
if (i(l, "Table.Column")) {
|
|
45
|
+
const s = l, {
|
|
46
|
+
children: r,
|
|
47
|
+
align: R,
|
|
48
|
+
colSpan: N,
|
|
49
|
+
width: _,
|
|
50
|
+
style: g,
|
|
51
|
+
sortField: C,
|
|
52
|
+
sortFieldKey: a,
|
|
53
|
+
...b
|
|
54
|
+
} = s.props, T = {
|
|
55
|
+
textAlign: R ?? "left",
|
|
56
|
+
width: _,
|
|
57
|
+
...g
|
|
58
|
+
}, p = !!C, h = w && p && (p && q === C) && (a !== void 0 ? G === a : !0), f = w && p && typeof F == "function";
|
|
59
|
+
return /* @__PURE__ */ o(
|
|
60
|
+
"th",
|
|
61
|
+
{
|
|
62
|
+
className: m(n.th, h && n["sorted-column"], f && n.clickableHeader),
|
|
63
|
+
style: T,
|
|
64
|
+
colSpan: N,
|
|
65
|
+
onClick: f ? () => F(C, a) : void 0,
|
|
66
|
+
...b,
|
|
67
|
+
children: /* @__PURE__ */ K("div", { className: n.columnContent, children: [
|
|
68
|
+
r,
|
|
69
|
+
h && /* @__PURE__ */ o("span", { className: m(J === "ascending" && n["icon-ascending"]), children: /* @__PURE__ */ o(X, { iconKey: "fa-solid fa-chevron-down", size: "3xs" }) })
|
|
70
|
+
] })
|
|
71
|
+
},
|
|
72
|
+
e
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
return /* @__PURE__ */ o("th", { className: n.th, children: l }, e);
|
|
76
|
+
}) }) });
|
|
77
|
+
}, y = (t, l, e) => {
|
|
78
|
+
const s = c.Children.toArray(t).map((a, b) => {
|
|
79
|
+
if (i(a, "Table.Cell")) {
|
|
80
|
+
const T = a, {
|
|
81
|
+
children: p,
|
|
82
|
+
align: A,
|
|
83
|
+
colSpan: B,
|
|
84
|
+
width: h,
|
|
85
|
+
style: f,
|
|
86
|
+
...E
|
|
87
|
+
} = T.props, U = {
|
|
88
|
+
textAlign: A ?? "left",
|
|
89
|
+
width: h,
|
|
90
|
+
...f
|
|
91
|
+
}, W = !!(E && typeof E.onClick == "function");
|
|
92
|
+
return /* @__PURE__ */ o(
|
|
93
|
+
"td",
|
|
94
|
+
{
|
|
95
|
+
className: m(
|
|
96
|
+
n.cell,
|
|
97
|
+
(e == null ? void 0 : e.isExpanded) && n.expanded,
|
|
98
|
+
(e == null ? void 0 : e.isExpandedContent) && n.expandedContentCell,
|
|
99
|
+
W && n.clickableCell
|
|
100
|
+
),
|
|
101
|
+
style: U,
|
|
102
|
+
colSpan: B,
|
|
103
|
+
...E,
|
|
104
|
+
children: p
|
|
105
|
+
},
|
|
106
|
+
b
|
|
107
|
+
);
|
|
108
|
+
}
|
|
109
|
+
return c.isValidElement(a) && typeof a.type == "string" && a.type === "td" ? a : /* @__PURE__ */ o(
|
|
110
|
+
"td",
|
|
111
|
+
{
|
|
112
|
+
className: m(
|
|
113
|
+
n.cell,
|
|
114
|
+
(e == null ? void 0 : e.isExpanded) && n.expanded,
|
|
115
|
+
(e == null ? void 0 : e.isExpandedContent) && n.expandedContentCell
|
|
116
|
+
),
|
|
117
|
+
children: a
|
|
118
|
+
},
|
|
119
|
+
b
|
|
120
|
+
);
|
|
121
|
+
}), { className: r, style: R, isExpanded: N, isExpandedContent: _, ...g } = e ?? {}, C = !!(e && typeof e.onClick == "function");
|
|
122
|
+
return /* @__PURE__ */ o(
|
|
123
|
+
"tr",
|
|
124
|
+
{
|
|
125
|
+
className: m(
|
|
126
|
+
n.row,
|
|
127
|
+
r,
|
|
128
|
+
N && n.expandedRow,
|
|
129
|
+
_ && n.noPaddingRow,
|
|
130
|
+
_ && n.expandedContentRow,
|
|
131
|
+
C && n.clickableRow
|
|
132
|
+
),
|
|
133
|
+
style: R,
|
|
134
|
+
...g,
|
|
135
|
+
children: s
|
|
136
|
+
},
|
|
137
|
+
l
|
|
138
|
+
);
|
|
139
|
+
}, Q = () => {
|
|
140
|
+
if (x) {
|
|
141
|
+
const l = c.Children.toArray(x.props.children).map((e, s) => {
|
|
142
|
+
if (i(e, "Table.Row")) {
|
|
143
|
+
const r = e;
|
|
144
|
+
return y(r.props.children, s, r.props);
|
|
145
|
+
}
|
|
146
|
+
return c.isValidElement(e) && typeof e.type == "string" && e.type === "tr" ? e : y(e, s);
|
|
147
|
+
});
|
|
148
|
+
return /* @__PURE__ */ o("tbody", { className: n.tbody, children: l });
|
|
149
|
+
}
|
|
150
|
+
const t = H.map((l, e) => {
|
|
151
|
+
if (i(l, "Table.Row")) {
|
|
152
|
+
const s = l;
|
|
153
|
+
return y(s.props.children, e, s.props);
|
|
154
|
+
}
|
|
155
|
+
return c.isValidElement(l) && typeof l.type == "string" && l.type === "tr" ? l : y(l, e);
|
|
156
|
+
});
|
|
157
|
+
return /* @__PURE__ */ o("tbody", { className: n.tbody, children: t });
|
|
158
|
+
};
|
|
159
|
+
return /* @__PURE__ */ K("table", { className: m(n.table, D, M && n["table-alternating"]), ...L, children: [
|
|
160
|
+
O(),
|
|
161
|
+
Q()
|
|
162
|
+
] });
|
|
163
|
+
};
|
|
164
|
+
u.Columns = S;
|
|
165
|
+
u.Column = v;
|
|
166
|
+
u.Body = V;
|
|
167
|
+
u.Row = j;
|
|
168
|
+
u.Cell = z;
|
|
169
|
+
export {
|
|
170
|
+
u as T,
|
|
171
|
+
n as s
|
|
172
|
+
};
|
package/dist/assets/Icon.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._icon-
|
|
1
|
+
._icon-3xs_t8u9f_1{--icon-size: var(--font-size-xxs);--icon-padding: calc(var(--font-size-xxs) / 4)}._icon-2xs_t8u9f_5{--icon-size: var(--font-size-xs);--icon-padding: calc(var(--font-size-xs) / 4)}._icon-xs_t8u9f_9{--icon-size: var(--font-size-sm);--icon-padding: calc(var(--font-size-sm) / 4)}._icon-sm_t8u9f_13{--icon-size: var(--font-size-md);--icon-padding: calc(var(--font-size-md) / 4)}._icon-md_t8u9f_17{--icon-size: var(--font-size-2xl);--icon-padding: calc(var(--font-size-md) / 4)}._icon-lg_t8u9f_21{--icon-size: var(--font-size-3xl);--icon-padding: calc(var(--font-size-lg) / 4)}._wrapper_t8u9f_27{display:inline-flex;box-sizing:border-box;width:calc(var(--icon-size) + (var(--icon-padding) * 2));height:calc(var(--icon-size) + (var(--icon-padding) * 2));aspect-ratio:1 / 1;align-items:center;justify-content:center;line-height:1;padding:var(--icon-padding)}._wrapper_t8u9f_27>i,._wrapper_t8u9f_27>svg{font-size:var(--icon-size);width:100%;height:100%;max-width:100%;max-height:100%}._iconColor-inherit_t8u9f_50{color:inherit}._iconColor-default_t8u9f_51{color:var(--icons-icon-default)}._iconColor-default-inverted_t8u9f_52{color:var(--icons-icon-invert)}._iconColor-secondary_t8u9f_53{color:var(--icons-icon-secondary)}._iconColor-warning_t8u9f_54{color:var(--icons-icon-warning)}._iconColor-error-warning_t8u9f_55{color:var(--icons-icon-error-warning)}._iconColor-success_t8u9f_56{color:var(--icons-icon-success)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._table-container_14k11_2{overflow-x:hidden;width:100%}._table_14k11_2{min-width:100%;max-width:1056px;width:max-content;border-collapse:collapse;table-layout:fixed}._table-alternating_14k11_17 tr:nth-child(2n){background-color:#f0f0f0}._sorted-column_14k11_22{text-align:start;font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold);color:var(--color-brand-primary-primary-teal-blue);row-gap:4px}._table_14k11_2 th,._table_14k11_2 td{max-width:clamp(72px,10vw,180px);min-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._table_14k11_2 th{border-bottom:1px solid #000000;cursor:auto}._table_14k11_2 th:not(._sorted-column_14k11_22){text-align:start;font-size:var(--font-size-2xs);font-weight:var(--font-weight-light)}._table_14k11_2 th:last-of-type,._table_14k11_2 td:last-of-type{text-align:end;padding-right:.5rem}._table_14k11_2 th:first-of-type,._table_14k11_2 td:first-of-type{text-align:start;padding:.25rem .5rem}._table_14k11_2 th:not(:first-of-type):not(:last-of-type),._table_14k11_2 td:not(:first-of-type):not(:last-of-type){padding:.25rem .5rem}._noPaddingRow_14k11_71 td{padding:0!important}._table_14k11_2 td{text-align:start;cursor:auto}._table_14k11_2 ._clickableRow_14k11_82 td,._table_14k11_2 td._clickableCell_14k11_83{cursor:pointer}._table_14k11_2 td:not(._expandedContentCell_14k11_85){border-bottom:1px solid var(--border-border-primary)}._table_14k11_2>tbody tr{transition:background-color .2s linear}._table_14k11_2>tbody tr:not(._expandedContentRow_14k11_94):hover{background-color:var(--color-neutrals-neutral-1)}._expandedRow_14k11_99 td:first-of-type{border-left:1px solid var(--border-border-black-box)}._expandedRow_14k11_99 td:last-of-type{border-right:1px solid var(--border-border-black-box)}._expanded_14k11_85{border-top:4px solid var(--color-brand-primary-primary-teal-blue)}._expandedContentCell_14k11_85{border-left:1px solid var(--border-border-black-box);border-right:1px solid var(--border-border-black-box);border-bottom:1px solid var(--border-border-black-box);border-top:0}._expandedContentRow_14k11_94{background-color:transparent}._new-column_14k11_126{animation:_highlight_14k11_1 2s ease-in-out}@keyframes _highlight_14k11_1{0%{background-color:#ff0}to{background-color:transparent}}._columnContent_14k11_135{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-spacing-3xs);width:100%}._sorted-column_14k11_22 svg,._sorted-column_14k11_22 i{height:10px;width:10px;transition:transform .3s ease-in-out;vertical-align:middle;padding:0;margin:0 0 0 4px}._table_14k11_2 th._clickableHeader_14k11_155{cursor:pointer}._icon-ascending_14k11_156 svg,._icon-ascending_14k11_156 i{transform:rotate(180deg)}
|
|
@@ -4,7 +4,7 @@ export type IconVariant = "fa-sharp" | "fa-duotone" | "fa-sharp-duotone";
|
|
|
4
4
|
export type IconColorToken = "inherit" | "default" | "default-inverted" | "secondary" | "warning" | "error-warning" | "success";
|
|
5
5
|
export interface IconProps extends React.HTMLAttributes<HTMLSpanElement>, HideAtProps {
|
|
6
6
|
iconKey: `${IconSet} ${string}` | `${IconVariant} ${IconSet} ${string}`;
|
|
7
|
-
size?: "sm" | "md" | "lg";
|
|
7
|
+
size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg";
|
|
8
8
|
colorToken?: IconColorToken;
|
|
9
9
|
}
|
|
10
10
|
export declare function Icon({ iconKey, size, hideAt, className, colorToken, ...otherProps }: IconProps): import("react/jsx-runtime").JSX.Element;
|
package/dist/atoms/Icon/Icon.js
CHANGED
|
@@ -1,42 +1,45 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { c as
|
|
3
|
-
import { getHideAtStyles as
|
|
4
|
-
import '../../assets/Icon.css';const
|
|
5
|
-
"icon-
|
|
6
|
-
"icon-
|
|
7
|
-
"icon-
|
|
8
|
-
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
|
|
12
|
-
"iconColor-
|
|
13
|
-
"iconColor-
|
|
14
|
-
"iconColor-
|
|
15
|
-
"iconColor-
|
|
1
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { c as r } from "../../clsx-OuTLNxxd.js";
|
|
3
|
+
import { getHideAtStyles as l } from "../HideAt.js";
|
|
4
|
+
import '../../assets/Icon.css';const u = "_wrapper_t8u9f_27", o = {
|
|
5
|
+
"icon-3xs": "_icon-3xs_t8u9f_1",
|
|
6
|
+
"icon-2xs": "_icon-2xs_t8u9f_5",
|
|
7
|
+
"icon-xs": "_icon-xs_t8u9f_9",
|
|
8
|
+
"icon-sm": "_icon-sm_t8u9f_13",
|
|
9
|
+
"icon-md": "_icon-md_t8u9f_17",
|
|
10
|
+
"icon-lg": "_icon-lg_t8u9f_21",
|
|
11
|
+
wrapper: u,
|
|
12
|
+
"iconColor-inherit": "_iconColor-inherit_t8u9f_50",
|
|
13
|
+
"iconColor-default": "_iconColor-default_t8u9f_51",
|
|
14
|
+
"iconColor-default-inverted": "_iconColor-default-inverted_t8u9f_52",
|
|
15
|
+
"iconColor-secondary": "_iconColor-secondary_t8u9f_53",
|
|
16
|
+
"iconColor-warning": "_iconColor-warning_t8u9f_54",
|
|
17
|
+
"iconColor-error-warning": "_iconColor-error-warning_t8u9f_55",
|
|
18
|
+
"iconColor-success": "_iconColor-success_t8u9f_56"
|
|
16
19
|
};
|
|
17
|
-
function
|
|
18
|
-
iconKey:
|
|
19
|
-
size:
|
|
20
|
-
hideAt:
|
|
21
|
-
className:
|
|
22
|
-
colorToken:
|
|
20
|
+
function C({
|
|
21
|
+
iconKey: i,
|
|
22
|
+
size: c = "md",
|
|
23
|
+
hideAt: _,
|
|
24
|
+
className: t,
|
|
25
|
+
colorToken: e = "inherit",
|
|
23
26
|
...s
|
|
24
27
|
}) {
|
|
25
|
-
return /* @__PURE__ */
|
|
28
|
+
return /* @__PURE__ */ n(
|
|
26
29
|
"span",
|
|
27
30
|
{
|
|
28
|
-
className:
|
|
31
|
+
className: r(
|
|
29
32
|
o.wrapper,
|
|
30
|
-
o[`icon-${
|
|
31
|
-
o[`iconColor-${
|
|
32
|
-
|
|
33
|
-
|
|
33
|
+
o[`icon-${c}`],
|
|
34
|
+
o[`iconColor-${e}`],
|
|
35
|
+
l(_),
|
|
36
|
+
t
|
|
34
37
|
),
|
|
35
38
|
...s,
|
|
36
|
-
children: /* @__PURE__ */
|
|
39
|
+
children: /* @__PURE__ */ n("i", { className: r(i), "aria-hidden": "true" })
|
|
37
40
|
}
|
|
38
41
|
);
|
|
39
42
|
}
|
|
40
43
|
export {
|
|
41
|
-
|
|
44
|
+
C as Icon
|
|
42
45
|
};
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type TableAlign = 'left' | 'center' | 'right';
|
|
3
|
+
export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
|
|
4
|
+
children?: React.ReactNode;
|
|
5
|
+
className?: string;
|
|
6
|
+
/** When true, applies alternating row background styling */
|
|
7
|
+
alternatingRows?: boolean;
|
|
8
|
+
/** Enables sortable headers with click handlers */
|
|
9
|
+
isSortable?: boolean;
|
|
10
|
+
/** Current sort field identifier (consumer-defined) */
|
|
11
|
+
sortField?: string;
|
|
12
|
+
/** Optional key to disambiguate sort field (consumer-defined) */
|
|
13
|
+
sortFieldKey?: string | number;
|
|
14
|
+
/** Current sort order for chevron direction */
|
|
15
|
+
sortOrder?: 'ascending' | 'descending';
|
|
16
|
+
/** Header click handler to trigger consumer-side sorting */
|
|
17
|
+
onSort?: (_sortField: string, _sortFieldKey?: string | number) => void;
|
|
18
|
+
}
|
|
19
|
+
export interface ColumnsProps {
|
|
20
|
+
children: React.ReactNode;
|
|
21
|
+
}
|
|
22
|
+
export interface ColumnProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
|
|
23
|
+
children: React.ReactNode;
|
|
24
|
+
align?: TableAlign;
|
|
25
|
+
colSpan?: number;
|
|
26
|
+
width?: number | string;
|
|
27
|
+
/** Consumer-defined sort field identifier for this column */
|
|
28
|
+
sortField?: string;
|
|
29
|
+
/** Optional key to disambiguate the sort field for this column */
|
|
30
|
+
sortFieldKey?: string | number;
|
|
31
|
+
}
|
|
32
|
+
export interface BodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
|
|
33
|
+
children: React.ReactNode;
|
|
34
|
+
}
|
|
35
|
+
export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
|
|
36
|
+
children: React.ReactNode;
|
|
37
|
+
/** Marks the clicked/primary row as expanded */
|
|
38
|
+
isExpanded?: boolean;
|
|
39
|
+
/** Marks this row as expanded content (detail row) */
|
|
40
|
+
isExpandedContent?: boolean;
|
|
41
|
+
}
|
|
42
|
+
export interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
|
|
43
|
+
children: React.ReactNode;
|
|
44
|
+
align?: TableAlign;
|
|
45
|
+
colSpan?: number;
|
|
46
|
+
width?: number | string;
|
|
47
|
+
}
|
|
48
|
+
export type TableComponent = React.FC<TableProps> & {
|
|
49
|
+
Columns: React.FC<ColumnsProps>;
|
|
50
|
+
Column: React.FC<ColumnProps>;
|
|
51
|
+
Body: React.FC<BodyProps>;
|
|
52
|
+
Row: React.FC<RowProps>;
|
|
53
|
+
Cell: React.FC<CellProps>;
|
|
54
|
+
};
|
|
55
|
+
export declare const Table: TableComponent;
|
|
56
|
+
export default Table;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react';
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: import('./Table').TableComponent;
|
|
5
|
+
tags: string[];
|
|
6
|
+
args: {
|
|
7
|
+
alternatingRows: false;
|
|
8
|
+
};
|
|
9
|
+
argTypes: {
|
|
10
|
+
alternatingRows: {
|
|
11
|
+
control: {
|
|
12
|
+
type: "boolean";
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
parameters: {
|
|
17
|
+
layout: string;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
export default meta;
|
|
21
|
+
type Story = StoryObj<typeof meta>;
|
|
22
|
+
export declare const Default: Story;
|
|
23
|
+
export declare const ExpandableRow: Story;
|
|
24
|
+
export declare const Sortable: Story;
|
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
import { jsx as e, jsxs as l } from "react/jsx-runtime";
|
|
2
|
+
import { useState as s, useEffect as P } from "react";
|
|
3
|
+
import { T as t, s as S } from "../../Table-rSK2f682.js";
|
|
4
|
+
const v = {
|
|
5
|
+
title: "Case Parts/Molecules/Table",
|
|
6
|
+
component: t,
|
|
7
|
+
tags: ["autodocs"],
|
|
8
|
+
args: { alternatingRows: !1 },
|
|
9
|
+
argTypes: {
|
|
10
|
+
alternatingRows: { control: { type: "boolean" } }
|
|
11
|
+
},
|
|
12
|
+
parameters: {
|
|
13
|
+
layout: "centered"
|
|
14
|
+
}
|
|
15
|
+
}, R = (h) => {
|
|
16
|
+
const [b, m] = s(3), [d, g] = s(!0);
|
|
17
|
+
P(() => {
|
|
18
|
+
}, []);
|
|
19
|
+
const u = [
|
|
20
|
+
{ title: "Product", align: "left" },
|
|
21
|
+
{ title: "Qty", align: "center" },
|
|
22
|
+
{ title: "Price", align: d ? "right" : "left" }
|
|
23
|
+
];
|
|
24
|
+
return /* @__PURE__ */ l("div", { className: S["table-container"], style: { display: "flex", flexDirection: "column", gap: "0.75rem", alignItems: "stretch", minWidth: 320 }, children: [
|
|
25
|
+
/* @__PURE__ */ l(t, { ...h, children: [
|
|
26
|
+
/* @__PURE__ */ e(t.Columns, { children: u.map((r, a) => /* @__PURE__ */ e(t.Column, { align: r.align, children: r.title }, a)) }),
|
|
27
|
+
/* @__PURE__ */ e(t.Body, { children: Array.from({ length: b }).map((r, a) => /* @__PURE__ */ l(t.Row, { children: [
|
|
28
|
+
/* @__PURE__ */ l(t.Cell, { onClick: () => alert(`Row ${a + 1}, Col 1`), children: [
|
|
29
|
+
"Item ",
|
|
30
|
+
a + 1
|
|
31
|
+
] }),
|
|
32
|
+
/* @__PURE__ */ e(t.Cell, { align: "center", children: a + 1 }),
|
|
33
|
+
/* @__PURE__ */ l(t.Cell, { align: d ? "right" : "left", children: [
|
|
34
|
+
"\\$",
|
|
35
|
+
(a + 1) * 10
|
|
36
|
+
] })
|
|
37
|
+
] }, a)) })
|
|
38
|
+
] }),
|
|
39
|
+
/* @__PURE__ */ l("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
|
|
40
|
+
/* @__PURE__ */ e("button", { type: "button", onClick: () => m((r) => Math.max(0, r - 1)), children: "Remove Row" }),
|
|
41
|
+
/* @__PURE__ */ e("button", { type: "button", onClick: () => m((r) => r + 1), children: "Add Row" }),
|
|
42
|
+
/* @__PURE__ */ l("button", { type: "button", onClick: () => g((r) => !r), children: [
|
|
43
|
+
"Toggle Price Alignment (",
|
|
44
|
+
d ? "right" : "left",
|
|
45
|
+
")"
|
|
46
|
+
] })
|
|
47
|
+
] })
|
|
48
|
+
] });
|
|
49
|
+
}, I = {
|
|
50
|
+
args: { alternatingRows: !1 },
|
|
51
|
+
render: (h) => /* @__PURE__ */ e(R, { ...h })
|
|
52
|
+
}, $ = {
|
|
53
|
+
args: { alternatingRows: !1 },
|
|
54
|
+
render: (h) => /* @__PURE__ */ e((m) => {
|
|
55
|
+
const [d, g] = s(4), [u, r] = s(!0), [a, y] = s(null), p = [
|
|
56
|
+
{ title: "Product", align: "left" },
|
|
57
|
+
{ title: "Qty", align: "center" },
|
|
58
|
+
{ title: "Price", align: u ? "right" : "left" },
|
|
59
|
+
{ title: "Manufacturer", align: "left" },
|
|
60
|
+
{ title: "Category", align: "left" },
|
|
61
|
+
{ title: "SKU", align: "left" },
|
|
62
|
+
{ title: "Status", align: "center" },
|
|
63
|
+
{ title: "Location", align: "left" },
|
|
64
|
+
{ title: "Notes", align: "left" },
|
|
65
|
+
{ title: "Ship Time", align: "center" },
|
|
66
|
+
{ title: "Stock", align: "right" }
|
|
67
|
+
];
|
|
68
|
+
return /* @__PURE__ */ l("div", { className: S["table-container"], style: { display: "flex", flexDirection: "column", gap: "0.75rem", alignItems: "stretch", minWidth: 320 }, children: [
|
|
69
|
+
/* @__PURE__ */ l(t, { ...m, children: [
|
|
70
|
+
/* @__PURE__ */ e(t.Columns, { children: p.map((c, n) => /* @__PURE__ */ e(t.Column, { align: c.align, children: c.title }, n)) }),
|
|
71
|
+
/* @__PURE__ */ e(t.Body, { children: Array.from({ length: d }).flatMap((c, n) => {
|
|
72
|
+
const i = a === n, o = [
|
|
73
|
+
`Item ${n + 1} – Super Durable Connector`,
|
|
74
|
+
n + 1,
|
|
75
|
+
`$${(n + 1) * 10}`,
|
|
76
|
+
"Acme Components Incorporated",
|
|
77
|
+
"Electrical Connectors & Fittings",
|
|
78
|
+
`CP-${1e3 + n}-SKU-0987654321`,
|
|
79
|
+
n % 2 === 0 ? "Backordered" : "In Stock",
|
|
80
|
+
"Warehouse Delta – Aisle 12B",
|
|
81
|
+
"Extended warranty available for enterprise clients",
|
|
82
|
+
n % 2 === 0 ? "3–5 business days" : "Ships in 24 hours",
|
|
83
|
+
`${(n + 1) * 123}`
|
|
84
|
+
], f = /* @__PURE__ */ e(
|
|
85
|
+
t.Row,
|
|
86
|
+
{
|
|
87
|
+
isExpanded: i,
|
|
88
|
+
onClick: () => y(i ? null : n),
|
|
89
|
+
children: p.map((w, x) => /* @__PURE__ */ e(t.Cell, { align: w.align, children: o[x] }, x))
|
|
90
|
+
},
|
|
91
|
+
`row-${n}`
|
|
92
|
+
), C = i ? /* @__PURE__ */ e(t.Row, { isExpandedContent: !0, children: /* @__PURE__ */ e(t.Cell, { colSpan: p.length, children: /* @__PURE__ */ l("div", { style: { padding: "0.5rem" }, children: [
|
|
93
|
+
"Expanded content for Item ",
|
|
94
|
+
n + 1
|
|
95
|
+
] }) }) }, `expanded-${n}`) : null;
|
|
96
|
+
return C ? [f, C] : [f];
|
|
97
|
+
}) })
|
|
98
|
+
] }),
|
|
99
|
+
/* @__PURE__ */ l("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
|
|
100
|
+
/* @__PURE__ */ e("button", { type: "button", onClick: () => g((c) => Math.max(0, c - 1)), children: "Remove Row" }),
|
|
101
|
+
/* @__PURE__ */ e("button", { type: "button", onClick: () => g((c) => c + 1), children: "Add Row" }),
|
|
102
|
+
/* @__PURE__ */ l("button", { type: "button", onClick: () => r((c) => !c), children: [
|
|
103
|
+
"Toggle Price Alignment (",
|
|
104
|
+
u ? "right" : "left",
|
|
105
|
+
")"
|
|
106
|
+
] })
|
|
107
|
+
] })
|
|
108
|
+
] });
|
|
109
|
+
}, { ...h })
|
|
110
|
+
}, E = {
|
|
111
|
+
args: { alternatingRows: !1 },
|
|
112
|
+
render: (h) => /* @__PURE__ */ e((m) => {
|
|
113
|
+
const [d, g] = s("Product"), [u, r] = s(void 0), [a, y] = s("descending"), [p] = s(5), c = [
|
|
114
|
+
{ title: "Product", align: "left", sortField: "Product" },
|
|
115
|
+
{ title: "Qty", align: "center", sortField: "Qty" },
|
|
116
|
+
{ title: "Price", align: "right", sortField: "Price" },
|
|
117
|
+
{ title: "Manufacturer", align: "left", sortField: "Manufacturer" },
|
|
118
|
+
{ title: "Category", align: "left", sortField: "Category" },
|
|
119
|
+
{ title: "SKU", align: "left", sortField: "Attribute", sortFieldKey: 1001 },
|
|
120
|
+
{ title: "Status", align: "center", sortField: "Status" },
|
|
121
|
+
{ title: "Location", align: "left", sortField: "Location" },
|
|
122
|
+
{ title: "Notes", align: "left", sortField: "Notes" }
|
|
123
|
+
], n = (i, o) => {
|
|
124
|
+
const f = i === d && o === u;
|
|
125
|
+
y((C) => f && C === "descending" ? "ascending" : "descending"), g(i), r(o);
|
|
126
|
+
};
|
|
127
|
+
return /* @__PURE__ */ l("div", { className: S["table-container"], style: { display: "flex", flexDirection: "column", gap: "0.75rem", alignItems: "stretch", minWidth: 320 }, children: [
|
|
128
|
+
/* @__PURE__ */ l(
|
|
129
|
+
t,
|
|
130
|
+
{
|
|
131
|
+
...m,
|
|
132
|
+
isSortable: !0,
|
|
133
|
+
sortField: d,
|
|
134
|
+
sortFieldKey: u,
|
|
135
|
+
sortOrder: a,
|
|
136
|
+
onSort: n,
|
|
137
|
+
children: [
|
|
138
|
+
/* @__PURE__ */ e(t.Columns, { children: c.map((i, o) => /* @__PURE__ */ e(t.Column, { align: i.align, sortField: i.sortField, sortFieldKey: i.sortFieldKey, children: i.title }, o)) }),
|
|
139
|
+
/* @__PURE__ */ e(t.Body, { children: Array.from({ length: p }).map((i, o) => /* @__PURE__ */ l(t.Row, { children: [
|
|
140
|
+
/* @__PURE__ */ e(t.Cell, { children: `Item ${o + 1} – Responsive Test` }),
|
|
141
|
+
/* @__PURE__ */ e(t.Cell, { align: "center", children: o + 1 }),
|
|
142
|
+
/* @__PURE__ */ l(t.Cell, { align: "right", children: [
|
|
143
|
+
"$",
|
|
144
|
+
(o + 1) * 10
|
|
145
|
+
] }),
|
|
146
|
+
/* @__PURE__ */ e(t.Cell, { children: "Acme Corp" }),
|
|
147
|
+
/* @__PURE__ */ e(t.Cell, { children: "Connectors" }),
|
|
148
|
+
/* @__PURE__ */ e(t.Cell, { children: `CP-${1e3 + o}-SKU` }),
|
|
149
|
+
/* @__PURE__ */ e(t.Cell, { align: "center", children: o % 2 === 0 ? "Backordered" : "In Stock" }),
|
|
150
|
+
/* @__PURE__ */ e(t.Cell, { children: "Warehouse Delta – Aisle 12B" }),
|
|
151
|
+
/* @__PURE__ */ e(t.Cell, { children: "Long note to test overflow behavior and truncation" })
|
|
152
|
+
] }, o)) })
|
|
153
|
+
]
|
|
154
|
+
}
|
|
155
|
+
),
|
|
156
|
+
/* @__PURE__ */ l("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
|
|
157
|
+
/* @__PURE__ */ l("button", { type: "button", onClick: () => y((i) => i === "descending" ? "ascending" : "descending"), children: [
|
|
158
|
+
"Toggle Order (",
|
|
159
|
+
a,
|
|
160
|
+
")"
|
|
161
|
+
] }),
|
|
162
|
+
/* @__PURE__ */ e("button", { type: "button", onClick: () => {
|
|
163
|
+
g("Price"), r(void 0);
|
|
164
|
+
}, children: "Sort by Price" }),
|
|
165
|
+
/* @__PURE__ */ e("button", { type: "button", onClick: () => {
|
|
166
|
+
g("Attribute"), r(1001);
|
|
167
|
+
}, children: "Sort by SKU (key 1001)" })
|
|
168
|
+
] })
|
|
169
|
+
] });
|
|
170
|
+
}, { ...h })
|
|
171
|
+
};
|
|
172
|
+
export {
|
|
173
|
+
I as Default,
|
|
174
|
+
$ as ExpandableRow,
|
|
175
|
+
E as Sortable,
|
|
176
|
+
v as default
|
|
177
|
+
};
|