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

package/src/components/form/{TagsInput.tsx → BaseTagsInput.tsx}

@@ -1,21 +1,24 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useField, useFormikContext } from "formik";
 import { KeyReturn } from "phosphor-react";
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 
 import { Grid } from "../ui/Grid";
 import { Typography } from "../ui/Typography";
 import Error from "./Error";
-import { FieldInput } from "./Field.styles";
+import { FieldInput, HeightSize, InputTheme } from "./Field.styles";
 import {
   Close,
   Helper,
   TagContainer,
   TagWrapper
-} from "./styles/TagsInput.styles";
-import { TagsProps } from "./types";
-
-const TagsInput = ({
+} from "./styles/BaseTagsInput.styles";
+import { TagsProps as TagsPropsWithoutTheme } from "./types";
+export type BaseTagsInputProps = TagsPropsWithoutTheme & {
+  theme?: InputTheme;
+  heightSize?: HeightSize;
+};
+const gap = "0.5rem";
+export const BaseTagsInput = ({
   name,
   placeholder,
   onAddTag,
@@ -23,8 +26,10 @@ const TagsInput = ({
   compareTags = (tagA: string, tagB: string) =>
     tagA.toLowerCase() === tagB.toLowerCase(),
   transform = (tag: string) => tag,
-  label
-}: TagsProps) => {
+  label,
+  heightSize,
+  theme
+}: BaseTagsInputProps) => {
   const { validateForm } = useFormikContext();
   const [field, meta, helpers] = useField<string[]>(name);
   const tags = field.value || [];
@@ -39,7 +44,9 @@ const TagsInput = ({
     }
   };
 
-  function handleKeyDown(event: any) {
+  function handleKeyDown(
+    event: Parameters<React.KeyboardEventHandler<HTMLInputElement>>[0]
+  ) {
     if (event.key !== "Enter") return;
     event.preventDefault();
     const value: string = event.target.value;
@@ -69,31 +76,48 @@ const TagsInput = ({
     validateForm();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [field.value]);
+  const labelRef = useRef<HTMLDivElement>(null);
+  const hitEnterWidth = useRef<HTMLDivElement>(null);
   return (
     <>
-      <Grid gap="0.5rem" alignItems="center">
-        {label && <Typography>{label}</Typography>}
-        <TagContainer>
+      <Grid gap={gap} alignItems="center">
+        {label && (
+          <Typography data-label ref={labelRef}>
+            {label}
+          </Typography>
+        )}
+        <TagContainer $gap={gap}>
           <FieldInput
+            theme={theme}
+            $heightSize={heightSize}
             onKeyDown={handleKeyDown}
             type="text"
             placeholder={placeholder || "Choose tags..."}
             name={name}
             onBlur={handleBlur}
-            error={errorMessage}
+            $error={errorMessage}
+            {...(hitEnterWidth.current?.clientWidth && {
+              style: {
+                paddingRight: `calc(${hitEnterWidth.current.clientWidth}px + 1rem)`
+              }
+            })}
           />
-          <Helper>
-            Hit Enter <KeyReturn size={16} />
+          <Helper ref={hitEnterWidth}>
+            Hit Enter <KeyReturn size={13} />
           </Helper>
         </TagContainer>
       </Grid>
-      <TagContainer style={{ marginTop: "1em" }}>
-        {label && (
-          <Typography style={{ visibility: "hidden" }}>{label}</Typography>
-        )}
+      <TagContainer
+        $gap={gap}
+        $paddingLeft={
+          label
+            ? `calc(${labelRef.current?.clientWidth}px + ${gap})`
+            : undefined
+        }
+      >
         {tags.map((tag: string, index: number) => (
-          <TagWrapper key={`tags-wrapper_${tag}`}>
-            <span className="text">{tag}</span>
+          <TagWrapper key={`tags-wrapper_${tag}`} theme={theme}>
+            <span className="text tag">{tag}</span>
             <Close onClick={() => removeTag(index)}>&times;</Close>
           </TagWrapper>
         ))}
@@ -102,5 +126,3 @@ const TagsInput = ({
     </>
   );
 };
-
-export default TagsInput;

package/src/components/form/ClearButton.tsx

@@ -0,0 +1,39 @@
+import styled, { CSSProperties } from "styled-components";
+import React from "react";
+const CrossIcon = (props: Record<string, unknown>) => (
+  <svg
+    height="20"
+    width="20"
+    viewBox="0 0 20 20"
+    aria-hidden="true"
+    focusable="false"
+    {...props}
+  >
+    <path d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path>
+  </svg>
+);
+export type ClearButtonTheme = {
+  fill: CSSProperties["fill"];
+  stroke: CSSProperties["stroke"];
+  hover: {
+    fill: CSSProperties["fill"];
+    stroke: CSSProperties["stroke"];
+  };
+};
+export const ClearButton = styled(CrossIcon)`
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  margin: 0 5px;
+  cursor: pointer;
+  display: inline-block;
+  fill: ${(props) => props.theme?.fill || "#cccccc"};
+  line-height: 1;
+  stroke: ${(props) => props.theme?.stroke || "#cccccc"};
+  stroke-width: 0;
+  &:hover * {
+    stroke: ${(props) => props.theme?.hover?.stroke || "#999999"};
+    fill: ${(props) => props.theme?.hover?.fill || "#999999"};
+  }
+`;

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

@@ -1,5 +1,5 @@
 /* eslint @typescript-eslint/no-explicit-any: "off" */
-import styled, { css } from "styled-components";
+import styled, { CSSProperties, css } from "styled-components";
 
 import { transition } from "../../components/ui/styles";
 import { checkIfValueIsEmpty } from "../../lib/object/checkIfValueIsEmpty";
@@ -12,15 +12,54 @@ export const CopyButton = styled.button`
   background: none;
   border: none;
 `;
-
-export const FieldInput = styled.input<{ error?: any }>`
+export type InputTheme = {
+  background: CSSProperties["backgroundColor"];
+  borderColor: CSSProperties["borderColor"];
+  borderRadius: CSSProperties["borderRadius"];
+  focus: {
+    caretColor: CSSProperties["caretColor"];
+  };
+  hover: {
+    borderColor: CSSProperties["borderColor"];
+  };
+  error: {
+    borderColor: CSSProperties["borderColor"];
+    hover: {
+      borderColor: CSSProperties["borderColor"];
+    };
+    focus: {
+      borderColor: CSSProperties["borderColor"];
+      caretColor: CSSProperties["caretColor"];
+    };
+    placeholder: {
+      color: CSSProperties["color"];
+    };
+  };
+};
+export type HeightSize = keyof typeof sizeToHeight;
+const sizeToHeight = {
+  small: "40px",
+  regular: "49px",
+  large: "56px"
+} as const;
+export const FieldInput = styled.input<{
+  $error?: any;
+  $heightSize?: HeightSize;
+  theme?: InputTheme;
+}>`
+  box-sizing: border-box;
+  ${({ $heightSize }) =>
+    $heightSize &&
+    css`
+      height: ${sizeToHeight[$heightSize]};
+    `};
   width: 100%;
   padding: 1rem;
   gap: 0.5rem;
 
-  background: ${colors.lightGrey};
-  border: 1px solid ${colors.border};
-  border-radius: 0;
+  background: ${(props) => props.theme?.background || "transparent"};
+  border: 1px solid ${(props) => props.theme?.borderColor || colors.border};
+  border-radius: ${(props) => props.theme?.borderRadius || 0}px;
   outline: none;
   font-family: "Plus Jakarta Sans";
 
@@ -29,7 +68,9 @@ export const FieldInput = styled.input<{ error?: any }>`
   &:not(:disabled) {
     &:focus,
     &:hover {
-      border: 1px solid var(--secondary);
+      border: 1px solid
+        ${(props) => props.theme?.hover?.borderColor || colors.lightGrey};
+      caret-color: ${(props) => props.theme?.focus?.caretColor || "initial"};
     }
   }
 
@@ -38,39 +79,41 @@ export const FieldInput = styled.input<{ error?: any }>`
     opacity: 0.5;
   }
 
-  ${({ error }) =>
-    !checkIfValueIsEmpty(error)
-      ? css`
-          border: 1px solid ${colors.orange};
-          &:not(:disabled) {
-            &:hover {
-              border: 1px solid ${colors.orange};
-            }
-          }
-          &:not(:disabled) {
-            &:focus {
-              border: 1px solid var(--secondary);
-            }
-          }
-          &::placeholder {
-            color: ${colors.orange};
-            opacity: 1;
-          }
-          &:-ms-input-placeholder {
-            color: ${colors.orange};
-          }
-          &::-ms-input-placeholder {
-            color: ${colors.orange};
-          }
-        `
-      : css`
-          &:not(:disabled) {
-            &:focus,
-            &:hover {
-              border: 1px solid var(--secondary);
-            }
-          }
-        `}
+  ${({ $error }) =>
+    !checkIfValueIsEmpty($error) &&
+    css`
+      border: 1px solid
+        ${(props) => props.theme?.error?.borderColor || colors.orange};
+      &:not(:disabled) {
+        &:hover {
+          border: 1px solid
+            ${(props) =>
+              props.theme?.error?.hover?.borderColor || colors.orange};
+        }
+      }
+      &:not(:disabled) {
+        &:focus {
+          border: 1px solid
+            ${(props) =>
+              props.theme?.error?.focus?.borderColor || colors.lightGrey};
+          caret-color: ${(props) =>
+            props.theme?.error?.focus?.caretColor || colors.orange};
+        }
+      }
+      &::placeholder {
+        color: ${(props) =>
+          props.theme?.error?.placeholder?.color || colors.orange};
+        opacity: 1;
+      }
+      &:-ms-input-placeholder {
+        color: ${(props) =>
+          props.theme?.error?.placeholder?.color || colors.orange};
+      }
+      &::-ms-input-placeholder {
+        color: ${(props) =>
+          props.theme?.error?.placeholder?.color || colors.orange};
+      }
+    `};
 `;
 
 export const FileUploadWrapper = styled.div<{ choosen: any; error: any }>`

package/src/components/form/Input.tsx

@@ -1,25 +1,46 @@
 import React from "react";
-import { useField, useFormikContext } from "formik";
-
-import Error from "./Error";
-import { FieldInput } from "./Field.styles";
-import type { InputProps } from "./types";
-
-export default function Input({ name, ...props }: InputProps) {
-  const { status } = useFormikContext();
-  const [field, meta] = useField(name);
-  const errorText = meta.error || status?.[name];
-  const errorMessage = errorText && meta.touched ? errorText : "";
-  const displayError =
-    typeof errorMessage === typeof "string" && errorMessage !== "";
-
+import { theme } from "../../theme";
+import { BaseInput, BaseInputProps } from "./BaseInput";
+const colors = theme.colors.light;
+const bosonTheme = {
+  background: colors.lightGrey,
+  borderColor: colors.border,
+  borderRadius: 0,
+  focus: {
+    caretColor: "initial"
+  },
+  hover: {
+    borderColor: colors.lightGrey
+  },
+  error: {
+    borderColor: colors.orange,
+    hover: {
+      borderColor: colors.orange
+    },
+    focus: {
+      borderColor: colors.orange,
+      caretColor: colors.orange
+    },
+    placeholder: {
+      color: colors.orange
+    }
+  }
+} satisfies BaseInputProps["theme"];
+const clearButtonTheme = {
+  fill: "#cccccc",
+  stroke: "#cccccc",
+  hover: {
+    fill: "#999999",
+    stroke: "#999999"
+  }
+} satisfies BaseInputProps["clearButtonTheme"];
+export type InputProps = Omit<BaseInputProps, "theme" | "clearButtonTheme">;
+export default function Input(props: InputProps) {
   return (
-    <>
-      <FieldInput error={errorMessage} {...field} {...props} />
-      <Error
-        display={!props.hideError && displayError}
-        message={errorMessage}
-      />
-    </>
+    <BaseInput
+      {...props}
+      theme={bosonTheme}
+      clearButtonTheme={clearButtonTheme}
+    />
   );
 }

package/src/components/form/Phone.tsx

@@ -248,7 +248,7 @@ export default function Phone({ name, ...props }: InputProps) {
       </PhoneWrapper>
       <FieldInput
         type="hidden"
-        error={errorMessage}
+        $error={errorMessage}
         disabled
         {...field}
         {...props}

package/src/components/form/index.ts

@@ -2,9 +2,10 @@ export { default as Checkbox } from "./Checkbox";
 export { default as Datepicker } from "./Datepicker";
 export { default as Error } from "./Error";
 export { default as FormField } from "./FormField";
-export { default as Input } from "./Input";
+export * from "./BaseInput";
+export { default as Input, InputProps } from "./Input";
 export { default as Phone } from "./Phone";
 export { default as Select } from "./Select";
-export { default as TagsInput } from "./TagsInput";
+export * from "./BaseTagsInput";
 export { default as Textarea } from "./Textarea";
 export { default as Upload } from "./Upload/Upload";

package/src/components/form/styles/{TagsInput.styles.ts → BaseTagsInput.styles.ts}

@@ -1,22 +1,31 @@
-import styled from "styled-components";
+import styled, { CSSProperties, css } from "styled-components";
 import { theme } from "../../../theme";
 
 const colors = theme.colors.light;
 
-export const TagContainer = styled.div`
+export const TagContainer = styled.div<{
+  $gap: CSSProperties["gap"];
+  $paddingLeft?: CSSProperties["paddingLeft"];
+}>`
   position: relative;
   width: 100%;
   border-radius: 3px;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 0.5em;
+  gap: ${({ $gap }) => $gap};
+  box-sizing: border-box;
+  ${({ $paddingLeft }) =>
+    $paddingLeft &&
+    css`
+      padding-left: ${$paddingLeft};
+    `};
 `;
 
 export const Helper = styled.div`
   position: absolute;
   right: 0.5rem;
-  font-size: 0.875rem;
+  font-size: 0.7rem;
   font-weight: 600;
   opacity: 0.5;
   pointer-events: none;
@@ -29,6 +38,11 @@ export const TagWrapper = styled.div`
   background-color: ${colors.lightGrey};
   display: inline-block;
   padding: 0.5em 0.75em;
+  margin-top: 1rem;
+  border-radius: ${(props) => props.theme.borderRadius || 0}px;
+  .text {
+    word-break: break-word;
+  }
 `;
 
 export const Close = styled.span`

package/src/components/styles/GlobalStyle.tsx

@@ -4,22 +4,7 @@ import { theme } from "../../theme";
 import { zIndex } from "../ui/zIndex";
 
 const colors = theme.colors.light;
-const GlobalStyle = createGlobalStyle<
-  Partial<{
-    $withBosonStyles: boolean;
-    $headerBgColor: string;
-    $headerTextColor: string;
-    $primaryBgColor: string;
-    $secondaryBgColor: string;
-    $accentColor: string;
-    $textColor: string;
-    $footerBgColor: string;
-    $footerTextColor: string;
-    $fontFamily: string;
-    $buttonBgColor: string;
-    $buttonTextColor: string;
-  }>
->`
+const GlobalStyle = createGlobalStyle`
   @font-face {
     font-family: barlow;
     src: url(src/assets/fonts/Barlow-Regular.ttf);
@@ -32,60 +17,19 @@ const GlobalStyle = createGlobalStyle<
   }
   :root {
     --l: 50%;
-    --headerBgColor: ${(props) =>
-      props.$headerBgColor && !props.$withBosonStyles
-        ? props.$headerBgColor
-        : colors.white};
-    --headerTextColor: ${(props) =>
-      props.$headerTextColor && !props.$withBosonStyles
-        ? props.$headerTextColor
-        : colors.darkGrey};
-    --primary: ${(props) =>
-      props.$primaryBgColor && !props.$withBosonStyles
-        ? props.$primaryBgColor
-        : colors.primary};
-    --secondary: ${(props) =>
-      props.$secondaryBgColor && !props.$withBosonStyles
-        ? props.$secondaryBgColor
-        : colors.lightGrey};
-    --accent: ${(props) =>
-      props.$accentColor && !props.$withBosonStyles
-        ? props.$accentColor
-        : colors.accent};
-    --accentNoDefault : ${(props) =>
-      props.$accentColor && !props.$withBosonStyles ? props.$accentColor : ""};
-    --accentDark: ${(props) =>
-      props.$accentColor && !props.$withBosonStyles
-        ? props.$accentColor
-        : colors.arsenic};
-    --textColor: ${(props) =>
-      props.$textColor && !props.$withBosonStyles
-        ? props.$textColor
-        : colors.black};
-    --primaryBgColor: ${(props) =>
-      props.$primaryBgColor && !props.$withBosonStyles
-        ? props.$primaryBgColor
-        : colors.primaryBgColor};
-    --secondaryBgColor: ${(props) =>
-      props.$secondaryBgColor && !props.$withBosonStyles
-        ? props.$secondaryBgColor
-        : colors.secondary};
-    --footerBgColor: ${(props) =>
-      props.$footerBgColor && !props.$withBosonStyles
-        ? props.$footerBgColor
-        : colors.black};
-    --footerTextColor: ${(props) =>
-      props.$footerTextColor && !props.$withBosonStyles
-        ? props.$footerTextColor
-        : colors.white};
-    --buttonBgColor: ${(props) =>
-      props.$buttonBgColor && !props.$withBosonStyles
-        ? props.$buttonBgColor
-        : colors.primary};
-    --buttonTextColor: ${(props) =>
-      props.$buttonTextColor && !props.$withBosonStyles
-        ? props.$buttonTextColor
-        : colors.black};
+    --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};
 
     font-size: 0.75rem;
     ${breakpoint.xs} {
@@ -119,7 +63,7 @@ const GlobalStyle = createGlobalStyle<
 
     color: var(--textColor);
 
-    font-family: ${(props) => props.$fontFamily || "Plus Jakarta Sans"};
+    font-family: "Plus Jakarta Sans";
     font-style: normal;
 
     max-height: 100vh;