@bosonprotocol/react-kit 0.32.0-alpha.9 → 0.33.0-alpha.0

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);
@@ -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>
         )}

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

@@ -17,11 +17,13 @@ export const SUPPORTED_FORMATS = [
   "image/jpg",
   "image/jpeg",
   "image/gif",
-  "image/png"
+  "image/png",
+  "image/webp"
 ];
-
 export interface WithUploadToIpfsProps {
-  saveToIpfs: (e: React.ChangeEvent<HTMLInputElement>) => FileProps[];
+  saveToIpfs: (
+    files: File[] | null
+  ) => Promise<false | FileProps[] | undefined>;
   loadMedia: (src: string) => string;
   removeFile: (src: string) => void;
 }
@@ -32,16 +34,16 @@ export function WithUploadToIpfs<P extends WithUploadToIpfsProps>(
     props: Omit<P & UploadProps, keyof WithUploadToIpfsProps>
   ) => {
     const withUpload = props?.withUpload || false;
-
+    const accept: string = props.accept
+      ? props.accept
+      : SUPPORTED_FORMATS.join(",");
     const { saveFile, loadMedia, removeFile } = useSaveImageToIpfs();
 
-    const saveToIpfs = useCallback(
-      async (e: React.ChangeEvent<HTMLInputElement>) => {
-        if (!e.target.files) {
+    const saveToIpfs: WithUploadToIpfsProps["saveToIpfs"] = useCallback(
+      async (filesArray: File[] | null) => {
+        if (!filesArray) {
           return;
         }
-        const { files } = e.target;
-        const filesArray = Object.values(files);
         const filesErrors: string[] = [];
 
         for (const file of filesArray) {
@@ -105,12 +107,12 @@ export function WithUploadToIpfs<P extends WithUploadToIpfsProps>(
     const newProps = useMemo(
       () => ({
         maxSize: MAX_FILE_SIZE,
-        supportFormats: SUPPORTED_FORMATS,
+        accept,
         saveToIpfs,
         loadMedia,
         removeFile
       }),
-      [saveToIpfs, loadMedia, removeFile]
+      [saveToIpfs, loadMedia, removeFile, accept]
     );
 
     if (withUpload) {

package/src/components/form/index.ts

@@ -1,11 +1,12 @@
 export { default as Checkbox } from "./Checkbox";
 export { default as Datepicker } from "./Datepicker";
 export { default as Error } from "./Error";
-export { default as FormField } from "./FormField";
+export { FormField } from "./FormField";
 export * from "./BaseInput";
 export { default as Input, InputProps } from "./Input";
 export { default as Phone } from "./Phone";
 export { default as Select } from "./Select";
+export * from "./CountrySelect";
 export * from "./BaseTagsInput";
 export * from "./BaseTextArea";
 export { default as Upload } from "./Upload/Upload";

package/src/components/form/types.ts

@@ -1,4 +1,7 @@
+import { ReactNode } from "react";
 import { SingleValue } from "react-select";
+import { CSSProperties } from "styled-components";
+import { ImageEditorModalProps } from "./Upload/ImageEditorModal/ImageEditorModal";
 import type { TextAreaTheme } from "./Field.styles";
 
 export interface BaseProps {
@@ -29,12 +32,13 @@ export interface ErrorProps {
 
 export interface FormFieldProps {
   title: string;
+  titleIcon?: ReactNode;
   subTitle?: string | false;
   required?: boolean;
   tooltip?: string;
   children: React.ReactNode | string;
   style?: React.CSSProperties;
-  theme?: string;
+  copyIconColor?: CSSProperties["backgroundColor"];
   valueToCopy?:
     | string
     | {
@@ -87,7 +91,7 @@ export interface SelectProps extends BaseProps {
   label?: string;
 }
 
-export interface UploadProps extends BaseProps {
+export type UploadProps = BaseProps & {
   accept?: string;
   multiple?: boolean;
   trigger?: React.ReactNode | JSX.Element;
@@ -98,7 +102,18 @@ export interface UploadProps extends BaseProps {
   onLoadSinglePreviewImage?: (base64Uri: string) => void;
   withUpload?: boolean;
   onLoading?: (loading: boolean) => void;
-}
+  borderRadius?: number;
+  width?: number;
+  height?: number;
+  imgPreviewStyle?: Pick<CSSProperties, "objectFit">;
+} & (
+    | {
+        withEditor: true;
+        saveButtonTheme: ImageEditorModalProps["saveButtonTheme"];
+      }
+    | { withEditor: false; saveButtonTheme: undefined }
+  );
+
 export interface FileProps {
   src: string;
   name?: string; // for example: "redeemeum.png"

package/src/components/modal/ModalComponents.tsx

@@ -1,3 +1,4 @@
+import { ImageEditorModal } from "../form/Upload/ImageEditorModal/ImageEditorModal";
 import { MODAL_TYPES } from "./ModalTypes";
 import FinanceDeposit from "./components/SellerFinance/FinanceDeposit";
 import FinanceWithdraw from "./components/SellerFinance/FinanceWithdraw";
@@ -10,5 +11,6 @@ export const MODAL_COMPONENTS = {
   [MODAL_TYPES.FINANCE_WITHDRAW_MODAL]: FinanceWithdraw,
   [MODAL_TYPES.TRANSACTION_FAILED]: TransactionFailedModal,
   [MODAL_TYPES.TRANSACTION_SUBMITTED]: TransactionSubmittedModal,
-  [MODAL_TYPES.WAITING_FOR_CONFIRMATION]: WaitingForConfirmationModal
+  [MODAL_TYPES.WAITING_FOR_CONFIRMATION]: WaitingForConfirmationModal,
+  [MODAL_TYPES.IMAGE_EDITOR]: ImageEditorModal
 } as const;

package/src/components/modal/ModalContext.tsx

@@ -12,6 +12,7 @@ export type ModalProps = {
   contentStyle?: CSSProperties;
   closable?: boolean;
   onClose?: (data: unknown | undefined | null) => void;
+  hidden?: boolean;
 };
 export type ModalType = keyof typeof MODAL_TYPES | null;
 type ModalSize = "xxs" | "xs" | "s" | "m" | "l" | "xl";
@@ -25,9 +26,9 @@ export type Store = {
   theme?: "light" | "dark";
 };
 export type GenericModalProps<T extends keyof typeof MODAL_TYPES> =
-  Parameters<(typeof MODAL_COMPONENTS)[T]>[0] extends Record<string, never>
-    ? ModalProps & Record<string, never>
-    : ModalProps & Parameters<(typeof MODAL_COMPONENTS)[T]>[0];
+  Parameters<(typeof MODAL_COMPONENTS)[T]> extends [infer P, ...any[]]
+    ? ModalProps & P
+    : ModalProps;
 
 export interface ModalContextType {
   showModal: <T extends keyof typeof MODAL_TYPES>(

package/src/components/modal/ModalTypes.ts

@@ -3,5 +3,6 @@ export const MODAL_TYPES = {
   FINANCE_WITHDRAW_MODAL: "FINANCE_WITHDRAW_MODAL",
   TRANSACTION_FAILED: "TRANSACTION_FAILED",
   TRANSACTION_SUBMITTED: "TRANSACTION_SUBMITTED",
-  WAITING_FOR_CONFIRMATION: "WAITING_FOR_CONFIRMATION"
+  WAITING_FOR_CONFIRMATION: "WAITING_FOR_CONFIRMATION",
+  IMAGE_EDITOR: "IMAGE_EDITOR"
 } as const;

package/src/hooks/images/useFileImage.ts

@@ -0,0 +1,24 @@
+import { useQuery } from "react-query";
+import { loadAndSetImagePromise } from "../../lib/base64/base64";
+
+type UseFileImageProps = {
+  file: File | undefined;
+};
+
+export function useFileImage(
+  { file }: UseFileImageProps,
+  options: { enabled: boolean }
+) {
+  return useQuery(
+    ["useFileImage", file],
+    async () => {
+      if (!file) {
+        return;
+      }
+      return await loadAndSetImagePromise(file);
+    },
+    {
+      enabled: !!file && options.enabled
+    }
+  );
+}

package/src/hooks/images/useIpfsImage.ts

@@ -0,0 +1,27 @@
+import { useQuery } from "react-query";
+import { fetchImageAsBase64 } from "../../lib/base64/base64";
+import { getImageMetadata } from "../../lib/images/images";
+
+type UseIpfsImageProps = {
+  url: string;
+};
+
+export function useIpfsImage(
+  { url }: UseIpfsImageProps,
+  options: { enabled: boolean }
+) {
+  return useQuery(
+    ["useIpfsImage", url],
+    async () => {
+      const result = await fetchImageAsBase64(url);
+      const metadata = await getImageMetadata(result.base64);
+      return {
+        ...result,
+        ...metadata
+      };
+    },
+    {
+      enabled: options.enabled
+    }
+  );
+}

package/src/index.tsx

@@ -85,3 +85,4 @@ export * from "./components/error/ErrorMessage";
 export * from "./components/error/SimpleError";
 export * from "./components/step/MultiSteps";
 export * from "./components/ipfs/IpfsProvider";
+export * from "./types/helpers";

package/src/lib/base64/base64.ts

@@ -3,7 +3,7 @@ import { IpfsMetadataStorage } from "@bosonprotocol/ipfs-storage";
 export async function fetchImageAsBase64(imageUrl: string) {
   const response = await fetch(imageUrl);
   const blob = await response.blob();
-  return blobToBase64(blob);
+  return { base64: await blobToBase64(blob), blob };
 }
 
 export function fromBase64ToBinary(base64: string): Buffer {

package/src/stories/buttons/Upload.stories.tsx

@@ -0,0 +1,82 @@
+import { fn } from "@storybook/test";
+import React from "react";
+import { Meta } from "@storybook/react";
+import { Upload } from "../..";
+import { EnvironmentProvider } from "../../components/environment/EnvironmentProvider";
+import { IpfsProvider } from "../../components/ipfs/IpfsProvider";
+import { Formik } from "formik";
+import { QueryClientProviderCustom } from "../../components/queryClient/withQueryClientProvider";
+import {
+  bosonButtonThemeKeys,
+  bosonButtonThemes
+} from "../../components/ui/ThemedButton";
+const name = "upload";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Visual Components/Buttons/Upload",
+  component: Upload,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered"
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  // args: { onClick: fn() },
+  argTypes: {
+    name: {
+      table: {
+        disabled: true
+      }
+    },
+    accept: {
+      control: "select",
+      options: ["image/*", "video/*", "image/*,video/*"]
+    },
+    disabled: { control: "boolean" },
+    withEditor: { control: "boolean" },
+    // @ts-expect-error saveButtonThemeKey is not a valid prop name of Upload but saveButtonTheme is so we get the theme from the key
+    saveButtonThemeKey: {
+      control: "select",
+      options: bosonButtonThemeKeys
+    },
+    placeholder: { control: "text" },
+    width: { control: "number" },
+    height: { control: "number" },
+    borderRadius: { control: "number" }
+  },
+  decorators: [
+    (Story, { args }) => {
+      return (
+        <QueryClientProviderCustom>
+          <EnvironmentProvider configId="testing-80002-0" envName="testing">
+            <IpfsProvider>
+              <Formik initialValues={{ [name]: [] }} onSubmit={console.log}>
+                <Story
+                  args={{
+                    ...args,
+                    saveButtonTheme: bosonButtonThemes({
+                      withBosonStyle: false
+                      // @ts-expect-error saveButtonThemeKey is not a valid prop name of Upload but saveButtonTheme is so we get the theme from the key
+                    })[args.saveButtonThemeKey]
+                  }}
+                />
+              </Formik>
+            </IpfsProvider>
+          </EnvironmentProvider>
+        </QueryClientProviderCustom>
+      );
+    }
+  ]
+} satisfies Meta<typeof Upload>;
+
+const BASE_ARGS = {
+  name
+} as const;
+
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+export const Base = {
+  args: {
+    ...BASE_ARGS
+  }
+};