ab-ui-library 1.0.1

package/components/FileUpload/types.d.ts

@@ -0,0 +1,35 @@
+import type { JSX } from 'react';
+import type { FILE_UPLOAD_ERRORS } from '../../consts';
+export interface TFileUploadProps extends IFormCompProps {
+    allowedTypes?: string;
+    label?: string | JSX.Element;
+    buttonText?: string | JSX.Element;
+    getFiles?: (files: File[]) => void;
+    handleFileClick?: (file: File) => void;
+    removeFiles?: (file: File) => void;
+    toBase64?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    isFileUploaded?: boolean;
+    withFilePreview?: boolean;
+    uploadedFiles?: File[];
+    multiple?: boolean;
+    mode?: FileUploadMode;
+    labelAddons?: JSX.Element;
+    onError?: (errorType: FILE_UPLOAD_ERRORS) => void;
+    fileAllowedSize?: number;
+}
+export declare enum FileUploadMode {
+    edit = "edit",
+    attach = "attach"
+}
+export interface IUploadItemPropTypes {
+    name?: string;
+    onRemove: (file: File, index: number) => void;
+    fileType?: string;
+    isFileUploaded?: boolean;
+    error?: boolean;
+    handleFileClick?: (file: File) => void;
+    withFilePreview?: boolean;
+    files: File[];
+}

package/components/FileUpload/types.js

@@ -0,0 +1,7 @@
+var FileUploadMode = /*#__PURE__*/function (FileUploadMode) {
+  FileUploadMode["edit"] = "edit";
+  FileUploadMode["attach"] = "attach";
+  return FileUploadMode;
+}({});
+
+export { FileUploadMode };

package/components/FormContainer/FormContainer.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+import type { FormPropTypes } from './types';
+export declare const FormContainer: (props: FormPropTypes) => JSX.Element;

package/components/FormContainer/FormContainer.js

