@ctlyst.id/internal-ui 2.1.3 → 2.1.4
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/components/navigation/__stories__/navigation.stories.d.ts +1 -0
- package/dist/components/navigation/components/navigation-bar.d.ts +12 -0
- package/dist/components/navigation/index.d.ts +2 -0
- package/dist/components/navigation/types.d.ts +16 -0
- package/dist/config/theme/components/loader.d.ts +1 -1
- package/dist/internal-ui.cjs.development.js +119 -23
- package/dist/internal-ui.cjs.development.js.map +1 -1
- package/dist/internal-ui.cjs.production.min.js +4 -4
- package/dist/internal-ui.cjs.production.min.js.map +1 -1
- package/dist/internal-ui.esm.js +108 -13
- package/dist/internal-ui.esm.js.map +1 -1
- package/package.json +2 -2
@@ -0,0 +1,12 @@
|
|
1
|
+
import type { BoxProps } from '@chakra-ui/react';
|
2
|
+
import React from 'react';
|
3
|
+
import type { Menu } from '../types';
|
4
|
+
export declare type NavigationBarProps = BoxProps & {
|
5
|
+
navigations?: Menu[];
|
6
|
+
isFetched: boolean;
|
7
|
+
pathname: string;
|
8
|
+
asPath: string;
|
9
|
+
mappingIcon: Map<string, JSX.Element>;
|
10
|
+
};
|
11
|
+
declare const NavigationBar: React.FC<NavigationBarProps>;
|
12
|
+
export default NavigationBar;
|
@@ -6,3 +6,19 @@ export declare type NavigationLink = {
|
|
6
6
|
navHost?: string;
|
7
7
|
children?: Omit<NavigationLink, 'children'>[];
|
8
8
|
};
|
9
|
+
export declare type Menu = {
|
10
|
+
id: string;
|
11
|
+
title: string;
|
12
|
+
type: string;
|
13
|
+
icon: string;
|
14
|
+
navLink: string;
|
15
|
+
children: SubMenu[];
|
16
|
+
};
|
17
|
+
export declare type SubMenu = {
|
18
|
+
type: string;
|
19
|
+
icon: string;
|
20
|
+
navLink: string;
|
21
|
+
navHost: string;
|
22
|
+
title: string;
|
23
|
+
id: string;
|
24
|
+
};
|
@@ -77,7 +77,7 @@ declare const LoaderStyle: {
|
|
77
77
|
[key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
|
78
78
|
} | undefined;
|
79
79
|
defaultProps?: {
|
80
|
-
size?: "
|
80
|
+
size?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | undefined;
|
81
81
|
variant?: string | number | undefined;
|
82
82
|
colorScheme?: string | undefined;
|
83
83
|
} | undefined;
|
@@ -9,7 +9,7 @@ var system = require('@chakra-ui/system');
|
|
9
9
|
var React = require('react');
|
10
10
|
var React__default = _interopDefault(React);
|
11
11
|
var reactContext = require('@chakra-ui/react-context');
|
12
|
-
var
|
12
|
+
var Icon = require('@ctlyst.id/internal-icon');
|
13
13
|
var utils = require('@chakra-ui/utils');
|
14
14
|
var react = require('@chakra-ui/react');
|
15
15
|
var fi = require('react-icons/fi');
|
@@ -31,19 +31,19 @@ var axios = _interopDefault(require('axios'));
|
|
31
31
|
|
32
32
|
/* eslint-disable react/require-default-props */
|
33
33
|
function CheckIcon() {
|
34
|
-
return /*#__PURE__*/React__default.createElement(
|
34
|
+
return /*#__PURE__*/React__default.createElement(Icon.CheckCircle, {
|
35
35
|
color: "inherit",
|
36
36
|
size: 4
|
37
37
|
});
|
38
38
|
}
|
39
39
|
function InfoIcon() {
|
40
|
-
return /*#__PURE__*/React__default.createElement(
|
40
|
+
return /*#__PURE__*/React__default.createElement(Icon.Info, {
|
41
41
|
color: "inherit",
|
42
42
|
size: 4
|
43
43
|
});
|
44
44
|
}
|
45
45
|
function WarningIcon() {
|
46
|
-
return /*#__PURE__*/React__default.createElement(
|
46
|
+
return /*#__PURE__*/React__default.createElement(Icon.AlertTriangle, {
|
47
47
|
color: "inherit",
|
48
48
|
size: 4
|
49
49
|
});
|
@@ -199,7 +199,7 @@ function AlertClose({
|
|
199
199
|
}, rest, {
|
200
200
|
className: sharedUtils.cx('chakra-alert__close', className),
|
201
201
|
__css: css
|
202
|
-
}), children || /*#__PURE__*/React__default.createElement(
|
202
|
+
}), children || /*#__PURE__*/React__default.createElement(Icon.Close, {
|
203
203
|
color: "inherit",
|
204
204
|
size: 4
|
205
205
|
}));
|
@@ -561,7 +561,7 @@ const Chips = ({
|
|
561
561
|
display: "flex",
|
562
562
|
alignItems: "center",
|
563
563
|
justifyContent: "center"
|
564
|
-
}, /*#__PURE__*/React__default.createElement(
|
564
|
+
}, /*#__PURE__*/React__default.createElement(Icon.Close, {
|
565
565
|
color: closeColor,
|
566
566
|
size: 4
|
567
567
|
})));
|
@@ -771,7 +771,7 @@ const getWrapperStyle = props => {
|
|
771
771
|
const style = {
|
772
772
|
border: '1px solid',
|
773
773
|
borderColor: outlineColor,
|
774
|
-
borderRadius: '
|
774
|
+
borderRadius: 'sm',
|
775
775
|
transition: 'all 0.15s',
|
776
776
|
boxShadow: 'none',
|
777
777
|
_focusWithin: {
|
@@ -1869,7 +1869,7 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
1869
1869
|
__css: wrapperStyle
|
1870
1870
|
}, /*#__PURE__*/React__default.createElement(react.InputGroup, {
|
1871
1871
|
size: size,
|
1872
|
-
borderRadius: "
|
1872
|
+
borderRadius: "sm",
|
1873
1873
|
backgroundColor: isDisabled ? 'neutral.300' : 'white.high',
|
1874
1874
|
cursor: isDisabled ? 'not-allowed' : 'default'
|
1875
1875
|
}, addOnLeft, /*#__PURE__*/React__default.createElement(react.Input, Object.assign({
|
@@ -1892,7 +1892,7 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
1892
1892
|
justifyContent: "center",
|
1893
1893
|
onClick: !isDisabled ? onClear : undefined,
|
1894
1894
|
cursor: isDisabled ? 'not-allowed' : 'pointer'
|
1895
|
-
}, /*#__PURE__*/React__default.createElement(
|
1895
|
+
}, /*#__PURE__*/React__default.createElement(Icon.Close, {
|
1896
1896
|
size: 4,
|
1897
1897
|
color: iconColor
|
1898
1898
|
})), type === 'password' && !isShowPassword && !isLoading && /*#__PURE__*/React__default.createElement(react.Box, {
|
@@ -1903,7 +1903,7 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
1903
1903
|
cursor: isDisabled ? 'not-allowed' : 'pointer',
|
1904
1904
|
display: "flex",
|
1905
1905
|
justifyContent: "center"
|
1906
|
-
}, /*#__PURE__*/React__default.createElement(
|
1906
|
+
}, /*#__PURE__*/React__default.createElement(Icon.EyeOff, {
|
1907
1907
|
size: 4,
|
1908
1908
|
color: iconColor
|
1909
1909
|
})), type === 'password' && isShowPassword && !isLoading && /*#__PURE__*/React__default.createElement(react.Box, {
|
@@ -1914,7 +1914,7 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
1914
1914
|
cursor: isDisabled ? 'not-allowed' : 'pointer',
|
1915
1915
|
display: "flex",
|
1916
1916
|
justifyContent: "center"
|
1917
|
-
}, /*#__PURE__*/React__default.createElement(
|
1917
|
+
}, /*#__PURE__*/React__default.createElement(Icon.Eye, {
|
1918
1918
|
size: 4,
|
1919
1919
|
color: iconColor
|
1920
1920
|
})), isLoading && /*#__PURE__*/React__default.createElement(Loader, {
|
@@ -2224,7 +2224,7 @@ const ModalFooter = /*#__PURE__*/React.forwardRef(({
|
|
2224
2224
|
return /*#__PURE__*/React__default.createElement(react.ModalFooter, Object.assign({
|
2225
2225
|
ref: ref,
|
2226
2226
|
background: react.useColorModeValue('neutral.200', 'mirage.900'),
|
2227
|
-
borderBottomRadius: "
|
2227
|
+
borderBottomRadius: "sm"
|
2228
2228
|
}, rest), children);
|
2229
2229
|
});
|
2230
2230
|
|
@@ -2235,7 +2235,7 @@ const ModalHeader = /*#__PURE__*/React.forwardRef(({
|
|
2235
2235
|
return /*#__PURE__*/React__default.createElement(react.ModalHeader, Object.assign({
|
2236
2236
|
ref: ref,
|
2237
2237
|
background: react.useColorModeValue('neutral.200', 'mirage.900'),
|
2238
|
-
borderTopRadius: "
|
2238
|
+
borderTopRadius: "sm",
|
2239
2239
|
textStyle: "text-lg"
|
2240
2240
|
}, rest), children);
|
2241
2241
|
});
|
@@ -2379,6 +2379,101 @@ Navigation.defaultProps = {
|
|
2379
2379
|
host: undefined
|
2380
2380
|
};
|
2381
2381
|
|
2382
|
+
const NavigationBar = ({
|
2383
|
+
navigations,
|
2384
|
+
isFetched,
|
2385
|
+
pathname,
|
2386
|
+
asPath,
|
2387
|
+
mappingIcon,
|
2388
|
+
...props
|
2389
|
+
}) => {
|
2390
|
+
const urlMenu = subMenu => {
|
2391
|
+
if (window.location.hostname === 'localhost') {
|
2392
|
+
return subMenu.navLink;
|
2393
|
+
}
|
2394
|
+
return subMenu.navHost + subMenu.navLink;
|
2395
|
+
};
|
2396
|
+
return /*#__PURE__*/React__default.createElement(react.Box, Object.assign({
|
2397
|
+
hidden: isFetched && navigations === undefined,
|
2398
|
+
backgroundRepeat: "repeat-x",
|
2399
|
+
"data-test-id": "CT_component_navigation_cms"
|
2400
|
+
}, props), /*#__PURE__*/React__default.createElement(react.Flex, {
|
2401
|
+
bg: "white",
|
2402
|
+
w: "full",
|
2403
|
+
rounded: 'md',
|
2404
|
+
flexWrap: "wrap",
|
2405
|
+
alignItems: "center",
|
2406
|
+
shadow: "raised",
|
2407
|
+
gap: 1,
|
2408
|
+
px: 4,
|
2409
|
+
py: 2
|
2410
|
+
}, navigations === null || navigations === void 0 ? void 0 : navigations.map(item => {
|
2411
|
+
var _childMenu$;
|
2412
|
+
const childMenu = item.children.filter(subMenu => asPath === null || asPath === void 0 ? void 0 : asPath.includes(subMenu.navLink));
|
2413
|
+
const isActive = pathname === null || pathname === void 0 ? void 0 : pathname.startsWith((_childMenu$ = childMenu[0]) === null || _childMenu$ === void 0 ? void 0 : _childMenu$.navLink);
|
2414
|
+
const activeBg = isActive ? 'primary.500' : undefined;
|
2415
|
+
return /*#__PURE__*/React__default.createElement(react.Popover, {
|
2416
|
+
isLazy: true,
|
2417
|
+
key: item.id,
|
2418
|
+
trigger: "hover",
|
2419
|
+
placement: "bottom-start",
|
2420
|
+
openDelay: 100,
|
2421
|
+
closeDelay: 100
|
2422
|
+
}, ({
|
2423
|
+
isOpen,
|
2424
|
+
onClose
|
2425
|
+
}) => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(react.PopoverTrigger, null, /*#__PURE__*/React__default.createElement(react.Button, {
|
2426
|
+
h: 7.5,
|
2427
|
+
p: 2,
|
2428
|
+
size: "sm",
|
2429
|
+
variant: "ghost",
|
2430
|
+
"data-test-id": `CT_component_navigation_button-${item.title}${isActive ? '-active' : ''}`,
|
2431
|
+
_hover: {
|
2432
|
+
backgroundColor: !isActive ? 'neutral.400' : activeBg
|
2433
|
+
},
|
2434
|
+
backgroundColor: isOpen && !isActive ? 'neutral.400' : activeBg,
|
2435
|
+
color: isActive ? 'primary.50' : 'black.high',
|
2436
|
+
leftIcon: mappingIcon.get(item.title),
|
2437
|
+
rightIcon: /*#__PURE__*/React__default.createElement(Icon.ChevronDown, {
|
2438
|
+
size: 4,
|
2439
|
+
color: "inherit"
|
2440
|
+
})
|
2441
|
+
}, item.title)), item.children && /*#__PURE__*/React__default.createElement(react.PopoverContent, {
|
2442
|
+
border: "none",
|
2443
|
+
shadow: "raised",
|
2444
|
+
py: 1,
|
2445
|
+
width: 240
|
2446
|
+
}, item.children.map(subMenu => /*#__PURE__*/React__default.createElement(react.Link, {
|
2447
|
+
key: subMenu.id,
|
2448
|
+
href: urlMenu(subMenu),
|
2449
|
+
display: "flex",
|
2450
|
+
alignItems: "center",
|
2451
|
+
transition: "padding 0.35s ease 0s",
|
2452
|
+
_hover: {
|
2453
|
+
pl: 6
|
2454
|
+
},
|
2455
|
+
_first: {
|
2456
|
+
borderTopRadius: 'md'
|
2457
|
+
},
|
2458
|
+
_last: {
|
2459
|
+
borderBottomRadius: 'md'
|
2460
|
+
},
|
2461
|
+
py: 3,
|
2462
|
+
px: 4,
|
2463
|
+
color: pathname !== null && pathname !== void 0 && pathname.startsWith(subMenu.navLink) ? 'primary.800' : 'black.high',
|
2464
|
+
onClick: onClose,
|
2465
|
+
background: pathname !== null && pathname !== void 0 && pathname.startsWith(subMenu.navLink) ? 'primary.50' : 'transparent',
|
2466
|
+
"data-test-id": `CT_component_navigation_link-${item.id}`
|
2467
|
+
}, mappingIcon.get(item.title), /*#__PURE__*/React__default.createElement(react.Text, {
|
2468
|
+
textStyle: "text-sm",
|
2469
|
+
ml: 3
|
2470
|
+
}, subMenu.title))))));
|
2471
|
+
})));
|
2472
|
+
};
|
2473
|
+
NavigationBar.defaultProps = {
|
2474
|
+
navigations: undefined
|
2475
|
+
};
|
2476
|
+
|
2382
2477
|
const PaginationButton = /*#__PURE__*/react.forwardRef(({
|
2383
2478
|
className,
|
2384
2479
|
style,
|
@@ -2674,7 +2769,7 @@ const Rating = ({
|
|
2674
2769
|
return /*#__PURE__*/React__default.createElement(react.Grid, {
|
2675
2770
|
gap: '4px',
|
2676
2771
|
display: "flex"
|
2677
|
-
}, [...Array(5)].map((_, i) => /*#__PURE__*/React__default.createElement(
|
2772
|
+
}, [...Array(5)].map((_, i) => /*#__PURE__*/React__default.createElement(Icon.Rating, {
|
2678
2773
|
color: i < value ? '#FFA230' : '#E0E0E0',
|
2679
2774
|
size: 24
|
2680
2775
|
})));
|
@@ -3137,10 +3232,10 @@ const Switch = /*#__PURE__*/react.forwardRef(function Switch(props, ref) {
|
|
3137
3232
|
top: "50%",
|
3138
3233
|
left: "50%",
|
3139
3234
|
transform: "translate(-50%, -50%)"
|
3140
|
-
}, /*#__PURE__*/React__default.createElement(
|
3235
|
+
}, /*#__PURE__*/React__default.createElement(Icon.Check, {
|
3141
3236
|
color: "white",
|
3142
3237
|
size: getIconSize(props.size)
|
3143
|
-
}), /*#__PURE__*/React__default.createElement(
|
3238
|
+
}), /*#__PURE__*/React__default.createElement(Icon.Close, {
|
3144
3239
|
color: state.isDisabled ? 'neutral.600' : 'neutral.900',
|
3145
3240
|
size: getIconSize(props.size)
|
3146
3241
|
})), /*#__PURE__*/React__default.createElement(react.chakra.span, {
|
@@ -3317,7 +3412,7 @@ const baseStyle = /*#__PURE__*/definePartsStyle({
|
|
3317
3412
|
bg: $bg.reference,
|
3318
3413
|
px: '4',
|
3319
3414
|
py: '2',
|
3320
|
-
borderRadius: '
|
3415
|
+
borderRadius: 'sm'
|
3321
3416
|
},
|
3322
3417
|
title: {
|
3323
3418
|
fontWeight: 'regular',
|
@@ -3481,7 +3576,7 @@ const Button$1 = /*#__PURE__*/styledSystem.defineStyleConfig({
|
|
3481
3576
|
fontWeight: 'normal',
|
3482
3577
|
px: 4,
|
3483
3578
|
py: 2.5,
|
3484
|
-
borderRadius: '
|
3579
|
+
borderRadius: 'sm',
|
3485
3580
|
_disabled: {
|
3486
3581
|
opacity: 1,
|
3487
3582
|
bg: 'neutral.300',
|
@@ -3744,7 +3839,7 @@ const CardStyle = /*#__PURE__*/styledSystem.defineStyleConfig({
|
|
3744
3839
|
baseStyle: props => {
|
3745
3840
|
return {
|
3746
3841
|
shadow: props.withShadow ? 'raised' : 'none',
|
3747
|
-
borderRadius: props.isRounded ? '
|
3842
|
+
borderRadius: props.isRounded ? 'sm' : 'none'
|
3748
3843
|
};
|
3749
3844
|
}
|
3750
3845
|
});
|
@@ -3959,17 +4054,17 @@ const size = {
|
|
3959
4054
|
lg: /*#__PURE__*/styledSystem.defineStyle({
|
3960
4055
|
fontSize: 'text.lg',
|
3961
4056
|
h: 12,
|
3962
|
-
borderRadius: '
|
4057
|
+
borderRadius: 'sm'
|
3963
4058
|
}),
|
3964
4059
|
md: /*#__PURE__*/styledSystem.defineStyle({
|
3965
4060
|
fontSize: 'text.md',
|
3966
4061
|
h: 10,
|
3967
|
-
borderRadius: '
|
4062
|
+
borderRadius: 'sm'
|
3968
4063
|
}),
|
3969
4064
|
sm: /*#__PURE__*/styledSystem.defineStyle({
|
3970
4065
|
fontSize: 'text.sm',
|
3971
4066
|
h: 9,
|
3972
|
-
borderRadius: '
|
4067
|
+
borderRadius: 'sm'
|
3973
4068
|
})
|
3974
4069
|
};
|
3975
4070
|
const sizes = {
|
@@ -4541,7 +4636,7 @@ const outline$1 = /*#__PURE__*/react.defineStyle(props => {
|
|
4541
4636
|
borderColor,
|
4542
4637
|
fontSize: 'text.sm',
|
4543
4638
|
padding: 2,
|
4544
|
-
borderRadius: '
|
4639
|
+
borderRadius: 'sm',
|
4545
4640
|
borderWidth: '1px',
|
4546
4641
|
outline: 'none',
|
4547
4642
|
_disabled: {
|
@@ -5388,6 +5483,7 @@ exports.ModalCloseButton = ModalCloseButton;
|
|
5388
5483
|
exports.ModalFooter = ModalFooter;
|
5389
5484
|
exports.ModalHeader = ModalHeader;
|
5390
5485
|
exports.MultiDatePickerMonth = MultiDatePickerMonth;
|
5486
|
+
exports.NavigationBar = NavigationBar;
|
5391
5487
|
exports.Pagination = Pagination;
|
5392
5488
|
exports.PaginationDetail = PaginationDetail;
|
5393
5489
|
exports.PaginationFilter = PaginationFilter;
|