@cashub/ui-elv 1.0.2 → 1.0.3

package/esm/dropzone/ImageDropzone.js

@@ -0,0 +1,327 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { FiX, FiUpload } from 'react-icons/fi/index.esm';
+import { MdCrop } from 'react-icons/md/index.esm';
+import { dataURLtoFile } from '@cashub/utils';
+import HiddenFileInput from '../file/HiddenFileInput';
+import Message from './subComponent/Message';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ImageDropzone = _ref => {
+  let {
+    width = 180,
+    height = 320,
+    fixedSize = true,
+    maxFiles,
+    message,
+    accept,
+    disabled,
+    onAddedFile,
+    onRemovedFile,
+    setDropzoneFunc,
+    cropper,
+    onBlur
+  } = _ref;
+  const inputRef = useRef(null);
+  const [files, setFiles] = useState([]);
+  const [dragging, setDragging] = useState(false);
+  const [addedFiles, setAddedFiles] = useState([]);
+  const [focus, setFocus] = 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 = 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 = 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 = 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 = 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 = 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__*/_jsxs(Image, {
+        width: width,
+        height: height,
+        fixedSize: fixedSize,
+        onClick: event => {
+          event.stopPropagation();
+        },
+        children: [!disabled && /*#__PURE__*/_jsxs(ButtonGroup, {
+          children: [cropper && /*#__PURE__*/_jsx(Button, {
+            title: "Crop",
+            onClick: event => handleCrop(event, index, file),
+            children: /*#__PURE__*/_jsx(MdCrop, {})
+          }), /*#__PURE__*/_jsx(Button, {
+            danger: true,
+            title: "Remove",
+            onClick: event => handleRemoveFile(event, index),
+            children: /*#__PURE__*/_jsx(FiX, {})
+          })]
+        }), /*#__PURE__*/_jsx("img", {
+          crossOrigin: "anonymous",
+          src: file.url,
+          alt: file.name
+        })]
+      }, index);
+    });
+  };
+  const addFiles = useCallback(files => {
+    handleAddFiles(files);
+  }, [handleAddFiles]);
+  const remove = useCallback(index => {
+    handleRemoveFile(null, index);
+  }, [handleRemoveFile]);
+  const handleBlur = () => {
+    if (focus) {
+      if (onBlur) {
+        onBlur();
+      }
+      setFocus(false);
+    }
+  };
+  useEffect(() => {
+    if (addedFiles.length > 0 && onAddedFile) {
+      const startIndex = files.length - addedFiles.length;
+      addedFiles.forEach((file, index) => {
+        onAddedFile(file, startIndex + index);
+      });
+      setAddedFiles([]);
+    }
+  }, [addedFiles, onAddedFile, files]);
+  useEffect(() => {
+    setDropzoneFunc({
+      addFiles,
+      remove
+    });
+  }, [setDropzoneFunc, addFiles, remove]);
+  const messageItem = /*#__PURE__*/_jsxs(Message, {
+    dragging: dragging,
+    children: [/*#__PURE__*/_jsx(FiUpload, {
+      role: "img",
+      "aria-hidden": "true",
+      "data-icon": "upload"
+    }), /*#__PURE__*/_jsx("p", {
+      children: message
+    })]
+  });
+  return /*#__PURE__*/_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__*/_jsx(HiddenFileInput, {
+      disabled: disabled,
+      multiple: true,
+      ref: inputRef,
+      accept: accept,
+      onChange: handleChangeFile
+    }), files.length === 0 ? messageItem : previewItem()]
+  });
+};
+const Wrapper = styled.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 = styled.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 = styled.div`
+  position: absolute;
+  right: calc(var(--spacing-xs) * -1);
+  top: calc(var(--spacing-xs) * -1);
+`;
+const Button = styled.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);';
+}}
+`;
+export default ImageDropzone;

package/esm/dropzone/index.js

@@ -0,0 +1,2 @@
+export { default as FileDropzone } from './FileDropzone';
+export { default as ImageDropzone } from './ImageDropzone';

package/esm/dropzone/subComponent/Message.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+const Message = styled.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' : '';
+}};
+`;
+export default Message;

package/esm/figure/IconFigure.js

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+const IconFigure = styled.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;
+  }
+}}
+`;
+export default IconFigure;

package/esm/figure/ImageFigure.js

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+import rounded from '../styles/mixin/rounded';
+const ImageFigure = styled.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}
+
+  ${_ref2 => {
+  let {
+    noBorder
+  } = _ref2;
+  return noBorder && 'border: none;';
+}}
+`;
+export default ImageFigure;

package/esm/figure/index.js

