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

package/src/components/form/CountrySelect.tsx

@@ -4,18 +4,31 @@ import { GlobeHemisphereWest } from "phosphor-react";
 import React, { forwardRef, useState, useEffect } from "react";
 import type { Country as CountryCode } from "react-phone-number-input";
 import PhoneInput from "react-phone-number-input";
-import Select, { GroupBase, StylesConfig, components } from "react-select";
+import Select, {
+  CSSObjectWithLabel,
+  GroupBase,
+  StylesConfig,
+  components
+} from "react-select";
 import styled, { CSSProperties } from "styled-components";
 import { zIndex } from "../ui/zIndex";
 import Error from "./Error";
 import type { InputProps } from "./types";
 import { SelectDataProps } from "./types";
 import { theme as importedTheme } from "../../theme";
+import { checkIfValueIsEmpty } from "../../lib/object/checkIfValueIsEmpty";
 export type { Country as CountryCode } from "react-phone-number-input";
 
 const colors = importedTheme.colors.light;
-const customStyles = {
-  control: (provided: any, state: any) => {
+const customStyles = (
+  error: unknown,
+  customTheme: CountrySelectProps["theme"]
+): StylesConfig<
+  SelectDataProps<string>,
+  false,
+  GroupBase<SelectDataProps<string>>
+> => ({
+  control: (provided, state: any) => {
     const before = state.selectProps.label
       ? {
           ":before": {
@@ -25,26 +38,27 @@ const customStyles = {
           }
         }
       : null;
-    const { theme } = state;
     return {
       ...provided,
-      borderRadius: theme.borderRadius,
-      height: theme.controlHeight,
       alignContent: "center",
       padding: "0.4rem 1rem",
       boxShadow: "none",
+      background: colors.lightGrey,
+      ...customTheme?.control,
+      border: state.isFocused
+        ? customTheme?.control?.focus?.border ?? `1px solid ${colors.secondary}`
+        : !checkIfValueIsEmpty(error)
+          ? customTheme?.control?.error?.border ?? `1px solid ${colors.orange}`
+          : customTheme?.control?.border ?? `1px solid ${colors.border}`,
       ":hover": {
-        borderColor: theme.colors.controlHoverBorderColor,
-        borderWidth: "1px"
+        borderColor: colors.secondary,
+        borderWidth: "1px",
+        ...customTheme?.control?.hover
       },
-      background: theme.colors.controlBackground,
-      border: state.isFocused
-        ? `1px solid ${theme.colors.controlFocusBorderColor}`
-        : `1px solid ${theme.colors.controlUnfocusedBorderColor}`,
       ...before
     };
   },
-  container: (provided: any, state: any) => {
+  container: (provided, state) => {
     return {
       ...provided,
       zIndex: state.isFocused ? zIndex.Select + 1 : zIndex.Select,
@@ -52,34 +66,56 @@ const customStyles = {
       width: "100%"
     };
   },
-  option: (provided: any, state: any) => {
-    const { theme } = state;
+  option: (provided, state: any) => {
     return {
       ...provided,
+      ...customTheme?.option,
       cursor: state.isDisabled ? "not-allowed" : "pointer",
-      opacity: state.isDisabled ? "0.5" : "1",
+      opacity: state.isDisabled
+        ? customTheme?.option?.disabled?.opacity ?? "0.5"
+        : customTheme?.option?.opacity ?? "1",
       background:
         state.isOptionSelected || state.isSelected || state.isFocused
-          ? theme.colors.selectedOptionBackground
-          : theme.colors.unselectedOptionBackground,
+          ? customTheme?.option?.selected?.background ?? colors.lightGrey
+          : customTheme?.option?.background ?? colors.white,
       color:
         state.isOptionSelected || state.isSelected
-          ? theme.colors.selectedOptionColor
-          : theme.colors.unselectedOptionColor
+          ? 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)
+    };
+  },
+  menu: (provided) => {
+    return {
+      ...provided,
+      overflow: "hidden",
+      ...customTheme?.menu,
+      ...(!checkIfValueIsEmpty(error) && customTheme?.menu?.error)
     };
   },
-  menu: (provided) => ({
-    ...provided,
-    overflow: "hidden"
-  }),
   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) => ({
+    ...provided,
+    ...customTheme?.singleValue,
+    ...(!checkIfValueIsEmpty(error) && customTheme?.singleValue?.error)
   })
-} satisfies StylesConfig<
-  SelectDataProps<string>,
-  false,
-  GroupBase<SelectDataProps<string>>
->;
+});
 
 const ControlGrid = styled.div`
   display: flex;
@@ -88,6 +124,7 @@ const ControlGrid = styled.div`
   align-items: center;
   justify-content: space-between;
   .PhoneInputCountryIcon {
+    max-width: fit-content;
     min-width: 40px;
     display: inline;
     height: 27px;
@@ -95,6 +132,9 @@ const ControlGrid = styled.div`
       max-width: 40px;
     }
   }
+  svg {
+    max-width: 40px;
+  }
 `;
 const OptionGrid = styled.div`
   display: grid;
@@ -122,38 +162,57 @@ 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<{
-    controlHeight: CSSProperties["height"];
-    borderRadius: CSSProperties["borderRadius"];
-    controlHoverBorderColor: CSSProperties["borderColor"];
-    controlBackground: CSSProperties["background"];
-    controlFocusBorderColor: CSSProperties["borderColor"];
-    controlUnfocusedBorderColor: CSSProperties["borderColor"];
-    selectedOptionBackground: CSSProperties["background"];
-    unselectedOptionBackground: CSSProperties["background"];
-    selectedOptionColor: CSSProperties["color"];
-    unselectedOptionColor: CSSProperties["color"];
+    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,
   countries,
   theme: selectTheme,
+  fieldValueIsCountryCode,
   ...rest
 }: CountrySelectProps) {
   const { status } = useFormikContext();
   const [initialized, setInitialized] = useState<boolean>(false);
   const [field, meta, helpers] = useField(name);
-  const errorText = meta.error || status?.[name];
-  const errorMessage = errorText && meta.touched ? errorText : "";
-  const displayError = typeof errorMessage === "string" && errorMessage !== "";
+  const errorMessage = meta.error || status?.[name];
+  const displayErrorMessage =
+    meta.error && meta.touched && !errorMessage
+      ? meta.error
+      : meta.error && meta.touched && errorMessage
+        ? errorMessage
+        : "";
+  const displayError =
+    typeof displayErrorMessage === "string" && displayErrorMessage !== "";
   const [phone, setPhone] = useState<string | undefined>(undefined);
-  const [countryCode, setCountryCode] = useState<CountryCode | undefined>();
+  const [countryCodeOrName, setCountryCodeOrName] = useState<
+    CountryCode | CountryName | undefined
+  >();
 
   useEffect(() => {
     if (!initialized && field.value) {
-      setCountryCode(field.value as CountryCode);
+      setCountryCodeOrName(field.value);
       setInitialized(true);
     }
   }, [field.value, initialized]); // eslint-disable-line
@@ -167,94 +226,83 @@ export function CountrySelect({
             <div></div>
           ))}
           addInternationalOption={false}
-          country={countryCode}
+          country={countryCodeOrName}
           value={phone}
           onChange={(value) => setPhone((value || "").replace(/\+/g, ""))}
           countries={countries}
-          countrySelectComponent={({ iconComponent: Icon, ...props }) => (
-            <>
-              <div>
-                <Select
-                  {...rest}
-                  {...props}
-                  isDisabled={rest.disabled}
-                  theme={(theme) => ({
-                    ...theme,
-                    controlHeight: selectTheme?.controlHeight,
-                    borderRadius: selectTheme?.borderRadius || 0,
-                    colors: {
-                      ...theme.colors,
-                      controlHoverBorderColor:
-                        selectTheme?.controlHoverBorderColor ||
-                        colors.secondary,
-                      controlBackground:
-                        selectTheme?.controlBackground || colors.lightGrey,
-                      controlFocusBorderColor:
-                        selectTheme?.controlFocusBorderColor ||
-                        colors.secondary,
-                      controlUnfocusedBorderColor:
-                        selectTheme?.controlUnfocusedBorderColor ||
-                        colors.border,
-                      selectedOptionBackground:
-                        selectTheme?.selectedOptionBackground ||
-                        colors.lightGrey,
-                      unselectedOptionBackground:
-                        selectTheme?.unselectedOptionBackground || colors.white,
-                      selectedOptionColor:
-                        selectTheme?.selectedOptionColor || colors.secondary,
-                      unselectedOptionColor:
-                        selectTheme?.unselectedOptionColor || colors.black
-                    }
-                  })}
-                  styles={customStyles}
-                  name="countrySelect"
-                  value={(props?.options || []).find(
-                    (o: SelectDataProps) => o.value === countryCode
-                  )}
-                  onChange={(o: SelectDataProps) => {
-                    setCountryCode(o.value as CountryCode);
-                    helpers.setValue(o.label);
-                  }}
-                  components={{
-                    Control: (props) => {
-                      const country =
-                        (props?.getValue()[0] as any)?.value || null;
-                      return (
-                        <components.Control {...props}>
-                          <ControlGrid>
-                            {country ? (
-                              <Icon country={country as CountryCode} label="" />
-                            ) : (
-                              <GlobeHemisphereWest />
-                            )}
-                            {props.children as any}
-                          </ControlGrid>
-                        </components.Control>
-                      );
-                    },
-                    Option: (props) => {
-                      const country = (props?.data as any)?.value || null;
-                      return (
-                        <components.Option {...props}>
-                          <OptionGrid>
-                            {country ? (
-                              <Icon
-                                country={country as CountryCode}
-                                label={props.label}
-                              />
-                            ) : (
-                              <GlobeHemisphereWest />
-                            )}
-                            {props.label}
-                          </OptionGrid>
-                        </components.Option>
-                      );
-                    }
-                  }}
-                />
-              </div>
-            </>
-          )}
+          countrySelectComponent={({ iconComponent: Icon, ...props }) => {
+            const value = (props?.options || []).find((o: SelectDataProps) =>
+              fieldValueIsCountryCode
+                ? o.value === countryCodeOrName
+                : o.label === countryCodeOrName
+            );
+            return (
+              <>
+                <div>
+                  <Select
+                    {...rest}
+                    {...props}
+                    isDisabled={rest.disabled}
+                    styles={customStyles(displayErrorMessage, selectTheme)}
+                    name="countrySelect"
+                    value={value}
+                    onChange={(o: SelectDataProps) => {
+                      if (!meta.touched) {
+                        helpers.setTouched(true);
+                      }
+                      const value = fieldValueIsCountryCode ? o.value : o.label;
+                      setCountryCodeOrName(value);
+                      helpers.setValue(value);
+                    }}
+                    onBlur={() => {
+                      if (!meta.touched) {
+                        helpers.setTouched(true);
+                      }
+                    }}
+                    components={{
+                      Control: (props) => {
+                        const country =
+                          (props?.getValue()[0] as any)?.value || null;
+                        return (
+                          <components.Control {...props}>
+                            <ControlGrid>
+                              {country ? (
+                                <Icon
+                                  country={country as CountryCode}
+                                  label=""
+                                />
+                              ) : (
+                                <GlobeHemisphereWest />
+                              )}
+                              {props.children as any}
+                            </ControlGrid>
+                          </components.Control>
+                        );
+                      },
+                      Option: (props) => {
+                        const country = (props?.data as any)?.value || null;
+                        return (
+                          <components.Option {...props}>
+                            <OptionGrid>
+                              {country ? (
+                                <Icon
+                                  country={country as CountryCode}
+                                  label={props.label}
+                                />
+                              ) : (
+                                <GlobeHemisphereWest />
+                              )}
+                              {props.label}
+                            </OptionGrid>
+                          </components.Option>
+                        );
+                      }
+                    }}
+                  />
+                </div>
+              </>
+            );
+          }}
         />
       </PhoneWrapper>
       <Error display={!rest.hideError && displayError} message={errorMessage} />

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">