@ctlyst.id/internal-ui 2.1.2 → 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.
@@ -12,6 +12,7 @@ export declare type HeaderProps = BoxProps & {
12
12
  centerLogo?: string;
13
13
  centerLogoSize?: BoxProps['h'];
14
14
  hideEnv?: boolean;
15
+ urlLogo?: string;
15
16
  };
16
17
  declare const Header: React.FC<HeaderProps>;
17
18
  export default Header;
@@ -1,6 +1,7 @@
1
1
  import type { BoxProps } from '@chakra-ui/react';
2
2
  import React from 'react';
3
3
  export interface LogoProps {
4
+ url?: string;
4
5
  imageUrl: string;
5
6
  height?: BoxProps['h'];
6
7
  }
@@ -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
+ };
@@ -9,6 +9,7 @@ declare const _default: {
9
9
  export default _default;
10
10
  export declare const Color: () => JSX.Element;
11
11
  export declare const Typography: () => JSX.Element;
12
+ export declare const Radius: () => JSX.Element;
12
13
  export declare const Shadow: () => JSX.Element;
13
14
  export declare const Spacing: () => JSX.Element;
14
15
  export declare const Sizes: () => JSX.Element;
@@ -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, {
@@ -1954,16 +1954,32 @@ TextareaField.defaultProps = {
1954
1954
  };
1955
1955
 
1956
1956
  const Logo = ({
1957
+ url,
1957
1958
  imageUrl,
1958
1959
  height
1959
- }) => /*#__PURE__*/React__default.createElement(react.Image, {
1960
- w: "100%",
1961
- h: height !== null && height !== void 0 ? height : 9,
1962
- maxH: height !== null && height !== void 0 ? height : 9,
1963
- src: imageUrl,
1964
- alt: imageUrl
1965
- });
1960
+ }) => {
1961
+ if (url) return /*#__PURE__*/React__default.createElement(react.Box, {
1962
+ as: "a",
1963
+ href: url,
1964
+ cursor: "pointer",
1965
+ target: "_self"
1966
+ }, /*#__PURE__*/React__default.createElement(react.Image, {
1967
+ w: "100%",
1968
+ h: height !== null && height !== void 0 ? height : 9,
1969
+ maxH: height !== null && height !== void 0 ? height : 9,
1970
+ src: imageUrl,
1971
+ alt: imageUrl
1972
+ }));
1973
+ return /*#__PURE__*/React__default.createElement(react.Image, {
1974
+ w: "100%",
1975
+ h: height !== null && height !== void 0 ? height : 9,
1976
+ maxH: height !== null && height !== void 0 ? height : 9,
1977
+ src: imageUrl,
1978
+ alt: imageUrl
1979
+ });
1980
+ };
1966
1981
  Logo.defaultProps = {
1982
+ url: undefined,
1967
1983
  height: undefined
1968
1984
  };
1969
1985
 
