ab-ui-library 1.0.1

package/components/Tooltip/Tooltip.js

@@ -0,0 +1,103 @@
+import { _ as _slicedToArray } from '../../slicedToArray-0c706912.js';
+import React, { useRef, useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { Text } from '../Text/Text.js';
+import { useGetTooltipStyles } from '../../hooks/useGetTooltipStyles.js';
+import { useHideOnScroll } from '../../hooks/useHideOnScroll.js';
+import 'dayjs';
+import '../../hooks/useScreenSize.js';
+import 'react-hook-form';
+import { Positions } from './types.js';
+import '../../utils/helpers.js';
+import '../../hooks/useGetElemSizes.js';
+import '../../hooks/useGetElemPositions.js';
+import '../../hooks/useGetTooltipPosition.js';
+import '../../consts/index.js';
+
+var Tooltip = function Tooltip(props) {
+  var tooltipRef = useRef(null);
+  var _props$size = props.size,
+    size = _props$size === void 0 ? 'large' : _props$size,
+    text = props.text,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$position = props.position,
+    position = _props$position === void 0 ? Positions.BOTTOM_LEFT : _props$position,
+    _props$dataId = props.dataId,
+    dataId = _props$dataId === void 0 ? '' : _props$dataId,
+    id = props.id,
+    elemRef = props.elemRef,
+    _props$hovered = props.hovered,
+    hovered = _props$hovered === void 0 ? false : _props$hovered;
+  var _useState = useState(hovered),
+    _useState2 = _slicedToArray(_useState, 2),
+    isHovered = _useState2[0],
+    setIsHovered = _useState2[1];
+  var _useState3 = useState(elemRef || null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    parent = _useState4[0],
+    setElement = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    toolTipCurrentWidth = _useState6[0],
+    setToolTipCurrentWidth = _useState6[1];
+  useEffect(function () {
+    if (id) {
+      var element = document.getElementById(id.toString());
+      setElement(element);
+    }
+  }, [id]);
+  var onMouseEnter = function onMouseEnter() {
+    setIsHovered(true);
+  };
+  var onMouseLeave = function onMouseLeave() {
+    return setIsHovered(false);
+  };
+  useHideOnScroll(onMouseLeave);
+  var _useGetTooltipStyles = useGetTooltipStyles({
+      elemRef: parent,
+      tooltipRef: tooltipRef.current,
+      initialPosition: position,
+      toolTipCurrentWidth: toolTipCurrentWidth
+    }),
+    tooltipStyles = _useGetTooltipStyles.tooltipStyles,
+    tooltipPosition = _useGetTooltipStyles.tooltipPosition;
+  useEffect(function () {
+    if (parent) {
+      parent.addEventListener('mouseenter', onMouseEnter);
+      parent.addEventListener('mouseleave', onMouseLeave);
+    }
+    return function () {
+      parent === null || parent === void 0 || parent.removeEventListener('mouseenter', onMouseEnter);
+      parent === null || parent === void 0 || parent.removeEventListener('mouseleave', onMouseLeave);
+    };
+  }, [parent]);
+  useEffect(function () {
+    if (isHovered) {
+      var _tooltipRef$current;
+      setToolTipCurrentWidth((tooltipRef === null || tooltipRef === void 0 || (_tooltipRef$current = tooltipRef.current) === null || _tooltipRef$current === void 0 ? void 0 : _tooltipRef$current.clientWidth) || 0);
+    } else {
+      setToolTipCurrentWidth(0);
+    }
+  }, [isHovered]);
+  if (!isHovered) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    style: tooltipStyles,
+    "data-id": dataId,
+    className: classNames("tooltip tooltip--".concat(size, " tooltip--").concat(tooltipPosition), className),
+    ref: tooltipRef
+  }, /*#__PURE__*/React.createElement(Text, {
+    dataId: "".concat(dataId, "-text"),
+    className: "tooltip__inner",
+    type: "primary",
+    weight: "regular",
+    lineHeight: "small",
+    size: "".concat(size == 'small' ? 'xsmall' : 'small')
+  }, text), /*#__PURE__*/React.createElement("span", {
+    className: "tooltip__arrow"
+  }));
+};
+
+export { Tooltip };

package/components/Tooltip/index.d.ts

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

package/components/Tooltip/index.js

