@licklist/design 0.66.12-dev.2 → 0.66.12

package/src/setting/dashboard/DashboardSetting.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, Story } from "@storybook/react";
+import React from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import Container from "react-bootstrap/Container";
 import * as Config from "@licklist/core/dist/Config";
@@ -33,7 +34,7 @@ export default {
 } as Meta;
 
 export const SettingFormComponent: Story<DashboardSettingFormProps> = (
-  args,
+  args
 ) => (
   <Container>
     <DashboardSettingForm
@@ -44,7 +45,7 @@ export const SettingFormComponent: Story<DashboardSettingFormProps> = (
 );
 
 export const FinancialDataFormComponent: Story<FinancialDataFormProps> = (
-  args,
+  args
 ) => {
   const form = useForm<FinancialDataFormFieldValues>({
     defaultValues: args.defaultValues,
@@ -57,7 +58,7 @@ export const FinancialDataFormComponent: Story<FinancialDataFormProps> = (
 };
 
 export const EventSettingFormComponent: Story<EventSettingFormProps> = (
-  args,
+  args
 ) => {
   const form = useForm<EventSettingFormFieldValues>({
     defaultValues: args.defaultValues,
@@ -70,7 +71,7 @@ export const EventSettingFormComponent: Story<EventSettingFormProps> = (
 };
 
 export const OtherSettingFormComponent: Story<OtherSettingFormProps> = (
-  args,
+  args
 ) => {
   const form = useForm<OtherSettingFormFieldValues>({
     defaultValues: args.defaultValues,
@@ -83,7 +84,7 @@ export const OtherSettingFormComponent: Story<OtherSettingFormProps> = (
 };
 
 export const ProviderSettingFormComponent: Story<ProviderSettingFormProps> = (
-  args,
+  args
 ) => {
   const form = useForm<ProviderSettingFormFieldValues>({
     defaultValues: args.defaultValues,

package/src/setting/dashboard/DashboardSettingForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import { useId } from "@react-aria/utils";
 import { Button, Spinner } from "react-bootstrap";
 import Col from "react-bootstrap/Col";

package/src/setting/dashboard/EventSettingForm.tsx

@@ -1,4 +1,5 @@
 import { useId } from "@react-aria/utils";
+import React from "react";
 import Col from "react-bootstrap/Col";
 import Form from "react-bootstrap/Form";
 import Row from "react-bootstrap/Row";

package/src/setting/dashboard/FinancialDataForm.tsx

@@ -1,11 +1,12 @@
 import { useId } from "@react-aria/utils";
+import React from "react";
 import Col from "react-bootstrap/Col";
 import Form from "react-bootstrap/Form";
 import InputGroup from "react-bootstrap/InputGroup";
 import Row from "react-bootstrap/Row";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { FaIdBadge, FaMoneyCheckAlt, FaUser } from "react-icons/fa";
+import Icon from "../../static/Icon";
 
 export type FinancialDataFormFieldValues = {
   accountName: string;
@@ -45,7 +46,12 @@ export function FinancialDataForm({
           <InputGroup>
             <InputGroup.Prepend>
               <InputGroup.Text>
-                <FaUser size={16} />
+                <Icon
+                  type="user"
+                  style={{
+                    width: "1rem",
+                  }}
+                />
               </InputGroup.Text>
             </InputGroup.Prepend>
 
@@ -59,7 +65,12 @@ export function FinancialDataForm({
           <InputGroup hasValidation>
             <InputGroup.Prepend>
               <InputGroup.Text>
-                <FaIdBadge size={16} />
+                <Icon
+                  type="id-badge"
+                  style={{
+                    width: "1rem",
+                  }}
+                />
               </InputGroup.Text>
             </InputGroup.Prepend>
 
@@ -105,7 +116,12 @@ export function FinancialDataForm({
           <InputGroup hasValidation>
             <InputGroup.Prepend>
               <InputGroup.Text>
-                <FaMoneyCheckAlt size={28} />
+                <Icon
+                  type="money-check-alt"
+                  style={{
+                    width: "1.7rem",
+                  }}
+                />
               </InputGroup.Text>
             </InputGroup.Prepend>
 

package/src/setting/dashboard/OtherSettingForm.tsx

@@ -1,4 +1,5 @@
 import { useId } from "@react-aria/utils";
+import React from "react";
 import Card from "react-bootstrap/Card";
 import Col from "react-bootstrap/Col";
 import Form from "react-bootstrap/Form";

package/src/setting/dashboard/ProviderSettingForm.tsx

@@ -1,12 +1,13 @@
 import Currency from "@licklist/core/dist/Config/Currency";
 import { useId } from "@react-aria/utils";
+import React from "react";
 import Col from "react-bootstrap/Col";
 import Form from "react-bootstrap/Form";
 import InputGroup from "react-bootstrap/InputGroup";
 import Row from "react-bootstrap/Row";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { FaPhone } from "react-icons/fa";
+import Icon from "../../static/Icon";
 import { SelectItem } from "../../types/generic/SelectItem";
 // @TODO not for first release
 // import { Button } from "react-bootstrap";
@@ -113,7 +114,12 @@ export const ProviderSettingForm = ({
             <InputGroup>
               <InputGroup.Prepend>
                 <InputGroup.Text>
-                  <FaPhone size={16} />
+                  <Icon
+                    type="phone"
+                    style={{
+                      width: "1rem",
+                    }}
+                  />
                 </InputGroup.Text>
               </InputGroup.Prepend>
 

package/src/setting/dashboard/components/IpInput.stories.tsx

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

package/src/setting/dashboard/components/IpInput.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import validateIp from "@licklist/plugins/dist/validation/Rules/ipRule";
 import validatePort from "@licklist/plugins/dist/validation/Rules/portRule";
-import {
+import React, {
   ChangeEvent,
   ClipboardEventHandler,
   Fragment,
@@ -12,7 +12,7 @@ import {
 import { Button, FormControl, InputGroup } from "react-bootstrap";
 import { FormProvider, useForm, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { FaTimes } from "react-icons/fa";
+import { Icon } from "../../../static";
 
 export interface IpInputProps {
   onChange: (value: string) => void;
@@ -31,7 +31,7 @@ const ipInputsNames = [
   "ipPort",
 ] as const;
 
-type IpInputsNames = (typeof ipInputsNames)[number];
+type IpInputsNames = typeof ipInputsNames[number];
 
 const IpDischargeFieldNames: Partial<IpInputsNames>[] = [
   "firstIpDischarge",
@@ -78,7 +78,7 @@ export function IpInput({ onChange, onRemove, value }: IpInputProps) {
       });
       return parsedIp;
     },
-    [],
+    []
   );
 
   useEffect(() => {
@@ -91,7 +91,7 @@ export function IpInput({ onChange, onRemove, value }: IpInputProps) {
       const data = e.clipboardData.getData("text");
       parseAndUpdateIpFields(data);
     },
-    [],
+    []
   );
 
   const isRemovable = Boolean(onRemove);
@@ -154,7 +154,7 @@ export function IpInput({ onChange, onRemove, value }: IpInputProps) {
             disabled={!isRemovable}
             onClick={onRemove}
           >
-            <FaTimes size={14} color="red" />
+            <Icon type="times" width=".55rem" height=".9rem" color="red" />
           </Button>
         </InputGroup.Text>
         <FormControl.Feedback type="invalid">

package/src/setting/dashboard/payments/payments-form/PaymentsForm.stories.tsx

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

package/src/setting/dashboard/payments/payments-form/PaymentsForm.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Button, Form, Spinner } from "react-bootstrap";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";

package/src/setting/dashboard/payments/payments-modal/PaymentsModal.stories.tsx

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

package/src/setting/dashboard/payments/payments-modal/PaymentsModal.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Modal, Button, Form } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useId } from "@react-aria/utils";
@@ -28,7 +29,6 @@ export function PaymentsModal({
       <Modal.Header closeButton>
         <Modal.Title>{t("Design:setEmail")}</Modal.Title>
       </Modal.Header>
-      {/* @ts-expect-error TS2345 */}
       <Form onSubmit={form.handleSubmit(onSubmit)}>
         <Modal.Body>
           <Form.Group className="mb-3" controlId={emailId}>

package/src/setting/dashboard/snippet-templates/card/SnippetTemplateCard.stories.tsx

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

package/src/setting/dashboard/snippet-templates/card/SnippetTemplateCard.tsx

@@ -1,7 +1,8 @@
+import React from "react";
 import { Link } from "react-router-dom";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { useTranslation } from "react-i18next";
-import { FaTrashAlt } from "react-icons/fa";
+import { Icon } from "../../../../static";
 
 export interface SnippetTemplateCardProps extends HasPermissionProp {
   name: string;
@@ -31,7 +32,7 @@ export function SnippetTemplateCard({
             className="snippet-template-card-button"
             onClick={onRemove}
           >
-            <FaTrashAlt />
+            <Icon type="trash-alt" />
           </button>
         )}
       </div>

package/src/setting/dashboard/snippets/card/SnippetCard.stories.tsx

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

package/src/setting/dashboard/snippets/card/SnippetCard.tsx

@@ -1,13 +1,13 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { useTranslation } from "react-i18next";
 import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
 import clsx from "clsx";
 import { OverlayTrigger, Popover, ListGroup } from "react-bootstrap";
 import { useId } from "@react-aria/utils";
-import { FaEllipsisH, FaEye, FaTrashAlt } from "react-icons/fa";
 import { MenuButton } from "../../../../table";
 import { ConfirmModal } from "../../../../modals";
+import { Icon } from "../../../../static";
 
 export interface SnippetCardProps extends HasPermissionProp {
   name: string;
@@ -42,7 +42,7 @@ export function SnippetCard({
         <div className="d-flex align-items-center">
           {isDefault && <div className="mr-4">{t("Design:default")}</div>}
           <div className="product-set-card-menu-eye-container">
-            <FaEye color="#0E8CE2" size={20} />
+            <Icon type="eye" color="#0E8CE2" width="20" />
           </div>
           <OverlayTrigger
             trigger="click"
@@ -53,7 +53,7 @@ export function SnippetCard({
                 id={popoverId}
                 className={clsx(
                   "product-set-card-popover",
-                  !isOverlayVisibile && "d-none",
+                  !isOverlayVisibile && "d-none"
                 )}
               >
                 <Popover.Content
@@ -70,7 +70,7 @@ export function SnippetCard({
                             confirm(onRemove);
                           }}
                           name={t("remove")}
-                          icon={<FaTrashAlt size={12} />}
+                          icon="trash-alt"
                           className="product-set-card-menu-item-text d-flex w-100 align-items-center"
                           rightIcon
                         />
@@ -90,7 +90,7 @@ export function SnippetCard({
                 setIsOverlayVisible(true);
               }}
             >
-              <FaEllipsisH />
+              <Icon type="ellipsis-h" />
             </button>
           </OverlayTrigger>
         </div>

package/src/setting/system/SystemSetting.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta } from "@storybook/react";
+import React from "react";
 import Container from "react-bootstrap/Container";
 import { SystemSettingForm } from "./SystemSettingForm";
 

package/src/setting/system/SystemSettingForm.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Button, Spinner } from "react-bootstrap";
 import Form from "react-bootstrap/Form";
 import { FormProvider, useForm } from "react-hook-form";

package/src/sidebar/elements/Elements.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, Story } from "@storybook/react";
+import React from "react";
 import { default as ReturnBackComponent, ReturnBackProps } from "./ReturnBack";
 
 export default {

package/src/sidebar/elements/ReturnBack.tsx

@@ -1,6 +1,7 @@
+import React from "react";
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
-import { FaChevronLeft } from "react-icons/fa";
+import Icon from "../../static/Icon";
 
 export interface ReturnBackProps {
   onClick: () => void;
@@ -12,7 +13,7 @@ function ReturnBack({ onClick }: ReturnBackProps) {
   return (
     <div className="sidebar-return-back-container">
       <Button onClick={onClick} variant="outline-primary">
-        <FaChevronLeft />
+        <Icon type="chevron-left" height="1rem" />
         <span className="sidebar-return-back__title">{t("backToCompany")}</span>
       </Button>
     </div>

package/src/slide-curtain/SlideCurtain.stories.tsx

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

package/src/slide-curtain/SlideCurtain.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useRef, useState } from "react";
-import { FaEllipsisH } from "react-icons/fa";
+import React, { useEffect, useRef, useState } from "react";
 import { useSwipeable } from "react-swipeable";
+import Icon from "../static/Icon";
 
 const formOffsetBuffer = 90;
 
@@ -52,7 +52,11 @@ export function SlideCurtain({ children }) {
         {...handlers}
         ref={passRefToSwieable}
       >
-        <FaEllipsisH size={24} className="slide-form__swipe-trigger__icon" />
+        <Icon
+          type="ellipsis-h"
+          height="1.5rem"
+          className="slide-form__swipe-trigger__icon"
+        />
       </div>
       <div className="slide-form__content">{children}</div>
     </div>

package/src/snippet/snippet-template/SnippetTemplate.stories.tsx

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

package/src/snippet/snippet-template/SnippetTemplate.tsx

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import React, { useRef } from "react";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { ServerError } from "@licklist/plugins/dist/hooks/Api/useHttpQuery";
 

package/src/snippet/snippet-template/context/snippetTemplate.tsx

@@ -1,4 +1,4 @@
-import { createContext, useRef, useState, useMemo } from "react";
+import React, { createContext, useRef, useState, useMemo } from "react";
 import {
   SnippetTemplate,
   DEFAULT_SNIPPET_TEMPLATE_COLORS,
@@ -32,7 +32,7 @@ export function SnippetTemplateContextProvider({
 }: SnippetTemplateLoadingContextProviderProps) {
   const actionsRef = useRef(null);
   const [template, setTemplate] = useState<SnippetTemplateValuesWithName>(
-    safeMergeDefaultSettings(defaultValues),
+    safeMergeDefaultSettings(defaultValues)
   );
 
   actionsRef.current = {
@@ -46,7 +46,7 @@ export function SnippetTemplateContextProvider({
   const dropdownBackgroundIcon = useMemo(() => {
     const color = encodeURIComponent(
       template?.elementsButtonBackgroundColor ||
-        DEFAULT_SNIPPET_TEMPLATE_COLORS.elementsButtonBackgroundColor,
+        DEFAULT_SNIPPET_TEMPLATE_COLORS.elementsButtonBackgroundColor
     );
 
     // eslint-disable-next-line max-len

package/src/snippet/snippet-template/context/snippetTemplateLoading.tsx

@@ -1,4 +1,4 @@
-import { createContext, useState } from "react";
+import React, { createContext, useState } from "react";
 
 export interface SnippetTemplateLoadingContextValues {
   isLoading: boolean;

package/src/snippet/snippet-template/context/snippetTemplateView.tsx

@@ -1,4 +1,4 @@
-import { createContext, useRef, useState } from "react";
+import React, { createContext, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 export const snippetTemplateViews = {
@@ -64,13 +64,13 @@ export function SnippetTemplateViewContextProvider({ children }) {
       pageHeaderStepsActiveStepBorderColor: t("activeStepBorderColor"),
       pageHeaderStepsActiveStepBodyColor: t("headerActiveStepBodyColor"),
       pageHeaderStepsInactiveStepBackgroundColor: t(
-        "inactiveStepBackgroundColor",
+        "inactiveStepBackgroundColor"
       ),
       pageHeaderStepsInactiveStepBorderColor: t("inactiveStepBorderColor"),
       pageHeaderStepsInactiveStepBodyColor: t("headerInactiveStepBodyColor"),
 
       pageHeaderStepsCloseButtonBackgroundColor: t(
-        "headerButtonsBackgroundColor",
+        "headerButtonsBackgroundColor"
       ),
 
       // @TODO return back this color as pageHeaderStepsCloseButtonBodyColor
@@ -81,7 +81,7 @@ export function SnippetTemplateViewContextProvider({ children }) {
     pageBodyLeftBlock: {
       pageBodyLeftBlockBackgroundColor: t("backgroundColor"),
       pageBodyLeftBlockBackButtonBackgroundColor: t(
-        "backButtonBackgroundColor",
+        "backButtonBackgroundColor"
       ),
       pageBodyLeftBlockBackButtonBorderColor: t("backButtonBorderColor"),
       pageBodyLeftBlockBackButtonBodyColor: t("backButtonColor"),
@@ -103,7 +103,7 @@ export function SnippetTemplateViewContextProvider({ children }) {
       elementsNumberInputBodyColor: t("numberInputBodyColor"),
       elementsNumberInputButtonBorderColor: t("numberInputButtonBorderColor"),
       elementsNumberInputButtonBackgroundColor: t(
-        "numberInputButtonBackgroundColor",
+        "numberInputButtonBackgroundColor"
       ),
 
       elementsButtonColor: t("buttonColor"),
@@ -123,12 +123,12 @@ export function SnippetTemplateViewContextProvider({ children }) {
       calendarButtonFontColor: t("calendarButtonFontColor"),
       calendarDisabledButtonBorderColor: t("calendarDisabledButtonBorderColor"),
       calendarDisabledButtonBackgroundColor: t(
-        "calendarDisabledButtonBackgroundColor",
+        "calendarDisabledButtonBackgroundColor"
       ),
       calendarDisabledButtonFontColor: t("calendarDisabledButtonFontColor"),
       calendarActiveButtonBorderColor: t("calendarActiveButtonBorderColor"),
       calendarActiveButtonBackgroundColor: t(
-        "calendarActiveButtonBackgroundColor",
+        "calendarActiveButtonBackgroundColor"
       ),
       calendarActiveButtonFontColor: t("calendarActiveButtonFontColor"),
     },

package/src/snippet/snippet-template/control/Control.stories.tsx

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

package/src/snippet/snippet-template/control/PropertyControl.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { TwitterPicker } from "react-color";
 import { Form } from "react-bootstrap";
 import { useFormContext, Path } from "react-hook-form";
@@ -51,7 +51,7 @@ export function PropertyControl<T>({
 
   const isFieldValid = useCallback(
     (field: string) => HookFormService.isFieldValid(formState, errors, field),
-    [formState, errors],
+    [formState, errors]
   );
 
   const toggleIsActive = () => {

package/src/snippet/snippet-template/form/SnippetTemplateForm.stories.tsx

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

package/src/snippet/snippet-template/form/SnippetTemplateForm.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect } from "react";
+import React, { useCallback, useContext, useEffect } from "react";
 import { Form } from "react-bootstrap";
 import { useForm, FormProvider } from "react-hook-form";
 import Button from "react-bootstrap/Button";
@@ -71,9 +71,9 @@ export function SnippetTemplateForm({
       HookFormService.isFieldValid(
         form.formState,
         form.formState.errors,
-        field,
+        field
       ),
-    [form.formState],
+    [form.formState]
   );
 
   return (

package/src/snippet/snippet-template/preview/Preview.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, Story } from "@storybook/react";
+import React from "react";
 import { Preview, PreviewProps } from "./Preview";
 import { SnippetTemplateContextProvider } from "../context/snippetTemplate";
 import { SnippetTemplateLoadingContextProvider } from "../context/snippetTemplateLoading";

package/src/snippet/snippet-template/preview/Preview.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from "react";
+import React, { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { MemoryRouter } from "react-router-dom";
 import { Button } from "react-bootstrap";
@@ -8,7 +8,7 @@ import {
 } from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
 import { ProductSet } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
 import { DateTime } from "luxon";
-import { Calendar, CalendarProps, defaultStartDay } from "../../../calendar";
+import { Calendar, defaultStartDay } from "../../../calendar";
 import { getMonthCalendarDates } from "../../../calendar/utils";
 import { IframeEventCard } from "../../../iframe/event/event-card";
 import { SettingButton } from "../settings";
@@ -208,13 +208,9 @@ export function Preview({
                           selectedDate={selectedDate}
                           setSelectedDate={setSelectedDate}
                           calendarDates={calendarDates}
-                          getDateTimeButtonProps={() =>
-                            ({
-                              isDisabled: false,
-                            }) as ReturnType<
-                              CalendarProps["getDateTimeButtonProps"]
-                            >
-                          }
+                          getDateTimeButtonProps={() => ({
+                            isDisabled: false,
+                          })}
                         />
                       </SettingButton>
                     </div>

package/src/snippet/snippet-template/settings/SettingButton.tsx

@@ -1,6 +1,7 @@
+import React from "react";
 import Button from "react-bootstrap/Button";
 import clsx from "clsx";
-import { FaCog } from "react-icons/fa";
+import Icon from "../../../static/Icon";
 import { snippetTemplateViews } from "../context/snippetTemplateView";
 
 export interface SettingButtonProps extends React.PropsWithChildren<unknown> {
@@ -27,7 +28,7 @@ export const SettingButton = ({
         className={clsx("snippet-template__setting d-inline", className)}
         onClick={() => onClick(view as keyof typeof snippetTemplateViews)}
       >
-        <FaCog size={16} />
+        <Icon type="cog" style={{ width: 16 }} />
       </Button>
     </div>
   );

package/src/snippet/snippet-template/settings/Settings.stories.tsx

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

package/src/snippet/snippet-template/utils/index.ts

@@ -4,7 +4,7 @@ import {
 } from "@licklist/core/dist/DataMapper/Provider/SnippetTemplateDataMapper";
 
 export const safeMergeDefaultSettings = (
-  settings: Partial<SnippetTemplate> = {},
+  settings: Partial<SnippetTemplate> = {}
 ) => {
   const { id, providerId, isDefault, name, type, ...settingsProps } = settings;
 
@@ -27,6 +27,6 @@ export const safeMergeDefaultSettings = (
           (DEFAULT_SNIPPET_TEMPLATE_COLORS[currentKey] ?? "#000"),
       };
     },
-    { id, providerId, isDefault, name, type } as SnippetTemplate,
+    { id, providerId, isDefault, name, type } as SnippetTemplate
   );
 };

package/src/sortable-fields/SortableFieldItem.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useMemo } from "react";
+import React, { createContext, useContext, useMemo } from "react";
 import type { CSSProperties, PropsWithChildren } from "react";
 import type {
   DraggableSyntheticListeners,
@@ -29,7 +29,7 @@ export function SortableFieldItem({ children, id }: PropsWithChildren<Props>) {
       listeners,
       ref: setDraggableNodeRef,
     }),
-    [listeners, setDraggableNodeRef],
+    [listeners, setDraggableNodeRef]
   );
   const style: CSSProperties = {
     opacity: isDragging ? 0.4 : undefined,