@obolnetwork/obol-ui 1.0.12 → 1.0.13

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.
Files changed (5) hide show
  1. package/dist/components/atoms/IconButton/IconButton.d.ts +4 -1
  2. package/dist/components/molecules/Table/Table.d.ts +17 -4
  3. package/dist/index.es.js +28 -11
  4. package/dist/index.js +28 -11
  5. package/package.json +1 -1
package/dist/components/atoms/IconButton/IconButton.d.ts CHANGED
@@ -3,6 +3,7 @@ import * as Stitches from "@stitches/react";
3
3
  export declare const IconButton: import("@stitches/react/types/styled-component").StyledComponent<"button", {
4
4
  ghost?: boolean | "true" | undefined;
5
5
  fullWidth?: boolean | "true" | undefined;
6
+ borderDisabled?: boolean | "true" | undefined;
6
7
  }, {
7
8
  motion: "(prefers-reduced-motion)";
8
9
  hover: "(any-hover: hover)";
@@ -488,6 +489,7 @@ export declare type IconButtonComponentProps = IconButtonComponentVariants;
488
489
  export declare const IconButtonStory: (props: Omit<import("@stitches/react/types/styled-component").TransformProps<{
489
490
  ghost?: boolean | "true" | undefined;
490
491
  fullWidth?: boolean | "true" | undefined;
492
+ borderDisabled?: boolean | "true" | undefined;
491
493
  }, {
492
494
  motion: "(prefers-reduced-motion)";
493
495
  hover: "(any-hover: hover)";
@@ -498,9 +500,10 @@ export declare const IconButtonStory: (props: Omit<import("@stitches/react/types
498
500
  bp2: "(min-width: 900px)";
499
501
  md: "(max-width: 1200px)";
500
502
  lg: "(max-width: 1800px)";
501
- }>, "ghost" | "fullWidth"> & {
503
+ }>, "ghost" | "fullWidth" | "borderDisabled"> & {
502
504
  ghost?: boolean | undefined;
503
505
  fullWidth?: boolean | undefined;
506
+ borderDisabled?: boolean | undefined;
504
507
  } & {
505
508
  children?: import("react").ReactNode;
506
509
  disabled?: boolean | undefined;
package/dist/components/molecules/Table/Table.d.ts CHANGED
@@ -5,15 +5,28 @@ export interface RowItem {
5
5
  }
6
6
  export declare type RowTableType = Record<string, string | React.ReactNode>;
7
7
  export declare type RowsTableType = RowItem[];
8
+ export declare type CellDef = {
9
+ component: "TextField" | "NumberField";
10
+ config?: {
11
+ type: "text" | "number";
12
+ max: number;
13
+ min: number;
14
+ };
15
+ };
16
+ export declare type ColumnDef<T> = {
17
+ accessorKey: keyof T;
18
+ header: string;
19
+ cell?: CellDef;
20
+ };
8
21
  export interface TableProps {
9
- rows: RowsTableType;
10
- columns: string[];
22
+ rows: any[];
23
+ columns: ColumnDef<any>[];
11
24
  }
12
25
  export interface SplitterTableProps extends TableProps {
13
- renderComponentValue?: "TextField" | "Text";
14
26
  onAddRow(item: string): void;
15
27
  onRemoveRow(item: string | number): void;
16
- onUpdateRow(id: string, value: string): void;
28
+ onUpdateRow(id: string, value: string, accessorKey: unknown): void;
29
+ removeButton?: boolean;
17
30
  }
18
31
  export declare const SplitterTable: React.FC<SplitterTableProps>;
19
32
  export declare const Table: React.FC<TableProps>;
package/dist/index.es.js CHANGED
@@ -1199,6 +1199,7 @@ var IconButton = styled("button", {
1199
1199
  color: "$muted",
1200
1200
  },
1201
1201
  margin: 0,
1202
+ border: "2px solid transparent",
1202
1203
  variants: {
1203
1204
  ghost: {
1204
1205
  true: {
@@ -1215,6 +1216,11 @@ var IconButton = styled("button", {
1215
1216
  width: "$full",
1216
1217
  },
1217
1218
  },
1219
+ borderDisabled: {
1220
+ true: {
1221
+ border: "2px solid $bg04",
1222
+ },
1223
+ },
1218
1224
  },
1219
1225
  });
1220
1226
  var IconButtonStory = modifyVariantsForStory(IconButton);
@@ -1427,7 +1433,7 @@ var NumberField = forwardRef(function (_a, ref) {
1427
1433
  borderRadius: 0,
1428
1434
  width: "95px",
1429
1435
  },
1430
- } }, { children: [jsx(IconButton, __assign({ disabled: qty <= min, className: "dec-button", onClick: handleOnDec }, { children: "-" })), jsx(TextField, { css: { borderRightStyle: "none", borderLeftStyle: "none" }, type: "number", ref: ref, value: qty, onChange: handleOnChange }), jsx(IconButton, __assign({ disabled: qty >= max, className: "inc-button", onClick: handleOnInc }, { children: "+" }))] })));
1436
+ } }, { children: [jsx(IconButton, __assign({ disabled: qty <= min, className: "dec-button", onClick: handleOnDec, borderDisabled: qty <= min }, { children: "-" })), jsx(TextField, { css: { borderRightStyle: "none", borderLeftStyle: "none" }, type: "number", ref: ref, value: qty, onChange: handleOnChange }), jsx(IconButton, __assign({ disabled: qty >= max, className: "inc-button", onClick: handleOnInc, borderDisabled: qty >= max }, { children: "+" }))] })));
1431
1437
  });
