@licklist/design 0.66.11 → 0.66.12-dev.1

package/src/theme/Theme.stories.tsx

@@ -1,105 +1,106 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
 import Badge from "react-bootstrap/Badge";
 import Button from "react-bootstrap/Button";
 
-storiesOf("Theme", module).add(
-  "Basics",
-  () => (
-    <>
-      <div
-        style={{
-          padding: 15,
-        }}
-      >
-        <p>Examples:</p>
-        <p>
-          <Button variant="primary">Primary</Button>{" "}
-          <Button variant="secondary">Secondary</Button>{" "}
-          <Button variant="success">Success</Button>{" "}
-          <Button variant="warning">Warning</Button>{" "}
-          <Button variant="danger">Danger</Button>{" "}
-          <Button variant="info">Info</Button>{" "}
-          <Button variant="light">Light</Button>{" "}
-          <Button variant="dark">Dark</Button>{" "}
-          <Button variant="link">Link</Button>
-        </p>
-        <p>Outline buttons:</p>
-        <p>
-          <Button variant="outline-primary">Primary</Button>{" "}
-          <Button variant="outline-secondary">Secondary</Button>{" "}
-          <Button variant="outline-success">Success</Button>{" "}
-          <Button variant="outline-warning">Warning</Button>{" "}
-          <Button variant="outline-danger">Danger</Button>{" "}
-          <Button variant="outline-info">Info</Button>{" "}
-          <Button variant="outline-light">Light</Button>{" "}
-          <Button variant="outline-dark">Dark</Button>
-        </p>
-        <p>Sizes</p>
-        <p>
-          <div className="mb-2">
-            <Button variant="primary" size="lg">
-              Large button
-            </Button>{" "}
-            <Button variant="secondary" size="lg">
-              Large button
-            </Button>
-          </div>
-          <div>
-            <Button variant="primary" size="sm">
-              Small button
-            </Button>{" "}
-            <Button variant="secondary" size="sm">
-              Small button
-            </Button>
-          </div>
-        </p>
-        <p>
-          <Button variant="primary" size="lg" block>
-            Block level button
-          </Button>
-          <Button variant="secondary" size="lg" block>
-            Block level button
-          </Button>
-        </p>
-        <p>Active state</p>
-        <p>
-          <Button variant="primary" size="lg" active>
-            Primary button
+export default {
+  title: "Theme",
+};
+
+export const Basics = () => (
+  <>
+    <div
+      style={{
+        padding: 15,
+      }}
+    >
+      <p>Examples:</p>
+      <p>
+        <Button variant="primary">Primary</Button>{" "}
+        <Button variant="secondary">Secondary</Button>{" "}
+        <Button variant="success">Success</Button>{" "}
+        <Button variant="warning">Warning</Button>{" "}
+        <Button variant="danger">Danger</Button>{" "}
+        <Button variant="info">Info</Button>{" "}
+        <Button variant="light">Light</Button>{" "}
+        <Button variant="dark">Dark</Button>{" "}
+        <Button variant="link">Link</Button>
+      </p>
+      <p>Outline buttons:</p>
+      <p>
+        <Button variant="outline-primary">Primary</Button>{" "}
+        <Button variant="outline-secondary">Secondary</Button>{" "}
+        <Button variant="outline-success">Success</Button>{" "}
+        <Button variant="outline-warning">Warning</Button>{" "}
+        <Button variant="outline-danger">Danger</Button>{" "}
+        <Button variant="outline-info">Info</Button>{" "}
+        <Button variant="outline-light">Light</Button>{" "}
+        <Button variant="outline-dark">Dark</Button>
+      </p>
+      <p>Sizes</p>
+      <p>
+        <div className="mb-2">
+          <Button variant="primary" size="lg">
+            Large button
           </Button>{" "}
-          <Button variant="secondary" size="lg" active>
-            Button
+          <Button variant="secondary" size="lg">
+            Large button
           </Button>
-        </p>
-        <p>Disabled state</p>
-        <p>
-          <Button variant="primary" size="lg" disabled>
-            Primary button
-          </Button>{" "}
-          <Button variant="secondary" size="lg" disabled>
-            Button
+        </div>
+        <div>
+          <Button variant="primary" size="sm">
+            Small button
           </Button>{" "}
-          <Button href="#" variant="secondary" size="lg" disabled>
-            Link
+          <Button variant="secondary" size="sm">
+            Small button
           </Button>
-        </p>
-        <p>Badges</p>
-        <p>
-          <Badge variant="primary">Primary</Badge>{" "}
-          <Badge variant="secondary">Secondary</Badge>{" "}
-          <Badge variant="success">Success</Badge>{" "}
-          <Badge variant="warning">Warning</Badge>{" "}
-          <Badge variant="danger">Danger</Badge>{" "}
-          <Badge variant="info">Info</Badge>{" "}
-          <Badge variant="light">Light</Badge>{" "}
-          <Badge variant="dark">Dark</Badge> <Badge variant="link">Link</Badge>
-        </p>
-      </div>
-    </>
-  ),
-  {
+        </div>
+      </p>
+      <p>
+        <Button variant="primary" size="lg" block>
+          Block level button
+        </Button>
+        <Button variant="secondary" size="lg" block>
+          Block level button
+        </Button>
+      </p>
+      <p>Active state</p>
+      <p>
+        <Button variant="primary" size="lg" active>
+          Primary button
+        </Button>{" "}
+        <Button variant="secondary" size="lg" active>
+          Button
+        </Button>
+      </p>
+      <p>Disabled state</p>
+      <p>
+        <Button variant="primary" size="lg" disabled>
+          Primary button
+        </Button>{" "}
+        <Button variant="secondary" size="lg" disabled>
+          Button
+        </Button>{" "}
+        <Button href="#" variant="secondary" size="lg" disabled>
+          Link
+        </Button>
+      </p>
+      <p>Badges</p>
+      <p>
+        <Badge variant="primary">Primary</Badge>{" "}
+        <Badge variant="secondary">Secondary</Badge>{" "}
+        <Badge variant="success">Success</Badge>{" "}
+        <Badge variant="warning">Warning</Badge>{" "}
+        <Badge variant="danger">Danger</Badge>{" "}
+        <Badge variant="info">Info</Badge> <Badge variant="light">Light</Badge>{" "}
+        <Badge variant="dark">Dark</Badge> <Badge variant="link">Link</Badge>
+      </p>
+    </div>
+  </>
+);
+
+Basics.story = {
+  parameters: {
     info: `
         Basics
       `,
-  }
-);
+  },
+};

