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

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

@@ -1,4 +1,4 @@
-import { ImageSquare, X } from "phosphor-react";
+import { ImageSquare, X, FilePdf } from "phosphor-react";
 import React, { useCallback } from "react";
 import styled from "styled-components";
 import { bytesToSize } from "../../../lib/bytes/bytesToSize";
@@ -33,6 +33,7 @@ interface Props {
   base64Content?: string;
   showSize: boolean;
   color: "grey" | "white";
+  isPdfOnly?: boolean;
   handleRemoveFile?: () => void;
 }
 export default function UploadedFile({
@@ -41,12 +42,13 @@ export default function UploadedFile({
   color,
   base64Content,
   showSize,
+  isPdfOnly,
   handleRemoveFile
 }: Props) {
   const FileContent = useCallback(() => {
     return (
       <>
-        <ImageSquare size={23} />
+        {isPdfOnly ? <FilePdf size={23} /> : <ImageSquare size={23} />}
         <Typography fontSize="1rem" fontWeight="400">
           &nbsp;&nbsp; {fileName}
         </Typography>
@@ -57,7 +59,7 @@ export default function UploadedFile({
         )}
       </>
     );
-  }, [fileName, fileSize, showSize]);
+  }, [fileName, isPdfOnly, fileSize, showSize]);
   return (
     <Grid>
       <AttachmentContainer $isLeftAligned={color === "white"}>

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

@@ -5,13 +5,19 @@ import { UploadFileType } from "../types";
 interface Props {
   files: UploadFileType[];
   handleRemoveFile: (index: number) => void;
+  isPdfOnly?: boolean;
 }
-export default function UploadedFiles({ files, handleRemoveFile }: Props) {
+export default function UploadedFiles({
+  files,
+  handleRemoveFile,
+  isPdfOnly
+}: Props) {
   return (
     <>
       {files.map((file: UploadFileType, index: number) => {
         return (
           <UploadedFile
+            isPdfOnly={isPdfOnly}
             key={`${file?.name || ""}_${index}`}
             fileName={file?.name || `file_${index}`}
             fileSize={Number(file?.size || 0)}

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

@@ -22,7 +22,8 @@ export const SUPPORTED_FORMATS = [
 ];
 export interface WithUploadToIpfsProps {
   saveToIpfs: (
-    files: File[] | null
+    files: File[] | null,
+    options?: { throwOnError?: boolean }
   ) => Promise<false | FileProps[] | undefined>;
   loadMedia: (src: string) => Promise<string | undefined>;
   removeFile: (src: string) => Promise<void>;
@@ -39,7 +40,10 @@ export function WithUploadToIpfs<P extends WithUploadToIpfsProps>(
     const { saveFile, loadMedia, removeFile } = useSaveImageToIpfs();
 
     const saveToIpfs: WithUploadToIpfsProps["saveToIpfs"] = useCallback(
-      async (filesArray: File[] | null) => {
+      async (
+        filesArray: File[] | null,
+        options: { throwOnError?: boolean } = {}
+      ) => {
         if (!filesArray) {
           return;
         }
@@ -53,10 +57,12 @@ export function WithUploadToIpfs<P extends WithUploadToIpfsProps>(
             const err = `File ${
               file?.name
             } size cannot exceed more than ${bytesToSize(sizeValidation)}!`;
+            if (options?.throwOnError) throw new Error(err);
             filesErrors.push(err);
           }
           if (!formatValidation.includes(file?.type)) {
             const err = `Uploaded file has unsupported format of ${file?.type}!`;
+            if (options?.throwOnError) throw new Error(err);
             filesErrors.push(err);
           }
         }

package/src/components/form/types.ts

@@ -1,5 +1,10 @@
 import { ReactNode } from "react";
-import { CSSObjectWithLabel, MultiValue, SingleValue } from "react-select";
+import {
+  ActionMeta,
+  CSSObjectWithLabel,
+  MultiValue,
+  SingleValue
+} from "react-select";
 import { CSSProperties } from "styled-components";
 import { ImageEditorModalProps } from "./Upload/ImageEditorModal/ImageEditorModal";
 import type {
@@ -8,6 +13,8 @@ import type {
   TextAreaTheme
 } from "./Field.styles";
 import type { GridProps } from "../ui/Grid";
+import { StateManagerProps } from "react-select/dist/declarations/src/useStateManager";
+import { IconProps } from "phosphor-react";
 
 export interface BaseProps {
   name: string;
@@ -23,10 +30,17 @@ export interface DatepickerProps extends BaseProps {
   setIsFormValid?: (isValid: boolean) => void;
 }
 
-export interface CheckboxProps extends BaseProps {
-  text?: string;
-  theme?: CheckboxTheme;
-}
+export type CheckboxProps = BaseProps &
+  Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked"> & {
+    text?: string;
+    className?: string;
+    theme?: CheckboxTheme;
+    iconProps?: Parameters<
+      React.ForwardRefExoticComponent<
+        IconProps & React.RefAttributes<SVGSVGElement>
+      >
+    >[0];
+  };
 
 export type TextareaProps = BaseProps &
   React.TextareaHTMLAttributes<HTMLTextAreaElement> & { theme?: TextAreaTheme };
@@ -66,7 +80,7 @@ export type TagsProps = BaseProps &
     transform?: (tag: string) => string;
   };
 
-export interface SelectDataProps<Value extends string = string> {
+export interface SelectDataProps<Value = string> {
   label: string;
   value: Value;
   disabled?: boolean;
@@ -77,27 +91,55 @@ export interface SelectContentProps {
   children: React.ReactNode | JSX.Element;
 }
 
-export type OnChange = (value: SingleValue<SelectDataProps>) => void;
+export type OnChange<Value = string> = (
+  value: SingleValue<SelectDataProps<Value>>
+) => void;
 
-export interface BaseSelectProps {
-  options: Array<SelectDataProps>;
+export interface BaseSelectProps<Value = string> {
+  options: Array<SelectDataProps<Value>>;
   placeholder?: string;
-  defaultValue?: SelectDataProps | null;
-  onChange?: OnChange;
+  defaultValue?: SelectDataProps<Value> | null;
+  onChange?: OnChange<Value>;
 }
-
-export interface SelectProps<M extends boolean | undefined = false>
-  extends BaseProps {
+export type SupportedReactSelectProps<
+  M extends boolean | undefined = false,
+  Option extends Record<string, unknown> = SelectDataProps
+> = Pick<
+  StateManagerProps<Option, M extends undefined ? false : boolean>,
+  | "formatGroupLabel"
+  | "formatOptionLabel"
+  | "menuPlacement"
+  | "menuPosition"
+  | "menuIsOpen"
+  | "menuPortalTarget"
+  | "onMenuClose"
+  | "onMenuOpen"
+  | "onMenuScrollToBottom"
+  | "onMenuScrollToTop"
+  | "maxMenuHeight"
+  | "minMenuHeight"
+  | "menuShouldBlockScroll"
+  | "menuShouldScrollIntoView"
+  | "openMenuOnClick"
+  | "openMenuOnFocus"
+  | "closeMenuOnScroll"
+  | "closeMenuOnSelect"
+  | "captureMenuScroll"
+  | "defaultMenuIsOpen"
+>;
+export type SelectProps<
+  M extends boolean | undefined = false,
+  Option extends Record<string, unknown> = SelectDataProps
+> = BaseProps & {
   isMulti?: M;
   disabled?: boolean;
   isClearable?: boolean;
   isSearchable?: boolean;
-  options: Array<SelectDataProps> | Readonly<Array<SelectDataProps>>;
+  options: Array<Option> | Readonly<Array<Option>>;
   errorMessage?: string;
   onChange?: (
-    option: M extends true
-      ? MultiValue<SelectDataProps<string>>
-      : SingleValue<SelectDataProps<string>>
+    option: M extends true ? MultiValue<Option> : SingleValue<Option>,
+    actionMeta?: ActionMeta<Option>
   ) => void;
   label?: string;
   theme?: Partial<{
@@ -120,7 +162,7 @@ export interface SelectProps<M extends boolean | undefined = false>
     singleValue: Partial<CSSProperties> &
       Partial<{ error: CSSObjectWithLabel }>;
   }>;
-}
+} & SupportedReactSelectProps<M, Option>;
 
 export type UploadProps = BaseProps & {
   accept?: string;
@@ -137,8 +179,13 @@ export type UploadProps = BaseProps & {
   borderRadiusUnit?: "px" | "%";
   width?: number;
   height?: number;
+  errorComponent?: (errorMessage: string) => React.ReactNode;
   imgPreviewStyle?: Pick<CSSProperties, "objectFit">;
-  theme?: Partial<{ triggerTheme: FileUploadWrapperTheme }>;
+  theme?: Partial<{
+    triggerTheme: FileUploadWrapperTheme;
+    overrides: React.CSSProperties;
+    uploadButton: React.CSSProperties;
+  }>;
 } & (
     | {
         withEditor: true;

package/src/components/image/Image.styles.ts

@@ -15,8 +15,6 @@ export const ImageContainer = styled.img`
   width: 100%;
   height: 100%;
   object-fit: contain;
-  object-position: top;
-  padding: 1rem;
 `;
 
 const buttonText = css`

package/src/components/magicLink/MagicProvider.tsx

@@ -13,7 +13,7 @@ export const MagicProvider = ({ children }: { children: ReactNode }) => {
   return (
     <InnerMagicProvider
       chainId={chainId}
-      magicLinkKey={magicLinkKey}
+      magicLinkKey={magicLinkKey ?? ""}
       rpcUrls={CONFIG.rpcUrls}
     >
       {children}

package/src/components/magicLink/UserContext.tsx

@@ -1,14 +1,21 @@
 import React, { useContext } from "react";
+import { useConfigContext } from "../config/ConfigContext";
 
 export const UserContext = React.createContext<{
   user: string | undefined;
   setUser: React.Dispatch<React.SetStateAction<string | undefined>>;
 } | null>(null);
-
+const emptyUserContext = {
+  user: "",
+  setUser: () => {
+    //
+  }
+};
 export const useUser = () => {
+  const { withMagicLink } = useConfigContext();
   const value = useContext(UserContext);
-  if (!value) {
+  if (!value && withMagicLink) {
     throw new Error(`useUser must be used under a UserProvider`);
   }
-  return value;
+  return value || emptyUserContext;
 };

package/src/components/modal/components/Redeem/MyItems/Exchange.tsx

@@ -173,7 +173,7 @@ export default function Exchange({
           }
         }}
         onAvatarNameClick={handleOnAvatarClick}
-        price={Number(price)}
+        price={price}
         currency={offer.exchangeToken.symbol as Currencies}
         {...createSpecificCardConfig()}
       />

package/src/components/productCard/ProductCard.styles.ts

@@ -1,13 +1,14 @@
 import styled, { css } from "styled-components";
 import { theme } from "../../theme";
 import { cardWrapperStyles } from "./commonStyles";
+import { Typography } from "../ui/Typography";
+import { zIndex } from "../ui/zIndex";
 
 export const ProductCardLabelWrapper = styled.div`
   position: absolute;
   top: 0.5rem;
   left: 0.5rem;
   background: white;
-  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
   font-weight: 600;
   color: ${({ theme }) => theme?.colors?.light.darkGrey};
   z-index: 1;
@@ -73,29 +74,34 @@ export const ProductCardCreatorAvatar = styled.div`
 
 export const ProductCardCreatorName = styled.div`
   font-weight: 600;
-  font-size: 0.75rem;
+  font-size: 0.625rem;
   line-height: 150%;
-  min-height: 3em;
-  color: ${({ theme }) => theme?.colors?.light.accent};
+  color: ${({ theme }) => theme?.colors?.light.darkGrey};
   flex: none;
   order: 1;
   flex-grow: 0;
-  justify-self: flex-end;
-  margin-bottom: 0.25rem;
+  justify-self: flex-start;
+  margin-right: auto;
+  > span {
+    font-weight: 600;
+    font-size: 0.625rem;
+    color: ${({ theme }) => theme?.colors?.light.darkGrey};
+  }
 `;
 
-export const ProductCardTitle = styled.div.attrs({ className: "title" })`
-  font-weight: 600;
-  font-size: 1.25rem;
+export const ProductCardTitle = styled(Typography).attrs({
+  className: "title"
+})`
   color: ${({ theme }) => theme?.colors?.light.black};
   word-break: break-word;
   overflow: hidden;
-  text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   line-height: 1.5em;
   max-height: calc(1.5em * 2);
+  white-space: nowrap;
+  text-overflow: ellipsis;
 `;
 
 export const ProductCardPriceWrapper = styled.div`
@@ -117,37 +123,34 @@ export const ProductCardPrice = styled.div`
   color: ${({ theme }) => theme?.colors?.light.darkGrey};
 `;
 
-export const ProductCardData = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
 export const ProductCardBottom = styled.div.attrs({ className: "bottom" })`
   width: 100%;
-  background: ${theme?.colors?.light.white};
   height: 12rem;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: flex-end;
+  z-index: ${zIndex.ChatSeparator};
+  flex: 0;
 `;
 export const ProductCardBottomContent = styled.div`
   display: flex;
   justify-content: space-between;
+  flex-direction: column;
   width: 100%;
-  padding: 1rem 1.5rem 0.5rem 1.5rem;
   box-sizing: border-box;
   align-items: flex-start;
   column-gap: 0.25rem;
-  border-top: 2px solid ${theme.colors.light.border};
 `;
 
 export const ProductCardTitleWrapper = styled.div`
   width: 100%;
-  padding: 0 1.5rem 0.5rem 1.5rem;
   box-sizing: border-box;
 `;
 
-export const ProductCardWrapper = styled.div<{ $isHoverDisabled: boolean }>`
+export const ProductCardWrapper = styled.div<{
+  $isHoverDisabled: boolean;
+  $isImageFitCover?: boolean;
+}>`
   ${cardWrapperStyles}
   overflow: hidden;
   position: relative;
@@ -156,6 +159,9 @@ export const ProductCardWrapper = styled.div<{ $isHoverDisabled: boolean }>`
   justify-content: space-between;
   flex-direction: column;
   cursor: pointer;
+  min-height: 286px;
+  height: 286px;
+  padding: 0 1rem 1rem 1rem;
   [data-image-wrapper] {
     position: static;
     padding-top: 0;
@@ -163,21 +169,28 @@ export const ProductCardWrapper = styled.div<{ $isHoverDisabled: boolean }>`
     display: flex;
     justify-content: center;
     align-items: center;
+    ${({ $isImageFitCover }) =>
+      $isImageFitCover
+        ? css`
+            width: 100%;
+            img {
+              object-fit: cover;
+            }
+          `
+        : ""}
   }
   ${({ $isHoverDisabled }) =>
     !$isHoverDisabled
       ? css`
           transition: all 300ms ease-in-out;
           &:hover {
-            box-shadow:
-              0px 0px 0px rgba(0, 0, 0, 0.05),
-              4px 4px 4px rgba(0, 0, 0, 0.05),
-              8px 8px 8px rgba(0, 0, 0, 0.05),
-              16px 16px 16px rgba(0, 0, 0, 0.05);
+            border: 2px solid ${theme.colors.light.border};
 
             [data-image-wrapper] {
+              width: 110%;
               img {
-                transform: scale(1.05);
+                transform: scale(1.5);
+                object-position: center;
                 transition: all 300ms ease-in-out;
               }
             }
@@ -192,7 +205,7 @@ export const ProductCardTop = styled.div<{ $isNotImageLoaded: boolean }>`
   overflow: hidden;
   width: 100%;
   align-self: stretch;
-  z-index: 0;
+  z-index: ${zIndex.Default};
 `;
 
 export const BottomText = styled.p`
@@ -200,14 +213,28 @@ export const BottomText = styled.p`
   font-weight: 600;
   line-height: 0.975rem;
   margin: 0;
-  padding: 0 1.5rem 1rem 1.5rem;
   letter-spacing: 0.5px;
   color: ${theme.colors.light.darkGrey};
 `;
 
 export const ProductCardImageWrapper = styled.div`
   width: 100%;
-  min-height: 0;
-  height: auto;
+  height: 13.125rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 0.9375rem;
+  padding-bottom: 0.9375rem;
   flex: 1;
 `;
+
+export const ProductCardImageAndCTAContainer = styled.div`
+  position: relative;
+`;
+
+export const CTAOnHoverContainer = styled.div<{ $isHovered: boolean }>`
+  position: absolute;
+  z-index: ${zIndex.OfferCard};
+  bottom: ${({ $isHovered }) => ($isHovered ? "95px" : "1.875rem")};
+  transition: all 300ms ease-in-out;
+`;

package/src/components/productCard/ProductCard.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode, useState } from "react";
 import {
   Currencies,
   CurrencyDisplay
@@ -6,23 +6,20 @@ import {
 import { IBaseImage, Image } from "../image/Image";
 import { Tooltip, TooltipProps } from "../tooltip/Tooltip";
 import {
-  BottomText,
   ProductCardBottom,
   ProductCardBottomContent,
-  ProductCardCreator,
-  ProductCardCreatorAvatar,
   TopLeftRibbon,
   ProductCardCreatorName,
-  ProductCardData,
   ProductCardImageWrapper,
-  ProductCardPrice,
-  ProductCardPriceWrapper,
   ProductCardTitle,
   ProductCardTitleWrapper,
-  ProductCardWrapper
+  ProductCardWrapper,
+  CTAOnHoverContainer
 } from "./ProductCard.styles";
 
 import { ProductType } from "./const";
+import { Grid } from "../ui/Grid";
+
 interface IProductCard {
   asterisk?: boolean;
   avatar: string;
@@ -36,12 +33,15 @@ interface IProductCard {
   isHoverDisabled?: boolean;
   onAvatarNameClick?: () => void;
   onCardClick?: (id: string | number) => void;
-  price: number;
+  price: string;
   productId: string;
   productType?: ProductType;
   title: string;
   tooltip?: string;
   tooltipProps?: Omit<TooltipProps, "content">;
+  CTAOnHover?: ReactNode;
+  hideCreatorName?: boolean;
+  isImageFitCover?: boolean;
 }
 
 const Wrapper = ({
@@ -62,85 +62,83 @@ const Wrapper = ({
   }
   return <>{children}</>;
 };
+
 export const PhygitalLabel = ({ ...rest }) => {
   return <TopLeftRibbon {...rest} data-text="Phygital" />;
 };
+
 export const ProductCard = (props: IProductCard) => {
   const {
-    asterisk = false,
-    avatar,
-    onAvatarError,
     avatarName,
-    bottomText,
     currency,
     dataCard = "product-card",
     dataTestId = "offer",
     imageProps,
     isHoverDisabled = false,
-    onAvatarNameClick,
     onCardClick,
     price,
     productId,
     title,
     tooltip = "",
     tooltipProps = {},
-    productType
+    CTAOnHover,
+    hideCreatorName = false,
+    isImageFitCover = false
   } = props;
-  const isPhygital = productType === ProductType.phygital;
+
+  const [isHovered, setIsHovered] = useState(false);
+
   return (
     <ProductCardWrapper
       data-card={dataCard}
       $isHoverDisabled={isHoverDisabled}
       data-testid={dataTestId}
+      $isImageFitCover={isImageFitCover}
       onClick={(e) => {
         e.preventDefault();
         onCardClick?.(productId);
       }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
     >
       <ProductCardImageWrapper>
-        {isPhygital && <PhygitalLabel />}
         <Image {...imageProps} />
       </ProductCardImageWrapper>
+      {CTAOnHover && (
+        <CTAOnHoverContainer $isHovered={isHovered}>
+          {CTAOnHover}
+        </CTAOnHoverContainer>
+      )}
       <ProductCardBottom>
-        <div>
-          <ProductCardBottomContent>
-            <ProductCardData>
-              <ProductCardCreator
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onAvatarNameClick?.();
-                }}
-              >
-                <ProductCardCreatorAvatar>
-                  <img src={avatar} alt="avatar" onError={onAvatarError} />
-                </ProductCardCreatorAvatar>
-                <ProductCardCreatorName data-avatarname="product-card">
-                  {avatarName}
-                </ProductCardCreatorName>
-              </ProductCardCreator>
-            </ProductCardData>
-            <ProductCardPriceWrapper>
-              <Wrapper tooltip={tooltip} tooltipProps={tooltipProps}>
-                <>
-                  <ProductCardPrice>Price {asterisk && "*"}</ProductCardPrice>
-                  <CurrencyDisplay
-                    value={price}
-                    currency={currency}
-                    style={{
-                      wordBreak: "break-all",
-                      alignItems: "flex-start",
-                      justifyContent: "flex-end"
-                    }}
-                  />
-                </>
-              </Wrapper>
-            </ProductCardPriceWrapper>
-          </ProductCardBottomContent>
-          <ProductCardTitleWrapper>
-            <ProductCardTitle>{title}</ProductCardTitle>
-          </ProductCardTitleWrapper>
-        </div>
-        {bottomText && <BottomText>{bottomText}</BottomText>}
+        <ProductCardBottomContent>
+          <Grid flexDirection="column">
+            <ProductCardTitleWrapper>
+              <ProductCardTitle fontSize={"0.75rem"} fontWeight={"600"}>
+                {title}
+              </ProductCardTitle>
+            </ProductCardTitleWrapper>
+            {!hideCreatorName && (
+              <ProductCardCreatorName data-avatarname="product-card">
+                {avatarName}
+              </ProductCardCreatorName>
+            )}
+          </Grid>
+          <Wrapper tooltip={tooltip} tooltipProps={tooltipProps}>
+            <CurrencyDisplay
+              value={price}
+              currency={currency}
+              fontSize={"0.875rem"}
+              iconSize={16}
+              gap={"0.3125rem"}
+              style={{
+                wordBreak: "break-all",
+                alignItems: "center",
+                justifyContent: "center",
+                paddingTop: "0.25rem"
+              }}
+            />
+          </Wrapper>
+        </ProductCardBottomContent>
       </ProductCardBottom>
     </ProductCardWrapper>
   );

package/src/components/productCard/commonStyles.ts

@@ -5,7 +5,6 @@ export const cardWrapperStyles = css`
   padding: 0px;
   isolation: isolate;
   width: 100%;
-  min-height: 31.25rem;
   box-shadow: 0px 4.31783px 107.946px rgba(21, 30, 52, 0.1);
   background: ${theme.colors.light.white};
 `;