1432
1438
  NumberField.displayName = "NumberField";
1433
1439
 
@@ -1807,7 +1813,7 @@ var StyledTable = styled("table", {
1807
1813
  borderRadius: "2px",
1808
1814
  backgroundColor: "$bg02",
1809
1815
  borderStyle: "hidden",
1810
- boxShadow: "0 0 0 2px $bg04",
1816
+ boxShadow: "0 0 0 2px $colors$bg04",
1811
1817
  width: "100%",
1812
1818
  "& thead": {
1813
1819
  color: "$body",
@@ -1867,18 +1873,29 @@ var AddNewRow = function (props) {
1867
1873
  };
1868
1874
  // Components
1869
1875
  var SplitterTable = function (_a) {
1870
- var rows = _a.rows, columns = _a.columns, _b = _a.renderComponentValue, renderComponentValue = _b === void 0 ? "TextField" : _b, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow;
1871
- return (jsxs(StyledTable, { children: [jsxs("thead", { children: [jsx(Td, {}), columns.map(function (column, index) { return (jsx(Td, __assign({ css: { textAlign: "start" } }, { children: column }), "header-".concat(index))); }), jsx(Td, {})] }), jsxs("tbody", { children: [rows.map(function (row, rowIndex) { return (jsxs("tr", { children: [jsx(Td, __assign({ size: "sm" }, { children: rowIndex + 1 })), Object.keys(row).map(function (data, cellIndex) {
1872
- if (data === "id")
1873
- return null;
1874
- var isTextField = renderComponentValue === "TextField";
1875
- return (jsx(Td, __assign({ noPadding: true }, { children: isTextField ? (jsx(TextField, { defaultValue: row.value, onChange: function (e) { return onUpdateRow(row.id, e.target.value); } })) : (row.value) }), "cell ".concat(cellIndex)));
1876
- }), jsx(Td, __assign({ size: "sm" }, { children: jsx(IconButton, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsx(TrashIcon, {}) })) }))] }, row.id)); }), jsx(AddNewRow, { handleOnClick: function () { return onAddRow(""); } })] })] }));
1876
+ 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;
1877
+ return (jsxs(StyledTable, { children: [jsxs("thead", { children: [jsx(Td, {}), columns.map(function (column, index) { return (jsx(Td, __assign({ css: { textAlign: "start" } }, { children: column.header }), "header-".concat(index))); }), jsx(Td, {})] }), 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) {
1878
+ var _a;
1879
+ // if (column === "id") return null;
1880
+ var isTextField = !!column.cell;
1881
+ return (jsx(Td, __assign({ noPadding: true, css: {
1882
+ "input::-webkit-inner-spin-button": {
1883
+ "-webkit-appearance": "none",
1884
+ margin: 0,
1885
+ },
1886
+ /* Firefox */
1887
+ "input[type=number]": {
1888
+ "-moz-appearance": "textfield",
1889
+ },
1890
+ } }, { children: isTextField ? (jsx(TextField, __assign({ defaultValue: row[column.accessorKey], onChange: function (e) {
1891
+ return onUpdateRow(row.id, e.target.value, column.accessorKey);
1892
+ } }, (_a = column.cell) === null || _a === void 0 ? void 0 : _a.config))) : (row[column.accessorKey]) }), "cell ".concat(cellIndex)));
1893
+ }), removeButton && (jsx(Td, __assign({ size: "sm" }, { children: jsx(IconButton, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsx(TrashIcon, {}) })) })))] }, row.id)); }), jsx(AddNewRow, { handleOnClick: function () { return onAddRow(""); } })] })] }));
1877
1894
  };