@@ -2124,6 +2140,7 @@ const Header = ({
2124
2140
  mainLogoSize,
2125
2141
  centerLogoSize = 4,
2126
2142
  hideEnv = false,
2143
+ urlLogo,
2127
2144
  children,
2128
2145
  ...props
2129
2146
  }) => /*#__PURE__*/React.createElement(react.Box, Object.assign({
@@ -2140,6 +2157,7 @@ const Header = ({
2140
2157
  }, /*#__PURE__*/React.createElement(react.Flex, {
2141
2158
  alignItems: "center"
2142
2159
  }, /*#__PURE__*/React.createElement(Logo, {
2160
+ url: urlLogo,
2143
2161
  imageUrl: mainLogo,
2144
2162
  height: mainLogoSize
2145
2163
  }), children && children), /*#__PURE__*/React.createElement(react.HStack, {
@@ -2150,6 +2168,7 @@ const Header = ({
2150
2168
  left: "50%",
2151
2169
  transform: "translate(-50%,0)"
2152
2170
  }, /*#__PURE__*/React.createElement(Logo, {
2171
+ url: urlLogo,
2153
2172
  imageUrl: centerLogo,
2154
2173
  height: centerLogoSize
2155
2174
  }), /*#__PURE__*/React.createElement(Version, {
@@ -2174,7 +2193,8 @@ Header.defaultProps = {
2174
2193
  mainLogoSize: undefined,
2175
2194
  centerLogo: undefined,
2176
2195
  centerLogoSize: undefined,
2177
- hideEnv: false
2196
+ hideEnv: false,
2197
+ urlLogo: undefined
2178
2198
  };
2179
2199
 
2180
2200
  const ModalBody = /*#__PURE__*/React__default.forwardRef(({
@@ -2204,7 +2224,7 @@ const ModalFooter = /*#__PURE__*/React.forwardRef(({
2204
2224
  return /*#__PURE__*/React__default.createElement(react.ModalFooter, Object.assign({
2205
2225
  ref: ref,
2206
2226
  background: react.useColorModeValue('neutral.200', 'mirage.900'),
2207
- borderBottomRadius: "md"
2227
+ borderBottomRadius: "sm"
2208
2228
  }, rest), children);
2209
2229
  });
2210
2230
 
@@ -2215,7 +2235,7 @@ const ModalHeader = /*#__PURE__*/React.forwardRef(({
2215
2235
  return /*#__PURE__*/React__default.createElement(react.ModalHeader, Object.assign({
2216
2236
  ref: ref,
2217
2237
  background: react.useColorModeValue('neutral.200', 'mirage.900'),
2218
- borderTopRadius: "md",
2238
+ borderTopRadius: "sm",
2219
2239
  textStyle: "text-lg"
2220
2240
  }, rest), children);
2221
2241
  });
@@ -2359,6 +2379,101 @@ Navigation.defaultProps = {
2359
2379
  host: undefined
2360
2380
  };
2361
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
+
2362
2477
  const PaginationButton = /*#__PURE__*/react.forwardRef(({
2363
2478
  className,
2364
2479
  style,
@@ -2654,7 +2769,7 @@ const Rating = ({
2654
2769
  return /*#__PURE__*/React__default.createElement(react.Grid, {
2655
2770
  gap: '4px',
2656
2771
  display: "flex"
2657
- }, [...Array(5)].map((_, i) => /*#__PURE__*/React__default.createElement(internalIcon.Rating, {
2772
+ }, [...Array(5)].map((_, i) => /*#__PURE__*/React__default.createElement(Icon.Rating, {
2658
2773
  color: i < value ? '#FFA230' : '#E0E0E0',
2659
2774
  size: 24
2660
2775
  })));
@@ -3117,10 +3232,10 @@ const Switch = /*#__PURE__*/react.forwardRef(function Switch(props, ref) {
3117
3232
  top: "50%",
3118
3233
  left: "50%",
3119
3234
  transform: "translate(-50%, -50%)"
3120
- }, /*#__PURE__*/React__default.createElement(internalIcon.Check, {
3235
+ }, /*#__PURE__*/React__default.createElement(Icon.Check, {
3121
3236
  color: "white",
3122
3237
  size: getIconSize(props.size)
3123
- }), /*#__PURE__*/React__default.createElement(internalIcon.Close, {
3238
+ }), /*#__PURE__*/React__default.createElement(Icon.Close, {
3124
3239
  color: state.isDisabled ? 'neutral.600' : 'neutral.900',
3125
3240
  size: getIconSize(props.size)
3126
3241
  })), /*#__PURE__*/React__default.createElement(react.chakra.span, {
@@ -3154,7 +3269,13 @@ const Tab = /*#__PURE__*/react.forwardRef((props, ref) => {
3154
3269
  _selected: {
3155
3270
  borderColor: 'primary.400',
3156
3271
  color: 'primary.500',
3157
- transform: 'translateY(-2px)'
3272
+ transform: 'translateY(-2px)',
3273
+ _hover: {
3274
+ '& .chakra-badge': {
3275
+ bg: 'primary.500'
3276
+ },
3277
+ color: 'primary.500'
3278
+ }
3158
3279
  },
3159
3280
  color: "black.medium",
3160
3281
  _focus: {
@@ -3291,7 +3412,7 @@ const baseStyle = /*#__PURE__*/definePartsStyle({
3291
3412
  bg: $bg.reference,
3292
3413
  px: '4',
3293
3414
  py: '2',
3294
- borderRadius: 'md'
3415
+ borderRadius: 'sm'
3295
3416
  },
3296
3417
  title: {
3297
3418
  fontWeight: 'regular',
@@ -3455,7 +3576,7 @@ const Button$1 = /*#__PURE__*/styledSystem.defineStyleConfig({
3455
3576
  fontWeight: 'normal',
3456
3577
  px: 4,
3457
3578
  py: 2.5,
3458
- borderRadius: 'md',
3579
+ borderRadius: 'sm',
3459
3580
  _disabled: {
3460
3581
  opacity: 1,
3461
3582
  bg: 'neutral.300',
@@ -3718,7 +3839,7 @@ const CardStyle = /*#__PURE__*/styledSystem.defineStyleConfig({
3718
3839
  baseStyle: props => {
3719
3840
  return {
3720
3841
  shadow: props.withShadow ? 'raised' : 'none',
3721
- borderRadius: props.isRounded ? 'lg' : 'none'
3842
+ borderRadius: props.isRounded ? 'sm' : 'none'
3722
3843
  };
3723
3844
  }
3724
3845
  });
@@ -3729,7 +3850,7 @@ const {
3729
3850
  } = /*#__PURE__*/react.createMultiStyleConfigHelpers(anatomy.checkboxAnatomy.keys);
3730
3851
  const baseStyle$1 = /*#__PURE__*/definePartsStyle$1({
3731
3852
  control: {
3732
- borderRadius: '4px',
3853
+ borderRadius: 'sm',
3733
3854
  w: 4,
3734
3855
  h: 4,
3735
3856
  border: '1px solid'
@@ -3833,7 +3954,7 @@ const Chips$1 = /*#__PURE__*/styledSystem.defineStyleConfig({
3833
3954
  const defaultProps = {
3834
3955
  color: 'primary.500',
3835
3956
  textStyle: 'text.sm',
3836
- borderRadius: '24px',
3957
+ borderRadius: '2xl',
3837
3958
  borderWidth: '1px',
3838
3959
  borderColor: 'primary.500',
3839
3960
  bg: 'white.high',
@@ -3933,17 +4054,17 @@ const size = {
3933
4054
  lg: /*#__PURE__*/styledSystem.defineStyle({
3934
4055
  fontSize: 'text.lg',
3935
4056
  h: 12,
3936
- borderRadius: 'md'
4057
+ borderRadius: 'sm'
3937
4058
  }),
3938
4059
  md: /*#__PURE__*/styledSystem.defineStyle({
3939
4060
  fontSize: 'text.md',
3940
4061
  h: 10,
3941
- borderRadius: 'md'
4062
+ borderRadius: 'sm'
3942
4063
  }),
3943
4064
  sm: /*#__PURE__*/styledSystem.defineStyle({
3944
4065
  fontSize: 'text.sm',
3945
4066
  h: 9,
3946
- borderRadius: 'md'
4067
+ borderRadius: 'sm'
3947
4068
  })
3948
4069
  };
3949
4070
  const sizes = {
@@ -4515,7 +4636,7 @@ const outline$1 = /*#__PURE__*/react.defineStyle(props => {
4515
4636
  borderColor,
4516
4637
  fontSize: 'text.sm',
4517
4638
  padding: 2,
4518
- borderRadius: 'md',
4639
+ borderRadius: 'sm',
4519
4640
  borderWidth: '1px',
4520
4641
  outline: 'none',
4521
4642
  _disabled: {
@@ -5362,6 +5483,7 @@ exports.ModalCloseButton = ModalCloseButton;
5362
5483
  exports.ModalFooter = ModalFooter;
5363
5484
  exports.ModalHeader = ModalHeader;
5364
5485
  exports.MultiDatePickerMonth = MultiDatePickerMonth;
5486
+ exports.NavigationBar = NavigationBar;
5365
5487
  exports.Pagination = Pagination;
5366
5488
  exports.PaginationDetail = PaginationDetail;
5367
5489
  exports.PaginationFilter = PaginationFilter;