@monolith-forensics/monolith-ui 1.3.31 → 1.3.33
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/Alert/Alert.d.ts +8 -0
- package/dist/Alert/Alert.js +43 -0
- package/dist/Alert/index.d.ts +1 -0
- package/dist/Alert/index.js +1 -0
- package/dist/MonolithUIProvider/MonolithUIProvider.d.ts +22 -0
- package/dist/Table/types.d.ts +16 -4
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/theme/variants.js +44 -0
- package/package.json +1 -1
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { AlertCircleIcon, AlertTriangleIcon, CheckIcon, InfoIcon, } from "lucide-react";
|
|
3
|
+
import styled from "styled-components";
|
|
4
|
+
const Icons = {
|
|
5
|
+
info: _jsx(InfoIcon, { size: 16 }),
|
|
6
|
+
success: _jsx(CheckIcon, { size: 16 }),
|
|
7
|
+
warning: _jsx(AlertCircleIcon, { size: 16 }),
|
|
8
|
+
error: _jsx(AlertTriangleIcon, { size: 16 }),
|
|
9
|
+
};
|
|
10
|
+
const StyledContainer = styled.div `
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: row;
|
|
13
|
+
align-items: center;
|
|
14
|
+
gap: 10px;
|
|
15
|
+
padding: 10px;
|
|
16
|
+
border-radius: 4px;
|
|
17
|
+
|
|
18
|
+
border: 1px solid ${({ theme, variant }) => theme.alert[variant].border};
|
|
19
|
+
background-color: ${({ theme, variant }) => theme.alert[variant].background};
|
|
20
|
+
color: ${({ theme, variant }) => theme.alert[variant].color};
|
|
21
|
+
`;
|
|
22
|
+
const StyledTitle = styled.h3 `
|
|
23
|
+
font-size: 14px;
|
|
24
|
+
font-weight: bold;
|
|
25
|
+
margin: 0px;
|
|
26
|
+
|
|
27
|
+
color: ${({ theme, variant }) => { var _a; return (_a = theme.alert[variant]) === null || _a === void 0 ? void 0 : _a.color; }};
|
|
28
|
+
`;
|
|
29
|
+
const StyledContent = styled.div `
|
|
30
|
+
font-size: 13px;
|
|
31
|
+
font-weight: 400;
|
|
32
|
+
margin: 0px;
|
|
33
|
+
|
|
34
|
+
color: ${({ theme, variant }) => theme.palette.text.primary};
|
|
35
|
+
`;
|
|
36
|
+
const StyledContentContainer = styled.div `
|
|
37
|
+
display: flex;
|
|
38
|
+
flex-direction: column;
|
|
39
|
+
gap: 5px;
|
|
40
|
+
`;
|
|
41
|
+
export const Alert = ({ children, variant = "info", title, onClose, }) => {
|
|
42
|
+
return (_jsxs(StyledContainer, { variant: variant, children: [Icons[variant], _jsxs(StyledContentContainer, { children: [title && _jsx(StyledTitle, { variant: variant, children: title }), _jsx(StyledContent, { variant: variant, children: children })] })] }));
|
|
43
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Alert";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Alert";
|
|
@@ -143,6 +143,28 @@ export interface MonolithDefaultTheme {
|
|
|
143
143
|
error: string;
|
|
144
144
|
};
|
|
145
145
|
};
|
|
146
|
+
alert: {
|
|
147
|
+
info: {
|
|
148
|
+
background: string;
|
|
149
|
+
border: string;
|
|
150
|
+
color: string;
|
|
151
|
+
};
|
|
152
|
+
success: {
|
|
153
|
+
background: string;
|
|
154
|
+
border: string;
|
|
155
|
+
color: string;
|
|
156
|
+
};
|
|
157
|
+
warning: {
|
|
158
|
+
background: string;
|
|
159
|
+
border: string;
|
|
160
|
+
color: string;
|
|
161
|
+
};
|
|
162
|
+
error: {
|
|
163
|
+
background: string;
|
|
164
|
+
border: string;
|
|
165
|
+
color: string;
|
|
166
|
+
};
|
|
167
|
+
};
|
|
146
168
|
}
|
|
147
169
|
export interface MonolithUIContextType {
|
|
148
170
|
theme: MonolithDefaultTheme;
|
package/dist/Table/types.d.ts
CHANGED
|
@@ -12,7 +12,10 @@ export type StateStorage = {
|
|
|
12
12
|
};
|
|
13
13
|
export type RenderOptions = {
|
|
14
14
|
rowData: any;
|
|
15
|
-
onRowUpdated?: (
|
|
15
|
+
onRowUpdated?: (context: {
|
|
16
|
+
rowData: any;
|
|
17
|
+
updatedData: any;
|
|
18
|
+
}) => void;
|
|
16
19
|
};
|
|
17
20
|
export interface ColumnProps {
|
|
18
21
|
columnId?: string;
|
|
@@ -144,7 +147,10 @@ export type TableContextType = {
|
|
|
144
147
|
onColumnResize?: (e: OnColumnChangeProps) => void;
|
|
145
148
|
onColumnReorder?: (e: OnColumnChangeProps) => void;
|
|
146
149
|
onTableExport?: OnTableExportFn;
|
|
147
|
-
onRowUpdated
|
|
150
|
+
onRowUpdated?: (context: {
|
|
151
|
+
rowData: any;
|
|
152
|
+
updatedData: any;
|
|
153
|
+
}) => void;
|
|
148
154
|
handleColumnReorder: (dragColumn: ColumnState, dropColumn: ColumnState) => void;
|
|
149
155
|
handleColumnHeaderClick: (column: ColumnState) => void;
|
|
150
156
|
onColumnStateChange?: (e: ColumnState[]) => void;
|
|
@@ -196,7 +202,10 @@ export interface TableProviderProps {
|
|
|
196
202
|
column: ColumnState;
|
|
197
203
|
sort?: SortState | null;
|
|
198
204
|
}) => void;
|
|
199
|
-
onRowUpdated?: (
|
|
205
|
+
onRowUpdated?: (context: {
|
|
206
|
+
rowData: any;
|
|
207
|
+
updatedData: any;
|
|
208
|
+
}) => void;
|
|
200
209
|
}
|
|
201
210
|
export interface TableRowProps {
|
|
202
211
|
rowData: {
|
|
@@ -291,7 +300,10 @@ export interface TableProps {
|
|
|
291
300
|
tableMenuOptions?: TableMenuOptions;
|
|
292
301
|
focusedRowId?: string | number;
|
|
293
302
|
children?: React.ReactNode;
|
|
294
|
-
onRowUpdated?: (
|
|
303
|
+
onRowUpdated?: (context: {
|
|
304
|
+
rowData: any;
|
|
305
|
+
updatedData: any;
|
|
306
|
+
}) => void;
|
|
295
307
|
onSelectionChange?: onSelectionChangeFn;
|
|
296
308
|
onActionButtonClick?: (rowData: any) => void;
|
|
297
309
|
onColumnResize?: (e: OnColumnChangeProps) => void;
|
package/dist/index.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ export * from "./SelectBox";
|
|
|
10
10
|
export * from "./Button";
|
|
11
11
|
export * from "./DropDownMenu";
|
|
12
12
|
export * from "./Switch";
|
|
13
|
+
export * from "./Alert";
|
|
13
14
|
export { default as IconButton } from "./IconButton";
|
|
14
15
|
export { default as DateInput } from "./DateInput";
|
|
15
16
|
export { default as TextArea } from "./TextArea";
|
package/dist/index.js
CHANGED
|
@@ -5,6 +5,7 @@ export * from "./SelectBox";
|
|
|
5
5
|
export * from "./Button";
|
|
6
6
|
export * from "./DropDownMenu";
|
|
7
7
|
export * from "./Switch";
|
|
8
|
+
export * from "./Alert";
|
|
8
9
|
export { default as IconButton } from "./IconButton";
|
|
9
10
|
export { default as DateInput } from "./DateInput";
|
|
10
11
|
export { default as TextArea } from "./TextArea";
|
package/dist/theme/variants.js
CHANGED
|
@@ -184,6 +184,28 @@ const lightVariant = {
|
|
|
184
184
|
alternate: "#000",
|
|
185
185
|
},
|
|
186
186
|
},
|
|
187
|
+
alert: {
|
|
188
|
+
info: {
|
|
189
|
+
background: "#3f88de25",
|
|
190
|
+
border: "#3f88de50",
|
|
191
|
+
color: "#357fff",
|
|
192
|
+
},
|
|
193
|
+
success: {
|
|
194
|
+
background: "#4bef2a25",
|
|
195
|
+
border: "#4bef2a90",
|
|
196
|
+
color: "#2eb333",
|
|
197
|
+
},
|
|
198
|
+
warning: {
|
|
199
|
+
background: "#eaa82425",
|
|
200
|
+
border: "#eaa82450",
|
|
201
|
+
color: "#d18f0b",
|
|
202
|
+
},
|
|
203
|
+
error: {
|
|
204
|
+
background: "#ee1d1d25",
|
|
205
|
+
border: "#ee1d1d50",
|
|
206
|
+
color: "#e41a1a",
|
|
207
|
+
},
|
|
208
|
+
},
|
|
187
209
|
};
|
|
188
210
|
const darkVariant = merge(lightVariant, {
|
|
189
211
|
name: THEMES.DARK,
|
|
@@ -300,6 +322,28 @@ const darkVariant = merge(lightVariant, {
|
|
|
300
322
|
alternate: "rgba(255, 255, 255, 0.6)",
|
|
301
323
|
},
|
|
302
324
|
},
|
|
325
|
+
alert: {
|
|
326
|
+
info: {
|
|
327
|
+
background: "#3f88de25",
|
|
328
|
+
border: "#3f88de50",
|
|
329
|
+
color: "#75a8ff",
|
|
330
|
+
},
|
|
331
|
+
success: {
|
|
332
|
+
background: "#4bef2a25",
|
|
333
|
+
border: "#4bef2a50",
|
|
334
|
+
color: "#5fd964",
|
|
335
|
+
},
|
|
336
|
+
warning: {
|
|
337
|
+
background: "#eaa82425",
|
|
338
|
+
border: "#eaa82450",
|
|
339
|
+
color: "#da9c21",
|
|
340
|
+
},
|
|
341
|
+
error: {
|
|
342
|
+
background: "#ee1d1d25",
|
|
343
|
+
border: "#ee1d1d50",
|
|
344
|
+
color: "#e41a1a",
|
|
345
|
+
},
|
|
346
|
+
},
|
|
303
347
|
});
|
|
304
348
|
const variants = [lightVariant, darkVariant];
|
|
305
349
|
export default variants;
|