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

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

@@ -1,360 +1,8 @@
-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";
-import { loadAndSetMedia } from "../../../lib/base64/base64";
-import bytesToSize from "../../../lib/bytes/bytesToSize";
-import { theme } from "../../../theme";
-
-import Loading from "../../ui/loading/LoadingWrapper";
-import ThemedButton from "../../ui/ThemedButton";
-import { Typography } from "../../ui/Typography";
-import Error from "../Error";
-import {
-  FieldFileUploadWrapper,
-  FieldInput,
-  FileUploadWrapper,
-  ImagePreview,
-  VideoPreview
-} from "../Field.styles";
-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({
-  name,
-  accept = "image/*",
-  disabled,
-  maxSize,
-  multiple = false,
-  trigger,
-  onFilesSelect,
-  placeholder,
-  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);
-
-  const handleLoading = useCallback(
-    (loadingValue: boolean) => {
-      onLoading?.(loadingValue);
-      setIsLoading(loadingValue);
-    },
-    [onLoading]
-  );
-
-  const errorMessage = meta.error && meta.touched ? meta.error : "";
-  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);
-    },
-    [helpers]
-  );
-
-  const files = field.value as UploadFileType[];
-  const mimetypes = accept.split(",").map((acc) => acc.trim());
-  const isImageOnly = mimetypes.every((mimetype) =>
-    mimetype.startsWith("image/")
-  );
-  const isVideoOnly = mimetypes.every((mimetype) =>
-    mimetype.startsWith("video/")
-  );
-
-  useEffect(() => {
-    onFilesSelect?.(files);
-    helpers.setValue(files);
-
-    if (!multiple && files && files?.length !== 0) {
-      if (isImageOnly) {
-        if (withUpload) {
-          loadIpfsImagePreview(files[0] as FileProps);
-        } else {
-          loadAndSetMedia(files[0] as File, (base64Uri) => {
-            setPreview(base64Uri);
-            onLoadSinglePreviewImage?.(base64Uri);
-          });
-        }
-      } else if (isVideoOnly) {
-        if (withUpload) {
-          loadIpfsVideo(files[0] as FileProps);
-        } else {
-          loadAndSetMedia(files[0] as File, (base64Uri) => {
-            setPreview(base64Uri);
-          });
-        }
-      }
-    }
-  }, [files]); // eslint-disable-line
-
-  const loadIpfsVideo = async (file: FileProps) => {
-    const fileSrc = file && file?.src ? file?.src : false;
-    if (!fileSrc) {
-      return false;
-    }
-    handleLoading(true);
-    try {
-      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);
-    }
-  };
-
-  const loadIpfsImagePreview = async (file: FileProps) => {
-    const fileSrc = file && file?.src ? file?.src : false;
-    if (!fileSrc) {
-      return false;
-    }
-    try {
-      handleLoading(true);
-      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);
-    }
-  };
-
-  const handleChooseFile = () => {
-    const input = inputRef.current;
-    if (input) {
-      input.click();
-    }
-  };
-
-  const handleRemoveAllFiles = () => {
-    if (disabled) {
-      return;
-    }
-    setFiles([]);
-    setPreview(null);
-  };
-
-  const handleRemoveFile = (index: number) => {
-    const newArray = files.filter(
-      (i: File | FileProps, k: number) => k !== index
-    );
-    setFiles(newArray);
-  };
-
-  const handleChange = useCallback(
-    async (filesArray: File[] | null) => {
-      if (!meta.touched) {
-        helpers.setTouched(true);
-      }
-
-      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);
-    },
-    [helpers, maxSize, meta.touched, setFiles]
-  );
-
-  const handleSave = useCallback(
-    async (efiles: File[] | null) => {
-      if (!meta.touched) {
-        helpers.setTouched(true);
-      }
-      handleLoading(true);
-      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);
-    },
-    [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}
-          hidden
-          type="file"
-          accept={accept}
-          multiple={multiple}
-          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;
-          }}
-          disabled={disabled}
-        />
-        {trigger ? (
-          <ThemedButton onClick={handleChooseFile} type="button">
-            <>{trigger}</>
-          </ThemedButton>
-        ) : (
-          <FileUploadWrapper
-            data-disabled={disabled}
-            onClick={handleChooseFile}
-            error={errorMessage}
-            style={style}
-          >
-            {isLoading ? (
-              <Loading size={2} />
-            ) : (
-              <>
-                {field.value && field.value?.length !== 0 && preview ? (
-                  <>
-                    {isVideoOnly ? (
-                      <VideoPreview
-                        src={
-                          preview?.startsWith("http")
-                            ? preview
-                            : "data:video/mp4;base64," +
-                              preview?.substring(
-                                "data:application/octet-stream;base64,".length
-                              )
-                        }
-                        autoPlay
-                        muted
-                        loop
-                      />
-                    ) : (
-                      <ImagePreview
-                        style={{ ...imgPreviewStyle }}
-                        src={preview}
-                      />
-                    )}
-                  </>
-                ) : isVideoOnly ? (
-                  <VideoCamera size={24} />
-                ) : (
-                  <Image size={24} />
-                )}
-                {placeholder && (
-                  <Typography tag="p" style={{ marginBottom: "0" }}>
-                    {placeholder}
-                  </Typography>
-                )}
-              </>
-            )}
-          </FileUploadWrapper>
-        )}
-        {!disabled && field.value && field.value?.length !== 0 && preview && (
-          <div onClick={handleRemoveAllFiles} data-remove style={style}>
-            <Trash size={24} color={colors.white} />
-          </div>
-        )}
-        {multiple && (
-          <UploadedFiles files={files} handleRemoveFile={handleRemoveFile} />
-        )}
-      </FieldFileUploadWrapper>
-      <Error display={displayError} message={errorMessage} />
-    </>
-  );
-}
-
-export default WithUploadToIpfs(Upload);
+import { UploadProps } from "../types";
+import BaseUpload from "./BaseUpload";
+import React from "react";
+export type { UploadProps } from "../types";
+
+export const Upload = (props: UploadProps) => {
+  return <BaseUpload {...props} />;
+};

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