@@ -0,0 +1,16 @@
+export { Tooltip } from './Tooltip.js';
+import '../../slicedToArray-0c706912.js';
+import 'react';
+import 'classnames';
+import '../Text/Text.js';
+import '../../utils/helpers.js';
+import 'dayjs';
+import '../../hooks/useGetTooltipStyles.js';
+import '../../hooks/useGetElemSizes.js';
+import '../../hooks/useGetElemPositions.js';
+import '../../hooks/useGetTooltipPosition.js';
+import './types.js';
+import '../../hooks/useHideOnScroll.js';
+import '../../consts/index.js';
+import '../../hooks/useScreenSize.js';
+import 'react-hook-form';

package/components/Tooltip/types.d.ts

@@ -0,0 +1,21 @@
+import type { ReactElement } from 'react';
+export declare enum Positions {
+    BOTTOM_LEFT = "bottom-left",
+    BOTTOM_RIGHT = "bottom-right",
+    TOP_LEFT = "top-left",
+    TOP_RIGHT = "top-right",
+    MIDDLE_LEFT = "middle-left",
+    MIDDLE_RIGHT = "middle-right",
+    BOTTOM_CENTER = "bottom-center",
+    TOP_CENTER = "top-center"
+}
+export interface TTooltipProps extends IFormCompProps {
+    text: string | ReactElement;
+    position?: Positions;
+    size?: 'large' | 'small';
+    className?: string;
+    elemRef?: HTMLElement | null;
+    id?: string | number;
+    hovered?: boolean;
+    timer?: number;
+}

package/components/Tooltip/types.js

@@ -0,0 +1,13 @@
+var Positions = /*#__PURE__*/function (Positions) {
+  Positions["BOTTOM_LEFT"] = "bottom-left";
+  Positions["BOTTOM_RIGHT"] = "bottom-right";
+  Positions["TOP_LEFT"] = "top-left";
+  Positions["TOP_RIGHT"] = "top-right";
+  Positions["MIDDLE_LEFT"] = "middle-left";
+  Positions["MIDDLE_RIGHT"] = "middle-right";
+  Positions["BOTTOM_CENTER"] = "bottom-center";
+  Positions["TOP_CENTER"] = "top-center";
+  return Positions;
+}({});
+
+export { Positions };

package/consts/index.d.ts

@@ -0,0 +1,23 @@
+export declare const IMAGE_MIME_TYPES: string[];
+export declare const IMAGE_MIME_TYPES_FOR_PREVIEW: TImageMimeTypes[];
+export declare const IMAGE_MIME_TYPE: string[];
+export declare const SCREEN_SIZES: {
+    SMALL: number;
+    MEDIUM: number;
+    LARGE: number;
+};
+export declare enum FILE_UPLOAD_ERRORS {
+    'size' = 0,
+    'type' = 1
+}
+export declare enum CARD_SELECT_TYPES {
+    cardRadio = "cardRadio",
+    card = "card"
+}
+export declare const CUSTOM_SCROLL_MESSAGE = "Custom scroll event has fired";
+export declare const CUSTOM_SCROLL_NAME = "CUSTOM_SCROLL_EVENT";
+export declare const MONTHS: {
+    label: string;
+    value: number;
+}[];
+export declare const DROPDOWN_AND_INPUT_GAP = 10;

package/consts/index.js

