@obolnetwork/obol-ui 1.0.15 → 1.0.18
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.
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
interface
|
|
2
|
+
export interface StepProps {
|
|
3
|
+
id: string | number;
|
|
3
4
|
title: string;
|
|
4
5
|
href: string;
|
|
5
|
-
status: "complete" | "incomplete";
|
|
6
|
+
status: "complete" | "incomplete" | "current";
|
|
7
|
+
rank?: number;
|
|
6
8
|
}
|
|
7
9
|
interface ProgressTrackerProps {
|
|
8
|
-
items:
|
|
10
|
+
items: StepProps[];
|
|
9
11
|
}
|
|
10
12
|
export declare const ProgressTracker: React.FC<ProgressTrackerProps>;
|
|
11
13
|
export {};
|
package/dist/index.es.js
CHANGED
|
@@ -1723,8 +1723,11 @@ var NotificationCard = function (_a) {
|
|
|
1723
1723
|
return (jsxs(NotificationContainer, { children: [jsx(Box, { children: jsx(AlertIcon, { size: "lg", color: "body" }) }), jsxs(Box, __assign({ css: { display: "flex", fd: "column", gap: "$sm" } }, { children: [jsxs(Box, __assign({ css: { display: "flex", fd: "column", gap: "$xs" } }, { children: [jsx(Text, __assign({ variant: "body" }, { children: heading })), subHeading && (jsx(Text, __assign({ css: { color: "$textLight", fontSize: "$3" } }, { children: subHeading })))] })), link && (jsxs(Link, __assign({ target: "_blank", href: link }, { children: [linkText, jsx(ArrowForward, { size: "md" })] })))] }))] }));
|
|
1724
1724
|
};
|
|
1725
1725
|
|
|
1726
|
-
var ProgressTracker = function (
|
|
1727
|
-
var
|
|
1726
|
+
var ProgressTracker = function (_a) {
|
|
1727
|
+
var items = _a.items;
|
|
1728
|
+
var count = items.filter(function (item) { return item.status === "complete"; }).length;
|
|
1729
|
+
var offset = 100 / items.length / 2;
|
|
1730
|
+
var width = (100 / items.length) * count + offset;
|
|
1728
1731
|
return (jsx(Box, __assign({ css: { backgroundColor: "$bg02", py: "$3xl", px: "$6xl" } }, { children: jsxs(Box, __assign({ css: { display: "flex", fd: "column", gap: "$md" } }, { children: [jsx(Box, __assign({ className: "progress-bar-behind", css: {
|
|
1729
1732
|
height: "$xxs",
|
|
1730
1733
|
borderRadius: "$3",
|
|
@@ -1737,7 +1740,7 @@ var ProgressTracker = function (props) {
|
|
|
1737
1740
|
height: "$xxs",
|
|
1738
1741
|
borderRadius: "$3",
|
|
1739
1742
|
position: "relative",
|
|
1740
|
-
width: "
|
|
1743
|
+
width: "".concat(width > 100 ? 100 : width, "%"),
|
|
1741
1744
|
} }, { children: [jsx(Box, { css: {
|
|
1742
1745
|
display: "grid",
|
|
1743
1746
|
placeItems: "center",
|
|
@@ -1767,10 +1770,15 @@ var ProgressTracker = function (props) {
|
|
|
1767
1770
|
right: "-8px",
|
|
1768
1771
|
},
|
|
1769
1772
|
} })] })) })), jsx(Box, __assign({ className: "link-items", css: {
|
|
1770
|
-
display: "
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
|
|
1773
|
+
display: "grid",
|
|
1774
|
+
gridTemplateColumns: "repeat(".concat(items.length || 1, ", 1fr)"),
|
|
1775
|
+
} }, { children: items.map(function (item, index) { return (jsx(Link, __assign({ disabled: item.status === "incomplete", href: item.status === "incomplete" ? "#" : item.href, css: {
|
|
1776
|
+
display: "flex",
|
|
1777
|
+
justifyContent: "center",
|
|
1778
|
+
alignItems: "center",
|
|
1779
|
+
height: "auto",
|
|
1780
|
+
textAlign: "center",
|
|
1781
|
+
} }, { children: item.title }), ":l".concat(index))); }) }))] })) })));
|
|
1774
1782
|
};
|
|
1775
1783
|
|
|
1776
1784
|
var StyledRadio = styled(RadioGroupPrimitive.Item, {
|
|
@@ -1870,6 +1878,20 @@ var Td = styled("td", {
|
|
|
1870
1878
|
},
|
|
1871
1879
|
},
|
|
1872
1880
|
});
|
|
1881
|
+
var Th = styled("th", {
|
|
1882
|
+
border: "2px solid $bg04",
|
|
1883
|
+
py: "$sm",
|
|
1884
|
+
px: "$sm",
|
|
1885
|
+
textAlign: "center",
|
|
1886
|
+
color: "$body",
|
|
1887
|
+
fontWeight: "$bold",
|
|
1888
|
+
fontSize: "$4",
|
|
1889
|
+
"& input": {
|
|
1890
|
+
border: "none",
|
|
1891
|
+
borderRadius: 0,
|
|
1892
|
+
width: "100%",
|
|
1893
|
+
},
|
|
1894
|
+
});
|
|
1873
1895
|
var Tr = styled("tr", {});
|
|
1874
1896
|
var BoxBorderTop = styled(Box, {
|
|
1875
1897
|
borderTop: "2px solid $bg04",
|
|
@@ -1889,7 +1911,7 @@ var AddNewRow = function (props) {
|
|
|
1889
1911
|
// Components
|
|
1890
1912
|
var SplitterTable = function (_a) {
|
|
1891
1913
|
var rows = _a.rows, columns = _a.columns, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow, _b = _a.removeButton, removeButton = _b === void 0 ? true : _b;
|
|
1892
|
-
return (jsxs(StyledTable, { children: [
|
|
1914
|
+
return (jsxs(StyledTable, { children: [jsx("thead", { children: jsxs("tr", { children: [jsx(Th, {}), columns.map(function (column, index) { return (jsx(Th, __assign({ css: { textAlign: "start" } }, { children: column.header }), "header-".concat(index))); }), jsx(Th, {})] }) }), jsxs("tbody", { children: [rows.map(function (row, rowIndex) { return (jsxs("tr", { children: [jsx(Td, __assign({ size: "sm" }, { children: rowIndex + 1 })), columns.map(function (column, cellIndex) {
|
|
1893
1915
|
var _a;
|
|
1894
1916
|
var isTextField = !!column.cell;
|
|
1895
1917
|
return (jsx(Td, __assign({ noPadding: true, css: {
|
|
@@ -1902,8 +1924,13 @@ var SplitterTable = function (_a) {
|
|
|
1902
1924
|
"-moz-appearance": "textfield",
|
|
1903
1925
|
},
|
|
1904
1926
|
} }, { children: isTextField ? (jsx(TextField, __assign({ defaultValue: row[column.accessorKey], onInput: function (e) {
|
|
1905
|
-
|
|
1906
|
-
|
|
1927
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
1928
|
+
if (((_b = (_a = column.cell) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.type) === "number") {
|
|
1929
|
+
if ((_d = (_c = column.cell) === null || _c === void 0 ? void 0 : _c.config) === null || _d === void 0 ? void 0 : _d.max) {
|
|
1930
|
+
if (Number(e.target.value) > ((_f = (_e = column.cell) === null || _e === void 0 ? void 0 : _e.config) === null || _f === void 0 ? void 0 : _f.max))
|
|
1931
|
+
e.target.value = (_h = (_g = column.cell) === null || _g === void 0 ? void 0 : _g.config) === null || _h === void 0 ? void 0 : _h.max;
|
|
1932
|
+
}
|
|
1933
|
+
}
|
|
1907
1934
|
}, onChange: function (e) {
|
|
1908
1935
|
var _a, _b;
|
|
1909
1936
|
var value = ((_b = (_a = column.cell) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.type) === "number"
|
package/dist/index.js
CHANGED
|
@@ -1754,8 +1754,11 @@ var NotificationCard = function (_a) {
|
|
|
1754
1754
|
return (jsxRuntime.jsxs(NotificationContainer, { children: [jsxRuntime.jsx(Box, { children: jsxRuntime.jsx(AlertIcon, { size: "lg", color: "body" }) }), jsxRuntime.jsxs(Box, __assign({ css: { display: "flex", fd: "column", gap: "$sm" } }, { children: [jsxRuntime.jsxs(Box, __assign({ css: { display: "flex", fd: "column", gap: "$xs" } }, { children: [jsxRuntime.jsx(Text, __assign({ variant: "body" }, { children: heading })), subHeading && (jsxRuntime.jsx(Text, __assign({ css: { color: "$textLight", fontSize: "$3" } }, { children: subHeading })))] })), link && (jsxRuntime.jsxs(Link, __assign({ target: "_blank", href: link }, { children: [linkText, jsxRuntime.jsx(ArrowForward, { size: "md" })] })))] }))] }));
|
|
1755
1755
|
};
|
|
1756
1756
|
|
|
1757
|
-
var ProgressTracker = function (
|
|
1758
|
-
var
|
|
1757
|
+
var ProgressTracker = function (_a) {
|
|
1758
|
+
var items = _a.items;
|
|
1759
|
+
var count = items.filter(function (item) { return item.status === "complete"; }).length;
|
|
1760
|
+
var offset = 100 / items.length / 2;
|
|
1761
|
+
var width = (100 / items.length) * count + offset;
|
|
1759
1762
|
return (jsxRuntime.jsx(Box, __assign({ css: { backgroundColor: "$bg02", py: "$3xl", px: "$6xl" } }, { children: jsxRuntime.jsxs(Box, __assign({ css: { display: "flex", fd: "column", gap: "$md" } }, { children: [jsxRuntime.jsx(Box, __assign({ className: "progress-bar-behind", css: {
|
|
1760
1763
|
height: "$xxs",
|
|
1761
1764
|
borderRadius: "$3",
|
|
@@ -1768,7 +1771,7 @@ var ProgressTracker = function (props) {
|
|
|
1768
1771
|
height: "$xxs",
|
|
1769
1772
|
borderRadius: "$3",
|
|
1770
1773
|
position: "relative",
|
|
1771
|
-
width: "
|
|
1774
|
+
width: "".concat(width > 100 ? 100 : width, "%"),
|
|
1772
1775
|
} }, { children: [jsxRuntime.jsx(Box, { css: {
|
|
1773
1776
|
display: "grid",
|
|
1774
1777
|
placeItems: "center",
|
|
@@ -1798,10 +1801,15 @@ var ProgressTracker = function (props) {
|
|
|
1798
1801
|
right: "-8px",
|
|
1799
1802
|
},
|
|
1800
1803
|
} })] })) })), jsxRuntime.jsx(Box, __assign({ className: "link-items", css: {
|
|
1801
|
-
display: "
|
|
1802
|
-
|
|
1803
|
-
|
|
1804
|
-
|
|
1804
|
+
display: "grid",
|
|
1805
|
+
gridTemplateColumns: "repeat(".concat(items.length || 1, ", 1fr)"),
|
|
1806
|
+
} }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(Link, __assign({ disabled: item.status === "incomplete", href: item.status === "incomplete" ? "#" : item.href, css: {
|
|
1807
|
+
display: "flex",
|
|
1808
|
+
justifyContent: "center",
|
|
1809
|
+
alignItems: "center",
|
|
1810
|
+
height: "auto",
|
|
1811
|
+
textAlign: "center",
|
|
1812
|
+
} }, { children: item.title }), ":l".concat(index))); }) }))] })) })));
|
|
1805
1813
|
};
|
|
1806
1814
|
|
|
1807
1815
|
var StyledRadio = styled(RadioGroupPrimitive__namespace.Item, {
|
|
@@ -1901,6 +1909,20 @@ var Td = styled("td", {
|
|
|
1901
1909
|
},
|
|
1902
1910
|
},
|
|
1903
1911
|
});
|
|
1912
|
+
var Th = styled("th", {
|
|
1913
|
+
border: "2px solid $bg04",
|
|
1914
|
+
py: "$sm",
|
|
1915
|
+
px: "$sm",
|
|
1916
|
+
textAlign: "center",
|
|
1917
|
+
color: "$body",
|
|
1918
|
+
fontWeight: "$bold",
|
|
1919
|
+
fontSize: "$4",
|
|
1920
|
+
"& input": {
|
|
1921
|
+
border: "none",
|
|
1922
|
+
borderRadius: 0,
|
|
1923
|
+
width: "100%",
|
|
1924
|
+
},
|
|
1925
|
+
});
|
|
1904
1926
|
var Tr = styled("tr", {});
|
|
1905
1927
|
var BoxBorderTop = styled(Box, {
|
|
1906
1928
|
borderTop: "2px solid $bg04",
|
|
@@ -1920,7 +1942,7 @@ var AddNewRow = function (props) {
|
|
|
1920
1942
|
// Components
|
|
1921
1943
|
var SplitterTable = function (_a) {
|
|
1922
1944
|
var rows = _a.rows, columns = _a.columns, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow, _b = _a.removeButton, removeButton = _b === void 0 ? true : _b;
|
|
1923
|
-
return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.
|
|
1945
|
+
return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx(Th, {}), columns.map(function (column, index) { return (jsxRuntime.jsx(Th, __assign({ css: { textAlign: "start" } }, { children: column.header }), "header-".concat(index))); }), jsxRuntime.jsx(Th, {})] }) }), jsxRuntime.jsxs("tbody", { children: [rows.map(function (row, rowIndex) { return (jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx(Td, __assign({ size: "sm" }, { children: rowIndex + 1 })), columns.map(function (column, cellIndex) {
|
|
1924
1946
|
var _a;
|
|
1925
1947
|
var isTextField = !!column.cell;
|
|
1926
1948
|
return (jsxRuntime.jsx(Td, __assign({ noPadding: true, css: {
|
|
@@ -1933,8 +1955,13 @@ var SplitterTable = function (_a) {
|
|
|
1933
1955
|
"-moz-appearance": "textfield",
|
|
1934
1956
|
},
|
|
1935
1957
|
} }, { children: isTextField ? (jsxRuntime.jsx(TextField, __assign({ defaultValue: row[column.accessorKey], onInput: function (e) {
|
|
1936
|
-
|
|
1937
|
-
|
|
1958
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
1959
|
+
if (((_b = (_a = column.cell) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.type) === "number") {
|
|
1960
|
+
if ((_d = (_c = column.cell) === null || _c === void 0 ? void 0 : _c.config) === null || _d === void 0 ? void 0 : _d.max) {
|
|
1961
|
+
if (Number(e.target.value) > ((_f = (_e = column.cell) === null || _e === void 0 ? void 0 : _e.config) === null || _f === void 0 ? void 0 : _f.max))
|
|
1962
|
+
e.target.value = (_h = (_g = column.cell) === null || _g === void 0 ? void 0 : _g.config) === null || _h === void 0 ? void 0 : _h.max;
|
|
1963
|
+
}
|
|
1964
|
+
}
|
|
1938
1965
|
}, onChange: function (e) {
|
|
1939
1966
|
var _a, _b;
|
|
1940
1967
|
var value = ((_b = (_a = column.cell) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.type) === "number"
|