@licklist/design 0.66.13 → 0.67.1

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

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,5 +1,4 @@
-import React from "react";
-import { Icon } from "../static";
+import { FaPlus } from "react-icons/fa";
 
 interface CreateSortableListItemProps {
   onClick: () => void;
@@ -17,12 +16,7 @@ export function CreateSortableListItem({
       type="button"
     >
       <span>{title}</span>
-      <Icon
-        type="plus"
-        height="2rem"
-        width="2rem"
-        className="rounded sortable-list-item-icon p-2"
-      />
+      <FaPlus size={32} className="rounded sortable-list-item-icon p-2" />
     </button>
   );
 }

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,
@@ -9,9 +9,8 @@ import { CSS } from "@dnd-kit/utilities";
 import { Button, Collapse, Modal } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
-
+import { FaEllipsisH, FaGripVertical, FaMinus } from "react-icons/fa";
 import { ConfirmModal } from "../modals";
-import Icon from "../static/Icon";
 import { DeleteFieldButton } from "../product-set/elements/DeleteFieldButton";
 
 const DRAG_RADIUS_LIMIT = 5;
@@ -24,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;
@@ -126,7 +125,7 @@ export function SortableTreeItem({
 
       setExpanded((expanded) => !expanded);
     },
-    [position, shouldExpand, setIsExpanded]
+    [position, shouldExpand, setIsExpanded],
   );
 
   const isVisibleDeleteButton = Boolean(onDelete) && !isOverride;
@@ -138,7 +137,7 @@ export function SortableTreeItem({
       }
       setPosition({ pageX: event.pageX, pageY: event.pageY });
     },
-    [shouldExpand]
+    [shouldExpand],
   );
 
   const onHide = async () => {
@@ -218,7 +217,7 @@ export function SortableTreeItem({
               onMouseUp={onHandleExpand}
             >
               {expanded ? (
-                <Icon type="minus" width=".7rem" />
+                <FaMinus size={10} />
               ) : (
                 <div className="expand-icon-container">
                   <div />
@@ -242,7 +241,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"
@@ -265,7 +264,7 @@ export function SortableTreeItem({
                   {...attributes}
                   {...listeners}
                 >
-                  <Icon type="grip-vertical" />
+                  <FaGripVertical />
                 </Button>
               )}
               <Button
@@ -281,13 +280,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}
@@ -305,7 +304,7 @@ export function SortableTreeItem({
                   onClick={(e) => onEdit(e)}
                   onKeyDown={(e) => e.stopPropagation()}
                 >
-                  <Icon type="ellipsis-h" color="#0E8CE2" height="1rem" />
+                  <FaEllipsisH color="#0E8CE2" size={16} />
                 </div>
               </Button>
             </div>
@@ -323,7 +322,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,4 @@
-import React, { forwardRef, ReactNode } from "react";
+import { forwardRef, ReactNode } from "react";
 import { Form, FormControlProps } from "react-bootstrap";
 
 export interface CurrencyNumberInputProps extends FormControlProps {
@@ -32,7 +32,7 @@ export const CurrencyNumberInput = forwardRef<
       error,
       ...props
     },
-    ref
+    ref,
   ) => (
     <Form.Group className="currency-number-input">
       <Form.Label className={labelClassName}>{label}</Form.Label>
@@ -51,7 +51,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,3 @@
-import React from "react";
 import Card from "react-bootstrap/Card";
 
 export interface Props {

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,8 +1,7 @@
-import React from "react";
 import { Button } from "react-bootstrap";
 import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
 import { useTranslation } from "react-i18next";
-import Icon from "./Icon";
+import { FaArrowLeft } from "react-icons/fa";
 
 function RestrictedAccess() {
   const { t } = useTranslation("Design");
@@ -14,7 +13,7 @@ function RestrictedAccess() {
         variant="link"
         onClick={() => RouteService.goBack()}
       >
-        <Icon type="arrow-left" width="25" />
+        <FaArrowLeft size={25} />
       </Button>
       <div className="container d-flex justify-content-center pt-5">
         <div className="text-center">

package/src/static/SocialButton.tsx

@@ -1,23 +1,21 @@
 /* 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 Icon from "./Icon";
+import { ReactNode } from "react";
+import { FaFacebookF, FaTwitter } from "react-icons/fa";
 
 interface Props {
   children?: ReactNode | ReactNode[];
   onClick?: () => void;
   className?: string;
   type?: string;
-  icon?: string;
   disabled?: boolean;
 }
 
 function SocialButton(props: Props) {
-  const { children, className, onClick, type, icon, disabled } = props;
+  const { children, className, onClick, type, disabled } = props;
 
   const defaultType = "twitter";
-  const defaultIcon = "twitter";
 
   const handleClick = () => {
     if (onClick) {
@@ -38,7 +36,8 @@ function SocialButton(props: Props) {
       onClick={handleClick}
     >
       <span className="separator">
-        <Icon type={["fab", icon ?? defaultIcon]} />
+        {type === "facebook" && <FaFacebookF />}
+        {type === "twitter" && <FaTwitter />}
       </span>
       {children}
     </a>