@musecat/uikit 0.1.1

package/packages/Frameworks/View/HScrollView/HScrollView.tsx

@@ -0,0 +1,386 @@
+"use client";
+
+import clsx from "clsx";
+import type { EmblaOptionsType } from "embla-carousel";
+import useEmblaCarousel from "embla-carousel-react";
+import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures";
+import {
+  Children,
+  type CSSProperties,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Size } from "@/packages/Frameworks/_shared/sizing";
+import EdgeEffect from "@/packages/Frameworks/EdgeEffect/EdgeEffect";
+import { Radius } from "@/packages/Frameworks/Theme/Radius.types";
+import {
+  BackgroundBlur,
+  Border,
+  resolveThemeClasses,
+} from "@/packages/Frameworks/Theme/Theme.types";
+import styles from "@/packages/Frameworks/View/HScrollView/HScrollView.module.scss";
+import type {
+  HScrollViewProps,
+  HScrollViewViewport,
+} from "@/packages/Frameworks/View/HScrollView/HScrollView.types";
+import View from "@/packages/Frameworks/View/View";
+import viewStyles from "@/packages/Frameworks/View/View.module.scss";
+
+type HScrollViewStyle = CSSProperties & {
+  "--view-default-gap"?: string | number;
+  "--h-scroll-item-width"?: string | number;
+  "--h-scroll-item-height"?: string | number;
+};
+
+const VIEWPORT_MAX_QUERY: Record<HScrollViewViewport, string> = {
+  w1: "(max-width: 319.98px)",
+  w2: "(max-width: 409.98px)",
+  w3: "(max-width: 767.98px)",
+  w4: "(max-width: 1279.98px)",
+};
+
+export default forwardRef<HTMLDivElement, HScrollViewProps>(
+  function HScrollView(
+    {
+      active = true,
+      children,
+      className,
+      style,
+      rootStyle,
+      containerStyle,
+      activeContainerStyle,
+      inactiveContainerStyle,
+      itemWidth,
+      itemHeight,
+      renderControls,
+      showEdgeEffect = true,
+      themePreset,
+      background,
+      color,
+      themeInteractive,
+      selected,
+      border,
+      radius,
+      backgroundBlur,
+      alignItems,
+      justifyContent,
+      wrap,
+      gap,
+      fullWidth,
+      width,
+      height,
+      padding,
+      margin,
+      "data-color-mode": dataColorMode,
+      ...rest
+    },
+    ref,
+  ) {
+    const wheelPlugin = useMemo(
+      () => WheelGesturesPlugin({ forceWheelAxis: "x" }),
+      [],
+    );
+    const emblaPlugins = useMemo(() => [wheelPlugin], [wheelPlugin]);
+    const lastLocationRef = useRef(0);
+    const viewportRef = useRef<HTMLDivElement | null>(null);
+    const [isScrollActive, setIsScrollActive] = useState(() => active === true);
+    const [canScrollPrev, setCanScrollPrev] = useState(false);
+    const [canScrollNext, setCanScrollNext] = useState(false);
+    const slideCount = Children.count(children);
+    const hasSingleSlide = slideCount <= 1;
+    const shouldUseEmbla = isScrollActive && !hasSingleSlide;
+    const baseContainerStyle: CSSProperties = isScrollActive
+      ? (activeContainerStyle ??
+        containerStyle ?? {
+          alignItems,
+          justifyContent,
+          flexDirection: "row",
+          flexWrap: wrap,
+          gap: Size(gap),
+        })
+      : (inactiveContainerStyle ??
+        containerStyle ?? {
+          alignItems,
+          justifyContent,
+          flexWrap: wrap,
+          gap: Size(gap),
+        });
+
+    const resolvedContainerStyle = useMemo<CSSProperties>(
+      () => ({
+        ...baseContainerStyle,
+        flexWrap: isScrollActive ? "nowrap" : baseContainerStyle?.flexWrap,
+        flexDirection: "row",
+        touchAction: isScrollActive
+          ? shouldUseEmbla
+            ? "pan-y pinch-zoom"
+            : baseContainerStyle?.touchAction
+          : baseContainerStyle?.touchAction,
+      }),
+      [baseContainerStyle, isScrollActive, shouldUseEmbla],
+    );
+    const gapValue = resolvedContainerStyle.gap;
+
+    const emblaOptions = useMemo<EmblaOptionsType>(
+      () => ({
+        active: shouldUseEmbla,
+        align: "start",
+        dragFree: true,
+        axis: "x",
+      }),
+      [shouldUseEmbla],
+    );
+    const [emblaRef, emblaApi] = useEmblaCarousel(emblaOptions, emblaPlugins);
+    const setViewportRef = useCallback(
+      (node: HTMLDivElement | null) => {
+        viewportRef.current = node;
+        emblaRef(node);
+      },
+      [emblaRef],
+    );
+
+    const scrollNative = useCallback((direction: -1 | 1) => {
+      const viewport = viewportRef.current;
+      if (!viewport) return;
+
+      viewport.scrollBy({
+        left: viewport.clientWidth * direction * 0.85,
+        behavior: "smooth",
+      });
+    }, []);
+
+    const scrollPrev = useCallback(() => {
+      if (emblaApi && shouldUseEmbla) {
+        emblaApi.scrollPrev();
+        return;
+      }
+
+      scrollNative(-1);
+    }, [emblaApi, scrollNative, shouldUseEmbla]);
+
+    const scrollNext = useCallback(() => {
+      if (emblaApi && shouldUseEmbla) {
+        emblaApi.scrollNext();
+        return;
+      }
+
+      scrollNative(1);
+    }, [emblaApi, scrollNative, shouldUseEmbla]);
+
+    const syncControls = useCallback(() => {
+      if (emblaApi && shouldUseEmbla) {
+        const progress = emblaApi.scrollProgress();
+        setCanScrollPrev(progress > 0.005);
+        setCanScrollNext(progress < 0.995);
+        return;
+      }
+
+      const viewport = viewportRef.current;
+      if (!viewport) return;
+
+      setCanScrollPrev(Math.ceil(viewport.scrollLeft) > 0);
+      setCanScrollNext(
+        Math.ceil(viewport.scrollLeft + viewport.clientWidth) <
+          viewport.scrollWidth,
+      );
+    }, [emblaApi, shouldUseEmbla]);
+
+    useEffect(() => {
+      if (active === true) {
+        setIsScrollActive(true);
+        return;
+      }
+
+      if (!active) {
+        setIsScrollActive(false);
+        return;
+      }
+
+      const mediaQueryList = window.matchMedia(VIEWPORT_MAX_QUERY[active]);
+      const syncActive = () => {
+        setIsScrollActive(mediaQueryList.matches);
+      };
+
+      syncActive();
+      mediaQueryList.addEventListener("change", syncActive);
+      return () => {
+        mediaQueryList.removeEventListener("change", syncActive);
+      };
+    }, [active]);
+
+    useEffect(() => {
+      if (!emblaApi || !shouldUseEmbla) return;
+
+      const syncLocation = () => {
+        lastLocationRef.current = emblaApi.internalEngine().location.get();
+      };
+
+      syncLocation();
+      emblaApi.on("scroll", syncLocation);
+      emblaApi.on("select", syncLocation);
+      emblaApi.on("settle", syncLocation);
+
+      return () => {
+        emblaApi.off("scroll", syncLocation);
+        emblaApi.off("select", syncLocation);
+        emblaApi.off("settle", syncLocation);
+      };
+    }, [emblaApi, shouldUseEmbla]);
+
+    useEffect(() => {
+      syncControls();
+
+      if (emblaApi && shouldUseEmbla) {
+        emblaApi.on("select", syncControls);
+        emblaApi.on("scroll", syncControls);
+        emblaApi.on("reInit", syncControls);
+
+        return () => {
+          emblaApi.off("select", syncControls);
+          emblaApi.off("scroll", syncControls);
+          emblaApi.off("reInit", syncControls);
+        };
+      }
+
+      const viewport = viewportRef.current;
+      if (!viewport) return;
+
+      viewport.addEventListener("scroll", syncControls);
+      window.addEventListener("resize", syncControls);
+
+      let observer: ResizeObserver | null = null;
+      if (typeof ResizeObserver !== "undefined") {
+        observer = new ResizeObserver(() => {
+          syncControls();
+        });
+        observer.observe(viewport);
+        if (viewport.firstElementChild) {
+          observer.observe(viewport.firstElementChild);
+        }
+      }
+
+      return () => {
+        viewport.removeEventListener("scroll", syncControls);
+        window.removeEventListener("resize", syncControls);
+        if (observer) {
+          observer.disconnect();
+        }
+      };
+    }, [emblaApi, shouldUseEmbla, syncControls]);
+
+    useEffect(() => {
+      if (!emblaApi || !shouldUseEmbla) return;
+
+      const shouldReInit = slideCount > 0 || gapValue !== undefined;
+      if (!shouldReInit) return;
+
+      const frame = window.requestAnimationFrame(() => {
+        const previousLocation = lastLocationRef.current;
+        emblaApi.reInit();
+        const engine = emblaApi.internalEngine();
+        engine.location.set(previousLocation);
+        engine.previousLocation.set(previousLocation);
+        engine.offsetLocation.set(previousLocation);
+        engine.target.set(previousLocation);
+        engine.translate.to(previousLocation);
+      });
+
+      return () => {
+        window.cancelAnimationFrame(frame);
+      };
+    }, [emblaApi, gapValue, shouldUseEmbla, slideCount]);
+
+    const themeClasses = resolveThemeClasses({
+      themePreset,
+      background,
+      color,
+      themeInteractive,
+      selected,
+      isInteractive: false,
+    });
+    const resolvedRootStyle: HScrollViewStyle = {
+      position: "relative",
+      "--view-default-gap": Size(gap ?? 12),
+      "--h-scroll-item-width": Size(itemWidth),
+      "--h-scroll-item-height": Size(itemHeight),
+      width: Size(width),
+      height: Size(height),
+      padding: Size(padding),
+      margin: Size(margin),
+      borderRadius: Radius(radius),
+      ...rootStyle,
+      ...style,
+    };
+
+    const controls = renderControls?.({
+      scrollPrev,
+      scrollNext,
+      canScrollPrev,
+      canScrollNext,
+      isScrollActive,
+    });
+
+    return (
+      <View
+        ref={ref}
+        column
+        data-color-mode={dataColorMode}
+        data-h-scroll-active={isScrollActive ? "true" : "false"}
+        {...rest}
+        className={clsx(
+          viewStyles.View,
+          ...themeClasses,
+          Border(border),
+          BackgroundBlur(backgroundBlur),
+          fullWidth && styles.FullWidth,
+          className,
+          hasSingleSlide && styles.SingleChild,
+        )}
+        style={resolvedRootStyle}
+      >
+        <View
+          ref={setViewportRef}
+          data-embla-active={emblaApi && shouldUseEmbla ? "true" : "false"}
+          className={styles.Viewport}
+        >
+          <View className={styles.Container} style={resolvedContainerStyle}>
+            {children}
+          </View>
+        </View>
+        {showEdgeEffect && canScrollPrev && (
+          <EdgeEffect
+            side="left"
+            style={{
+              position: "absolute",
+              zIndex: 2,
+              pointerEvents: "none",
+              top: 0,
+              bottom: 0,
+              left: 0,
+              width: "2.4rem",
+            }}
+          />
+        )}
+        {showEdgeEffect && canScrollNext && (
+          <EdgeEffect
+            side="right"
+            style={{
+              position: "absolute",
+              zIndex: 2,
+              pointerEvents: "none",
+              top: 0,
+              bottom: 0,
+              right: 0,
+              width: "2.4rem",
+            }}
+          />
+        )}
+        {controls}
+      </View>
+    );
+  },
+);

