@licklist/design 0.66.12-dev.2 → 0.66.13

package/src/events/event-venue-map/hooks/useImage.tsx

@@ -4,7 +4,7 @@ import { ImageAttributeProps } from "../types";
 
 export const useImage = (
   url: string,
-  { width, height }: { width: number; height: number },
+  { width, height }: { width: number; height: number }
 ): [undefined | HTMLImageElement, ImageAttributeProps] => {
   const imageRef = useRef<HTMLImageElement | undefined>(undefined);
   const [imageAttributes, setImageAttributes] = useState({
@@ -13,7 +13,7 @@ export const useImage = (
   });
 
   const setImageEventHandler = function setImageEventHandler(
-    this: HTMLImageElement,
+    this: HTMLImageElement
   ) {
     imageRef.current = this;
 

package/src/events/event-venue-map/hooks/useStageActions.ts

@@ -81,7 +81,7 @@ export const useStageActions = ({
 
       dragCanvas({ deltaX, deltaY, layer });
     },
-    [stageRef, imageRef, dragCanvas],
+    [stageRef, imageRef, dragCanvas]
   );
 
   const onClick = useCallback(
@@ -124,7 +124,7 @@ export const useStageActions = ({
       ]);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [layerRef, imageRef, imageScale, editMode],
+    [layerRef, imageRef, imageScale, editMode]
   );
 
   const changeCursorType = useCallback(
@@ -134,7 +134,7 @@ export const useStageActions = ({
       // eslint-disable-next-line no-param-reassign
       stageRef.container().style.cursor = type;
     },
-    [stageRef],
+    [stageRef]
   );
 
   return {

package/src/events/event-venue-map/hooks/useZoom.ts

@@ -24,10 +24,10 @@ export const useZoom = ({
 
       const mousePointTo = {
         x: Math.round(
-          twoDigitsRound(point.x / oldScale) - twoDigitsRound(x / oldScale),
+          twoDigitsRound(point.x / oldScale) - twoDigitsRound(x / oldScale)
         ),
         y: Math.round(
-          twoDigitsRound(point.y / oldScale) - twoDigitsRound(y / oldScale),
+          twoDigitsRound(point.y / oldScale) - twoDigitsRound(y / oldScale)
         ),
       };
 
@@ -36,11 +36,11 @@ export const useZoom = ({
         : twoDigitsRound(oldScale / SCALE_BY_FACTOR);
 
       const nextX = Math.round(
-        twoDigitsRound((point.x / nextScale - mousePointTo.x) * nextScale),
+        twoDigitsRound((point.x / nextScale - mousePointTo.x) * nextScale)
       );
 
       const nextY = Math.round(
-        twoDigitsRound((point.y / nextScale - mousePointTo.y) * nextScale),
+        twoDigitsRound((point.y / nextScale - mousePointTo.y) * nextScale)
       );
 
       setStage({
@@ -50,7 +50,7 @@ export const useZoom = ({
       });
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [stageRef, imageRef],
+    [stageRef, imageRef]
   );
 
   const onZoom = useCallback(
@@ -61,7 +61,7 @@ export const useZoom = ({
 
       scaleRelativeToPoint({ x: width / 2, y: height / 2 }, increaseZoom);
     },
-    [stageRef, scaleRelativeToPoint],
+    [stageRef, scaleRelativeToPoint]
   );
 
   const onZoomIn = useCallback(() => {

package/src/events/event-venue-map/index.ts

@@ -1,2 +1 @@
-export { EventVenueMap } from "./EventVenueMap";
-export type { EventVenueMapProps } from "./EventVenueMap";
+export { EventVenueMap, EventVenueMapProps } from "./EventVenueMap";

package/src/events/event-venue-map/utils/index.ts

@@ -81,21 +81,21 @@ export const calculateVerticalScrollParameters = ({
   const layerHeightWithoutMargins = height - SCROLLBAR_MARGINS;
 
   const scrollableElementArea = twoDigitsRound(
-    totalLayerHeight - layerHeightWithoutMargins,
+    totalLayerHeight - layerHeightWithoutMargins
   );
 
   const scrollbarRatio = twoDigitsRound(
-    layerHeightWithoutMargins / totalLayerHeight,
+    layerHeightWithoutMargins / totalLayerHeight
   );
 
   const calculatedScrollbarHeight = twoDigitsRound(
-    layerHeightWithoutMargins * scrollbarRatio,
+    layerHeightWithoutMargins * scrollbarRatio
   );
 
   const availableHeight = twoDigitsRound(
     layerHeightWithoutMargins -
       calculatedScrollbarHeight +
-      SCROLLBAR_MARGINS / 2,
+      SCROLLBAR_MARGINS / 2
   );
   const top = twoDigitsRound((y / -scrollableElementArea) * availableHeight);
 
@@ -114,19 +114,19 @@ export const calculateHorizontalScrollParameters = ({
   const layerWidthWithoutMargins = width - SCROLLBAR_MARGINS;
 
   const scrollableElementArea = twoDigitsRound(
-    totalLayerWidth - layerWidthWithoutMargins,
+    totalLayerWidth - layerWidthWithoutMargins
   );
 
   const scrollbarRatio = twoDigitsRound(
-    layerWidthWithoutMargins / totalLayerWidth,
+    layerWidthWithoutMargins / totalLayerWidth
   );
 
   const calculatedScrollbarWidth = twoDigitsRound(
-    layerWidthWithoutMargins * scrollbarRatio,
+    layerWidthWithoutMargins * scrollbarRatio
   );
 
   const availableWidth = twoDigitsRound(
-    layerWidthWithoutMargins - calculatedScrollbarWidth,
+    layerWidthWithoutMargins - calculatedScrollbarWidth
   );
   const left = twoDigitsRound((x / -scrollableElementArea) * availableWidth);
 
@@ -139,7 +139,7 @@ export const calculateHorizontalScrollParameters = ({
 
 export const calculateTextParameters = (
   text: string,
-  fontSize: number = FONT_SIZE,
+  fontSize: number = FONT_SIZE
 ) => {
   const ID = "canvas-helper";
 
@@ -168,11 +168,10 @@ export const calculateTextParameters = (
 export const removeMapPointFromPoints = (
   mapPoints: Partial<Point>[],
   id?: number,
-  localId?: string | number,
+  localId?: string | number
 ) => {
   const point = mapPoints.find(
-    (point) =>
-      (id && point.id === id) || (localId && point.localId === localId),
+    (point) => (id && point.id === id) || (localId && point.localId === localId)
   );
 
   if (!point) {
@@ -205,7 +204,7 @@ export const removeMapPointFromPoints = (
 export const calculatePointCoordinate = (
   pointNumber: number,
   imageScale: number,
-  imageOffset: number,
+  imageOffset: number
 ) => {
   return Math.round(pointNumber / imageScale + imageOffset);
 };
@@ -213,7 +212,7 @@ export const calculatePointCoordinate = (
 export const calculatePointsCoordinates = (
   x: number,
   y: number,
-  params: Omit<ImageOffset, "scale">,
+  params: Omit<ImageOffset, "scale">
 ) => {
   return [
     calculatePointCoordinate(x, params.imageScale, params.imageOffsetX),
@@ -223,16 +222,16 @@ export const calculatePointsCoordinates = (
 
 export const calculateDropdownOffsets = (
   point: Pick<DefaultObjectParameters, "x" | "y">,
-  stage: Pick<DefaultObjectParameters, "x" | "y"> & Pick<ImageOffset, "scale">,
+  stage: Pick<DefaultObjectParameters, "x" | "y"> & Pick<ImageOffset, "scale">
 ) => {
   return {
     left: Math.round(
       point.x * stage.scale +
         stage.x +
-        (stage.scale >= 1 ? -1 / 3 : -1 / 4) * BORDER_WIDTH * stage.scale,
+        (stage.scale >= 1 ? -1 / 3 : -1 / 4) * BORDER_WIDTH * stage.scale
     ),
     top: Math.round(
-      point.y * stage.scale + stage.y + 4 * BORDER_WIDTH * stage.scale,
+      point.y * stage.scale + stage.y + 4 * BORDER_WIDTH * stage.scale
     ),
   };
 };

package/src/file-upload/FilePreview.tsx

@@ -1,11 +1,12 @@
+import React from "react";
 import {
   Image,
   IMAGE_TYPE_MAP,
 } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
 import { Attachment } from "@licklist/core/dist/DataMapper/Notification/AttachmentDataMapper";
 import { AttachmentMetadata } from "@licklist/core/dist/DataMapper/Notification/AttachmentMetadataDataMapper";
-import { FaFile, FaFilePdf, FaTimes } from "react-icons/fa";
-import { Image as ImageComponent } from "../static";
+
+import { Icon, Image as ImageComponent } from "../static";
 
 type Item = File | Image | Attachment | AttachmentMetadata;
 
@@ -65,7 +66,7 @@ export function PreviewItem({ disabled, item, onRemove }: PreviewItemProps) {
         }}
         disabled={disabled}
       >
-        <FaTimes />
+        <Icon type="times" height="1rem" />
       </button>
       {renderItemPreview(item)}
     </div>
@@ -129,7 +130,11 @@ const renderFileTypeIcon = (itemName?: string) => {
 
   return (
     <div className="preview-item__file">
-      {isPdfFile ? <FaFilePdf size={80} /> : <FaFile size={80} />}
+      {isPdfFile ? (
+        <Icon type="file-pdf" height="5rem" />
+      ) : (
+        <Icon type="file" height="5rem" />
+      )}
     </div>
   );
 };

package/src/file-upload/FileUpload.stories.tsx

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

package/src/file-upload/FileUpload.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-return-assign */
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import clsx from "clsx";
 import useNotification from "@licklist/plugins/dist/context/app/hooks/useNotification";
 import { Image } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
@@ -59,7 +59,7 @@ export function FileUpload({
     "licklist-file-upload-label",
     isLoading && "licklist-file-upload-label--loading",
     className,
-    isDragged && "drag-over",
+    isDragged && "drag-over"
   );
 
   useEffect(() => {
@@ -158,7 +158,7 @@ export const useFileUpload = ({
 
   const uploadFile = (file: File) => {
     const sameFile = files?.find(
-      (uploadedFile) => uploadedFile.name === file.name,
+      (uploadedFile) => uploadedFile.name === file.name
     );
     const isFileAlreadyUploaded = sameFile !== undefined;
 
@@ -176,7 +176,7 @@ export const useFileUpload = ({
     filesArray.forEach((file) => {
       const fileExtension = file.name.split(".").pop();
       const extensionIndex = allowedExtensions.indexOf(
-        fileExtension.toLowerCase(),
+        fileExtension.toLowerCase()
       );
       const isExtensionValid = extensionIndex !== -1;
 
@@ -194,7 +194,7 @@ export const useFileUpload = ({
   const handleFileRemove = (
     id: string | number,
     path?: string,
-    type?: number,
+    type?: number
   ) => {
     if (files !== null) {
       setFiles((prevFiles) => prevFiles.filter((file) => file.name !== id));

package/src/header/BookeditHeader.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { ReactComponent as LogoSvg } from "../assets/logo/bookedit.svg";
 import Logo from "../logo/Logo";
 import Header from "./Header";

package/src/header/Header.stories.tsx

@@ -1,4 +1,7 @@
+import { storiesOf } from "@storybook/react";
+import React from "react";
 import Nav from "react-bootstrap/Nav";
+import Icon from "../static/Icon";
 import StyledButton from "../static/StyledButton";
 import BookeditHeader from "./BookeditHeader";
 import CompanySelector from "./elements/CompanySelector";
@@ -16,108 +19,101 @@ const providerNavItems = [
   { href: "/#", label: "followersAndProfiles" },
 ];
 
-export default {
-  title: "Header",
-};
-
-export const Licklist = () => (
-  <>
-    <LicklistHeader
-      leftNavs={
-        <>
-          <ul className="navbar-nav bd-navbar-nav flex-row navbar-nav-primary">
-            <li className="nav-item px-3 px-sm-3 px-lg-4">
-              <Nav.Link href="#">
-                <FaSearch />
-              </Nav.Link>
-            </li>
-            <li className="nav-item px-3 px-sm-4 d-none d-sm-inline">
-              <Nav.Link href="#" className="nav-link-light-grey">
-                Explore
-              </Nav.Link>
-            </li>
-            <li className="nav-item px-3 px-sm-4 d-none d-sm-inline">
-              <Nav.Link href="#" className="">
-                Galleries
-              </Nav.Link>
-            </li>
-          </ul>
-        </>
-      }
-    >
-      <StyledButton size="sm" className="rounded-pill mr-2">
-        Login
-      </StyledButton>
-      <StyledButton
-        size="sm"
-        className="rounded-pill"
-        variant="outline-secondary"
-      >
-        Sign up
-      </StyledButton>
-    </LicklistHeader>
-  </>
-);
-
-Licklist.story = {
-  parameters: {
-    info: `
-      Licklist header component
-    `,
-  },
-};
-
-export const Bookedit = () => (
-  <>
-    <BookeditHeader navItems={providerNavItems}>
-      <StyledButton size="sm" className="rounded-pill mr-2">
-        Login
-      </StyledButton>
-      <StyledButton
-        size="sm"
-        className="rounded-pill"
-        variant="outline-secondary"
-      >
-        Sign up
-      </StyledButton>
-    </BookeditHeader>
-  </>
-);
-
-Bookedit.story = {
-  parameters: {
-    info: `
-      Bookedit header component
-    `,
-  },
-};
-
-export const BookeditWithElements = () => (
-  <>
-    <BookeditHeader
-      leftNavs={
-        <div className="header-elements">
-          <CompanySelector
-            value={1}
-            list={[
-              { id: 1, title: "Company #1" },
-              { id: 2, title: "Company #2" },
-            ]}
-            onChange={() => null}
-          />
-        </div>
-      }
-      navItems={providerNavItems}
-    />
-  </>
-);
-
-BookeditWithElements.story = {
-  name: "Bookedit with elements",
-
-  parameters: {
-    info: `
-      Bookedit header component
-    `,
-  },
-};
+storiesOf("Header", module)
+  .add(
+    "Licklist",
+    () => (
+      <>
+        <LicklistHeader
+          leftNavs={
+            <>
+              <ul className="navbar-nav bd-navbar-nav flex-row navbar-nav-primary">
+                <li className="nav-item px-3 px-sm-3 px-lg-4">
+                  <Nav.Link href="#">
+                    <Icon type="search" />
+                  </Nav.Link>
+                </li>
+                <li className="nav-item px-3 px-sm-4 d-none d-sm-inline">
+                  <Nav.Link href="#" className="nav-link-light-grey">
+                    Explore
+                  </Nav.Link>
+                </li>
+                <li className="nav-item px-3 px-sm-4 d-none d-sm-inline">
+                  <Nav.Link href="#" className="">
+                    Galleries
+                  </Nav.Link>
+                </li>
+              </ul>
+            </>
+          }
+        >
+          <StyledButton size="sm" className="rounded-pill mr-2">
+            Login
+          </StyledButton>
+          <StyledButton
+            size="sm"
+            className="rounded-pill"
+            variant="outline-secondary"
+          >
+            Sign up
+          </StyledButton>
+        </LicklistHeader>
+      </>
+    ),
+    {
+      info: `
+        Licklist header component
+      `,
+    }
+  )
+  .add(
+    "Bookedit",
+    () => (
+      <>
+        <BookeditHeader navItems={providerNavItems}>
+          <StyledButton size="sm" className="rounded-pill mr-2">
+            Login
+          </StyledButton>
+          <StyledButton
+            size="sm"
+            className="rounded-pill"
+            variant="outline-secondary"
+          >
+            Sign up
+          </StyledButton>
+        </BookeditHeader>
+      </>
+    ),
+    {
+      info: `
+        Bookedit header component
+      `,
+    }
+  )
+  .add(
+    "Bookedit with elements",
+    () => (
+      <>
+        <BookeditHeader
+          leftNavs={
+            <div className="header-elements">
+              <CompanySelector
+                value={1}
+                list={[
+                  { id: 1, title: "Company #1" },
+                  { id: 2, title: "Company #2" },
+                ]}
+                onChange={() => null}
+              />
+            </div>
+          }
+          navItems={providerNavItems}
+        />
+      </>
+    ),
+    {
+      info: `
+        Bookedit header component
+      `,
+    }
+  );

package/src/header/Header.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import Nav from "react-bootstrap/Nav";
 import Navbar from "react-bootstrap/Navbar";
 

package/src/header/LicklistHeader.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { ReactComponent as LogoSmSvg } from "../assets/logo/licklist.sm.svg";
 import { ReactComponent as LogoSvg } from "../assets/logo/licklist.svg";
 import Logo from "../logo/Logo";

package/src/header/elements/CompanySelector.tsx

@@ -1,4 +1,5 @@
 import { isEmpty } from "lodash";
+import React from "react";
 import { Form } from "react-bootstrap";
 
 export interface CompanySelectorProps {

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

@@ -1,4 +1,5 @@
 import { Meta, Story } from "@storybook/react";
+import React from "react";
 import {
   CompanySelectorProps,
   default as CompanySelectorComponent,

package/src/help/example/Example.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, Story } from "@storybook/react";
+import React from "react";
 import {
   Example,
   ExampleContent,

package/src/help/example/Example.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useId } from "@react-aria/utils";
-import { ReactElement, useEffect, useMemo, useRef, useState } from "react";
+import React, { useMemo } from "react";
 import Button from "react-bootstrap/Button";
 import Collapse from "react-bootstrap/Collapse";
 import Overlay from "react-bootstrap/Overlay";
@@ -9,7 +9,7 @@ import Tooltip from "react-bootstrap/Tooltip";
 export type ExampleContentProps = {
   id: string;
   isActive: boolean;
-  children?: ReactElement | ReactElement[];
+  children?: React.ReactElement | React.ReactElement[];
   title?: string;
 };
 
@@ -25,7 +25,9 @@ export type ExampleChildrenProps = {
 };
 
 export type ExampleProps = {
-  children?: (props: ExampleChildrenProps) => ReactElement | ReactElement[];
+  children?: (
+    props: ExampleChildrenProps
+  ) => React.ReactElement | React.ReactElement[];
 };
 
 export function ExampleContent({
@@ -34,14 +36,14 @@ export function ExampleContent({
   title,
   id,
 }: ExampleContentProps) {
-  const preRef = useRef<HTMLPreElement>(null);
-  const copyRef = useRef<HTMLButtonElement>(null);
+  const preRef = React.useRef<HTMLPreElement>(null);
+  const copyRef = React.useRef<HTMLButtonElement>(null);
   const copyTooltipId = useId();
   const copiedTooltipId = useId();
   const [isCopyTooltipActive, setIsCopyTooltipActive] =
-    useState<boolean>(false);
+    React.useState<boolean>(false);
   const [isCopiedTooltipActive, setIsCopiedTooltipActive] =
-    useState<boolean>(false);
+    React.useState<boolean>(false);
 
   // get text content to copy to clipboard
   const getTextToCopy = useMemo(() => {
@@ -75,7 +77,7 @@ export function ExampleContent({
 
   // when copied tooltip is active:
   // temporary show up copied tooltip and hide it after 3 seconds
-  useEffect(() => {
+  React.useEffect(() => {
     // return `undefined` is a proper way to stop this hook
     if (!isCopiedTooltipActive) return undefined;
 
@@ -153,9 +155,9 @@ export function ExampleToggle({ id, isActive, onToggle }: ExampleToggleProps) {
   );
 }
 
-export function Example({ children }: ExampleProps): ReactElement {
+export function Example({ children }: ExampleProps): React.ReactElement {
   const id = useId();
-  const [isActive, setIsActive] = useState<boolean>(false);
+  const [isActive, setIsActive] = React.useState<boolean>(false);
 
   const onToggleHandler = () => {
     setIsActive((prevIsActive) => !prevIsActive);

package/src/help/popover/HelpPopover.tsx

@@ -1,11 +1,11 @@
 import { useId } from "@react-aria/utils";
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import Button from "react-bootstrap/Button";
 import OverlayTrigger from "react-bootstrap/OverlayTrigger";
 import Popover from "react-bootstrap/Popover";
 import { ButtonVariant } from "react-bootstrap/types";
 import clsx from "clsx";
-import { FaQuestion } from "react-icons/fa";
+import Icon from "../../static/Icon";
 
 export type HelpPopoverProps = {
   children?: React.ReactElement | React.ReactElement[];
@@ -47,7 +47,7 @@ export function HelpPopover({
           {...triggerHandler}
           className="btn-icon-popover rounded-circle px-2 py-1 d-inline-flex align-items-center"
         >
-          {icon ?? <FaQuestion size={10} />}
+          {icon ?? <Icon type="question" style={{ width: "10px" }} />}
         </Button>
       )}
     </OverlayTrigger>

package/src/help/popover/Popover.stories.tsx

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