@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
@@ -1,194 +1,194 @@
1
- // (int) The current year
2
- export const THIS_YEAR = +new Date().getFullYear();
3
-
4
- // (int) The current month starting from 1 - 12
5
- // 1 => January, 12 => December
6
- export const THIS_MONTH = +new Date().getMonth() + 1;
7
- // Week days names and shortnames
8
-
9
- export const HOURS24 = [...new Array(24)].map((n, index) => {
10
- return {
11
- value: index,
12
- label: index < 10 ? `0${index}` : `${index}`,
13
- };
14
- // return index < 10 ? `0${index}` : `${index}`;
15
- });
16
-
17
- export const HOURS12 = [
18
- ...[...new Array(12)].map((n, index) => {
19
- return {
20
- value: index,
21
- label: index < 10 ? `0${index} AM` : `${index} AM`,
22
- };
23
- }),
24
- ...[...new Array(12)].map((n, index) => {
25
- return {
26
- value: index + 12,
27
- label: index < 10 ? `0${index} PM` : `${index} PM`,
28
- };
29
- }),
30
- ];
31
-
32
- export const MINUTES = new Array(60).fill(0).map((n, index) => {
33
- return index < 10 ? `0${index}` : index;
34
- });
35
-
36
- export const WEEK_DAYS = {
37
- Sunday: "Su",
38
- Monday: "Mo",
39
- Tuesday: "Tu",
40
- Wednesday: "We",
41
- Thursday: "Th",
42
- Friday: "Fr",
43
- Saturday: "Sa",
44
- };
45
-
46
- // Calendar months names and short names
47
- export const CALENDAR_MONTHS = {
48
- January: "Jan",
49
- February: "Feb",
50
- March: "Mar",
51
- April: "Apr",
52
- May: "May",
53
- June: "Jun",
54
- July: "Jul",
55
- August: "Aug",
56
- September: "Sep",
57
- October: "Oct",
58
- November: "Nov",
59
- December: "Dec",
60
- };
61
-
62
- // Weeks displayed on calendar
63
- export const CALENDAR_WEEKS = 6;
64
-
65
- // Pads a string value with leading zeroes(0) until length is reached
66
- // For example: zeroPad(5, 2) => "05"
67
- export const zeroPad = (value, length) => {
68
- return `${value}`.padStart(length, "0");
69
- };
70
-
71
- // (int) Number days in a month for a given year from 28 - 31
72
- export const getMonthDays = (month = THIS_MONTH, year = THIS_YEAR) => {
73
- const months30 = [4, 6, 9, 11];
74
- const leapYear = year % 4 === 0;
75
- return month === 2
76
- ? leapYear
77
- ? 29
78
- : 28
79
- : months30.includes(month)
80
- ? 30
81
- : 31;
82
- };
83
-
84
- // (int) First day of the month for a given year from 1 - 7
85
- // 1 => Sunday, 7 => Saturday
86
- export const getMonthFirstDay = (month = THIS_MONTH, year = THIS_YEAR) => {
87
- return +new Date(`${year}-${zeroPad(month, 2)}-01`).getDay() + 1;
88
- };
89
-
90
- // (bool) Checks if a value is a date - this is just a simple check
91
- export const isDate = (date) => {
92
- const isDate = Object.prototype.toString.call(date) === "[object Date]";
93
- const isValidDate = date && !Number.isNaN(date.valueOf());
94
-
95
- return isDate && isValidDate;
96
- };
97
-
98
- // (bool) Checks if two date values are of the same month and year
99
- export const isSameMonth = (date, basedate = new Date()) => {
100
- if (!(isDate(date) && isDate(basedate))) return false;
101
- const basedateMonth = +basedate.getMonth() + 1;
102
- const basedateYear = basedate.getFullYear();
103
- const dateMonth = +date.getMonth() + 1;
104
- const dateYear = date.getFullYear();
105
- return +basedateMonth === +dateMonth && +basedateYear === +dateYear;
106
- };
107
- // (bool) Checks if two date values are the same day
108
- export const isSameDay = (date, basedate = new Date()) => {
109
- if (!(isDate(date) && isDate(basedate))) return false;
110
- const basedateDate = basedate.getDate();
111
- const basedateMonth = +basedate.getMonth() + 1;
112
- const basedateYear = basedate.getFullYear();
113
- const dateDate = date.getDate();
114
- const dateMonth = +date.getMonth() + 1;
115
- const dateYear = date.getFullYear();
116
- return (
117
- +basedateDate === +dateDate &&
118
- +basedateMonth === +dateMonth &&
119
- +basedateYear === +dateYear
120
- );
121
- };
122
- // (string) Formats the given date as YYYY-MM-DD
123
- // Months and Days are zero padded
124
- export const getDateISO = (date = new Date()) => {
125
- if (!isDate(date)) return null;
126
- return [
127
- date.getFullYear(),
128
- zeroPad(+date.getMonth() + 1, 2),
129
- zeroPad(+date.getDate(), 2),
130
- ].join("-");
131
- };
132
- // ({month, year}) Gets the month and year before the given month and year
133
- // For example: getPreviousMonth(1, 2000) => {month: 12, year: 1999}
134
- // while: getPreviousMonth(12, 2000) => {month: 11, year: 2000}
135
- export const getPreviousMonth = (month, year) => {
136
- const prevMonth = month > 1 ? month - 1 : 12;
137
- const prevMonthYear = month > 1 ? year : year - 1;
138
- return { month: prevMonth, year: prevMonthYear };
139
- };
140
- // ({month, year}) Gets the month and year after the given month and year
141
- // For example: getNextMonth(1, 2000) => {month: 2, year: 2000}
142
- // while: getNextMonth(12, 2000) => {month: 1, year: 2001}
143
- export const getNextMonth = (month, year) => {
144
- const nextMonth = month < 12 ? month + 1 : 1;
145
- const nextMonthYear = month < 12 ? year : year + 1;
146
- return { month: nextMonth, year: nextMonthYear };
147
- };
148
-
149
- // Calendar builder for a month in the specified year
150
- // Returns an array of the calendar dates.
151
- // Each calendar date is represented as an array => [YYYY, MM, DD]
152
- const calendarBuilder = (month = THIS_MONTH, year = THIS_YEAR) => {
153
- // Get number of days in the month and the month's first day
154
-
155
- const monthDays = getMonthDays(month, year);
156
- const monthFirstDay = getMonthFirstDay(month, year);
157
- // Get number of days to be displayed from previous and next months
158
- // These ensure a total of 42 days (6 weeks) displayed on the calendar
159
-
160
- const daysFromPrevMonth = monthFirstDay - 1;
161
- const daysFromNextMonth =
162
- CALENDAR_WEEKS * 7 - (daysFromPrevMonth + monthDays);
163
- // Get the previous and next months and years
164
-
165
- const { month: prevMonth, year: prevMonthYear } = getPreviousMonth(
166
- month,
167
- year
168
- );
169
- const { month: nextMonth, year: nextMonthYear } = getNextMonth(month, year);
170
- // Get number of days in previous month
171
- const prevMonthDays = getMonthDays(prevMonth, prevMonthYear);
172
- // Builds dates to be displayed from previous month
173
-
174
- const prevMonthDates = [...new Array(daysFromPrevMonth)].map((n, index) => {
175
- const day = index + 1 + (prevMonthDays - daysFromPrevMonth);
176
- return [prevMonthYear, zeroPad(prevMonth, 2), zeroPad(day, 2)];
177
- });
178
- // Builds dates to be displayed from current month
179
-
180
- const thisMonthDates = [...new Array(monthDays)].map((n, index) => {
181
- const day = index + 1;
182
- return [year, zeroPad(month, 2), zeroPad(day, 2)];
183
- });
184
- // Builds dates to be displayed from next month
185
-
186
- const nextMonthDates = [...new Array(daysFromNextMonth)].map((n, index) => {
187
- const day = index + 1;
188
- return [nextMonthYear, zeroPad(nextMonth, 2), zeroPad(day, 2)];
189
- });
190
- // Combines all dates from previous, current and next months
191
- return [...prevMonthDates, ...thisMonthDates, ...nextMonthDates];
192
- };
193
-
194
- export default calendarBuilder;
1
+ // (int) The current year
2
+ export const THIS_YEAR = +new Date().getFullYear();
3
+
4
+ // (int) The current month starting from 1 - 12
5
+ // 1 => January, 12 => December
6
+ export const THIS_MONTH = +new Date().getMonth() + 1;
7
+ // Week days names and shortnames
8
+
9
+ export const HOURS24 = [...new Array(24)].map((n, index) => {
10
+ return {
11
+ value: index,
12
+ label: index < 10 ? `0${index}` : `${index}`,
13
+ };
14
+ // return index < 10 ? `0${index}` : `${index}`;
15
+ });
16
+
17
+ export const HOURS12 = [
18
+ ...[...new Array(12)].map((n, index) => {
19
+ return {
20
+ value: index,
21
+ label: index < 10 ? `0${index} AM` : `${index} AM`,
22
+ };
23
+ }),
24
+ ...[...new Array(12)].map((n, index) => {
25
+ return {
26
+ value: index + 12,
27
+ label: index < 10 ? `0${index} PM` : `${index} PM`,
28
+ };
29
+ }),
30
+ ];
31
+
32
+ export const MINUTES = new Array(60).fill(0).map((n, index) => {
33
+ return index < 10 ? `0${index}` : index;
34
+ });
35
+
36
+ export const WEEK_DAYS = {
37
+ Sunday: "Su",
38
+ Monday: "Mo",
39
+ Tuesday: "Tu",
40
+ Wednesday: "We",
41
+ Thursday: "Th",
42
+ Friday: "Fr",
43
+ Saturday: "Sa",
44
+ };
45
+
46
+ // Calendar months names and short names
47
+ export const CALENDAR_MONTHS = {
48
+ January: "Jan",
49
+ February: "Feb",
50
+ March: "Mar",
51
+ April: "Apr",
52
+ May: "May",
53
+ June: "Jun",
54
+ July: "Jul",
55
+ August: "Aug",
56
+ September: "Sep",
57
+ October: "Oct",
58
+ November: "Nov",
59
+ December: "Dec",
60
+ };
61
+
62
+ // Weeks displayed on calendar
63
+ export const CALENDAR_WEEKS = 6;
64
+
65
+ // Pads a string value with leading zeroes(0) until length is reached
66
+ // For example: zeroPad(5, 2) => "05"
67
+ export const zeroPad = (value, length) => {
68
+ return `${value}`.padStart(length, "0");
69
+ };
70
+
71
+ // (int) Number days in a month for a given year from 28 - 31
72
+ export const getMonthDays = (month = THIS_MONTH, year = THIS_YEAR) => {
73
+ const months30 = [4, 6, 9, 11];
74
+ const leapYear = year % 4 === 0;
75
+ return month === 2
76
+ ? leapYear
77
+ ? 29
78
+ : 28
79
+ : months30.includes(month)
80
+ ? 30
81
+ : 31;
82
+ };
83
+
84
+ // (int) First day of the month for a given year from 1 - 7
85
+ // 1 => Sunday, 7 => Saturday
86
+ export const getMonthFirstDay = (month = THIS_MONTH, year = THIS_YEAR) => {
87
+ return +new Date(`${year}-${zeroPad(month, 2)}-01`).getDay() + 1;
88
+ };
89
+
90
+ // (bool) Checks if a value is a date - this is just a simple check
91
+ export const isDate = (date) => {
92
+ const isDate = Object.prototype.toString.call(date) === "[object Date]";
93
+ const isValidDate = date && !Number.isNaN(date.valueOf());
94
+
95
+ return isDate && isValidDate;
96
+ };
97
+
98
+ // (bool) Checks if two date values are of the same month and year
99
+ export const isSameMonth = (date, basedate = new Date()) => {
100
+ if (!(isDate(date) && isDate(basedate))) return false;
101
+ const basedateMonth = +basedate.getMonth() + 1;
102
+ const basedateYear = basedate.getFullYear();
103
+ const dateMonth = +date.getMonth() + 1;
104
+ const dateYear = date.getFullYear();
105
+ return +basedateMonth === +dateMonth && +basedateYear === +dateYear;
106
+ };
107
+ // (bool) Checks if two date values are the same day
108
+ export const isSameDay = (date, basedate = new Date()) => {
109
+ if (!(isDate(date) && isDate(basedate))) return false;
110
+ const basedateDate = basedate.getDate();
111
+ const basedateMonth = +basedate.getMonth() + 1;
112
+ const basedateYear = basedate.getFullYear();
113
+ const dateDate = date.getDate();
114
+ const dateMonth = +date.getMonth() + 1;
115
+ const dateYear = date.getFullYear();
116
+ return (
117
+ +basedateDate === +dateDate &&
118
+ +basedateMonth === +dateMonth &&
119
+ +basedateYear === +dateYear
120
+ );
121
+ };
122
+ // (string) Formats the given date as YYYY-MM-DD
123
+ // Months and Days are zero padded
124
+ export const getDateISO = (date = new Date()) => {
125
+ if (!isDate(date)) return null;
126
+ return [
127
+ date.getFullYear(),
128
+ zeroPad(+date.getMonth() + 1, 2),
129
+ zeroPad(+date.getDate(), 2),
130
+ ].join("-");
131
+ };
132
+ // ({month, year}) Gets the month and year before the given month and year
133
+ // For example: getPreviousMonth(1, 2000) => {month: 12, year: 1999}
134
+ // while: getPreviousMonth(12, 2000) => {month: 11, year: 2000}
135
+ export const getPreviousMonth = (month, year) => {
136
+ const prevMonth = month > 1 ? month - 1 : 12;
137
+ const prevMonthYear = month > 1 ? year : year - 1;
138
+ return { month: prevMonth, year: prevMonthYear };
139
+ };
140
+ // ({month, year}) Gets the month and year after the given month and year
141
+ // For example: getNextMonth(1, 2000) => {month: 2, year: 2000}
142
+ // while: getNextMonth(12, 2000) => {month: 1, year: 2001}
143
+ export const getNextMonth = (month, year) => {
144
+ const nextMonth = month < 12 ? month + 1 : 1;
145
+ const nextMonthYear = month < 12 ? year : year + 1;
146
+ return { month: nextMonth, year: nextMonthYear };
147
+ };
148
+
149
+ // Calendar builder for a month in the specified year
150
+ // Returns an array of the calendar dates.
151
+ // Each calendar date is represented as an array => [YYYY, MM, DD]
152
+ const calendarBuilder = (month = THIS_MONTH, year = THIS_YEAR) => {
153
+ // Get number of days in the month and the month's first day
154
+
155
+ const monthDays = getMonthDays(month, year);
156
+ const monthFirstDay = getMonthFirstDay(month, year);
157
+ // Get number of days to be displayed from previous and next months
158
+ // These ensure a total of 42 days (6 weeks) displayed on the calendar
159
+
160
+ const daysFromPrevMonth = monthFirstDay - 1;
161
+ const daysFromNextMonth =
162
+ CALENDAR_WEEKS * 7 - (daysFromPrevMonth + monthDays);
163
+ // Get the previous and next months and years
164
+
165
+ const { month: prevMonth, year: prevMonthYear } = getPreviousMonth(
166
+ month,
167
+ year
168
+ );
169
+ const { month: nextMonth, year: nextMonthYear } = getNextMonth(month, year);
170
+ // Get number of days in previous month
171
+ const prevMonthDays = getMonthDays(prevMonth, prevMonthYear);
172
+ // Builds dates to be displayed from previous month
173
+
174
+ const prevMonthDates = [...new Array(daysFromPrevMonth)].map((n, index) => {
175
+ const day = index + 1 + (prevMonthDays - daysFromPrevMonth);
176
+ return [prevMonthYear, zeroPad(prevMonth, 2), zeroPad(day, 2)];
177
+ });
178
+ // Builds dates to be displayed from current month
179
+
180
+ const thisMonthDates = [...new Array(monthDays)].map((n, index) => {
181
+ const day = index + 1;
182
+ return [year, zeroPad(month, 2), zeroPad(day, 2)];
183
+ });
184
+ // Builds dates to be displayed from next month
185
+
186
+ const nextMonthDates = [...new Array(daysFromNextMonth)].map((n, index) => {
187
+ const day = index + 1;
188
+ return [nextMonthYear, zeroPad(nextMonth, 2), zeroPad(day, 2)];
189
+ });
190
+ // Combines all dates from previous, current and next months
191
+ return [...prevMonthDates, ...thisMonthDates, ...nextMonthDates];
192
+ };
193
+
194
+ export default calendarBuilder;