package/packages/Frameworks/View/HScrollView/HScrollView.types.ts

@@ -0,0 +1,46 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
+import type { ViewProps } from "@/packages/Frameworks/View/View.types";
+
+export type HScrollViewViewport = "w1" | "w2" | "w3" | "w4";
+export type HScrollViewActive = boolean | HScrollViewViewport;
+export type HScrollViewControls = {
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+  isScrollActive: boolean;
+};
+
+export interface HScrollViewProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "color"> {
+  active?: HScrollViewActive;
+  children?: ReactNode;
+  rootStyle?: CSSProperties;
+  containerStyle?: CSSProperties;
+  activeContainerStyle?: CSSProperties;
+  inactiveContainerStyle?: CSSProperties;
+  itemWidth?: UIKitSizeValue;
+  itemHeight?: UIKitSizeValue;
+  renderControls?: (controls: HScrollViewControls) => ReactNode;
+  showEdgeEffect?: boolean;
+  width?: UIKitSizeValue;
+  height?: UIKitSizeValue;
+  padding?: UIKitSizeValue;
+  margin?: UIKitSizeValue;
+
+  alignItems?: ViewProps["alignItems"];
+  justifyContent?: ViewProps["justifyContent"];
+  wrap?: ViewProps["wrap"];
+  gap?: ViewProps["gap"];
+  fullWidth?: ViewProps["fullWidth"];
+  background?: ViewProps["background"];
+  color?: ViewProps["color"];
+  themePreset?: ViewProps["themePreset"];
+  themeInteractive?: ViewProps["themeInteractive"];
+  selected?: ViewProps["selected"];
+  border?: ViewProps["border"];
+  radius?: ViewProps["radius"];
+  backgroundBlur?: ViewProps["backgroundBlur"];
+  "data-color-mode"?: ViewProps["data-color-mode"];
+}

