@licklist/design 0.66.11 → 0.66.12-dev.0

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 +1,2 @@
-export { EventVenueMap, EventVenueMapProps } from "./EventVenueMap";
+export { EventVenueMap } from "./EventVenueMap";
+export type { 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,10 +168,11 @@ 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) {
@@ -204,7 +205,7 @@ export const removeMapPointFromPoints = (
 export const calculatePointCoordinate = (
   pointNumber: number,
   imageScale: number,
-  imageOffset: number
+  imageOffset: number,
 ) => {
   return Math.round(pointNumber / imageScale + imageOffset);
 };
@@ -212,7 +213,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),
@@ -222,16 +223,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,12 +1,11 @@
-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 { Icon, Image as ImageComponent } from "../static";
+import { FaFile, FaFilePdf, FaTimes } from "react-icons/fa";
+import { Image as ImageComponent } from "../static";
 
 type Item = File | Image | Attachment | AttachmentMetadata;
 
@@ -66,7 +65,7 @@ export function PreviewItem({ disabled, item, onRemove }: PreviewItemProps) {
         }}
         disabled={disabled}
       >
-        <Icon type="times" height="1rem" />
+        <FaTimes />
       </button>
       {renderItemPreview(item)}
     </div>
@@ -130,11 +129,7 @@ const renderFileTypeIcon = (itemName?: string) => {
 
   return (
     <div className="preview-item__file">
-      {isPdfFile ? (
-        <Icon type="file-pdf" height="5rem" />
-      ) : (
-        <Icon type="file" height="5rem" />
-      )}
+      {isPdfFile ? <FaFilePdf size={80} /> : <FaFile size={80} />}
     </div>
   );
 };

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

@@ -1,5 +1,4 @@
 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 React, { useEffect, useState } from "react";
+import { 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 React, { ReactNode } from "react";
+import { 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,7 +1,4 @@
-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";
@@ -19,101 +16,108 @@ const providerNavItems = [
   { href: "/#", label: "followersAndProfiles" },
 ];
 
-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
-      `,
-    }
-  );
+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
+    `,
+  },
+};

package/src/header/Header.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { 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 React, { ReactNode } from "react";
+import { 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,5 +1,4 @@
 import { isEmpty } from "lodash";
-import React from "react";
 import { Form } from "react-bootstrap";
 
 export interface CompanySelectorProps {

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

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

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

@@ -1,5 +1,4 @@
 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 React, { useMemo } from "react";
+import { ReactElement, useEffect, useMemo, useRef, useState } 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?: React.ReactElement | React.ReactElement[];
+  children?: ReactElement | ReactElement[];
   title?: string;
 };
 
@@ -25,9 +25,7 @@ export type ExampleChildrenProps = {
 };
 
 export type ExampleProps = {
-  children?: (
-    props: ExampleChildrenProps
-  ) => React.ReactElement | React.ReactElement[];
+  children?: (props: ExampleChildrenProps) => ReactElement | ReactElement[];
 };
 
 export function ExampleContent({
@@ -36,14 +34,14 @@ export function ExampleContent({
   title,
   id,
 }: ExampleContentProps) {
-  const preRef = React.useRef<HTMLPreElement>(null);
-  const copyRef = React.useRef<HTMLButtonElement>(null);
+  const preRef = useRef<HTMLPreElement>(null);
+  const copyRef = useRef<HTMLButtonElement>(null);
   const copyTooltipId = useId();
   const copiedTooltipId = useId();
   const [isCopyTooltipActive, setIsCopyTooltipActive] =
-    React.useState<boolean>(false);
+    useState<boolean>(false);
   const [isCopiedTooltipActive, setIsCopiedTooltipActive] =
-    React.useState<boolean>(false);
+    useState<boolean>(false);
 
   // get text content to copy to clipboard
   const getTextToCopy = useMemo(() => {
@@ -77,7 +75,7 @@ export function ExampleContent({
 
   // when copied tooltip is active:
   // temporary show up copied tooltip and hide it after 3 seconds
-  React.useEffect(() => {
+  useEffect(() => {
     // return `undefined` is a proper way to stop this hook
     if (!isCopiedTooltipActive) return undefined;
 
@@ -155,9 +153,9 @@ export function ExampleToggle({ id, isActive, onToggle }: ExampleToggleProps) {
   );
 }
 
-export function Example({ children }: ExampleProps): React.ReactElement {
+export function Example({ children }: ExampleProps): ReactElement {
   const id = useId();
-  const [isActive, setIsActive] = React.useState<boolean>(false);
+  const [isActive, setIsActive] = 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 React, { ReactNode } from "react";
+import { 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 Icon from "../../static/Icon";
+import { FaQuestion } from "react-icons/fa";
 
 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 ?? <Icon type="question" style={{ width: "10px" }} />}
+          {icon ?? <FaQuestion size={10} />}
         </Button>
       )}
     </OverlayTrigger>

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

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

package/src/iframe/activity-card/ActivityCard.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { useState } from "react";
 import { Meta, Story } from "@storybook/react";
 import {
   ActivityCard,
@@ -13,7 +13,7 @@ export default {
 } as Meta;
 
 export const GridView: Story<ActivityCardProps> = (props) => {
-  const [isSelected, setIsSelected] = React.useState(false);
+  const [isSelected, setIsSelected] = useState(false);
 
   return (
     <ActivityCard
@@ -32,7 +32,7 @@ GridView.args = {
 };
 
 export const ListView: Story<ActivityCardProps> = (props) => {
-  const [isSelected, setIsSelected] = React.useState(false);
+  const [isSelected, setIsSelected] = useState(false);
 
   return (
     <ActivityCard

package/src/iframe/activity-card/ActivityCard.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import clsx from "clsx";
 
 export const LAYOUT_GRID = "grid";

package/src/iframe/back-button/BackButton.stories.tsx

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

package/src/iframe/back-button/BackButton.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 export interface IBackButtonProps {
   onClick: () => void;
 }

package/src/iframe/custom-fields/components/CustomDateField.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { useForm, FormProvider } from "react-hook-form";
 import { Form } from "react-bootstrap";
 import { Meta, Story } from "@storybook/react";
@@ -44,7 +44,7 @@ export const Default: Story<any> = () => {
       isRequired,
       value: "",
     }),
-    [isRequired]
+    [isRequired],
   );
 
   const onSubmit = (values: PersonFormValues) => {