@musecat/uikit 0.1.1

package/packages/Frameworks/View/ImageView/Image.tsx

@@ -0,0 +1,375 @@
+"use client";
+
+import NextImage from "next/image";
+import { useCallback, useMemo, useState } from "react";
+import Dialog from "@/packages/Frameworks/Dialog/Dialog";
+import Pressable from "@/packages/Frameworks/Pressable/Pressable";
+import HScrollView from "@/packages/Frameworks/View/HScrollView/HScrollView";
+import ImageDialog from "@/packages/Frameworks/View/ImageView/Dialog/ImageDialog";
+import {
+  ImageLeftControl,
+  ImageRightControl,
+} from "@/packages/Frameworks/View/ImageView/Image.controls";
+import type { ImageOverlay, ImageProps } from "@/packages/Frameworks/View/ImageView/Image.types";
+import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
+import {
+  resolveAtIndex,
+  resolveBlurDataURL,
+  resolveImageSrc,
+  resolveItems,
+  resolveOverlay,
+} from "@/packages/Frameworks/View/ImageView/Image.utils";
+import View from "@/packages/Frameworks/View/View";
+
+const DEFAULT_GROUP_WIDTH = "auto";
+const DEFAULT_GROUP_HEIGHT = "29rem";
+
+const PRESSABLE_STYLE: React.CSSProperties = { position: "relative", overflow: "hidden" };
+const OVERLAY_STYLE: React.CSSProperties = { position: "absolute", inset: 0, pointerEvents: "none" };
+const IMG_STYLE: React.CSSProperties = { height: "100%", objectFit: "cover", objectPosition: "center", display: "block" };
+const NEXT_IMG_STYLE: React.CSSProperties = { objectFit: "cover", objectPosition: "center" };
+
+function ImageGroupItem({
+  item,
+  index,
+  dialog,
+  className,
+  radius,
+  width,
+  height,
+  overlay,
+  groupWidth,
+  priority,
+  openDialog,
+}: {
+  item: { id: number; src: string; alt: string; srcDialog?: string; blurDataURL?: string };
+  index: number;
+  dialog?: ImageProps["dialog"];
+  className?: string;
+  radius?: string;
+  width?: UIKitSizeValue | UIKitSizeValue[];
+  height?: UIKitSizeValue | UIKitSizeValue[];
+  overlay?: ImageOverlay;
+  groupWidth?: string;
+  priority?: boolean;
+  openDialog: (index: number) => void;
+}) {
+  const resolvedWidth = resolveAtIndex(width, index);
+  const resolvedHeight = resolveAtIndex(height, index);
+  const resolvedOverlay = resolveOverlay(overlay, index);
+
+  return (
+    <Pressable
+      key={item.id}
+      radius={radius ?? "Regular"}
+      background="Base3"
+      onClick={dialog ? () => openDialog(index) : undefined}
+      style={PRESSABLE_STYLE}
+      width={resolvedWidth ?? "fit-content"}
+      height={resolvedHeight}
+    >
+      {(resolvedWidth ?? groupWidth) === "auto" ? (
+        <img
+          src={resolveImageSrc(item, "inline")}
+          alt={item.alt}
+          draggable={false}
+          className={className}
+          style={IMG_STYLE}
+        />
+      ) : (
+        <NextImage
+          fill
+          priority={priority && index === 0}
+          src={resolveImageSrc(item, "inline")}
+          alt={item.alt}
+          placeholder="blur"
+          blurDataURL={resolveBlurDataURL(item, index)}
+          draggable={false}
+          className={className}
+          style={NEXT_IMG_STYLE}
+        />
+      )}
+      {resolvedOverlay && (
+        <View style={OVERLAY_STYLE}>
+          {resolvedOverlay}
+        </View>
+      )}
+    </Pressable>
+  );
+}
+
+export default function Image({
+  src,
+  radius,
+  alt,
+  width,
+  height,
+  priority,
+  className,
+  groupWidth = DEFAULT_GROUP_WIDTH,
+  groupHeight = DEFAULT_GROUP_HEIGHT,
+  groupGap = 16,
+  groupClassName,
+  overlay,
+  control,
+  dialog,
+}: ImageProps) {
+  const items = useMemo(() => resolveItems(src, alt), [src, alt]);
+
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [dialogIndex, setDialogIndex] = useState(0);
+
+  const openDialog = useCallback((index: number) => {
+    setDialogIndex(index);
+    setDialogOpen(true);
+  }, []);
+
+  const openDialogZero = useCallback(() => openDialog(0), [openDialog]);
+  const closeDialog = useCallback(() => setDialogOpen(false), []);
+
+  const controlsRenderer = useMemo(() => {
+    if (!control) return undefined;
+    return ({
+      scrollPrev,
+      scrollNext,
+      canScrollPrev,
+      canScrollNext,
+    }: {
+      scrollPrev: () => void;
+      scrollNext: () => void;
+      canScrollPrev: boolean;
+      canScrollNext: boolean;
+    }) => {
+      const renderLeft =
+        typeof control === "boolean"
+          ? control
+          : control.left !== false && control.left !== undefined;
+      const renderRight =
+        typeof control === "boolean"
+          ? control
+          : control.right !== false && control.right !== undefined;
+      const leftSlot =
+        typeof control === "object" && typeof control.left === "object"
+          ? control.left
+          : {};
+      const rightSlot =
+        typeof control === "object" && typeof control.right === "object"
+          ? control.right
+          : {};
+
+      return (
+        <View
+          gap={8}
+          width="100%"
+          className={
+            typeof control === "object" ? control.groupClassName : undefined
+          }
+          style={
+            typeof control === "object" ? control.groupStyle : undefined
+          }
+        >
+          {renderLeft && (
+            <ImageLeftControl
+              onClick={scrollPrev}
+              disabled={!canScrollPrev}
+              className={leftSlot.className}
+              style={{ zIndex: 2, ...leftSlot.style }}
+            />
+          )}
+          {renderRight && (
+            <ImageRightControl
+              onClick={scrollNext}
+              disabled={!canScrollNext}
+              className={rightSlot.className}
+              style={{ zIndex: 2, ...rightSlot.style }}
+            />
+          )}
+        </View>
+      );
+    };
+  }, [control]);
+
+  if (items.length === 0) return null;
+
+  if (items.length === 1) {
+    const item = items[0]!;
+    const resolvedWidth = resolveAtIndex(width, 0);
+    const resolvedHeight = resolveAtIndex(height, 0);
+    const resolvedOverlay = resolveOverlay(overlay, 0);
+
+    if (dialog) {
+      return (
+        <>
+          {}
+          <Pressable
+            radius={radius ?? "Regular"}
+            onClick={openDialogZero}
+            style={PRESSABLE_STYLE}
+            width={resolvedWidth ?? "fit-content"}
+            height={resolvedHeight}
+          >
+            {}
+            {(resolvedWidth ?? "auto") === "auto" ? (
+              <img
+                src={resolveImageSrc(item, "inline")}
+                alt={item.alt}
+                draggable={false}
+                className={className}
+                style={{
+                  height: "100%",
+                  objectFit: "cover",
+                  objectPosition: "center",
+                  display: "block",
+                }}
+              />
+            ) : (
+              <NextImage
+                fill
+                priority={priority}
+                src={resolveImageSrc(item, "inline")}
+                alt={item.alt}
+                placeholder="blur"
+                blurDataURL={resolveBlurDataURL(item, 0)}
+                draggable={false}
+                className={className}
+                style={{
+                  objectFit: "cover",
+                  objectPosition: "center",
+                }}
+              />
+            )}
+
+            {}
+            {resolvedOverlay && (
+              <View
+                style={{
+                  position: "absolute",
+                  inset: 0,
+                  pointerEvents: "none",
+                }}
+              >
+                {resolvedOverlay}
+              </View>
+            )}
+          </Pressable>
+
+          {}
+          <Dialog
+            mode="modal"
+            open={dialogOpen}
+            onOpenChange={setDialogOpen}
+            modal={{
+              immersive: true,
+              exit: { overlay: false, escape: true },
+              custom: (
+                <ImageDialog
+                  items={items}
+                  initialIndex={dialogIndex}
+                  dialog={dialog}
+                  priority={priority}
+                  className={className}
+                  onClose={closeDialog}
+                />
+              ),
+            }}
+          />
+        </>
+      );
+    }
+
+    return (
+      <View
+        radius={radius ?? "Regular"}
+        style={PRESSABLE_STYLE}
+        width={resolvedWidth ?? "fit-content"}
+        height={resolvedHeight}
+      >
+        {}
+        {(resolvedWidth ?? "auto") === "auto" ? (
+          <img
+            src={resolveImageSrc(item, "inline")}
+            alt={item.alt}
+            draggable={false}
+            className={className}
+            style={IMG_STYLE}
+          />
+        ) : (
+          <NextImage
+            fill
+            priority={priority}
+            src={resolveImageSrc(item, "inline")}
+            alt={item.alt}
+            placeholder="blur"
+            blurDataURL={resolveBlurDataURL(item, 0)}
+            draggable={false}
+            className={className}
+            style={NEXT_IMG_STYLE}
+          />
+        )}
+
+        {}
+        {resolvedOverlay && (
+          <View style={OVERLAY_STYLE}>
+            {resolvedOverlay}
+          </View>
+        )}
+      </View>
+    );
+  }
+
+  return (
+    <>
+      {}
+      <View column gap={10} fullWidth className={groupClassName}>
+        <HScrollView
+          active
+          gap={groupGap}
+          itemWidth={groupWidth}
+          itemHeight={groupHeight}
+          showEdgeEffect={false}
+          renderControls={controlsRenderer}
+        >
+          {items.map((item, index) => (
+            <ImageGroupItem
+              key={item.id}
+              item={item}
+              index={index}
+              dialog={dialog}
+              className={className}
+              radius={radius}
+              width={width}
+              height={height}
+              overlay={overlay}
+              groupWidth={groupWidth}
+              priority={priority}
+              openDialog={openDialog}
+            />
+          ))}
+        </HScrollView>
+      </View>
+
+      {}
+      {dialog && (
+        <Dialog
+          mode="modal"
+          open={dialogOpen}
+          onOpenChange={setDialogOpen}
+          modal={{
+            immersive: true,
+            exit: { overlay: false, escape: true },
+            custom: (
+              <ImageDialog
+                items={items}
+                initialIndex={dialogIndex}
+                dialog={dialog}
+                priority={priority}
+                className={className}
+                onClose={closeDialog}
+              />
+            ),
+          }}
+        />
+      )}
+    </>
+  );
+}