package/src/tiptap-editor/TipTapEditor.stories.tsx

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

package/src/tiptap-editor/TipTapEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 import Bold from "@tiptap/extension-bold";
 import Text from "@tiptap/extension-text";
@@ -75,7 +75,7 @@ export function TipTapEditor({
         onUpdate(editor.getHTML());
       },
     },
-    [disabled]
+    [disabled],
   );
 
   useEffect(() => {
@@ -101,7 +101,7 @@ export function TipTapEditor({
         className={clsx(
           !viewMode ? "editor editor-with-menu" : "editor-without-menu",
           disabled && "editor-disabled",
-          className
+          className,
         )}
         style={editorStyle}
         editor={editor}

package/src/tiptap-editor/TipTapMenu/TipTapMenu.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { TipTapMenu } from "./TipTapMenu";
 import { useEditor } from "@tiptap/react";
 import { Meta } from "@storybook/react";

package/src/tiptap-editor/TipTapMenu/TipTapMenu.tsx

@@ -1,9 +1,16 @@
-import React from "react";
 import { sample } from "lodash";
 import { Editor } from "@tiptap/react";
 import { Row } from "react-bootstrap";
 import clsx from "clsx";
 
+import {
+  FaList,
+  FaListOl,
+  FaRedoAlt,
+  FaSmile,
+  FaTasks,
+  FaUndoAlt,
+} from "react-icons/fa";
 import { ReactComponent as BoldSvg } from "../../assets/editor/bold.svg";
 import { ReactComponent as ItalicSvg } from "../../assets/editor/italic.svg";
 import { ReactComponent as StrikethroughSvg } from "../../assets/editor/strikethrough.svg";
@@ -32,19 +39,19 @@ export function TipTapMenu({ editor, withEmoji, disabled }: TipTapMenuPros) {
       <TipTapMenuItem
         onClick={() => editor.chain().focus().toggleBold().run()}
         type="Bold"
-        customIcon={<BoldSvg />}
+        icon={<BoldSvg />}
         isActive={editor.isActive("bold")}
       />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().toggleItalic().run()}
         type="Italic"
-        customIcon={<ItalicSvg />}
+        icon={<ItalicSvg />}
         isActive={editor.isActive("italic")}
       />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().toggleStrike().run()}
         type="Strike"
-        customIcon={<StrikethroughSvg />}
+        icon={<StrikethroughSvg />}
         isActive={editor.isActive("strike")}
       />
       {withEmoji && (
@@ -56,12 +63,12 @@ export function TipTapMenu({ editor, withEmoji, disabled }: TipTapMenuPros) {
                 .chain()
                 .focus()
                 .insertEmoji(
-                  sample(["😀", "😁", "😂", "😎", "😍", "😱"]) as string
+                  sample(["😀", "😁", "😂", "😎", "😍", "😱"]) as string,
                 )
                 .run()
             }
             type="Emoji"
-            iconName="smile"
+            icon={<FaSmile />}
           />
         </>
       )}
@@ -69,75 +76,75 @@ export function TipTapMenu({ editor, withEmoji, disabled }: TipTapMenuPros) {
       <TipTapMenuItem
         onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
         type="Heading 1"
-        customIcon={<H1Svg />}
+        icon={<H1Svg />}
         isActive={editor.isActive("heading", { level: 1 })}
       />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
         type="Heading 2"
-        customIcon={<H2Svg />}
+        icon={<H2Svg />}
         isActive={editor.isActive("heading", { level: 2 })}
       />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().setParagraph().run()}
         type="Paragraph"
-        customIcon={<ParagraphSvg />}
+        icon={<ParagraphSvg />}
         isActive={editor.isActive("paragraph")}
       />
 
       <TipTapMenuItem
         onClick={() => editor.chain().focus().toggleOrderedList().run()}
         type="Bullet list"
-        iconName="list"
+        icon={<FaList />}
         isActive={editor.isActive("bulletList")}
       />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().toggleBulletList().run()}
         type="Ordered list"
-        iconName="list-ol"
+        icon={<FaListOl />}
         isActive={editor.isActive("orderedList")}
       />
       <TipTapMenuItem
         onClick={() => editor.commands.toggleTaskList()}
         type="Task list"
-        iconName="tasks"
+        icon={<FaTasks />}
         isActive={editor.isActive("taskList")}
       />
       <div className="divider" />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().toggleBlockquote().run()}
         type="Blockquote"
-        customIcon={<DoubleQuotesLSvg />}
+        icon={<DoubleQuotesLSvg />}
         isActive={editor.isActive("blockquote")}
       />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().setHorizontalRule().run()}
         type="Horizontal Rule"