package/packages/Frameworks/View/ImageView/Dialog/ImageDialog.counter.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import Text from "@/packages/Components/Text/Text";
+import View from "@/packages/Frameworks/View/View";
+
+export function DialogImageCounter({
+  selectedIndex,
+  total,
+}: {
+  selectedIndex: number;
+  total: number;
+}) {
+  return (
+    <View
+      alignItems="center"
+      background="Base6TP6"
+      shadow="Light"
+      radius="ExtraLight"
+      padding={[6, 8]}
+      style={{ whiteSpace: "nowrap" }}
+    >
+      <Text type="Subheadline">
+        {selectedIndex + 1} / {total}
+      </Text>
+    </View>
+  );
+}

package/packages/Frameworks/View/ImageView/Dialog/ImageDialog.footer.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import type { MutableRefObject } from "react";
+import { DialogImageCounter } from "@/packages/Frameworks/View/ImageView/Dialog/ImageDialog.counter";
+import { DialogImageList } from "@/packages/Frameworks/View/ImageView/Dialog/ImageDialog.list";
+import type {
+  ImageItem,
+  ImageProps,
+} from "@/packages/Frameworks/View/ImageView/Image.types";
+import View from "@/packages/Frameworks/View/View";
+
+export interface DialogImageFooterProps {
+  dialog: NonNullable<ImageProps["dialog"]>;
+  items: ImageItem[];
+  selectedIndex: number;
+  thumbnailRefs: MutableRefObject<(HTMLElement | null)[]>;
+  scrollTo: (index: number) => void;
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+}
+
+export function DialogImageFooter({
+  dialog,
+  items,
+  selectedIndex,
+  thumbnailRefs,
+  scrollTo,
+  scrollPrev,
+  scrollNext,
+  canScrollPrev,
+  canScrollNext,
+}: DialogImageFooterProps) {
+  if (!dialog.footer) return null;
+
+  const selectedItem = items[selectedIndex];
+
+  return (
+    <View
+      column
+      gap={12}
+      className={dialog.footer.className}
+      style={{
+        position: "absolute",
+        left: "1.6rem",
+        right: "1.6rem",
+        bottom: "1.6rem",
+        zIndex: 2,
+        ...dialog.footer.style,
+      }}
+    >
+      {selectedItem && dialog.footer.content?.(selectedItem, selectedIndex)}
+
+      <View alignItems="flex-end" justifyContent="space-between" gap={12}>
+        {dialog.footer.list && (
+          <DialogImageList
+            items={items}
+            selectedIndex={selectedIndex}
+            thumbnailRefs={thumbnailRefs}
+            onThumbnailClick={scrollTo}
+          />
+        )}
+
+        <View alignItems="center" gap={8} style={{ flexShrink: 0 }}>
+          {dialog.footer.counter && (
+            <DialogImageCounter
+              selectedIndex={selectedIndex}
+              total={items.length}
+            />
+          )}
+        </View>
+      </View>
+    </View>
+  );
+}