package/packages/Frameworks/View/ImageView/Image.types.ts

@@ -0,0 +1,71 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
+import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+
+export type ImageItem = {
+  id: number;
+  src: string;
+  alt: string;
+  srcDialog?: string;
+  blurDataURL?: string;
+};
+
+export type ImageControlSlot = {
+  className?: string;
+  style?: CSSProperties;
+};
+
+export type ImageOverlay = ReactNode | ReactNode[];
+
+export interface ImageProps extends RadiusProps {
+  src: string | string[] | ImageItem[];
+
+  alt?: string | string[];
+
+  width?: UIKitSizeValue | UIKitSizeValue[];
+
+  height?: UIKitSizeValue | UIKitSizeValue[];
+
+  priority?: boolean;
+
+  className?: string;
+
+  groupWidth?: string;
+  groupHeight?: string;
+  groupGap?: UIKitSizeValue;
+  groupClassName?: string;
+
+  overlay?: ImageOverlay;
+
+  control?:
+    | boolean
+    | {
+        left?: ImageControlSlot | boolean;
+        right?: ImageControlSlot | boolean;
+        groupClassName?: string;
+        groupStyle?: CSSProperties;
+      };
+
+  dialog?: {
+    className?: string;
+    overlay?: ImageOverlay;
+    header?: {
+      className?: string;
+      style?: CSSProperties;
+      content?: ReactNode;
+    };
+    control?:
+      | boolean
+      | {
+          left?: ImageControlSlot | boolean;
+          right?: ImageControlSlot | boolean;
+        };
+    footer?: {
+      className?: string;
+      style?: CSSProperties;
+      content?: (item: ImageItem, index: number) => ReactNode;
+      list?: boolean;
+      counter?: boolean;
+    };
+  };
+}