@@ -0,0 +1,112 @@
+import { _ as _extends } from '../../extends-e8ef956f.js';
+import React from 'react';
+import { appendErrors, useForm } from 'react-hook-form';
+import { validateFieldsNatively, toNestError } from '@hookform/resolvers';
+import classNames from 'classnames';
+import { FormContext } from '../../context/types.js';
+import { Button } from '../Button/Button.js';
+import '../../utils/helpers.js';
+import 'dayjs';
+import '../../defineProperty-7db32082.js';
+import '../../typeof-ecd92d7f.js';
+import '../../objectWithoutProperties-fcd64cc7.js';
+import '../../helperComponents/Loader/Loader.js';
+import '../Checkbox/Checkbox.js';
+import '../Popover/Popover.js';
+import '../../slicedToArray-0c706912.js';
+import '../../hooks/useGetTooltipStyles.js';
+import '../../hooks/useGetElemSizes.js';
+import '../../hooks/useGetElemPositions.js';
+import '../../hooks/useGetTooltipPosition.js';
+import '../Tooltip/types.js';
+import '../../hooks/useHideOnScroll.js';
+import '../../consts/index.js';
+import '../../hooks/useOnOutsideClick.js';
+import '../../hooks/useScreenSize.js';
+import '../Text/Text.js';
+import '../Link/Link.js';
+import '../SVGIcons/IconInfo.js';
+import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../helperComponents/IconDynamicComponent/constants.js';
+import 'react-syntax-highlighter';
+import '../Button/consts.js';
+
+var o=function(o,n,a){return void 0===n&&(n={}),void 0===a&&(a={}),function(s,i,c){try{return Promise.resolve(function(t,r){try{var u=(n.context&&"development"===process.env.NODE_ENV&&console.warn("You should not used the yup options context. Please, use the 'useForm' context object instead"),Promise.resolve(o["sync"===a.mode?"validateSync":"validate"](s,Object.assign({abortEarly:!1},n,{context:i}))).then(function(t){return c.shouldUseNativeValidation&&validateFieldsNatively({},c),{values:a.rawValues?s:t,errors:{}}}));}catch(e){return r(e)}return u&&u.then?u.then(void 0,r):u}(0,function(e){if(!e.inner)throw e;return {values:{},errors:toNestError((o=e,n=!c.shouldUseNativeValidation&&"all"===c.criteriaMode,(o.inner||[]).reduce(function(e,t){if(e[t.path]||(e[t.path]={message:t.message,type:t.type}),n){var o=e[t.path].types,a=o&&o[t.type];e[t.path]=appendErrors(t.path,n,e,t.type,a?[].concat(a,t.message):t.message);}return e},{})),c)};var o,n;}))}catch(e){return Promise.reject(e)}}};
+
+var FormContainer = function FormContainer(props) {
+  var children = props.children,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    shouldUnregister = props.shouldUnregister,
+    _props$shouldFocusErr = props.shouldFocusError,
+    shouldFocusError = _props$shouldFocusErr === void 0 ? true : _props$shouldFocusErr,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'onBlur' : _props$mode,
+    initialValues = props.initialValues,
+    validationScheme = props.validationScheme,
+    buttonConfigs = props.buttonConfigs,
+    formId = props.formId,
+    onSubmit = props.onSubmit;
+  var _useForm = useForm({
+      mode: mode,
+      resolver: o(validationScheme),
+      defaultValues: initialValues,
+      shouldFocusError: shouldFocusError,
+      shouldUnregister: shouldUnregister
+    }),
+    handleSubmit = _useForm.handleSubmit,
+    register = _useForm.register,
+    setValue = _useForm.setValue,
+    control = _useForm.control,
+    formState = _useForm.formState,
+    getValues = _useForm.getValues,
+    watch = _useForm.watch,
+    reset = _useForm.reset,
+    clearErrors = _useForm.clearErrors,
+    setError = _useForm.setError,
+    trigger = _useForm.trigger,
+    getFieldState = _useForm.getFieldState,
+    unregister = _useForm.unregister;
+  var errors = formState.errors,
+    isDirty = formState.isDirty,
+    isSubmitted = formState.isSubmitted,
+    isSubmitting = formState.isSubmitting,
+    dirtyFields = formState.dirtyFields;
+  var customSubmit = function customSubmit(data) {
+    if (onSubmit) {
+      onSubmit(data, formState, dirtyFields);
+    }
+  };
+  return /*#__PURE__*/React.createElement("form", {
+    onSubmit: handleSubmit(customSubmit),
+    id: formId,
+    className: classNames('form-container', className)
+  }, /*#__PURE__*/React.createElement(FormContext.Provider, {
+    value: {
+      trigger: trigger,
+      register: register,
+      errors: errors,
+      control: control,
+      setValue: setValue,
+      getValues: getValues,
+      watch: watch,
+      reset: reset,
+      isDirty: isDirty,
+      isSubmitted: isSubmitted,
+      isSubmitting: isSubmitting,
+      clearErrors: clearErrors,
+      setError: setError,
+      dirtyFields: dirtyFields,
+      getFieldState: getFieldState,
+      unregister: unregister
+    }
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, children, buttonConfigs && /*#__PURE__*/React.createElement("div", {
+    className: "form-container__buttons"
+  }, buttonConfigs.map(function (buttonConfig, index) {
+    return /*#__PURE__*/React.createElement(Button, _extends({}, buttonConfig, {
+      key: index
+    }));
+  })))));
+};
+
+export { FormContainer };

package/components/FormContainer/index.d.ts

@@ -0,0 +1 @@
+export * from './FormContainer';

package/components/FormContainer/index.js

@@ -0,0 +1,33 @@
+export { FormContainer } from './FormContainer.js';
+import '../../extends-e8ef956f.js';
+import 'react';
+import 'react-hook-form';
+import '@hookform/resolvers';
+import 'classnames';
+import '../../context/types.js';
+import '../../utils/helpers.js';
+import 'dayjs';
+import '../Button/Button.js';
+import '../../defineProperty-7db32082.js';
+import '../../typeof-ecd92d7f.js';
+import '../../objectWithoutProperties-fcd64cc7.js';
+import '../../helperComponents/Loader/Loader.js';
+import '../Checkbox/Checkbox.js';
+import '../Popover/Popover.js';
+import '../../slicedToArray-0c706912.js';
+import '../../hooks/useGetTooltipStyles.js';
+import '../../hooks/useGetElemSizes.js';
+import '../../hooks/useGetElemPositions.js';
+import '../../hooks/useGetTooltipPosition.js';
+import '../Tooltip/types.js';
+import '../../hooks/useHideOnScroll.js';
+import '../../consts/index.js';
+import '../../hooks/useOnOutsideClick.js';
+import '../../hooks/useScreenSize.js';
+import '../Text/Text.js';
+import '../Link/Link.js';
+import '../SVGIcons/IconInfo.js';
+import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../helperComponents/IconDynamicComponent/constants.js';
+import 'react-syntax-highlighter';
+import '../Button/consts.js';

