@addev-be/ui 1.0.1 → 1.0.2

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 (249) hide show
  1. package/assets/icons/arrow-down-1-9.svg +1 -1
  2. package/assets/icons/arrow-down-a-z.svg +1 -1
  3. package/assets/icons/arrow-up-z-a.svg +1 -1
  4. package/assets/icons/check.svg +1 -1
  5. package/assets/icons/circle-check.svg +1 -1
  6. package/assets/icons/down.svg +1 -1
  7. package/assets/icons/filter-full.svg +1 -1
  8. package/assets/icons/filter.svg +1 -1
  9. package/assets/icons/hashtag.svg +1 -1
  10. package/assets/icons/image-slash.svg +1 -1
  11. package/assets/icons/left.svg +1 -1
  12. package/assets/icons/magnifier.svg +1 -1
  13. package/assets/icons/phone.svg +1 -1
  14. package/assets/icons/right.svg +1 -1
  15. package/assets/icons/sort-calendar-ascending.svg +5 -5
  16. package/assets/icons/spinner-third.svg +1 -1
  17. package/assets/icons/table-columns.svg +1 -1
  18. package/assets/icons/table-footer-slash.svg +4 -4
  19. package/assets/icons/table-footer.svg +3 -3
  20. package/assets/icons/up.svg +1 -1
  21. package/assets/icons/user-tie.svg +1 -1
  22. package/assets/icons/x-bar.svg +3 -3
  23. package/dist/components/data/AdvancedRequestDataGrid/helpers/advancedRequests.js +9 -8
  24. package/dist/components/data/AdvancedRequestDataGrid/helpers/columns.js +21 -72
  25. package/dist/components/data/AdvancedRequestDataGrid/index.js +2 -2
  26. package/dist/components/data/AdvancedRequestDataGrid/types.d.ts +1 -1
  27. package/dist/components/data/DataGrid/AdvancedRequestDataGrid.d.ts +10 -0
  28. package/dist/components/data/DataGrid/AdvancedRequestDataGrid.js +173 -0
  29. package/dist/components/data/DataGrid/FilterValuesScroller.d.ts +13 -0
  30. package/dist/components/data/DataGrid/FilterValuesScroller.js +73 -0
  31. package/dist/components/data/DataGrid/VirtualScroller.d.ts +11 -0
  32. package/dist/components/data/DataGrid/VirtualScroller.js +41 -0
  33. package/dist/components/data/DataGrid/helpers/advancedRequests.d.ts +12 -0
  34. package/dist/components/data/DataGrid/helpers/advancedRequests.js +53 -0
  35. package/dist/components/data/DataGrid/helpers.d.ts +28 -0
  36. package/dist/components/data/DataGrid/helpers.js +436 -0
  37. package/dist/components/data/DataGrid/types.d.ts +1 -1
  38. package/dist/components/data/DataGrid/types.js +29 -6
  39. package/dist/components/data/SmartQueryDataGrid/helpers/columns.d.ts +20 -0
  40. package/dist/components/data/SmartQueryDataGrid/helpers/columns.js +160 -0
  41. package/dist/components/data/SmartQueryDataGrid/helpers/hooks.d.ts +5 -0
  42. package/dist/components/data/SmartQueryDataGrid/helpers/hooks.js +41 -0
  43. package/dist/components/data/SmartQueryDataGrid/helpers/index.d.ts +2 -0
  44. package/dist/components/data/SmartQueryDataGrid/helpers/index.js +18 -0
  45. package/dist/components/data/SmartQueryDataGrid/helpers/smartQueries.d.ts +3 -0
  46. package/dist/components/data/SmartQueryDataGrid/helpers/smartQueries.js +15 -0
  47. package/dist/components/data/SmartQueryDataGrid/hooks.d.ts +9 -0
  48. package/dist/components/data/SmartQueryDataGrid/hooks.js +63 -0
  49. package/dist/components/data/SmartQueryDataGrid/index.d.ts +12 -0
  50. package/dist/components/data/SmartQueryDataGrid/index.js +242 -0
  51. package/dist/components/data/SmartQueryDataGrid/types.d.ts +22 -0
  52. package/dist/components/data/SmartQueryDataGrid/types.js +2 -0
  53. package/dist/components/forms/Form/InputWithLabel.d.ts +2 -0
  54. package/dist/components/forms/Form/InputWithLabel.js +10 -0
  55. package/dist/components/forms/Form/types.d.ts +7 -0
  56. package/dist/components/forms/Form/types.js +2 -0
  57. package/dist/config/types.d.ts +11 -0
  58. package/dist/config/types.js +2 -0
  59. package/dist/helpers/types.d.ts +1 -1
  60. package/dist/services/requests/generic.d.ts +1 -1
  61. package/dist/services/requests/userPermissions.d.ts +4 -0
  62. package/dist/services/requests/userPermissions.js +20 -0
  63. package/dist/services/types/auth.d.ts +1 -1
  64. package/dist/services/types/auth.js +50 -27
  65. package/dist/services/types/base.d.ts +1 -1
  66. package/dist/services/types/base.js +26 -3
  67. package/dist/services/types/generic.d.ts +1 -1
  68. package/dist/services/types/generic.js +44 -21
  69. package/dist/services/types/tracking.d.ts +1 -1
  70. package/dist/services/types/tracking.js +29 -6
  71. package/dist/services/types/userProfiles.d.ts +1 -1
  72. package/dist/services/types/userProfiles.js +41 -18
  73. package/dist/services/types/users.d.ts +1 -1
  74. package/dist/services/types/users.js +47 -24
  75. package/eslint.config.js +3 -3
  76. package/package.json +2 -2
  77. package/src/Icons.tsx +138 -138
  78. package/src/components/auth/LoginForm.tsx +84 -84
  79. package/src/components/auth/LoginPage.tsx +32 -32
  80. package/src/components/auth/PasswordRecoveryForm.tsx +52 -52
  81. package/src/components/auth/PasswordResetForm.tsx +112 -112
  82. package/src/components/auth/index.ts +4 -4
  83. package/src/components/auth/styles.ts +14 -14
  84. package/src/components/data/DataGrid/DataGridCell.tsx +81 -81
  85. package/src/components/data/DataGrid/DataGridColumnsModal/helpers.ts +9 -9
  86. package/src/components/data/DataGrid/DataGridColumnsModal/hooks.tsx +59 -59
  87. package/src/components/data/DataGrid/DataGridColumnsModal/index.tsx +182 -182
  88. package/src/components/data/DataGrid/DataGridColumnsModal/styles.ts +104 -104
  89. package/src/components/data/DataGrid/DataGridEditableCell/CheckboxEditableCell.tsx +38 -38
  90. package/src/components/data/DataGrid/DataGridEditableCell/DateEditableCell.tsx +39 -39
  91. package/src/components/data/DataGrid/DataGridEditableCell/NumberEditableCell.tsx +75 -75
  92. package/src/components/data/DataGrid/DataGridEditableCell/TextEditableCell.tsx +38 -38
  93. package/src/components/data/DataGrid/DataGridEditableCell/index.tsx +106 -106
  94. package/src/components/data/DataGrid/DataGridEditableCell/styles.ts +35 -35
  95. package/src/components/data/DataGrid/DataGridEditableCell/types.ts +19 -19
  96. package/src/components/data/DataGrid/DataGridFilterMenu/FilterValuesScroller.tsx +129 -129
  97. package/src/components/data/DataGrid/DataGridFilterMenu/hooks.tsx +81 -81
  98. package/src/components/data/DataGrid/DataGridFilterMenu/index.tsx +370 -370
  99. package/src/components/data/DataGrid/DataGridFilterMenu/styles.ts +97 -97
  100. package/src/components/data/DataGrid/DataGridFooter.tsx +45 -45
  101. package/src/components/data/DataGrid/DataGridHeader.tsx +74 -74
  102. package/src/components/data/DataGrid/DataGridHeaderCell.tsx +112 -112
  103. package/src/components/data/DataGrid/DataGridRowTemplate.tsx +83 -83
  104. package/src/components/data/DataGrid/DataGridToolbar.tsx +134 -134
  105. package/src/components/data/DataGrid/FilterModalContent/index.tsx +135 -135
  106. package/src/components/data/DataGrid/FilterModalContent/styles.ts +22 -22
  107. package/src/components/data/DataGrid/constants.ts +6 -6
  108. package/src/components/data/DataGrid/helpers/columns.tsx +394 -394
  109. package/src/components/data/DataGrid/helpers/filters.ts +287 -287
  110. package/src/components/data/DataGrid/helpers/index.ts +2 -2
  111. package/src/components/data/DataGrid/hooks/index.ts +29 -29
  112. package/src/components/data/DataGrid/hooks/useDataGrid.tsx +380 -380
  113. package/src/components/data/DataGrid/hooks/useDataGridChangedRows.ts +97 -97
  114. package/src/components/data/DataGrid/hooks/useDataGridCopy.ts +174 -174
  115. package/src/components/data/DataGrid/hooks/useDataGridSettings.ts +48 -48
  116. package/src/components/data/DataGrid/hooks/useRefreshModal.tsx +48 -48
  117. package/src/components/data/DataGrid/index.tsx +122 -122
  118. package/src/components/data/DataGrid/styles.ts +430 -430
  119. package/src/components/data/DataGrid/types.ts +372 -372
  120. package/src/components/data/SqlRequestDataGrid/SqlRequestForeignListEditableCell.tsx +16 -16
  121. package/src/components/data/SqlRequestDataGrid/helpers/columns.tsx +479 -479
  122. package/src/components/data/SqlRequestDataGrid/helpers/index.ts +2 -2
  123. package/src/components/data/SqlRequestDataGrid/helpers/sqlRequests.ts +16 -16
  124. package/src/components/data/SqlRequestDataGrid/index.tsx +420 -420
  125. package/src/components/data/SqlRequestDataGrid/styles.ts +15 -15
  126. package/src/components/data/SqlRequestDataGrid/types.ts +74 -74
  127. package/src/components/data/SqlRequestForeignList/index.tsx +257 -257
  128. package/src/components/data/SqlRequestForeignList/styles.ts +43 -43
  129. package/src/components/data/SqlRequestForeignList/types.ts +32 -32
  130. package/src/components/data/SqlRequestGrid/filters/FiltersSidebar.tsx +108 -108
  131. package/src/components/data/SqlRequestGrid/filters/styles.ts +88 -88
  132. package/src/components/data/SqlRequestGrid/helpers/index.ts +1 -1
  133. package/src/components/data/SqlRequestGrid/helpers/sqlRequests.ts +16 -16
  134. package/src/components/data/SqlRequestGrid/index.tsx +315 -315
  135. package/src/components/data/SqlRequestGrid/styles.ts +20 -20
  136. package/src/components/data/SqlRequestGrid/types.ts +73 -73
  137. package/src/components/data/VirtualScroller/hooks.ts +71 -71
  138. package/src/components/data/VirtualScroller/index.tsx +89 -89
  139. package/src/components/data/VirtualScroller/styles.ts +57 -57
  140. package/src/components/data/VirtualScroller/types.ts +10 -10
  141. package/src/components/data/index.ts +16 -16
  142. package/src/components/forms/AutoTextArea.tsx +48 -48
  143. package/src/components/forms/Button.tsx +132 -132
  144. package/src/components/forms/Form/Checkbox.tsx +12 -12
  145. package/src/components/forms/Form/FormGroup.tsx +31 -31
  146. package/src/components/forms/Form/Input.tsx +16 -16
  147. package/src/components/forms/Form/Row.tsx +32 -32
  148. package/src/components/forms/Form/Select.tsx +87 -87
  149. package/src/components/forms/Form/TextArea.tsx +17 -17
  150. package/src/components/forms/Form/index.tsx +45 -45
  151. package/src/components/forms/Form/styles.ts +184 -184
  152. package/src/components/forms/IconButton.tsx +67 -67
  153. package/src/components/forms/IndeterminateCheckbox.tsx +46 -46
  154. package/src/components/forms/NumberInput.tsx +53 -53
  155. package/src/components/forms/Select.tsx +34 -34
  156. package/src/components/forms/VerticalLabel.tsx +20 -20
  157. package/src/components/forms/index.ts +9 -9
  158. package/src/components/forms/styles.ts +42 -42
  159. package/src/components/index.ts +6 -6
  160. package/src/components/layout/Columns.ts +27 -27
  161. package/src/components/layout/Dropdown/index.tsx +113 -113
  162. package/src/components/layout/Dropdown/styles.ts +45 -45
  163. package/src/components/layout/Flexbox.ts +21 -21
  164. package/src/components/layout/Grid/index.tsx +8 -8
  165. package/src/components/layout/Grid/styles.ts +34 -34
  166. package/src/components/layout/Loading/index.tsx +29 -29
  167. package/src/components/layout/Loading/styles.ts +29 -29
  168. package/src/components/layout/Masonry/index.tsx +29 -29
  169. package/src/components/layout/Masonry/styles.ts +20 -20
  170. package/src/components/layout/Modal/index.tsx +51 -51
  171. package/src/components/layout/Modal/styles.ts +125 -125
  172. package/src/components/layout/index.ts +7 -7
  173. package/src/components/search/HighlightedText.tsx +41 -41
  174. package/src/components/search/QuickSearchBar.tsx +99 -99
  175. package/src/components/search/QuickSearchResults.tsx +86 -86
  176. package/src/components/search/index.ts +9 -9
  177. package/src/components/search/styles.ts +96 -96
  178. package/src/components/search/types.ts +29 -29
  179. package/src/components/ui/Avatar/index.tsx +54 -54
  180. package/src/components/ui/Card/index.tsx +14 -14
  181. package/src/components/ui/Card/styles.ts +37 -37
  182. package/src/components/ui/ContextMenu/index.tsx +79 -79
  183. package/src/components/ui/ContextMenu/styles.ts +119 -119
  184. package/src/components/ui/Ellipsis.tsx +34 -34
  185. package/src/components/ui/Label.tsx +99 -99
  186. package/src/components/ui/Message/index.tsx +57 -57
  187. package/src/components/ui/Message/styles.ts +40 -40
  188. package/src/components/ui/TabsView/TabsView.tsx +38 -38
  189. package/src/components/ui/TabsView/styles.ts +73 -73
  190. package/src/components/ui/TabsView/types.ts +12 -12
  191. package/src/components/ui/index.ts +7 -7
  192. package/src/config/index.ts +14 -14
  193. package/src/helpers/dates.ts +17 -17
  194. package/src/helpers/getScrollbarSize.ts +14 -14
  195. package/src/helpers/index.ts +6 -6
  196. package/src/helpers/numbers.ts +63 -63
  197. package/src/helpers/responsive.ts +83 -83
  198. package/src/helpers/text.ts +13 -13
  199. package/src/helpers/types.ts +1 -1
  200. package/src/hooks/index.ts +7 -7
  201. package/src/hooks/useContainerMediaQuery.ts +7 -7
  202. package/src/hooks/useElementSize.ts +24 -24
  203. package/src/hooks/useMediaQuery.ts +9 -9
  204. package/src/hooks/useMediaQueryForWidth.ts +35 -35
  205. package/src/hooks/useMutableState.ts +17 -17
  206. package/src/hooks/useShowArchived.ts +28 -28
  207. package/src/hooks/useWindowSize.ts +20 -20
  208. package/src/index.ts +9 -9
  209. package/src/providers/AuthenticationProvider/helpers.ts +3 -3
  210. package/src/providers/AuthenticationProvider/index.tsx +303 -303
  211. package/src/providers/LoadingProvider/index.tsx +47 -47
  212. package/src/providers/PortalsProvider/index.tsx +54 -54
  213. package/src/providers/PortalsProvider/styles.ts +31 -31
  214. package/src/providers/SettingsProvider/index.tsx +70 -70
  215. package/src/providers/ThemeProvider/ThemeProvider.ts +66 -66
  216. package/src/providers/ThemeProvider/defaultTheme.ts +470 -470
  217. package/src/providers/ThemeProvider/helpers.ts +84 -84
  218. package/src/providers/ThemeProvider/index.ts +5 -5
  219. package/src/providers/ThemeProvider/types.ts +134 -134
  220. package/src/providers/TrackingProvider/index.tsx +71 -71
  221. package/src/providers/UiProviders/index.tsx +76 -76
  222. package/src/providers/UiProviders/styles.ts +10 -10
  223. package/src/providers/hooks.ts +12 -12
  224. package/src/providers/index.ts +8 -8
  225. package/src/services/HttpService.ts +92 -92
  226. package/src/services/WebSocketService.ts +155 -155
  227. package/src/services/advancedRequests.ts +102 -102
  228. package/src/services/base.ts +23 -23
  229. package/src/services/globalSearch.ts +32 -32
  230. package/src/services/hooks.ts +92 -92
  231. package/src/services/index.ts +21 -21
  232. package/src/services/requests/auth.ts +44 -44
  233. package/src/services/requests/generic.ts +62 -62
  234. package/src/services/requests/tracking.ts +12 -12
  235. package/src/services/requests/userProfiles.ts +35 -35
  236. package/src/services/requests/users.ts +28 -28
  237. package/src/services/smartQueries.ts +122 -122
  238. package/src/services/sqlRequests.ts +111 -111
  239. package/src/services/types/auth.ts +98 -98
  240. package/src/services/types/base.ts +10 -10
  241. package/src/services/types/generic.ts +82 -82
  242. package/src/services/types/tracking.ts +29 -29
  243. package/src/services/types/userProfiles.ts +79 -79
  244. package/src/services/types/users.ts +74 -74
  245. package/src/services/updateSqlRequests.ts +32 -32
  246. package/src/styles/animations.scss +30 -30
  247. package/src/styles/index.scss +42 -42
  248. package/src/typings.d.ts +17 -17
  249. package/tsconfig.json +18 -18
