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

package/src/components/form/BaseCheckbox.tsx

@@ -12,6 +12,9 @@ export function BaseCheckbox({
   text,
   theme,
   hideError,
+  className,
+  iconProps,
+  children,
   ...props
 }: BaseCheckboxProps) {
   const [field, meta, helpers] = useField(name);
@@ -30,19 +33,28 @@ export function BaseCheckbox({
 
   return (
     <>
-      <CheckboxWrapper htmlFor={checkboxId} $error={errorMessage} theme={theme}>
+      <CheckboxWrapper
+        htmlFor={checkboxId}
+        $error={errorMessage}
+        theme={theme}
+        className={className}
+      >
         <input
           hidden
           id={checkboxId}
           type="checkbox"
           {...props}
           {...field}
+          onChange={(event) => {
+            field.onChange(event);
+            props.onChange?.(event);
+          }}
           checked={field.value}
         />
         <div>
-          <Check size={16} />
+          <Check size={16} width="100%" height="100%" {...iconProps} />
         </div>
-        <b>{text}</b>
+        {children || <b>{text}</b>}
       </CheckboxWrapper>
       <Error display={!hideError && displayError} message={errorMessage} />
     </>

package/src/components/form/CountrySelect.tsx

@@ -13,7 +13,7 @@ import Select, {
 import styled, { CSSProperties } from "styled-components";
 import { zIndex } from "../ui/zIndex";
 import Error from "./Error";
-import type { InputProps } from "./types";
+import type { BaseProps, SupportedReactSelectProps } from "./types";
 import { SelectDataProps } from "./types";
 import { theme as importedTheme } from "../../theme";
 import { checkIfValueIsEmpty } from "../../lib/object/checkIfValueIsEmpty";
@@ -160,31 +160,32 @@ const PhoneWrapper = styled.div`
   }
 `;
 
-export type CountrySelectProps = InputProps & {
-  countries?: CountryCode[];
-  fieldValueIsCountryCode?: boolean; // if true, the field.value will be the countryCodeOrName, otherwise the country name
-  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: CSSProperties;
-      }>;
-    placeholder: Partial<CSSProperties> &
-      Partial<{ error: CSSObjectWithLabel }>;
-    input: Partial<CSSProperties> & Partial<{ error: CSSObjectWithLabel }>;
-    singleValue: Partial<CSSProperties> &
-      Partial<{ error: CSSObjectWithLabel }>;
-    menu: Partial<CSSProperties> & Partial<{ error: CSSObjectWithLabel }>;
-  }>;
-};
+export type CountrySelectProps = BaseProps &
+  SupportedReactSelectProps & {
+    countries?: CountryCode[];
+    fieldValueIsCountryCode?: boolean; // if true, the field.value will be the countryCodeOrName, otherwise the country name
+    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: CSSProperties;
+        }>;
+      placeholder: Partial<CSSProperties> &
+        Partial<{ error: CSSObjectWithLabel }>;
+      input: Partial<CSSProperties> & Partial<{ error: CSSObjectWithLabel }>;
+      singleValue: Partial<CSSProperties> &
+        Partial<{ error: CSSObjectWithLabel }>;
+      menu: Partial<CSSProperties> & Partial<{ error: CSSObjectWithLabel }>;
+    }>;
+  };
 type CountryName = string;
 export function CountrySelect({
   name,

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

@@ -125,23 +125,32 @@ export type FileUploadWrapperTheme = Partial<{
   error: Partial<{
     borderColor: CSSProperties["borderColor"];
   }>;
+  overrides: Partial<CSSProperties>;
 }>;
 export const FileUploadWrapper = styled.div<{
   $error: unknown;
+  $isPdfOnly?: boolean;
   theme: FileUploadWrapperTheme | undefined;
 }>`
   position: relative;
   overflow: hidden;
   display: flex;
-
-  align-items: center;
   justify-content: center;
-  flex-direction: column;
-
   padding: 0.5rem;
+  align-items: center;
 
-  width: 8rem;
-  height: 8rem;
+  ${({ $isPdfOnly }) =>
+    $isPdfOnly
+      ? css`
+          width: 100%;
+          flex-direction: row;
+          cursor: default;
+        `
+      : css`
+          width: 8rem;
+          height: 8rem;
+          flex-direction: column;
+        `}
 
   img {
     position: absolute;
@@ -194,7 +203,30 @@ export const FieldFileUpload = styled(FieldInput)`
   display: none;
 `;
 
-export const FieldFileUploadWrapper = styled.div<{ $disabled: boolean }>`
+export const PdfOnlyLabel = styled.label<{ $disabled?: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 1rem;
+  gap: 0.25rem;
+  border-radius: 32px;
+  padding: 0.656rem 1.25rem;
+  background: ${colors.lightGrey};
+  font-size: 0.875rem;
+  ${({ $disabled }) =>
+    $disabled
+      ? css`
+          cursor: not-allowed;
+        `
+      : css`
+          cursor: pointer;
+        `}
+`;
+
+export const FieldFileUploadWrapper = styled.div<{
+  $disabled: boolean;
+  $isPdfOnly?: boolean;
+}>`
   position: relative;
   display: inline-block;
   ${({ $disabled }) =>
@@ -206,7 +238,11 @@ export const FieldFileUploadWrapper = styled.div<{ $disabled: boolean }>`
           cursor: pointer;
         `}
 
-  width: 8rem;
+  ${({ $isPdfOnly }) =>
+    !$isPdfOnly &&
+    css`
+      width: 8rem;
+    `}
 
   &:hover {
     [data-remove] {
@@ -367,6 +403,7 @@ export const CheckboxWrapper = styled.label<{
   align-items: center;
   justify-content: flex-start;
   cursor: pointer;
+  gap: 0.5rem;
 
   > input {
     &:disabled {
@@ -399,11 +436,11 @@ export const CheckboxWrapper = styled.label<{
     }
   }
 
-  > div,
-  > div svg {
+  > div:first-of-type,
+  > div:first-of-type svg {
     ${transition}
   }
-  > div {
+  > div:first-of-type {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -423,7 +460,6 @@ export const CheckboxWrapper = styled.label<{
       css`
         border-radius: ${theme?.borderRadius};
       `};
-    margin-right: 0.5rem;
   }
 
   > input {
@@ -459,7 +495,7 @@ export const CheckboxWrapper = styled.label<{
   ${({ $error, theme }) =>
     !checkIfValueIsEmpty($error) &&
     css`
-      > div {
+      > div:first-of-type {
         border: 1px solid ${theme?.error?.borderColor || colors.orange}};
         ${
           theme?.error?.backgroundColor &&

package/src/components/form/Select.tsx

@@ -11,14 +11,10 @@ import type { SelectDataProps, SelectProps } from "./types";
 export type { SelectProps } from "./types";
 const colors = theme.colors.light;
 
-const customStyles = (
+const customStyles = <Option extends Record<string, unknown> = SelectDataProps>(
   error: unknown,
   customTheme: SelectProps["theme"]
-): StylesConfig<
-  SelectDataProps<string>,
-  boolean,
-  GroupBase<SelectDataProps<string>>
-> => ({
+): StylesConfig<Option, boolean, GroupBase<Option>> => ({
   control: (provided, state: any) => {
     const before = state.selectProps.label
       ? {
@@ -101,7 +97,10 @@ const customStyles = (
   }
 });
 
-export default function SelectComponent<M extends boolean>({
+export default function SelectComponent<
+  M extends boolean,
+  Option extends Record<string, unknown> = SelectDataProps
+>({
   name,
   options,
   placeholder = "Choose...",
@@ -113,7 +112,7 @@ export default function SelectComponent<M extends boolean>({
   theme,
   isMulti,
   ...props
-}: SelectProps<M>) {
+}: SelectProps<M, Option>) {
   const [field, meta, helpers] = useField(name);
   const displayErrorMessage =
     meta.error && meta.touched && !errorMessage
@@ -126,13 +125,14 @@ export default function SelectComponent<M extends boolean>({
     typeof displayErrorMessage === "string" && displayErrorMessage !== "";
 
   const handleChange = (
-    option: Parameters<NonNullable<typeof onChange>>[0]
+    option: Parameters<NonNullable<typeof onChange>>[0],
+    actionMeta: Parameters<NonNullable<typeof onChange>>[1]
   ) => {
     if (!meta.touched) {
       helpers.setTouched(true);
     }
     helpers.setValue(option);
-    onChange?.(option);
+    onChange?.(option, actionMeta);
   };
   const handleBlur = () => {
     if (!meta.touched) {
@@ -143,7 +143,7 @@ export default function SelectComponent<M extends boolean>({
   return (
     <>
       <Select
-        styles={customStyles(displayErrorMessage, theme)}
+        styles={customStyles<Option>(displayErrorMessage, theme)}
         {...field}
         {...props}
         isMulti={isMulti}

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

@@ -1,6 +1,6 @@
 import * as Sentry from "@sentry/browser";
 import { useField } from "formik";
-import { Image, Trash, VideoCamera } from "phosphor-react";
+import { Image, Trash, VideoCamera, FilePdf, Upload, X } from "phosphor-react";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { loadAndSetMedia } from "../../../lib/base64/base64";
 import { bytesToSize } from "../../../lib/bytes/bytesToSize";
@@ -9,10 +9,11 @@ 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 ErrorComponent from "../Error";
 import {
   FieldFileUploadWrapper,
   FieldInput,
+  PdfOnlyLabel,
   FileUploadWrapper,
   ImagePreview,
   VideoPreview
@@ -26,6 +27,7 @@ import UploadedFiles from "./UploadedFiles";
 import { WithUploadToIpfs, WithUploadToIpfsProps } from "./WithUploadToIpfs";
 import { useModal } from "../../modal/useModal";
 import { ImageEditorModal } from "./ImageEditorModal/ImageEditorModal";
+import { Grid } from "../../ui/Grid";
 const colors = theme.colors.light;
 export type BaseUploadProps = UploadPropsWithNoIpfs;
 function BaseUpload({
@@ -52,6 +54,7 @@ function BaseUpload({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   removeFile,
   saveButtonTheme,
+  errorComponent,
   theme,
   ...props
 }: UploadPropsWithNoIpfs & WithUploadToIpfsProps) {
@@ -60,6 +63,7 @@ function BaseUpload({
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [preview, setPreview] = useState<string | null>();
   const [field, meta, helpers] = useField(name);
+  const [errorMesage, setErrorMessage] = useState<string>();
 
   const handleLoading = useCallback(
     (loadingValue: boolean) => {
@@ -89,6 +93,9 @@ function BaseUpload({
   const isVideoOnly = mimetypes.every((mimetype) =>
     mimetype.startsWith("video/")
   );
+  const isPdfOnly = mimetypes.every((mimetype) =>
+    mimetype.startsWith("application/pdf")
+  );
 
   useEffect(() => {
     onFilesSelect?.(files);
@@ -112,6 +119,12 @@ function BaseUpload({
             setPreview(base64Uri);
           });
         }
+      } else if (isPdfOnly) {
+        if (withUpload) {
+          loadIpfsFile(files[0] as FileProps);
+        } else {
+          setPreview(files[0]?.name);
+        }
       }
     }
   }, [files]); // eslint-disable-line
@@ -123,12 +136,12 @@ function BaseUpload({
     }
     handleLoading(true);
     try {
-      const imagePreview = await loadMedia(fileSrc || "");
-      if (imagePreview) {
-        setPreview(imagePreview);
+      const videoPreview = await loadMedia(fileSrc || "");
+      if (videoPreview) {
+        setPreview(videoPreview);
       } else {
         console.warn(
-          `imagePreview ${imagePreview} is falsy in loadIpfsImagePreview`
+          `videoPreview ${videoPreview} is falsy in loadIpfsImagePreview`
         );
       }
     } catch (error) {
@@ -163,6 +176,27 @@ function BaseUpload({
     }
   };
 
+  const loadIpfsFile = async (file: FileProps) => {
+    const fileSrc = file && file?.src ? file?.src : false;
+    if (!fileSrc) {
+      return false;
+    }
+    try {
+      handleLoading(true);
+      const filePreview = await loadMedia(fileSrc || "");
+      if (filePreview) {
+        setPreview(files[0]?.name);
+      } else {
+        console.warn(`filePreview ${filePreview} is falsy in loadIpfsFile`);
+      }
+    } catch (error) {
+      console.error(error);
+      Sentry.captureException(error);
+    } finally {
+      handleLoading(false);
+    }
+  };
+
   const handleChooseFile = () => {
     const input = inputRef.current;
     if (input) {
@@ -216,16 +250,26 @@ function BaseUpload({
         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`
-        );
+      try {
+        const files = await saveToIpfs(efiles, { throwOnError: true });
+        setErrorMessage(undefined);
+        if (files) {
+          setFiles(files);
+        } else {
+          setFiles([]);
+          console.warn(
+            `There has been an error because 'files' ${files} is falsy in handleSave`
+          );
+        }
+      } catch (err) {
+        if (err instanceof Error) {
+          setErrorMessage(err.message);
+        } else {
+          setErrorMessage("Something went wrong");
+        }
+      } finally {
+        handleLoading(false);
       }
-      handleLoading(false);
     },
     [meta.touched, handleLoading, saveToIpfs, helpers, setFiles]
   );
@@ -234,6 +278,7 @@ function BaseUpload({
     borderRadius: borderRadius ? `${borderRadius}${borderRadiusUnit}` : "",
     width: width ? `100%` : ""
   };
+  const showPreview = field.value && field.value?.length !== 0 && preview;
   return (
     <>
       {withEditor && showEditor && (
@@ -262,11 +307,17 @@ function BaseUpload({
           }}
         />
       )}
-      <FieldFileUploadWrapper {...wrapperProps} $disabled={!!disabled}>
+      {errorMesage && errorComponent?.(errorMesage)}
+      <FieldFileUploadWrapper
+        {...wrapperProps}
+        $isPdfOnly={isPdfOnly}
+        $disabled={!!disabled}
+      >
         <FieldInput
           {...props}
           hidden
           type="file"
+          id={`file-${name}`}
           accept={accept}
           multiple={multiple}
           onChange={async (e) => {
@@ -302,64 +353,129 @@ function BaseUpload({
             <>{trigger}</>
           </ThemedButton>
         ) : (
-          <FileUploadWrapper
-            data-disabled={disabled}
-            onClick={handleChooseFile}
-            $error={errorMessage}
-            style={style}
-            theme={theme?.triggerTheme}
-          >
-            {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" marginBottom={0} textAlign="center">
-                    {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>
+          (!isPdfOnly || (isPdfOnly && files.length > 0 && !multiple)) && (
+            <FileUploadWrapper
+              $isPdfOnly={isPdfOnly}
+              data-disabled={disabled}
+              onClick={() => {
+                if (!isPdfOnly) {
+                  handleChooseFile();
+                }
+              }}
+              $error={errorMessage}
+              style={{ ...style, ...theme?.overrides }}
+              theme={theme?.triggerTheme}
+            >
+              {isLoading ? (
+                <Loading size={2} />
+              ) : (
+                <>
+                  {showPreview ? (
+                    <>
+                      {isVideoOnly ? (
+                        <VideoPreview
+                          src={
+                            preview?.startsWith("http")
+                              ? preview
+                              : preview?.startsWith(
+                                    "data:application/octet-stream;base64,"
+                                  )
+                                ? "data:video/mp4;base64," +
+                                  preview?.substring(
+                                    "data:application/octet-stream;base64,"
+                                      .length
+                                  )
+                                : preview
+                          }
+                          autoPlay
+                          muted
+                          loop
+                        />
+                      ) : isPdfOnly ? (
+                        <Grid
+                          flexDirection="row"
+                          alignItems="center"
+                          gap="0.25rem"
+                        >
+                          <div>
+                            <FilePdf size={24} />
+                          </div>
+                          <Typography style={{ width: "100%" }}>
+                            {preview}
+                          </Typography>
+                          <button
+                            type="button"
+                            style={{
+                              display: "flex",
+                              justifyContent: "center"
+                            }}
+                            onClick={(e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              handleRemoveAllFiles();
+                            }}
+                          >
+                            <X size={12.5} />
+                          </button>
+                        </Grid>
+                      ) : (
+                        <ImagePreview
+                          style={{ ...imgPreviewStyle }}
+                          src={preview}
+                        />
+                      )}
+                    </>
+                  ) : isVideoOnly ? (
+                    <VideoCamera size={24} />
+                  ) : isPdfOnly ? (
+                    <FilePdf size={24} />
+                  ) : (
+                    <Image size={24} />
+                  )}
+                  {placeholder && !showPreview && (
+                    <Typography
+                      tag="p"
+                      marginBottom={0}
+                      textAlign="center"
+                      {...(isPdfOnly && { marginTop: 0 })}
+                    >
+                      {placeholder}
+                    </Typography>
+                  )}
+                </>
+              )}
+            </FileUploadWrapper>
+          )
         )}
+        {!disabled &&
+          field.value &&
+          field.value?.length !== 0 &&
+          preview &&
+          !isPdfOnly && (
+            <div onClick={handleRemoveAllFiles} data-remove style={style}>
+              <Trash size={24} color={colors.white} />
+            </div>
+          )}
         {multiple && (
-          <UploadedFiles files={files} handleRemoveFile={handleRemoveFile} />
+          <UploadedFiles
+            files={files}
+            isPdfOnly={isPdfOnly}
+            handleRemoveFile={handleRemoveFile}
+          />
+        )}
+        {isPdfOnly && (
+          <Grid>
+            <PdfOnlyLabel
+              htmlFor={`file-${name}`}
+              $disabled={disabled}
+              style={{ ...theme?.uploadButton }}
+            >
+              Upload file <Upload size={20} />
+            </PdfOnlyLabel>
+          </Grid>
         )}
       </FieldFileUploadWrapper>
-      <Error display={displayError} message={errorMessage} />
+      <ErrorComponent display={displayError} message={errorMessage} />
     </>
   );
 }