hrm_ui_lib 1.7.0 → 2.0.0-alpha.10

package/{Alert-79801bc1.js → Alert--0rz5XL1.js}

@@ -1,17 +1,17 @@
-import { _ as _extends } from './extends-8437dab3.js';
+import _extends from '@babel/runtime/helpers/extends';
 import React, { useMemo, forwardRef, useState, useCallback, useId, useEffect, useRef } from 'react';
-import { ICONS_MAPPING, TYPE_MAPPING } from './components/Alert/consts.js';
+import { TYPE_MAPPING, ICONS_MAPPING } from './components/Alert/consts.js';
 import classNames from 'classnames';
 import { Text } from './components/Text/Text.js';
-import { _ as _defineProperty } from './defineProperty-723e0cf1.js';
-import { _ as _objectWithoutProperties } from './objectWithoutProperties-474ef2c1.js';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import 'dayjs';
 import { Loader } from './helperComponents/Loader/Loader.js';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { FILE_ACCEPT_TYPE } from './consts/index.js';
 import './hooks/useScreenSize.js';
 import 'react-hook-form';
-import { _ as _toConsumableArray } from './toConsumableArray-6254b6dc.js';
-import { _ as _slicedToArray } from './slicedToArray-865238ba.js';
 import { ErrorCode, useDropzone } from 'react-dropzone';
 import { IconUpload } from './components/SVGIcons/IconUpload.js';
 import { FileTypeEnum } from './type/file-upload.js';
@@ -20,7 +20,7 @@ import './helpers/format-date.js';
 import { getTranslationLocale } from './helpers/locale.js';
 import 'react-toastify';
 import { useIsMobile } from './hooks/useGetIsMobile.js';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import { AnimatePresenceWrapper } from './helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
 import { useOnOutsideClick } from './hooks/useOnOutsideClick.js';
 import { useHideBodyScroll } from './hooks/useHideBodyScroll.js';
@@ -29,16 +29,19 @@ import { Positions } from './components/Tooltip/types.js';
 import { Tooltip } from './components/Tooltip/Tooltip.js';
 import { uniqueFiles, noop } from './utils/helpers.js';
 import 'react-syntax-highlighter';
+import 'react-syntax-highlighter/dist/esm/styles/prism';
 import { Link } from './components/Link/Link.js';
 import { PopoverDesktop } from './components/Popover/PopoverDesktop.js';
 import { IconInfo } from './components/SVGIcons/IconInfo.js';
-import { IconDynamicComponent } from './helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import { IconDynamicComponent } from './components/IconDynamicComponent/IconDynamicComponent.js';
+import 'react-toastify/dist/ReactToastify.css';
+import '@babel/runtime/helpers/typeof';
 import { IconDismissFilled } from './components/SVGIcons/IconDismissFilled.js';
 import { IconDelete } from './components/SVGIcons/IconDelete.js';
 import { FilePreview } from './components/FileUpload/DropzoneFileUpload/FilePreview.js';
 import { IconArrowDownloadFilled } from './components/SVGIcons/IconArrowDownloadFilled.js';
 import { downloadFile } from './helpers/download-file.js';
