@licklist/design 0.66.7-dev.5 → 0.66.7-dev.7

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { Modal, Button, Form } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useId } from "@react-aria/utils";
@@ -29,6 +28,7 @@ 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,4 +1,3 @@
-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,4 +1,3 @@
-import React from "react";
 import { Link } from "react-router-dom";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { useTranslation } from "react-i18next";

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

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

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { 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";
@@ -53,7 +53,7 @@ export function SnippetCard({
                 id={popoverId}
                 className={clsx(
                   "product-set-card-popover",
-                  !isOverlayVisibile && "d-none"
+                  !isOverlayVisibile && "d-none",
                 )}
               >
                 <Popover.Content

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

@@ -1,5 +1,4 @@
 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,4 +1,3 @@
-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,5 +1,4 @@
 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,4 +1,3 @@
-import React from "react";
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import Icon from "../../static/Icon";

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

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

package/src/slide-curtain/SlideCurtain.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useSwipeable } from "react-swipeable";
 import Icon from "../static/Icon";
 

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

@@ -1,4 +1,3 @@
-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 React, { useRef } from "react";
+import { 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,5 @@
-import React, { createContext, useRef, useState, useMemo } from "react";
+import { createContext, useRef, useState, useMemo } from "react";
+import * as React from "react";
 import {
   SnippetTemplate,
   DEFAULT_SNIPPET_TEMPLATE_COLORS,
@@ -32,7 +33,7 @@ export function SnippetTemplateContextProvider({
 }: SnippetTemplateLoadingContextProviderProps) {
   const actionsRef = useRef(null);
   const [template, setTemplate] = useState<SnippetTemplateValuesWithName>(
-    safeMergeDefaultSettings(defaultValues)
+    safeMergeDefaultSettings(defaultValues),
   );
 
   actionsRef.current = {
@@ -46,7 +47,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,5 @@
-import React, { createContext, useState } from "react";
+import { createContext, useState } from "react";
+import * as React from "react";
 
 export interface SnippetTemplateLoadingContextValues {
   isLoading: boolean;

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

@@ -1,4 +1,5 @@
-import React, { createContext, useRef, useState } from "react";
+import { createContext, useRef, useState } from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 
 export const snippetTemplateViews = {
@@ -64,13 +65,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 +82,7 @@ export function SnippetTemplateViewContextProvider({ children }) {
     pageBodyLeftBlock: {
       pageBodyLeftBlockBackgroundColor: t("backgroundColor"),
       pageBodyLeftBlockBackButtonBackgroundColor: t(
-        "backButtonBackgroundColor"
+        "backButtonBackgroundColor",
       ),
       pageBodyLeftBlockBackButtonBorderColor: t("backButtonBorderColor"),
       pageBodyLeftBlockBackButtonBodyColor: t("backButtonColor"),
@@ -103,7 +104,7 @@ export function SnippetTemplateViewContextProvider({ children }) {
       elementsNumberInputBodyColor: t("numberInputBodyColor"),
       elementsNumberInputButtonBorderColor: t("numberInputButtonBorderColor"),
       elementsNumberInputButtonBackgroundColor: t(
-        "numberInputButtonBackgroundColor"
+        "numberInputButtonBackgroundColor",
       ),
 
       elementsButtonColor: t("buttonColor"),
@@ -123,12 +124,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,5 +1,4 @@
 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 React, { useCallback, useState } from "react";
+import { 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,5 +1,4 @@
 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 React, { useCallback, useContext, useEffect } from "react";
+import { 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,5 +1,4 @@
 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 React, { useContext, useState } from "react";
+import { 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, defaultStartDay } from "../../../calendar";
+import { Calendar, CalendarProps, defaultStartDay } from "../../../calendar";
 import { getMonthCalendarDates } from "../../../calendar/utils";
 import { IframeEventCard } from "../../../iframe/event/event-card";
 import { SettingButton } from "../settings";
@@ -208,9 +208,13 @@ export function Preview({
                           selectedDate={selectedDate}
                           setSelectedDate={setSelectedDate}
                           calendarDates={calendarDates}
-                          getDateTimeButtonProps={() => ({
-                            isDisabled: false,
-                          })}
+                          getDateTimeButtonProps={() =>
+                            ({
+                              isDisabled: false,
+                            }) as ReturnType<
+                              CalendarProps["getDateTimeButtonProps"]
+                            >
+                          }
                         />
                       </SettingButton>
                     </div>

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

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import Button from "react-bootstrap/Button";
 import clsx from "clsx";
 import Icon from "../../../static/Icon";

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

@@ -1,5 +1,4 @@
 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 React, { createContext, useContext, useMemo } from "react";
+import { 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,

package/src/sortable-fields/SortableFieldList.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import type { ReactNode } from "react";
 import {
   DndContext,
@@ -34,7 +33,7 @@ export function SortableFieldList<T extends BaseItem>({
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates,
-    })
+    }),
   );
 
   return (

package/src/sortable-list/CreateSortableListItem.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Icon } from "../static";
 
 interface CreateSortableListItemProps {

package/src/sortable-list/SortableList.stories.tsx

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

package/src/sortable-list/SortableList.tsx

@@ -6,7 +6,7 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { isEqual } from "lodash";
-import React, {
+import {
   Dispatch,
   ReactNode,
   SetStateAction,

package/src/sortable-tree/SortableTree.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta, Story } from "@storybook/react";
 import { uniqueId } from "lodash";
-import React from "react";
 import { SortableTree, SortableTreeProps } from "./SortableTree";
 
 export default {

package/src/sortable-tree/SortableTree.tsx

@@ -4,7 +4,7 @@ import {
   SortableContextProps,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 import { SortableTreeItem } from "./SortableTreeItem";
 
 export interface SortableTreeProps {

package/src/sortable-tree/SortableTreeItem.stories.tsx

@@ -4,7 +4,6 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { Meta, Story } from "@storybook/react";
-import React from "react";
 import { Form } from "react-bootstrap";
 import { SortableTreeItem, SortableTreeItemProps } from "./SortableTreeItem";
 

package/src/sortable-tree/SortableTreeItem.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useCallback, useEffect, useState } from "react";
+import { ReactNode, useCallback, useEffect, useState } from "react";
 import { DndContext, useDraggable } from "@dnd-kit/core";
 import {
   SortableContext,
@@ -23,7 +23,7 @@ export const ProductSetModalClasses = {
 } as const;
 
 export type ProductSetModalClassesType =
-  typeof ProductSetModalClasses[keyof typeof ProductSetModalClasses];
+  (typeof ProductSetModalClasses)[keyof typeof ProductSetModalClasses];
 
 export interface SortableTreeItemProps {
   id: string;
@@ -120,7 +120,7 @@ export function SortableTreeItem({
 
       setExpanded((expanded) => !expanded);
     },
-    [position, setIsExpanded]
+    [position, setIsExpanded],
   );
 
   const isVisibleDeleteButton = Boolean(onDelete) && !isOverride;
@@ -229,7 +229,7 @@ export function SortableTreeItem({
                 <path
                   className={clsx(
                     "sortable-tree-line-icon-path",
-                    treeLineIconColor && "sortable-tree-line-product-element"
+                    treeLineIconColor && "sortable-tree-line-product-element",
                   )}
                   style={{ stroke: treeLineIconColor }}
                   d="M 50 0 V 100"
@@ -267,13 +267,13 @@ export function SortableTreeItem({
                   className={clsx(
                     modalLabel
                       ? "sortable-tree-product-set-title-container"
-                      : "sortable-tree-title-container"
+                      : "sortable-tree-title-container",
                   )}
                 >
                   <span
                     className={clsx(
                       "sortable-tree-item-title",
-                      modalLabel && "sortable-tree-product-set-element-title"
+                      modalLabel && "sortable-tree-product-set-element-title",
                     )}
                   >
                     {title}
@@ -309,7 +309,7 @@ export function SortableTreeItem({
                 // unique class
                 className={clsx(
                   "m-0 edit-product-set-element-modal edit-right-form-modal h-100",
-                  modalClass
+                  modalClass,
                 )}
                 dialogClassName="edit-event-dialog edit-step-dialog"
                 onHide={onHide}

package/src/sortable-tree/index.ts

@@ -1,2 +1,2 @@
 export * from "./SortableTree";
-export { SortableTreeItemProps } from "./SortableTreeItem";
+export type { SortableTreeItemProps } from "./SortableTreeItem";

package/src/sorting-select/SortingSelect.stories.tsx

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

package/src/sorting-select/SortingSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import useQuery from "@licklist/plugins/dist/hooks/Query/useQuery";
 import { Form, FormGroupProps } from "react-bootstrap";
 import { useTranslation } from "react-i18next";

package/src/static/CountryCodeSelect.tsx

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

package/src/static/CountrySelect.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useState, useEffect } from "react";
+import { ChangeEvent, useState, useEffect } from "react";
 import Form from "react-bootstrap/Form";
 import {
   getCountries,

package/src/static/CurrencyNumberInput.tsx

@@ -1,4 +1,5 @@
-import React, { forwardRef, ReactNode } from "react";
+import { forwardRef, ReactNode } from "react";
+import * as React from "react";
 import { Form, FormControlProps } from "react-bootstrap";
 
 export interface CurrencyNumberInputProps extends FormControlProps {
@@ -32,7 +33,7 @@ export const CurrencyNumberInput = forwardRef<
       error,
       ...props
     },
-    ref
+    ref,
   ) => (
     <Form.Group className="currency-number-input">
       <Form.Label className={labelClassName}>{label}</Form.Label>
@@ -51,7 +52,7 @@ export const CurrencyNumberInput = forwardRef<
         <Form.Control.Feedback type="invalid">{error}</Form.Control.Feedback>
       </div>
     </Form.Group>
-  )
+  ),
 );
 
 CurrencyNumberInput.displayName = "CurrencyNumberInput";

package/src/static/FormCard.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import Card from "react-bootstrap/Card";
 
 export interface Props {

package/src/static/Icon.tsx

@@ -3,7 +3,7 @@ import { config, IconProp, library } from "@fortawesome/fontawesome-svg-core";
 import { fab } from "@fortawesome/free-brands-svg-icons";
 import { fas } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import React, { CSSProperties } from "react";
+import { CSSProperties } from "react";
 
 config.autoAddCss = false;
 

package/src/static/Image.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable import/no-named-default */
-import React from "react";
 import { default as BootstrapImage, ImageProps } from "react-bootstrap/Image";
 
 export interface Props extends ImageProps {

package/src/static/RestrictedAccess.tsx

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

package/src/static/SocialButton.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import Icon from "./Icon";
 
 interface Props {