@ctlyst.id/internal-ui 2.1.3 → 2.1.5

package/dist/components/loader/components/loader.d.ts

@@ -4,7 +4,7 @@ export interface LoaderProps {
     variant?: string;
     thickness?: string;
 }
-export interface CustomBadgeProps extends HTMLChakraProps<'span'>, ThemingProps {
+export interface CustomLoaderProps extends HTMLChakraProps<'span'>, ThemingProps {
 }
-declare const Loader: import("@chakra-ui/system/dist/system.types").ComponentWithAs<"div", CustomBadgeProps>;
+declare const Loader: import("@chakra-ui/system/dist/system.types").ComponentWithAs<"div", CustomLoaderProps>;
 export default Loader;

package/dist/components/navigation/__stories__/navigation.stories.d.ts

@@ -5,3 +5,4 @@ declare const _default: {
 };
 export default _default;
 export declare const NavigationDefault: () => JSX.Element;
+export declare const NavigationBarDefault: () => JSX.Element;

package/dist/components/navigation/components/navigation-bar.d.ts

@@ -0,0 +1,12 @@
+import type { BoxProps } from '@chakra-ui/react';
+import React from 'react';
+import type { Menu } from '../types';
+export declare type NavigationBarProps = BoxProps & {
+    navigations?: Menu[];
+    isFetched: boolean;
+    pathname: string;
+    asPath: string;
+    mappingIcon: Map<string, JSX.Element>;
+};
+declare const NavigationBar: React.FC<NavigationBarProps>;
+export default NavigationBar;

package/dist/components/navigation/index.d.ts

@@ -1,2 +1,4 @@
 export { default as MainMenu } from './components/navigation';
 export * from './components/navigation';
+export { default as NavigationBar } from './components/navigation-bar';
+export * from './components/navigation-bar';

package/dist/components/navigation/types.d.ts

@@ -6,3 +6,19 @@ export declare type NavigationLink = {
     navHost?: string;
     children?: Omit<NavigationLink, 'children'>[];
 };
+export declare type Menu = {
+    id: string;
+    title: string;
+    type: string;
+    icon: string;
+    navLink: string;
+    children: SubMenu[];
+};
+export declare type SubMenu = {
+    type: string;
+    icon: string;
+    navLink: string;
+    navHost: string;
+    title: string;
+    id: string;
+};

package/dist/config/theme/components/loader.d.ts

@@ -77,7 +77,7 @@ declare const LoaderStyle: {
         [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
     } | undefined;
     defaultProps?: {
-        size?: "lg" | "xs" | "sm" | "md" | "xl" | "xxl" | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | undefined;
         variant?: string | number | undefined;
         colorScheme?: string | undefined;
     } | undefined;

package/dist/internal-ui.cjs.development.js

@@ -9,7 +9,7 @@ var system = require('@chakra-ui/system');
 var React = require('react');
 var React__default = _interopDefault(React);
 var reactContext = require('@chakra-ui/react-context');
-var internalIcon = require('@ctlyst.id/internal-icon');
+var Icon = require('@ctlyst.id/internal-icon');
 var utils = require('@chakra-ui/utils');
 var react = require('@chakra-ui/react');
 var fi = require('react-icons/fi');
@@ -31,19 +31,19 @@ var axios = _interopDefault(require('axios'));
 
 /* eslint-disable react/require-default-props */
 function CheckIcon() {
-  return /*#__PURE__*/React__default.createElement(internalIcon.CheckCircle, {
+  return /*#__PURE__*/React__default.createElement(Icon.CheckCircle, {
     color: "inherit",
     size: 4
   });
 }
 function InfoIcon() {
-  return /*#__PURE__*/React__default.createElement(internalIcon.Info, {
+  return /*#__PURE__*/React__default.createElement(Icon.Info, {
     color: "inherit",
     size: 4
   });
 }
 function WarningIcon() {
-  return /*#__PURE__*/React__default.createElement(internalIcon.AlertTriangle, {
+  return /*#__PURE__*/React__default.createElement(Icon.AlertTriangle, {
     color: "inherit",
     size: 4
   });
@@ -199,7 +199,7 @@ function AlertClose({
   }, rest, {
     className: sharedUtils.cx('chakra-alert__close', className),
     __css: css
-  }), children || /*#__PURE__*/React__default.createElement(internalIcon.Close, {
+  }), children || /*#__PURE__*/React__default.createElement(Icon.Close, {
     color: "inherit",
     size: 4
   }));
@@ -561,7 +561,7 @@ const Chips = ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center"
-  }, /*#__PURE__*/React__default.createElement(internalIcon.Close, {
+  }, /*#__PURE__*/React__default.createElement(Icon.Close, {
     color: closeColor,
     size: 4
   })));
@@ -771,7 +771,7 @@ const getWrapperStyle = props => {
   const style = {
     border: '1px solid',
     borderColor: outlineColor,
-    borderRadius: 'md',
+    borderRadius: 'sm',
     transition: 'all 0.15s',
     boxShadow: 'none',
     _focusWithin: {
@@ -1869,7 +1869,7 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     __css: wrapperStyle
   }, /*#__PURE__*/React__default.createElement(react.InputGroup, {
     size: size,
-    borderRadius: "md",
+    borderRadius: "sm",
     backgroundColor: isDisabled ? 'neutral.300' : 'white.high',
     cursor: isDisabled ? 'not-allowed' : 'default'
   }, addOnLeft, /*#__PURE__*/React__default.createElement(react.Input, Object.assign({
@@ -1892,7 +1892,7 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     justifyContent: "center",
     onClick: !isDisabled ? onClear : undefined,
     cursor: isDisabled ? 'not-allowed' : 'pointer'
-  }, /*#__PURE__*/React__default.createElement(internalIcon.Close, {
+  }, /*#__PURE__*/React__default.createElement(Icon.Close, {
     size: 4,
     color: iconColor
   })), type === 'password' && !isShowPassword && !isLoading && /*#__PURE__*/React__default.createElement(react.Box, {
@@ -1903,7 +1903,7 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     cursor: isDisabled ? 'not-allowed' : 'pointer',
     display: "flex",
     justifyContent: "center"
-  }, /*#__PURE__*/React__default.createElement(internalIcon.EyeOff, {
+  }, /*#__PURE__*/React__default.createElement(Icon.EyeOff, {
     size: 4,
     color: iconColor
   })), type === 'password' && isShowPassword && !isLoading && /*#__PURE__*/React__default.createElement(react.Box, {
@@ -1914,7 +1914,7 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     cursor: isDisabled ? 'not-allowed' : 'pointer',
     display: "flex",
     justifyContent: "center"
-  }, /*#__PURE__*/React__default.createElement(internalIcon.Eye, {
+  }, /*#__PURE__*/React__default.createElement(Icon.Eye, {
     size: 4,
     color: iconColor
   })), isLoading && /*#__PURE__*/React__default.createElement(Loader, {
@@ -2224,7 +2224,7 @@ const ModalFooter = /*#__PURE__*/React.forwardRef(({
   return /*#__PURE__*/React__default.createElement(react.ModalFooter, Object.assign({
     ref: ref,
     background: react.useColorModeValue('neutral.200', 'mirage.900'),
-    borderBottomRadius: "md"
+    borderBottomRadius: "sm"
   }, rest), children);
 });
 
@@ -2235,7 +2235,7 @@ const ModalHeader = /*#__PURE__*/React.forwardRef(({
   return /*#__PURE__*/React__default.createElement(react.ModalHeader, Object.assign({
     ref: ref,
     background: react.useColorModeValue('neutral.200', 'mirage.900'),
-    borderTopRadius: "md",
+    borderTopRadius: "sm",
     textStyle: "text-lg"
   }, rest), children);
 });
@@ -2379,6 +2379,101 @@ Navigation.defaultProps = {
   host: undefined
 };
 
+const NavigationBar = ({
+  navigations,
+  isFetched,
+  pathname,
+  asPath,
+  mappingIcon,
+  ...props
+}) => {
+  const urlMenu = subMenu => {
+    if (window.location.hostname === 'localhost') {
+      return subMenu.navLink;
+    }
+    return subMenu.navHost + subMenu.navLink;
+  };
+  return /*#__PURE__*/React__default.createElement(react.Box, Object.assign({
+    hidden: isFetched && navigations === undefined,
+    backgroundRepeat: "repeat-x",
+    "data-test-id": "CT_component_navigation_cms"
+  }, props), /*#__PURE__*/React__default.createElement(react.Flex, {
+    bg: "white",
+    w: "full",
+    rounded: 'md',
+    flexWrap: "wrap",
+    alignItems: "center",
+    shadow: "raised",
+    gap: 1,
+    px: 4,
+    py: 2
+  }, navigations === null || navigations === void 0 ? void 0 : navigations.map(item => {
+    var _childMenu$;
+    const childMenu = item.children.filter(subMenu => asPath === null || asPath === void 0 ? void 0 : asPath.includes(subMenu.navLink));
+    const isActive = pathname === null || pathname === void 0 ? void 0 : pathname.startsWith((_childMenu$ = childMenu[0]) === null || _childMenu$ === void 0 ? void 0 : _childMenu$.navLink);
+    const activeBg = isActive ? 'primary.500' : undefined;
+    return /*#__PURE__*/React__default.createElement(react.Popover, {
+      isLazy: true,
+      key: item.id,
+      trigger: "hover",
+      placement: "bottom-start",
+      openDelay: 100,
+      closeDelay: 100
+    }, ({
+      isOpen,
+      onClose
+    }) => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(react.PopoverTrigger, null, /*#__PURE__*/React__default.createElement(react.Button, {
+      h: 7.5,
+      p: 2,
+      size: "sm",
+      variant: "ghost",
+      "data-test-id": `CT_component_navigation_button-${item.title}${isActive ? '-active' : ''}`,
+      _hover: {
+        backgroundColor: !isActive ? 'neutral.400' : activeBg
+      },
+      backgroundColor: isOpen && !isActive ? 'neutral.400' : activeBg,
+      color: isActive ? 'primary.50' : 'black.high',
+      leftIcon: mappingIcon.get(item.title),
+      rightIcon: /*#__PURE__*/React__default.createElement(Icon.ChevronDown, {
+        size: 4,
+        color: "inherit"
+      })
+    }, item.title)), item.children && /*#__PURE__*/React__default.createElement(react.PopoverContent, {
+      border: "none",
+      shadow: "raised",
+      py: 1,
+      width: 240
+    }, item.children.map(subMenu => /*#__PURE__*/React__default.createElement(react.Link, {
+      key: subMenu.id,
+      href: urlMenu(subMenu),
+      display: "flex",
+      alignItems: "center",
+      transition: "padding 0.35s ease 0s",
+      _hover: {
+        pl: 6
+      },
+      _first: {
+        borderTopRadius: 'md'
+      },
+      _last: {
+        borderBottomRadius: 'md'
+      },
+      py: 3,
+      px: 4,
+      color: pathname !== null && pathname !== void 0 && pathname.startsWith(subMenu.navLink) ? 'primary.800' : 'black.high',
+      onClick: onClose,
+      background: pathname !== null && pathname !== void 0 && pathname.startsWith(subMenu.navLink) ? 'primary.50' : 'transparent',
+      "data-test-id": `CT_component_navigation_link-${item.id}`
+    }, mappingIcon.get(item.title), /*#__PURE__*/React__default.createElement(react.Text, {
+      textStyle: "text-sm",
+      ml: 3
+    }, subMenu.title))))));
+  })));
+};
+NavigationBar.defaultProps = {
+  navigations: undefined
+};
+
 const PaginationButton = /*#__PURE__*/react.forwardRef(({
   className,
   style,
@@ -2674,7 +2769,7 @@ const Rating = ({
   return /*#__PURE__*/React__default.createElement(react.Grid, {
     gap: '4px',
     display: "flex"
-  }, [...Array(5)].map((_, i) => /*#__PURE__*/React__default.createElement(internalIcon.Rating, {
+  }, [...Array(5)].map((_, i) => /*#__PURE__*/React__default.createElement(Icon.Rating, {
     color: i < value ? '#FFA230' : '#E0E0E0',
     size: 24
   })));
@@ -3137,10 +3232,10 @@ const Switch = /*#__PURE__*/react.forwardRef(function Switch(props, ref) {
     top: "50%",
     left: "50%",
     transform: "translate(-50%, -50%)"
-  }, /*#__PURE__*/React__default.createElement(internalIcon.Check, {
+  }, /*#__PURE__*/React__default.createElement(Icon.Check, {
     color: "white",
     size: getIconSize(props.size)
-  }), /*#__PURE__*/React__default.createElement(internalIcon.Close, {
+  }), /*#__PURE__*/React__default.createElement(Icon.Close, {
     color: state.isDisabled ? 'neutral.600' : 'neutral.900',
     size: getIconSize(props.size)
   })), /*#__PURE__*/React__default.createElement(react.chakra.span, {
@@ -3317,7 +3412,7 @@ const baseStyle = /*#__PURE__*/definePartsStyle({
     bg: $bg.reference,
     px: '4',
     py: '2',
-    borderRadius: 'md'
+    borderRadius: 'sm'
   },
   title: {
     fontWeight: 'regular',
@@ -3481,7 +3576,7 @@ const Button$1 = /*#__PURE__*/styledSystem.defineStyleConfig({
     fontWeight: 'normal',
     px: 4,
     py: 2.5,
-    borderRadius: 'md',
+    borderRadius: 'sm',
     _disabled: {
       opacity: 1,
       bg: 'neutral.300',
@@ -3744,7 +3839,7 @@ const CardStyle = /*#__PURE__*/styledSystem.defineStyleConfig({
   baseStyle: props => {
     return {
       shadow: props.withShadow ? 'raised' : 'none',
-      borderRadius: props.isRounded ? 'lg' : 'none'
+      borderRadius: props.isRounded ? 'sm' : 'none'
     };
   }
 });
@@ -3959,17 +4054,17 @@ const size = {
   lg: /*#__PURE__*/styledSystem.defineStyle({
     fontSize: 'text.lg',
     h: 12,
-    borderRadius: 'md'
+    borderRadius: 'sm'
   }),
   md: /*#__PURE__*/styledSystem.defineStyle({
     fontSize: 'text.md',
     h: 10,
-    borderRadius: 'md'
+    borderRadius: 'sm'
   }),
   sm: /*#__PURE__*/styledSystem.defineStyle({
     fontSize: 'text.sm',
     h: 9,
-    borderRadius: 'md'
+    borderRadius: 'sm'
   })
 };
 const sizes = {
@@ -4030,6 +4125,7 @@ const Input = /*#__PURE__*/defineMultiStyleConfig$2({
   }
 });
 
+/* eslint-disable prefer-destructuring */
 const rotate = /*#__PURE__*/react$1.keyframes({
   '0%': {
     transform: 'rotate(0deg)'
@@ -4039,10 +4135,23 @@ const rotate = /*#__PURE__*/react$1.keyframes({
   }
 });
 const getLoaderColor = color => {
-  if (color === 'primary') return '--chakra-colors-primary-600';
-  if (color === 'danger') return '--chakra-colors-danger-500';
-  if (color === 'warning') return '--chakra-colors-warning-700';
-  return '--chakra-colors-white-high';
+  const colorValue = color.split('.');
+  let backgroundColor;
+  switch (colorValue.length) {
+    case 1:
+      backgroundColor = colorValue[0];
+      break;
+    case 2:
+      backgroundColor = `var(--chakra-colors-${colorValue[0]}-${colorValue[1]})`;
+      break;
+    default:
+      backgroundColor = 'var(--chakra-colors-white-high)';
+      break;
+  }
+  if (color === 'primary') return 'var(--chakra-colors-primary-600)';
+  if (color === 'danger') return 'var(--chakra-colors-danger-500)';
+  if (color === 'warning') return 'var(--chakra-colors-warning-700)';
+  return backgroundColor;
 };
 const LoaderStyle = /*#__PURE__*/styledSystem.defineStyleConfig({
   baseStyle: props => {
@@ -4053,7 +4162,7 @@ const LoaderStyle = /*#__PURE__*/styledSystem.defineStyleConfig({
       justifyContent: 'center',
       alignItems: 'center',
       animation: `${rotate} 1s linear infinite`,
-      background: `conic-gradient(from 180deg at 50% 50%, var(${colors}) 0deg, rgba(217, 217, 217, 0) 360deg);`,
+      background: `conic-gradient(from 180deg at 50% 50%, ${colors} 0deg, rgba(217, 217, 217, 0) 360deg);`,
       ':before': {
         content: `''`,
         display: 'block',
@@ -4541,7 +4650,7 @@ const outline$1 = /*#__PURE__*/react.defineStyle(props => {
     borderColor,
     fontSize: 'text.sm',
     padding: 2,
-    borderRadius: 'md',
+    borderRadius: 'sm',
     borderWidth: '1px',
     outline: 'none',
     _disabled: {
@@ -5388,6 +5497,7 @@ exports.ModalCloseButton = ModalCloseButton;
 exports.ModalFooter = ModalFooter;
 exports.ModalHeader = ModalHeader;
 exports.MultiDatePickerMonth = MultiDatePickerMonth;
+exports.NavigationBar = NavigationBar;
 exports.Pagination = Pagination;
 exports.PaginationDetail = PaginationDetail;
 exports.PaginationFilter = PaginationFilter;