@@ -1,63 +1,63 @@
1
- export const formatMoney = (number: number, decimals = 2, currency = 'EUR') =>
2
- new Intl.NumberFormat(navigator.language, {
3
- style: 'currency',
4
- currency,
5
- minimumFractionDigits: decimals,
6
- maximumFractionDigits: decimals,
7
- currencyDisplay: 'narrowSymbol',
8
- }).format(number);
9
-
10
- export const formatPercentage = (number: number, decimals = 2) =>
11
- new Intl.NumberFormat(navigator.language, {
12
- style: 'percent',
13
- minimumFractionDigits: decimals,
14
- maximumFractionDigits: decimals,
15
- }).format(number);
16
-
17
- export const formatNumber = (number: number, decimals = 2) =>
18
- new Intl.NumberFormat(navigator.language, {
19
- minimumFractionDigits: decimals,
20
- maximumFractionDigits: decimals,
21
- }).format(number);
22
-
23
- export const formatNumberInvariant = (number: number, decimals = 2) =>
24
- new Intl.NumberFormat('es-US', {
25
- minimumFractionDigits: decimals,
26
- maximumFractionDigits: decimals,
27
- }).format(number);
28
-
29
- const getDecimalSeparator = () => {
30
- const numberWithDecimal = 1.1; // A number with a decimal point
31
- const formattedNumber = new Intl.NumberFormat().format(numberWithDecimal);
32
- return formattedNumber.replace(/\d/g, ''); // Remove all digits to isolate the separator
33
- };
34
-
35
- export const decimalSeparator = getDecimalSeparator();
36
-
37
- export const parseNumber = (value: string) => {
38
- const number = value
39
- .replace(new RegExp(`[^\\d${decimalSeparator}]`, 'g'), '')
40
- .replace(decimalSeparator, '.');
41
- return parseFloat(number);
42
- };
43
-
44
- export const getCurrencySymbol = (currency: string) => {
45
- const formatter = new Intl.NumberFormat(navigator.language, {
46
- style: 'currency',
47
- currency,
48
- minimumFractionDigits: 0,
49
- maximumFractionDigits: 0,
50
- currencyDisplay: 'narrowSymbol',
51
- });
52
-
53
- // Format a number and extract the currency symbol
54
- const parts = formatter.formatToParts(1);
55
- const currencySymbol = parts.find((part) => part.type === 'currency')?.value;
56
-
57
- // Determine if the currency symbol is a prefix or suffix
58
- const isPrefix =
59
- parts.findIndex((part) => part.type === 'currency') <
60
- parts.findIndex((part) => part.type === 'integer');
61
-
62
- return isPrefix ? [currencySymbol, undefined] : [undefined, currencySymbol];
63
- };
1
+ export const formatMoney = (number: number, decimals = 2, currency = 'EUR') =>
2
+ new Intl.NumberFormat(navigator.language, {
3
+ style: 'currency',
4
+ currency,
5
+ minimumFractionDigits: decimals,
6
+ maximumFractionDigits: decimals,
7
+ currencyDisplay: 'narrowSymbol',
8
+ }).format(number);
9
+
10
+ export const formatPercentage = (number: number, decimals = 2) =>
11
+ new Intl.NumberFormat(navigator.language, {
12
+ style: 'percent',
13
+ minimumFractionDigits: decimals,
14
+ maximumFractionDigits: decimals,
15
+ }).format(number);
16
+
17
+ export const formatNumber = (number: number, decimals = 2) =>
18
+ new Intl.NumberFormat(navigator.language, {
19
+ minimumFractionDigits: decimals,
20
+ maximumFractionDigits: decimals,
21
+ }).format(number);
22
+
23
+ export const formatNumberInvariant = (number: number, decimals = 2) =>
24
+ new Intl.NumberFormat('es-US', {
25
+ minimumFractionDigits: decimals,
26
+ maximumFractionDigits: decimals,
27
+ }).format(number);
28
+
29
+ const getDecimalSeparator = () => {
30
+ const numberWithDecimal = 1.1; // A number with a decimal point
31
+ const formattedNumber = new Intl.NumberFormat().format(numberWithDecimal);
32
+ return formattedNumber.replace(/\d/g, ''); // Remove all digits to isolate the separator
33
+ };
34
+
35
+ export const decimalSeparator = getDecimalSeparator();
36
+
37
+ export const parseNumber = (value: string) => {
38
+ const number = value
39
+ .replace(new RegExp(`[^\\d${decimalSeparator}]`, 'g'), '')
40
+ .replace(decimalSeparator, '.');
41
+ return parseFloat(number);
42
+ };
43
+
44
+ export const getCurrencySymbol = (currency: string) => {
45
+ const formatter = new Intl.NumberFormat(navigator.language, {
46
+ style: 'currency',
47
+ currency,
48
+ minimumFractionDigits: 0,
49
+ maximumFractionDigits: 0,
50
+ currencyDisplay: 'narrowSymbol',
51
+ });
52
+
53
+ // Format a number and extract the currency symbol
54
+ const parts = formatter.formatToParts(1);
55
+ const currencySymbol = parts.find((part) => part.type === 'currency')?.value;
56
+
57
+ // Determine if the currency symbol is a prefix or suffix
58
+ const isPrefix =
59
+ parts.findIndex((part) => part.type === 'currency') <
60
+ parts.findIndex((part) => part.type === 'integer');
61
+
62
+ return isPrefix ? [currencySymbol, undefined] : [undefined, currencySymbol];
63
+ };
@@ -1,83 +1,83 @@
1
- const XS_BREAKPOINT = 320;
2
- const SM_BREAKPOINT = 480;
3
- const MD_BREAKPOINT = 768;
4
- const LG_BREAKPOINT = 992;
5
- const XL_BREAKPOINT = 1200;
6
-
7
- type MediaQueryKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
8
- const boundaries: Record<MediaQueryKey, [number, number]> = {
9
- xs: [0, XS_BREAKPOINT - 1],
10
- sm: [XS_BREAKPOINT, SM_BREAKPOINT - 1],
11
- md: [SM_BREAKPOINT, MD_BREAKPOINT - 1],
12
- lg: [MD_BREAKPOINT, LG_BREAKPOINT - 1],
13
- xl: [LG_BREAKPOINT, XL_BREAKPOINT - 1],
14
- xxl: [XL_BREAKPOINT, 999999],
15
- };
16
-
17
- export const findBreakpoint = (width: number): MediaQueryKey =>
18
- ((Object.keys(boundaries) as MediaQueryKey[]).find(
19
- (bp) => width >= boundaries[bp][0] && width < boundaries[bp][1]
20
- ) as MediaQueryKey) ?? 'xs';
21
-
22
- export const isSmallerThanOrEqual = (
23
- mq: MediaQueryKey,
24
- currentMq: MediaQueryKey
25
- ) => boundaries[currentMq][0] <= boundaries[mq][0];
26
- export const isGreaterThanOrEqual = (
27
- mq: MediaQueryKey,
28
- currentMq: MediaQueryKey
29
- ) => boundaries[currentMq][0] >= boundaries[mq][0];
30
-
31
- export const mediaQueries = {
32
- xs: `@media screen and (max-width: ${XS_BREAKPOINT - 1}px)`,
33
- sm: `@media screen and (min-width: ${XS_BREAKPOINT}px) and (max-width: ${
34
- SM_BREAKPOINT - 1
35
- }px)`,
36
- md: `@media screen and (min-width: ${SM_BREAKPOINT}px) and (max-width: ${
37
- MD_BREAKPOINT - 1
38
- }px)`,
39
- lg: `@media screen and (min-width: ${MD_BREAKPOINT}px) and (max-width: ${
40
- LG_BREAKPOINT - 1
41
- }px)`,
42
- xl: `@media screen and (min-width: ${LG_BREAKPOINT}px) and (max-width: ${
43
- XL_BREAKPOINT - 1
44
- }px)`,
45
- xxl: `@media screen and (min-width: ${XL_BREAKPOINT}px)`,
46
-
47
- smDown: `@media screen and (max-width: ${SM_BREAKPOINT - 1}px)`,
48
- mdDown: `@media screen and (max-width: ${MD_BREAKPOINT - 1}px)`,
49
- lgDown: `@media screen and (max-width: ${LG_BREAKPOINT - 1}px)`,
50
- xlDown: `@media screen and (max-width: ${XL_BREAKPOINT - 1}px)`,
51
-
52
- smUp: `@media screen and (min-width: ${XS_BREAKPOINT}px)`,
53
- mdUp: `@media screen and (min-width: ${SM_BREAKPOINT}px)`,
54
- lgUp: `@media screen and (min-width: ${MD_BREAKPOINT}px)`,
55
- xlUp: `@media screen and (min-width: ${LG_BREAKPOINT}px)`,
56
- };
57
-
58
- export const containerQueries = {
59
- xs: `@container (width <= ${XS_BREAKPOINT - 1}px)`,
60
- sm: `@container (width >= ${XS_BREAKPOINT}px) and (width <= ${
61
- SM_BREAKPOINT - 1
62
- }px)`,
63
- md: `@container (width >= ${SM_BREAKPOINT}px) and (width <= ${
64
- MD_BREAKPOINT - 1
65
- }px)`,
66
- lg: `@container (width >= ${MD_BREAKPOINT}px) and (width <= ${
67
- LG_BREAKPOINT - 1
68
- }px)`,
69
- xl: `@container (width >= ${LG_BREAKPOINT}px) and (width <= ${
70
- XL_BREAKPOINT - 1
71
- }px)`,
72
- xxl: `@container (width >= ${XL_BREAKPOINT}px)`,
73
-
74
- smDown: `@container (width <= ${SM_BREAKPOINT - 1}px)`,
75
- mdDown: `@container (width <= ${MD_BREAKPOINT - 1}px)`,
76
- lgDown: `@container (width <= ${LG_BREAKPOINT - 1}px)`,
77
- xlDown: `@container (width <= ${XL_BREAKPOINT - 1}px)`,
78
-
79
- smUp: `@container (width >= ${XS_BREAKPOINT}px)`,
80
- mdUp: `@container (width >= ${SM_BREAKPOINT}px)`,
81
- lgUp: `@container (width >= ${MD_BREAKPOINT}px)`,
82
- xlUp: `@container (width >= ${LG_BREAKPOINT}px)`,
83
- };
1
+ const XS_BREAKPOINT = 320;
2
+ const SM_BREAKPOINT = 480;
3
+ const MD_BREAKPOINT = 768;
4
+ const LG_BREAKPOINT = 992;
5
+ const XL_BREAKPOINT = 1200;
6
+
7
+ type MediaQueryKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
8
+ const boundaries: Record<MediaQueryKey, [number, number]> = {
9
+ xs: [0, XS_BREAKPOINT - 1],
10
+ sm: [XS_BREAKPOINT, SM_BREAKPOINT - 1],
11
+ md: [SM_BREAKPOINT, MD_BREAKPOINT - 1],
12
+ lg: [MD_BREAKPOINT, LG_BREAKPOINT - 1],
13
+ xl: [LG_BREAKPOINT, XL_BREAKPOINT - 1],
14
+ xxl: [XL_BREAKPOINT, 999999],
15
+ };
16
+
17
+ export const findBreakpoint = (width: number): MediaQueryKey =>
18
+ ((Object.keys(boundaries) as MediaQueryKey[]).find(
19
+ (bp) => width >= boundaries[bp][0] && width < boundaries[bp][1]
20
+ ) as MediaQueryKey) ?? 'xs';
21
+
22
+ export const isSmallerThanOrEqual = (
23
+ mq: MediaQueryKey,
24
+ currentMq: MediaQueryKey
25
+ ) => boundaries[currentMq][0] <= boundaries[mq][0];
26
+ export const isGreaterThanOrEqual = (
27
+ mq: MediaQueryKey,
28
+ currentMq: MediaQueryKey
29
+ ) => boundaries[currentMq][0] >= boundaries[mq][0];
30
+
31
+ export const mediaQueries = {
32
+ xs: `@media screen and (max-width: ${XS_BREAKPOINT - 1}px)`,
33
+ sm: `@media screen and (min-width: ${XS_BREAKPOINT}px) and (max-width: ${
34
+ SM_BREAKPOINT - 1
35
+ }px)`,
36
+ md: `@media screen and (min-width: ${SM_BREAKPOINT}px) and (max-width: ${
37
+ MD_BREAKPOINT - 1
38
+ }px)`,
39
+ lg: `@media screen and (min-width: ${MD_BREAKPOINT}px) and (max-width: ${
40
+ LG_BREAKPOINT - 1
41
+ }px)`,
42
+ xl: `@media screen and (min-width: ${LG_BREAKPOINT}px) and (max-width: ${
43
+ XL_BREAKPOINT - 1
44
+ }px)`,
45
+ xxl: `@media screen and (min-width: ${XL_BREAKPOINT}px)`,
46
+
47
+ smDown: `@media screen and (max-width: ${SM_BREAKPOINT - 1}px)`,
48
+ mdDown: `@media screen and (max-width: ${MD_BREAKPOINT - 1}px)`,
49
+ lgDown: `@media screen and (max-width: ${LG_BREAKPOINT - 1}px)`,
50
+ xlDown: `@media screen and (max-width: ${XL_BREAKPOINT - 1}px)`,
51
+
52
+ smUp: `@media screen and (min-width: ${XS_BREAKPOINT}px)`,
53
+ mdUp: `@media screen and (min-width: ${SM_BREAKPOINT}px)`,
54
+ lgUp: `@media screen and (min-width: ${MD_BREAKPOINT}px)`,
55
+ xlUp: `@media screen and (min-width: ${LG_BREAKPOINT}px)`,
56
+ };
57
+
58
+ export const containerQueries = {
59
+ xs: `@container (width <= ${XS_BREAKPOINT - 1}px)`,
60
+ sm: `@container (width >= ${XS_BREAKPOINT}px) and (width <= ${
61
+ SM_BREAKPOINT - 1
62
+ }px)`,
63
+ md: `@container (width >= ${SM_BREAKPOINT}px) and (width <= ${
64
+ MD_BREAKPOINT - 1
65
+ }px)`,
66
+ lg: `@container (width >= ${MD_BREAKPOINT}px) and (width <= ${
67
+ LG_BREAKPOINT - 1
68
+ }px)`,
69
+ xl: `@container (width >= ${LG_BREAKPOINT}px) and (width <= ${
70
+ XL_BREAKPOINT - 1
71
+ }px)`,
72
+ xxl: `@container (width >= ${XL_BREAKPOINT}px)`,
73
+
74
+ smDown: `@container (width <= ${SM_BREAKPOINT - 1}px)`,
75
+ mdDown: `@container (width <= ${MD_BREAKPOINT - 1}px)`,
76
+ lgDown: `@container (width <= ${LG_BREAKPOINT - 1}px)`,
77
+ xlDown: `@container (width <= ${XL_BREAKPOINT - 1}px)`,
78
+
79
+ smUp: `@container (width >= ${XS_BREAKPOINT}px)`,
80
+ mdUp: `@container (width >= ${SM_BREAKPOINT}px)`,
81
+ lgUp: `@container (width >= ${MD_BREAKPOINT}px)`,
82
+ xlUp: `@container (width >= ${LG_BREAKPOINT}px)`,
83
+ };
@@ -1,13 +1,13 @@
1
- export const escapeForRegExp = (text: string) =>
2
- text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
3
-
4
- export const extractTextFromHTML = (html: string) => {
5
- const div = document.createElement('div');
6
- div.style.display = 'block';
7
- div.style.whiteSpace = 'normal';
8
- div.innerHTML = html;
9
- document.body.appendChild(div);
10
- const text = div.innerText || '';
11
- document.body.removeChild(div);
12
- return text;
13
- };
1
+ export const escapeForRegExp = (text: string) =>
2
+ text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
3
+
4
+ export const extractTextFromHTML = (html: string) => {
5
+ const div = document.createElement('div');
6
+ div.style.display = 'block';
7
+ div.style.whiteSpace = 'normal';
8
+ div.innerHTML = html;
9
+ document.body.appendChild(div);
10
+ const text = div.innerText || '';
11
+ document.body.removeChild(div);
12
+ return text;
13
+ };
@@ -1,4 +1,4 @@
1
- import z from 'zod';
1
+ import * as z from 'zod';
2
2
 
