@bosonprotocol/react-kit 0.32.0 → 0.33.0-alpha.0

package/src/components/form/Checkbox.tsx

@@ -10,8 +10,7 @@ export default function Checkbox({ name, text, ...props }: CheckboxProps) {
   const [field, meta, helpers] = useField(name);
   const ref = useRef(field.value);
   const errorMessage = meta.error && meta.touched ? meta.error : "";
-  const displayError =
-    typeof errorMessage === typeof "string" && errorMessage !== "";
+  const displayError = typeof errorMessage === "string" && errorMessage !== "";
   const checkboxId = `checkbox-${name}`;
 
   useEffect(() => {

package/src/components/form/CountrySelect.tsx

@@ -4,15 +4,16 @@ 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, { components } from "react-select";
-import styled from "styled-components";
+import Select, { 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 } from "../../theme";
+import { theme as importedTheme } from "../../theme";
+export type { Country as CountryCode } from "react-phone-number-input";
 
-const colors = theme.colors.light;
+const colors = importedTheme.colors.light;
 const customStyles = {
   control: (provided: any, state: any) => {
     const before = state.selectProps.label
@@ -24,45 +25,61 @@ const customStyles = {
           }
         }
       : null;
+    const { theme } = state;
     return {
       ...provided,
-      borderRadius: 0,
-      padding: "0.4rem 0.25rem",
+      borderRadius: theme.borderRadius,
+      height: theme.controlHeight,
+      alignContent: "center",
+      padding: "0.4rem 1rem",
       boxShadow: "none",
       ":hover": {
-        borderColor: colors.secondary,
+        borderColor: theme.colors.controlHoverBorderColor,
         borderWidth: "1px"
       },
-      background: colors.lightGrey,
+      background: theme.colors.controlBackground,
       border: state.isFocused
-        ? `1px solid ${colors.secondary}`
-        : `1px solid ${colors.border}`,
+        ? `1px solid ${theme.colors.controlFocusBorderColor}`
+        : `1px solid ${theme.colors.controlUnfocusedBorderColor}`,
       ...before
     };
   },
-  container: (provided: any, state: any) => ({
-    ...provided,
-    zIndex: state.isFocused ? zIndex.Select + 1 : zIndex.Select,
-    position: "relative",
-    width: "100%"
-  }),
-  option: (provided: any, state: any) => ({
+  container: (provided: any, state: any) => {
+    return {
+      ...provided,
+      zIndex: state.isFocused ? zIndex.Select + 1 : zIndex.Select,
+      position: "relative",
+      width: "100%"
+    };
+  },
+  option: (provided: any, state: any) => {
+    const { theme } = state;
+    return {
+      ...provided,
+      cursor: state.isDisabled ? "not-allowed" : "pointer",
+      opacity: state.isDisabled ? "0.5" : "1",
+      background:
+        state.isOptionSelected || state.isSelected || state.isFocused
+          ? theme.colors.selectedOptionBackground
+          : theme.colors.unselectedOptionBackground,
+      color:
+        state.isOptionSelected || state.isSelected
+          ? theme.colors.selectedOptionColor
+          : theme.colors.unselectedOptionColor
+    };
+  },
+  menu: (provided) => ({
     ...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
+    overflow: "hidden"
   }),
   indicatorSeparator: () => ({
     display: "none"
   })
-};
+} satisfies StylesConfig<
+  SelectDataProps<string>,
+  false,
+  GroupBase<SelectDataProps<string>>
+>;
 
 const ControlGrid = styled.div`
   display: flex;
@@ -92,13 +109,10 @@ const OptionGrid = styled.div`
 
 const PhoneWrapper = styled.div`
   width: 100%;
-  padding-bottom: 0.5rem;
   input {
     width: 100%;
     padding: 1rem;
     gap: 0.5rem;
-    background: ${colors.lightGrey};
-    border: 1px solid ${colors.border};
     border-radius: 0;
     outline: none;
     font-family: "Plus Jakarta Sans";
@@ -106,18 +120,34 @@ const PhoneWrapper = styled.div`
   }
 `;
 
-type Props = InputProps & {
+export type CountrySelectProps = InputProps & {
   countries?: CountryCode[];
+  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"];
+  }>;
 };
 
-export function CountrySelect({ name, countries, ...props }: Props) {
+export function CountrySelect({
+  name,
+  countries,
+  theme: selectTheme,
+  ...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 === typeof "string" && errorMessage !== "";
+  const displayError = typeof errorMessage === "string" && errorMessage !== "";
   const [phone, setPhone] = useState<string | undefined>(undefined);
   const [countryCode, setCountryCode] = useState<CountryCode | undefined>();
 
@@ -131,10 +161,6 @@ export function CountrySelect({ name, countries, ...props }: Props) {
   return (
     <>
       <PhoneWrapper>
-        {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment, prettier/prettier
-          /* @ts-ignore */
-        }
         <PhoneInput
           // eslint-disable-next-line @typescript-eslint/no-unused-vars
           inputComponent={forwardRef((props, ref) => (
@@ -149,7 +175,37 @@ export function CountrySelect({ name, countries, ...props }: 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(
@@ -201,10 +257,7 @@ export function CountrySelect({ name, countries, ...props }: Props) {
           )}
         />
       </PhoneWrapper>
-      <Error
-        display={!props.hideError && displayError}
-        message={errorMessage}
-      />
+      <Error display={!rest.hideError && displayError} message={errorMessage} />
     </>
   );
 }

package/src/components/form/Datepicker.tsx

@@ -15,8 +15,7 @@ export default function DatepickerComponent({
   const [field, meta, helpers] = useField(name);
 
   const errorMessage = meta.error && meta.touched ? meta.error : "";
-  const displayError =
-    typeof errorMessage === typeof "string" && errorMessage !== "";
+  const displayError = typeof errorMessage === "string" && errorMessage !== "";
 
   const handleChange = (date: Dayjs | Array<Dayjs | null>) => {
     if (!meta.touched) {

package/src/components/form/InputColor.tsx

@@ -39,8 +39,7 @@ const ColorPicker = styled(Input).attrs({
 export default function InputColor({ name, ...props }: InputColorProps) {
   const [field, meta] = useField<string>(name);
   const errorMessage = meta.error && meta.touched ? meta.error : "";
-  const displayError =
-    typeof errorMessage === typeof "string" && errorMessage !== "";
+  const displayError = typeof errorMessage === "string" && errorMessage !== "";
 
   return (
     <>

package/src/components/form/Phone.tsx

@@ -138,8 +138,7 @@ export default function Phone({ name, ...props }: InputProps) {
   const [field, meta, helpers] = useField(name);
   const errorText = meta.error || status?.[name];
   const errorMessage = errorText && meta.touched ? errorText : "";
-  const displayError =
-    typeof errorMessage === typeof "string" && errorMessage !== "";
+  const displayError = typeof errorMessage === "string" && errorMessage !== "";
 
   const handlePhoneChange = useCallback(
     (value: string) => {

package/src/components/form/Select.tsx

@@ -91,8 +91,7 @@ export default function SelectComponent({
         : "";
 
   const displayError =
-    typeof displayErrorMessage === typeof "string" &&
-    displayErrorMessage !== "";
+    typeof displayErrorMessage === "string" && displayErrorMessage !== "";
 
   const handleChange = (option: SelectDataProps<string>) => {
     if (!meta.touched) {

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

@@ -87,7 +87,7 @@ function Upload({
   useEffect(() => {
     onFilesSelect?.(files);
     helpers.setValue(files);
-    console.log("useEffect", { files });
+
     if (!multiple && files && files?.length !== 0) {
       if (isImageOnly) {
         if (withUpload) {

package/src/components/form/index.ts

@@ -6,6 +6,7 @@ export * from "./BaseInput";
 export { default as Input, InputProps } from "./Input";
 export { default as Phone } from "./Phone";
 export { default as Select } from "./Select";
+export * from "./CountrySelect";
 export * from "./BaseTagsInput";
 export * from "./BaseTextArea";
 export { default as Upload } from "./Upload/Upload";

package/src/index.tsx

@@ -85,3 +85,4 @@ export * from "./components/error/ErrorMessage";
 export * from "./components/error/SimpleError";
 export * from "./components/step/MultiSteps";
 export * from "./components/ipfs/IpfsProvider";
+export * from "./types/helpers";

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

@@ -0,0 +1,118 @@
+import { fn } from "@storybook/test";
+import {
+  CountryCode,
+  CountrySelect,
+  CountrySelectProps,
+  theme
+} from "../../index";
+import React from "react";
+import { Meta } from "@storybook/react";
+import { Formik } from "formik";
+
+const inputWithErrors = "With error";
+const inputName = "test";
+const countries: CountryCode[] = [
+  "AR",
+  "AU",
+  "AT",
+  "BE",
+  "BR",
+  "GR",
+  "HK",
+  "IS",
+  "IN",
+  "IE",
+  "IL",
+  "IT",
+  "JP",
+  "KR",
+  "LU"
+];
+const colors = theme.colors.light;
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Visual Components/Selects/CountrySelect",
+  component: CountrySelect,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered"
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  args: { onClick: fn() },
+  argTypes: {
+    name: {
+      table: {
+        disable: true // remove name input in controls
+      }
+    },
+    countries: {
+      table: {
+        disable: true
+      }
+    },
+    theme: {
+      table: {
+        disable: true
+      }
+    },
+    disabled: { control: "boolean" },
+    placeholder: { control: "text" }
+  },
+  decorators: [
+    (Story, { args, name }) => {
+      return (
+        <Formik<{ [inputName]: unknown }>
+          onSubmit={() => {
+            //
+          }}
+          initialErrors={
+            name === inputWithErrors
+              ? { [inputName]: "There has been an error!" }
+              : {}
+          }
+          initialValues={{ [inputName]: "" }}
+          initialTouched={{ [inputName]: true }}
+        >
+          <Story args={{ ...args, name: inputName }} />
+        </Formik>
+      );
+    }
+  ]
+} satisfies Meta<typeof CountrySelect>;
+
+const BASE_ARGS = {
+  name: inputName,
+  countries
+};
+
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+export const Base = {
+  args: { ...BASE_ARGS } satisfies CountrySelectProps
+};
+
+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
+    }
+  } satisfies CountrySelectProps
+};
+
+export const WithError = {
+  name: inputWithErrors,
+  args: {
+    ...BASE_ARGS,
+    placeholder: "this is a placeholder"
+  } satisfies CountrySelectProps
+};