@@ -0,0 +1,62 @@
+var IMAGE_MIME_TYPES = ['image/jpeg', 'image/png', 'application/pdf'];
+var IMAGE_MIME_TYPES_FOR_PREVIEW = ['image/jpeg', 'image/jpg', 'image/png', 'image/heic', 'image/heif', 'application/pdf'];
+var IMAGE_MIME_TYPE = ['.jpeg', '.jpg', '.png', '.heic', '.heif', '.pdf'];
+
+//TODO as a result of discussion with the designers, it was decided to add temporary constants , in the next stage we should correct that
+var SCREEN_SIZES = {
+  SMALL: 768,
+  MEDIUM: 992,
+  LARGE: 1200
+};
+var FILE_UPLOAD_ERRORS = /*#__PURE__*/function (FILE_UPLOAD_ERRORS) {
+  FILE_UPLOAD_ERRORS[FILE_UPLOAD_ERRORS["size"] = 0] = "size";
+  FILE_UPLOAD_ERRORS[FILE_UPLOAD_ERRORS["type"] = 1] = "type";
+  return FILE_UPLOAD_ERRORS;
+}({});
+var CARD_SELECT_TYPES = /*#__PURE__*/function (CARD_SELECT_TYPES) {
+  CARD_SELECT_TYPES["cardRadio"] = "cardRadio";
+  CARD_SELECT_TYPES["card"] = "card";
+  return CARD_SELECT_TYPES;
+}({});
+var CUSTOM_SCROLL_MESSAGE = 'Custom scroll event has fired';
+var CUSTOM_SCROLL_NAME = 'CUSTOM_SCROLL_EVENT';
+var MONTHS = [{
+  label: 'January',
+  value: 0
+}, {
+  label: 'February',
+  value: 1
+}, {
+  label: 'March',
+  value: 2
+}, {
+  label: 'April',
+  value: 3
+}, {
+  label: 'May',
+  value: 4
+}, {
+  label: 'June',
+  value: 5
+}, {
+  label: 'July',
+  value: 6
+}, {
+  label: 'August',
+  value: 7
+}, {
+  label: 'September',
+  value: 8
+}, {
+  label: 'October',
+  value: 9
+}, {
+  label: 'November',
+  value: 10
+}, {
+  label: 'December',
+  value: 11
+}];
+var DROPDOWN_AND_INPUT_GAP = 10;
+
+export { CARD_SELECT_TYPES, CUSTOM_SCROLL_MESSAGE, CUSTOM_SCROLL_NAME, DROPDOWN_AND_INPUT_GAP, FILE_UPLOAD_ERRORS, IMAGE_MIME_TYPE, IMAGE_MIME_TYPES, IMAGE_MIME_TYPES_FOR_PREVIEW, MONTHS, SCREEN_SIZES };

package/context/FormContextProvider.d.ts

@@ -0,0 +1,5 @@
+import type { JSX } from 'react';
+import type { TFormContextProps } from './types';
+export declare const WithFormFeedback: ({ children }: {
+    children?: ((context: TFormContextProps) => JSX.Element | null) | undefined;
+}) => JSX.Element | null;

package/context/FormContextProvider.js

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { FormContext } from './types.js';
+import '../utils/helpers.js';
+import 'dayjs';
+
+var WithFormFeedback = function WithFormFeedback(_ref) {
+  var children = _ref.children;
+  var context = useContext(FormContext);
+  return children ? children(context) : null;
+};
+
+export { WithFormFeedback };

package/context/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './FormContextProvider';

package/context/index.js

@@ -0,0 +1,5 @@
+export { FormContext } from './types.js';
+export { WithFormFeedback } from './FormContextProvider.js';
+import 'react';
+import '../utils/helpers.js';
+import 'dayjs';

package/context/types.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { Control, FieldValues, UseFormRegister, UseFormGetValues, UseFormWatch, UseFormReset, UseFormClearErrors, UseFormSetError, UseFormTrigger, UseFormGetFieldState, UseFormUnregister } from 'react-hook-form';
+export type TFormContextProps = {
+    register?: UseFormRegister<TFormData>;
+    errors?: FieldErrors;
+    setValue: TSetValue;
+    control?: Control<FieldValues, unknown>;
+    getValues?: UseFormGetValues<TFormData>;
+    watch?: UseFormWatch<TFormData>;
+    reset?: UseFormReset<TFormData>;
+    isDirty?: boolean;
+    clearErrors?: UseFormClearErrors<TFormData>;
+    setError?: UseFormSetError<TFormData>;
+    isSubmitted: boolean;
+    isSubmitting: boolean;
+    dirtyFields: TDirtyFields;
+    trigger?: UseFormTrigger<TFormData>;
+    getFieldState?: UseFormGetFieldState<TFormData>;
+    unregister?: UseFormUnregister<TFormData>;
+};
+export declare const FormContext: import("react").Context<TFormContextProps>;

package/context/types.js

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+import { noop } from '../utils/helpers.js';
+import 'dayjs';
+
+var FormContext = /*#__PURE__*/createContext({
+  setValue: noop,
+  isSubmitted: false,
+  isSubmitting: false,
+  dirtyFields: {}
+});
+
+export { FormContext };

package/defineProperty-7db32082.js