3
3
  export const isMatchingSchema = <S extends z.ZodType>(
4
4
  obj: unknown,
@@ -1,7 +1,7 @@
1
- export * from './useElementSize';
2
- export * from './useShowArchived';
3
- export * from './useWindowSize';
4
- export * from './useMediaQuery';
5
- export * from './useContainerMediaQuery';
6
- export * from './useMediaQueryForWidth';
7
- export * from './useMutableState';
1
+ export * from './useElementSize';
2
+ export * from './useShowArchived';
3
+ export * from './useWindowSize';
4
+ export * from './useMediaQuery';
5
+ export * from './useContainerMediaQuery';
6
+ export * from './useMediaQueryForWidth';
7
+ export * from './useMutableState';
@@ -1,7 +1,7 @@
1
- import { useElementSize } from './useElementSize';
2
- import { useMediaQueryForWidth } from './useMediaQueryForWidth';
3
-
4
- export const useContainerMediaQuery = (element: HTMLElement) => {
5
- const { width } = useElementSize(element);
6
- return useMediaQueryForWidth(width);
7
- };
1
+ import { useElementSize } from './useElementSize';
2
+ import { useMediaQueryForWidth } from './useMediaQueryForWidth';
3
+
4
+ export const useContainerMediaQuery = (element: HTMLElement) => {
5
+ const { width } = useElementSize(element);
6
+ return useMediaQueryForWidth(width);
7
+ };
@@ -1,24 +1,24 @@
1
- import { useEffect, useState } from 'react';
2
-
3
- export const useElementSize = (element: HTMLElement | null) => {
4
- const [size, setSize] = useState({ width: 0, height: 0 });
5
-
6
- useEffect(() => {
7
- if (!element) {
8
- return;
9
- }
10
-
11
- const observer = new ResizeObserver((entries) => {
12
- const entry = entries[0];
13
- const { width, height } = entry.contentRect;
14
- setSize({ width, height });
15
- });
16
-
17
- observer.observe(element);
18
- return () => {
19
- observer.disconnect();
20
- };
21
- }, [element]);
22
-
23
- return size;
24
- };
1
+ import { useEffect, useState } from 'react';
2
+
3
+ export const useElementSize = (element: HTMLElement | null) => {
4
+ const [size, setSize] = useState({ width: 0, height: 0 });
5
+
6
+ useEffect(() => {
7
+ if (!element) {
8
+ return;
9
+ }
10
+
11
+ const observer = new ResizeObserver((entries) => {
12
+ const entry = entries[0];
13
+ const { width, height } = entry.contentRect;
14
+ setSize({ width, height });
15
+ });
16
+
17
+ observer.observe(element);
18
+ return () => {
19
+ observer.disconnect();
20
+ };
21
+ }, [element]);
22
+
23
+ return size;
24
+ };
@@ -1,9 +1,9 @@
1
- import { useMediaQueryForWidth } from './useMediaQueryForWidth';
2
- import { useWindowSize } from './useWindowSize';
3
-
4
- export const useMediaQuery = () => {
5
- const { width } = useWindowSize();
6
- const realWidth = width ?? 0;
7
-
8
- return useMediaQueryForWidth(realWidth);
9
- };
1
+ import { useMediaQueryForWidth } from './useMediaQueryForWidth';
2
+ import { useWindowSize } from './useWindowSize';
3
+
4
+ export const useMediaQuery = () => {
5
+ const { width } = useWindowSize();
6
+ const realWidth = width ?? 0;
7
+
8
+ return useMediaQueryForWidth(realWidth);
9
+ };
@@ -1,35 +1,35 @@
1
- import {
2
- findBreakpoint,
3
- isGreaterThanOrEqual,
4
- isSmallerThanOrEqual,
5
- } from '../helpers/responsive';
6
-
7
- import { useMemo } from 'react';
8
-
9
- export const useMediaQueryForWidth = (width: number) => {
10
- const breakpoint = findBreakpoint(width);
11
-
12
- return useMemo(
13
- () => ({
14
- breakpoint,
15
-
16
- isXs: breakpoint === 'xs',
17
- isSm: breakpoint === 'sm',
18
- isMd: breakpoint === 'md',
19
- isLg: breakpoint === 'lg',
20
- isXl: breakpoint === 'xl',
21
- isXxl: breakpoint === 'xxl',
22
-
23
- isSmDown: isSmallerThanOrEqual('sm', breakpoint),
24
- isMdDown: isSmallerThanOrEqual('md', breakpoint),
25
- isLgDown: isSmallerThanOrEqual('lg', breakpoint),
26
- isXlDown: isSmallerThanOrEqual('xl', breakpoint),
27
-
28
- isSmUp: isGreaterThanOrEqual('sm', breakpoint),
29
- isMdUp: isGreaterThanOrEqual('md', breakpoint),
30
- isLgUp: isGreaterThanOrEqual('lg', breakpoint),
31
- isXlUp: isGreaterThanOrEqual('xl', breakpoint),
32
- }),
33
- [breakpoint]
34
- );
35
- };
1
+ import {
2
+ findBreakpoint,
3
+ isGreaterThanOrEqual,
4
+ isSmallerThanOrEqual,
5
+ } from '../helpers/responsive';
6
+
7
+ import { useMemo } from 'react';
8
+
9
+ export const useMediaQueryForWidth = (width: number) => {
10
+ const breakpoint = findBreakpoint(width);
11
+
12
+ return useMemo(
13
+ () => ({
14
+ breakpoint,
15
+
16
+ isXs: breakpoint === 'xs',
17
+ isSm: breakpoint === 'sm',
18
+ isMd: breakpoint === 'md',
19
+ isLg: breakpoint === 'lg',
20
+ isXl: breakpoint === 'xl',
21
+ isXxl: breakpoint === 'xxl',
22
+
23
+ isSmDown: isSmallerThanOrEqual('sm', breakpoint),
24
+ isMdDown: isSmallerThanOrEqual('md', breakpoint),
25
+ isLgDown: isSmallerThanOrEqual('lg', breakpoint),
26
+ isXlDown: isSmallerThanOrEqual('xl', breakpoint),
27
+
28
+ isSmUp: isGreaterThanOrEqual('sm', breakpoint),
29
+ isMdUp: isGreaterThanOrEqual('md', breakpoint),
30
+ isLgUp: isGreaterThanOrEqual('lg', breakpoint),
31
+ isXlUp: isGreaterThanOrEqual('xl', breakpoint),
32
+ }),
33
+ [breakpoint]
34
+ );
35
+ };
@@ -1,17 +1,17 @@
1
- import { useCallback, useMemo, useState } from 'react';
2
-
3
- import { DeepPartial } from '../typings';
4
- import { defaultsDeep } from 'lodash';
5
-
6
- export const useMutableState = <T>(initialValue: T | (() => T) = {} as T) => {
7
- const [value, setValue] = useState<T>(initialValue);
8
-
9
- const setPartialValue = useCallback((partialValue: DeepPartial<T>) => {
10
- setValue((value) => defaultsDeep({}, partialValue, value));
11
- }, []);
12
-
13
- return useMemo(
14
- () => [value, setValue, setPartialValue] as const,
15
- [setPartialValue, value]
16
- );
17
- };
1
+ import { useCallback, useMemo, useState } from 'react';
2
+
3
+ import { DeepPartial } from '../typings';
4
+ import { defaultsDeep } from 'lodash';
5
+
6
+ export const useMutableState = <T>(initialValue: T | (() => T) = {} as T) => {
7
+ const [value, setValue] = useState<T>(initialValue);
8
+
9
+ const setPartialValue = useCallback((partialValue: DeepPartial<T>) => {
10
+ setValue((value) => defaultsDeep({}, partialValue, value));
11
+ }, []);
12
+
13
+ return useMemo(
14
+ () => [value, setValue, setPartialValue] as const,
15
+ [setPartialValue, value]
16
+ );
17
+ };
@@ -1,28 +1,28 @@
1
- import { useCallback, useMemo, useState } from 'react';
2
-
3
- import { ConditionDTO } from '../services/sqlRequests';
4
-
5
- export const useShowArchived = (initialValue?: boolean) => {
6
- const [showArchived, setShowArchived] = useState(initialValue ?? false);
7
-
8
- const toggleShowArchived = useCallback((value?: boolean) => {
9
- setShowArchived((prev) => (value === undefined ? !prev : value));
10
- }, []);
11
-
12
- const archivedConditions = useMemo<ConditionDTO[]>(
13
- () =>
14
- showArchived
15
- ? []
16
- : [{ field: 'Archived', operator: 'notEquals', value: 1 }],
17
- [showArchived]
18
- );
19
-
20
- return useMemo(
21
- () => ({
22
- archivedConditions,
23
- showArchived,
24
- toggleShowArchived,
25
- }),
26
- [archivedConditions, showArchived, toggleShowArchived]
27
- );
28
- };
1
+ import { useCallback, useMemo, useState } from 'react';
2
+
3
+ import { ConditionDTO } from '../services/sqlRequests';
4
+
5
+ export const useShowArchived = (initialValue?: boolean) => {
6
+ const [showArchived, setShowArchived] = useState(initialValue ?? false);
7
+
8
+ const toggleShowArchived = useCallback((value?: boolean) => {
9
+ setShowArchived((prev) => (value === undefined ? !prev : value));
10
+ }, []);
11
+
12
+ const archivedConditions = useMemo<ConditionDTO[]>(
13
+ () =>
14
+ showArchived
15
+ ? []
16
+ : [{ field: 'Archived', operator: 'notEquals', value: 1 }],
17
+ [showArchived]
18
+ );
19
+
20
+ return useMemo(
21
+ () => ({
22
+ archivedConditions,
23
+ showArchived,
24
+ toggleShowArchived,
25
+ }),
26
+ [archivedConditions, showArchived, toggleShowArchived]
27
+ );
28
+ };
@@ -1,20 +1,20 @@
1
- import { useEffect, useState } from 'react';
2
-
3
- export const useWindowSize = () => {
4
- const [size, setSize] = useState({ width: 0, height: 0 });
5
-
6
- useEffect(() => {
7
- const handleResize = () => {
8
- setSize({ width: window.outerWidth, height: window.outerHeight });
9
- };
10
-
11
- window.addEventListener('resize', handleResize);
12
- handleResize();
13
-
14
- return () => {
15
- window.removeEventListener('resize', handleResize);
16
- };
17
- }, []);
18
-
19
- return size;
20
- };
1
+ import { useEffect, useState } from 'react';
2
+
3
+ export const useWindowSize = () => {
4
+ const [size, setSize] = useState({ width: 0, height: 0 });
5
+
6
+ useEffect(() => {
7
+ const handleResize = () => {
8
+ setSize({ width: window.outerWidth, height: window.outerHeight });
9
+ };
10
+
11
+ window.addEventListener('resize', handleResize);
12
+ handleResize();
13
+
14
+ return () => {
15
+ window.removeEventListener('resize', handleResize);
16
+ };
17
+ }, []);
18
+
19
+ return size;
20
+ };
package/src/index.ts CHANGED
@@ -1,9 +1,9 @@
1
- export * from './components';
2
- export * from './providers';
3
-
4
- export * from './Icons';
5
-
6
- export * from './config';
7
- export * from './helpers';
8
- export * from './hooks';
9
- export * from './services';
1
+ export * from './components';
2
+ export * from './providers';
3
+
4
+ export * from './Icons';
5
+
6
+ export * from './config';
7
+ export * from './helpers';
8
+ export * from './hooks';
9
+ export * from './services';
@@ -1,3 +1,3 @@
1
- export const basePermissions: Record<string, string> = {
2
- 'users.manage': 'Gérer les utilisateurs',
3
- };
1
+ export const basePermissions: Record<string, string> = {
2
+ 'users.manage': 'Gérer les utilisateurs',
3
+ };