@itcase/ui-core 1.10.85 → 1.10.91
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/cjs/context/index.js +18 -3
- package/dist/cjs/hooks/index.js +15 -2
- package/dist/cjs/hooks/useAppearanceConfig/useAppearanceConfig.js +2 -1
- package/dist/cjs/hooks/useMediaQueries/useMediaQueries.js +109 -104
- package/dist/cjs/storybook/createAppearanceOptions/createAppearanceOptions.js +16 -0
- package/dist/cjs/storybook/createAppearanceOptions/index.js +7 -0
- package/dist/cjs/storybook/createComponentGallery/createComponentGallery.js +132 -0
- package/dist/cjs/storybook/createComponentGallery/index.js +7 -0
- package/dist/cjs/storybook/index.js +9 -0
- package/dist/context/index.js +11 -2
- package/dist/hooks/index.js +9 -2
- package/dist/hooks/useAppearanceConfig/useAppearanceConfig.js +2 -1
- package/dist/hooks/useMediaQueries/useMediaQueries.js +109 -104
- package/dist/storybook/createAppearanceOptions/createAppearanceOptions.js +14 -0
- package/dist/storybook/createAppearanceOptions/index.js +1 -0
- package/dist/storybook/createComponentGallery/createComponentGallery.js +130 -0
- package/dist/storybook/createComponentGallery/index.js +1 -0
- package/dist/storybook/index.js +2 -0
- package/dist/types/hooks/index.d.ts +1 -0
- package/dist/types/hooks/useAppearanceConfig/useAppearanceConfig.d.ts +2 -2
- package/dist/types/storybook/createAppearanceOptions/createAppearanceOptions.d.ts +5 -0
- package/dist/types/storybook/createAppearanceOptions/createAppearanceOptions.interface.d.ts +6 -0
- package/dist/types/storybook/createAppearanceOptions/index.d.ts +4 -0
- package/dist/types/storybook/createComponentGallery/createComponentGallery.d.ts +3 -0
- package/dist/types/storybook/createComponentGallery/createComponentGallery.interface.d.ts +59 -0
- package/dist/types/storybook/createComponentGallery/index.d.ts +4 -0
- package/dist/types/storybook/index.d.ts +6 -0
- package/package.json +9 -9
- package/dist/cjs/context/index2.js +0 -26
- package/dist/cjs/hooks/index2.js +0 -29
- package/dist/context/index2.js +0 -13
- package/dist/hooks/index2.js +0 -17
|
@@ -1,11 +1,26 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var Notifications = require('./Notifications/Notifications.js');
|
|
4
|
+
var UIProvider = require('./UIProvider/UIProvider.js');
|
|
5
|
+
var UrlAssetPrefix = require('./UrlAssetPrefix/UrlAssetPrefix.js');
|
|
3
6
|
var UserDeviceContext = require('./UserDeviceContext/UserDeviceContext.js');
|
|
4
|
-
var UIProviderApp = require('./UIProviderApp/UIProviderApp.js');
|
|
5
|
-
require('react');
|
|
6
7
|
require('react/jsx-runtime');
|
|
8
|
+
require('react');
|
|
9
|
+
require('uuid');
|
|
10
|
+
require('@itcase/common');
|
|
11
|
+
require('lodash-es/camelCase');
|
|
12
|
+
require('../hooks/useMediaQueries/useMediaQueries.js');
|
|
13
|
+
require('react-responsive');
|
|
14
|
+
require('../utils/setViewportProperty.js');
|
|
15
|
+
require('./UserDeviceContext/UserDeviceContext.helpers.js');
|
|
7
16
|
|
|
8
17
|
|
|
9
18
|
|
|
19
|
+
exports.NotificationsProvider = Notifications.NotificationsProvider;
|
|
20
|
+
exports.statusToAppearanceList = Notifications.statusToAppearanceList;
|
|
21
|
+
exports.useNotifications = Notifications.useNotifications;
|
|
22
|
+
exports.useNotificationsAPI = Notifications.useNotificationsAPI;
|
|
23
|
+
exports.UIProvider = UIProvider.UIProvider;
|
|
24
|
+
exports.UrlAssetPrefixContext = UrlAssetPrefix.UrlAssetPrefixContext;
|
|
25
|
+
exports.UrlAssetPrefixProvider = UrlAssetPrefix.UrlAssetPrefixProvider;
|
|
10
26
|
exports.useUserDeviceContext = UserDeviceContext.useUserDeviceContext;
|
|
11
|
-
exports.UIProviderApp = UIProviderApp.UIProviderApp;
|
package/dist/cjs/hooks/index.js
CHANGED
|
@@ -1,18 +1,31 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var useActiveClasses = require('./useActiveClasses/useActiveClasses.js');
|
|
3
4
|
var useAppearanceConfig = require('./useAppearanceConfig/useAppearanceConfig.js');
|
|
4
5
|
var useDevicePropsGenerator = require('./useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
6
|
+
var useDeviceTargetClass = require('./useDeviceTargetClass/useDeviceTargetClass.js');
|
|
7
|
+
var useMediaQueries = require('./useMediaQueries/useMediaQueries.js');
|
|
8
|
+
var styleAttributes = require('./useStyles/styleAttributes.js');
|
|
9
|
+
var styleAttributes_helpers = require('./useStyles/styleAttributes.helpers.js');
|
|
10
|
+
var useStyles = require('./useStyles/useStyles.js');
|
|
11
|
+
require('clsx');
|
|
12
|
+
require('./useActiveClasses/useActiveClasses.helpers.js');
|
|
5
13
|
require('react');
|
|
6
14
|
require('lodash-es/camelCase');
|
|
7
15
|
require('lodash-es/castArray');
|
|
8
16
|
require('lodash-es/upperFirst');
|
|
9
17
|
require('../context/UserDeviceContext/UserDeviceContext.js');
|
|
10
|
-
require('./useStyles/styleAttributes.js');
|
|
11
|
-
require('./useStyles/styleAttributes.helpers.js');
|
|
12
18
|
require('lodash-es/kebabCase');
|
|
13
19
|
require('lodash-es/maxBy');
|
|
20
|
+
require('react-responsive');
|
|
14
21
|
|
|
15
22
|
|
|
16
23
|
|
|
24
|
+
exports.useActiveClasses = useActiveClasses.useActiveClasses;
|
|
17
25
|
exports.useAppearanceConfig = useAppearanceConfig.useAppearanceConfig;
|
|
18
26
|
exports.useDevicePropsGenerator = useDevicePropsGenerator.useDevicePropsGenerator;
|
|
27
|
+
exports.useDeviceTargetClass = useDeviceTargetClass.useDeviceTargetClass;
|
|
28
|
+
exports.useMediaQueries = useMediaQueries.useMediaQueries;
|
|
29
|
+
exports.styleAttributes = styleAttributes.styleAttributes;
|
|
30
|
+
exports.getStyleAttributeKey = styleAttributes_helpers.getStyleAttributeKey;
|
|
31
|
+
exports.useStyles = useStyles.useStyles;
|
|
@@ -20,7 +20,8 @@ const useAppearanceConfig = (appearance, componentConfig, isDisabled) => {
|
|
|
20
20
|
}
|
|
21
21
|
if (isDisabled) {
|
|
22
22
|
return (componentConfig?.appearance?.disabled ||
|
|
23
|
-
componentConfig?.appearance?.disabledPrimary
|
|
23
|
+
componentConfig?.appearance?.disabledPrimary ||
|
|
24
|
+
{});
|
|
24
25
|
}
|
|
25
26
|
return {};
|
|
26
27
|
}, [appearance, componentConfig?.appearance, isDisabled]);
|
|
@@ -13,112 +13,117 @@ var mediaQueries = {
|
|
|
13
13
|
|
|
14
14
|
const isSSR = typeof window === 'undefined';
|
|
15
15
|
function withUserDeviceOverride(hasOverride, userValue, matchedValue) {
|
|
16
|
-
|
|
16
|
+
return hasOverride ? Boolean(userValue) : matchedValue;
|
|
17
17
|
}
|
|
18
18
|
function useMediaQueries(userDevice = {}) {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
//
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
19
|
+
const hasUserDeviceOverride = userDevice.isMobile === true ||
|
|
20
|
+
userDevice.isTablet === true ||
|
|
21
|
+
userDevice.isDesktop === true;
|
|
22
|
+
// const isWarning = useMediaQuery({ maxWidth: mediaQueries['mobile-tiny'] })
|
|
23
|
+
// prettier-ignore
|
|
24
|
+
const isMobile = withUserDeviceOverride(hasUserDeviceOverride, userDevice.isMobile, reactResponsive.useMediaQuery({
|
|
25
|
+
minWidth: mediaQueries['mobile-tiny'],
|
|
26
|
+
maxWidth: mediaQueries['tablet'],
|
|
27
|
+
}) ||
|
|
28
|
+
(isSSR && Boolean(userDevice.isMobile)));
|
|
29
|
+
// const isMobileTiny = useMediaQuery({
|
|
30
|
+
// minWidth: mediaQueries['mobile-tiny'],
|
|
31
|
+
// maxWidth: mediaQueries['mobile-small'],
|
|
32
|
+
// })
|
|
33
|
+
// const isMobileSmall = useMediaQuery({
|
|
34
|
+
// minWidth: mediaQueries['mobile-small'],
|
|
35
|
+
// maxWidth: mediaQueries['mobile-medium'],
|
|
36
|
+
// })
|
|
37
|
+
// const isMobileMedium = useMediaQuery({
|
|
38
|
+
// minWidth: mediaQueries['mobile-medium'],
|
|
39
|
+
// maxWidth: mediaQueries['mobile-normal'],
|
|
40
|
+
// })
|
|
41
|
+
// const isMobileNormal = useMediaQuery({
|
|
42
|
+
// minWidth: mediaQueries['mobile-normal'],
|
|
43
|
+
// maxWidth: mediaQueries['mobile-large'],
|
|
44
|
+
// })
|
|
45
|
+
// const isMobileStandart = useMediaQuery({
|
|
46
|
+
// minWidth: mediaQueries['mobile-large'],
|
|
47
|
+
// maxWidth: mediaQueries['mobile-extra-large'],
|
|
48
|
+
// })
|
|
49
|
+
// const isMobileLarge = useMediaQuery({
|
|
50
|
+
// minWidth: mediaQueries['mobile-extra-large'],
|
|
51
|
+
// maxWidth: mediaQueries['mobile-super-extra-large'],
|
|
52
|
+
// })
|
|
53
|
+
// const isMobileHuge = useMediaQuery({
|
|
54
|
+
// minWidth: mediaQueries['mobile-super-extra-large'],
|
|
55
|
+
// maxWidth: mediaQueries['tablet'],
|
|
56
|
+
// })
|
|
57
|
+
// prettier-ignore
|
|
58
|
+
const isTablet = withUserDeviceOverride(hasUserDeviceOverride, userDevice.isTablet, reactResponsive.useMediaQuery({
|
|
59
|
+
minWidth: mediaQueries['tablet'],
|
|
60
|
+
maxWidth: mediaQueries['desktop-small'],
|
|
61
|
+
}) ||
|
|
62
|
+
(isSSR && Boolean(userDevice.isTablet)));
|
|
63
|
+
// const isTabletSmall = useMediaQuery({
|
|
64
|
+
// minWidth: mediaQueries['tablet-small'],
|
|
65
|
+
// maxWidth: mediaQueries['tablet'],
|
|
66
|
+
// })
|
|
67
|
+
// const isTabletLarge = useMediaQuery({
|
|
68
|
+
// minWidth: mediaQueries['tablet'],
|
|
69
|
+
// maxWidth: mediaQueries['tablet-large'],
|
|
70
|
+
// })
|
|
71
|
+
// prettier-ignore
|
|
72
|
+
const isDesktop = withUserDeviceOverride(hasUserDeviceOverride, userDevice.isDesktop, reactResponsive.useMediaQuery({
|
|
73
|
+
minWidth: mediaQueries['desktop-small'],
|
|
74
|
+
maxWidth: mediaQueries['desktop-super-huge'],
|
|
75
|
+
}) ||
|
|
76
|
+
(isSSR && Boolean(userDevice.isDesktop)));
|
|
77
|
+
// const isDesktopSmall = useMediaQuery({
|
|
78
|
+
// minWidth: mediaQueries['desktop-small'],
|
|
79
|
+
// maxWidth: mediaQueries['desktop-medium'],
|
|
80
|
+
// })
|
|
81
|
+
// const isDesktopMedium = useMediaQuery({
|
|
82
|
+
// minWidth: mediaQueries['desktop-medium'],
|
|
83
|
+
// maxWidth: mediaQueries['desktop-normal'],
|
|
84
|
+
// })
|
|
85
|
+
// const isDesktopNormal = useMediaQuery({
|
|
86
|
+
// minWidth: mediaQueries['desktop-normal'],
|
|
87
|
+
// maxWidth: mediaQueries['desktop-large'],
|
|
88
|
+
// })
|
|
89
|
+
// const isDesktopStandart = useMediaQuery({
|
|
90
|
+
// minWidth: mediaQueries['desktop-large'],
|
|
91
|
+
// maxWidth: mediaQueries['desktop-extra-large'],
|
|
92
|
+
// })
|
|
93
|
+
// const isDesktopLarge = useMediaQuery({
|
|
94
|
+
// minWidth: mediaQueries['desktop-extra-large'],
|
|
95
|
+
// maxWidth: mediaQueries['desktop-super-extra-large'],
|
|
96
|
+
// })
|
|
97
|
+
// const isDesktopHuge = useMediaQuery({
|
|
98
|
+
// minWidth: mediaQueries['desktop-super-extra-large'],
|
|
99
|
+
// maxWidth: mediaQueries['desktop-huge'],
|
|
100
|
+
// })
|
|
101
|
+
const isDesktopMega = reactResponsive.useMediaQuery({
|
|
102
|
+
minWidth: mediaQueries['desktop-huge'],
|
|
103
|
+
});
|
|
104
|
+
const deviceTypes = React.useMemo(() => ({
|
|
105
|
+
// isWarning,
|
|
106
|
+
isMobile: isMobile,
|
|
107
|
+
// isMobileTiny,
|
|
108
|
+
// isMobileSmall,
|
|
109
|
+
// isMobileMedium,
|
|
110
|
+
// isMobileNormal,
|
|
111
|
+
// isMobileStandart,
|
|
112
|
+
// isMobileLarge,
|
|
113
|
+
isMobileHuge: isMobile,
|
|
114
|
+
isTablet: isTablet,
|
|
115
|
+
// isTabletSmall,
|
|
116
|
+
// isTabletLarge,
|
|
117
|
+
isDesktop: isDesktop,
|
|
118
|
+
// isDesktopSmall,
|
|
119
|
+
// isDesktopMedium,
|
|
120
|
+
// isDesktopNormal,
|
|
121
|
+
// isDesktopStandart,
|
|
122
|
+
// isDesktopLarge,
|
|
123
|
+
// isDesktopHuge,
|
|
124
|
+
isDesktopMega: isDesktopMega,
|
|
125
|
+
}), [isMobile, isTablet, isDesktop, isDesktopMega]);
|
|
126
|
+
return deviceTypes;
|
|
122
127
|
}
|
|
123
128
|
|
|
124
129
|
exports.useMediaQueries = useMediaQueries;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const createAppearanceOptions = (appearanceMap, appearanceSourceMap) => {
|
|
4
|
+
const excludedAppearanceKeys = new Set(Object.values(appearanceSourceMap).flatMap((appearanceGroupSource) => Object.keys(appearanceGroupSource)));
|
|
5
|
+
const optionsMap = {
|
|
6
|
+
appearance: Object.keys(appearanceMap).filter((key) => !excludedAppearanceKeys.has(key)),
|
|
7
|
+
...Object.fromEntries(Object.entries(appearanceSourceMap).map(([variantName, appearanceGroupSource]) => [
|
|
8
|
+
variantName,
|
|
9
|
+
Object.keys(appearanceGroupSource),
|
|
10
|
+
])),
|
|
11
|
+
};
|
|
12
|
+
const getAppearanceOptions = (optionName) => optionsMap[optionName];
|
|
13
|
+
return { getAppearanceOptions };
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
exports.createAppearanceOptions = createAppearanceOptions;
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const DEFAULT_TIER_ORDER = [
|
|
4
|
+
'Primary',
|
|
5
|
+
'Secondary',
|
|
6
|
+
'Tertiary',
|
|
7
|
+
'Quaternary',
|
|
8
|
+
'MutedPrimary',
|
|
9
|
+
'MutedSecondary',
|
|
10
|
+
'MutedTertiary',
|
|
11
|
+
'MutedQuaternary',
|
|
12
|
+
];
|
|
13
|
+
const sortByOrder = (keys, order) => [...keys].sort((left, right) => {
|
|
14
|
+
const leftIndex = order.indexOf(left);
|
|
15
|
+
const rightIndex = order.indexOf(right);
|
|
16
|
+
if (leftIndex === -1 && rightIndex === -1) {
|
|
17
|
+
return left.localeCompare(right);
|
|
18
|
+
}
|
|
19
|
+
if (leftIndex === -1) {
|
|
20
|
+
return 1;
|
|
21
|
+
}
|
|
22
|
+
if (rightIndex === -1) {
|
|
23
|
+
return -1;
|
|
24
|
+
}
|
|
25
|
+
return leftIndex - rightIndex;
|
|
26
|
+
});
|
|
27
|
+
const matchAppearanceGroup = (appearance, appearanceList) => {
|
|
28
|
+
if (appearanceList.includes(appearance)) {
|
|
29
|
+
return appearance;
|
|
30
|
+
}
|
|
31
|
+
const matchedGroup = [...appearanceList]
|
|
32
|
+
.sort((left, right) => right.length - left.length)
|
|
33
|
+
.find((group) => appearance === group ||
|
|
34
|
+
appearance.startsWith(`${group} `) ||
|
|
35
|
+
appearance.startsWith(group));
|
|
36
|
+
return matchedGroup ?? appearance.split(' ')[0] ?? appearance;
|
|
37
|
+
};
|
|
38
|
+
const resolveTierForAppearance = (tier, tiersForAppearance) => {
|
|
39
|
+
if (tiersForAppearance.includes(tier)) {
|
|
40
|
+
return tier;
|
|
41
|
+
}
|
|
42
|
+
return tiersForAppearance[0] ?? tier;
|
|
43
|
+
};
|
|
44
|
+
const createComponentGallery = ({ size, src, appearanceGroups, appearanceOrder, shape, sizeOrder, style, tierOrder = DEFAULT_TIER_ORDER, }) => {
|
|
45
|
+
const appearanceList = appearanceOrder
|
|
46
|
+
? sortByOrder(Object.keys(appearanceGroups), appearanceOrder)
|
|
47
|
+
: Object.keys(appearanceGroups);
|
|
48
|
+
const tiersByAppearance = Object.fromEntries(Object.entries(appearanceGroups).map(([appearance, group]) => [
|
|
49
|
+
appearance,
|
|
50
|
+
sortByOrder(Object.keys(group).map((key) => key.slice(appearance.length)), tierOrder),
|
|
51
|
+
]));
|
|
52
|
+
const appearanceTierOptions = sortByOrder([...new Set(Object.values(tiersByAppearance).flat())], tierOrder);
|
|
53
|
+
const resolveAppearanceKey = (appearanceGroup, tier) => `${appearanceGroup}${tier}`;
|
|
54
|
+
const normalizeAppearanceGroup = (appearance) => matchAppearanceGroup(appearance, appearanceList);
|
|
55
|
+
const resolveTier = (appearance, tier) => {
|
|
56
|
+
const appearanceGroup = normalizeAppearanceGroup(appearance);
|
|
57
|
+
const tiersForAppearance = tiersByAppearance[appearanceGroup] ?? [];
|
|
58
|
+
return resolveTierForAppearance(tier, tiersForAppearance);
|
|
59
|
+
};
|
|
60
|
+
const sizeKeys = sortByOrder(Object.keys(size), sizeOrder ?? Object.keys(size));
|
|
61
|
+
const styleOptions = Object.keys(style);
|
|
62
|
+
const shapeOptions = Object.keys(shape);
|
|
63
|
+
const appearanceTypeOptions = appearanceList.flatMap((appearanceGroup) => (tiersByAppearance[appearanceGroup] ?? []).map((tierName) => resolveAppearanceKey(appearanceGroup, tierName)));
|
|
64
|
+
const argTypes = {
|
|
65
|
+
appearance: {
|
|
66
|
+
name: 'Appearance',
|
|
67
|
+
control: 'select',
|
|
68
|
+
options: appearanceList,
|
|
69
|
+
},
|
|
70
|
+
shape: {
|
|
71
|
+
name: 'Shape',
|
|
72
|
+
control: 'radio',
|
|
73
|
+
options: shapeOptions,
|
|
74
|
+
},
|
|
75
|
+
style: {
|
|
76
|
+
name: 'Style',
|
|
77
|
+
control: 'radio',
|
|
78
|
+
options: styleOptions,
|
|
79
|
+
},
|
|
80
|
+
tier: {
|
|
81
|
+
name: 'Tier',
|
|
82
|
+
control: 'select',
|
|
83
|
+
options: appearanceTierOptions,
|
|
84
|
+
},
|
|
85
|
+
...(src && {
|
|
86
|
+
src: {
|
|
87
|
+
control: 'select',
|
|
88
|
+
options: [...src],
|
|
89
|
+
},
|
|
90
|
+
}),
|
|
91
|
+
};
|
|
92
|
+
const resolved = {
|
|
93
|
+
normalizeAppearanceGroup,
|
|
94
|
+
resolveAppearanceKey,
|
|
95
|
+
resolveTier,
|
|
96
|
+
sizeKeys,
|
|
97
|
+
tiersByAppearance,
|
|
98
|
+
};
|
|
99
|
+
const itemsCount = appearanceList.reduce((count, appearanceGroup) => count +
|
|
100
|
+
(tiersByAppearance[appearanceGroup]?.length ?? 0) * sizeKeys.length, 0);
|
|
101
|
+
const getAppearanceOptions = (optionName) => {
|
|
102
|
+
switch (optionName) {
|
|
103
|
+
case 'appearanceType':
|
|
104
|
+
return appearanceTypeOptions;
|
|
105
|
+
case 'appearanceShape':
|
|
106
|
+
return shapeOptions;
|
|
107
|
+
case 'appearanceSize':
|
|
108
|
+
return sizeKeys;
|
|
109
|
+
case 'appearanceStyle':
|
|
110
|
+
return styleOptions;
|
|
111
|
+
default: {
|
|
112
|
+
const exhaustiveCheck = optionName;
|
|
113
|
+
return exhaustiveCheck;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
};
|
|
117
|
+
return {
|
|
118
|
+
appearanceList,
|
|
119
|
+
appearanceTierOptions,
|
|
120
|
+
appearanceTypeOptions,
|
|
121
|
+
argTypes,
|
|
122
|
+
itemsCount,
|
|
123
|
+
resolved,
|
|
124
|
+
shapeOptions,
|
|
125
|
+
sizeKeys,
|
|
126
|
+
styleOptions,
|
|
127
|
+
tiersByAppearance,
|
|
128
|
+
getAppearanceOptions,
|
|
129
|
+
};
|
|
130
|
+
};
|
|
131
|
+
|
|
132
|
+
exports.createComponentGallery = createComponentGallery;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var createAppearanceOptions = require('./createAppearanceOptions/createAppearanceOptions.js');
|
|
4
|
+
var createComponentGallery = require('./createComponentGallery/createComponentGallery.js');
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
exports.createAppearanceOptions = createAppearanceOptions.createAppearanceOptions;
|
|
9
|
+
exports.createComponentGallery = createComponentGallery.createComponentGallery;
|
package/dist/context/index.js
CHANGED
|
@@ -1,4 +1,13 @@
|
|
|
1
|
+
export { NotificationsProvider, statusToAppearanceList, useNotifications, useNotificationsAPI } from './Notifications/Notifications.js';
|
|
2
|
+
export { UIProvider } from './UIProvider/UIProvider.js';
|
|
3
|
+
export { UrlAssetPrefixContext, UrlAssetPrefixProvider } from './UrlAssetPrefix/UrlAssetPrefix.js';
|
|
1
4
|
export { useUserDeviceContext } from './UserDeviceContext/UserDeviceContext.js';
|
|
2
|
-
export { UIProviderApp } from './UIProviderApp/UIProviderApp.js';
|
|
3
|
-
import 'react';
|
|
4
5
|
import 'react/jsx-runtime';
|
|
6
|
+
import 'react';
|
|
7
|
+
import 'uuid';
|
|
8
|
+
import '@itcase/common';
|
|
9
|
+
import 'lodash-es/camelCase';
|
|
10
|
+
import '../hooks/useMediaQueries/useMediaQueries.js';
|
|
11
|
+
import 'react-responsive';
|
|
12
|
+
import '../utils/setViewportProperty.js';
|
|
13
|
+
import './UserDeviceContext/UserDeviceContext.helpers.js';
|
package/dist/hooks/index.js
CHANGED
|
@@ -1,11 +1,18 @@
|
|
|
1
|
+
export { useActiveClasses } from './useActiveClasses/useActiveClasses.js';
|
|
1
2
|
export { useAppearanceConfig } from './useAppearanceConfig/useAppearanceConfig.js';
|
|
2
3
|
export { useDevicePropsGenerator } from './useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
4
|
+
export { useDeviceTargetClass } from './useDeviceTargetClass/useDeviceTargetClass.js';
|
|
5
|
+
export { useMediaQueries } from './useMediaQueries/useMediaQueries.js';
|
|
6
|
+
export { styleAttributes } from './useStyles/styleAttributes.js';
|
|
7
|
+
export { getStyleAttributeKey } from './useStyles/styleAttributes.helpers.js';
|
|
8
|
+
export { useStyles } from './useStyles/useStyles.js';
|
|
9
|
+
import 'clsx';
|
|
10
|
+
import './useActiveClasses/useActiveClasses.helpers.js';
|
|
3
11
|
import 'react';
|
|
4
12
|
import 'lodash-es/camelCase';
|
|
5
13
|
import 'lodash-es/castArray';
|
|
6
14
|
import 'lodash-es/upperFirst';
|
|
7
15
|
import '../context/UserDeviceContext/UserDeviceContext.js';
|
|
8
|
-
import './useStyles/styleAttributes.js';
|
|
9
|
-
import './useStyles/styleAttributes.helpers.js';
|
|
10
16
|
import 'lodash-es/kebabCase';
|
|
11
17
|
import 'lodash-es/maxBy';
|
|
18
|
+
import 'react-responsive';
|
|
@@ -18,7 +18,8 @@ const useAppearanceConfig = (appearance, componentConfig, isDisabled) => {
|
|
|
18
18
|
}
|
|
19
19
|
if (isDisabled) {
|
|
20
20
|
return (componentConfig?.appearance?.disabled ||
|
|
21
|
-
componentConfig?.appearance?.disabledPrimary
|
|
21
|
+
componentConfig?.appearance?.disabledPrimary ||
|
|
22
|
+
{});
|
|
22
23
|
}
|
|
23
24
|
return {};
|
|
24
25
|
}, [appearance, componentConfig?.appearance, isDisabled]);
|
|
@@ -11,112 +11,117 @@ var mediaQueries = {
|
|
|
11
11
|
|
|
12
12
|
const isSSR = typeof window === 'undefined';
|
|
13
13
|
function withUserDeviceOverride(hasOverride, userValue, matchedValue) {
|
|
14
|
-
|
|
14
|
+
return hasOverride ? Boolean(userValue) : matchedValue;
|
|
15
15
|
}
|
|
16
16
|
function useMediaQueries(userDevice = {}) {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
//
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
17
|
+
const hasUserDeviceOverride = userDevice.isMobile === true ||
|
|
18
|
+
userDevice.isTablet === true ||
|
|
19
|
+
userDevice.isDesktop === true;
|
|
20
|
+
// const isWarning = useMediaQuery({ maxWidth: mediaQueries['mobile-tiny'] })
|
|
21
|
+
// prettier-ignore
|
|
22
|
+
const isMobile = withUserDeviceOverride(hasUserDeviceOverride, userDevice.isMobile, useMediaQuery({
|
|
23
|
+
minWidth: mediaQueries['mobile-tiny'],
|
|
24
|
+
maxWidth: mediaQueries['tablet'],
|
|
25
|
+
}) ||
|
|
26
|
+
(isSSR && Boolean(userDevice.isMobile)));
|
|
27
|
+
// const isMobileTiny = useMediaQuery({
|
|
28
|
+
// minWidth: mediaQueries['mobile-tiny'],
|
|
29
|
+
// maxWidth: mediaQueries['mobile-small'],
|
|
30
|
+
// })
|
|
31
|
+
// const isMobileSmall = useMediaQuery({
|
|
32
|
+
// minWidth: mediaQueries['mobile-small'],
|
|
33
|
+
// maxWidth: mediaQueries['mobile-medium'],
|
|
34
|
+
// })
|
|
35
|
+
// const isMobileMedium = useMediaQuery({
|
|
36
|
+
// minWidth: mediaQueries['mobile-medium'],
|
|
37
|
+
// maxWidth: mediaQueries['mobile-normal'],
|
|
38
|
+
// })
|
|
39
|
+
// const isMobileNormal = useMediaQuery({
|
|
40
|
+
// minWidth: mediaQueries['mobile-normal'],
|
|
41
|
+
// maxWidth: mediaQueries['mobile-large'],
|
|
42
|
+
// })
|
|
43
|
+
// const isMobileStandart = useMediaQuery({
|
|
44
|
+
// minWidth: mediaQueries['mobile-large'],
|
|
45
|
+
// maxWidth: mediaQueries['mobile-extra-large'],
|
|
46
|
+
// })
|
|
47
|
+
// const isMobileLarge = useMediaQuery({
|
|
48
|
+
// minWidth: mediaQueries['mobile-extra-large'],
|
|
49
|
+
// maxWidth: mediaQueries['mobile-super-extra-large'],
|
|
50
|
+
// })
|
|
51
|
+
// const isMobileHuge = useMediaQuery({
|
|
52
|
+
// minWidth: mediaQueries['mobile-super-extra-large'],
|
|
53
|
+
// maxWidth: mediaQueries['tablet'],
|
|
54
|
+
// })
|
|
55
|
+
// prettier-ignore
|
|
56
|
+
const isTablet = withUserDeviceOverride(hasUserDeviceOverride, userDevice.isTablet, useMediaQuery({
|
|
57
|
+
minWidth: mediaQueries['tablet'],
|
|
58
|
+
maxWidth: mediaQueries['desktop-small'],
|
|
59
|
+
}) ||
|
|
60
|
+
(isSSR && Boolean(userDevice.isTablet)));
|
|
61
|
+
// const isTabletSmall = useMediaQuery({
|
|
62
|
+
// minWidth: mediaQueries['tablet-small'],
|
|
63
|
+
// maxWidth: mediaQueries['tablet'],
|
|
64
|
+
// })
|
|
65
|
+
// const isTabletLarge = useMediaQuery({
|
|
66
|
+
// minWidth: mediaQueries['tablet'],
|
|
67
|
+
// maxWidth: mediaQueries['tablet-large'],
|
|
68
|
+
// })
|
|
69
|
+
// prettier-ignore
|
|
70
|
+
const isDesktop = withUserDeviceOverride(hasUserDeviceOverride, userDevice.isDesktop, useMediaQuery({
|
|
71
|
+
minWidth: mediaQueries['desktop-small'],
|
|
72
|
+
maxWidth: mediaQueries['desktop-super-huge'],
|
|
73
|
+
}) ||
|
|
74
|
+
(isSSR && Boolean(userDevice.isDesktop)));
|
|
75
|
+
// const isDesktopSmall = useMediaQuery({
|
|
76
|
+
// minWidth: mediaQueries['desktop-small'],
|
|
77
|
+
// maxWidth: mediaQueries['desktop-medium'],
|
|
78
|
+
// })
|
|
79
|
+
// const isDesktopMedium = useMediaQuery({
|
|
80
|
+
// minWidth: mediaQueries['desktop-medium'],
|
|
81
|
+
// maxWidth: mediaQueries['desktop-normal'],
|
|
82
|
+
// })
|
|
83
|
+
// const isDesktopNormal = useMediaQuery({
|
|
84
|
+
// minWidth: mediaQueries['desktop-normal'],
|
|
85
|
+
// maxWidth: mediaQueries['desktop-large'],
|
|
86
|
+
// })
|
|
87
|
+
// const isDesktopStandart = useMediaQuery({
|
|
88
|
+
// minWidth: mediaQueries['desktop-large'],
|
|
89
|
+
// maxWidth: mediaQueries['desktop-extra-large'],
|
|
90
|
+
// })
|
|
91
|
+
// const isDesktopLarge = useMediaQuery({
|
|
92
|
+
// minWidth: mediaQueries['desktop-extra-large'],
|
|
93
|
+
// maxWidth: mediaQueries['desktop-super-extra-large'],
|
|
94
|
+
// })
|
|
95
|
+
// const isDesktopHuge = useMediaQuery({
|
|
96
|
+
// minWidth: mediaQueries['desktop-super-extra-large'],
|
|
97
|
+
// maxWidth: mediaQueries['desktop-huge'],
|
|
98
|
+
// })
|
|
99
|
+
const isDesktopMega = useMediaQuery({
|
|
100
|
+
minWidth: mediaQueries['desktop-huge'],
|
|
101
|
+
});
|
|
102
|
+
const deviceTypes = useMemo(() => ({
|
|
103
|
+
// isWarning,
|
|
104
|
+
isMobile: isMobile,
|
|
105
|
+
// isMobileTiny,
|
|
106
|
+
// isMobileSmall,
|
|
107
|
+
// isMobileMedium,
|
|
108
|
+
// isMobileNormal,
|
|
109
|
+
// isMobileStandart,
|
|
110
|
+
// isMobileLarge,
|
|
111
|
+
isMobileHuge: isMobile,
|
|
112
|
+
isTablet: isTablet,
|
|
113
|
+
// isTabletSmall,
|
|
114
|
+
// isTabletLarge,
|
|
115
|
+
isDesktop: isDesktop,
|
|
116
|
+
// isDesktopSmall,
|
|
117
|
+
// isDesktopMedium,
|
|
118
|
+
// isDesktopNormal,
|
|
119
|
+
// isDesktopStandart,
|
|
120
|
+
// isDesktopLarge,
|
|
121
|
+
// isDesktopHuge,
|
|
122
|
+
isDesktopMega: isDesktopMega,
|
|
123
|
+
}), [isMobile, isTablet, isDesktop, isDesktopMega]);
|
|
124
|
+
return deviceTypes;
|
|
120
125
|
}
|
|
121
126
|
|
|
122
127
|
export { useMediaQueries };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
const createAppearanceOptions = (appearanceMap, appearanceSourceMap) => {
|
|
2
|
+
const excludedAppearanceKeys = new Set(Object.values(appearanceSourceMap).flatMap((appearanceGroupSource) => Object.keys(appearanceGroupSource)));
|
|
3
|
+
const optionsMap = {
|
|
4
|
+
appearance: Object.keys(appearanceMap).filter((key) => !excludedAppearanceKeys.has(key)),
|
|
5
|
+
...Object.fromEntries(Object.entries(appearanceSourceMap).map(([variantName, appearanceGroupSource]) => [
|
|
6
|
+
variantName,
|
|
7
|
+
Object.keys(appearanceGroupSource),
|
|
8
|
+
])),
|
|
9
|
+
};
|
|
10
|
+
const getAppearanceOptions = (optionName) => optionsMap[optionName];
|
|
11
|
+
return { getAppearanceOptions };
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export { createAppearanceOptions };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { createAppearanceOptions } from './createAppearanceOptions.js';
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
const DEFAULT_TIER_ORDER = [
|
|
2
|
+
'Primary',
|
|
3
|
+
'Secondary',
|
|
4
|
+
'Tertiary',
|
|
5
|
+
'Quaternary',
|
|
6
|
+
'MutedPrimary',
|
|
7
|
+
'MutedSecondary',
|
|
8
|
+
'MutedTertiary',
|
|
9
|
+
'MutedQuaternary',
|
|
10
|
+
];
|
|
11
|
+
const sortByOrder = (keys, order) => [...keys].sort((left, right) => {
|
|
12
|
+
const leftIndex = order.indexOf(left);
|
|
13
|
+
const rightIndex = order.indexOf(right);
|
|
14
|
+
if (leftIndex === -1 && rightIndex === -1) {
|
|
15
|
+
return left.localeCompare(right);
|
|
16
|
+
}
|
|
17
|
+
if (leftIndex === -1) {
|
|
18
|
+
return 1;
|
|
19
|
+
}
|
|
20
|
+
if (rightIndex === -1) {
|
|
21
|
+
return -1;
|
|
22
|
+
}
|
|
23
|
+
return leftIndex - rightIndex;
|
|
24
|
+
});
|
|
25
|
+
const matchAppearanceGroup = (appearance, appearanceList) => {
|
|
26
|
+
if (appearanceList.includes(appearance)) {
|
|
27
|
+
return appearance;
|
|
28
|
+
}
|
|
29
|
+
const matchedGroup = [...appearanceList]
|
|
30
|
+
.sort((left, right) => right.length - left.length)
|
|
31
|
+
.find((group) => appearance === group ||
|
|
32
|
+
appearance.startsWith(`${group} `) ||
|
|
33
|
+
appearance.startsWith(group));
|
|
34
|
+
return matchedGroup ?? appearance.split(' ')[0] ?? appearance;
|
|
35
|
+
};
|
|
36
|
+
const resolveTierForAppearance = (tier, tiersForAppearance) => {
|
|
37
|
+
if (tiersForAppearance.includes(tier)) {
|
|
38
|
+
return tier;
|
|
39
|
+
}
|
|
40
|
+
return tiersForAppearance[0] ?? tier;
|
|
41
|
+
};
|
|
42
|
+
const createComponentGallery = ({ size, src, appearanceGroups, appearanceOrder, shape, sizeOrder, style, tierOrder = DEFAULT_TIER_ORDER, }) => {
|
|
43
|
+
const appearanceList = appearanceOrder
|
|
44
|
+
? sortByOrder(Object.keys(appearanceGroups), appearanceOrder)
|
|
45
|
+
: Object.keys(appearanceGroups);
|
|
46
|
+
const tiersByAppearance = Object.fromEntries(Object.entries(appearanceGroups).map(([appearance, group]) => [
|
|
47
|
+
appearance,
|
|
48
|
+
sortByOrder(Object.keys(group).map((key) => key.slice(appearance.length)), tierOrder),
|
|
49
|
+
]));
|
|
50
|
+
const appearanceTierOptions = sortByOrder([...new Set(Object.values(tiersByAppearance).flat())], tierOrder);
|
|
51
|
+
const resolveAppearanceKey = (appearanceGroup, tier) => `${appearanceGroup}${tier}`;
|
|
52
|
+
const normalizeAppearanceGroup = (appearance) => matchAppearanceGroup(appearance, appearanceList);
|
|
53
|
+
const resolveTier = (appearance, tier) => {
|
|
54
|
+
const appearanceGroup = normalizeAppearanceGroup(appearance);
|
|
55
|
+
const tiersForAppearance = tiersByAppearance[appearanceGroup] ?? [];
|
|
56
|
+
return resolveTierForAppearance(tier, tiersForAppearance);
|
|
57
|
+
};
|
|
58
|
+
const sizeKeys = sortByOrder(Object.keys(size), sizeOrder ?? Object.keys(size));
|
|
59
|
+
const styleOptions = Object.keys(style);
|
|
60
|
+
const shapeOptions = Object.keys(shape);
|
|
61
|
+
const appearanceTypeOptions = appearanceList.flatMap((appearanceGroup) => (tiersByAppearance[appearanceGroup] ?? []).map((tierName) => resolveAppearanceKey(appearanceGroup, tierName)));
|
|
62
|
+
const argTypes = {
|
|
63
|
+
appearance: {
|
|
64
|
+
name: 'Appearance',
|
|
65
|
+
control: 'select',
|
|
66
|
+
options: appearanceList,
|
|
67
|
+
},
|
|
68
|
+
shape: {
|
|
69
|
+
name: 'Shape',
|
|
70
|
+
control: 'radio',
|
|
71
|
+
options: shapeOptions,
|
|
72
|
+
},
|
|
73
|
+
style: {
|
|
74
|
+
name: 'Style',
|
|
75
|
+
control: 'radio',
|
|
76
|
+
options: styleOptions,
|
|
77
|
+
},
|
|
78
|
+
tier: {
|
|
79
|
+
name: 'Tier',
|
|
80
|
+
control: 'select',
|
|
81
|
+
options: appearanceTierOptions,
|
|
82
|
+
},
|
|
83
|
+
...(src && {
|
|
84
|
+
src: {
|
|
85
|
+
control: 'select',
|
|
86
|
+
options: [...src],
|
|
87
|
+
},
|
|
88
|
+
}),
|
|
89
|
+
};
|
|
90
|
+
const resolved = {
|
|
91
|
+
normalizeAppearanceGroup,
|
|
92
|
+
resolveAppearanceKey,
|
|
93
|
+
resolveTier,
|
|
94
|
+
sizeKeys,
|
|
95
|
+
tiersByAppearance,
|
|
96
|
+
};
|
|
97
|
+
const itemsCount = appearanceList.reduce((count, appearanceGroup) => count +
|
|
98
|
+
(tiersByAppearance[appearanceGroup]?.length ?? 0) * sizeKeys.length, 0);
|
|
99
|
+
const getAppearanceOptions = (optionName) => {
|
|
100
|
+
switch (optionName) {
|
|
101
|
+
case 'appearanceType':
|
|
102
|
+
return appearanceTypeOptions;
|
|
103
|
+
case 'appearanceShape':
|
|
104
|
+
return shapeOptions;
|
|
105
|
+
case 'appearanceSize':
|
|
106
|
+
return sizeKeys;
|
|
107
|
+
case 'appearanceStyle':
|
|
108
|
+
return styleOptions;
|
|
109
|
+
default: {
|
|
110
|
+
const exhaustiveCheck = optionName;
|
|
111
|
+
return exhaustiveCheck;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
};
|
|
115
|
+
return {
|
|
116
|
+
appearanceList,
|
|
117
|
+
appearanceTierOptions,
|
|
118
|
+
appearanceTypeOptions,
|
|
119
|
+
argTypes,
|
|
120
|
+
itemsCount,
|
|
121
|
+
resolved,
|
|
122
|
+
shapeOptions,
|
|
123
|
+
sizeKeys,
|
|
124
|
+
styleOptions,
|
|
125
|
+
tiersByAppearance,
|
|
126
|
+
getAppearanceOptions,
|
|
127
|
+
};
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
export { createComponentGallery };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { createComponentGallery } from './createComponentGallery.js';
|
|
@@ -2,5 +2,6 @@ export type { DeviceBreakpoint, WithDeviceProps, WithDeviceVariants, } from '../
|
|
|
2
2
|
export * from './useActiveClasses';
|
|
3
3
|
export * from './useAppearanceConfig';
|
|
4
4
|
export * from './useDevicePropsGenerator';
|
|
5
|
+
export * from './useDeviceTargetClass';
|
|
5
6
|
export * from './useMediaQueries';
|
|
6
7
|
export * from './useStyles';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { AppearanceConfig } from '../useDevicePropsGenerator';
|
|
2
|
-
declare const useAppearanceConfig:
|
|
3
|
-
appearance?:
|
|
2
|
+
declare const useAppearanceConfig: (appearance: string | undefined, componentConfig: {
|
|
3
|
+
appearance?: Record<string, object | undefined>;
|
|
4
4
|
}, isDisabled?: boolean) => AppearanceConfig;
|
|
5
5
|
export { useAppearanceConfig };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { AppearanceOptionsByName, AppearanceOptionSourceMap, AppearanceOptionValueMap } from './createAppearanceOptions.interface';
|
|
2
|
+
declare const createAppearanceOptions: <Options extends AppearanceOptionValueMap>(appearanceMap: Record<string, unknown>, appearanceSourceMap: AppearanceOptionSourceMap) => {
|
|
3
|
+
getAppearanceOptions: <OptionName extends keyof Options>(optionName: OptionName) => AppearanceOptionsByName<Options>[OptionName];
|
|
4
|
+
};
|
|
5
|
+
export { createAppearanceOptions };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
type AppearanceOptionValueMap = Record<string, string>;
|
|
2
|
+
type AppearanceOptionSourceMap = Record<string, Record<string, unknown>>;
|
|
3
|
+
type AppearanceOptionsByName<Options extends AppearanceOptionValueMap> = {
|
|
4
|
+
[Key in keyof Options]: Options[Key][];
|
|
5
|
+
};
|
|
6
|
+
export type { AppearanceOptionsByName, AppearanceOptionSourceMap, AppearanceOptionValueMap, };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { createAppearanceOptions } from './createAppearanceOptions';
|
|
2
|
+
import type { AppearanceOptionsByName, AppearanceOptionSourceMap, AppearanceOptionValueMap } from './createAppearanceOptions.interface';
|
|
3
|
+
export { createAppearanceOptions };
|
|
4
|
+
export type { AppearanceOptionsByName, AppearanceOptionSourceMap, AppearanceOptionValueMap, };
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import type { ComponentGallery, ComponentGalleryOptions } from './createComponentGallery.interface';
|
|
2
|
+
declare const createComponentGallery: ({ size, src, appearanceGroups, appearanceOrder, shape, sizeOrder, style, tierOrder, }: ComponentGalleryOptions) => ComponentGallery;
|
|
3
|
+
export { createComponentGallery };
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
interface ComponentGalleryOptions {
|
|
2
|
+
appearanceGroups: Record<string, ComponentGalleryAppearanceGroup>;
|
|
3
|
+
appearanceOrder?: string[];
|
|
4
|
+
shape: Record<string, unknown>;
|
|
5
|
+
size: Record<string, unknown>;
|
|
6
|
+
sizeOrder?: string[];
|
|
7
|
+
src?: readonly string[];
|
|
8
|
+
style: Record<string, unknown>;
|
|
9
|
+
tierOrder?: string[];
|
|
10
|
+
}
|
|
11
|
+
type ComponentGalleryArgs = {
|
|
12
|
+
appearance: string;
|
|
13
|
+
shape: string;
|
|
14
|
+
style: string;
|
|
15
|
+
tier: string;
|
|
16
|
+
};
|
|
17
|
+
type ComponentGalleryResolved = {
|
|
18
|
+
normalizeAppearanceGroup: (appearance: string) => string;
|
|
19
|
+
resolveAppearanceKey: (appearanceGroup: string, tier: string) => string;
|
|
20
|
+
resolveTier: (appearance: string, tier: string) => string;
|
|
21
|
+
sizeKeys: string[];
|
|
22
|
+
tiersByAppearance: Record<string, string[]>;
|
|
23
|
+
};
|
|
24
|
+
type ComponentGalleryAppearanceGroup = Record<string, unknown>;
|
|
25
|
+
type ComponentGalleryRenderParams<Args extends ComponentGalleryArgs, Appearance extends string = string> = {
|
|
26
|
+
appearance: Appearance;
|
|
27
|
+
appearanceGroup: string;
|
|
28
|
+
appearanceKey: string;
|
|
29
|
+
args: Args;
|
|
30
|
+
sizeKey: string;
|
|
31
|
+
tier: string;
|
|
32
|
+
};
|
|
33
|
+
type ComponentGalleryAppearanceOptionName = 'appearanceShape' | 'appearanceSize' | 'appearanceStyle' | 'appearanceType';
|
|
34
|
+
type ComponentGalleryArgType = {
|
|
35
|
+
control: 'radio' | 'select';
|
|
36
|
+
name?: string;
|
|
37
|
+
options: string[];
|
|
38
|
+
};
|
|
39
|
+
type ComponentGalleryArgTypes = {
|
|
40
|
+
appearance: ComponentGalleryArgType;
|
|
41
|
+
shape: ComponentGalleryArgType;
|
|
42
|
+
src?: ComponentGalleryArgType;
|
|
43
|
+
style: ComponentGalleryArgType;
|
|
44
|
+
tier: ComponentGalleryArgType;
|
|
45
|
+
};
|
|
46
|
+
type ComponentGallery = {
|
|
47
|
+
appearanceList: string[];
|
|
48
|
+
appearanceTierOptions: string[];
|
|
49
|
+
appearanceTypeOptions: string[];
|
|
50
|
+
argTypes: ComponentGalleryArgTypes;
|
|
51
|
+
getAppearanceOptions: (optionName: ComponentGalleryAppearanceOptionName) => string[];
|
|
52
|
+
itemsCount: number;
|
|
53
|
+
resolved: ComponentGalleryResolved;
|
|
54
|
+
shapeOptions: string[];
|
|
55
|
+
sizeKeys: string[];
|
|
56
|
+
styleOptions: string[];
|
|
57
|
+
tiersByAppearance: Record<string, string[]>;
|
|
58
|
+
};
|
|
59
|
+
export type { ComponentGallery, ComponentGalleryAppearanceGroup, ComponentGalleryAppearanceOptionName, ComponentGalleryArgs, ComponentGalleryArgType, ComponentGalleryArgTypes, ComponentGalleryOptions, ComponentGalleryRenderParams, ComponentGalleryResolved, };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { createComponentGallery } from './createComponentGallery';
|
|
2
|
+
import type { ComponentGallery, ComponentGalleryAppearanceGroup, ComponentGalleryAppearanceOptionName, ComponentGalleryArgs, ComponentGalleryArgType, ComponentGalleryArgTypes, ComponentGalleryOptions, ComponentGalleryRenderParams, ComponentGalleryResolved } from './createComponentGallery.interface';
|
|
3
|
+
export { createComponentGallery };
|
|
4
|
+
export type { ComponentGallery, ComponentGalleryAppearanceGroup, ComponentGalleryAppearanceOptionName, ComponentGalleryArgs, ComponentGalleryArgType, ComponentGalleryArgTypes, ComponentGalleryOptions, ComponentGalleryRenderParams, ComponentGalleryResolved, };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { createAppearanceOptions } from './createAppearanceOptions';
|
|
2
|
+
import type { AppearanceOptionsByName, AppearanceOptionSourceMap, AppearanceOptionValueMap } from './createAppearanceOptions';
|
|
3
|
+
import { createComponentGallery } from './createComponentGallery';
|
|
4
|
+
import type { ComponentGallery, ComponentGalleryAppearanceGroup, ComponentGalleryAppearanceOptionName, ComponentGalleryArgs, ComponentGalleryArgType, ComponentGalleryArgTypes, ComponentGalleryOptions, ComponentGalleryRenderParams, ComponentGalleryResolved } from './createComponentGallery';
|
|
5
|
+
export { createAppearanceOptions, createComponentGallery };
|
|
6
|
+
export type { AppearanceOptionsByName, AppearanceOptionSourceMap, AppearanceOptionValueMap, ComponentGallery, ComponentGalleryAppearanceGroup, ComponentGalleryAppearanceOptionName, ComponentGalleryArgs, ComponentGalleryArgType, ComponentGalleryArgTypes, ComponentGalleryOptions, ComponentGalleryRenderParams, ComponentGalleryResolved, };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itcase/ui-core",
|
|
3
|
-
"version": "1.10.
|
|
3
|
+
"version": "1.10.91",
|
|
4
4
|
"description": "UI shared components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Modal",
|
|
@@ -56,6 +56,11 @@
|
|
|
56
56
|
"import": "./dist/hooks/useStylesReactNative/index.js",
|
|
57
57
|
"require": "./dist/cjs/hooks/useStylesReactNative/index.js"
|
|
58
58
|
},
|
|
59
|
+
"./storybook": {
|
|
60
|
+
"types": "./dist/types/storybook/index.d.ts",
|
|
61
|
+
"import": "./dist/storybook/index.js",
|
|
62
|
+
"require": "./dist/cjs/storybook/index.js"
|
|
63
|
+
},
|
|
59
64
|
"./utils": {
|
|
60
65
|
"types": "./dist/types/utils/index.d.ts",
|
|
61
66
|
"import": "./dist/utils/index.js",
|
|
@@ -113,12 +118,9 @@
|
|
|
113
118
|
}
|
|
114
119
|
},
|
|
115
120
|
"devDependencies": {
|
|
116
|
-
"@babel/core": "^8.0.1",
|
|
117
|
-
"@babel/preset-react": "^8.0.1",
|
|
118
121
|
"@itcase/types-core": "^1.1.74",
|
|
119
122
|
"@itcase/types-ui": "^1.1.98",
|
|
120
123
|
"@rollup/plugin-alias": "^6.0.0",
|
|
121
|
-
"@rollup/plugin-babel": "^7.1.0",
|
|
122
124
|
"@rollup/plugin-commonjs": "^29.0.3",
|
|
123
125
|
"@rollup/plugin-image": "^3.0.3",
|
|
124
126
|
"@rollup/plugin-json": "^6.1.0",
|
|
@@ -126,15 +128,13 @@
|
|
|
126
128
|
"@rollup/plugin-terser": "^1.0.0",
|
|
127
129
|
"@rollup/plugin-typescript": "^12.3.0",
|
|
128
130
|
"@types/lodash-es": "^4.17.12",
|
|
129
|
-
"@types/luxon": "^3.7.
|
|
131
|
+
"@types/luxon": "^3.7.5",
|
|
130
132
|
"@types/uuid": "^11.0.0",
|
|
131
|
-
"
|
|
132
|
-
"babel-plugin-inline-react-svg": "^2.0.2",
|
|
133
|
-
"rollup": "4.62.4",
|
|
133
|
+
"rollup": "4.63.0",
|
|
134
134
|
"rollup-plugin-copy": "^3.5.0",
|
|
135
135
|
"rollup-plugin-dts": "^6.5.1",
|
|
136
136
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
137
137
|
"rollup-preserve-directives": "^1.1.3"
|
|
138
138
|
},
|
|
139
|
-
"gitHead": "
|
|
139
|
+
"gitHead": "0c6b63619be073732f645fa1756d30112b29f5d4"
|
|
140
140
|
}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var Notifications = require('./Notifications/Notifications.js');
|
|
4
|
-
var UIProvider = require('./UIProvider/UIProvider.js');
|
|
5
|
-
var UrlAssetPrefix = require('./UrlAssetPrefix/UrlAssetPrefix.js');
|
|
6
|
-
var UserDeviceContext = require('./UserDeviceContext/UserDeviceContext.js');
|
|
7
|
-
require('react/jsx-runtime');
|
|
8
|
-
require('react');
|
|
9
|
-
require('uuid');
|
|
10
|
-
require('@itcase/common');
|
|
11
|
-
require('lodash-es/camelCase');
|
|
12
|
-
require('../hooks/useMediaQueries/useMediaQueries.js');
|
|
13
|
-
require('react-responsive');
|
|
14
|
-
require('../utils/setViewportProperty.js');
|
|
15
|
-
require('./UserDeviceContext/UserDeviceContext.helpers.js');
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
exports.NotificationsProvider = Notifications.NotificationsProvider;
|
|
20
|
-
exports.statusToAppearanceList = Notifications.statusToAppearanceList;
|
|
21
|
-
exports.useNotifications = Notifications.useNotifications;
|
|
22
|
-
exports.useNotificationsAPI = Notifications.useNotificationsAPI;
|
|
23
|
-
exports.UIProvider = UIProvider.UIProvider;
|
|
24
|
-
exports.UrlAssetPrefixContext = UrlAssetPrefix.UrlAssetPrefixContext;
|
|
25
|
-
exports.UrlAssetPrefixProvider = UrlAssetPrefix.UrlAssetPrefixProvider;
|
|
26
|
-
exports.useUserDeviceContext = UserDeviceContext.useUserDeviceContext;
|
package/dist/cjs/hooks/index2.js
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var useActiveClasses = require('./useActiveClasses/useActiveClasses.js');
|
|
4
|
-
var useAppearanceConfig = require('./useAppearanceConfig/useAppearanceConfig.js');
|
|
5
|
-
var useDevicePropsGenerator = require('./useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
6
|
-
var useMediaQueries = require('./useMediaQueries/useMediaQueries.js');
|
|
7
|
-
var styleAttributes = require('./useStyles/styleAttributes.js');
|
|
8
|
-
var styleAttributes_helpers = require('./useStyles/styleAttributes.helpers.js');
|
|
9
|
-
var useStyles = require('./useStyles/useStyles.js');
|
|
10
|
-
require('clsx');
|
|
11
|
-
require('./useActiveClasses/useActiveClasses.helpers.js');
|
|
12
|
-
require('react');
|
|
13
|
-
require('lodash-es/camelCase');
|
|
14
|
-
require('lodash-es/castArray');
|
|
15
|
-
require('lodash-es/upperFirst');
|
|
16
|
-
require('../context/UserDeviceContext/UserDeviceContext.js');
|
|
17
|
-
require('lodash-es/kebabCase');
|
|
18
|
-
require('lodash-es/maxBy');
|
|
19
|
-
require('react-responsive');
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
exports.useActiveClasses = useActiveClasses.useActiveClasses;
|
|
24
|
-
exports.useAppearanceConfig = useAppearanceConfig.useAppearanceConfig;
|
|
25
|
-
exports.useDevicePropsGenerator = useDevicePropsGenerator.useDevicePropsGenerator;
|
|
26
|
-
exports.useMediaQueries = useMediaQueries.useMediaQueries;
|
|
27
|
-
exports.styleAttributes = styleAttributes.styleAttributes;
|
|
28
|
-
exports.getStyleAttributeKey = styleAttributes_helpers.getStyleAttributeKey;
|
|
29
|
-
exports.useStyles = useStyles.useStyles;
|
package/dist/context/index2.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export { NotificationsProvider, statusToAppearanceList, useNotifications, useNotificationsAPI } from './Notifications/Notifications.js';
|
|
2
|
-
export { UIProvider } from './UIProvider/UIProvider.js';
|
|
3
|
-
export { UrlAssetPrefixContext, UrlAssetPrefixProvider } from './UrlAssetPrefix/UrlAssetPrefix.js';
|
|
4
|
-
export { useUserDeviceContext } from './UserDeviceContext/UserDeviceContext.js';
|
|
5
|
-
import 'react/jsx-runtime';
|
|
6
|
-
import 'react';
|
|
7
|
-
import 'uuid';
|
|
8
|
-
import '@itcase/common';
|
|
9
|
-
import 'lodash-es/camelCase';
|
|
10
|
-
import '../hooks/useMediaQueries/useMediaQueries.js';
|
|
11
|
-
import 'react-responsive';
|
|
12
|
-
import '../utils/setViewportProperty.js';
|
|
13
|
-
import './UserDeviceContext/UserDeviceContext.helpers.js';
|
package/dist/hooks/index2.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
export { useActiveClasses } from './useActiveClasses/useActiveClasses.js';
|
|
2
|
-
export { useAppearanceConfig } from './useAppearanceConfig/useAppearanceConfig.js';
|
|
3
|
-
export { useDevicePropsGenerator } from './useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
4
|
-
export { useMediaQueries } from './useMediaQueries/useMediaQueries.js';
|
|
5
|
-
export { styleAttributes } from './useStyles/styleAttributes.js';
|
|
6
|
-
export { getStyleAttributeKey } from './useStyles/styleAttributes.helpers.js';
|
|
7
|
-
export { useStyles } from './useStyles/useStyles.js';
|
|
8
|
-
import 'clsx';
|
|
9
|
-
import './useActiveClasses/useActiveClasses.helpers.js';
|
|
10
|
-
import 'react';
|
|
11
|
-
import 'lodash-es/camelCase';
|
|
12
|
-
import 'lodash-es/castArray';
|
|
13
|
-
import 'lodash-es/upperFirst';
|
|
14
|
-
import '../context/UserDeviceContext/UserDeviceContext.js';
|
|
15
|
-
import 'lodash-es/kebabCase';
|
|
16
|
-
import 'lodash-es/maxBy';
|
|
17
|
-
import 'react-responsive';
|