@@ -1,7 +1,7 @@
 import { ImageSquare, X } from "phosphor-react";
 import React, { useCallback } from "react";
 import styled from "styled-components";
-import bytesToSize from "../../../lib/bytes/bytesToSize";
+import { bytesToSize } from "../../../lib/bytes/bytesToSize";
 import { theme } from "../../../theme";
 
 import { Grid } from "../../ui/Grid";

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

@@ -8,7 +8,7 @@ import ErrorToast from "../../toasts/common/ErrorToast";
 import { Typography } from "../../ui/Typography";
 import { FileProps, UploadProps } from "../types";
 import { useSaveImageToIpfs } from "../../../hooks/ipfs/useSaveImageToIpfs";
-import bytesToSize from "../../../lib/bytes/bytesToSize";
+import { bytesToSize } from "../../../lib/bytes/bytesToSize";
 
 const colors = theme.colors.light;
 
@@ -34,9 +34,8 @@ 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 accept: string = props.accept || SUPPORTED_FORMATS.join(",");
+    const maxSize = Number(props.maxSize) || MAX_FILE_SIZE;
     const { saveFile, loadMedia, removeFile } = useSaveImageToIpfs();
 
     const saveToIpfs: WithUploadToIpfsProps["saveToIpfs"] = useCallback(
@@ -47,10 +46,8 @@ export function WithUploadToIpfs<P extends WithUploadToIpfsProps>(
         const filesErrors: string[] = [];
 
         for (const file of filesArray) {
-          const sizeValidation = Number(props.maxSize) || MAX_FILE_SIZE;
-          const formatValidation = props.accept
-            ? props.accept.split(",").map((acc) => acc.trim())
-            : SUPPORTED_FORMATS;
+          const sizeValidation = maxSize;
+          const formatValidation = accept.split(",").map((acc) => acc.trim());
 
           if (file?.size > sizeValidation) {
             const err = `File ${
@@ -101,18 +98,18 @@ export function WithUploadToIpfs<P extends WithUploadToIpfsProps>(
 
         return ipfsArray as FileProps[];
       },
-      [props.accept, props.maxSize, saveFile]
+      [accept, maxSize, saveFile]
     );
 
     const newProps = useMemo(
       () => ({
-        maxSize: MAX_FILE_SIZE,
+        maxSize,
         accept,
         saveToIpfs,
         loadMedia,
         removeFile
       }),
-      [saveToIpfs, loadMedia, removeFile, accept]
+      [saveToIpfs, loadMedia, removeFile, accept, maxSize]
     );
 
     if (withUpload) {

package/src/components/form/index.ts

@@ -1,12 +1,14 @@
-export { default as Checkbox } from "./Checkbox";
+export { Checkbox, CheckboxProps } from "./Checkbox";
+export { BaseCheckbox, BaseCheckboxProps } from "./BaseCheckbox";
 export { default as Datepicker } from "./Datepicker";
 export { default as Error } from "./Error";
-export { FormField } from "./FormField";
+export { FormField, FormFieldProps } 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 { default as Select, SelectProps } from "./Select";
 export * from "./CountrySelect";
 export * from "./BaseTagsInput";
 export * from "./BaseTextArea";
-export { default as Upload } from "./Upload/Upload";
+export { default as BaseUpload, BaseUploadProps } from "./Upload/BaseUpload";
+export { Upload, UploadProps } from "./Upload/Upload";

package/src/components/form/types.ts

@@ -1,8 +1,13 @@
 import { ReactNode } from "react";
-import { SingleValue } from "react-select";
+import { CSSObjectWithLabel, SingleValue } from "react-select";
 import { CSSProperties } from "styled-components";
 import { ImageEditorModalProps } from "./Upload/ImageEditorModal/ImageEditorModal";
-import type { TextAreaTheme } from "./Field.styles";
+import type {
+  CheckboxTheme,
+  FileUploadWrapperTheme,
+  TextAreaTheme
+} from "./Field.styles";
+import type { GridProps } from "../ui/Grid";
 
 export interface BaseProps {
   name: string;
@@ -20,6 +25,7 @@ export interface DatepickerProps extends BaseProps {
 
 export interface CheckboxProps extends BaseProps {
   text?: string;
+  theme?: CheckboxTheme;
 }
 
 export type TextareaProps = BaseProps &
@@ -30,7 +36,7 @@ export interface ErrorProps {
   message?: string;
 }
 
-export interface FormFieldProps {
+export interface FormFieldProps extends GridProps {
   title: string;
   titleIcon?: ReactNode;
   subTitle?: string | false;
@@ -89,6 +95,26 @@ export interface SelectProps extends BaseProps {
   errorMessage?: string;
   onChange?: (option: SelectDataProps<string>) => void;
   label?: string;
+  theme?: Partial<{
+    control: Partial<CSSProperties> &
+      Partial<{
+        hover: Partial<CSSProperties>;
+        focus: Partial<CSSProperties>;
+        error: Partial<CSSProperties>;
+      }>;
+    option: Partial<CSSProperties> &
+      Partial<{
+        selected: Partial<CSSProperties>;
+        disabled: Partial<CSSProperties>;
+        focus: Partial<CSSProperties>;
+        error: Partial<CSSObjectWithLabel>;
+      }>;
+    placeholder: Partial<CSSProperties> &
+      Partial<{ error: CSSObjectWithLabel }>;
+    input: Partial<CSSProperties> & Partial<{ error: CSSObjectWithLabel }>;
+    singleValue: Partial<CSSProperties> &
+      Partial<{ error: CSSObjectWithLabel }>;
+  }>;
 }
 
 export type UploadProps = BaseProps & {
@@ -103,9 +129,11 @@ export type UploadProps = BaseProps & {
   withUpload?: boolean;
   onLoading?: (loading: boolean) => void;
   borderRadius?: number;
+  borderRadiusUnit?: "px" | "%";
   width?: number;
   height?: number;
   imgPreviewStyle?: Pick<CSSProperties, "objectFit">;
+  theme?: Partial<{ triggerTheme: FileUploadWrapperTheme }>;
 } & (
     | {
         withEditor: true;

package/src/components/ui/IpfsImage.tsx

@@ -73,7 +73,7 @@ const ImagePlaceholder = styled.div`
   }
 `;
 
-interface IImage {
+export type IpfsImageProps = React.HTMLAttributes<HTMLDivElement> & {
   src: string;
   children?: React.ReactNode;
   dataTestId?: string;
@@ -85,10 +85,9 @@ interface IImage {
   overrides?: {
     ipfsGateway?: string;
   };
-}
-export const IpfsImage: React.FC<
-  IImage & React.HTMLAttributes<HTMLDivElement>
-> = ({
+  className?: string;
+};
+export const IpfsImage: React.FC<IpfsImageProps> = ({
   src,
   children,
   dataTestId = "image",
@@ -130,7 +129,11 @@ export const IpfsImage: React.FC<
 
   return (
     <>
-      <ImageWrapper {...rest} $hide={!isLoading} className="loading-container">
+      <ImageWrapper
+        {...rest}
+        $hide={!isLoading}
+        className={"loading-container " + rest.className}
+      >
         <ImagePlaceholder>
           <Typography tag="div">
             <Loading />
@@ -149,7 +152,11 @@ export const IpfsImage: React.FC<
           )}
         </ImagePlaceholder>
       </ImageWrapper>
-      <ImageWrapper {...rest} $hide={!isSuccess} className="image-container">
+      <ImageWrapper
+        {...rest}
+        $hide={!isSuccess}
+        className={"image-container " + rest.className}
+      >
         {children || ""}
         <ImageContainer
           data-testid={dataTestId}

package/src/components/ui/Video.tsx

@@ -97,7 +97,7 @@ const VideoPlaceholder = styled.div<{ $position?: CSSProperties["position"] }>`
   }
 `;
 
-interface IVideo {
+export type VideoProps = React.HTMLAttributes<HTMLDivElement> & {
   src: string;
   children?: ReactNode;
   dataTestId?: string;
@@ -106,8 +106,8 @@ interface IVideo {
   videoProps?: VideoHTMLAttributes<HTMLElement>;
   withMuteButton?: boolean;
   componentWhileLoading?: () => ReactElement;
-}
-const Video: React.FC<IVideo & React.HTMLAttributes<HTMLDivElement>> = ({
+};
+export const Video: React.FC<VideoProps> = ({
   src,
   children,
   dataTestId = "video",
@@ -133,6 +133,8 @@ const Video: React.FC<IVideo & React.HTMLAttributes<HTMLDivElement>> = ({
             ipfsMetadataStorage
           );
           setVideoSrc(base64str as string);
+          setIsLoaded(true);
+          setIsError(false);
         } catch (error) {
           console.error("error in Video", error);
           setIsLoaded(true);
@@ -148,10 +150,10 @@ const Video: React.FC<IVideo & React.HTMLAttributes<HTMLDivElement>> = ({
         src?.startsWith("ipfs://") ||
         src?.startsWith("https://bosonprotocol.infura-ipfs.io/ipfs/")
       ) {
-        const newString = src?.startsWith("ipfs://")
+        const split = src?.startsWith("ipfs://")
           ? src.split("//")
           : src.split("https://bosonprotocol.infura-ipfs.io/ipfs/");
-        const CID = newString[newString.length - 1];
+        const CID = split[split.length - 1];
         fetchData(`ipfs://${CID}`);
       } else if (src?.startsWith("undefined") && src?.length > 9) {
         const CID = src.replace("undefined", "");

package/src/hooks/ipfs/useIpfsStorage.ts

@@ -1,3 +1,4 @@
+import { validateMetadata } from "@bosonprotocol/core-sdk";
 import { useConfigContext } from "../../components/config/ConfigContext";
 import { useIpfsContext } from "../../components/ipfs/IpfsContext";
 import { useIpfsMetadataStorage } from "../useIpfsMetadataStorage";
@@ -9,6 +10,7 @@ export function useIpfsStorage() {
   const storage = useIpfsMetadataStorage(
     config.envName,
     config.configId,
+    validateMetadata,
     ipfsMetadataStorageUrl,
     ipfsMetadataStorageHeaders
   );

package/src/hooks/useIpfsMetadataStorage.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import {
   getEnvConfigById,
   ConfigId,
-  validateMetadata
+  AnyMetadata
 } from "@bosonprotocol/core-sdk";
 import { IpfsMetadataStorage } from "@bosonprotocol/ipfs-storage";
 import { EnvironmentType } from "@bosonprotocol/common/src/types";
@@ -18,19 +18,20 @@ import { EnvironmentType } from "@bosonprotocol/common/src/types";
 export function useIpfsMetadataStorage(
   envName: EnvironmentType,
   configId: ConfigId,
+  validateMetadata: (metadata: AnyMetadata) => void,
   url?: string,
   headers?: Headers | Record<string, string>
 ) {
   const [ipfsMetadataStorage, setIpfsMetadataStorage] =
     useState<IpfsMetadataStorage>(
-      initIpfsMetadataStorage(envName, configId, url, headers)
+      initIpfsMetadataStorage(envName, configId, validateMetadata, url, headers)
     );
 
   useEffect(() => {
     setIpfsMetadataStorage(
-      initIpfsMetadataStorage(envName, configId, url, headers)
+      initIpfsMetadataStorage(envName, configId, validateMetadata, url, headers)
     );
-  }, [envName, configId, url, headers]);
+  }, [envName, configId, validateMetadata, url, headers]);
 
   return ipfsMetadataStorage;
 }
@@ -38,6 +39,7 @@ export function useIpfsMetadataStorage(
 function initIpfsMetadataStorage(
   envName: EnvironmentType,
   configId: ConfigId,
+  validateMetadata: (metadata: AnyMetadata) => void,
   url?: string,
   headers?: Headers | Record<string, string>
 ) {

package/src/hooks/useIpfsStorage.ts

@@ -1,6 +1,7 @@
 import { useIpfsMetadataStorage } from "./";
 import { useEnvContext } from "../components/environment/EnvironmentContext";
 import { useIpfsContext } from "../components/ipfs/IpfsContext";
+import { validateMetadata } from "@bosonprotocol/core-sdk";
 
 export function useIpfsStorage() {
   const { envName, configId } = useEnvContext();
@@ -9,6 +10,7 @@ export function useIpfsStorage() {
   const storage = useIpfsMetadataStorage(
     envName,
     configId,
+    validateMetadata,
     ipfsMetadataStorageUrl,
     ipfsMetadataStorageHeaders
   );