1878
1895
  var Table = function (_a) {
1879
1896
  var rows = _a.rows, columns = _a.columns;
1880
- return (jsxs(StyledTable, { children: [jsx("thead", { children: columns.map(function (column, index) { return (jsx(Td, { children: column }, "header-".concat(index))); }) }), jsx("tbody", { children: rows.map(function (row, rowIndex) { return (jsx("tr", { children: Object.keys(row).map(function (data, cellIndex) {
1881
- return (jsx(Td, { children: row.value }, "cell ".concat(cellIndex)));
1897
+ return (jsxs(StyledTable, { children: [jsx("thead", { children: columns.map(function (column, index) { return (jsx(Td, { children: column }, "header-".concat(index))); }) }), jsx("tbody", { children: rows.map(function (row, rowIndex) { return (jsx("tr", { children: columns.map(function (column, cellIndex) {
1898
+ return (jsx(Td, { children: row[column.accessorKey] }, "cell ".concat(cellIndex)));
1882
1899
  }) }, "row ".concat(rowIndex))); }) })] }));
1883
1900
  };
1884
1901
 
package/dist/index.js CHANGED
@@ -1231,6 +1231,7 @@ var IconButton = styled("button", {
1231
1231
  color: "$muted",
1232
1232
  },
1233
1233
  margin: 0,
1234
+ border: "2px solid transparent",
1234
1235
  variants: {
1235
1236
  ghost: {
1236
1237
  true: {
@@ -1247,6 +1248,11 @@ var IconButton = styled("button", {
1247
1248
  width: "$full",
1248
1249
  },
1249
1250
  },
1251
+ borderDisabled: {
1252
+ true: {
1253
+ border: "2px solid $bg04",
1254
+ },
1255
+ },
1250
1256
  },
1251
1257
  });
1252
1258
  var IconButtonStory = modifyVariantsForStory(IconButton);
@@ -1459,7 +1465,7 @@ var NumberField = React.forwardRef(function (_a, ref) {
1459
1465
  borderRadius: 0,
1460
1466
  width: "95px",
1461
1467
  },
1462
- } }, { children: [jsxRuntime.jsx(IconButton, __assign({ disabled: qty <= min, className: "dec-button", onClick: handleOnDec }, { children: "-" })), jsxRuntime.jsx(TextField, { css: { borderRightStyle: "none", borderLeftStyle: "none" }, type: "number", ref: ref, value: qty, onChange: handleOnChange }), jsxRuntime.jsx(IconButton, __assign({ disabled: qty >= max, className: "inc-button", onClick: handleOnInc }, { children: "+" }))] })));
1468
+ } }, { children: [jsxRuntime.jsx(IconButton, __assign({ disabled: qty <= min, className: "dec-button", onClick: handleOnDec, borderDisabled: qty <= min }, { children: "-" })), jsxRuntime.jsx(TextField, { css: { borderRightStyle: "none", borderLeftStyle: "none" }, type: "number", ref: ref, value: qty, onChange: handleOnChange }), jsxRuntime.jsx(IconButton, __assign({ disabled: qty >= max, className: "inc-button", onClick: handleOnInc, borderDisabled: qty >= max }, { children: "+" }))] })));
1463
1469
  });
1464
1470
  NumberField.displayName = "NumberField";
1465
1471
 
@@ -1839,7 +1845,7 @@ var StyledTable = styled("table", {
1839
1845
  borderRadius: "2px",
1840
1846
  backgroundColor: "$bg02",
1841
1847
  borderStyle: "hidden",
1842
- boxShadow: "0 0 0 2px $bg04",
1848
+ boxShadow: "0 0 0 2px $colors$bg04",
1843
1849
  width: "100%",
1844
1850
  "& thead": {
1845
1851
  color: "$body",
@@ -1899,18 +1905,29 @@ var AddNewRow = function (props) {
1899
1905
  };
1900
1906
  // Components
1901
1907
  var SplitterTable = function (_a) {
1902
- var rows = _a.rows, columns = _a.columns, _b = _a.renderComponentValue, renderComponentValue = _b === void 0 ? "TextField" : _b, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow;
1903
- return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsxs("thead", { children: [jsxRuntime.jsx(Td, {}), columns.map(function (column, index) { return (jsxRuntime.jsx(Td, __assign({ css: { textAlign: "start" } }, { children: column }), "header-".concat(index))); }), jsxRuntime.jsx(Td, {})] }), jsxRuntime.jsxs("tbody", { children: [rows.map(function (row, rowIndex) { return (jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx(Td, __assign({ size: "sm" }, { children: rowIndex + 1 })), Object.keys(row).map(function (data, cellIndex) {
1904
- if (data === "id")
1905
- return null;
1906
- var isTextField = renderComponentValue === "TextField";
1907
- return (jsxRuntime.jsx(Td, __assign({ noPadding: true }, { children: isTextField ? (jsxRuntime.jsx(TextField, { defaultValue: row.value, onChange: function (e) { return onUpdateRow(row.id, e.target.value); } })) : (row.value) }), "cell ".concat(cellIndex)));
1908
- }), jsxRuntime.jsx(Td, __assign({ size: "sm" }, { children: jsxRuntime.jsx(IconButton, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsxRuntime.jsx(TrashIcon, {}) })) }))] }, row.id)); }), jsxRuntime.jsx(AddNewRow, { handleOnClick: function () { return onAddRow(""); } })] })] }));
1908
+ 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;
1909
+ return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsxs("thead", { children: [jsxRuntime.jsx(Td, {}), columns.map(function (column, index) { return (jsxRuntime.jsx(Td, __assign({ css: { textAlign: "start" } }, { children: column.header }), "header-".concat(index))); }), jsxRuntime.jsx(Td, {})] }), 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) {
1910
+ var _a;
1911
+ // if (column === "id") return null;
1912
+ var isTextField = !!column.cell;
1913
+ return (jsxRuntime.jsx(Td, __assign({ noPadding: true, css: {
1914
+ "input::-webkit-inner-spin-button": {
1915
+ "-webkit-appearance": "none",
1916
+ margin: 0,
1917
+ },
1918
+ /* Firefox */
1919
+ "input[type=number]": {
1920
+ "-moz-appearance": "textfield",
1921
+ },
1922
+ } }, { children: isTextField ? (jsxRuntime.jsx(TextField, __assign({ defaultValue: row[column.accessorKey], onChange: function (e) {
1923
+ return onUpdateRow(row.id, e.target.value, column.accessorKey);
1924
+ } }, (_a = column.cell) === null || _a === void 0 ? void 0 : _a.config))) : (row[column.accessorKey]) }), "cell ".concat(cellIndex)));
1925
+ }), removeButton && (jsxRuntime.jsx(Td, __assign({ size: "sm" }, { children: jsxRuntime.jsx(IconButton, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsxRuntime.jsx(TrashIcon, {}) })) })))] }, row.id)); }), jsxRuntime.jsx(AddNewRow, { handleOnClick: function () { return onAddRow(""); } })] })] }));
1909
1926
  };