-        customIcon={<SepatatorSvg />}
+        icon={<SepatatorSvg />}
       />
       <div className="divider" />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().setHardBreak().run()}
         type="Hard Break"
-        customIcon={<TextWrapSvg />}
+        icon={<TextWrapSvg />}
       />
       <TipTapMenuItem
         onClick={() =>
           editor.chain().focus().unsetAllMarks().clearNodes().run()
         }
         type="Clear Format"
-        customIcon={<FormatClearSvg />}
+        icon={<FormatClearSvg />}
       />
       <div className="divider" />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().undo().run()}
         type="Undo"
-        iconName="undo-alt"
+        icon={<FaUndoAlt />}
       />
       <TipTapMenuItem
         onClick={() => editor.chain().focus().redo().run()}
         type="Redo"
-        iconName="redo-alt"
+        icon={<FaRedoAlt />}
       />
     </Row>
   );

package/src/tiptap-editor/TipTapMenu/components/TipTapMenuItem.tsx

@@ -1,23 +1,19 @@
-import React from "react";
 import { Tooltip, OverlayTrigger } from "react-bootstrap";
 import { useId } from "@react-aria/utils";
 import clsx from "clsx";
-
-import { Icon } from "../../../static";
+import { ReactElement } from "react";
 
 interface TipTapMenuItemProps {
   onClick: () => void;
   type: string;
-  iconName?: string;
-  customIcon?: React.ReactElement;
+  icon?: ReactElement;
   isActive?: boolean;
 }
 
 export const TipTapMenuItem = ({
   onClick,
   type,
-  iconName,
-  customIcon,
+  icon,
   isActive,
 }: TipTapMenuItemProps) => {
   const toltipId = useId();
@@ -35,7 +31,7 @@ export const TipTapMenuItem = ({
         onClick={onClick}
         onKeyPress={() => {}}
       >
-        {customIcon || <Icon type={iconName} height="1rem" color="black" />}
+        {icon}
       </div>
     </OverlayTrigger>
   );

package/src/tiptap-editor/TipTapMenu/extensions/EMOJIS.ts

@@ -65,7 +65,7 @@ const EMOTICON_REGEX = new RegExp(`(?:${emoticonsForRegex.join("|")})\\s$`);
 
 const EMOTICON_REGEX_PASTE = new RegExp(
   `(?:${emoticonsForRegex.join("|")})`,
-  "g"
+  "g",
 );
 
 /**

package/src/tiptap-editor/TipTapMenu/extensions/EmojiReplacer.ts

@@ -125,7 +125,7 @@ const EmojiReplacer = Node.create({
             range.to,
             this.type.create({
               emoji: match[0].trim(),
-            })
+            }),
           );
         },
       }),
@@ -139,7 +139,7 @@ const EmojiReplacer = Node.create({
             range.to,
             this.type.create({
               emoji: match[0].trim(),
-            })
+            }),
           );
         },
       }),

package/src/typeahead/Typeahead.stories.tsx

@@ -1,9 +1,11 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
 import { FormProvider, useForm } from "react-hook-form";
 import { Typeahead } from "./Typeahead";
 
-storiesOf("Typeahead", module).add("Typeahead", () => {
+export default {
+  title: "Typeahead",
+};
+
+export const _Typeahead = () => {
   const form = useForm();
   return (
     <FormProvider {...form}>
@@ -20,4 +22,4 @@ storiesOf("Typeahead", module).add("Typeahead", () => {
       />
     </FormProvider>
   );
-});
+};

package/src/typeahead/Typeahead.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import Select, { CSSObjectWithLabel } from "react-select";
 import { Controller, useFormContext } from "react-hook-form";
 

package/src/typeahead-helper/TypeaheadHelperComponent.tsx

@@ -1,5 +1,5 @@
 import Dropdown from "react-bootstrap/Dropdown";
-import React, {
+import {
   ChangeEvent,
   ReactNode,
   Ref,
@@ -38,7 +38,7 @@ export type TypeaheadItem = {
 };
 
 function TypeaheadHelperComponent<Item extends TypeaheadItem>(
-  props: Props<Item>
+  props: Props<Item>,
 ) {
   const {
     items,
@@ -69,10 +69,10 @@ function TypeaheadHelperComponent<Item extends TypeaheadItem>(
     disabled: !show,
   });
 
-  const debouncedSearch = React.useRef(
+  const debouncedSearch = useRef(
     debounce(async (query) => {
       await handleSearchCallback(query);
-    }, delay)
+    }, delay),
   ).current;
 
   // Cleanup a debounce
@@ -89,7 +89,7 @@ function TypeaheadHelperComponent<Item extends TypeaheadItem>(
         onSearch(query);
       }
     },
-    [onSearch]
+    [onSearch],
   );
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {

package/src/types/iframe.ts

@@ -1,5 +1,5 @@
 import { OrderItems } from "@licklist/plugins/dist/types/context/Iframe/orderItems";
 
 export type SetOrderFn = (
-  val: OrderItems | ((prevVar: OrderItems) => OrderItems)
+  val: OrderItems | ((prevVar: OrderItems) => OrderItems),
 ) => void;

package/src/typings.d.ts

@@ -37,5 +37,5 @@ interface WindowOrWorkerGlobalScope {
 }
 declare function structuredClone(
   value: any,
-  options?: StructuredSerializeOptions
+  options?: StructuredSerializeOptions,
 ): any;

package/src/venue-map-sets/card/VenueMapCard.stories.tsx

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

package/src/venue-map-sets/card/VenueMapSetCard.tsx

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

package/src/venue-map-sets/form/VenueMapSetForm.stories.tsx

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

package/src/venue-map-sets/form/VenueMapSetForm.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { Form, Col, Row, Button } from "react-bootstrap";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -49,7 +49,7 @@ export const VenueMapSetForm = ({
           <Col
             className={clsx(
               "pl-md-4 d-flex",
-              "justify-content-sm-center justify-content-md-start submit-form-buttons"
+              "justify-content-sm-center justify-content-md-start submit-form-buttons",
             )}
             md={6}
             sm={12}

package/src/venue-map-sets/form/components/NameControl.tsx

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

package/src/venue-map-sets/form/components/VenueMapControl.tsx

@@ -1,6 +1,6 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import clsx from "clsx";
-import Icon from "../../../static/Icon";
+import { FaEllipsisH, FaPlus } from "react-icons/fa";
 
 type MainControlProps = {
   title: string;
@@ -39,7 +39,7 @@ export const VenueMapControl = ({
       <button
         className={clsx(
           "venue-map-zone-item-wrapper w-100 mb-3",
-          isInvalid && "is-invalid"
+          isInvalid && "is-invalid",
         )}
         onClick={onClick}
         type="button"
@@ -47,12 +47,7 @@ export const VenueMapControl = ({
       >
         <div className="overflow-hidden name-wrapper w-100">
           {!showMenu && (
-            <Icon
-              type="plus"
-              height="1.25rem"
-              width="1.25rem"
-              className="rounded venue-map-zone-item-icon"
-            />
+            <FaPlus size={20} className="rounded venue-map-zone-item-icon" />
           )}
           <span className="name">{title || "Name"}</span>
         </div>
@@ -67,7 +62,7 @@ export const VenueMapControl = ({
             }}
             onKeyDown={(e) => e.stopPropagation()}
           >
-            <Icon type="ellipsis-h" color="#0E8CE2" height="1rem" />
+            <FaEllipsisH color="#0E8CE2" size={16} />
           </div>
         )}
       </button>