@addev-be/ui 0.2.5 → 0.2.7
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/assets/icons/arrow-down-1-9.svg +1 -0
- package/assets/icons/arrow-down-a-z.svg +1 -1
- package/assets/icons/arrow-down-big-small.svg +1 -0
- package/assets/icons/arrow-up-9-1.svg +1 -0
- package/assets/icons/arrow-up-big-small.svg +1 -0
- package/assets/icons/arrow-up-z-a.svg +1 -1
- package/assets/icons/check.svg +1 -1
- package/assets/icons/chevron-down.svg +1 -0
- package/assets/icons/down.svg +1 -1
- package/assets/icons/ellipsis.svg +1 -0
- package/assets/icons/filter-full.svg +1 -1
- package/assets/icons/filter.svg +1 -1
- package/assets/icons/hashtag.svg +1 -1
- package/assets/icons/image-slash.svg +1 -1
- package/assets/icons/left.svg +1 -1
- package/assets/icons/magnifier.svg +1 -1
- package/assets/icons/phone.svg +1 -1
- package/assets/icons/right.svg +1 -1
- package/assets/icons/sigma.svg +1 -0
- package/assets/icons/spinner-third.svg +1 -1
- package/assets/icons/table-columns.svg +1 -1
- package/assets/icons/table-footer-slash.svg +5 -0
- package/assets/icons/table-footer.svg +4 -0
- package/assets/icons/table.svg +1 -0
- package/assets/icons/tally.svg +1 -0
- package/assets/icons/up.svg +1 -1
- package/assets/icons/user-tie.svg +1 -1
- package/assets/icons/x-bar.svg +4 -0
- package/dist/Icons.d.ts +13 -1
- package/dist/Icons.js +25 -1
- package/dist/components/data/AdvancedRequestDataGrid/index.js +3 -3
- package/dist/components/data/DataGrid/AdvancedRequestDataGrid.d.ts +1 -2
- package/dist/components/data/DataGrid/AdvancedRequestDataGrid.js +3 -5
- package/dist/components/data/DataGrid/DataGridCell.d.ts +1 -1
- package/dist/components/data/DataGrid/DataGridCell.js +5 -5
- package/dist/components/data/DataGrid/DataGridColumnsModal/hooks.js +2 -1
- package/dist/components/data/DataGrid/DataGridEditableCell.js +2 -7
- package/dist/components/data/DataGrid/DataGridFilterMenu/index.js +90 -10
- package/dist/components/data/DataGrid/DataGridFilterMenu/styles.d.ts +3 -9
- package/dist/components/data/DataGrid/DataGridFilterMenu/styles.js +10 -37
- package/dist/components/data/DataGrid/DataGridFooter.d.ts +1 -1
- package/dist/components/data/DataGrid/DataGridFooter.js +35 -22
- package/dist/components/data/DataGrid/DataGridHeader.js +1 -3
- package/dist/components/data/DataGrid/DataGridHeaderCell.js +8 -23
- package/dist/components/data/DataGrid/FilterModalContent/index.d.ts +5 -5
- package/dist/components/data/DataGrid/FilterModalContent/index.js +11 -9
- package/dist/components/data/DataGrid/FilterValuesScroller.d.ts +8 -7
- package/dist/components/data/DataGrid/FilterValuesScroller.js +5 -6
- package/dist/components/data/DataGrid/helpers/columns.d.ts +1 -1
- package/dist/components/data/DataGrid/helpers/columns.js +72 -20
- package/dist/components/data/DataGrid/helpers/filters.d.ts +4 -3
- package/dist/components/data/DataGrid/helpers/filters.js +13 -5
- package/dist/components/data/DataGrid/hooks/useDataGrid.d.ts +1 -1
- package/dist/components/data/DataGrid/hooks/useDataGrid.js +60 -30
- package/dist/components/data/DataGrid/hooks/useDataGridCopy.d.ts +2 -2
- package/dist/components/data/DataGrid/hooks/useDataGridCopy.js +41 -40
- package/dist/components/data/DataGrid/hooks/useDataGridSettings.js +0 -1
- package/dist/components/data/DataGrid/index.d.ts +4 -2
- package/dist/components/data/DataGrid/index.js +38 -17
- package/dist/components/data/DataGrid/styles.d.ts +12 -5
- package/dist/components/data/DataGrid/styles.js +31 -18
- package/dist/components/data/DataGrid/types.d.ts +28 -16
- package/dist/components/data/SqlRequestDataGrid/helpers/columns.d.ts +1 -1
- package/dist/components/data/SqlRequestDataGrid/helpers/columns.js +30 -19
- package/dist/components/data/SqlRequestDataGrid/index.js +125 -37
- package/dist/components/data/SqlRequestDataGrid/types.d.ts +1 -0
- package/dist/components/data/index.d.ts +2 -0
- package/dist/components/data/index.js +2 -0
- package/dist/components/ui/ContextMenu/index.d.ts +11 -0
- package/dist/components/ui/ContextMenu/index.js +58 -0
- package/dist/components/ui/ContextMenu/styles.d.ts +18 -0
- package/dist/components/ui/ContextMenu/styles.js +56 -0
- package/dist/helpers/dates.d.ts +2 -0
- package/dist/helpers/dates.js +13 -0
- package/dist/services/advancedRequests.d.ts +1 -1
- package/dist/services/sqlRequests.d.ts +9 -4
- package/dist/services/sqlRequests.js +1 -0
- package/package.json +1 -1
- package/src/Icons.tsx +104 -80
- package/src/components/data/AdvancedRequestDataGrid/helpers/advancedRequests.ts +93 -93
- package/src/components/data/AdvancedRequestDataGrid/helpers/columns.tsx +262 -262
- package/src/components/data/AdvancedRequestDataGrid/helpers/index.ts +2 -2
- package/src/components/data/AdvancedRequestDataGrid/index.tsx +267 -269
- package/src/components/data/AdvancedRequestDataGrid/types.ts +47 -47
- package/src/components/data/DataGrid/DataGridCell.tsx +73 -73
- package/src/components/data/DataGrid/DataGridColumnsModal/helpers.ts +14 -14
- package/src/components/data/DataGrid/DataGridColumnsModal/hooks.tsx +59 -58
- package/src/components/data/DataGrid/DataGridColumnsModal/index.tsx +181 -181
- package/src/components/data/DataGrid/DataGridColumnsModal/styles.ts +104 -104
- package/src/components/data/DataGrid/DataGridEditableCell.tsx +43 -54
- package/src/components/data/DataGrid/DataGridFilterMenu/hooks.tsx +75 -75
- package/src/components/data/DataGrid/DataGridFilterMenu/index.tsx +364 -190
- package/src/components/data/DataGrid/DataGridFilterMenu/styles.ts +49 -100
- package/src/components/data/DataGrid/DataGridFooter.tsx +42 -64
- package/src/components/data/DataGrid/DataGridHeader.tsx +126 -126
- package/src/components/data/DataGrid/DataGridHeaderCell.tsx +132 -167
- package/src/components/data/DataGrid/FilterModalContent/index.tsx +124 -125
- package/src/components/data/DataGrid/FilterModalContent/styles.ts +22 -22
- package/src/components/data/DataGrid/FilterValuesScroller.tsx +133 -131
- package/src/components/data/DataGrid/VirtualScroller.tsx +46 -46
- package/src/components/data/DataGrid/helpers/columns.tsx +287 -196
- package/src/components/data/DataGrid/helpers/filters.ts +220 -207
- package/src/components/data/DataGrid/helpers/index.ts +2 -2
- package/src/components/data/DataGrid/hooks/index.ts +30 -30
- package/src/components/data/DataGrid/hooks/useDataGrid.tsx +305 -264
- package/src/components/data/DataGrid/hooks/useDataGridCopy.ts +170 -165
- package/src/components/data/DataGrid/hooks/useDataGridSettings.ts +48 -48
- package/src/components/data/DataGrid/index.tsx +139 -132
- package/src/components/data/DataGrid/styles.ts +347 -326
- package/src/components/data/DataGrid/types.ts +260 -240
- package/src/components/data/SqlRequestDataGrid/helpers/columns.tsx +259 -224
- package/src/components/data/SqlRequestDataGrid/helpers/index.ts +2 -2
- package/src/components/data/SqlRequestDataGrid/helpers/sqlRequests.ts +16 -16
- package/src/components/data/SqlRequestDataGrid/index.tsx +347 -252
- package/src/components/data/SqlRequestDataGrid/types.ts +47 -47
- package/src/components/data/index.ts +8 -8
- package/src/components/forms/Button.tsx +99 -99
- package/src/components/forms/IconButton.tsx +56 -56
- package/src/components/forms/IndeterminateCheckbox.tsx +46 -46
- package/src/components/forms/Select.tsx +40 -40
- package/src/components/forms/index.ts +5 -5
- package/src/components/forms/styles.ts +20 -20
- package/src/components/index.ts +3 -3
- package/src/components/layout/Dropdown/index.tsx +79 -79
- package/src/components/layout/Dropdown/styles.ts +44 -44
- package/src/components/layout/Loading/index.tsx +29 -29
- package/src/components/layout/Loading/styles.ts +29 -29
- package/src/components/layout/Modal/index.tsx +51 -51
- package/src/components/layout/Modal/styles.ts +110 -110
- package/src/components/layout/index.ts +3 -3
- package/src/components/ui/ContextMenu/index.tsx +73 -0
- package/src/components/ui/ContextMenu/styles.ts +115 -0
- package/src/config/index.ts +14 -14
- package/src/helpers/dates.ts +9 -9
- package/src/helpers/getScrollbarSize.ts +14 -14
- package/src/helpers/numbers.ts +20 -20
- package/src/hooks/index.ts +2 -2
- package/src/hooks/useElementSize.ts +24 -24
- package/src/hooks/useWindowSize.ts +20 -20
- package/src/index.ts +7 -7
- package/src/providers/PortalsProvider/index.tsx +54 -54
- package/src/providers/PortalsProvider/styles.ts +27 -27
- package/src/providers/SettingsProvider/index.tsx +70 -70
- package/src/providers/ThemeProvider/ThemeProvider.ts +55 -55
- package/src/providers/ThemeProvider/defaultTheme.ts +444 -444
- package/src/providers/ThemeProvider/index.ts +3 -3
- package/src/providers/ThemeProvider/types.ts +123 -123
- package/src/providers/UiProviders/index.tsx +65 -65
- package/src/providers/UiProviders/styles.ts +10 -10
- package/src/providers/hooks.ts +8 -8
- package/src/providers/index.ts +5 -5
- package/src/services/HttpService.ts +80 -80
- package/src/services/WebSocketService.ts +147 -147
- package/src/services/advancedRequests.ts +101 -101
- package/src/services/base.ts +31 -31
- package/src/services/hooks.ts +23 -23
- package/src/services/index.ts +2 -2
- package/src/services/sqlRequests.ts +110 -99
- package/src/styles/animations.scss +30 -30
- package/src/styles/index.scss +42 -42
- package/src/typings.d.ts +6 -6
- package/tsconfig.tsbuildinfo +1 -1
- package/dist/components/data/DataGrid/helpers.d.ts +0 -28
- package/dist/components/data/DataGrid/helpers.js +0 -436
- package/dist/config/types.d.ts +0 -11
- package/dist/config/types.js +0 -2
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { ThemeProvider } from './ThemeProvider';
|
|
2
|
-
|
|
3
|
-
export { type Theme } from './types';
|
|
1
|
+
export { ThemeProvider } from './ThemeProvider';
|
|
2
|
+
|
|
3
|
+
export { type Theme } from './types';
|
|
@@ -1,123 +1,123 @@
|
|
|
1
|
-
import { DeepPartial } from '../../typings';
|
|
2
|
-
|
|
3
|
-
export type ThemeColorIntensity =
|
|
4
|
-
| 0
|
|
5
|
-
| 50
|
|
6
|
-
| 100
|
|
7
|
-
| 200
|
|
8
|
-
| 300
|
|
9
|
-
| 400
|
|
10
|
-
| 500
|
|
11
|
-
| 600
|
|
12
|
-
| 700
|
|
13
|
-
| 800
|
|
14
|
-
| 900
|
|
15
|
-
| 950
|
|
16
|
-
| 1000;
|
|
17
|
-
export type ThemeColorDefinition = Record<ThemeColorIntensity, string>;
|
|
18
|
-
export type ThemeRawColor =
|
|
19
|
-
| 'slate'
|
|
20
|
-
| 'gray'
|
|
21
|
-
| 'zinc'
|
|
22
|
-
| 'neutral'
|
|
23
|
-
| 'stone'
|
|
24
|
-
| 'red'
|
|
25
|
-
| 'orange'
|
|
26
|
-
| 'amber'
|
|
27
|
-
| 'yellow'
|
|
28
|
-
| 'lime'
|
|
29
|
-
| 'green'
|
|
30
|
-
| 'emerald'
|
|
31
|
-
| 'teal'
|
|
32
|
-
| 'cyan'
|
|
33
|
-
| 'sky'
|
|
34
|
-
| 'blue'
|
|
35
|
-
| 'indigo'
|
|
36
|
-
| 'violet'
|
|
37
|
-
| 'purple'
|
|
38
|
-
| 'fuchsia'
|
|
39
|
-
| 'pink'
|
|
40
|
-
| 'rose';
|
|
41
|
-
export type ThemePredefinedColor =
|
|
42
|
-
| 'primary'
|
|
43
|
-
| 'secondary'
|
|
44
|
-
| 'neutral'
|
|
45
|
-
| 'success'
|
|
46
|
-
| 'warning'
|
|
47
|
-
| 'danger'
|
|
48
|
-
| 'info';
|
|
49
|
-
export type ThemeColor = ThemeRawColor | ThemePredefinedColor;
|
|
50
|
-
export type ThemeColorReference = ThemeColor | ThemeColorDefinition;
|
|
51
|
-
|
|
52
|
-
export type ThemeTextSize =
|
|
53
|
-
| 'xs'
|
|
54
|
-
| 'sm'
|
|
55
|
-
| 'base'
|
|
56
|
-
| 'lg'
|
|
57
|
-
| 'xl'
|
|
58
|
-
| '2xl'
|
|
59
|
-
| '3xl'
|
|
60
|
-
| '4xl'
|
|
61
|
-
| '5xl'
|
|
62
|
-
| '6xl';
|
|
63
|
-
export type ThemeFontFamily = 'sans' | 'serif' | 'mono';
|
|
64
|
-
export type ThemeFontWeight = 'light' | 'normal' | 'bold';
|
|
65
|
-
export type ThemeSpace =
|
|
66
|
-
| '0'
|
|
67
|
-
| '0_5'
|
|
68
|
-
| '1'
|
|
69
|
-
| '1_5'
|
|
70
|
-
| '2'
|
|
71
|
-
| '3'
|
|
72
|
-
| '4'
|
|
73
|
-
| '5'
|
|
74
|
-
| '6'
|
|
75
|
-
| '8'
|
|
76
|
-
| '10'
|
|
77
|
-
| '12'
|
|
78
|
-
| '16'
|
|
79
|
-
| '20'
|
|
80
|
-
| '24'
|
|
81
|
-
| '32'
|
|
82
|
-
| '40'
|
|
83
|
-
| '48';
|
|
84
|
-
export type ThemeSize =
|
|
85
|
-
| '0'
|
|
86
|
-
| '0_5'
|
|
87
|
-
| '1'
|
|
88
|
-
| '1_5'
|
|
89
|
-
| '2'
|
|
90
|
-
| '3'
|
|
91
|
-
| '4'
|
|
92
|
-
| '5'
|
|
93
|
-
| '6'
|
|
94
|
-
| '8'
|
|
95
|
-
| '10'
|
|
96
|
-
| '12'
|
|
97
|
-
| '16'
|
|
98
|
-
| '20'
|
|
99
|
-
| '24'
|
|
100
|
-
| '32'
|
|
101
|
-
| '40'
|
|
102
|
-
| '48';
|
|
103
|
-
export type ThemeRounded =
|
|
104
|
-
| 'none'
|
|
105
|
-
| 'sm'
|
|
106
|
-
| 'md'
|
|
107
|
-
| 'lg'
|
|
108
|
-
| 'xl'
|
|
109
|
-
| '2xl'
|
|
110
|
-
| '3xl'
|
|
111
|
-
| 'full';
|
|
112
|
-
export type ThemeShadow = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
113
|
-
|
|
114
|
-
export type Theme = DeepPartial<{
|
|
115
|
-
colors: Record<ThemeColor, ThemeColorReference>;
|
|
116
|
-
texts: Record<ThemeTextSize, string>;
|
|
117
|
-
fonts: Record<ThemeFontFamily, string>;
|
|
118
|
-
weights: Record<ThemeFontWeight, string>;
|
|
119
|
-
spaces: Record<ThemeSpace, string>;
|
|
120
|
-
sizes: Record<ThemeSpace, string>;
|
|
121
|
-
rounded: Record<ThemeRounded, string>;
|
|
122
|
-
shadows: Record<ThemeShadow, string>;
|
|
123
|
-
}>;
|
|
1
|
+
import { DeepPartial } from '../../typings';
|
|
2
|
+
|
|
3
|
+
export type ThemeColorIntensity =
|
|
4
|
+
| 0
|
|
5
|
+
| 50
|
|
6
|
+
| 100
|
|
7
|
+
| 200
|
|
8
|
+
| 300
|
|
9
|
+
| 400
|
|
10
|
+
| 500
|
|
11
|
+
| 600
|
|
12
|
+
| 700
|
|
13
|
+
| 800
|
|
14
|
+
| 900
|
|
15
|
+
| 950
|
|
16
|
+
| 1000;
|
|
17
|
+
export type ThemeColorDefinition = Record<ThemeColorIntensity, string>;
|
|
18
|
+
export type ThemeRawColor =
|
|
19
|
+
| 'slate'
|
|
20
|
+
| 'gray'
|
|
21
|
+
| 'zinc'
|
|
22
|
+
| 'neutral'
|
|
23
|
+
| 'stone'
|
|
24
|
+
| 'red'
|
|
25
|
+
| 'orange'
|
|
26
|
+
| 'amber'
|
|
27
|
+
| 'yellow'
|
|
28
|
+
| 'lime'
|
|
29
|
+
| 'green'
|
|
30
|
+
| 'emerald'
|
|
31
|
+
| 'teal'
|
|
32
|
+
| 'cyan'
|
|
33
|
+
| 'sky'
|
|
34
|
+
| 'blue'
|
|
35
|
+
| 'indigo'
|
|
36
|
+
| 'violet'
|
|
37
|
+
| 'purple'
|
|
38
|
+
| 'fuchsia'
|
|
39
|
+
| 'pink'
|
|
40
|
+
| 'rose';
|
|
41
|
+
export type ThemePredefinedColor =
|
|
42
|
+
| 'primary'
|
|
43
|
+
| 'secondary'
|
|
44
|
+
| 'neutral'
|
|
45
|
+
| 'success'
|
|
46
|
+
| 'warning'
|
|
47
|
+
| 'danger'
|
|
48
|
+
| 'info';
|
|
49
|
+
export type ThemeColor = ThemeRawColor | ThemePredefinedColor;
|
|
50
|
+
export type ThemeColorReference = ThemeColor | ThemeColorDefinition;
|
|
51
|
+
|
|
52
|
+
export type ThemeTextSize =
|
|
53
|
+
| 'xs'
|
|
54
|
+
| 'sm'
|
|
55
|
+
| 'base'
|
|
56
|
+
| 'lg'
|
|
57
|
+
| 'xl'
|
|
58
|
+
| '2xl'
|
|
59
|
+
| '3xl'
|
|
60
|
+
| '4xl'
|
|
61
|
+
| '5xl'
|
|
62
|
+
| '6xl';
|
|
63
|
+
export type ThemeFontFamily = 'sans' | 'serif' | 'mono';
|
|
64
|
+
export type ThemeFontWeight = 'light' | 'normal' | 'bold';
|
|
65
|
+
export type ThemeSpace =
|
|
66
|
+
| '0'
|
|
67
|
+
| '0_5'
|
|
68
|
+
| '1'
|
|
69
|
+
| '1_5'
|
|
70
|
+
| '2'
|
|
71
|
+
| '3'
|
|
72
|
+
| '4'
|
|
73
|
+
| '5'
|
|
74
|
+
| '6'
|
|
75
|
+
| '8'
|
|
76
|
+
| '10'
|
|
77
|
+
| '12'
|
|
78
|
+
| '16'
|
|
79
|
+
| '20'
|
|
80
|
+
| '24'
|
|
81
|
+
| '32'
|
|
82
|
+
| '40'
|
|
83
|
+
| '48';
|
|
84
|
+
export type ThemeSize =
|
|
85
|
+
| '0'
|
|
86
|
+
| '0_5'
|
|
87
|
+
| '1'
|
|
88
|
+
| '1_5'
|
|
89
|
+
| '2'
|
|
90
|
+
| '3'
|
|
91
|
+
| '4'
|
|
92
|
+
| '5'
|
|
93
|
+
| '6'
|
|
94
|
+
| '8'
|
|
95
|
+
| '10'
|
|
96
|
+
| '12'
|
|
97
|
+
| '16'
|
|
98
|
+
| '20'
|
|
99
|
+
| '24'
|
|
100
|
+
| '32'
|
|
101
|
+
| '40'
|
|
102
|
+
| '48';
|
|
103
|
+
export type ThemeRounded =
|
|
104
|
+
| 'none'
|
|
105
|
+
| 'sm'
|
|
106
|
+
| 'md'
|
|
107
|
+
| 'lg'
|
|
108
|
+
| 'xl'
|
|
109
|
+
| '2xl'
|
|
110
|
+
| '3xl'
|
|
111
|
+
| 'full';
|
|
112
|
+
export type ThemeShadow = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
113
|
+
|
|
114
|
+
export type Theme = DeepPartial<{
|
|
115
|
+
colors: Record<ThemeColor, ThemeColorReference>;
|
|
116
|
+
texts: Record<ThemeTextSize, string>;
|
|
117
|
+
fonts: Record<ThemeFontFamily, string>;
|
|
118
|
+
weights: Record<ThemeFontWeight, string>;
|
|
119
|
+
spaces: Record<ThemeSpace, string>;
|
|
120
|
+
sizes: Record<ThemeSpace, string>;
|
|
121
|
+
rounded: Record<ThemeRounded, string>;
|
|
122
|
+
shadows: Record<ThemeShadow, string>;
|
|
123
|
+
}>;
|
|
@@ -1,65 +1,65 @@
|
|
|
1
|
-
import '../../styles/index.scss';
|
|
2
|
-
import '../../styles/animations.scss';
|
|
3
|
-
|
|
4
|
-
import * as styles from './styles';
|
|
5
|
-
|
|
6
|
-
import {
|
|
7
|
-
FC,
|
|
8
|
-
PropsWithChildren,
|
|
9
|
-
createContext,
|
|
10
|
-
useCallback,
|
|
11
|
-
useMemo,
|
|
12
|
-
useRef,
|
|
13
|
-
} from 'react';
|
|
14
|
-
|
|
15
|
-
import { PortalsProvider } from '../PortalsProvider';
|
|
16
|
-
import { SettingsProvider } from '../SettingsProvider';
|
|
17
|
-
import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
|
|
18
|
-
import { defaultTheme } from '../ThemeProvider/defaultTheme';
|
|
19
|
-
|
|
20
|
-
export type UiProvidersProps = PropsWithChildren<{
|
|
21
|
-
$darkMode?: boolean;
|
|
22
|
-
}>;
|
|
23
|
-
|
|
24
|
-
export type UiContextType = {
|
|
25
|
-
rootRect: DOMRect;
|
|
26
|
-
getElementScreenRect: (element: HTMLElement) => DOMRect;
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
export const UiContext = createContext<UiContextType>({
|
|
30
|
-
rootRect: new DOMRect(),
|
|
31
|
-
getElementScreenRect: () => new DOMRect(),
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
export const UiProviders: FC<UiProvidersProps> = ({ $darkMode, children }) => {
|
|
35
|
-
const rootRef = useRef<HTMLDivElement | null>(null);
|
|
36
|
-
|
|
37
|
-
const getElementScreenRect = useCallback((element: HTMLElement) => {
|
|
38
|
-
const rootRect = rootRef.current?.getBoundingClientRect();
|
|
39
|
-
const rect = element.getBoundingClientRect();
|
|
40
|
-
rect.x -= (rootRect?.x ?? 0) + window.scrollX;
|
|
41
|
-
rect.y -= (rootRect?.y ?? 0) + window.scrollY;
|
|
42
|
-
return rect;
|
|
43
|
-
}, []);
|
|
44
|
-
|
|
45
|
-
const value = useMemo(
|
|
46
|
-
() => ({
|
|
47
|
-
rootRect: rootRef.current?.getBoundingClientRect() ?? new DOMRect(),
|
|
48
|
-
getElementScreenRect,
|
|
49
|
-
}),
|
|
50
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
51
|
-
[rootRef.current]
|
|
52
|
-
);
|
|
53
|
-
|
|
54
|
-
return (
|
|
55
|
-
<ThemeProvider $theme={defaultTheme} $darkMode={$darkMode}>
|
|
56
|
-
<UiContext.Provider value={value}>
|
|
57
|
-
<styles.Root ref={rootRef}>
|
|
58
|
-
<SettingsProvider>
|
|
59
|
-
<PortalsProvider>{children}</PortalsProvider>
|
|
60
|
-
</SettingsProvider>
|
|
61
|
-
</styles.Root>
|
|
62
|
-
</UiContext.Provider>
|
|
63
|
-
</ThemeProvider>
|
|
64
|
-
);
|
|
65
|
-
};
|
|
1
|
+
import '../../styles/index.scss';
|
|
2
|
+
import '../../styles/animations.scss';
|
|
3
|
+
|
|
4
|
+
import * as styles from './styles';
|
|
5
|
+
|
|
6
|
+
import {
|
|
7
|
+
FC,
|
|
8
|
+
PropsWithChildren,
|
|
9
|
+
createContext,
|
|
10
|
+
useCallback,
|
|
11
|
+
useMemo,
|
|
12
|
+
useRef,
|
|
13
|
+
} from 'react';
|
|
14
|
+
|
|
15
|
+
import { PortalsProvider } from '../PortalsProvider';
|
|
16
|
+
import { SettingsProvider } from '../SettingsProvider';
|
|
17
|
+
import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
|
|
18
|
+
import { defaultTheme } from '../ThemeProvider/defaultTheme';
|
|
19
|
+
|
|
20
|
+
export type UiProvidersProps = PropsWithChildren<{
|
|
21
|
+
$darkMode?: boolean;
|
|
22
|
+
}>;
|
|
23
|
+
|
|
24
|
+
export type UiContextType = {
|
|
25
|
+
rootRect: DOMRect;
|
|
26
|
+
getElementScreenRect: (element: HTMLElement) => DOMRect;
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
export const UiContext = createContext<UiContextType>({
|
|
30
|
+
rootRect: new DOMRect(),
|
|
31
|
+
getElementScreenRect: () => new DOMRect(),
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
export const UiProviders: FC<UiProvidersProps> = ({ $darkMode, children }) => {
|
|
35
|
+
const rootRef = useRef<HTMLDivElement | null>(null);
|
|
36
|
+
|
|
37
|
+
const getElementScreenRect = useCallback((element: HTMLElement) => {
|
|
38
|
+
const rootRect = rootRef.current?.getBoundingClientRect();
|
|
39
|
+
const rect = element.getBoundingClientRect();
|
|
40
|
+
rect.x -= (rootRect?.x ?? 0) + window.scrollX;
|
|
41
|
+
rect.y -= (rootRect?.y ?? 0) + window.scrollY;
|
|
42
|
+
return rect;
|
|
43
|
+
}, []);
|
|
44
|
+
|
|
45
|
+
const value = useMemo(
|
|
46
|
+
() => ({
|
|
47
|
+
rootRect: rootRef.current?.getBoundingClientRect() ?? new DOMRect(),
|
|
48
|
+
getElementScreenRect,
|
|
49
|
+
}),
|
|
50
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
51
|
+
[rootRef.current]
|
|
52
|
+
);
|
|
53
|
+
|
|
54
|
+
return (
|
|
55
|
+
<ThemeProvider $theme={defaultTheme} $darkMode={$darkMode}>
|
|
56
|
+
<UiContext.Provider value={value}>
|
|
57
|
+
<styles.Root ref={rootRef}>
|
|
58
|
+
<SettingsProvider>
|
|
59
|
+
<PortalsProvider>{children}</PortalsProvider>
|
|
60
|
+
</SettingsProvider>
|
|
61
|
+
</styles.Root>
|
|
62
|
+
</UiContext.Provider>
|
|
63
|
+
</ThemeProvider>
|
|
64
|
+
);
|
|
65
|
+
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import styled from 'styled-components';
|
|
2
|
-
|
|
3
|
-
export const Root = styled.div.attrs({ className: 'Root' })`
|
|
4
|
-
position: relative;
|
|
5
|
-
font-family: var(--font-sans);
|
|
6
|
-
font-size: var(--text-base);
|
|
7
|
-
color: var(--color-neutral-900);
|
|
8
|
-
width: 100%;
|
|
9
|
-
height: 100%;
|
|
10
|
-
`;
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
|
|
3
|
+
export const Root = styled.div.attrs({ className: 'Root' })`
|
|
4
|
+
position: relative;
|
|
5
|
+
font-family: var(--font-sans);
|
|
6
|
+
font-size: var(--text-base);
|
|
7
|
+
color: var(--color-neutral-900);
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 100%;
|
|
10
|
+
`;
|
package/src/providers/hooks.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { PortalsContext } from './PortalsProvider';
|
|
2
|
-
import { SettingsContext } from './SettingsProvider';
|
|
3
|
-
import { UiContext } from './UiProviders';
|
|
4
|
-
import { useContext } from 'react';
|
|
5
|
-
|
|
6
|
-
export const usePortals = () => useContext(PortalsContext);
|
|
7
|
-
export const useUi = () => useContext(UiContext);
|
|
8
|
-
export const useSettings = () => useContext(SettingsContext);
|
|
1
|
+
import { PortalsContext } from './PortalsProvider';
|
|
2
|
+
import { SettingsContext } from './SettingsProvider';
|
|
3
|
+
import { UiContext } from './UiProviders';
|
|
4
|
+
import { useContext } from 'react';
|
|
5
|
+
|
|
6
|
+
export const usePortals = () => useContext(PortalsContext);
|
|
7
|
+
export const useUi = () => useContext(UiContext);
|
|
8
|
+
export const useSettings = () => useContext(SettingsContext);
|
package/src/providers/index.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export * from './UiProviders';
|
|
2
|
-
export * from './PortalsProvider';
|
|
3
|
-
export * from './ThemeProvider';
|
|
4
|
-
|
|
5
|
-
export * from './hooks';
|
|
1
|
+
export * from './UiProviders';
|
|
2
|
+
export * from './PortalsProvider';
|
|
3
|
+
export * from './ThemeProvider';
|
|
4
|
+
|
|
5
|
+
export * from './hooks';
|
|
@@ -1,80 +1,80 @@
|
|
|
1
|
-
import { Config } from '../config';
|
|
2
|
-
import { Request } from './base';
|
|
3
|
-
import { trimEnd } from 'lodash';
|
|
4
|
-
import { v4 } from 'uuid';
|
|
5
|
-
|
|
6
|
-
export class HttpService {
|
|
7
|
-
private static instance: HttpService;
|
|
8
|
-
private config: Config;
|
|
9
|
-
private promises: {
|
|
10
|
-
[id: string]: {
|
|
11
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
12
|
-
resolve: (value: any) => void;
|
|
13
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
14
|
-
reject: (reason?: any) => void;
|
|
15
|
-
};
|
|
16
|
-
} = {};
|
|
17
|
-
|
|
18
|
-
constructor(config: Config) {
|
|
19
|
-
HttpService.instance = this;
|
|
20
|
-
this.config = config;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
public static getInstance() {
|
|
24
|
-
return HttpService.instance;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
public sendRequest<TReq, TRes>(name: string, data: TReq) {
|
|
28
|
-
const id = v4();
|
|
29
|
-
const promise = new Promise<TRes>((resolve, reject) => {
|
|
30
|
-
const request: Request = { id, name, data };
|
|
31
|
-
this.promises[id] = { resolve, reject };
|
|
32
|
-
console.log('[HTTP] Sending request:', request);
|
|
33
|
-
fetch(`${trimEnd(this.config.httpServerUrl, '/')}/${name}`, {
|
|
34
|
-
method: 'POST',
|
|
35
|
-
headers: {
|
|
36
|
-
'Content-Type': 'application/json',
|
|
37
|
-
},
|
|
38
|
-
body: JSON.stringify(request),
|
|
39
|
-
})
|
|
40
|
-
.then(async (response) => {
|
|
41
|
-
if (!response.ok) {
|
|
42
|
-
throw new Error('HTTP request failed');
|
|
43
|
-
}
|
|
44
|
-
const body = await response.text();
|
|
45
|
-
this.parseMessage(body);
|
|
46
|
-
})
|
|
47
|
-
.catch((error) => {
|
|
48
|
-
reject(error);
|
|
49
|
-
});
|
|
50
|
-
});
|
|
51
|
-
return promise;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
private parseMessage(message: string) {
|
|
55
|
-
try {
|
|
56
|
-
const response = JSON.parse(message);
|
|
57
|
-
if (!response.id) {
|
|
58
|
-
throw new Error('Received message is not valid');
|
|
59
|
-
}
|
|
60
|
-
if (this.promises[response.id]) {
|
|
61
|
-
console.log('[HTTP] Received response:', response);
|
|
62
|
-
if (
|
|
63
|
-
typeof response.data?.status === 'number' &&
|
|
64
|
-
response.data.status < 0
|
|
65
|
-
) {
|
|
66
|
-
this.promises[response.id].reject(new Error(response.data.message));
|
|
67
|
-
} else {
|
|
68
|
-
this.promises[response.id].resolve(response.data);
|
|
69
|
-
}
|
|
70
|
-
delete this.promises[response.id];
|
|
71
|
-
} else {
|
|
72
|
-
console.log('[HTTP] Received request:', response);
|
|
73
|
-
// TODO : Implement request handling
|
|
74
|
-
throw new Error('Not yet implemented');
|
|
75
|
-
}
|
|
76
|
-
} catch (error) {
|
|
77
|
-
console.error('[HTTP] Error parsing message:', error);
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
}
|
|
1
|
+
import { Config } from '../config';
|
|
2
|
+
import { Request } from './base';
|
|
3
|
+
import { trimEnd } from 'lodash';
|
|
4
|
+
import { v4 } from 'uuid';
|
|
5
|
+
|
|
6
|
+
export class HttpService {
|
|
7
|
+
private static instance: HttpService;
|
|
8
|
+
private config: Config;
|
|
9
|
+
private promises: {
|
|
10
|
+
[id: string]: {
|
|
11
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
12
|
+
resolve: (value: any) => void;
|
|
13
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
14
|
+
reject: (reason?: any) => void;
|
|
15
|
+
};
|
|
16
|
+
} = {};
|
|
17
|
+
|
|
18
|
+
constructor(config: Config) {
|
|
19
|
+
HttpService.instance = this;
|
|
20
|
+
this.config = config;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
public static getInstance() {
|
|
24
|
+
return HttpService.instance;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
public sendRequest<TReq, TRes>(name: string, data: TReq) {
|
|
28
|
+
const id = v4();
|
|
29
|
+
const promise = new Promise<TRes>((resolve, reject) => {
|
|
30
|
+
const request: Request = { id, name, data };
|
|
31
|
+
this.promises[id] = { resolve, reject };
|
|
32
|
+
console.log('[HTTP] Sending request:', request);
|
|
33
|
+
fetch(`${trimEnd(this.config.httpServerUrl, '/')}/${name}`, {
|
|
34
|
+
method: 'POST',
|
|
35
|
+
headers: {
|
|
36
|
+
'Content-Type': 'application/json',
|
|
37
|
+
},
|
|
38
|
+
body: JSON.stringify(request),
|
|
39
|
+
})
|
|
40
|
+
.then(async (response) => {
|
|
41
|
+
if (!response.ok) {
|
|
42
|
+
throw new Error('HTTP request failed');
|
|
43
|
+
}
|
|
44
|
+
const body = await response.text();
|
|
45
|
+
this.parseMessage(body);
|
|
46
|
+
})
|
|
47
|
+
.catch((error) => {
|
|
48
|
+
reject(error);
|
|
49
|
+
});
|
|
50
|
+
});
|
|
51
|
+
return promise;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
private parseMessage(message: string) {
|
|
55
|
+
try {
|
|
56
|
+
const response = JSON.parse(message);
|
|
57
|
+
if (!response.id) {
|
|
58
|
+
throw new Error('Received message is not valid');
|
|
59
|
+
}
|
|
60
|
+
if (this.promises[response.id]) {
|
|
61
|
+
console.log('[HTTP] Received response:', response);
|
|
62
|
+
if (
|
|
63
|
+
typeof response.data?.status === 'number' &&
|
|
64
|
+
response.data.status < 0
|
|
65
|
+
) {
|
|
66
|
+
this.promises[response.id].reject(new Error(response.data.message));
|
|
67
|
+
} else {
|
|
68
|
+
this.promises[response.id].resolve(response.data);
|
|
69
|
+
}
|
|
70
|
+
delete this.promises[response.id];
|
|
71
|
+
} else {
|
|
72
|
+
console.log('[HTTP] Received request:', response);
|
|
73
|
+
// TODO : Implement request handling
|
|
74
|
+
throw new Error('Not yet implemented');
|
|
75
|
+
}
|
|
76
|
+
} catch (error) {
|
|
77
|
+
console.error('[HTTP] Error parsing message:', error);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|