@cashub/ui-elv 1.0.0

package/dropzone/ImageDropzone.js

@@ -0,0 +1,334 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _fi = require("react-icons/fi");
+var _md = require("react-icons/md");
+var _utils = require("@cashub/utils");
+var _HiddenFileInput = _interopRequireDefault(require("../file/HiddenFileInput"));
+var _Message = _interopRequireDefault(require("./subComponent/Message"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ImageDropzone = _ref => {
+  let {
+    width = 180,
+    height = 320,
+    fixedSize = true,
+    maxFiles,
+    message,
+    accept,
+    disabled,
+    onAddedFile,
+    onRemovedFile,
+    setDropzoneFunc,
+    cropper,
+    onBlur
+  } = _ref;
+  const inputRef = (0, _react.useRef)(null);
+  const [files, setFiles] = (0, _react.useState)([]);
+  const [dragging, setDragging] = (0, _react.useState)(false);
+  const [addedFiles, setAddedFiles] = (0, _react.useState)([]);
+  const [focus, setFocus] = (0, _react.useState)(false);
+  const handleClick = () => {
+    if (disabled || files.length >= maxFiles) return;
+    setFocus(false);
+    inputRef.current.click();
+  };
+  const handleDragEnter = event => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!disabled && files.length < maxFiles) setDragging(true);
+  };
+  const handleDragOver = event => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!disabled && files.length < maxFiles) setDragging(true);
+  };
+  const handleDragLeave = event => {
+    event.preventDefault();
+    event.stopPropagation();
+    setDragging(false);
+  };
+  const handleDrop = event => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!disabled && files.length < maxFiles) {
+      setDragging(false);
+      const {
+        dataTransfer
+      } = event;
+      const {
+        files: [...newFiles]
+      } = dataTransfer;
+      if (files.length + newFiles.length > maxFiles) {
+        newFiles.splice(maxFiles - files.length);
+      }
+      for (let index = 0; index < newFiles.length; index += 1) {
+        newFiles[index].url = URL.createObjectURL(newFiles[index]);
+      }
+      setFiles([...files, ...newFiles]);
+      setAddedFiles(newFiles);
+    }
+  };
+  const handleAddFiles = (0, _react.useCallback)(newFiles => {
+    setFiles(previous => {
+      if (previous.length + newFiles.length > maxFiles) {
+        newFiles.splice(maxFiles - previous.length);
+      }
+      return [...previous, ...newFiles];
+    });
+    for (let index = 0; index < newFiles.length; index += 1) {
+      newFiles[index].url = URL.createObjectURL(newFiles[index]);
+    }
+    setAddedFiles(newFiles);
+  }, [maxFiles]);
+  const handleRemoveFile = (0, _react.useCallback)((event, index) => {
+    if (event) {
+      event.stopPropagation();
+    }
+    setFiles(previous => {
+      const newFiles = [...previous];
+      newFiles.splice(index, 1);
+      return newFiles;
+    });
+    if (onRemovedFile) onRemovedFile(index);
+  }, [onRemovedFile]);
+  const handleChangeFile = (0, _react.useCallback)(event => {
+    const {
+      files
+    } = event.target;
+    const newFiles = [];
+    for (let index = 0; index < files.length; index += 1) {
+      newFiles.push(files[index]);
+    }
+    handleAddFiles(newFiles);
+    inputRef.current.value = '';
+  }, [handleAddFiles]);
+  const handleCrop = (0, _react.useCallback)((event, index, file) => {
+    event.stopPropagation();
+    setFocus(false);
+    cropper.handler({
+      file,
+      src: file.url,
+      width,
+      height,
+      cropBoxResizable: cropper.cropBoxResizable ? cropper.cropBoxResizable : false,
+      onCrop: croppedSrc => {
+        const croppedImageFile = (0, _utils.dataURLtoFile)(croppedSrc, file.name);
+        croppedImageFile.url = croppedSrc;
+        cropper.onCrop(index, croppedImageFile);
+        setFiles(previousFiles => {
+          const newFiles = [...previousFiles];
+          newFiles[index] = croppedImageFile;
+          return newFiles;
+        });
+      }
+    });
+  }, [width, height, cropper]);
+  const previewItem = () => {
+    return files.map((file, index) => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Image, {
+        width: width,
+        height: height,
+        fixedSize: fixedSize,
+        onClick: event => {
+          event.stopPropagation();
+        },
+        children: [!disabled && /*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonGroup, {
+          children: [cropper && /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
+            title: "Crop",
+            onClick: event => handleCrop(event, index, file),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdCrop, {})
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
+            danger: true,
+            title: "Remove",
+            onClick: event => handleRemoveFile(event, index),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fi.FiX, {})
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          crossOrigin: "anonymous",
+          src: file.url,
+          alt: file.name
+        })]
+      }, index);
+    });
+  };
+  const addFiles = (0, _react.useCallback)(files => {
+    handleAddFiles(files);
+  }, [handleAddFiles]);
+  const remove = (0, _react.useCallback)(index => {
+    handleRemoveFile(null, index);
+  }, [handleRemoveFile]);
+  const handleBlur = () => {
+    if (focus) {
+      if (onBlur) {
+        onBlur();
+      }
+      setFocus(false);
+    }
+  };
+  (0, _react.useEffect)(() => {
+    if (addedFiles.length > 0 && onAddedFile) {
+      const startIndex = files.length - addedFiles.length;
+      addedFiles.forEach((file, index) => {
+        onAddedFile(file, startIndex + index);
+      });
+      setAddedFiles([]);
+    }
+  }, [addedFiles, onAddedFile, files]);
+  (0, _react.useEffect)(() => {
+    setDropzoneFunc({
+      addFiles,
+      remove
+    });
+  }, [setDropzoneFunc, addFiles, remove]);
+  const messageItem = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Message.default, {
+    dragging: dragging,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_fi.FiUpload, {
+      role: "img",
+      "aria-hidden": "true",
+      "data-icon": "upload"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: message
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    tabIndex: "-1",
+    disabled: disabled,
+    dragging: dragging,
+    onClick: handleClick,
+    onDragEnter: handleDragEnter,
+    onDragLeave: handleDragLeave,
+    onDragOver: handleDragOver,
+    onDrop: handleDrop,
+    reachedLimit: files.length >= maxFiles,
+    onBlur: handleBlur,
+    onFocus: () => {
+      setFocus(true);
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HiddenFileInput.default, {
+      disabled: disabled,
+      multiple: true,
+      ref: inputRef,
+      accept: accept,
+      onChange: handleChangeFile
+    }), files.length === 0 ? messageItem : previewItem()]
+  });
+};
+const Wrapper = _styledComponents.default.div`
+  min-height: 200px;
+  border: 4px dashed var(--border-color);
+  border-radius: var(--border-radius-l);
+  color: var(--font-on-background);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  padding: var(--spacing-xs);
+  cursor: pointer;
+
+  ${_ref2 => {
+  let {
+    reachedLimit
+  } = _ref2;
+  return reachedLimit && 'cursor:default;';
+}};
+
+  ${_ref3 => {
+  let {
+    disabled
+  } = _ref3;
+  return disabled && 'cursor:not-allowed; opacity: 0.5;';
+}};
+
+  ${_ref4 => {
+  let {
+    dragging
+  } = _ref4;
+  return dragging && 'border-color: var(--color-primary);';
+}};
+
+  &:focus {
+    border-color: var(--color-primary);
+  }
+`;
+const Image = _styledComponents.default.figure`
+  position: relative;
+  margin: var(--spacing-xs);
+
+  ${_ref5 => {
+  let {
+    width,
+    height,
+    fixedSize
+  } = _ref5;
+  if (fixedSize) {
+    return `
+        width: ${width}px;
+        height: ${height}px;
+      `;
+  }
+  if (width < height) {
+    return `
+        width: ${width}px;
+        max-width: ${width}px;
+        max-height: ${height}px;
+      `;
+  }
+  if (height < width) {
+    return `
+        height: ${height}px;
+        max-width: ${width}px;
+        max-height: ${height}px;
+      `;
+  }
+}}
+
+  > img {
+    width: 100%;
+    height: 100%;
+    border-radius: var(--border-radius);
+  }
+`;
+const ButtonGroup = _styledComponents.default.div`
+  position: absolute;
+  right: calc(var(--spacing-xs) * -1);
+  top: calc(var(--spacing-xs) * -1);
+`;
+const Button = _styledComponents.default.div.attrs(() => ({
+  role: 'button'
+}))`
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  color: var(--color-white);
+  background: var(--color-primary);
+  border-radius: var(--border-radius-round);
+  cursor: pointer;
+
+  > svg {
+    color: var(--color-white);
+    margin: 0 auto;
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+    margin: 0 auto;
+    display: block;
+  }
+
+  &:not(:first-child) {
+    margin-left: var(--spacing-xs);
+  }
+
+  ${_ref6 => {
+  let {
+    danger
+  } = _ref6;
+  return danger && 'background: var(--color-danger);';
+}}
+`;
+var _default = exports.default = ImageDropzone;

package/dropzone/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FileDropzone", {
+  enumerable: true,
+  get: function () {
+    return _FileDropzone.default;
+  }
+});
+Object.defineProperty(exports, "ImageDropzone", {
+  enumerable: true,
+  get: function () {
+    return _ImageDropzone.default;
+  }
+});
+var _FileDropzone = _interopRequireDefault(require("./FileDropzone"));
+var _ImageDropzone = _interopRequireDefault(require("./ImageDropzone"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dropzone/subComponent/Message.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Message = _styledComponents.default.div.attrs(() => ({
+  'data-testid': 'message-container'
+}))`
+  text-align: center;
+
+  > svg {
+    margin-bottom: var(--spacing-s);
+    font-size: var(--font-h2);
+  }
+
+  ${_ref => {
+  let {
+    dragging
+  } = _ref;
+  return dragging ? 'opacity: 0.5' : '';
+}};
+`;
+var _default = exports.default = Message;

package/figure/IconFigure.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const IconFigure = _styledComponents.default.figure.attrs(_ref => {
+  let {
+    size
+  } = _ref;
+  return {
+    size: size || 'medium'
+  };
+})`
+  ${_ref2 => {
+  let {
+    size
+  } = _ref2;
+  switch (size) {
+    case 'small':
+      return `
+          width: 16px;
+          height: 16px;
+        `;
+    case 'medium':
+      return `
+          width: 24px;
+          height: 24px;
+        `;
+    case 'large':
+      return `
+          width: 32px;
+          height: 32px;
+        `;
+    default:
+      break;
+  }
+}}
+`;
+var _default = exports.default = IconFigure;

package/figure/ImageFigure.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _rounded = _interopRequireDefault(require("../styles/mixin/rounded"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ImageFigure = _styledComponents.default.figure.attrs(() => ({
+  rounded: true
+}))`
+  width: 160px;
+  height: 160px;
+  border: 4px dashed var(--border-color);
+  padding: var(--spacing-xs);
+  margin-left: var(--spacing);
+
+  ${_ref => {
+  let {
+    small
+  } = _ref;
+  return small && `
+      width: 40px;
+      height: 40px;
+    `;
+}}
+
+  ${_rounded.default}
+
+  ${_ref2 => {
+  let {
+    noBorder
+  } = _ref2;
+  return noBorder && 'border: none;';
+}}
+`;
+var _default = exports.default = ImageFigure;

package/figure/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "IconFigure", {
+  enumerable: true,
+  get: function () {
+    return _IconFigure.default;
+  }
+});
+Object.defineProperty(exports, "ImageFigure", {
+  enumerable: true,
+  get: function () {
+    return _ImageFigure.default;
+  }
+});
+var _IconFigure = _interopRequireDefault(require("./IconFigure"));
+var _ImageFigure = _interopRequireDefault(require("./ImageFigure"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/file/HiddenFileInput.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const HiddenFileInput = _styledComponents.default.input.attrs(() => ({
+  'data-testid': 'hiddenFileInput',
+  type: 'file'
+}))`
+  display: none;
+`;
+var _default = exports.default = HiddenFileInput;

package/file/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "HiddenFileInput", {
+  enumerable: true,
+  get: function () {
+    return _HiddenFileInput.default;
+  }
+});
+var _HiddenFileInput = _interopRequireDefault(require("./HiddenFileInput"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/form/Checkbox.js

@@ -0,0 +1,166 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _Input = _interopRequireDefault(require("./Input"));
+var _Label = _interopRequireDefault(require("./Label"));
+var _md = require("react-icons/md");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Checkbox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    htmlFor,
+    text,
+    disabled,
+    checked,
+    indeterminate,
+    onChange,
+    noMargin,
+    fontSizeBig,
+    marginRight,
+    variant = 'square'
+  } = _ref;
+  const inputRef = (0, _react.useRef)(null);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledLabel, {
+    htmlFor: htmlFor,
+    disabled: disabled,
+    ref: ref,
+    noMargin: noMargin,
+    fontSizeBig: fontSizeBig,
+    marginRight: marginRight,
+    variant: variant,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCheckbox, {
+      ref: inputRef,
+      checked: checked,
+      "aria-checked": indeterminate ? 'mixed' : checked,
+      type: "checkbox",
+      id: htmlFor,
+      disabled: disabled,
+      onChange: onChange,
+      fontSizeBig: fontSizeBig
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Unchecked, {
+        variant: variant
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Checked, {
+        variant: variant,
+        children: indeterminate ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdRemove, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdDone, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Text, {
+        children: text
+      })]
+    })]
+  });
+});
+const StyledCheckbox = (0, _styledComponents.default)(_Input.default)`
+  display: none;
+
+  &:checked + span {
+    > div:last-of-type {
+      display: block;
+      color: var(--color-primary);
+    }
+
+    > div:first-of-type {
+      display: none;
+    }
+  }
+`;
+const StyledLabel = (0, _styledComponents.default)(_Label.default)`
+  display: inline-block;
+  cursor: pointer;
+  vertical-align: middle;
+
+  ${_ref2 => {
+  let {
+    marginRight
+  } = _ref2;
+  return marginRight && (0, _styledComponents.css)`
+      margin-right: var(--spacing-l);
+    `;
+}}
+
+  > span {
+    ${_ref3 => {
+  let {
+    disabled
+  } = _ref3;
+  return disabled && (0, _styledComponents.css)`
+        opacity: 0.5;
+        cursor: not-allowed;
+      `;
+}}
+
+    display: flex;
+    align-items: center;
+
+    > div {
+      margin-right: var(--spacing-xs);
+      width: 24px;
+      height: 24px;
+      border-radius: ${_ref4 => {
+  let {
+    variant
+  } = _ref4;
+  return variant === 'circle' ? '50%' : '4px';
+}};
+    }
+
+    > div:last-of-type {
+      display: none;
+    }
+  }
+
+  ${_ref5 => {
+  let {
+    fontSizeBig
+  } = _ref5;
+  return fontSizeBig && 'font-size: var(--font-h3);';
+}}
+
+  ${_ref6 => {
+  let {
+    noMargin
+  } = _ref6;
+  return noMargin && 'margin: 0;';
+}}
+`;
+const Unchecked = _styledComponents.default.div`
+  flex: 0 0 auto;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: ${_ref7 => {
+  let {
+    variant
+  } = _ref7;
+  return variant === 'circle' ? '50%' : '4px';
+}};
+`;
+const Checked = _styledComponents.default.div`
+  flex: 0 0 auto;
+  border: var(--border-width) solid var(--color-primary);
+  background: var(--color-primary);
+  position: relative;
+  border-radius: ${_ref8 => {
+  let {
+    variant
+  } = _ref8;
+  return variant === 'circle' ? '50%' : '4px';
+}};
+
+  > svg {
+    position: absolute;
+    color: var(--font-on-primary);
+    font-size: var(--font-h3);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+`;
+const Text = _styledComponents.default.p`
+  word-break: break-all;
+`;
+var _default = exports.default = Checkbox;

package/form/Fieldset.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Fieldset = _styledComponents.default.fieldset`
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius-s);
+  padding: var(--spacing-s);
+
+  &[disabled] {
+    border-color: var(--border-color-transparent);
+  }
+`;
+var _default = exports.default = Fieldset;