package/components/FormContainer/types.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import type { FormState } from 'react-hook-form';
+import type { AnyObjectSchema } from 'yup';
+import type { ValidationMode } from 'react-hook-form/dist/types/form';
+import type { TButtonPropTypes } from '../Button/types';
+export type TDirtyFields = Partial<Readonly<{
+    [x: string]: unknown;
+}>>;
+export interface FormPropTypes {
+    className?: string;
+    onSubmit?: (data: TFormData, formState: FormState<TFormData>, dirtyFields?: TDirtyFields) => void;
+    children?: ReactNode;
+    validationScheme: AnyObjectSchema;
+    initialValues: TFormData;
+    buttonConfigs?: TButtonPropTypes[];
+    shouldUnregister?: boolean;
+    shouldFocusError?: boolean;
+    mode?: keyof ValidationMode;
+    reValidateMode?: 'onChange' | 'onSubmit' | 'onBlur' | undefined;
+    formId?: string;
+}

package/components/FormContainer/types.js

@@ -0,0 +1 @@
+

package/components/FormField/FormField.d.ts

@@ -0,0 +1,3 @@
+import type { ReactElement } from 'react';
+import type { TFormFieldPropTypes } from './types';
+export declare const FormField: (props: TFormFieldPropTypes) => ReactElement | null;

package/components/FormField/FormField.js

@@ -0,0 +1,89 @@
+import { _ as _defineProperty } from '../../defineProperty-7db32082.js';
+import React, { useContext } from 'react';
+import { ErrorMessage } from '@hookform/error-message';
+import classNames from 'classnames';
+import 'dayjs';
+import { ErrorMessage as ErrorMessage$1 } from '../../helperComponents/ErrorMessage/ErrorMessage.js';
+import '../Checkbox/Checkbox.js';
+import { FormContext } from '../../context/types.js';
+import '../../hooks/useScreenSize.js';
+import { Controller } from 'react-hook-form';
+import 'react-syntax-highlighter';
+import '../../typeof-ecd92d7f.js';
+import '../Text/Text.js';
+import '../../utils/helpers.js';
+import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../helperComponents/IconDynamicComponent/constants.js';
+import '../../extends-e8ef956f.js';
+import '../Popover/Popover.js';
+import '../../slicedToArray-0c706912.js';
+import '../../hooks/useGetTooltipStyles.js';
+import '../../hooks/useGetElemSizes.js';
+import '../../hooks/useGetElemPositions.js';
+import '../../hooks/useGetTooltipPosition.js';
+import '../Tooltip/types.js';
+import '../../hooks/useHideOnScroll.js';
+import '../../consts/index.js';
+import '../../hooks/useOnOutsideClick.js';
+import '../Link/Link.js';
+import '../SVGIcons/IconInfo.js';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var FormField = function FormField(props) {
+  var As = props.As,
+    name = props.name,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$dataId = props.dataId,
+    dataId = _props$dataId === void 0 ? '' : _props$dataId,
+    _props$hideErrorMessa = props.hideErrorMessage,
+    hideErrorMessage = _props$hideErrorMessa === void 0 ? false : _props$hideErrorMessa,
+    errorMessageIcon = props.errorMessageIcon;
+  var _useContext = useContext(FormContext),
+    register = _useContext.register,
+    errors = _useContext.errors,
+    setValue = _useContext.setValue,
+    control = _useContext.control;
+  if (!register) {
+    return null;
+  }
+  var registerOptions = register(name);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('form-container__field', className, name)
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: name,
+    render: function render(_ref) {
+      var field = _ref.field,
+        fieldState = _ref.fieldState;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, As(_objectSpread(_objectSpread({
+        hasError: !!fieldState.error,
+        isValid: fieldState.isTouched && fieldState.isDirty && !fieldState.invalid,
+        dataId: dataId
+      }, registerOptions), {}, {
+        setFieldValue: function setFieldValue(data, name, options) {
+          return setValue(data, name, _objectSpread({
+            shouldValidate: true,
+            shouldDirty: true,
+            shouldTouch: true
+          }, options));
+        }
+      }, field)), !hideErrorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, {
+        name: name,
+        errors: errors,
+        render: function render(_ref2) {
+          var message = _ref2.message;
+          return /*#__PURE__*/React.createElement(ErrorMessage$1, {
+            dataId: dataId,
+            message: message || '',
+            className: "full-width mt-8",
+            icon: errorMessageIcon
+          });
+        }
+      }) : null);
+    }
+  }));
+};
+
+export { FormField };

package/components/FormField/index.d.ts

@@ -0,0 +1 @@
+export * from './FormField';