package/packages/Frameworks/View/ImageView/Image.utils.ts

@@ -0,0 +1,79 @@
+import type { ReactNode } from "react";
+import type {
+  ImageItem,
+  ImageOverlay,
+} from "@/packages/Frameworks/View/ImageView/Image.types";
+
+export type ImageMode = "inline" | "dialog";
+
+export function resolveItems(
+  src: string | string[] | ImageItem[],
+  alt?: string | string[],
+): ImageItem[] {
+  if (typeof src === "string") {
+    const resolvedAlt =
+      typeof alt === "string" ? alt : Array.isArray(alt) ? (alt[0] ?? "") : "";
+    return [{ id: 0, src, alt: resolvedAlt }];
+  }
+
+  if (src.length === 0) return [];
+
+  if (typeof src[0] === "string") {
+    return (src as string[]).map((s, i) => ({
+      id: i,
+      src: s,
+      alt: Array.isArray(alt)
+        ? (alt[i] ?? "")
+        : typeof alt === "string"
+          ? alt
+          : "",
+    }));
+  }
+
+  return src as ImageItem[];
+}
+
+export function resolveImageSrc(item: ImageItem, mode: ImageMode): string {
+  return mode === "dialog" ? (item.srcDialog ?? item.src) : item.src;
+}
+
+export function resolveOverlay(
+  overlay: ImageOverlay | undefined,
+  index: number,
+): ReactNode {
+  if (overlay == null) return null;
+  if (Array.isArray(overlay)) return (overlay as ReactNode[])[index] ?? null;
+  return overlay;
+}
+
+export function resolveAtIndex<T>(
+  value: T | T[] | undefined,
+  index: number,
+): T | undefined {
+  if (value === undefined) return undefined;
+  if (Array.isArray(value)) return (value as T[])[index];
+  return value;
+}
+
+const FALLBACK_BLURS = [
+  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSIjZmVjYWNhIi8+PC9zdmc+",
+  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSIjZmVkN2FhIi8+PC9zdmc+",
+  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSIjZmVmMDhhIi8+PC9zdmc+",
+  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSIjZDlmOTlkIi8+PC9zdmc+",
+  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSIjYmJmN2QwIi8+PC9zdmc+",
+  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSIjOTlmNmU0Ii8+PC9zdmc+",
+  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSIjYmZkYmZlIi8+PC9zdmc+",
+  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSIjYzdkMmZlIi8+PC9zdmc+",
+  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSIjZTlkNWZmIi8+PC9zdmc+",
+  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSIjZmJjZmU4Ii8+PC9zdmc+",
+];
+
+export function resolveBlurDataURL(item: ImageItem, index: number): string {
+  if (item.blurDataURL) return item.blurDataURL;
+
+  const hash =
+    String(item.id)
+      .split("")
+      .reduce((acc, char) => acc + char.charCodeAt(0), 0) + index;
+  return FALLBACK_BLURS[hash % FALLBACK_BLURS.length]!;
+}

package/packages/Frameworks/View/View.module.scss

@@ -0,0 +1,34 @@
+@use "../../Styles/viewport" as viewport;
+
+.View {
+  ::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+:where(.View) {
+  gap: var(--view-default-gap, 2.4rem);
+}
+
+.MobileStrict {
+  @media (max-width: 679.98px) {
+    display: grid !important;
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (max-width: 469.98px) {
+    display: grid !important;
+    grid-template-columns: 1fr;
+  }
+}
+
+@include viewport.down(w3) {
+  .MobileOrder {
+    order: var(--view-mobile-order);
+  }
+}
+
+.FullWidth,
+.FullWidth > * {
+  width: 100%;
+}