@fibery/ui-kit 1.38.0 → 1.38.1

package/src/images-gallery-2/images-gallery-2.tsx

@@ -0,0 +1,442 @@
+import PhotoSwipeLightbox, {type PhotoSwipeEventsMap} from "photoswipe/lightbox";
+import "photoswipe/style.css";
+import {
+  ImagesGalleryMethodsProvider,
+  ImagesGalleryRegistryProvider,
+  ImagesGalleryStateProvider,
+} from "../images-gallery/images-gallery";
+import {PropsWithChildren, useCallback, useEffect, useMemo, useReducer, useRef, useState} from "react";
+import {css} from "@linaria/core";
+import {createRoot} from "react-dom/client";
+import {space, themeVars} from "../design-system";
+import {useToast} from "../toast/toast-provider";
+import {ToastQueue} from "../toast/toast-queue";
+import {useThemeMode} from "../theme-provider";
+import {ThemeMode} from "../theme-settings";
+import {SlideButtons} from "./slide-buttons";
+
+type Registry = Map<
+  string,
+  {
+    src: string;
+    type: "image" | "video" | "iframe";
+    actions?: React.ReactNode;
+    zoomed: boolean;
+    setZoomed: (zoomed: boolean) => void;
+  }
+>;
+
+type Methods = {
+  setVisible: (visible: boolean) => void;
+  setActivated: (activated: boolean) => void;
+  update: () => void;
+  nextImage: () => void;
+  prevImage: () => void;
+};
+
+const galleryMainClass = css`
+  z-index: 1000;
+  & .pswp__button--arrow--prev {
+    left: ${space.s20}px;
+    height: ${space.s28}px;
+    width: ${space.s28}px;
+    margin-top: -${space.s14}px;
+  }
+  & .pswp__button--arrow--next {
+    right: ${space.s20}px;
+    height: ${space.s28}px;
+    width: ${space.s28}px;
+    margin-top: -${space.s14}px;
+  }
+
+  & .pswp__button--zoom {
+    top: ${space.s20}px;
+    height: ${space.s28}px;
+    width: ${space.s28}px;
+  }
+
+  & .pswp__counter {
+    margin-top: ${space.s20}px;
+    margin-inline-start: ${space.s24}px;
+  }
+
+  & .pswp__video-container {
+    padding: ${space.s60}px;
+  }
+
+  & .pswp__video-container video {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+    background-color: black;
+  }
+
+  & .pswp__iframe-container {
+    padding: 0 ${space.s60}px 0 ${space.s60}px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  & .pswp__iframe-container iframe {
+    width: 100%;
+    height: 100%;
+    max-width: min(822px, calc(100vw - 40px));
+    object-fit: contain;
+    display: block;
+    color: ${themeVars.textColor};
+    background-color: ${themeVars.colorBgPopup};
+    border: none;
+  }
+`;
+
+export function ImagesGalleryProvider2({children}: PropsWithChildren) {
+  const [imagesRegistry] = useState<Registry>(() => new Map());
+  const [galleryState, dispatchState] = useReducer(imagesGalleryReducer, [], initialState);
+
+  const lightbox = useRef<PhotoSwipeLightbox | null>(null);
+  const markAllNotZoomed = useCallback(() => {
+    for (const node of imagesRegistry.values()) {
+      if (node.zoomed) {
+        node.setZoomed(false);
+      }
+    }
+  }, [imagesRegistry]);
+
+  useEffect(() => {
+    return () => {
+      lightbox.current?.destroy();
+      lightbox.current = null;
+      markAllNotZoomed();
+    };
+  }, [markAllNotZoomed]);
+
+  const methods: Methods = useMemo(() => {
+    return {
+      setVisible: () => {},
+      setActivated: (activated: boolean) => {
+        dispatchState({type: "set-activated", payload: activated});
+      },
+      update: () => {
+        dispatchState({type: "inc"});
+      },
+      nextImage: () => {
+        lightbox.current?.pswp?.next();
+      },
+      prevImage: () => {
+        lightbox.current?.pswp?.prev();
+      },
+    };
+  }, []);
+
+  const toast = useToast();
+  const themeMode = useThemeMode();
+
+  useEffect(() => {
+    if (galleryState.activated) {
+      const value = initGallery(imagesRegistry, toast, themeMode);
+      value.on("close", () => {
+        dispatchState({type: "set-activated", payload: false});
+        markAllNotZoomed();
+        value.destroy();
+      });
+
+      lightbox.current = value;
+    }
+
+    return () => {
+      lightbox.current?.destroy();
+      lightbox.current = null;
+    };
+  }, [galleryState.activated, imagesRegistry, markAllNotZoomed, toast, themeMode]);
+
+  return (
+    <ImagesGalleryRegistryProvider value={imagesRegistry}>
+      <ImagesGalleryMethodsProvider value={methods}>
+        <ImagesGalleryStateProvider value={galleryState}>{children}</ImagesGalleryStateProvider>
+      </ImagesGalleryMethodsProvider>
+    </ImagesGalleryRegistryProvider>
+  );
+}
+
+type State = {version: "1" | "2"; visible: boolean; activated: boolean; _inc: number};
+type Actions = {type: "set-visible"; payload: boolean} | {type: "set-activated"; payload: boolean} | {type: "inc"};
+
+function initialState(): State {
+  return {version: "2", visible: false, activated: false, _inc: 0};
+}
+
+function imagesGalleryReducer(state: State, action: Actions) {
+  if (action.type === "set-visible") {
+    return {...state, visible: action.payload};
+  }
+  if (action.type === "set-activated") {
+    return {...state, activated: action.payload};
+  }
+  if (action.type === "inc") {
+    return {...state, _inc: state._inc + 1};
+  }
+  return state;
+}
+
+type GalleryEntry = {
+  type: string;
+  src: string;
+  zoomed: boolean;
+  setZoomed: (value: boolean) => void;
+  state: "none" | "loading" | "error" | "loaded";
+  width?: number;
+  height?: number;
+};
+
+function initGallery(imagesRegistry: Registry, toastQueue: ToastQueue, themeMode: ThemeMode) {
+  const items = [...imagesRegistry.values()];
+  const dataSource: GalleryEntry[] = items.map((item) => ({
+    ...item,
+    state: "none",
+  }));
+
+  const zoomedIndex = dataSource.findIndex((item) => item.zoomed);
+
+  const lightbox = new PhotoSwipeLightbox({
+    dataSource,
+    mainClass: galleryMainClass,
+    pswpModule: () => import("photoswipe"),
+    preloaderDelay: 1,
+    arrowPrev: false,
+    arrowNext: false,
+    close: false,
+    zoom: false,
+    loop: false,
+  });
+
+  lightbox.addFilter("numItems", (_numItems) => {
+    return dataSource.length;
+  });
+
+  lightbox.addFilter("itemData", (_itemData, index) => {
+    const item = dataSource[index];
+
+    if (item.type === "video" || item.type === "iframe") {
+      return item;
+    }
+
+    if (item.state === "loaded" || item.state === "error") {
+      return item;
+    }
+
+    return {};
+  });
+
+  lightbox.addFilter("isContentLoading", (_isContentLoading, content) => {
+    const item = dataSource[content.index];
+    if (item.type === "video" || item.type === "iframe") {
+      return false;
+    }
+    const complete = item.state === "loaded" || item.state === "error";
+    return !complete;
+  });
+
+  lightbox.addFilter("useContentPlaceholder", () => false);
+
+  lightbox.init();
+
+  lightbox.on("contentActivate", (e) => {
+    dataSource[e.content.index].setZoomed(true);
+    lightbox.pswp?.element?.focus();
+  });
+
+  lightbox.on("contentDeactivate", (e) => {
+    dataSource[e.content.index].setZoomed(false);
+    e.content.element?.querySelector("video")?.pause();
+  });
+
+  function refreshSlide(index: number) {
+    lightbox.pswp?.refreshSlideContent(index);
+    if (lightbox.pswp?.currIndex === index) {
+      lightbox.pswp?.updateSize(true);
+    }
+  }
+
+  const contentAppendTimeouts = [] as ReturnType<typeof setTimeout>[];
+  lightbox.on("contentAppend", (e) => {
+    // sometimes lightbox's slide is loaded with stale (empty) data
+    if (e.content.data !== dataSource[e.content.index]) {
+      contentAppendTimeouts.push(
+        setTimeout(() => {
+          refreshSlide(e.content.index);
+        }, 0)
+      );
+    }
+  });
+
+  lightbox.on("contentRemove", (e) => {
+    const item = dataSource[e.content.index];
+
+    if (item.type === "video" || item.type === "iframe") {
+      item.state = "none";
+    }
+  });
+
+  lightbox.on("contentLoad", (e) => {
+    const item = dataSource[e.content.index];
+
+    if (item.state === "loading") {
+      return;
+    }
+
+    if (item.state === "none") {
+      e.preventDefault();
+      const eventArgs = {
+        e,
+        item,
+        refreshSlide,
+        getPswp: () => lightbox.pswp,
+      };
+
+      switch (item.type) {
+        case "image": {
+          onImageContentLoad(eventArgs);
+          break;
+        }
+        case "video": {
+          onVideoContentLoad(eventArgs);
+          break;
+        }
+        case "iframe": {
+          onIframeContentLoad(eventArgs);
+          break;
+        }
+        default: {
+          throw new Error(`unexpected slide type: ${item.type}`);
+        }
+      }
+    } else if (item.state === "error") {
+      e.preventDefault();
+      e.content.onError();
+    }
+  });
+
+  const HIDE_UI_TIMEOUT_MS = 3000;
+  let hideTimeout: ReturnType<typeof setTimeout>;
+  let isHidden = false;
+
+  function hideUI() {
+    lightbox.pswp?.element?.classList.remove("pswp--ui-visible");
+    lightbox.pswp?.element?.classList.add("pswp--hide-cursor");
+    isHidden = true;
+  }
+
+  function showUI() {
+    if (isHidden) {
+      lightbox.pswp?.element?.classList.add("pswp--ui-visible");
+      lightbox.pswp?.element?.classList.remove("pswp--hide-cursor");
+      isHidden = false;
+    }
+    clearTimeout(hideTimeout);
+    hideTimeout = setTimeout(hideUI, HIDE_UI_TIMEOUT_MS);
+  }
+
+  lightbox.on("afterInit", () => {
+    const pswp = lightbox.pswp;
+
+    if (!pswp) {
+      return;
+    }
+
+    pswp.element?.addEventListener("mousemove", showUI);
+    pswp.element?.addEventListener("touchstart", showUI);
+
+    hideTimeout = setTimeout(hideUI, HIDE_UI_TIMEOUT_MS);
+  });
+
+  lightbox.on("uiRegister", () => {
+    lightbox.pswp?.ui?.registerElement({
+      name: "custom-nav",
+      order: 8,
+      isButton: false,
+      appendTo: "wrapper",
+      onInit: (el, pswp) => {
+        createRoot(el).render(<SlideButtons items={items} pswp={pswp} toastQueue={toastQueue} themeMode={themeMode} />);
+      },
+    });
+  });
+
+  lightbox.on("destroy", () => {
+    contentAppendTimeouts.forEach((timeoutId) => {
+      clearTimeout(timeoutId);
+    });
+  });
+
+  lightbox.loadAndOpen(zoomedIndex === -1 ? 0 : zoomedIndex);
+
+  return lightbox;
+}
+
+type ContentLoadArg = {
+  e: PhotoSwipeEventsMap["contentLoad"];
+  item: GalleryEntry;
+  refreshSlide: (index: number) => void;
+  getPswp: () => PhotoSwipeLightbox["pswp"];
+};
+
+function onImageContentLoad({e, item, refreshSlide}: ContentLoadArg) {
+  item.state = "loading";
+  const onLoad = () => {
+    item.state = "loaded";
+    item.width = img.naturalWidth;
+    item.height = img.naturalHeight;
+
+    refreshSlide(e.content.index);
+    e.content.onLoaded();
+  };
+
+  const img = new Image();
+  img.src = item.src;
+  if (img.complete) {
+    onLoad();
+  }
+  img.onload = () => onLoad();
+  img.onerror = () => {
+    item.state = "error";
+    refreshSlide(e.content.index);
+    e.content.onError();
+  };
+}
+
+function onVideoContentLoad({e, item, refreshSlide, getPswp}: ContentLoadArg) {
+  item.state = "loaded";
+
+  e.content.element = document.createElement("div");
+  e.content.element.className = "pswp__video-container";
+  e.content.element.onclick = () => {
+    getPswp()?.close();
+  };
+
+  const video = document.createElement("video");
+  video.controls = true;
+  video.src = item.src;
+  video.onerror = () => {
+    item.state = "error";
+    refreshSlide(e.content.index);
+    e.content.onError();
+  };
+  e.content.element.appendChild(video);
+}
+
+function onIframeContentLoad({e, item, getPswp}: ContentLoadArg) {
+  item.state = "loaded";
+
+  e.content.element = document.createElement("div");
+  e.content.element.className = "pswp__iframe-container";
+
+  e.content.element.onclick = () => {
+    getPswp()?.close();
+  };
+
+  const iframe = document.createElement("iframe");
+  iframe.src = item.src;
+  iframe.setAttribute("allowfullscreen", "");
+  e.content.element.appendChild(iframe);
+}