package/components/FormField/index.js

@@ -0,0 +1,30 @@
+export { FormField } from './FormField.js';
+import '../../defineProperty-7db32082.js';
+import '../../typeof-ecd92d7f.js';
+import 'react';
+import '@hookform/error-message';
+import 'classnames';
+import 'dayjs';
+import '../../helperComponents/ErrorMessage/ErrorMessage.js';
+import '../Text/Text.js';
+import '../../utils/helpers.js';
+import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../helperComponents/IconDynamicComponent/constants.js';
+import '../Checkbox/Checkbox.js';
+import '../../extends-e8ef956f.js';
+import '../Popover/Popover.js';
+import '../../slicedToArray-0c706912.js';
+import '../../hooks/useGetTooltipStyles.js';
+import '../../hooks/useGetElemSizes.js';
+import '../../hooks/useGetElemPositions.js';
+import '../../hooks/useGetTooltipPosition.js';
+import '../Tooltip/types.js';
+import '../../hooks/useHideOnScroll.js';
+import '../../consts/index.js';
+import '../../hooks/useOnOutsideClick.js';
+import '../../hooks/useScreenSize.js';
+import 'react-hook-form';
+import '../Link/Link.js';
+import '../SVGIcons/IconInfo.js';
+import 'react-syntax-highlighter';
+import '../../context/types.js';

package/components/FormField/types.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from 'react';
+export interface TFormFieldPropTypes {
+    As: (props: IFormCompProps) => JSX.Element;
+    name: string;
+    className?: string;
+    dataId?: string;
+    hideErrorMessage?: boolean;
+    errorMessageIcon?: string;
+}

package/components/FormField/types.js

@@ -0,0 +1 @@
+

package/components/FramedIcon/FramedIcon.d.ts

@@ -0,0 +1,3 @@
+import type { ReactElement } from 'react';
+import type { TFramedIconPropTypes } from './types';
+export declare const FramedIcon: (props: TFramedIconPropTypes) => ReactElement;

package/components/FramedIcon/FramedIcon.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FRAME_SIZE_MAPPING, ICON_SIZE_MAPPING } from './consts.js';
+
+var FramedIcon = function FramedIcon(props) {
+  var _props$size = props.size,
+    size = _props$size === void 0 ? 'medium' : _props$size,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    iconProps = props.iconProps;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, iconProps !== null && iconProps !== void 0 && iconProps.Component ? /*#__PURE__*/React.createElement("div", {
+    className: classNames('framed-icon', "framed-icon--".concat(FRAME_SIZE_MAPPING[size]), "framed-icon--".concat(iconProps.type), className)
+  }, /*#__PURE__*/React.createElement(iconProps.Component, {
+    size: ICON_SIZE_MAPPING[size],
+    type: iconProps.type
+  })) : null);
+};
+
+export { FramedIcon };

package/components/FramedIcon/consts.d.ts

@@ -0,0 +1,7 @@
+import type { TSVGIconSize } from '../SVGIcons/types';
+export declare const FRAME_SIZE_MAPPING: {
+    [key: string]: TSVGIconSize;
+};
+export declare const ICON_SIZE_MAPPING: {
+    [key: string]: TSVGIconSize;
+};

package/components/FramedIcon/consts.js

@@ -0,0 +1,12 @@
+var FRAME_SIZE_MAPPING = {
+  large: 'large',
+  medium: 'medium',
+  small: 'small'
+};
+var ICON_SIZE_MAPPING = {
+  large: 'xxlarge',
+  medium: 'xlarge',
+  small: 'medium'
+};
+
+export { FRAME_SIZE_MAPPING, ICON_SIZE_MAPPING };

package/components/FramedIcon/index.d.ts

@@ -0,0 +1 @@
+export * from './FramedIcon';

package/components/FramedIcon/index.js

@@ -0,0 +1,4 @@
+export { FramedIcon } from './FramedIcon.js';
+import 'react';
+import 'classnames';
+import './consts.js';

package/components/FramedIcon/types.d.ts

@@ -0,0 +1,6 @@
+import type { ISVGIconProps } from '../SVGIcons/types';
+export interface TFramedIconPropTypes {
+    className?: string;
+    size?: 'small' | 'medium' | 'large';
+    iconProps: ISVGIconProps;
+}

package/components/FramedIcon/types.js

@@ -0,0 +1 @@
+

package/components/Heading/Heading.d.ts

