@bosonprotocol/react-kit 0.32.0-alpha.8 → 0.32.0

package/src/components/form/{Textarea.tsx → BaseTextArea.tsx}

@@ -4,15 +4,20 @@ import React from "react";
 import Error from "./Error";
 import { FieldTextArea } from "./Field.styles";
 import type { TextareaProps } from "./types";
-
-export default function Textarea({ name, ...props }: TextareaProps) {
+export type BaseTextAreaProps = TextareaProps;
+export function BaseTextArea({ name, theme, ...props }: TextareaProps) {
   const [field, meta] = useField(name);
   const errorMessage = meta.error && meta.touched ? meta.error : "";
   const displayError =
     typeof errorMessage === typeof "string" && errorMessage !== "";
   return (
     <>
-      <FieldTextArea error={errorMessage} {...field} {...props} />
+      <FieldTextArea
+        $error={errorMessage}
+        {...field}
+        {...props}
+        theme={theme}
+      />
       <Error display={displayError} message={errorMessage} />
     </>
   );

package/src/components/form/Field.styles.ts

@@ -61,7 +61,6 @@ export const FieldInput = styled.input<{
   border: 1px solid ${(props) => props.theme?.borderColor || colors.border};
   border-radius: ${(props) => props.theme?.borderRadius || 0}px;
   outline: none;
-  font-family: "Plus Jakarta Sans";
 
   ${transition}
 
@@ -116,7 +115,7 @@ export const FieldInput = styled.input<{
     `};
 `;
 
-export const FileUploadWrapper = styled.div<{ choosen: any; error: any }>`
+export const FileUploadWrapper = styled.div<{ error: any }>`
   position: relative;
   overflow: hidden;
   display: flex;
@@ -210,16 +209,38 @@ export const FieldFileUploadWrapper = styled.div<{ $disabled: boolean }>`
     background: ${colors.black}80;
   }
 `;
-
-export const FieldTextArea = styled.textarea<{ error: any }>`
+export type TextAreaTheme = {
+  background: CSSProperties["backgroundColor"];
+  borderColor: CSSProperties["borderColor"];
+  borderRadius: CSSProperties["borderRadius"];
+  focus: {
+    caretColor: CSSProperties["caretColor"];
+  };
+  hover: {
+    borderColor: CSSProperties["borderColor"];
+  };
+  error: {
+    borderColor: CSSProperties["borderColor"];
+    hover: {
+      borderColor: CSSProperties["borderColor"];
+    };
+    focus: {
+      borderColor: CSSProperties["borderColor"];
+      caretColor: CSSProperties["caretColor"];
+    };
+    placeholder: {
+      color: CSSProperties["color"];
+    };
+  };
+};
+export const FieldTextArea = styled.textarea<{ $error: any }>`
   width: 100%;
   padding: 1rem;
   gap: 0.5rem;
-  font-family: "Plus Jakarta Sans";
-
-  background: ${colors.lightGrey};
-  border: 1px solid ${colors.border};
-  border-radius: 0;
+  font-family: inherit;
+  background: ${(props) => props.theme?.background || "transparent"};
+  border: 1px solid ${(props) => props.theme?.borderColor || colors.border};
+  border-radius: ${(props) => props.theme?.borderRadius || 0}px;
   outline: none;
 
   ${transition}
@@ -227,7 +248,9 @@ export const FieldTextArea = styled.textarea<{ error: any }>`
   &:not(:disabled) {
     &:focus,
     &:hover {
-      border: 1px solid var(--secondary);
+      border: 1px solid
+        ${(props) => props.theme?.hover?.borderColor || colors.lightGrey};
+      caret-color: ${(props) => props.theme?.focus?.caretColor || "initial"};
     }
   }
 
@@ -236,39 +259,41 @@ export const FieldTextArea = styled.textarea<{ error: any }>`
     opacity: 0.5;
   }
 
-  ${({ error }) =>
-    !checkIfValueIsEmpty(error)
-      ? css`
-          border: 1px solid ${colors.orange};
-          &::placeholder {
-            color: ${colors.orange};
-            opacity: 1;
-          }
-          &:-ms-input-placeholder {
-            color: ${colors.orange};
-          }
-          &::-ms-input-placeholder {
-            color: ${colors.orange};
-          }
-          &:not(:disabled) {
-            &:hover {
-              border: 1px solid ${colors.orange};
-            }
-          }
-          &:not(:disabled) {
-            &:focus {
-              border: 1px solid var(--secondary);
-            }
-          }
-        `
-      : css`
-          &:not(:disabled) {
-            &:focus,
-            &:hover {
-              border: 1px solid var(--secondary);
-            }
-          }
-        `}
+  ${({ $error }) =>
+    !checkIfValueIsEmpty($error) &&
+    css`
+      border: 1px solid
+        ${(props) => props.theme?.error?.borderColor || colors.orange};
+      &:not(:disabled) {
+        &:hover {
+          border: 1px solid
+            ${(props) =>
+              props.theme?.error?.hover?.borderColor || colors.orange};
+        }
+      }
+      &:not(:disabled) {
+        &:focus {
+          border: 1px solid
+            ${(props) =>
+              props.theme?.error?.focus?.borderColor || colors.lightGrey};
+          caret-color: ${(props) =>
+            props.theme?.error?.focus?.caretColor || colors.orange};
+        }
+      }
+      &::placeholder {
+        color: ${(props) =>
+          props.theme?.error?.placeholder?.color || colors.orange};
+        opacity: 1;
+      }
+      &:-ms-input-placeholder {
+        color: ${(props) =>
+          props.theme?.error?.placeholder?.color || colors.orange};
+      }
+      &::-ms-input-placeholder {
+        color: ${(props) =>
+          props.theme?.error?.placeholder?.color || colors.orange};
+      }
+    `}
 `;
 
 export const FormFieldWrapper = styled(Grid)`
@@ -277,31 +302,10 @@ export const FormFieldWrapper = styled(Grid)`
     line-height: 150%;
   }
 
-  // theme white
-  margin-bottom: 0.5rem;
-  input,
-  textarea {
-    background: ${colors.white};
-    &:disabled {
-      opacity: 1;
-    }
-  }
-  input {
-    border-width: 0;
-    &:hover {
-      border-width: 0;
-    }
-  }
-  input + div {
-    background: ${colors.white};
-  }
-  // end theme white
-
   [data-header] {
     margin: 0;
     font-weight: 600;
     font-size: 1rem;
-    color: ${colors.black};
     + div button {
       margin-left: 0.5rem;
       padding: 0;

package/src/components/form/FormField.tsx

@@ -13,15 +13,16 @@ import type { FormFieldProps } from "./types";
 
 const colors = theme.colors.light;
 
-export default function FormField({
+export function FormField({
   title,
+  titleIcon,
   subTitle = false,
   required = false,
   tooltip,
   children,
   style = {},
-  theme = "",
-  valueToCopy
+  valueToCopy,
+  copyIconColor = colors.secondary
 }: FormFieldProps) {
   return (
     <FormFieldWrapper
@@ -59,10 +60,11 @@ export default function FormField({
                   }
                 }}
               >
-                <Copy size={24} color={colors.secondary} weight="light" />
+                <Copy size={24} color={copyIconColor} weight="light" />
               </CopyButton>
             )}
           </Typography>
+          {titleIcon}
           {tooltip && <Tooltip content={tooltip} size={16} />}
         </Grid>
         {subTitle && (

package/src/components/form/Upload/ImageEditorModal/ImageEditor.tsx

@@ -0,0 +1,74 @@
+import React, { ChangeEvent, forwardRef, useState } from "react";
+import AvatarEditor, { AvatarEditorProps } from "react-avatar-editor";
+import Dropzone from "react-dropzone";
+import styled from "styled-components";
+import { Grid } from "../../../ui/Grid";
+import { useIpfsImage } from "../../../../hooks/images/useIpfsImage";
+
+const StyledCanvasWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  > :first-child {
+    max-width: 100%;
+    object-fit: contain;
+    width: auto !important;
+    height: auto !important;
+  }
+`;
+
+export type ImageEditorProps = Pick<
+  AvatarEditorProps,
+  "borderRadius" | "width" | "height"
+> & {
+  url?: string;
+};
+
+export const ImageEditor = forwardRef<AvatarEditor, ImageEditorProps>(
+  ({ url, borderRadius, width, height }, editorRef) => {
+    const [scale, setScale] = useState<number>();
+    const handleScale = (e: ChangeEvent<HTMLInputElement>) => {
+      const scale = parseFloat(e.target.value);
+      setScale(scale);
+    };
+    const { data } = useIpfsImage({ url: url ?? "" }, { enabled: !!url });
+    const image = data?.base64;
+    const { width: imageWidth, height: imageHeight } = data || {};
+    const w = borderRadius ? width : width || imageWidth;
+    const h = borderRadius ? height : height || imageHeight;
+    return (
+      <>
+        {image && (
+          <div style={{ margin: "2rem 0", maxWidth: "100%" }}>
+            <Dropzone noClick noKeyboard>
+              {({ getRootProps, getInputProps }) => (
+                <StyledCanvasWrapper {...getRootProps()}>
+                  <AvatarEditor
+                    image={image}
+                    ref={editorRef}
+                    width={w}
+                    height={h}
+                    scale={scale}
+                    borderRadius={borderRadius}
+                  />
+                  <input {...getInputProps()} />
+                </StyledCanvasWrapper>
+              )}
+            </Dropzone>
+            <Grid alignItems="center" justifyContent="center">
+              Zoom:
+              <input
+                name="scale"
+                type="range"
+                onChange={handleScale}
+                min={"0.1"}
+                max="2"
+                step="0.01"
+                defaultValue="1"
+              />
+            </Grid>
+          </div>
+        )}
+      </>
+    );
+  }
+);

package/src/components/form/Upload/ImageEditorModal/ImageEditorModal.tsx

@@ -0,0 +1,77 @@
+import * as Sentry from "@sentry/browser";
+import React, { useRef, useState } from "react";
+import AvatarEditor from "react-avatar-editor";
+import { dataURItoBlob } from "../../../../lib/base64/base64";
+import Modal from "../../../modal/Modal";
+import { Grid } from "../../../ui/Grid";
+import { Spinner } from "../../../ui/loading/Spinner";
+import { BaseButton, BaseButtonTheme } from "../../../buttons/BaseButton";
+import { ImageEditor, ImageEditorProps } from "./ImageEditor";
+import { useFileImage } from "../../../../hooks/images/useFileImage";
+
+export type ImageEditorModalProps = Omit<ImageEditorProps, "url"> & {
+  files: File[] | null;
+  hideModal: (files?: File[]) => Promise<void>;
+  saveButtonTheme: BaseButtonTheme;
+};
+
+export const ImageEditorModal: React.FC<ImageEditorModalProps> = ({
+  hideModal,
+  files,
+  saveButtonTheme,
+  ...rest
+}) => {
+  const originalFile = files?.[0];
+  const { data: url } = useFileImage(
+    { file: originalFile },
+    { enabled: !!originalFile }
+  );
+  const editorRef = useRef<AvatarEditor>(null);
+  const [isSaving, setSaving] = useState<boolean>(false);
+  const onClickSave = async () => {
+    setSaving(true);
+    try {
+      const img = editorRef.current?.getImageScaledToCanvas().toDataURL();
+      if (!img) {
+        return;
+      }
+      const blob = dataURItoBlob(img);
+      const file = new File([blob], originalFile?.name ?? "edited", {
+        type: originalFile?.type,
+        lastModified: originalFile?.lastModified
+      });
+      if (!file) {
+        return;
+      }
+      await hideModal([file]);
+    } catch (error) {
+      Sentry.captureException(error);
+    } finally {
+      setSaving(false);
+    }
+  };
+  return (
+    <Modal
+      modalType="IMAGE_EDITOR"
+      hideModal={() => hideModal()}
+      size="auto"
+      maxWidths={{
+        s: "50rem"
+      }}
+      theme="light"
+    >
+      <Grid flexDirection="column">
+        <ImageEditor url={url} {...rest} ref={editorRef} />
+        <BaseButton
+          type="button"
+          theme={saveButtonTheme}
+          onClick={() => onClickSave()}
+          disabled={isSaving}
+        >
+          {isSaving ? "Saving" : "Save"}
+          {isSaving && <Spinner />}
+        </BaseButton>
+      </Grid>
+    </Modal>
+  );
+};

package/src/components/form/Upload/Upload.tsx

@@ -1,3 +1,4 @@
+import * as Sentry from "@sentry/browser";
 import { useField } from "formik";
 import { Image, Trash, VideoCamera } from "phosphor-react";
 import React, { useCallback, useEffect, useRef, useState } from "react";
@@ -19,6 +20,8 @@ import {
 import type { UploadFileType, UploadProps, FileProps } from "../types";
 import UploadedFiles from "./UploadedFiles";
 import { WithUploadToIpfs, WithUploadToIpfsProps } from "./WithUploadToIpfs";
+import { useModal } from "../../modal/useModal";
+import { ImageEditorModal } from "./ImageEditorModal/ImageEditorModal";
 const colors = theme.colors.light;
 
 function Upload({
@@ -33,11 +36,21 @@ function Upload({
   wrapperProps,
   onLoadSinglePreviewImage,
   withUpload,
+  withEditor,
   saveToIpfs,
   loadMedia,
   onLoading,
+  width,
+  height,
+  borderRadius,
+  imgPreviewStyle,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  removeFile,
+  saveButtonTheme,
   ...props
 }: UploadProps & WithUploadToIpfsProps) {
+  const { updateProps, store } = useModal();
+  const [showEditor, setShowEditor] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [preview, setPreview] = useState<string | null>();
   const [field, meta, helpers] = useField(name);
@@ -51,10 +64,10 @@ function Upload({
   );
 
   const errorMessage = meta.error && meta.touched ? meta.error : "";
-  const displayError =
-    typeof errorMessage === typeof "string" && errorMessage !== "";
+  const displayError = typeof errorMessage === "string" && errorMessage !== "";
 
   const inputRef = useRef<HTMLInputElement | null>(null);
+  const [nativeFiles, setNativeFiles] = useState<File[] | null>(null);
   const setFiles = useCallback(
     (value: unknown) => {
       helpers.setValue(value);
@@ -74,7 +87,7 @@ function Upload({
   useEffect(() => {
     onFilesSelect?.(files);
     helpers.setValue(files);
-
+    console.log("useEffect", { files });
     if (!multiple && files && files?.length !== 0) {
       if (isImageOnly) {
         if (withUpload) {
@@ -104,10 +117,17 @@ function Upload({
     }
     handleLoading(true);
     try {
-      const imagePreview: string = await loadMedia(fileSrc || "");
-      setPreview(imagePreview);
+      const imagePreview = await loadMedia(fileSrc || "");
+      if (imagePreview) {
+        setPreview(imagePreview);
+      } else {
+        console.warn(
+          `imagePreview ${imagePreview} is falsy in loadIpfsImagePreview`
+        );
+      }
     } catch (error) {
       console.error(error);
+      Sentry.captureException(error);
     } finally {
       handleLoading(false);
     }
@@ -120,11 +140,18 @@ function Upload({
     }
     try {
       handleLoading(true);
-      const imagePreview: string = await loadMedia(fileSrc || "");
-      setPreview(imagePreview);
-      onLoadSinglePreviewImage?.(imagePreview);
+      const imagePreview = await loadMedia(fileSrc || "");
+      if (imagePreview) {
+        setPreview(imagePreview);
+        onLoadSinglePreviewImage?.(imagePreview);
+      } else {
+        console.warn(
+          `imagePreview ${imagePreview} is falsy in loadIpfsImagePreview`
+        );
+      }
     } catch (error) {
       console.error(error);
+      Sentry.captureException(error);
     } finally {
       handleLoading(false);
     }
@@ -152,41 +179,83 @@ function Upload({
     setFiles(newArray);
   };
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (!meta.touched) {
-      helpers.setTouched(true);
-    }
+  const handleChange = useCallback(
+    async (filesArray: File[] | null) => {
+      if (!meta.touched) {
+        helpers.setTouched(true);
+      }
 
-    if (!e.target.files) {
-      return;
-    }
-    const { files } = e.target;
-    const filesArray = Object.values(files);
-    for (const file of filesArray) {
-      if (maxSize) {
-        if (file.size > maxSize) {
-          const error = `File size cannot exceed more than ${bytesToSize(
-            maxSize
-          )}`;
-          // TODO: change to notification
-          console.error(error);
+      if (!filesArray) {
+        return;
+      }
+      for (const file of filesArray) {
+        if (maxSize) {
+          if (file.size > maxSize) {
+            const error = `File size cannot exceed more than ${bytesToSize(
+              maxSize
+            )}`;
+            // TODO: change to notification
+            console.error(error);
+          }
         }
       }
-    }
-    setFiles(filesArray);
-  };
+      setFiles(filesArray);
+    },
+    [helpers, maxSize, meta.touched, setFiles]
+  );
 
   const handleSave = useCallback(
-    async (e: React.ChangeEvent<HTMLInputElement>) => {
+    async (efiles: File[] | null) => {
+      if (!meta.touched) {
+        helpers.setTouched(true);
+      }
       handleLoading(true);
-      const files: FileProps[] = await saveToIpfs(e);
-      setFiles(files);
+      const files = await saveToIpfs(efiles);
+      if (files) {
+        setFiles(files);
+      } else {
+        setFiles([]);
+        console.warn(
+          `There has been an error because 'files' ${files} is falsy in handleSave`
+        );
+      }
+      handleLoading(false);
     },
-    [saveToIpfs, setFiles, handleLoading]
+    [meta.touched, handleLoading, saveToIpfs, helpers, setFiles]
   );
-
+  const saveFn = withUpload ? handleSave : handleChange;
+  const style = {
+    borderRadius: borderRadius ? `${borderRadius}%` : "",
+    width: width ? `100%` : ""
+  };
   return (
     <>
+      {withEditor && showEditor && (
+        <ImageEditorModal
+          saveButtonTheme={saveButtonTheme}
+          files={nativeFiles}
+          borderRadius={borderRadius}
+          width={width}
+          height={height}
+          hideModal={async (fileList) => {
+            if (fileList) {
+              await saveFn(fileList);
+            }
+
+            setShowEditor(false);
+            updateProps({
+              ...store,
+              modalType: store.modalType,
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              modalProps: {
+                ...store.modalProps,
+                hidden: false
+              }
+            });
+          }}
+        />
+      )}
       <FieldFileUploadWrapper {...wrapperProps} $disabled={!!disabled}>
         <FieldInput
           {...props}
@@ -194,7 +263,29 @@ function Upload({
           type="file"
           accept={accept}
           multiple={multiple}
-          onChange={withUpload ? handleSave : handleChange}
+          onChange={async (e) => {
+            const files = e.target.files
+              ? Object.values(e.target.files)
+              : e.target.files;
+
+            if (files && withEditor) {
+              setNativeFiles(files);
+              setShowEditor(true);
+              updateProps({
+                ...store,
+                modalType: store.modalType,
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                modalProps: {
+                  ...store.modalProps,
+                  hidden: true
+                }
+              });
+            } else {
+              await saveFn(files);
+            }
+            e.target.value = ""; // allow user to select the same file again
+          }}
           ref={(ref) => {
             inputRef.current = ref;
           }}
@@ -206,10 +297,10 @@ function Upload({
           </ThemedButton>
         ) : (
           <FileUploadWrapper
-            choosen={files !== null}
             data-disabled={disabled}
             onClick={handleChooseFile}
             error={errorMessage}
+            style={style}
           >
             {isLoading ? (
               <Loading size={2} />
@@ -220,17 +311,22 @@ function Upload({
                     {isVideoOnly ? (
                       <VideoPreview
                         src={
-                          "data:video/mp4;base64," +
-                          preview?.substring(
-                            "data:application/octet-stream;base64,".length
-                          )
+                          preview?.startsWith("http")
+                            ? preview
+                            : "data:video/mp4;base64," +
+                              preview?.substring(
+                                "data:application/octet-stream;base64,".length
+                              )
                         }
                         autoPlay
                         muted
                         loop
                       />
                     ) : (
-                      <ImagePreview src={preview} />
+                      <ImagePreview
+                        style={{ ...imgPreviewStyle }}
+                        src={preview}
+                      />
                     )}
                   </>
                 ) : isVideoOnly ? (
@@ -248,7 +344,7 @@ function Upload({
           </FileUploadWrapper>
         )}
         {!disabled && field.value && field.value?.length !== 0 && preview && (
-          <div onClick={handleRemoveAllFiles} data-remove>
+          <div onClick={handleRemoveAllFiles} data-remove style={style}>
             <Trash size={24} color={colors.white} />
           </div>
         )}