@monolith-forensics/monolith-ui 1.0.7 → 1.0.8

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 (40) hide show
  1. package/Button/Button.js +234 -0
  2. package/{src/Calendar → Calendar}/Calendar.js +365 -329
  3. package/{src/Calendar → Calendar}/CalendarStyles.js +190 -168
  4. package/{src/Calendar → Calendar}/calendarHelpers.js +194 -194
  5. package/DateInput/DateInput.js +583 -0
  6. package/FieldLabel/FieldLabel.js +134 -0
  7. package/FileInputField/FileInputField.js +171 -0
  8. package/Pill/Pill.js +137 -0
  9. package/SelectBox/SelectBox.js +579 -0
  10. package/TagBox/TagBox.js +563 -0
  11. package/{src/TagBox/TagBox.js → TagBox/TagBoxOLD.js} +75 -75
  12. package/{src/TagBox → TagBox}/TagBoxStyles.js +122 -122
  13. package/TextAreaInput/TextAreaInput.js +35 -0
  14. package/TextInput/TextInput.js +37 -0
  15. package/core/index.js +16 -0
  16. package/package.json +15 -12
  17. package/primitives/Input.js +127 -0
  18. package/primitives/TextArea.js +65 -0
  19. package/theme/breakpoints.js +11 -0
  20. package/theme/components.js +140 -0
  21. package/theme/index.js +77 -0
  22. package/theme/shadows.js +33 -0
  23. package/theme/typography.js +58 -0
  24. package/theme/variants.js +235 -0
  25. package/.gitattributes +0 -2
  26. package/index.js +0 -8
  27. package/src/CheckBox.js +0 -49
  28. package/src/DataGrid/DataGrid.js +0 -729
  29. package/src/DateBox.js +0 -77
  30. package/src/Form.js +0 -116
  31. package/src/Input.js +0 -160
  32. package/src/Menu.js +0 -196
  33. package/src/NumberBox.js +0 -121
  34. package/src/OptionButton.js +0 -89
  35. package/src/SelectBox.js +0 -252
  36. package/src/TextArea.js +0 -85
  37. package/src/TextAreaBox.js +0 -43
  38. package/src/TextBox.js +0 -10
  39. package/src/TimeBox.js +0 -0
  40. package/src/Timeline.js +0 -153
