@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.
@@ -5,3 +5,4 @@ declare const _default: {
5
5
  };
6
6
  export default _default;
7
7
  export declare const NavigationDefault: () => JSX.Element;
8
+ export declare const NavigationBarDefault: () => JSX.Element;
@@ -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;
@@ -1,2 +1,4 @@
1
1
  export { default as MainMenu } from './components/navigation';
2
2
  export * from './components/navigation';
3
+ export { default as NavigationBar } from './components/navigation-bar';
4
+ export * from './components/navigation-bar';
@@ -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?: "lg" | "xs" | "sm" | "md" | "xl" | "xxl" | undefined;
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 internalIcon = require('@ctlyst.id/internal-icon');
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(internalIcon.CheckCircle, {
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(internalIcon.Info, {
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(internalIcon.AlertTriangle, {
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(internalIcon.Close, {
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(internalIcon.Close, {
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: 'md',
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: "md",
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(internalIcon.Close, {
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(internalIcon.EyeOff, {
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(internalIcon.Eye, {
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: "md"
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: "md",
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(internalIcon.Rating, {
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(internalIcon.Check, {
3235
+ }, /*#__PURE__*/React__default.createElement(Icon.Check, {
3141
3236
  color: "white",
3142
3237
  size: getIconSize(props.size)
3143
- }), /*#__PURE__*/React__default.createElement(internalIcon.Close, {
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: 'md'
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: 'md',
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 ? 'lg' : 'none'
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: 'md'
4057
+ borderRadius: 'sm'
3963
4058
  }),
3964
4059
  md: /*#__PURE__*/styledSystem.defineStyle({
3965
4060
  fontSize: 'text.md',
3966
4061
  h: 10,
3967
- borderRadius: 'md'
4062
+ borderRadius: 'sm'
3968
4063
  }),
3969
4064
  sm: /*#__PURE__*/styledSystem.defineStyle({
3970
4065
  fontSize: 'text.sm',
3971
4066
  h: 9,
3972
- borderRadius: 'md'
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: 'md',
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;