-import { LITE_LOADER_TYPES, ICON_SIZE_MAPPING, ICON_TYPE_MAPPING } from './components/Button/consts.js';
+import { LITE_LOADER_TYPES, ICON_TYPE_MAPPING, ICON_SIZE_MAPPING } from './components/Button/consts.js';
 
 var shortenFileName = function shortenFileName(fileName, maxLength) {
   // Regular expression to split the name into three parts: start, middle, and extension
@@ -65,14 +68,14 @@ var formatFileSize = function formatFileSize(sizeInBytes) {
   }
 };
 var generateAreaContent = function generateAreaContent(_ref) {
-  var accept = _ref.accept,
+  var allowedTypes = _ref.allowedTypes,
     maxSize = _ref.maxSize,
     locale = _ref.locale;
-  var acceptTypes = accept.map(function (type) {
+  var acceptTypes = allowedTypes.map(function (type) {
     return FILE_ACCEPT_TYPE[type];
   }).flat();
   var translation = getDropzoneLocale(locale);
-  var acceptTypesMessage = accept.length === 1 ? accept[0] : accept.reduce(function (acc, currentValue, _index, _arr) {
+  var acceptTypesMessage = allowedTypes.length === 1 ? allowedTypes[0] : allowedTypes.reduce(function (acc, currentValue, _index, _arr) {
     if (_index === _arr.length - 1) {
       return "".concat(acc, " ").concat(translation.or, " ").concat(currentValue);
     }
@@ -203,8 +206,8 @@ var PreviewItem = function PreviewItem(_ref) {
 var DropzoneFileUpload = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
   var _ref2$maxSize = _ref2.maxSize,
     maxSize = _ref2$maxSize === void 0 ? 10 * 1024 * 1024 : _ref2$maxSize,
-    _ref2$accept = _ref2.accept,
-    accept = _ref2$accept === void 0 ? [FileTypeEnum.IMAGE, FileTypeEnum.PDF, FileTypeEnum.DOC] : _ref2$accept,
+    _ref2$allowedTypes = _ref2.allowedTypes,
+    allowedTypes = _ref2$allowedTypes === void 0 ? [FileTypeEnum.IMAGE, FileTypeEnum.PDF, FileTypeEnum.DOC] : _ref2$allowedTypes,
     name = _ref2.name,
     setFiles = _ref2.setFiles,
     setFieldValue = _ref2.setFieldValue,
@@ -224,7 +227,7 @@ var DropzoneFileUpload = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
     errors = _useState2[0],
     setErrors = _useState2[1];
   var areaContent = generateAreaContent({
-    accept: accept,
+    allowedTypes: allowedTypes,
     maxSize: maxSize
   });
   var translation = getDropzoneLocale(locale);
@@ -295,7 +298,7 @@ var DropzoneFileUpload = /*#__PURE__*/forwardRef(function (_ref2, _ref) {
     className: "mb-6"
   }, translation.title), /*#__PURE__*/React.createElement(Text, {
     size: "small"
-  }, "".concat(areaContent.acceptTypesMessage, " ").concat(areaContent.acceptTypes.length === 1 ? translation.format : translation.formats, ", ").concat(translation.maxSize.replace('$1', areaContent.maxSizeFormatted)))) : null, /*#__PURE__*/React.createElement("div", {
+  }, "".concat(areaContent.acceptTypesMessage, " ").concat((allowedTypes === null || allowedTypes === void 0 ? void 0 : allowedTypes.length) === 1 ? translation.format : translation.formats, ", ").concat(translation.maxSize.replace('$1', areaContent.maxSizeFormatted)))) : null, /*#__PURE__*/React.createElement("div", {
     className: "dz-file-upload__files"
   }, errors.map(function (_ref3, index) {
     var code = _ref3.code;
@@ -488,14 +491,16 @@ var PopoverMobile = function PopoverMobile(props) {
   }, text))), children);
 };
 
-var _excluded$1 = ["elemRef", "id", "clicked"];
+var _excluded$1 = ["elemRef", "id", "clicked", "stopPropagation"];
 var Popover = function Popover(props) {
   var elemRef = props.elemRef,
     id = props.id,
-    clicked = props.clicked,
+    _props$clicked = props.clicked,
+    clicked = _props$clicked === void 0 ? false : _props$clicked,
+    stopPropagation = props.stopPropagation,
     rest = _objectWithoutProperties(props, _excluded$1);
   var isMobile = useIsMobile();
-  var _useState = useState(false),
+  var _useState = useState(clicked),
     _useState2 = _slicedToArray(_useState, 2),
     isClicked = _useState2[0],
     setIsClicked = _useState2[1];
@@ -503,8 +508,9 @@ var Popover = function Popover(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     parent = _useState4[0],
     setElement = _useState4[1];
-  var showMessage = function showMessage() {
-    return setIsClicked(true);
+  var showMessage = function showMessage(evnt) {
+    if (stopPropagation) evnt.stopImmediatePropagation();
+    setIsClicked(true);
   };
   var hideMessage = function hideMessage() {
     return setIsClicked(false);
@@ -560,11 +566,14 @@ var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
     _props$helperText = props.helperText,
     helperText = _props$helperText === void 0 ? '' : _props$helperText,
     popoverAddons = props.popoverAddons,
-    isInvalid = props.isInvalid;
+    isInvalid = props.isInvalid,
+    _props$stopPropagatio = props.stopPropagation,
+    stopPropagation = _props$stopPropagatio === void 0 ? false : _props$stopPropagatio;
   var localRef = useRef(null);
   var inputRef = ref && Object.keys(ref).length ? ref : localRef;
   var isChecked = !!value || selectedValue;
-  var changeHandler = function changeHandler() {
+  var changeHandler = function changeHandler(e) {
+    stopPropagation && e.stopPropagation();
     if (name && setFieldValue) {
       setFieldValue(name, !isChecked, {
         shouldValidate: !isChecked
@@ -583,10 +592,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
     type: "information",
     size: "xsmall",
     className: 'ml-4 pointer',
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      changeHandler();
-    }
+    onClick: changeHandler
   }))) : null;
   var checkboxLabel = useMemo(function () {
     if (!label) {
@@ -619,7 +625,10 @@ var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
       'controller--checkbox': true,
       'controller--disabled': disabled,
       'controller--error': isInvalid
-    }, className, !!className))
+    }, className, !!className)),
+    onClick: function onClick(e) {
+      return stopPropagation && e.stopPropagation();
+    }
   }, /*#__PURE__*/React.createElement("input", {
     "data-id": dataId,
     type: "checkbox",
@@ -747,4 +756,4 @@ var Alert = function Alert(props) {
   }) : null));
 };
 
-export { Alert as A, Button as B, Checkbox as C, DropzoneFileUpload as D, ErrorItem as E, Modal as M, Popover as P, MOBILE_ANIMATION as a, getDropzoneLocale as b, PreviewItem as c, ModalContent as d, PopoverMobile as e, formatFileSize as f, generateAreaContent as g, shortenFileName as s };
+export { Alert as A, Button as B, Checkbox as C, DropzoneFileUpload as D, ErrorItem as E, MOBILE_ANIMATION as M, Popover as P, Modal as a, getDropzoneLocale as b, PreviewItem as c, ModalContent as d, PopoverMobile as e, formatFileSize as f, generateAreaContent as g, shortenFileName as s };

package/README.md

@@ -0,0 +1,76 @@
+# People Space UI Tools
+
+See [UI library]([https://hrmuilibrary.github.io/hrm_ui_library]) for live demos and comprehensive docs.
+
+# Installation and usage
+```
+npm install hrm_ui_lib
+```
+
+Then use it in your app:
+```jsx
+import React from 'react';
+import { Button } from 'hrm_ui_lib/components/Button';
+import 'hrm_ui_lib/assets/styles/styles.scss'; 
+// Or you can import the styles.css file
+// import 'hrm_ui_lib/assets/styles/styles.css';
+
+const App = () => {
+  return <Button>Click me</Button>;
+};
+```
+
+How to use mixins:
+```scss
+@use "hrm_ui_lib/assets/styles/helpers/mixin";
+
+.divider {
+    @include mixin.flexbox();
+}
+```
+
+# How to create new icon
+    1. Add a new svg file in `svg-icons` folder.
+    2. Make sure the icon is matching with the design.
+    3. Make sure the svg file name is matching with pattern like this `chevron-right.svg`.
+    4. Run `npm run generate-svg-component` command to generate the new icon component.
+
+# How to create new component
+    1. Add a folder with the component name in `src/components/` folder.
+    2. Add a style file in the `assets/styles/components` fodler with the name `_componentName.scss`.
+    3. Import the created style file in `assets/styles/styles.scss` file using @use syntax.
+    4. Develop component based on the design.
+    5. Add `coomponentName.stories.tsx` file in src/stories folder to test created component.
+    6. Make sure you don't have type error and the component is matching with the design.
+    7. If everything is ok you can create a pull request into the master branch with correct commit message (you can read about it below).
+    8. The new version will be published automatically after the pull request is reviewed and merged.
+
+## Automated Releases with Semantic Release
+
+This project uses [Semantic Release](https://semantic-release.gitbook.io/semantic-release/) to automate versioning and releases. It follows [Semantic Versioning](https://semver.org/) (semver) and determines the next version number based on commit messages.
+
+### How It Works
+
+    Semantic Release automates:
+
+    1. Version number updates.
+    2. Release notes generation.
+    3. Package publishing to npm.
+    4. GitHub release creation.
+
+### Commit Message Guidelines
+
+Semantic Release uses [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) to determine release types:
+
+    `fix:` – for bug fixes (patch release)
+    `feat:` – for new features (minor release)
+    `BREAKING CHANGE:` – for breaking changes (major release)
+
+### Releasing
+
+To trigger a release:
+
+    1. Commit your changes using the conventional commit format.
+    2. Open a pull request and merge it into the `master` branch with the appropriate commit message.
+
+Semantic Release will handle the rest, including publishing to npm and creating a GitHub release.