@bosonprotocol/react-kit 0.33.0-alpha.11 → 0.33.0-alpha.13

package/src/components/form/CountrySelect.tsx

@@ -11,11 +11,19 @@ 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 +33,29 @@ const customStyles = {
           }
         }
       : null;
-    const { theme } = state;
     return {
       ...provided,
-      borderRadius: theme.borderRadius,
-      height: theme.controlHeight,
       alignContent: "center",
+      borderRadius: customTheme?.control?.borderRadius ?? 0,
+      height: customTheme?.control?.height,
       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,20 +63,25 @@ 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)
     };
   },
   menu: (provided) => ({
@@ -74,12 +90,20 @@ const customStyles = {
   }),
   indicatorSeparator: () => ({
     display: "none"
+  }),
+  placeholder: (provided) => ({
+    ...provided,
+    ...customTheme?.placeholder
+  }),
+  input: (provided) => ({
+    ...provided,
+    ...customTheme?.input
+  }),
+  singleValue: (provided) => ({
+    ...provided,
+    ...customTheme?.singleValue
   })
-} satisfies StylesConfig<
-  SelectDataProps<string>,
-  false,
-  GroupBase<SelectDataProps<string>>
->;
+});
 
 const ControlGrid = styled.div`
   display: flex;
@@ -122,38 +146,52 @@ 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>;
+      }>;
+    placeholder: Partial<CSSProperties>;
+    input: Partial<CSSProperties>;
+    singleValue: Partial<CSSProperties>;
   }>;
 };
-
+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 +205,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/Select.tsx

@@ -11,13 +11,14 @@ import type { SelectDataProps, SelectProps } from "./types";
 export type { SelectProps } from "./types";
 const colors = theme.colors.light;
 
-const customStyles = (error: any, customTheme: SelectProps["theme"]) => ({
+const customStyles = (error: unknown, customTheme: SelectProps["theme"]) => ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   singleValue: (provided: any, state: any) => {
     return {
       ...provided,
       color: colors.darkGrey,
-      fontSize: "13.33px"
+      fontSize: "13.33px",
+      ...customTheme?.singleValue
     };
   },
   control: (provided: any, state: any) => {
@@ -69,10 +70,21 @@ const customStyles = (error: any, customTheme: SelectProps["theme"]) => ({
     color:
       state.isOptionSelected || state.isSelected
         ? customTheme?.option?.selected?.color ?? colors.secondary
-        : customTheme?.option?.color ?? colors.black
+        : customTheme?.option?.color ?? colors.black,
+    ...(state.isDisabled && customTheme?.option?.disabled),
+    ...((state.isOptionSelected || state.isSelected) &&
+      customTheme?.option?.selected)
   }),
   indicatorSeparator: () => ({
     display: "none"
+  }),
+  placeholder: (provided: any) => ({
+    ...provided,
+    ...customTheme?.placeholder
+  }),
+  input: (provided: any) => ({
+    ...provided,
+    ...customTheme?.input
   })
 });
 

package/src/components/form/types.ts

@@ -90,37 +90,20 @@ export interface SelectProps extends BaseProps {
   onChange?: (option: SelectDataProps<string>) => void;
   label?: string;
   theme?: Partial<{
-    control: Partial<{
-      background: CSSProperties["background"];
-      borderRadius: CSSProperties["borderRadius"];
-      padding: CSSProperties["padding"];
-      boxShadow: CSSProperties["boxShadow"];
-      borderWidth: CSSProperties["borderWidth"];
-      border: CSSProperties["border"];
-      focus: Partial<{
-        border: CSSProperties["border"];
+    control: Partial<CSSProperties> &
+      Partial<{
+        hover: Partial<CSSProperties>;
+        focus: Partial<CSSProperties>;
+        error: Partial<CSSProperties>;
       }>;
-      hover: Partial<{
-        borderColor: CSSProperties["borderColor"];
-        borderWidth: CSSProperties["borderWidth"];
-        border: CSSProperties["border"];
+    option: Partial<CSSProperties> &
+      Partial<{
+        selected: Partial<CSSProperties>;
+        disabled: Partial<CSSProperties>;
       }>;
-      error: Partial<{
-        border: CSSProperties["border"];
-      }>;
-    }>;
-    option: Partial<{
-      opacity: CSSProperties["opacity"];
-      background: CSSProperties["background"];
-      color: CSSProperties["color"];
-      selected: Partial<{
-        background: CSSProperties["background"];
-        color: CSSProperties["color"];
-      }>;
-      disabled: Partial<{
-        opacity: CSSProperties["opacity"];
-      }>;
-    }>;
+    placeholder: Partial<CSSProperties>;
+    input: Partial<CSSProperties>;
+    singleValue: Partial<CSSProperties>;
   }>;
 }
 

package/src/stories/selects/CountrySelect.stories.tsx

@@ -74,7 +74,14 @@ export default {
           initialValues={{ [inputName]: "" }}
           initialTouched={{ [inputName]: true }}
         >
-          <Story args={{ ...args, name: inputName }} />
+          {({ values }) => {
+            return (
+              <>
+                <Story args={{ ...args, name: inputName }} />
+                <div>selected value: {JSON.stringify(values)}</div>
+              </>
+            );
+          }}
         </Formik>
       );
     }
@@ -95,16 +102,47 @@ export const CustomTheme = {
   args: {
     ...BASE_ARGS,
     theme: {
-      controlHeight: "45px",
-      borderRadius: "30px",
-      controlBackground: colors.lightGrey,
-      controlFocusBorderColor: colors.blue,
-      controlHoverBorderColor: colors.red,
-      controlUnfocusedBorderColor: colors.border,
-      selectedOptionBackground: colors.lightGrey,
-      selectedOptionColor: colors.orange,
-      unselectedOptionBackground: colors.white,
-      unselectedOptionColor: colors.black
+      control: {
+        color: "yellow",
+        height: undefined,
+        background: colors.arsenic,
+        borderRadius: "16px",
+        padding: "3px",
+        boxShadow: "1px 2px 3px 4px blue",
+        borderWidth: undefined,
+        border: "1px solid green",
+        focus: {
+          border: "1px solid red"
+        },
+        hover: {
+          borderColor: "purple",
+          borderWidth: "1px"
+        },
+        error: {
+          border: "1px solid orange"
+        }
+      },
+      option: {
+        opacity: "1",
+        background: "pink",
+        color: "brown",
+        selected: {
+          background: "yellow",
+          color: "cyan"
+        },
+        disabled: {
+          opacity: "0.8"
+        }
+      },
+      placeholder: {
+        color: "red"
+      },
+      input: {
+        color: "cyan"
+      },
+      singleValue: {
+        color: "orange"
+      }
     }
   } satisfies CountrySelectProps
 };