@ctlyst.id/internal-ui 2.0.3 → 2.0.5

package/dist/components/field/components/field.d.ts

@@ -1,3 +1,4 @@
+import type { FormControlProps } from '@chakra-ui/react';
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 export interface Props {
     label?: string | ReactNode;
@@ -7,6 +8,7 @@ export interface Props {
     leftHelperText?: string | ReactNode;
     rightHelperText?: string | ReactNode;
     isRequired?: boolean;
+    boxProps?: FormControlProps;
 }
 export declare type FieldProps<T = unknown> = Props & T;
 declare const Field: FC<PropsWithChildren<Props>>;

package/dist/components/form/components/input-element.d.ts

@@ -0,0 +1,2 @@
+export { InputLeftElement as InputElementLeft } from '@chakra-ui/react';
+export { InputRightElement as InputElementRight } from '@chakra-ui/react';

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

@@ -1,4 +1,5 @@
 export * from './components/input-addon';
+export * from './components/input-element';
 export { default as InputField } from './components/input-field';
 export * from './components/input-field';
 export { default as TextareaField } from './components/textarea';

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './alert';
 export * from './badge';
 export * from './breadcrumb';
 export * from './button';
@@ -14,6 +15,7 @@ export * from './modal';
 export * from './navigation';
 export * from './pagination';
 export * from './radio';
+export * from './rating';
 export * from './select';
 export * from './switch';
 export * from './tabs';

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

@@ -4,29 +4,259 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var react = require('@chakra-ui/react');
+var sharedUtils = require('@chakra-ui/shared-utils');
+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 utils = require('@chakra-ui/utils');
+var react = require('@chakra-ui/react');
 var fi = require('react-icons/fi');
 var icons = require('@chakra-ui/icons');
 var react$1 = require('@emotion/react');
 var reactTable = require('@tanstack/react-table');
 var classnames = _interopDefault(require('classnames'));
 var ReactDatePicker = _interopDefault(require('react-datepicker'));
-var system = require('@chakra-ui/system');
 var styled = _interopDefault(require('@emotion/styled'));
-var internalIcon = require('@ctlyst.id/internal-icon');
 var ReactSelect = _interopDefault(require('react-select'));
 var reactSelectAsyncPaginate = require('react-select-async-paginate');
 var ReactSelectAsyncCreatable = _interopDefault(require('react-select/async-creatable'));
 var ReactSelectCreatable = _interopDefault(require('react-select/creatable'));
-var sharedUtils = require('@chakra-ui/shared-utils');
 var reactDropzone = require('react-dropzone');
 var anatomy = require('@chakra-ui/anatomy');
 var styledSystem = require('@chakra-ui/styled-system');
 var themeTools = require('@chakra-ui/theme-tools');
 var axios = _interopDefault(require('axios'));
 
+/* eslint-disable react/require-default-props */
+function CheckIcon() {
+  return /*#__PURE__*/React__default.createElement(internalIcon.CheckCircle, {
+    color: "inherit",
+    size: 4
+  });
+}
+function InfoIcon() {
+  return /*#__PURE__*/React__default.createElement(internalIcon.Info, {
+    color: "inherit",
+    size: 4
+  });
+}
+function WarningIcon() {
+  return /*#__PURE__*/React__default.createElement(internalIcon.AlertTriangle, {
+    color: "inherit",
+    size: 4
+  });
+}
+
+const [AlertProvider, useAlertContext] = /*#__PURE__*/reactContext.createContext({
+  name: 'AlertContext',
+  hookName: 'useAlertContext',
+  providerName: '<Alert />'
+});
+const [AlertStylesProvider, useAlertStyles] = /*#__PURE__*/reactContext.createContext({
+  name: `AlertStylesContext`,
+  hookName: `useAlertStyles`,
+  providerName: '<Alert />'
+});
+const STATUSES = {
+  info: {
+    icon: InfoIcon,
+    colorScheme: 'info'
+  },
+  warning: {
+    icon: InfoIcon,
+    colorScheme: 'warning'
+  },
+  success: {
+    icon: CheckIcon,
+    colorScheme: 'success'
+  },
+  error: {
+    icon: WarningIcon,
+    colorScheme: 'danger'
+  }
+};
+function getStatusColorScheme(status) {
+  return STATUSES[status].colorScheme;
+}
+function getStatusIcon(status) {
+  return STATUSES[status].icon;
+}
+
+/**
+ * Alert is used to communicate the state or status of a
+ * page, feature or action
+ *
+ * @see Docs https://chakra-ui.com/docs/components/alert
+ * @see WAI-ARIA https://www.w3.org/WAI/ARIA/apg/patterns/alert/
+ */
+const Alert = /*#__PURE__*/system.forwardRef(function Alert(props, ref) {
+  var _props$colorScheme;
+  const {
+    status = 'info',
+    addRole = true,
+    children,
+    ...rest
+  } = system.omitThemingProps(props);
+  const colorScheme = (_props$colorScheme = props.colorScheme) !== null && _props$colorScheme !== void 0 ? _props$colorScheme : getStatusColorScheme(status);
+  const styles = system.useMultiStyleConfig('Alert', {
+    ...props,
+    colorScheme
+  });
+  const alertStyles = {
+    width: '100%',
+    display: 'grid',
+    gridTemplateColumns: 'auto 1fr auto auto',
+    alignItems: 'center',
+    position: 'relative',
+    overflow: 'hidden',
+    ...styles.container
+  };
+  return /*#__PURE__*/React__default.createElement(AlertProvider, {
+    value: {
+      status
+    }
+  }, /*#__PURE__*/React__default.createElement(AlertStylesProvider, {
+    value: styles
+  }, /*#__PURE__*/React__default.createElement(system.chakra.div, Object.assign({
+    "data-status": status,
+    role: addRole ? 'alert' : undefined,
+    ref: ref
+  }, rest, {
+    className: sharedUtils.cx('chakra-alert', props.className),
+    __css: alertStyles
+  }), children)));
+});
+Alert.displayName = 'Alert';
+
+const Loader = /*#__PURE__*/react.forwardRef((props, ref) => {
+  const styles = react.useStyleConfig('LoaderStyle', props);
+  return /*#__PURE__*/React__default.createElement(react.Box, {
+    ref: ref,
+    __css: styles
+  });
+});
+
+const Button = props => {
+  const {
+    children,
+    variant,
+    size,
+    ...rest
+  } = props;
+  const getLoaderSize = () => {
+    if (size === 'lg') return 'md';
+    if (size === 'md') return 'sm';
+    return 'xs';
+  };
+  const getLoaderColor = () => {
+    if (variant === 'primary' || variant === 'danger') return 'white';
+    if (variant === 'outline-danger') return 'danger';
+    return 'primary';
+  };
+  return /*#__PURE__*/React__default.createElement(react.Button, Object.assign({
+    size: size,
+    variant: variant,
+    spinner: /*#__PURE__*/React__default.createElement(Loader, {
+      size: getLoaderSize(),
+      color: getLoaderColor()
+    })
+  }, rest), children);
+};
+
+function AlertAction({
+  children,
+  className
+}) {
+  const styles = useAlertStyles();
+  const css = styles.action;
+  return /*#__PURE__*/React__default.createElement(Button, {
+    "data-test-id": "alert-action",
+    className: utils.cx('chakra-alert__close', className),
+    variant: "link",
+    color: "inherit",
+    fontWeight: "700",
+    __css: css
+  }, children);
+}
+AlertAction.displayName = 'AlertAction';
+
+function AlertClose({
+  className,
+  children,
+  ...rest
+}) {
+  const styles = useAlertStyles();
+  const css = styles.close;
+  return /*#__PURE__*/React__default.createElement(system.chakra.span, Object.assign({
+    display: "inherit",
+    "data-status": 'alert-close'
+  }, rest, {
+    className: sharedUtils.cx('chakra-alert__close', className),
+    __css: css
+  }), children || /*#__PURE__*/React__default.createElement(internalIcon.Close, {
+    color: "inherit",
+    size: 4
+  }));
+}
+AlertClose.displayName = 'AlertClose';
+
+const AlertDescription = /*#__PURE__*/system.forwardRef(function AlertDescription(props, ref) {
+  const styles = useAlertStyles();
+  const {
+    status
+  } = useAlertContext();
+  const descriptionStyles = {
+    display: 'inline',
+    ...styles.description
+  };
+  return /*#__PURE__*/React__default.createElement(system.chakra.div, Object.assign({
+    ref: ref,
+    "data-status": status
+  }, props, {
+    className: sharedUtils.cx('chakra-alert__desc', props.className),
+    __css: descriptionStyles
+  }));
+});
+AlertDescription.displayName = 'AlertDescription';
+
+function AlertIcon({
+  className,
+  children,
+  ...rest
+}) {
+  const {
+    status
+  } = useAlertContext();
+  const BaseIcon = getStatusIcon(status);
+  const styles = useAlertStyles();
+  const css = styles.icon;
+  return /*#__PURE__*/React__default.createElement(system.chakra.span, Object.assign({
+    display: "inherit",
+    "data-status": status
+  }, rest, {
+    className: sharedUtils.cx('chakra-alert__icon', className),
+    __css: css
+  }), children || /*#__PURE__*/React__default.createElement(BaseIcon, null));
+}
+AlertIcon.displayName = 'AlertIcon';
+
+const AlertTitle = /*#__PURE__*/system.forwardRef(function AlertTitle(props, ref) {
+  const styles = useAlertStyles();
+  const {
+    status
+  } = useAlertContext();
+  return /*#__PURE__*/React__default.createElement(system.chakra.div, Object.assign({
+    ref: ref,
+    "data-status": status
+  }, props, {
+    className: sharedUtils.cx('chakra-alert__title', props.className),
+    __css: styles.title
+  }));
+});
+AlertTitle.displayName = 'AlertTitle';
+
 const Badge = props => {
   const {
     children,
@@ -38,7 +268,7 @@ const Badge = props => {
     variant: "primary-solid",
     padding: "0 8px",
     height: "18px",
-    display: "flex",
+    display: "inline-flex",
     alignItems: "center",
     justifyContent: "space-between",
     textTransform: "none"
@@ -143,41 +373,6 @@ BreadCrumb.defaultProps = {
   spacing: 2
 };
 
-const Loader = /*#__PURE__*/react.forwardRef((props, ref) => {
-  const styles = react.useStyleConfig('LoaderStyle', props);
-  return /*#__PURE__*/React__default.createElement(react.Box, {
-    ref: ref,
-    __css: styles
-  });
-});
-
-const Button = props => {
-  const {
-    children,
-    variant,
-    size,
-    ...rest
-  } = props;
-  const getLoaderSize = () => {
-    if (size === 'lg') return 'md';
-    if (size === 'md') return 'sm';
-    return 'xs';
-  };
-  const getLoaderColor = () => {
-    if (variant === 'primary' || variant === 'danger') return 'white';
-    if (variant === 'outline-danger') return 'danger';
-    return 'primary';
-  };
-  return /*#__PURE__*/React__default.createElement(react.Button, Object.assign({
-    size: size,
-    variant: variant,
-    spinner: /*#__PURE__*/React__default.createElement(Loader, {
-      size: getLoaderSize(),
-      color: getLoaderColor()
-    })
-  }, rest), children);
-};
-
 const CardCustom = /*#__PURE__*/React.forwardRef(({
   children,
   ...rest
@@ -229,7 +424,6 @@ CheckboxComponent.defaultProps = {
   errorText: ''
 };
 
-/* eslint-disable no-nested-ternary */
 const Field = props => {
   const {
     label,
@@ -239,7 +433,8 @@ const Field = props => {
     rightHelperText,
     isRequired,
     children,
-    isSuccess
+    isSuccess,
+    boxProps = {}
   } = props;
   const getHelperColor = () => {
     if (isError) return 'danger.500';
@@ -252,9 +447,9 @@ const Field = props => {
   };
   const helperColor = getHelperColor();
   const justifyHelper = getJustifyContentHelper();
-  return /*#__PURE__*/React__default.createElement(react.FormControl, {
+  return /*#__PURE__*/React__default.createElement(react.FormControl, Object.assign({
     isInvalid: isError
-  }, label && (typeof label === 'string' ? /*#__PURE__*/React__default.createElement(react.FormLabel, {
+  }, boxProps), label && (typeof label === 'string' ? /*#__PURE__*/React__default.createElement(react.FormLabel, {
     mb: 1,
     fontSize: "text.sm",
     requiredIndicator: undefined
@@ -267,19 +462,19 @@ const Field = props => {
     display: "flex",
     width: "full",
     justifyContent: justifyHelper
-  }, !isError ? leftHelperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, {
+  }, !isError ? leftHelperText && (typeof leftHelperText === 'string' ? /*#__PURE__*/React__default.createElement(react.FormHelperText, {
     fontSize: "text.xs",
     color: helperColor,
     mt: 1
-  }, leftHelperText) : typeof errorMessage === 'string' ? /*#__PURE__*/React__default.createElement(react.FormErrorMessage, {
+  }, leftHelperText) : leftHelperText) : typeof errorMessage === 'string' ? /*#__PURE__*/React__default.createElement(react.FormErrorMessage, {
     fontSize: "text.xs",
     color: "danger.500",
     mt: 1
-  }, errorMessage) : errorMessage, rightHelperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, {
+  }, errorMessage) : errorMessage, rightHelperText && (typeof rightHelperText === 'string' ? /*#__PURE__*/React__default.createElement(react.FormHelperText, {
     fontSize: "text.xs",
     color: helperColor,
     mt: 1
-  }, rightHelperText)));
+  }, rightHelperText) : rightHelperText)));
 };
 Field.defaultProps = {
   label: '',
@@ -288,7 +483,8 @@ Field.defaultProps = {
   errorMessage: undefined,
   leftHelperText: undefined,
   rightHelperText: undefined,
-  isRequired: false
+  isRequired: false,
+  boxProps: {}
 };
 
 function CheckboxGroupComponent(props) {
@@ -2749,6 +2945,18 @@ RadioGroupComponent.defaultProps = {
   errorMessage: ''
 };
 
+const Rating = ({
+  value
+}) => {
+  return /*#__PURE__*/React__default.createElement(react.Grid, {
+    gap: '4px',
+    display: "flex"
+  }, [...Array(5)].map((_, i) => /*#__PURE__*/React__default.createElement(internalIcon.Rating, {
+    color: i < value ? '#FFA230' : '#E0E0E0',
+    size: 24
+  })));
+};
+
 const SelectWrapper = ({
   children,
   isError = false
@@ -4383,6 +4591,18 @@ Object.defineProperty(exports, 'DrawerOverlay', {
     return react.ModalOverlay;
   }
 });
+Object.defineProperty(exports, 'InputElementLeft', {
+  enumerable: true,
+  get: function () {
+    return react.InputLeftElement;
+  }
+});
+Object.defineProperty(exports, 'InputElementRight', {
+  enumerable: true,
+  get: function () {
+    return react.InputRightElement;
+  }
+});
 Object.defineProperty(exports, 'Modal', {
   enumerable: true,
   get: function () {
@@ -4533,6 +4753,12 @@ Object.defineProperty(exports, 'useTabsStyles', {
     return react.useTabsStyles;
   }
 });
+exports.Alert = Alert;
+exports.AlertAction = AlertAction;
+exports.AlertClose = AlertClose;
+exports.AlertDescription = AlertDescription;
+exports.AlertIcon = AlertIcon;
+exports.AlertTitle = AlertTitle;
 exports.Badge = Badge;
 exports.Box = react.Box;
 exports.BreadCrumb = BreadCrumb;
@@ -4565,6 +4791,7 @@ exports.Provider = Provider;
 exports.ProviderContext = ProviderContext;
 exports.Radio = RadioComponent;
 exports.RadioGroup = RadioGroupComponent;
+exports.Rating = Rating;
 exports.Select = Select;
 exports.SelectAsync = SelectAsync;
 exports.SelectAsyncCreatable = SelectAsyncCreatable;
@@ -4580,5 +4807,6 @@ exports.Uploader = Uploader;
 exports.Wrap = react.Wrap;
 exports.foundations = foundations;
 exports.theme = theme;
+exports.useAlertStyles = useAlertStyles;
 exports.useInternalUI = useInternalUI;
 //# sourceMappingURL=internal-ui.cjs.development.js.map