@@ -0,0 +1,3 @@
+import type { ReactElement } from 'react';
+import type { HeadingPropTypes } from './types';
+export declare const Heading: (props: HeadingPropTypes) => ReactElement;

package/components/Heading/Heading.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { noop } from '../../utils/helpers.js';
+import classNames from 'classnames';
+import 'dayjs';
+
+var Heading = function Heading(props) {
+  var children = props.children,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'small' : _props$size,
+    _props$lineHeight = props.lineHeight,
+    lineHeight = _props$lineHeight === void 0 ? 'large' : _props$lineHeight,
+    _props$type = props.type,
+    As = _props$type === void 0 ? 'h1' : _props$type,
+    _props$weight = props.weight,
+    weight = _props$weight === void 0 ? 'regular' : _props$weight,
+    _props$onClick = props.onClick,
+    onClick = _props$onClick === void 0 ? noop : _props$onClick,
+    _props$dataId = props.dataId,
+    dataId = _props$dataId === void 0 ? '' : _props$dataId;
+  return /*#__PURE__*/React.createElement(As, {
+    dataid: dataId,
+    onClick: onClick,
+    className: classNames('heading', size && "heading-".concat(size), weight, lineHeight && "lh-".concat(lineHeight), className)
+  }, children);
+};
+
+export { Heading };

package/components/Heading/index.d.ts

@@ -0,0 +1 @@
+export * from './Heading';

package/components/Heading/index.js

@@ -0,0 +1,5 @@
+export { Heading } from './Heading.js';
+import 'react';
+import '../../utils/helpers.js';
+import 'dayjs';
+import 'classnames';

package/components/Heading/types.d.ts

@@ -0,0 +1,11 @@
+import type { ElementType, ReactNode } from 'react';
+export interface HeadingPropTypes {
+    children?: ReactNode;
+    type?: ElementType;
+    size?: 'xsmall' | 'small' | 'standard' | 'medium' | 'large' | 'xlarge';
+    weight?: 'regular' | 'semibold' | 'bold' | 'bolder';
+    lineHeight?: 'xsmall' | 'small' | 'medium' | 'large';
+    className?: string;
+    onClick?: (event: TClickEventType) => void;
+    dataId?: string;
+}

package/components/Heading/types.js

@@ -0,0 +1 @@
+

package/components/Image/Image.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+import type { ImagePropTypes } from './types';
+export declare const Image: (props: ImagePropTypes) => JSX.Element;

package/components/Image/Image.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+var Image = function Image(props) {
+  var name = props.name,
+    _props$imagePath = props.imagePath,
+    imagePath = _props$imagePath === void 0 ? 'static/media/src/assets/images/image-placeholder.png' : _props$imagePath,
+    isBackgroundImage = props.isBackgroundImage,
+    backgroundSize = props.backgroundSize,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    isFullWidth = props.isFullWidth,
+    isFullHeight = props.isFullHeight,
+    ratio = props.ratio;
+  return isBackgroundImage ? /*#__PURE__*/React.createElement("div", {
+    className: "image image--bg ".concat(className),
+    style: {
+      backgroundImage: "".concat(imagePath ? "url(".concat(imagePath, ")") : ''),
+      backgroundSize: backgroundSize,
+      aspectRatio: ratio
+    }
+  }) : /*#__PURE__*/React.createElement("img", {
+    className: "image ".concat(className),
+    src: imagePath,
+    alt: name,
+    style: {
+      aspectRatio: ratio,
+      width: isFullWidth ? '100%' : '',
+      height: isFullHeight ? '100%' : ''
+    }
+  });
+};
+
+export { Image };

package/components/Image/index.d.ts

@@ -0,0 +1 @@
+export * from './Image';

package/components/Image/index.js

@@ -0,0 +1,2 @@
+export { Image } from './Image.js';
+import 'react';

package/components/Image/types.d.ts

@@ -0,0 +1,10 @@
+export interface ImagePropTypes {
+    name?: string;
+    imagePath?: string;
+    className?: string;
+    isBackgroundImage?: boolean;
+    backgroundSize?: 'cover' | 'contain';
+    isFullWidth?: boolean;
+    isFullHeight?: boolean;
+    ratio?: '1/1' | '2/1' | '3/1' | '4/3' | '16/9' | '1/1.618' | '2/3';
+}

package/components/Image/types.js

@@ -0,0 +1 @@
+

package/components/Input/Input.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { InputCustomProps } from './types';
+export declare const Input: React.ForwardRefExoticComponent<Omit<InputCustomProps, "ref"> & React.RefAttributes<HTMLInputElement>>;