1910
1927
  var Table = function (_a) {
1911
1928
  var rows = _a.rows, columns = _a.columns;
1912
- return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsx("thead", { children: columns.map(function (column, index) { return (jsxRuntime.jsx(Td, { children: column }, "header-".concat(index))); }) }), jsxRuntime.jsx("tbody", { children: rows.map(function (row, rowIndex) { return (jsxRuntime.jsx("tr", { children: Object.keys(row).map(function (data, cellIndex) {
1913
- return (jsxRuntime.jsx(Td, { children: row.value }, "cell ".concat(cellIndex)));
1929
+ return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsx("thead", { children: columns.map(function (column, index) { return (jsxRuntime.jsx(Td, { children: column }, "header-".concat(index))); }) }), jsxRuntime.jsx("tbody", { children: rows.map(function (row, rowIndex) { return (jsxRuntime.jsx("tr", { children: columns.map(function (column, cellIndex) {
1930
+ return (jsxRuntime.jsx(Td, { children: row[column.accessorKey] }, "cell ".concat(cellIndex)));
1914
1931
  }) }, "row ".concat(rowIndex))); }) })] }));
1915
1932
  };
1916
1933
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@obolnetwork/obol-ui",
3
- "version": "1.0.12",
3
+ "version": "1.0.13",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.es.js",
6
6
  "license": "MIT",