@bosonprotocol/react-kit 0.33.0-alpha.2 → 0.33.0-alpha.21

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/image/Image.styles.ts

@@ -1,4 +1,4 @@
-import styled, { css } from "styled-components";
+import styled, { CSSProperties, css } from "styled-components";
 import { theme } from "../../theme";
 
 export const ImageWrapper = styled.div<{ $hide?: boolean }>`
@@ -27,11 +27,13 @@ const buttonText = css`
   line-height: 24px;
 `;
 
-export const ImagePlaceholder = styled.div<{ position?: string }>`
-  ${({ position }) =>
-    position
+export const ImagePlaceholder = styled.div<{
+  $position?: CSSProperties["position"];
+}>`
+  ${({ $position }) =>
+    $position
       ? css`
-          position: ${position};
+          position: ${$position};
         `
       : css`
           position: absolute;

package/src/components/image/Image.tsx

@@ -48,7 +48,7 @@ export const Image: React.FC<IBaseImage> = ({
   return (
     <>
       <ImageWrapper {...rest} data-image-wrapper $hide={!isError}>
-        <ImagePlaceholder data-image-placeholder position="static">
+        <ImagePlaceholder data-image-placeholder $position="static">
           {errorConfig.errorIcon ?? null}
           <ImageErrorText>
             {errorConfig.errorImageText || "Failed to load image"}
@@ -56,7 +56,7 @@ export const Image: React.FC<IBaseImage> = ({
         </ImagePlaceholder>
       </ImageWrapper>
       <ImageWrapper {...rest} data-image-wrapper $hide={!isLoading}>
-        <ImagePlaceholder data-image-placeholder position="static">
+        <ImagePlaceholder data-image-placeholder $position="static">
           <Loading />
         </ImagePlaceholder>
       </ImageWrapper>

package/src/components/modal/components/Commit/DetailView/InnerCommitDetailView.tsx

@@ -28,7 +28,7 @@ import { Typography } from "../../../../ui/Typography";
 import {
   getItemFromStorage,
   saveItemInStorage
-} from "../../../../widgets/finance/storage/useLocalStorage";
+} from "../../../../../hooks/storage/useBosonLocalStorage";
 import { useModal } from "../../../useModal";
 import { InnerDetailViewWithPortal } from "../../common/detail/InnerDetailViewWithPortal";
 import { BuyOrSwapContainer } from "../../common/detail/BuyOrSwapContainer";

package/src/components/modal/components/Redeem/ExchangeView/RedeemSuccess.tsx

@@ -4,7 +4,7 @@ import styled from "styled-components";
 import { useExchanges } from "../../../../../hooks/useExchanges";
 import { getOfferDetails } from "../../../../../lib/offer/getOfferDetails";
 import { Grid } from "../../../../ui/Grid";
-import IpfsImage from "../../../../ui/IpfsImage";
+import { IpfsImage } from "../../../../ui/IpfsImage";
 import Loading from "../../../../ui/loading/LoadingWrapper";
 import { Typography } from "../../../../ui/Typography";
 import DetailOpenSea from "../../common/DetailOpenSea";

package/src/components/modal/components/common/OfferFullDescription/DigitalProductData.tsx

@@ -19,7 +19,7 @@ import { useCoreSDKWithContext } from "../../../../../hooks/core-sdk/useCoreSdkW
 import { isNftItem } from "../../../../../lib/bundle/filter";
 import { isTruthy } from "../../../../../types/helpers";
 import Video from "../../../../ui/Video";
-import IpfsImage from "../../../../ui/IpfsImage";
+import { IpfsImage } from "../../../../ui/IpfsImage";
 
 const StyledDetailsSummary = styled(DetailsSummary)`
   .icon-wrapper {

package/src/components/modal/components/common/detail/DetailSlider.tsx

@@ -13,7 +13,7 @@ import styled, { css } from "styled-components";
 import { breakpointNumbers } from "../../../../../lib/ui/breakpoint";
 import { theme } from "../../../../../theme";
 import { Grid } from "../../../../ui/Grid";
-import IpfsImage from "../../../../ui/IpfsImage";
+import { IpfsImage } from "../../../../ui/IpfsImage";
 import Video from "../../../../ui/Video";
 import { zIndex } from "../../../../ui/zIndex";
 import { GlideSlide } from "./Detail.style";

package/src/components/modal/components/common/detail/PhygitalProduct.tsx

@@ -12,7 +12,7 @@ import { theme } from "../../../../../theme";
 import { Offer } from "../../../../../types/offer";
 import { Tooltip } from "../../../../tooltip/Tooltip";
 import { Grid } from "../../../../ui/Grid";
-import IpfsImage from "../../../../ui/IpfsImage";
+import { IpfsImage } from "../../../../ui/IpfsImage";
 import ThemedButton from "../../../../ui/ThemedButton";
 import { Typography } from "../../../../ui/Typography";
 import Video from "../../../../ui/Video";

package/src/components/modal/components/common/detail/SlickSlider.tsx

@@ -3,7 +3,7 @@ import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import _Slider, { Settings } from "react-slick";
 
-import IpfsImage from "../../../../ui/IpfsImage";
+import { IpfsImage } from "../../../../ui/IpfsImage";
 import Video from "../../../../ui/Video";
 import styled, { CSSProperties, css } from "styled-components";
 import { theme } from "../../../../../theme";