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

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

@@ -115,7 +115,21 @@ export const FieldInput = styled.input<{
     `};
 `;
 
-export const FileUploadWrapper = styled.div<{ error: any }>`
+export type FileUploadWrapperTheme = Partial<{
+  borderColor: CSSProperties["borderColor"];
+  borderRadius: CSSProperties["borderRadius"];
+  background: CSSProperties["background"];
+  focus: Partial<{
+    borderColor: CSSProperties["borderColor"];
+  }>;
+  error: Partial<{
+    borderColor: CSSProperties["borderColor"];
+  }>;
+}>;
+export const FileUploadWrapper = styled.div<{
+  $error: unknown;
+  theme: FileUploadWrapperTheme | undefined;
+}>`
   position: relative;
   overflow: hidden;
   display: flex;
@@ -144,28 +158,33 @@ export const FileUploadWrapper = styled.div<{ error: any }>`
     }
   }
 
-  background: ${colors.lightGrey};
-  border-radius: 0;
+  background: ${({ theme }) => theme?.background || colors.lightGrey};
+  ${({ theme }) =>
+    theme.borderRadius !== undefined &&
+    css`
+      border-radius: ${theme.borderRadius};
+    `};
   outline: none;
 
-  ${({ error }) =>
-    !checkIfValueIsEmpty(error)
+  ${({ $error, theme }) =>
+    !checkIfValueIsEmpty($error)
       ? css`
-          border: 1px solid ${colors.orange};
+          border: 1px solid ${theme?.error?.borderColor || colors.orange};
         `
       : css`
-          border: 1px solid ${colors.border};
+          border: 1px solid ${theme?.borderColor || colors.border};
         `}
 
   ${transition};
 
   &:focus,
   &:hover {
-    border: 1px solid var(--secondary);
+    border: 1px solid
+      ${({ theme }) => theme?.hover?.borderColor || colors.lightGrey};
   }
 
   /* prettier-ignore */
-  [data-disabled=true] {
+  :disabled, [data-disabled=true] {
     cursor: not-allowed;
     opacity: 0.5;
   }
@@ -319,7 +338,31 @@ export const FormFieldWrapper = styled(Grid)`
   }
 `;
 
-export const CheckboxWrapper = styled.label<{ error: any }>`
+export type CheckboxTheme = Partial<{
+  backgroundColor: CSSProperties["backgroundColor"];
+  borderColor: CSSProperties["borderColor"];
+  borderRadius: CSSProperties["borderRadius"];
+  color: CSSProperties["color"];
+  hover: Partial<{
+    borderColor: CSSProperties["borderColor"];
+    backgroundColor: CSSProperties["backgroundColor"];
+    color: CSSProperties["color"];
+  }>;
+  error: Partial<{
+    borderColor: CSSProperties["borderColor"];
+    backgroundColor: CSSProperties["backgroundColor"];
+    color: CSSProperties["color"];
+  }>;
+  checked: Partial<{
+    borderColor: CSSProperties["borderColor"];
+    backgroundColor: CSSProperties["backgroundColor"];
+    color: CSSProperties["color"];
+  }>;
+}>;
+export const CheckboxWrapper = styled.label<{
+  $error: unknown;
+  theme: CheckboxTheme;
+}>`
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -336,7 +379,18 @@ export const CheckboxWrapper = styled.label<{ error: any }>`
       + div {
         cursor: pointer;
         &:hover {
-          border: 1px solid ${colors.secondary};
+          border: 1px solid
+            ${({ theme }) => theme?.hover?.borderColor || colors.border};
+          ${({ theme }) =>
+            theme?.hover?.backgroundColor &&
+            css`
+              background-color: ${theme?.hover?.backgroundColor};
+            `};
+          ${({ theme }) =>
+            theme?.hover?.color &&
+            css`
+              color: ${theme?.hover?.color};
+            `};
           svg {
             opacity: 0.25;
           }
@@ -356,8 +410,19 @@ export const CheckboxWrapper = styled.label<{ error: any }>`
     width: 1.5rem;
     height: 1.5rem;
 
-    background: ${colors.lightGrey};
-
+    background-color: ${({ theme }) =>
+      theme?.backgroundColor || colors.lightGrey};
+    border: 1px solid ${({ theme }) => theme?.borderColor};
+    ${({ theme }) =>
+      theme?.color &&
+      css`
+        color: ${theme?.color};
+      `};
+    ${({ theme }) =>
+      theme?.borderRadius !== undefined &&
+      css`
+        border-radius: ${theme?.borderRadius};
+      `};
     margin-right: 0.5rem;
   }
 
@@ -366,6 +431,23 @@ export const CheckboxWrapper = styled.label<{ error: any }>`
       + div svg {
         opacity: 1;
       }
+      + div {
+        ${({ theme }) =>
+          theme?.checked?.backgroundColor &&
+          css`
+            background-color: ${theme?.checked?.backgroundColor};
+          `};
+        ${({ theme }) =>
+          theme?.checked?.borderColor &&
+          css`
+            border: 1px solid ${theme?.checked?.borderColor};
+          `};
+        ${({ theme }) =>
+          theme?.checked?.color &&
+          css`
+            color: ${theme?.checked?.color};
+          `};
+      }
     }
     &:not(:checked) {
       + div svg {
@@ -374,17 +456,24 @@ export const CheckboxWrapper = styled.label<{ error: any }>`
     }
   }
 
-  ${({ error }) =>
-    !checkIfValueIsEmpty(error)
-      ? css`
-          > div {
-            border: 1px solid ${colors.orange};
-          }
-        `
-      : css`
-          > div {
-            border: 1px solid ${colors.border};
-          }
+  ${({ $error, theme }) =>
+    !checkIfValueIsEmpty($error) &&
+    css`
+      > div {
+        border: 1px solid ${theme?.error?.borderColor || colors.orange}};
+        ${
+          theme?.error?.backgroundColor &&
+          css`
+            background-color: ${theme?.error?.backgroundColor};
+          `
+        };
+        ${
+          theme?.error?.color &&
+          css`
+            color: ${theme?.error?.color};
+          `
+        };
+      }
         `}
 `;
 

package/src/components/form/FormField.tsx

@@ -10,6 +10,7 @@ import { Grid } from "../ui/Grid";
 import { Typography } from "../ui/Typography";
 import { CopyButton, FormFieldWrapper } from "./Field.styles";
 import type { FormFieldProps } from "./types";
+export type { FormFieldProps } from "./types";
 
 const colors = theme.colors.light;
 
@@ -22,7 +23,8 @@ export function FormField({
   children,
   style = {},
   valueToCopy,
-  copyIconColor = colors.secondary
+  copyIconColor = colors.secondary,
+  ...rest
 }: FormFieldProps) {
   return (
     <FormFieldWrapper
@@ -31,6 +33,7 @@ export function FormField({
       alignItems="flex-start"
       flexGrow="1"
       style={style}
+      {...rest}
     >
       <>
         <Grid justifyContent="flex-start" margin="0 0 0.375rem 0">

package/src/components/form/Select.tsx

@@ -1,25 +1,25 @@
 /* eslint @typescript-eslint/no-explicit-any: "off" */
 import React from "react";
 import { useField } from "formik";
-import Select from "react-select";
+import Select, { GroupBase, StylesConfig } from "react-select";
 import { checkIfValueIsEmpty } from "../../lib/object/checkIfValueIsEmpty";
 import { theme } from "../../theme";
 import { zIndex } from "../ui/zIndex";
 
 import Error from "./Error";
 import type { SelectDataProps, SelectProps } from "./types";
+export type { SelectProps } from "./types";
 const colors = theme.colors.light;
 
-const customStyles = (error: any) => ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  singleValue: (provided: any, state: any) => {
-    return {
-      ...provided,
-      color: colors.darkGrey,
-      fontSize: "13.33px"
-    };
-  },
-  control: (provided: any, state: any) => {
+const customStyles = (
+  error: unknown,
+  customTheme: SelectProps["theme"]
+): StylesConfig<
+  SelectDataProps<string>,
+  boolean,
+  GroupBase<SelectDataProps<string>>
+> => ({
+  control: (provided, state: any) => {
     const before = state.selectProps.label
       ? {
           ":before": {
@@ -34,41 +34,71 @@ const customStyles = (error: any) => ({
       borderRadius: 0,
       padding: "0.4rem 0.25rem",
       boxShadow: "none",
-      ":hover": {
-        borderColor: colors.secondary,
-        borderWidth: "1px"
-      },
       background: colors.lightGrey,
+      ...customTheme?.control,
       border: state.isFocused
-        ? `1px solid ${colors.secondary}`
+        ? customTheme?.control?.focus?.border ?? `1px solid ${colors.secondary}`
         : !checkIfValueIsEmpty(error)
-          ? `1px solid ${colors.orange}`
-          : `1px solid ${colors.border}`,
+          ? customTheme?.control?.error?.border ?? `1px solid ${colors.orange}`
+          : customTheme?.control?.border ?? `1px solid ${colors.border}`,
+      ":hover": {
+        borderColor: colors.secondary,
+        borderWidth: "1px",
+        ...customTheme?.control?.hover
+      },
       ...before
     };
   },
-  container: (provided: any, state: any) => ({
+  container: (provided, state: any) => ({
     ...provided,
     zIndex: state.isFocused ? zIndex.Select + 1 : zIndex.Select,
     position: "relative",
     width: "100%"
   }),
-  option: (provided: any, state: any) => ({
-    ...provided,
-    cursor: state.isDisabled ? "not-allowed" : "pointer",
-    opacity: state.isDisabled ? "0.5" : "1",
-    background:
-      state.isOptionSelected || state.isSelected || state.isFocused
-        ? colors.lightGrey
-        : colors.white,
-    color:
-      state.isOptionSelected || state.isSelected
-        ? colors.secondary
-        : colors.black
-  }),
+  option: (provided, state: any) => {
+    return {
+      ...provided,
+      cursor: state.isDisabled ? "not-allowed" : "pointer",
+      opacity: state.isDisabled
+        ? customTheme?.option?.disabled?.opacity ?? "0.5"
+        : customTheme?.option?.opacity ?? "1",
+      background:
+        state.isOptionSelected || state.isSelected || state.isFocused
+          ? customTheme?.option?.selected?.background ?? colors.lightGrey
+          : customTheme?.option?.background ?? colors.white,
+      color:
+        state.isOptionSelected || state.isSelected
+          ? customTheme?.option?.selected?.color ?? colors.secondary
+          : customTheme?.option?.color ?? colors.black,
+      ...(state.isDisabled && customTheme?.option?.disabled),
+      ...((state.isOptionSelected || state.isSelected) &&
+        customTheme?.option?.selected),
+      ...(state.isFocused && customTheme?.option?.focus),
+      ...(!checkIfValueIsEmpty(error) && customTheme?.option?.error)
+    };
+  },
   indicatorSeparator: () => ({
     display: "none"
-  })
+  }),
+  placeholder: (provided) => ({
+    ...provided,
+    ...customTheme?.placeholder,
+    ...(!checkIfValueIsEmpty(error) && customTheme?.placeholder?.error)
+  }),
+  input: (provided) => ({
+    ...provided,
+    ...customTheme?.input,
+    ...(!checkIfValueIsEmpty(error) && customTheme?.input?.error)
+  }),
+  singleValue: (provided) => {
+    return {
+      ...provided,
+      color: colors.darkGrey,
+      fontSize: "13.33px",
+      ...customTheme?.singleValue,
+      ...(!checkIfValueIsEmpty(error) && customTheme?.singleValue?.error)
+    };
+  }
 });
 
 export default function SelectComponent({
@@ -80,6 +110,7 @@ export default function SelectComponent({
   disabled = false,
   errorMessage,
   onChange,
+  theme,
   ...props
 }: SelectProps) {
   const [field, meta, helpers] = useField(name);
@@ -109,7 +140,7 @@ export default function SelectComponent({
   return (
     <>
       <Select
-        styles={customStyles(displayErrorMessage)}
+        styles={customStyles(displayErrorMessage, theme)}
         {...field}
         {...props}
         placeholder={placeholder}