@bosonprotocol/react-kit 0.36.0-alpha.1 → 0.36.0-alpha.10

package/src/components/productCard/commonStyles.ts

@@ -1,10 +1,10 @@
 import { css } from "styled-components";
-import { theme } from "../../theme";
+import { getCssVar } from "../../theme";
 
 export const cardWrapperStyles = css`
   padding: 0px;
   isolation: isolate;
   width: 100%;
   box-shadow: 0px 4.31783px 107.946px rgba(21, 30, 52, 0.1);
-  background: ${theme.colors.light.white};
+  background: ${getCssVar("--background-accent-color")};
 `;

package/src/components/queryClient/withQueryClientProvider.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { QueryClientProviderCustom } from "./QueryClientProviderCustom";
+import { useQueryClient } from "react-query";
 
 export const withQueryClientProvider = <P extends object>(
   WrappedComponent: React.ComponentType<P>
@@ -9,11 +10,20 @@ export const withQueryClientProvider = <P extends object>(
 
   // Return a new component
   const WithQueryClientProvider: React.FC<Props> = (props) => {
-    return (
-      <QueryClientProviderCustom>
-        <WrappedComponent {...props} />
-      </QueryClientProviderCustom>
-    );
+    let wrapWithQueryClient = false;
+    try {
+      useQueryClient();
+    } catch {
+      wrapWithQueryClient = true;
+    }
+    if (wrapWithQueryClient) {
+      return (
+        <QueryClientProviderCustom>
+          <WrappedComponent {...props} />
+        </QueryClientProviderCustom>
+      );
+    }
+    return <WrappedComponent {...props} />;
   };
 
   // Set display name for debugging purposes

package/src/components/searchBar/SearchBar.styles.ts

@@ -1,4 +1,5 @@
 import styled, { css } from "styled-components";
+import { colors } from "../../theme";
 
 export const InputWrapper = styled.div<{ disabled?: boolean }>`
   display: flex;
@@ -8,7 +9,7 @@ export const InputWrapper = styled.div<{ disabled?: boolean }>`
   gap: 1rem;
   height: 2.5rem;
   left: 1.25rem;
-  background: ${({ theme }) => theme?.colors?.light.lightGrey};
+  background: ${colors.greyLight};
   ${({ disabled }) =>
     disabled &&
     css`
@@ -20,13 +21,13 @@ export const InputField = styled.input`
   border: none;
   height: 1.563rem;
   width: 100%;
-  background-color: ${({ theme }) => theme?.colors?.light.lightGrey};
+  background-color: ${colors.greyLight};
   font-size: 1rem;
   line-height: 150%;
   vertical-align: middle;
   &:focus {
     outline: none;
-    color: ${({ theme }) => theme?.colors?.light.secondary};
+    color: ${colors.violet};
   }
   &:focus::placeholder {
     color: transparent;

package/src/components/skeleton/CollectionsCardSkeleton.tsx

@@ -1,10 +1,10 @@
 import React, { ButtonHTMLAttributes } from "react";
 import styled from "styled-components";
-import { theme } from "../../theme";
+import { colors } from "../../theme";
 import { cardWrapperStyles } from "../productCard/commonStyles";
 import { LoadingBubble } from "./common";
 import { Grid } from "../ui/Grid";
-const colors = theme.colors.light;
+
 const Container = styled.div`
   display: flex;
   flex-direction: column;
@@ -19,7 +19,7 @@ const ImagesContainer = styled.div`
   position: relative;
   /* REMs gives bad height here on smaller views */
   height: 208px;
-  background-color: ${colors.lightGrey};
+  background-color: ${colors.greyLight};
 `;
 
 const BottomCard = styled.div`
@@ -54,7 +54,7 @@ export const CollectionsCardSkeleton = (props: SkeletonCardProps) => {
             $width="140px"
             $height="102px"
             $borderRadius="0px"
-            $backgroundColor={theme.colors.light.darkGrey}
+            $backgroundColor={colors.greyDark}
           />
         </ImageOne>
         <ImageTwo>
@@ -62,7 +62,7 @@ export const CollectionsCardSkeleton = (props: SkeletonCardProps) => {
             $width="60px"
             $height="50px"
             $borderRadius="0px"
-            $backgroundColor={theme.colors.light.darkGrey}
+            $backgroundColor={colors.greyDark}
           />
         </ImageTwo>
         <ImageThree>
@@ -70,7 +70,7 @@ export const CollectionsCardSkeleton = (props: SkeletonCardProps) => {
             $width="60px"
             $height="50px"
             $borderRadius="0px"
-            $backgroundColor={theme.colors.light.darkGrey}
+            $backgroundColor={colors.greyDark}
           />
         </ImageThree>
       </ImagesContainer>

package/src/components/skeleton/ProductCardSkeleton.tsx

@@ -7,7 +7,7 @@ import {
   ProductCardTitleWrapper,
   ProductCardWrapper
 } from "../productCard/ProductCard.styles";
-import { theme } from "../../theme";
+import { colors } from "../../theme";
 import { LoadingBubble } from "./common";
 import styled from "styled-components";
 
@@ -30,13 +30,13 @@ export const ProductCardSkeleton = (props: SkeletonCardProps) => {
   const { withBottomText } = props;
 
   return (
-    <ProductCardWrapper {...props} $isHoverDisabled={true}>
+    <ProductCardWrapper {...props} $isHoverDisabled={true} $isClickable={false}>
       <ProductCardImageWrapperStyled>
         <LoadingBubble
           $width="100%"
           $height="340px"
           $borderRadius="0px"
-          $backgroundColor={theme.colors.light.darkGrey}
+          $backgroundColor={colors.greyDark}
         />
       </ProductCardImageWrapperStyled>
       <ProductCardBottom>

package/src/components/step/MultiSteps.tsx

@@ -6,8 +6,8 @@ import { Step, StepColorProps, StepState } from "./Step";
 import { MultiStepStyle, MultiStepWrapper, StepWrapper } from "./Step.styles";
 import { useBreakpoints } from "../../hooks/useBreakpoints";
 import { CSSProperties } from "styled-components";
-import { theme } from "../../theme";
-const colors = theme.colors.light;
+import { colors } from "../../theme";
+
 type StepData = {
   name?: string;
   steps: number;
@@ -31,12 +31,12 @@ export function MultiSteps({
   disableInactiveSteps = false,
   isRightArrowEnabled = false,
   hideArrows = false,
-  enabledArrowColor = colors.darkGrey,
-  disabledArrowColor = colors.lightArrowColor,
+  enabledArrowColor = colors.greyDark,
+  disabledArrowColor = colors.greyLight2,
   stepInactiveDotColor = "#d3d5db",
   stepInactiveBackgroundColor = colors.white,
-  stepInactiveHoverDotColor = colors.darkGrey,
-  stepInactiveHoverBackgroundColor = colors.lightGrey,
+  stepInactiveHoverDotColor = colors.greyDark,
+  stepInactiveHoverBackgroundColor = colors.greyLight,
   stepActiveBackgroundColor = colors.black,
   stepActiveDotsColor = colors.green, // TODO: var(--primary) in boson Dapp
   stepDoneBackgroundColor = colors.green, // TODO: var(--primary) in boson Dapp

package/src/components/step/Step.styles.ts

@@ -2,8 +2,8 @@ import styled, { CSSProperties, css } from "styled-components";
 
 import { transition } from "../../components/ui/styles";
 import { StepState } from "./Step";
-import { theme } from "../../theme";
-const colors = theme.colors.light;
+import { colors } from "../../theme";
+
 type StepColorProps = {
   $stepInactiveDotColor?: CSSProperties["color"];
   $stepInactiveBackgroundColor?: CSSProperties["color"];
@@ -179,7 +179,7 @@ export const MultiStepStyle = styled.div<{ $isLteS: boolean }>`
     font-weight: 600;
     font-size: 0.75rem;
     line-height: 1.5;
-    color: ${colors.darkGrey};
+    color: ${colors.greyDark};
   }
 `;
 

package/src/components/styles/GlobalStyle.tsx

@@ -1,9 +1,9 @@
 import { createGlobalStyle } from "styled-components";
 import { breakpoint } from "../../lib/ui/breakpoint";
-import { theme } from "../../theme";
 import { zIndex } from "../ui/zIndex";
+import { cssVars } from "./ResetStylesForNonWidgets";
+import { getCssVar } from "../../theme";
 
-const colors = theme.colors.light;
 const GlobalStyle = createGlobalStyle`
   @font-face {
     font-family: barlow;
@@ -16,20 +16,7 @@ const GlobalStyle = createGlobalStyle`
     --wcm-z-index: ${zIndex.Modal + 100};
   }
   :root {
-    --l: 50%;
-    --headerBgColor: ${colors.white};
-    --headerTextColor: ${colors.darkGrey};
-    --primary: ${colors.primary};
-    --secondary: ${colors.lightGrey};
-    --accent: ${colors.accent};
-    --accentDark: ${colors.arsenic};
-    --textColor: ${colors.black};
-    --primaryBgColor: ${colors.primaryBgColor};
-    --secondaryBgColor: ${colors.secondary};
-    --footerBgColor: ${colors.black};
-    --footerTextColor: ${colors.white};
-    --buttonBgColor: ${colors.primary};
-    --buttonTextColor: ${colors.black};
+    ${cssVars}
 
     font-size: 0.75rem;
     ${breakpoint.xs} {
@@ -61,7 +48,7 @@ const GlobalStyle = createGlobalStyle`
     margin: 0;
     padding: 0;
 
-    color: var(--textColor);
+    color: ${getCssVar("--main-text-color")};
 
     font-family: "Plus Jakarta Sans";
     font-style: normal;

package/src/components/styles/GlobalStyledThemed.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import GlobalStyle from "./GlobalStyle";
+import { useBosonTheme } from "../widgets/BosonThemeProvider";
+
+export const GlobalStyledThemed = () => {
+  const { theme } = useBosonTheme();
+
+  return <GlobalStyle theme={theme} />;
+};

package/src/components/styles/ResetStylesForNonWidgets.tsx

@@ -1,23 +1,30 @@
-import styled from "styled-components";
-import { theme } from "../../theme";
-const colors = theme.colors.light;
+import styled, { css } from "styled-components";
+import { colors } from "../../theme";
+import { isTruthy } from "../../types/helpers";
+
+export const cssVars = css`
+  --l: 50%;
+  --primary: ${colors.green};
+  --secondary: ${colors.greyLight};
+  --accent: ${colors.violet};
+
+  ${({ theme }) =>
+    Object.keys(theme)
+      .filter((key) => key.startsWith("--"))
+      .map((key) => {
+        const value = theme[key];
+        if (!value) {
+          return null;
+        }
+        return css`
+          ${key}:${value};
+        `;
+      })
+      .filter(isTruthy)};
+`;
 
 export const ResetStylesForNonWidgets = styled.div`
   // TODO: check if we can avoid this by using shadow dom (react-shadow for example)
   color: ${colors.black};
-  --l: 50%;
-  --headerBgColor: ${colors.white};
-  --headerTextColor: ${colors.darkGrey};
-  --primary: ${colors.primary};
-  --secondary: ${colors.lightGrey};
-  --accent: ${colors.accent};
-  --accentNoDefault: initial;
-  --accentDark: ${colors.arsenic};
-  --textColor: ${colors.black};
-  --primaryBgColor: ${colors.primaryBgColor};
-  --secondaryBgColor: ${colors.secondary};
-  --footerBgColor: ${colors.black};
-  --footerTextColor: ${colors.white};
-  --buttonBgColor: ${colors.primary};
-  --buttonTextColor: ${colors.black};
+  ${cssVars}
 `;

package/src/components/styles/useCSSVariable.ts

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 
 // all css variables can be found in src/components/app/index.tsx
 export const useCSSVariable = (
-  variableName: "--primary" | "--secondary" | "--accent" | "--accentDark"
+  variableName: "--primary" | "--secondary" | "--accent"
 ) => {
   const [value, setValue] = useState<string>();
   useEffect(() => {

package/src/components/toasts/SuccessTransactionToast.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 import { Toast } from "react-hot-toast";
-import { theme } from "../../theme";
+import { colors } from "../../theme";
 
 import { Grid } from "../ui/Grid";
 import { Typography } from "../ui/Typography";
 import SuccessToast from "./common/SuccessToast";
-const colors = theme.colors.light;
 
 interface Props {
   t: Toast;
@@ -26,7 +25,7 @@ export default function SuccessTransactionToast({
         <Typography>{action}</Typography>
         {onViewDetails ? (
           <Typography
-            color={colors.secondary}
+            color={colors.violet}
             style={{
               cursor: "pointer"
             }}
@@ -36,7 +35,7 @@ export default function SuccessTransactionToast({
           </Typography>
         ) : url ? (
           <a href={url} target="_blank" rel="noreferrer">
-            <Typography color={colors.secondary}>View details</Typography>
+            <Typography color={colors.violet}>View details</Typography>
           </a>
         ) : null}
       </Grid>

package/src/components/toasts/common/ErrorToast.tsx

@@ -2,15 +2,14 @@ import { Warning, X } from "phosphor-react";
 import React, { ReactNode } from "react";
 import toast, { Toast } from "react-hot-toast";
 import styled from "styled-components";
-import { theme } from "../../../theme";
+import { colors } from "../../../theme";
 import { Button } from "../../buttons/Button";
 
 import { Grid } from "../../ui/Grid";
-const colors = theme.colors.light;
 
 const Close = styled(X)`
   line {
-    stroke: ${colors.darkGrey};
+    stroke: ${colors.greyDark};
   }
 `;
 const StyledButton = styled(Button)`

package/src/components/toasts/common/SuccessToast.tsx

@@ -3,14 +3,13 @@ import React, { ReactNode } from "react";
 import toast, { Toast } from "react-hot-toast";
 import styled from "styled-components";
 
-import { theme } from "../../../theme";
+import { colors } from "../../../theme";
 import { Button } from "../../buttons/Button";
 import { Grid } from "../../ui/Grid";
-const colors = theme.colors.light;
 
 const Close = styled(X)`
   line {
-    stroke: ${colors.darkGrey};
+    stroke: ${colors.greyDark};
   }
 `;
 const StyledButton = styled(Button)`

package/src/components/tooltip/Tooltip.tsx

@@ -7,7 +7,7 @@ import { IconWeight, Question } from "phosphor-react";
 import React, { ReactNode } from "react";
 import styled from "styled-components";
 
-import { theme } from "../../theme";
+import { colors } from "../../theme";
 
 export interface TooltipProps extends Omit<TippyProps, "children"> {
   content: React.ReactNode;
@@ -43,11 +43,11 @@ export interface TooltipProps extends Omit<TippyProps, "children"> {
 const Button = styled.button`
   all: unset;
   display: flex;
-  color: ${theme.colors.light.darkGrey};
+  color: ${colors.greyDark};
   background-color: transparent;
   margin: 0 0.5rem;
   :hover {
-    color: ${theme.colors.light.black};
+    color: ${colors.black};
   }
 `;
 
@@ -74,7 +74,7 @@ export const Tooltip = ({
       {...rest}
     >
       {wrap ? (
-        <Button type="button" theme={theme}>
+        <Button type="button">
           {children ? children : <Question size={size} weight={weight} />}
         </Button>
       ) : (

package/src/components/ui/DetailsSummary.tsx

@@ -1,9 +1,8 @@
 import { CaretDown, CaretUp } from "phosphor-react";
 import React, { ReactElement, ReactNode, useEffect, useState } from "react";
 import styled, { CSSProperties } from "styled-components";
-import { theme } from "../../theme";
+import { getCssVar } from "../../theme";
 import { Grid } from "./Grid";
-const colors = theme.colors.light;
 
 const IconWrapper = styled.div`
   display: flex;
@@ -11,14 +10,14 @@ const IconWrapper = styled.div`
   align-items: flex-start;
   flex-shrink: 0;
   border-radius: 1.25rem;
-  border: 2px solid ${colors.border};
-  background: ${colors.lightGrey};
+  border: 2px solid ${getCssVar("--border-color")};
+  background: ${getCssVar("--background-color")};
 `;
 
 const Details = styled.details<Pick<DetailsSummaryProps, "$paddingSides">>`
   width: 100%;
   &[open]:last-of-type {
-    border-bottom: 2px solid ${colors.border};
+    border-bottom: 2px solid ${getCssVar("--border-color")};
   }
   summary {
     cursor: pointer;
@@ -32,8 +31,8 @@ const Details = styled.details<Pick<DetailsSummaryProps, "$paddingSides">>`
     padding-left: ${({ $paddingSides }) => $paddingSides};
     padding-right: ${({ $paddingSides }) => $paddingSides};
 
-    border-top: 2px solid ${colors.border};
-    border-bottom: 2px solid ${colors.border};
+    border-top: 2px solid ${getCssVar("--border-color")};
+    border-bottom: 2px solid ${getCssVar("--border-color")};
 
     font-size: 1rem;
     font-weight: 600;

package/src/components/ui/Grid.tsx

@@ -22,8 +22,16 @@ const pickedProps = {
   marginRight: true,
   marginBottom: true,
   marginLeft: true,
+  paddingTop: true,
+  paddingRight: true,
+  paddingBottom: true,
+  paddingLeft: true,
   width: true,
-  height: true
+  height: true,
+  maxWidth: true,
+  minWidth: true,
+  maxHeight: true,
+  minHeight: true
 } as const;
 type IGrid = Pick<CSSProperties, keyof typeof pickedProps>;
 
@@ -31,6 +39,12 @@ type InnerGridProps = Record<`$${keyof IGrid}`, IGrid[keyof IGrid]>;
 
 const Container = styled.div<InnerGridProps>`
   ${({ $width }) => (isDefined($width) ? `width:${$width};` : "width: 100%;")}
+  ${({ $maxWidth }) => (isDefined($maxWidth) ? `max-width:${$maxWidth}` : "")};
+  ${({ $minWidth }) => (isDefined($minWidth) ? `min-width:${$minWidth}` : "")};
+  ${({ $maxHeight }) =>
+    isDefined($maxHeight) ? `max-height:${$maxHeight}` : ""};
+  ${({ $minHeight }) =>
+    isDefined($minHeight) ? `min-height:${$minHeight}` : ""};
   height: ${({ $height }) => (isDefined($height) ? $height : "initial")};
   display: flex;
   align-items: ${({ $alignItems }) =>
@@ -62,6 +76,14 @@ const Container = styled.div<InnerGridProps>`
     isDefined($marginBottom) ? `margin-bottom:${$marginBottom};` : ""}
   ${({ $marginLeft }) =>
     isDefined($marginLeft) ? `margin-left:${$marginLeft};` : ""}
+  ${({ $paddingTop }) =>
+    isDefined($paddingTop) ? `padding-top:${$paddingTop};` : ""}
+  ${({ $paddingRight }) =>
+    isDefined($paddingRight) ? `padding-right:${$paddingRight};` : ""}
+  ${({ $paddingBottom }) =>
+    isDefined($paddingBottom) ? `padding-bottom:${$paddingBottom};` : ""}
+  ${({ $paddingLeft }) =>
+    isDefined($paddingLeft) ? `padding-left:${$paddingLeft};` : ""}
   ${({ $alignSelf }) =>
     isDefined($alignSelf) ? `align-self:${$alignSelf};` : ""}
   ${({ $justifySelf }) =>

package/src/components/ui/GridContainer.tsx

@@ -7,6 +7,8 @@ import React, {
   forwardRef
 } from "react";
 import { getTransientCustomProps } from "./getTransientCustomProps";
+import { isDefined } from "./common";
+import { AddDollarPrefixToKeys } from "../../types/helpers";
 
 export interface ItemsPerRow {
   xs: number;
@@ -37,7 +39,8 @@ const pickedProps = {
   rowGapPerRow: true,
   columnGap: true,
   rowGap: true,
-  defaultSize: true
+  defaultSize: true,
+  width: true
 } as const;
 type GridProps = {
   itemsPerRow?: Partial<ItemsPerRow>;
@@ -46,16 +49,10 @@ type GridProps = {
   columnGap?: CSSProperties["columnGap"];
   rowGap?: CSSProperties["rowGap"];
   defaultSize?: string;
+  width?: CSSProperties["width"];
 };
 
-type InnerGridProps = {
-  $itemsPerRow?: Partial<ItemsPerRow>;
-  $columnGapPerRow?: Partial<ColumnGapPerRow>;
-  $rowGapPerRow?: Partial<RowGapPerRow>;
-  $columnGap?: CSSProperties["columnGap"];
-  $rowGap?: CSSProperties["rowGap"];
-  $defaultSize?: string;
-};
+type InnerGridProps = AddDollarPrefixToKeys<GridProps>;
 
 const GridContainerDiv = styled.div<InnerGridProps>`
   display: grid;
@@ -106,11 +103,13 @@ const GridContainerDiv = styled.div<InnerGridProps>`
     grid-column-gap: ${({ $columnGapPerRow }) => $columnGapPerRow?.xl};
     grid-row-gap: ${({ $rowGapPerRow }) => $rowGapPerRow?.xl};
   }
+
+  ${({ $width }) => (isDefined($width) ? `width:${$width}` : "")};
 `;
 type DivProps = HTMLAttributes<ElementRef<"div">>;
-type Props = DivProps & GridProps;
+export type GridContainerProps = DivProps & GridProps;
 
-export const GridContainer = forwardRef<ElementRef<"div">, Props>(
+export const GridContainer = forwardRef<ElementRef<"div">, GridContainerProps>(
   (props, ref) => {
     const { transientProps, otherProps } = getTransientCustomProps<
       InnerGridProps,

package/src/components/ui/IpfsImage.tsx

@@ -8,13 +8,13 @@ import {
   getImageUrl,
   ImageOptimizationOpts
 } from "../../lib/images/images";
-import { theme } from "../../theme";
+import { colors } from "../../theme";
 import { useIpfsContext } from "../ipfs/IpfsContext";
 import { Loading } from "./loading/Loading";
 
 import { Typography } from "./Typography";
 import { zIndex } from "./zIndex";
-const colors = theme.colors.light;
+
 type LoadingStatus = "loading" | "success" | "error";
 
 const ImageWrapper = styled.div<{ $hide?: boolean }>`
@@ -57,7 +57,7 @@ const ImagePlaceholder = styled.div`
   top: 0;
   height: 100%;
   width: 100%;
-  background-color: ${colors.darkGrey};
+  background-color: ${colors.greyDark};
   display: flex;
   flex-direction: column;
   justify-content: center;

package/src/components/ui/Step.tsx

@@ -3,11 +3,9 @@ import styled from "styled-components";
 
 import { Typography } from "../../components/ui/Typography";
 import { breakpoint } from "../../lib/ui/breakpoint";
-import { theme } from "../../theme";
+import { getCssVar } from "../../theme";
 import { zIndex } from "./zIndex";
 
-const colors = theme.colors.light;
-
 const StepWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -34,7 +32,7 @@ const StepWrapper = styled.div`
       height: 50%;
       top: 50%;
       left: 0%;
-      background: var(--primary, ${colors.green});
+      background: ${getCssVar("--main-accent-color")};
     }
   }
   [data-testid="step-title"] {