package/src/images-gallery-2/slide-buttons.tsx

@@ -0,0 +1,230 @@
+import {PhotoSwipe} from "photoswipe/lightbox";
+import {useEffect, useMemo, useState} from "react";
+import {css} from "@linaria/core";
+import {IconButton} from "../button/icon-button";
+import Back from "../icons/react/Back";
+import ArrowForward from "../icons/react/ArrowForward";
+import LoupeZoomIn from "../icons/react/LoupeZoomIn";
+import LoupeZoomOut from "../icons/react/LoupeZoomOut";
+import RicheditorOpenLink from "../icons/react/RicheditorOpenLink";
+import Link from "../icons/react/Link";
+import Close from "../icons/react/Close";
+import {colors, createInlineTheme, getThemeColors, space} from "../design-system";
+import {Button} from "../button/button";
+import {copyToClipboard} from "../copy-to-clipboard";
+import {ToastProvider, useToast} from "../toast/toast-provider";
+import {ToastQueue} from "../toast/toast-queue";
+import {ActionsMenu} from "../actions-menu";
+import {ActionsButtonCompact} from "../button/actions-button-compact";
+import {ThemeProvider} from "../theme-provider";
+import {ThemeMode} from "../theme-settings";
+
+const barClassName = css`
+  position: absolute;
+  top: ${space.s20}px;
+  right: ${space.s20}px;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end; /* align content to the right */
+  gap: ${space.s8}px; /* space between children */
+`;
+
+type SlideState = {
+  currIndex: number;
+  numItems: number;
+  src: string;
+  actions?: React.ReactNode;
+};
+
+export function SlideButtons({
+  pswp,
+  toastQueue,
+  themeMode,
+  items,
+}: {
+  pswp: PhotoSwipe;
+  toastQueue: ToastQueue;
+  themeMode: ThemeMode;
+  items: {
+    src: string;
+    actions?: React.ReactNode;
+  }[];
+}) {
+  const [slideState, setSliceState] = useState<SlideState>(getSlideData(pswp, items));
+  useEffect(() => {
+    const handler = () => {
+      setSliceState(getSlideData(pswp, items));
+    };
+    pswp.on("slideActivate", handler);
+
+    return () => {
+      pswp.off("slideActivate", handler);
+    };
+  }, [items, pswp]);
+
+  return (
+    <ToastProvider toastQueue={toastQueue}>
+      <div className={barClassName}>
+        <CopyURLButton pswp={pswp} />
+        <ZoomButton pswp={pswp} />
+        {slideState.actions ? (
+          <SlideActionsMenu actions={slideState.actions} themeMode={themeMode} />
+        ) : (
+          <IconButton
+            size="medium"
+            color="neutral"
+            variant="solid"
+            onClick={() => window.open(slideState.src, "_blank")}
+          >
+            <RicheditorOpenLink />
+          </IconButton>
+        )}
+
+        <IconButton onClick={() => pswp.close()} size="medium" color="neutral" variant="solid">
+          <Close />
+        </IconButton>
+      </div>
+      <div className="pswp__button--arrow--prev pswp__button--arrow">
+        <IconButton
+          disabled={slideState.currIndex === 0}
+          onClick={() => pswp.prev()}
+          size="medium"
+          color="neutral"
+          variant="solid"
+        >
+          <Back />
+        </IconButton>
+      </div>
+      <div className="pswp__button--arrow--next pswp__button--arrow">
+        <IconButton
+          disabled={slideState.currIndex === slideState.numItems - 1}
+          onClick={() => pswp.next()}
+          size="medium"
+          color="neutral"
+          variant="solid"
+        >
+          <ArrowForward />
+        </IconButton>
+      </div>
+    </ToastProvider>
+  );
+}
+
+function SlideActionsMenu({themeMode, actions}: {themeMode: ThemeMode; actions?: React.ReactNode}) {
+  const [container, setContainer] = useState<HTMLDivElement | null>();
+  const {theme, styles} = useMemo(() => {
+    const theme = getThemeColors(colors.brandColors.blue, themeMode === "dark" ? "light" : "dark");
+    return {theme, styles: createInlineTheme(theme, emptyArray)};
+  }, [themeMode]);
+
+  return (
+    <div>
+      <ActionsMenu
+        contentStyles={css`
+          margin-top: ${space.s8}px;
+        `}
+        container={container}
+        trigger={<ActionsButtonCompact size="medium" color="neutral" variant="solid" />}
+      >
+        {actions}
+      </ActionsMenu>
+      <ThemeProvider theme={theme}>
+        <div style={styles} ref={setContainer}></div>
+      </ThemeProvider>
+    </div>
+  );
+}
+
+function ZoomButton({pswp}: {pswp: PhotoSwipe}) {
+  const [zoomed, setZoomed] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    if (!pswp) {
+      return undefined;
+    }
+
+    function handleZoomChange() {
+      const slide = pswp.currSlide;
+      if (!slide) {
+        return;
+      }
+
+      setIsVisible(slide.zoomLevels.fit !== 1);
+
+      const zoomed = slide.currZoomLevel > slide.zoomLevels.fit;
+      setZoomed(zoomed);
+    }
+
+    pswp.on("afterInit", handleZoomChange);
+    pswp.on("zoomPanUpdate", handleZoomChange);
+
+    return () => {
+      pswp.off("afterInit", handleZoomChange);
+      pswp.off("zoomPanUpdate", handleZoomChange);
+    };
+  }, [pswp]);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <IconButton
+      onClick={() => {
+        setZoomed(!zoomed);
+        pswp.toggleZoom();
+      }}
+      size="medium"
+      color="neutral"
+      variant="solid"
+    >
+      {zoomed ? <LoupeZoomOut /> : <LoupeZoomIn />}
+    </IconButton>
+  );
+}
+
+function CopyURLButton({pswp}: {pswp: PhotoSwipe}) {
+  const toast = useToast();
+  return (
+    <Button
+      onClick={() => {
+        if (!pswp?.currSlide?.data.src) {
+          toast.error({title: "Unable to copy."});
+          return;
+        }
+
+        const src = new URL(pswp.currSlide.data.src, `${window.location}`).href;
+        if (src) {
+          copyToClipboard(src)
+            .then(() => {
+              toast.success({title: "Copied!"});
+            })
+            .catch(() => {
+              toast.error({title: "Unable to copy."});
+            });
+        }
+      }}
+      size="medium"
+      variant="solid"
+      color="neutral"
+      iconStart={<Link />}
+      type="button"
+    >
+      Copy file URL
+    </Button>
+  );
+}
+
+const emptyArray: string[] = [];
+
+function getSlideData(pswp: PhotoSwipe, items: {src: string; actions?: React.ReactNode}[]) {
+  return {
+    currIndex: pswp.currIndex,
+    numItems: pswp.getNumItems(),
+    src: items[pswp.currIndex].src,
+    actions: items[pswp.currIndex].actions,
+  };
+}

package/src/images-gallery-2/zoom.tsx

@@ -0,0 +1,35 @@
+import React, {ReactNode, useCallback} from "react";
+import "react-medium-image-zoom/dist/styles.css";
+
+type Props = {
+  zoomed: boolean;
+  onZoomedChange: (value: boolean) => void;
+  children: ReactNode;
+  className?: string;
+  openOnClick?: boolean;
+  zoomImg?: {src: string; alt?: string};
+  actions?: ReactNode;
+};
+
+export const ZoomV2 = (props: Props) => {
+  const {zoomed, onZoomedChange, children, className, openOnClick} = props;
+  const onClick = useCallback(() => {
+    if (zoomed) {
+      onZoomedChange(false);
+    } else if (openOnClick) {
+      onZoomedChange(true);
+    }
+  }, [zoomed, onZoomedChange, openOnClick]);
+
+  const onDoubleClick = useCallback(() => {
+    if (!zoomed) {
+      onZoomedChange(true);
+    }
+  }, [zoomed, onZoomedChange]);
+
+  return (
+    <div className={className} onClick={onClick} onDoubleClick={openOnClick ? undefined : onDoubleClick}>
+      {children}
+    </div>
+  );
+};