package/packages/Frameworks/View/ImageView/Dialog/ImageDialog.header.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import Icon from "@/packages/Components/Icon/Icon";
+import type { ImageProps } from "@/packages/Frameworks/View/ImageView/Image.types";
+import View from "@/packages/Frameworks/View/View";
+
+export interface DialogImageHeaderProps {
+  config?: NonNullable<ImageProps["dialog"]>["header"];
+  onClose: () => void;
+}
+
+export function DialogImageHeader({ config, onClose }: DialogImageHeaderProps) {
+  return (
+    <View
+      justifyContent="space-between"
+      alignItems="center"
+      className={config?.className}
+      style={{
+        position: "absolute",
+        top: "1.6rem",
+        left: "1.6rem",
+        right: "1.6rem",
+        zIndex: 2,
+        pointerEvents: "none",
+        ...config?.style,
+      }}
+    >
+      {config?.content && (
+        <View style={{ pointerEvents: "auto" }}>{config.content}</View>
+      )}
+      <Icon
+        data-color-mode="dark"
+        icon="iClose"
+        shadow="Regular"
+        box
+        size={18}
+        themePreset="BaseSoft"
+        backgroundBlur="ExtraLight"
+        boxOptions={{
+          padding: 6,
+        }}
+        pressable={{
+          onClick: onClose,
+          style: { pointerEvents: "auto", marginLeft: "auto" },
+        }}
+      />
+    </View>
+  );
+}

