@licklist/design 0.66.12-dev.2 → 0.66.12

package/src/auth/AccessDenied/AccessDenied.stories.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { AccessDenied } from "./AccessDenied";
 

package/src/auth/AccessDenied/AccessDenied.tsx

@@ -1,8 +1,9 @@
+import React from "react";
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
 import useUser from "@licklist/plugins/dist/context/user/hooks/useUser";
-import { FaLock } from "react-icons/fa";
+import { Icon } from "../../static";
 
 export const AccessDenied = () => {
   const { t } = useTranslation("App");
@@ -21,7 +22,7 @@ export const AccessDenied = () => {
     <div className="d-flex align-items-center justify-content-center flex-column text-center access-denied h-100">
       <div className="col-8">
         <div className="icon-wrapper mb-5">
-          <FaLock size={80} />
+          <Icon type="lock" width="5rem" height="5rem" />
         </div>
         <h3 className="mb-3">{t("accessDenied")}</h3>
         <h6 className="mb-3">{t("youDontHavePermissions")}</h6>

package/src/auth/Auth.stories.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import React from "react";
 import { Meta, Story } from "@storybook/react";
 import UserProvider from "@licklist/plugins/dist/context/user/providers/UserProvider";
 import InviteProvider from "@licklist/plugins/dist/context/user/providers/InviteProvider";
@@ -28,7 +28,7 @@ export const AuthorizerComponent: Story<AuthorizerProps> = (args) => (
 function AuthorizerWrapper(args) {
   const user = useUser();
 
-  useEffect(() => {
+  React.useEffect(() => {
     user.login({
       id: 1,
       first_name: "Ben",

package/src/auth/Authorizer.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useState, useCallback } from "react";
+import React, { ReactNode, useEffect, useState, useCallback } from "react";
 import { matchPath } from "react-router-dom";
 import useUser from "@licklist/plugins/dist/context/user/hooks/useUser";
 import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
@@ -27,8 +27,8 @@ function Authorizer(props: AuthorizerProps) {
       .map((pathUrlPattern) =>
         matchPath<{ url: string }>(
           RouteService.getCurrentPage(),
-          pathUrlPattern,
-        ),
+          pathUrlPattern
+        )
       )
       .filter(Boolean)
       .map((matched) => matched.url);
@@ -67,7 +67,7 @@ function Authorizer(props: AuthorizerProps) {
     const route = RouteService.getCurrentRoute();
 
     RouteService.cleanRedirect(
-      [ROUTES.LOGIN_PAGE, `returnUrl=${escape(route)}`].join("?"),
+      [ROUTES.LOGIN_PAGE, `returnUrl=${escape(route)}`].join("?")
     );
   }, [
     auth.secrets,

package/src/auth/ChangePassword/ChangePassword.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, Story } from "@storybook/react";
+import React from "react";
 import { Router } from "../Router";
 import { ChangePasswordComponent } from "./ChangePasswordComponent";
 import {

package/src/auth/ChangePassword/ChangePasswordComponent.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 import { useTranslation } from "react-i18next";

package/src/auth/ChangePassword/ChangePasswordFormComponent.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Form, Button } from "react-bootstrap";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -119,14 +120,14 @@ export const ChangePasswordFormComponent = ({
           <Form.Control.Feedback type="invalid">
             {HookFormService.hasError(
               errors.password_confirmation,
-              "required",
+              "required"
             ) &&
               t("Validation:fieldRequired", {
                 attribute: t("User:confirmPassword"),
               })}
             {HookFormService.hasError(
               errors.password_confirmation,
-              "minLength",
+              "minLength"
             ) &&
               t("Validation:fieldMinLength", {
                 attribute: t("User:confirmPassword"),
@@ -135,7 +136,7 @@ export const ChangePasswordFormComponent = ({
 
             {HookFormService.hasError(
               errors.password_confirmation,
-              "validate",
+              "validate"
             ) &&
               t("Validation:fieldDoesntMatchField", {
                 field1: t("User:newPassword"),

package/src/auth/Layout/AuthNavComponent.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import StyledButton from "../../static/StyledButton";

package/src/auth/Layout/Layout.stories.tsx

@@ -1,5 +1,6 @@
 import { IUser } from "@licklist/plugins/dist/types/context/user/IUser";
 import { Meta, Story } from "@storybook/react";
+import React from "react";
 import { AuthNavComponent } from "./AuthNavComponent";
 import { UserNavComponent, UserNavComponentProps } from "./UserNavComponent";
 import { UserNavDropDown as UserNavDropDownComponent } from "./UserNavDropDown";
@@ -20,7 +21,7 @@ export const UserNavDropDown: Story<{}> = (args) => (
   <UserNavDropDownComponent {...args} />
 );
 export const UserNavDropDownToggle: Story<UserNavDropDownToggleProps> = (
-  args,
+  args
 ) => <UserNavDropDownToggleComponent {...args} />;
 
 const user: IUser = {

package/src/auth/Layout/UserNavComponent.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import Dropdown from "react-bootstrap/Dropdown";
 import { IUser } from "@licklist/plugins/dist/types/context/user/IUser";
 import { UserNavDropDown } from "./UserNavDropDown";

package/src/auth/Layout/UserNavDropDown.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import Dropdown from "react-bootstrap/Dropdown";
 import { useTranslation } from "react-i18next";
 import RouteService from "@licklist/plugins/dist/services/Route/RouteService";

package/src/auth/Layout/UserNavDropDownToggle.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { IUser } from "@licklist/plugins/dist/types/context/user/IUser";
 import DefaultUserImage from "../../static/images/DefaultUserImage";

package/src/auth/Login/Login.stories.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { boolean } from "@storybook/addon-knobs";
 import { Router } from "../Router";

package/src/auth/Login/LoginComponent.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 import { Trans, useTranslation } from "react-i18next";
@@ -44,7 +44,7 @@ const LoginComponent = ({
   const handleError = (error: any) => {
     notification.danger({
       title: "Error",
-      message: error?.response?.data?.message || error.message,
+      message: error.message,
     });
   };
 

package/src/auth/Login/LoginFormComponent.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-types */
-import { ChangeEvent, useCallback } from "react";
+import React, { ChangeEvent, useCallback } from "react";
 import { Form, Button } from "react-bootstrap";
 import { useForm } from "react-hook-form";
 import { Trans, useTranslation } from "react-i18next";
@@ -61,13 +61,13 @@ function LoginFormComponent(props: LoginFormComponentProps) {
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     setValue(
       e.currentTarget.name as keyof LoginFormComponentValues,
-      e.currentTarget.value,
+      e.currentTarget.value
     );
   };
 
   const isFieldValid = useCallback(
     (field: string) => HookFormService.isFieldValid(formState, errors, field),
-    [formState, errors],
+    [formState, errors]
   );
   return (
     <>

package/src/auth/Logout/Logout.stories.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import { Route, Switch, MemoryRouter } from "react-router-dom";
 import { Meta, Story } from "@storybook/react";
 import UserProvider from "@licklist/plugins/dist/context/user/providers/UserProvider";

package/src/auth/Logout/Logout.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import useUser from "@licklist/plugins/dist/context/user/hooks/useUser";
 import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
 import { BlockLoader } from "../../static";

package/src/auth/Register/BirthDateFormComponent.tsx

@@ -1,5 +1,5 @@
 import moment from "moment";
-import { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Form, Row, Col } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
@@ -42,7 +42,7 @@ function BirthDateFormComponent({
 
   const isFieldValid = useCallback(
     (field: string) => HookFormService.isFieldValid(formState, errors, field),
-    [formState, errors],
+    [formState, errors]
   );
 
   const validateIsAdult = useCallback(
@@ -55,7 +55,7 @@ function BirthDateFormComponent({
 
       return age >= 18;
     },
-    [],
+    []
   );
 
   const validateIsValidDate = useCallback(
@@ -75,7 +75,7 @@ function BirthDateFormComponent({
         diff <= MAX_AGE
       );
     },
-    [setValue],
+    [setValue]
   );
 
   const validateIsValidYear = useCallback((year: number): boolean => {
@@ -95,7 +95,7 @@ function BirthDateFormComponent({
       const isValidDateNext = validateIsValidDate(
         yearWatch,
         monthWatch,
-        dayWatch,
+        dayWatch
       );
       const isValidYearNext = validateIsValidYear(yearWatch);
 

package/src/auth/Register/Register.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, Story } from "@storybook/react";
+import * as React from "react";
 import { useForm } from "react-hook-form";
 import { boolean } from "@storybook/addon-knobs";
 import { Router } from "../Router";

package/src/auth/Register/RegisterComponent.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from "react";
+import React, { useContext, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { Row, Col } from "react-bootstrap";

package/src/auth/Register/RegisterFormComponent.tsx

@@ -1,4 +1,4 @@
-import { useState, ChangeEvent, useEffect, useCallback } from "react";
+import React, { useState, ChangeEvent, useEffect, useCallback } from "react";
 import { Form, Button, Row, Col, InputGroup } from "react-bootstrap";
 import { Controller, useForm } from "react-hook-form";
 import { Trans, useTranslation } from "react-i18next";
@@ -95,7 +95,7 @@ function RegisterFormComponent({
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     setValue(
       e.target.name as keyof RegisterFormComponentValues,
-      e.target.value,
+      e.target.value
     );
   };
 
@@ -108,7 +108,7 @@ function RegisterFormComponent({
 
   const isFieldValid = useCallback(
     (field: string) => HookFormService.isFieldValid(formState, errors, field),
-    [formState, errors],
+    [formState, errors]
   );
 
   useEffect(() => {

package/src/auth/ResetPassword/ResetPassword.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, Story } from "@storybook/react";
+import React from "react";
 import { Router } from "../Router";
 import { ResetPasswordComponent } from "./ResetPasswordComponent";
 import {

package/src/auth/ResetPassword/ResetPasswordComponent.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from "react";
+import React, { useContext, useState } from "react";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 import { useTranslation } from "react-i18next";

package/src/auth/ResetPassword/ResetPasswordFormComponent.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-types */
-import { ChangeEvent, useCallback } from "react";
+import React, { ChangeEvent, useCallback } from "react";
 import { Form, Button } from "react-bootstrap";
 import { useForm } from "react-hook-form";
 import { Trans, useTranslation } from "react-i18next";
@@ -45,13 +45,13 @@ function ResetPasswordFormComponent(props: ResetPasswordFormComponentProps) {
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     setValue(
       e.currentTarget.name as keyof ResetPasswordFormComponentValues,
-      e.currentTarget.value,
+      e.currentTarget.value
     );
   };
 
   const isFieldValid = useCallback(
     (field: string) => HookFormService.isFieldValid(formState, errors, field),
-    [formState, errors],
+    [formState, errors]
   );
 
   return (

package/src/auth/Router.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect } from "react";
+import React, { ReactNode, useEffect } from "react";
 import { Router as BrowserRouter } from "react-router-dom";
 import App from "@licklist/plugins/dist/services/App/App";
 import history from "@licklist/plugins/dist/services/History/History";
@@ -19,11 +19,11 @@ function Router(props: RouterProps) {
         }
 
         console.info(
-          `The current URL is ${location.pathname}${location.search}${location.hash}`,
+          `The current URL is ${location.pathname}${location.search}${location.hash}`
         );
         console.info(
           `The last navigation action was ${action}`,
-          JSON.stringify(history, null, 2),
+          JSON.stringify(history, null, 2)
         );
       });
     }

package/src/auth/Social/Social.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, Story } from "@storybook/react";
+import React from "react";
 import { Router } from "../Router";
 import { SocialCallbackComponent } from "./SocialCallbackComponent";
 import {

package/src/auth/Social/SocialCallbackComponent.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import RequestContext from "@licklist/plugins/dist/context/app/RequestContext";
 import useNotification from "@licklist/plugins/dist/context/app/hooks/useNotification";
 import useAuth from "@licklist/plugins/dist/context/user/hooks/useAuth";

package/src/auth/Social/SocialFormComponent.tsx

@@ -5,7 +5,7 @@ import RequestContext from "@licklist/plugins/dist/context/app/RequestContext";
 import useSocialApi from "@licklist/plugins/dist/hooks/Api/useSocialApi";
 import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
 import { SocialProvider } from "@licklist/plugins/dist/types/providers/Social/SocialProvider";
-import { useContext } from "react";
+import React, { useContext } from "react";
 import { Row, Col } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { LoaderIndicator } from "../../static/loader/LoaderIndicator";
@@ -74,6 +74,7 @@ function SocialFormComponent(props: SocialFormComponentProps) {
           <SocialButton
             className={["btn-social-lg", "pl-5", "pr-1"].join(" ")}
             type="facebook"
+            icon="facebook-f"
             onClick={handleFacebookClick}
             disabled={isLoading}
           >

package/src/availability-indicator/AvailabilityIndicator.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent, SVGProps } from "react";
+import React, { FunctionComponent, SVGProps } from "react";
 import { useTranslation } from "react-i18next";
 import { ZoneResourcesAvailability } from "@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper";
 import { ReactComponent as AvailableIcon } from "../assets/iframe/available.svg";

package/src/calendar/Calendar.stories.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { DateTime } from "luxon";
 import { Meta, Story } from "@storybook/react";
 import { Calendar, CalendarProps } from "./Calendar";

package/src/calendar/Calendar.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, ReactElement, SetStateAction } from "react";
+import React, { Dispatch, ReactElement, SetStateAction } from "react";
 import { DateTime } from "luxon";
 import { DateTimeButtonProps } from "src/date-time-button";
 import { CalendarButtons } from "./components/CalendarButtons";
@@ -22,7 +22,7 @@ export type CalendarProps = {
   isLoading?: boolean;
   initialDate?: DateTime;
   getDateTimeButtonProps: (
-    date: DateTime,
+    date: DateTime
   ) => Pick<
     DateTimeButtonProps,
     "resources" | "showResources" | "shouldCalculateResources" | "isDisabled"

package/src/calendar/components/CalendarButtons/CalendarButtons.tsx

@@ -1,8 +1,8 @@
-import { useCallback, useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { range } from "lodash";
-import { DateTime } from "luxon";
+import { ReactComponent as SelectArrow } from "../../../assets/iframe/selectArrow.svg";
 import { CalendarSelect } from "../CalendarSelect";
 import { CalendarProps } from "../../Calendar";
 
@@ -26,21 +26,15 @@ export const CalendarButtons = ({
 }: CalendarButtonsProps) => {
   const { t } = useTranslation("Design");
 
-  const onSelectMonth = useCallback(
-    (value: string) => {
-      const selectedMonth = Number(value);
-      const nextDateTime = currentDate.set({ month: selectedMonth });
-
-      if (nextDateTime <= initialDate) {
-        setCurrentDate(initialDate);
-        return;
-      }
+  const onSelectNextMonth = useCallback(() => {
+    setCurrentDate((prevDate) => prevDate.plus({ months: 1 }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-      setCurrentDate(nextDateTime);
-    },
+  const onSelectPreviousMonth = useCallback(() => {
+    setCurrentDate((prevDate) => prevDate.minus({ month: 1 }));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [setCurrentDate, currentDate],
-  );
+  }, []);
 
   const yearOptions = useMemo(() => {
     return range(initialDate.year, initialDate.year + 5, 1).map((year) => {
@@ -48,18 +42,10 @@ export const CalendarButtons = ({
     });
   }, [initialDate]);
 
-  const monthOptions = useMemo(() => {
-    const initialMonth =
-      currentDate.year > initialDate.year ? 1 : initialDate.month;
-    return range(initialMonth, 13).map((monthNumber) => {
-      return {
-        label: DateTime.fromObject({ month: monthNumber }).toLocaleString({
-          month: "long",
-        }),
-        value: monthNumber,
-      };
-    });
-  }, [initialDate, currentDate]);
+  const canMoveBack = useMemo(
+    () => currentDate > initialDate,
+    [currentDate, initialDate]
+  );
 
   const onSelectYear = (value: string) => {
     const selectedYear = Number(value);
@@ -121,11 +107,22 @@ export const CalendarButtons = ({
       <hr />
       <div className="calendar-buttons">
         <div className="buttons-wrapper">
-          <CalendarSelect
-            options={monthOptions}
-            onChange={onSelectMonth}
-            value={currentDate.month}
-          />
+          <Button
+            className="calendar-button left-button"
+            onClick={onSelectPreviousMonth}
+            disabled={!canMoveBack}
+            variant="link"
+          >
+            <SelectArrow />
+          </Button>
+          <div className="month-title">{currentDate.toFormat("MMMM")}</div>
+          <Button
+            className="calendar-button"
+            onClick={onSelectNextMonth}
+            variant="link"
+          >
+            <SelectArrow />
+          </Button>
         </div>
         <CalendarSelect
           options={yearOptions}

package/src/calendar/components/CalendarDates/CalendarDates.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { DateTime } from "luxon";
 import { DateTimeButton, Variant } from "../../../date-time-button";
 import { CalendarWeekdays } from "../CalendarWeekdays";

package/src/calendar/components/CalendarSelect/CalendarSelect.tsx

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import React, { useRef } from "react";
 import { Form } from "react-bootstrap";
 import clsx from "clsx";
 import { PAGE_CALENDAR_SELECT_WRAPPER } from "../../../iframe/page/components/PageBody/constants";

package/src/calendar/components/CalendarWeekdays/CalendarWeekdays.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useTranslation } from "react-i18next";
 
 const WEEKDAYS = [

package/src/collapsible-input-group/CollapsibleInputGroup.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, Story } from "@storybook/react";
+import React from "react";
 import { Accordion } from "react-bootstrap";
 import { FormProvider, useForm } from "react-hook-form";
 import {

package/src/collapsible-input-group/CollapsibleInputGroup.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useContext } from "react";
+import React, { ReactNode, useContext } from "react";
 import {
   Accordion,
   AccordionContext,
@@ -7,7 +7,7 @@ import {
   Form,
 } from "react-bootstrap";
 import clsx from "clsx";
-import { FaChevronUp, FaChevronDown } from "react-icons/fa";
+import Icon from "../static/Icon";
 
 export type CollapsibleInputGroupProps = {
   label: ReactNode;
@@ -27,7 +27,8 @@ export function CollapsibleInputGroup({
   error,
 }: CollapsibleInputGroupProps) {
   const currentEventKey = useContext(AccordionContext);
-
+  const accordionIcon =
+    currentEventKey === eventKey ? "chevron-up" : "chevron-down";
   const isInvalid = Boolean(error);
 
   return (
@@ -41,11 +42,7 @@ export function CollapsibleInputGroup({
       >
         <div className="accordion-form-control-header">
           <h5 className="mb-0 pl-3">{label}</h5>
-          {currentEventKey === eventKey ? (
-            <FaChevronUp size={20} />
-          ) : (
-            <FaChevronDown size={20} />
-          )}
+          <Icon type={accordionIcon} height="1.25rem" />
         </div>
         <Collapse in={currentEventKey !== eventKey}>
           <div className="pl-3">{description}</div>

package/src/custom-fields/CustomFields.stories.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { uniqueId } from "lodash";
 import { Meta, Story } from "@storybook/react";
 import { FieldSet } from "@licklist/core/dist/DataMapper/Order/FieldSetDataMapper";

package/src/custom-fields/{constants.tsx → constants.ts}

@@ -3,19 +3,18 @@ import {
   CUSTOM_FIELD_TYPE_DROPDOWN,
   CUSTOM_FIELD_TYPE_INPUT,
 } from "@licklist/core/dist/DataMapper/Order/CustomFieldDataMapper";
-import { FaFont, FaListOl } from "react-icons/fa";
 import { SORTABLE_ID_KEY } from "../sortable-list";
 
 export const FIELD_TYPES = {
   [CUSTOM_FIELD_TYPE_INPUT]: {
     id: "1",
     label: "Text Input",
-    icon: <FaFont size={32} />,
+    icon: "font",
   },
   [CUSTOM_FIELD_TYPE_DROPDOWN]: {
     id: "2",
     label: "Dropdown",
-    icon: <FaListOl size={32} />,
+    icon: "list-ol",
   },
 };
 

package/src/custom-fields/field/FieldItem.tsx

@@ -1,18 +1,18 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-
-import { ReactElement } from "react";
+import React from "react";
+import { Icon } from "../../static";
 
 interface FieldItemProps {
   label: string;
-  icon: ReactElement;
+  icon: string;
   onClick: () => void;
 }
 
 export function FieldItem({ label, icon, onClick }: FieldItemProps) {
   return (
     <div className="custom-field-item" onClick={onClick}>
-      {icon}
+      <Icon type={icon} height="2rem" />
       <h6>{label}</h6>
     </div>
   );

package/src/custom-fields/field/SelectFieldModal.tsx

@@ -1,4 +1,5 @@
 import { uniqueId } from "lodash";
+import React from "react";
 import { Modal } from "react-bootstrap";
 import { FIELD_TYPES } from "../constants";
 import { FieldItem } from "./FieldItem";