@ctlyst.id/internal-ui 2.1.2 → 2.1.4

package/dist/components/header/components/header.d.ts

@@ -12,6 +12,7 @@ export declare type HeaderProps = BoxProps & {
     centerLogo?: string;
     centerLogoSize?: BoxProps['h'];
     hideEnv?: boolean;
+    urlLogo?: string;
 };
 declare const Header: React.FC<HeaderProps>;
 export default Header;

package/dist/components/header/components/logo.d.ts

@@ -1,6 +1,7 @@
 import type { BoxProps } from '@chakra-ui/react';
 import React from 'react';
 export interface LogoProps {
+    url?: string;
     imageUrl: string;
     height?: BoxProps['h'];
 }

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/__stories__/foundations.stories.d.ts

@@ -9,6 +9,7 @@ declare const _default: {
 export default _default;
 export declare const Color: () => JSX.Element;
 export declare const Typography: () => JSX.Element;
+export declare const Radius: () => JSX.Element;
 export declare const Shadow: () => JSX.Element;
 export declare const Spacing: () => JSX.Element;
 export declare const Sizes: () => JSX.Element;

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, {
@@ -1954,16 +1954,32 @@ TextareaField.defaultProps = {
 };
 
 const Logo = ({
+  url,
   imageUrl,
   height
-}) => /*#__PURE__*/React__default.createElement(react.Image, {
-  w: "100%",
-  h: height !== null && height !== void 0 ? height : 9,
-  maxH: height !== null && height !== void 0 ? height : 9,
-  src: imageUrl,
-  alt: imageUrl
-});
+}) => {
+  if (url) return /*#__PURE__*/React__default.createElement(react.Box, {
+    as: "a",
+    href: url,
+    cursor: "pointer",
+    target: "_self"
+  }, /*#__PURE__*/React__default.createElement(react.Image, {
+    w: "100%",
+    h: height !== null && height !== void 0 ? height : 9,
+    maxH: height !== null && height !== void 0 ? height : 9,
+    src: imageUrl,
+    alt: imageUrl
+  }));
+  return /*#__PURE__*/React__default.createElement(react.Image, {
+    w: "100%",
+    h: height !== null && height !== void 0 ? height : 9,
+    maxH: height !== null && height !== void 0 ? height : 9,
+    src: imageUrl,
+    alt: imageUrl
+  });
+};
 Logo.defaultProps = {
+  url: undefined,
   height: undefined
 };
 
@@ -2124,6 +2140,7 @@ const Header = ({
   mainLogoSize,
   centerLogoSize = 4,
   hideEnv = false,
+  urlLogo,
   children,
   ...props
 }) => /*#__PURE__*/React.createElement(react.Box, Object.assign({
@@ -2140,6 +2157,7 @@ const Header = ({
 }, /*#__PURE__*/React.createElement(react.Flex, {
   alignItems: "center"
 }, /*#__PURE__*/React.createElement(Logo, {
+  url: urlLogo,
   imageUrl: mainLogo,
   height: mainLogoSize
 }), children && children), /*#__PURE__*/React.createElement(react.HStack, {
@@ -2150,6 +2168,7 @@ const Header = ({
   left: "50%",
   transform: "translate(-50%,0)"
 }, /*#__PURE__*/React.createElement(Logo, {
+  url: urlLogo,
   imageUrl: centerLogo,
   height: centerLogoSize
 }), /*#__PURE__*/React.createElement(Version, {
@@ -2174,7 +2193,8 @@ Header.defaultProps = {
   mainLogoSize: undefined,
   centerLogo: undefined,
   centerLogoSize: undefined,
-  hideEnv: false
+  hideEnv: false,
+  urlLogo: undefined
 };
 
 const ModalBody = /*#__PURE__*/React__default.forwardRef(({
@@ -2204,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);
 });
 
@@ -2215,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);
 });
@@ -2359,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,
@@ -2654,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
   })));
@@ -3117,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, {
@@ -3154,7 +3269,13 @@ const Tab = /*#__PURE__*/react.forwardRef((props, ref) => {
     _selected: {
       borderColor: 'primary.400',
       color: 'primary.500',
-      transform: 'translateY(-2px)'
+      transform: 'translateY(-2px)',
+      _hover: {
+        '& .chakra-badge': {
+          bg: 'primary.500'
+        },
+        color: 'primary.500'
+      }
     },
     color: "black.medium",
     _focus: {
@@ -3291,7 +3412,7 @@ const baseStyle = /*#__PURE__*/definePartsStyle({
     bg: $bg.reference,
     px: '4',
     py: '2',
-    borderRadius: 'md'
+    borderRadius: 'sm'
   },
   title: {
     fontWeight: 'regular',
@@ -3455,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',
@@ -3718,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'
     };
   }
 });
@@ -3729,7 +3850,7 @@ const {
 } = /*#__PURE__*/react.createMultiStyleConfigHelpers(anatomy.checkboxAnatomy.keys);
 const baseStyle$1 = /*#__PURE__*/definePartsStyle$1({
   control: {
-    borderRadius: '4px',
+    borderRadius: 'sm',
     w: 4,
     h: 4,
     border: '1px solid'
@@ -3833,7 +3954,7 @@ const Chips$1 = /*#__PURE__*/styledSystem.defineStyleConfig({
     const defaultProps = {
       color: 'primary.500',
       textStyle: 'text.sm',
-      borderRadius: '24px',
+      borderRadius: '2xl',
       borderWidth: '1px',
       borderColor: 'primary.500',
       bg: 'white.high',
@@ -3933,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 = {
@@ -4515,7 +4636,7 @@ const outline$1 = /*#__PURE__*/react.defineStyle(props => {
     borderColor,
     fontSize: 'text.sm',
     padding: 2,
-    borderRadius: 'md',
+    borderRadius: 'sm',
     borderWidth: '1px',
     outline: 'none',
     _disabled: {
@@ -5362,6 +5483,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;