package/packages/Frameworks/View/ImageView/Dialog/ImageDialog.list.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import NextImage from "next/image";
+import type { MutableRefObject } from "react";
+import Pressable from "@/packages/Frameworks/Pressable/Pressable";
+import styles from "@/packages/Frameworks/View/ImageView/Image.module.scss";
+import type { ImageItem } from "@/packages/Frameworks/View/ImageView/Image.types";
+import {
+  resolveBlurDataURL,
+  resolveImageSrc,
+} from "@/packages/Frameworks/View/ImageView/Image.utils";
+import View from "@/packages/Frameworks/View/View";
+
+export interface DialogImageListProps {
+  items: ImageItem[];
+  selectedIndex: number;
+  thumbnailRefs: MutableRefObject<(HTMLElement | null)[]>;
+  onThumbnailClick: (index: number) => void;
+}
+
+export function DialogImageList({
+  items,
+  selectedIndex,
+  thumbnailRefs,
+  onThumbnailClick,
+}: DialogImageListProps) {
+  if (items.length <= 1) return null;
+
+  return (
+    <View
+      style={{
+        overflowX: "auto",
+        scrollbarWidth: "none",
+        flex: 1,
+        minWidth: 0,
+      }}
+      gap={8}
+    >
+      {items.map((item, index) => (
+        <Pressable
+          key={item.id}
+          ref={(el) => {
+            thumbnailRefs.current[index] = el;
+          }}
+          data-active={selectedIndex === index ? "true" : "false"}
+          onClick={() => onThumbnailClick(index)}
+          opacity={selectedIndex === index ? 1 : 0.4}
+          className={styles.ThumbnailButton}
+          style={{ flexShrink: 0 }}
+          radius="ExtraLight"
+        >
+          <View
+            style={{
+              position: "relative",
+              width: "4.8rem",
+              height: "4.8rem",
+              overflow: "hidden",
+            }}
+          >
+            <NextImage
+              fill
+              src={resolveImageSrc(item, "inline")}
+              alt=""
+              placeholder="blur"
+              blurDataURL={resolveBlurDataURL(item, index)}
+              draggable={false}
+              style={{ objectFit: "cover" }}
+            />
+          </View>
+        </Pressable>
+      ))}
+    </View>
+  );
+}