@@ -0,0 +1,28 @@
+import { _ as _typeof } from './typeof-ecd92d7f.js';
+
+function toPrimitive(t, r) {
+  if ("object" != _typeof(t) || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != _typeof(i)) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+
+function toPropertyKey(t) {
+  var i = toPrimitive(t, "string");
+  return "symbol" == _typeof(i) ? i : i + "";
+}
+
+function _defineProperty(e, r, t) {
+  return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
+}
+
+export { _defineProperty as _ };

package/extends-e8ef956f.js

@@ -0,0 +1,11 @@
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+export { _extends as _ };

package/helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+import React from 'react';
+export declare function AnimatePresenceWrapper({ children, initial }: {
+    children: React.ReactNode;
+    initial?: boolean;
+}): JSX.Element;

package/helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { AnimatePresence } from 'framer-motion';
+
+//  This component is for exit animation
+function AnimatePresenceWrapper(_ref) {
+  var children = _ref.children,
+    _ref$initial = _ref.initial,
+    initial = _ref$initial === void 0 ? true : _ref$initial;
+  var NewAnimatePresence = AnimatePresence;
+  return /*#__PURE__*/React.createElement(NewAnimatePresence, {
+    initial: initial
+  }, children);
+}
+
+export { AnimatePresenceWrapper };

package/helperComponents/AnimatePresenceWrapper/index.d.ts

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

package/helperComponents/AnimatePresenceWrapper/index.js

@@ -0,0 +1,3 @@
+export { AnimatePresenceWrapper } from './AnimatePresenceWrapper.js';
+import 'react';
+import 'framer-motion';

package/helperComponents/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,8 @@
+import type { FC } from 'react';
+export interface Props {
+    title?: string;
+    className?: string;
+    children: string | string[];
+    language?: string;
+}
+export declare const CodeBlock: FC<Props>;

package/helperComponents/CodeBlock/CodeBlock.js

@@ -0,0 +1,178 @@
+import React from 'react';
+import { Prism } from 'react-syntax-highlighter';
+
+var atomDark = {
+  "code[class*=\"language-\"]": {
+    "color": "#c5c8c6",
+    "textShadow": "0 1px rgba(0, 0, 0, 0.3)",
+    "fontFamily": "Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace",
+    "direction": "ltr",
+    "textAlign": "left",
+    "whiteSpace": "pre",
+    "wordSpacing": "normal",
+    "wordBreak": "normal",
+    "lineHeight": "1.5",
+    "MozTabSize": "4",
+    "OTabSize": "4",
+    "tabSize": "4",
+    "WebkitHyphens": "none",
+    "MozHyphens": "none",
+    "msHyphens": "none",
+    "hyphens": "none"
+  },
+  "pre[class*=\"language-\"]": {
+    "color": "#c5c8c6",
+    "textShadow": "0 1px rgba(0, 0, 0, 0.3)",
+    "fontFamily": "Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace",
+    "direction": "ltr",
+    "textAlign": "left",
+    "whiteSpace": "pre",
+    "wordSpacing": "normal",
+    "wordBreak": "normal",
+    "lineHeight": "1.5",
+    "MozTabSize": "4",
+    "OTabSize": "4",
+    "tabSize": "4",
+    "WebkitHyphens": "none",
+    "MozHyphens": "none",
+    "msHyphens": "none",
+    "hyphens": "none",
+    "padding": "1em",
+    "margin": ".5em 0",
+    "overflow": "auto",
+    "borderRadius": "0.3em",
+    "background": "#1d1f21"
+  },
+  ":not(pre) > code[class*=\"language-\"]": {
+    "background": "#1d1f21",
+    "padding": ".1em",
+    "borderRadius": ".3em"
+  },
+  "comment": {
+    "color": "#7C7C7C"
+  },
+  "prolog": {
+    "color": "#7C7C7C"
+  },
+  "doctype": {
+    "color": "#7C7C7C"
+  },
+  "cdata": {
+    "color": "#7C7C7C"
+  },
+  "punctuation": {
+    "color": "#c5c8c6"
+  },
+  ".namespace": {
+    "Opacity": ".7"
+  },
+  "property": {
+    "color": "#96CBFE"
+  },
+  "keyword": {
+    "color": "#96CBFE"
+  },
+  "tag": {
+    "color": "#96CBFE"
+  },
+  "class-name": {
+    "color": "#FFFFB6",
+    "textDecoration": "underline"
+  },
+  "boolean": {
+    "color": "#99CC99"
+  },
+  "constant": {
+    "color": "#99CC99"
+  },
+  "symbol": {
+    "color": "#f92672"
+  },
+  "deleted": {
+    "color": "#f92672"
+  },
+  "number": {
+    "color": "#FF73FD"
+  },
+  "selector": {
+    "color": "#A8FF60"
+  },
+  "attr-name": {
+    "color": "#A8FF60"
+  },
+  "string": {
+    "color": "#A8FF60"
+  },
+  "char": {
+    "color": "#A8FF60"
+  },
+  "builtin": {
+    "color": "#A8FF60"
+  },
+  "inserted": {
+    "color": "#A8FF60"
+  },
+  "variable": {
+    "color": "#C6C5FE"
+  },
+  "operator": {
+    "color": "#EDEDED"
+  },
+  "entity": {
+    "color": "#FFFFB6",
+    "cursor": "help"
+  },
+  "url": {
+    "color": "#96CBFE"
+  },
+  ".language-css .token.string": {
+    "color": "#87C38A"
+  },
+  ".style .token.string": {
+    "color": "#87C38A"
+  },
+  "atrule": {
+    "color": "#F9EE98"
+  },
+  "attr-value": {
+    "color": "#F9EE98"
+  },
+  "function": {
+    "color": "#DAD085"
+  },
+  "regex": {
+    "color": "#E9C062"
+  },
+  "important": {
+    "color": "#fd971f",
+    "fontWeight": "bold"
+  },
+  "bold": {
+    "fontWeight": "bold"
+  },
+  "italic": {
+    "fontStyle": "italic"
+  }
+};
+
+var CodeBlock = function CodeBlock(_ref) {
+  var title = _ref.title,
+    children = _ref.children,
+    language = _ref.language,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("div", {
+    className: className,
+    style: {
+      margin: '10px 0'
+    }
+  }, title && /*#__PURE__*/React.createElement("h3", null, title), /*#__PURE__*/React.createElement(Prism, {
+    language: language !== null && language !== void 0 ? language : 'js',
+    style: atomDark,
+    wrapLines: true,
+    showLineNumbers: true
+  }, Array.isArray(children) ? children.map(function (child) {
+    return child.trim();
+  }) : children.trim()));
+};
+
+export { CodeBlock };

package/helperComponents/CodeBlock/index.d.ts

@@ -0,0 +1,2 @@
+export { CodeBlock } from './CodeBlock';
+export type { Props } from './CodeBlock';

package/helperComponents/CodeBlock/index.js

@@ -0,0 +1,3 @@
+export { CodeBlock } from './CodeBlock.js';
+import 'react';
+import 'react-syntax-highlighter';

package/helperComponents/ErrorMessage/ErrorMessage.d.ts

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

package/helperComponents/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Text } from '../../components/Text/Text.js';
+import { IconDynamicComponent } from '../IconDynamicComponent/IconDynamicComponent.js';
+import 'classnames';
+import '../../utils/helpers.js';
+import 'dayjs';
+import '../IconDynamicComponent/constants.js';
+
+var ErrorMessage = function ErrorMessage(props) {
+  var message = props.message,
+    icon = props.icon,
+    dataId = props.dataId,
+    className = props.className;
+  return /*#__PURE__*/React.createElement(Text, {
+    className: "error-message ".concat(className),
+    size: "small",
+    type: "danger",
+    dataId: dataId ? "".concat(dataId, "-error-message") : ''
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement(IconDynamicComponent, {
+    componentName: icon,
+    className: "mr-4",
+    size: "xsmall",
+    type: "danger"
+  }), /*#__PURE__*/React.createElement("span", null, message)));
+};
+
+export { ErrorMessage };

package/helperComponents/ErrorMessage/index.d.ts

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

package/helperComponents/ErrorMessage/index.js

@@ -0,0 +1,8 @@
+export { ErrorMessage } from './ErrorMessage.js';
+import 'react';
+import '../../components/Text/Text.js';
+import 'classnames';
+import '../../utils/helpers.js';
+import 'dayjs';
+import '../IconDynamicComponent/IconDynamicComponent.js';
+import '../IconDynamicComponent/constants.js';

package/helperComponents/ErrorMessage/types.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+export interface TErrorMessageProps {
+    message?: string | JSX.Element;
+    icon?: string;
+    dataId?: string;
+    className?: string;
+}

package/helperComponents/ErrorMessage/types.js

@@ -0,0 +1 @@
+

package/helperComponents/IconDynamicComponent/IconDynamicComponent.d.ts

@@ -0,0 +1,9 @@
+import type { ReactElement } from 'react';
+interface IconDynamicComponentProps {
+    componentName: string;
+    size?: string;
+    type?: string;
+    className?: string;
+}
+export declare const IconDynamicComponent: ({ componentName, size, type, className }: IconDynamicComponentProps) => ReactElement | null;
+export default IconDynamicComponent;