package/Button/Button.js ADDED
@@ -0,0 +1,234 @@
1
+ import { forwardRef } from "react";
2
+ import styled from "styled-components";
3
+
4
+ const colors = {
5
+ gray: "#dee2e6",
6
+ red: "#e03131",
7
+ pink: "#c2255c",
8
+ grape: "#9c36b5",
9
+ violet: "#6741d9",
10
+ indigo: "#3b5bdb",
11
+ cyan: "#0c8599",
12
+ teal: "#099268",
13
+ green: "#2f9e44",
14
+ lime: "#66a80f",
15
+ yellow: "#f08c00",
16
+ orange: "#e8590c",
17
+ };
18
+
19
+ const StyledButton = styled.button`
20
+ width: ${({ fullWidth }) => (fullWidth ? "100%" : "auto")};
21
+ height: ${({ theme, size }) => {
22
+ switch (size) {
23
+ case "xxs":
24
+ return `24px`;
25
+ case "xs":
26
+ return `28px`;
27
+ case "sm":
28
+ return `34px`;
29
+ case "md":
30
+ return `40px`;
31
+ case "lg":
32
+ return `48px`;
33
+ case "xl":
34
+ return `58px`;
35
+ default:
36
+ return `34px`;
37
+ }
38
+ }};
39
+
40
+ font-weight: 525;
41
+ letter-spacing: 0.75px;
42
+ font-size: ${({ theme, size }) => {
43
+ switch (size) {
44
+ case "xxs":
45
+ return `11px`;
46
+ case "xs":
47
+ return `12px`;
48
+ case "sm":
49
+ return `14px`;
50
+ case "md":
51
+ return `16px`;
52
+ case "lg":
53
+ return `18px`;
54
+ case "xl":
55
+ return `20px`;
56
+ default:
57
+ return `14px`;
58
+ }
59
+ }};
60
+
61
+ padding: ${({ theme, size }) => {
62
+ switch (size) {
63
+ case "xxs":
64
+ return `0px 8px`;
65
+ case "xs":
66
+ return `0px 12px`;
67
+ case "sm":
68
+ return `0px 16px`;
69
+ case "md":
70
+ return `0px 20px`;
71
+ case "lg":
72
+ return `0px 24px`;
73
+ case "xl":
74
+ return `0px 30px`;
75
+ default:
76
+ return `0px 16px`;
77
+ }
78
+ }};
79
+
80
+ color: ${({ theme, variant, color }) => {
81
+ if (variant === "default") return theme.palette.text.primary;
82
+ if (variant === "contained") return "white";
83
+ if (variant === "filled") return "white";
84
+
85
+ switch (color) {
86
+ case "primary":
87
+ return theme.palette.primary.main;
88
+ case !color:
89
+ return theme.palette.text.primary;
90
+ default:
91
+ return (
92
+ theme?.palette?.[color]?.main ||
93
+ colors?.[color] ||
94
+ theme.palette.text.primary
95
+ );
96
+ }
97
+ }};
98
+
99
+ background-color: ${({ theme, variant, color }) => {
100
+ if (variant === "default") return "transparent";
101
+ switch (variant) {
102
+ case "contained":
103
+ return (
104
+ theme?.palette?.[color]?.main ||
105
+ colors?.[color] ||
106
+ theme.palette.background.secondary
107
+ );
108
+ case "filled":
109
+ return (
110
+ theme?.palette?.[color]?.main ||
111
+ colors?.[color] ||
112
+ theme.palette.background.secondary
113
+ );
114
+ case "light":
115
+ return (
116
+ (theme?.palette?.[color]?.main ||
117
+ colors?.[color] ||
118
+ theme.palette.background.secondary) + "30"
119
+ );
120
+ case "outlined":
121
+ return "transparent";
122
+ case "text":
123
+ return "transparent";
124
+ default:
125
+ return "transparent";
126
+ }
127
+ }};
128
+
129
+ border-radius: 4px;
130
+ border: 1px solid
131
+ ${({ theme, variant, color }) => {
132
+ switch (variant) {
133
+ case "contained":
134
+ return "transparent";
135
+ case "filled":
136
+ return "transparent";
137
+ case "light":
138
+ return "transparent";
139
+ case "outlined":
140
+ return (
141
+ theme?.palette?.[color]?.main ||
142
+ colors?.[color] ||
143
+ theme.palette.divider
144
+ );
145
+ case "text":
146
+ return "transparent";
147
+ case "subtle":
148
+ return "transparent";
149
+ default:
150
+ return (
151
+ theme?.palette?.[color]?.main ||
152
+ colors?.[color] ||
153
+ theme.palette.divider
154
+ );
155
+ }
156
+ }};
157
+
158
+ cursor: pointer;
159
+
160
+ transition: background-color 0.2s, border 0.2s;
161
+
162
+ &:hover {
163
+ background-color: ${({ theme, variant, color }) => {
164
+ if (variant === "default") return "transparent";
165
+ switch (variant) {
166
+ case "contained":
167
+ return (
168
+ (theme?.palette?.[color]?.main ||
169
+ colors?.[color] ||
170
+ theme.palette.background.secondary) + "90"
171
+ );
172
+ case "filled":
173
+ return (
174
+ (theme?.palette?.[color]?.main ||
175
+ colors?.[color] ||
176
+ theme.palette.background.secondary) + "90"
177
+ );
178
+ case "light":
179
+ return (
180
+ (theme?.palette?.[color]?.main ||
181
+ colors?.[color] ||
182
+ theme.palette.background.secondary) + "70"
183
+ );
184
+ case "outlined":
185
+ return theme.palette.action.hover;
186
+ case "text":
187
+ return "transparent";
188
+ case "subtle":
189
+ return theme?.palette?.[color]?.main || colors?.[color]
190
+ ? (theme?.palette?.[color]?.main || colors?.[color]) + "30"
191
+ : theme.palette.action.hover;
192
+ default:
193
+ return theme.palette.action.hover;
194
+ }
195
+ }};
196
+
197
+ border: 1px solid
198
+ ${({ theme, variant, color }) => {
199
+ switch (variant) {
200
+ case "contained":
201
+ return "transparent";
202
+ case "filled":
203
+ return "transparent";
204
+ case "light":
205
+ return "transparent";
206
+ case "outlined":
207
+ return colors?.[color] || theme.palette.divider;
208
+ case "text":
209
+ return "transparent";
210
+ case "subtle":
211
+ return "transparent";
212
+ default:
213
+ return (
214
+ theme?.palette?.[color]?.main ||
215
+ colors?.[color] ||
216
+ theme.palette.divider
217
+ );
218
+ }
219
+ }};
220
+ }
221
+ `;
222
+
223
+ const Button = forwardRef((props, ref) => {
224
+ const { children, ...other } = props;
225
+ return (
226
+ <StyledButton ref={ref} {...other}>
227
+ <span style={{ height: "100%" }}>
228
+ <span style={{ height: "100%" }}>{children}</span>
229
+ </span>
230
+ </StyledButton>
231
+ );
232
+ });
233
+
234
+ export default Button;