@@ -0,0 +1,2 @@
+export { default as IconFigure } from './IconFigure';
+export { default as ImageFigure } from './ImageFigure';

package/esm/file/HiddenFileInput.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+const HiddenFileInput = styled.input.attrs(() => ({
+  'data-testid': 'hiddenFileInput',
+  type: 'file'
+}))`
+  display: none;
+`;
+export default HiddenFileInput;

package/esm/file/index.js

@@ -0,0 +1 @@
+export { default as HiddenFileInput } from './HiddenFileInput';

package/esm/form/Checkbox.js

@@ -0,0 +1,157 @@
+import { forwardRef, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import Input from './Input';
+import Label from './Label';
+import { MdDone, MdRemove } from 'react-icons/md/index.esm';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Checkbox = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    htmlFor,
+    text,
+    disabled,
+    checked,
+    indeterminate,
+    onChange,
+    noMargin,
+    fontSizeBig,
+    marginRight,
+    variant = 'square'
+  } = _ref;
+  const inputRef = useRef(null);
+  return /*#__PURE__*/_jsxs(StyledLabel, {
+    htmlFor: htmlFor,
+    disabled: disabled,
+    ref: ref,
+    noMargin: noMargin,
+    fontSizeBig: fontSizeBig,
+    marginRight: marginRight,
+    variant: variant,
+    children: [/*#__PURE__*/_jsx(StyledCheckbox, {
+      ref: inputRef,
+      checked: checked,
+      "aria-checked": indeterminate ? 'mixed' : checked,
+      type: "checkbox",
+      id: htmlFor,
+      disabled: disabled,
+      onChange: onChange,
+      fontSizeBig: fontSizeBig
+    }), /*#__PURE__*/_jsxs("span", {
+      children: [/*#__PURE__*/_jsx(Unchecked, {
+        variant: variant
+      }), /*#__PURE__*/_jsx(Checked, {
+        variant: variant,
+        children: indeterminate ? /*#__PURE__*/_jsx(MdRemove, {}) : /*#__PURE__*/_jsx(MdDone, {})
+      }), /*#__PURE__*/_jsx(Text, {
+        children: text
+      })]
+    })]
+  });
+});
+const StyledCheckbox = styled(Input)`
+  display: none;
+
+  &:checked + span {
+    > div:last-of-type {
+      display: block;
+      color: var(--color-primary);
+    }
+
+    > div:first-of-type {
+      display: none;
+    }
+  }
+`;
+const StyledLabel = styled(Label)`
+  display: inline-block;
+  cursor: pointer;
+  vertical-align: middle;
+
+  ${_ref2 => {
+  let {
+    marginRight
+  } = _ref2;
+  return marginRight && css`
+      margin-right: var(--spacing-l);
+    `;
+}}
+
+  > span {
+    ${_ref3 => {
+  let {
+    disabled
+  } = _ref3;
+  return disabled && 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 = styled.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 = styled.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 = styled.p`
+  word-break: break-all;
+`;
+export default Checkbox;

package/esm/form/Fieldset.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+const Fieldset = styled.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);
+  }
+`;
+export default Fieldset;

package/esm/form/FormItem.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+const FormItem = styled.div`
+  margin-bottom: var(--spacing);
+
+  ${_ref => {
+  let {
+    alignCenter
+  } = _ref;
+  return alignCenter && `
+    display: flex;
+    align-items: center;
+  `;
+}}
+`;
+export default FormItem;

package/esm/form/Input.js

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+import inputPlaceholder from '../styles/mixin/inputPlaceholder';
+const Input = styled.input`
+  display: block;
+  width: 100%;
+  height: 36px;
+  border: var(--border-width) solid var(--border-color);
+  padding: 10px var(--spacing-s);
+  border-radius: var(--border-radius-l);
+  background: transparent;
+  color: var(--font-on-background);
+  transition: 0.3s;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  &:focus {
+    border: var(--border-width) solid var(--color-primary);
+    outline: none;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  ${inputPlaceholder`
+    color: var(--font-on-mute);
+  `}
+
+  ${_ref => {
+  let {
+    hidden
+  } = _ref;
+  return hidden && 'display: none;';
+}}
+
+  ${_ref2 => {
+  let {
+    borderRadiusS
+  } = _ref2;
+  return borderRadiusS && 'border-radius: var(--border-radius-s);';
+}}
+
+  ${_ref3 => {
+  let {
+    alignCenter
+  } = _ref3;
+  return alignCenter && 'text-align: center;';
+}}
+
+  ${_ref4 => {
+  let {
+    autoWidth
+  } = _ref4;
+  return autoWidth && 'width: auto;';
+}};
+`;
+export default Input;