sdaia-ui 1.0.1

package/src/components/MediaGallery/MediaGallery.tsx

@@ -0,0 +1,600 @@
+'use client';
+
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import Image from 'next/image';
+import { cn } from '../../lib/cn';
+import { Button } from '../Button';
+import { TextInput } from '../TextInput';
+import { Checkbox } from '../Checkbox';
+import { ImagePreview } from '../ImagePreview';
+import { Pagination } from '../Pagination';
+import {
+  CONTAINER_BASE,
+  CONTAINER_LAYOUT,
+  TOOLBAR_MOBILE,
+  TOOLBAR_DESKTOP,
+  TOOLBAR_LEFT_GROUP,
+  TOOLBAR_RIGHT_GROUP,
+  TOOLBAR_ACTIONS,
+  GRID_MOBILE,
+  GRID_TABLET,
+  GRID_DESKTOP,
+  LIST_CONTAINER,
+  LIST_ROW,
+  LIST_THUMBNAIL,
+  LIST_FILENAME,
+  PAGINATION_MOBILE_WRAP,
+  PAGINATION_DESKTOP_WRAP,
+} from './MediaGallery.variants';
+import {
+  SearchIcon,
+  ListLinesIcon,
+  GridSquaresIcon,
+  TrashIcon,
+  FilterFunnelIcon,
+  UploadArrowIcon,
+  MoreHorizontalIcon,
+  PlusIcon,
+} from '../../icons/IconFactory';
+import type { MediaGalleryProps, MediaGalleryView } from './MediaGallery.types';
+
+/* ── Search icon wrapper (TextInput prefix only) ──────────────── */
+/** Gives the search icon a fixed 24×24 box so it sits correctly inside the TextInput prefix slot. */
+function SearchIconWrap({ children }: { children: React.ReactNode }) {
+  return <span className="size-icon-md flex items-center justify-center">{children}</span>;
+}
+
+/* ── MoreMenu (mobile / tablet toolbar) ───────────────────────── */
+/**
+ * The three-dots button + floating dropdown panel shown on mobile / tablet.
+ * Exposes all the desktop-toolbar actions that are hidden at small viewports:
+ * list/grid view toggle, delete, export, and add.
+ */
+interface MoreMenuProps {
+  activeView: MediaGalleryView;
+  onViewChange: (view: MediaGalleryView) => void;
+  onDeleteClick?: () => void;
+  onExportClick?: () => void;
+  exportLabel: string;
+  onAddClick?: () => void;
+  addLabel: string;
+  onMoreClick?: () => void;
+}
+
+function MoreMenu({
+  activeView,
+  onViewChange,
+  onDeleteClick,
+  onExportClick,
+  exportLabel,
+  onAddClick,
+  addLabel,
+  onMoreClick,
+}: MoreMenuProps) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  /* Close on click-outside */
+  useEffect(() => {
+    if (!open) return;
+    const handlePointerDown = (e: PointerEvent) => {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('pointerdown', handlePointerDown);
+    return () => document.removeEventListener('pointerdown', handlePointerDown);
+  }, [open]);
+
+  const DIVIDER =
+    'h-px mx-spacing-sm my-spacing-xs bg-[rgba(229,231,235,1)] dark:bg-[rgba(56,66,80,1)]';
+
+  return (
+    <div ref={rootRef} className="relative">
+      {/* Trigger */}
+      <Button
+        size="lg"
+        iconOnly
+        variant="secondary-outline"
+        aria-label="More options"
+        aria-expanded={open}
+        aria-haspopup="menu"
+        selected={open}
+        leadingIcon={<MoreHorizontalIcon />}
+        onClick={() => {
+          onMoreClick?.();
+          setOpen((prev) => !prev);
+        }}
+      />
+
+      {/* Dropdown panel */}
+      {open && (
+        <div
+          role="menu"
+          className={cn(
+            'absolute end-0 top-full mt-1 z-50',
+            'py-spacing-xs w-[220px]',
+            'rounded-[8px]',
+            'bg-white dark:bg-[rgba(17,25,39,1)]',
+            'shadow-[0px_8px_8px_-4px_rgba(16,24,40,0.03),0px_20px_24px_-4px_rgba(16,24,40,0.08)]',
+          )}
+        >
+          {/* List view */}
+          <Button
+            role="menuitem"
+            size="md"
+            variant="subtle"
+            fullWidth
+            selected={activeView === 'list'}
+            leadingIcon={<ListLinesIcon />}
+            className="justify-start rounded-none"
+            onClick={() => { onViewChange('list'); setOpen(false); }}
+          >
+            List view
+          </Button>
+
+          {/* Grid view */}
+          <Button
+            role="menuitem"
+            size="md"
+            variant="subtle"
+            fullWidth
+            selected={activeView === 'grid'}
+            leadingIcon={<GridSquaresIcon />}
+            className="justify-start rounded-none"
+            onClick={() => { onViewChange('grid'); setOpen(false); }}
+          >
+            Grid view
+          </Button>
+
+          <div className={DIVIDER} />
+
+          {/* Delete */}
+          <Button
+            role="menuitem"
+            size="md"
+            variant="subtle"
+            fullWidth
+            leadingIcon={<TrashIcon />}
+            className="justify-start rounded-none"
+            onClick={() => { onDeleteClick?.(); setOpen(false); }}
+          >
+            Delete
+          </Button>
+
+          <div className={DIVIDER} />
+
+          {/* Export */}
+          <Button
+            role="menuitem"
+            size="md"
+            variant="subtle"
+            fullWidth
+            leadingIcon={<UploadArrowIcon />}
+            className="justify-start rounded-none"
+            onClick={() => { onExportClick?.(); setOpen(false); }}
+          >
+            {exportLabel}
+          </Button>
+
+          {/* Add */}
+          <Button
+            role="menuitem"
+            size="md"
+            variant="subtle"
+            fullWidth
+            leadingIcon={<PlusIcon />}
+            className="justify-start rounded-none"
+            onClick={() => { onAddClick?.(); setOpen(false); }}
+          >
+            {addLabel}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ── Component ────────────────────────────────────────────────── */
+export const MediaGallery = forwardRef<HTMLDivElement, MediaGalleryProps>(
+  function MediaGallery(
+    {
+      // Toolbar
+      toolbar = true,
+      searchValue,
+      onSearchChange,
+      searchPlaceholder = 'Search',
+      emptySearchLabel = 'No results found',
+      activeView: activeViewProp,
+      onViewChange,
+      onFilterClick,
+      onDeleteClick,
+      onExportClick,
+      exportLabel = 'Export',
+      onAddClick,
+      addLabel = 'Add',
+      onMoreClick,
+      // Grid
+      images = [],
+      // Pagination
+      pagination = true,
+      currentPage = 1,
+      totalPages = 1,
+      onPageChange,
+      // Direction
+      dir,
+      // Native
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    /* ── View state (controlled / uncontrolled) ─────────────────── */
+    const isViewControlled = activeViewProp !== undefined;
+    const [internalView, setInternalView] = useState<MediaGalleryView>('grid');
+    const activeView = isViewControlled ? activeViewProp! : internalView;
+
+    const handleViewChange = (view: MediaGalleryView) => {
+      if (!isViewControlled) setInternalView(view);
+      onViewChange?.(view);
+    };
+
+    /* ── Search state (uncontrolled fallback) ───────────────────── */
+    const isControlled = searchValue !== undefined;
+    const [internalSearch, setInternalSearch] = useState('');
+    const activeSearch = isControlled ? searchValue : internalSearch;
+    const [internalSelectedIds, setInternalSelectedIds] = useState<Set<string | number>>(
+      () => new Set(),
+    );
+
+    const handleSearchChange = (value: string) => {
+      if (!isControlled) setInternalSearch(value);
+      onSearchChange?.(value);
+    };
+
+    const handleSearchClear = () => {
+      if (!isControlled) setInternalSearch('');
+      onSearchChange?.('');
+    };
+
+    /* ── Client-side filtering ──────────────────────────────────── */
+    const query = activeSearch.trim().toLowerCase();
+    const filteredImages = query
+      ? images.filter((img) => img.filename?.toLowerCase().includes(query))
+      : images;
+
+    const isImageSelected = (img: (typeof images)[number]) =>
+      img.selected ?? internalSelectedIds.has(img.id);
+
+    const selectedImages = images.filter(isImageSelected);
+
+    const handleImageCheckedChange = (img: (typeof images)[number], checked: boolean) => {
+      if (img.selected === undefined) {
+        setInternalSelectedIds((prev) => {
+          const next = new Set(prev);
+          if (checked) next.add(img.id);
+          else next.delete(img.id);
+          return next;
+        });
+      }
+
+      img.onCheckedChange?.(checked);
+    };
+
+    const handleDeleteClick = () => {
+      onDeleteClick?.(selectedImages);
+    };
+
+    const handleExportClick = () => {
+      onExportClick?.(selectedImages);
+    };
+
+    const hasImages = filteredImages.length > 0;
+
+    return (
+      <div
+        ref={ref}
+        data-slot="media-gallery"
+        dir={dir}
+        className={cn(CONTAINER_BASE, CONTAINER_LAYOUT, className)}
+        {...rest}
+      >
+        {/* ── Toolbar ─────────────────────────────────────────── */}
+        {toolbar && (
+          <>
+            {/* Mobile / Tablet toolbar — hidden at xl+ */}
+            <div data-slot="toolbar-mobile" className={TOOLBAR_MOBILE}>
+              {/* Search — fills remaining space */}
+              <TextInput
+                size="lg"
+                placeholder={searchPlaceholder}
+                value={activeSearch}
+                onChange={(e) => handleSearchChange(e.target.value)}
+                clearable
+                onClear={handleSearchClear}
+                className="flex-1 min-w-0"
+                prefix={
+                  <SearchIconWrap>
+                    <SearchIcon />
+                  </SearchIconWrap>
+                }
+              />
+
+              {/* Filter button — icon via leadingIcon so it renders inside iconOnly */}
+              <Button
+                size="lg"
+                iconOnly
+                variant="secondary-outline"
+                aria-label="Filter"
+                leadingIcon={<FilterFunnelIcon />}
+                onClick={onFilterClick}
+              />
+
+              {/* More options button — opens dropdown with all hidden desktop actions */}
+              <MoreMenu
+                activeView={activeView}
+                onViewChange={handleViewChange}
+                onDeleteClick={handleDeleteClick}
+                onExportClick={handleExportClick}
+                exportLabel={exportLabel}
+                onAddClick={onAddClick}
+                addLabel={addLabel}
+                onMoreClick={onMoreClick}
+              />
+            </div>
+
+            {/* Desktop toolbar — shown at xl+ only */}
+            <div data-slot="toolbar-desktop" className={TOOLBAR_DESKTOP}>
+              {/* Left group: Search + view toggle */}
+              <div className={TOOLBAR_LEFT_GROUP}>
+                <TextInput
+                  size="lg"
+                  placeholder={searchPlaceholder}
+                  value={activeSearch}
+                  onChange={(e) => handleSearchChange(e.target.value)}
+                  clearable
+                  onClear={handleSearchClear}
+                  className="w-[350px]"
+                  prefix={
+                    <SearchIconWrap>
+                      <SearchIcon />
+                    </SearchIconWrap>
+                  }
+                />
+
+                {/* List view toggle */}
+                <Button
+                  size="lg"
+                  iconOnly
+                  variant="secondary-outline"
+                  selected={activeView === 'list'}
+                  aria-label="List view"
+                  leadingIcon={<ListLinesIcon />}
+                  onClick={() => handleViewChange('list')}
+                />
+
+                {/* Grid view toggle */}
+                <Button
+                  size="lg"
+                  iconOnly
+                  variant="secondary-outline"
+                  selected={activeView === 'grid'}
+                  aria-label="Grid view"
+                  leadingIcon={<GridSquaresIcon />}
+                  onClick={() => handleViewChange('grid')}
+                />
+              </div>
+
+              {/* Right group: Delete + Filter + Actions */}
+              <div className={TOOLBAR_RIGHT_GROUP}>
+                {/* Delete button */}
+                <Button
+                  size="lg"
+                  iconOnly
+                  variant="secondary-outline"
+                  aria-label="Delete"
+                  leadingIcon={<TrashIcon />}
+                  onClick={handleDeleteClick}
+                />
+
+                {/* Filter button */}
+                <Button
+                  size="lg"
+                  iconOnly
+                  variant="secondary-outline"
+                  aria-label="Filter"
+                  leadingIcon={<FilterFunnelIcon />}
+                  onClick={onFilterClick}
+                />
+
+                {/* Actions sub-group: Export + Add */}
+                <div className={TOOLBAR_ACTIONS}>
+                  <Button
+                    size="lg"
+                    variant="secondary-outline"
+                    leadingIcon={<UploadArrowIcon />}
+                    onClick={handleExportClick}
+                  >
+                    {exportLabel}
+                  </Button>
+
+                  <Button size="lg" variant="primary" onClick={onAddClick}>
+                    {addLabel}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+
+        {/* ── Image grid / list ───────────────────────────────── */}
+        {images.length > 0 && (
+          hasImages ? (
+            activeView === 'list' ? (
+              /* ── List view ─────────────────────────────────── */
+              <div data-slot="list" className={LIST_CONTAINER}>
+                {filteredImages.map((img) => (
+                  <div key={img.id} data-slot="list-row" className={LIST_ROW}>
+                    {/* Thumbnail */}
+                    <div data-slot="list-thumbnail" className={LIST_THUMBNAIL}>
+                      {img.src ? (
+                        <Image
+                          src={img.src}
+                          alt={img.alt ?? ''}
+                          fill
+                          className="object-cover"
+                        />
+                      ) : (
+                        /* eslint-disable-next-line @next/next/no-img-element */
+                        <img
+                          src="/images/aspect-ratio.webp"
+                          alt={img.alt ?? ''}
+                          className="w-full h-full object-cover"
+                        />
+                      )}
+                    </div>
+
+                    {/* Filename */}
+                    <span data-slot="list-filename" className={LIST_FILENAME}>
+                      {img.filename}
+                    </span>
+
+                    {/* Right group: checkbox + delete — gap-spacing-xl per Figma */}
+                    <div className="flex items-center gap-spacing-xl flex-shrink-0">
+                      <span
+                        className="inline-flex items-center justify-center"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <Checkbox
+                          size="sm"
+                          variant="primary"
+                          checked={isImageSelected(img)}
+                          onChange={(e) => handleImageCheckedChange(img, e.target.checked)}
+                          aria-label="Select image"
+                        />
+                      </span>
+
+                      <button
+                        type="button"
+                        aria-label="Delete image"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          img.onDelete?.();
+                        }}
+                        className="inline-flex items-center justify-center size-icon-md flex-shrink-0 text-[rgba(108,115,127,1)] hover:text-[rgba(220,38,38,1)] dark:text-[rgba(156,163,175,1)] dark:hover:text-[rgba(248,113,113,1)] motion-feedback cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(22,22,22,1)] dark:focus-visible:ring-[rgba(229,231,235,1)] rounded-[4px]"
+                      >
+                        <TrashIcon aria-hidden="true" width="100%" height="100%" />
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              /* ── Grid view ─────────────────────────────────── */
+              <>
+                {/* Mobile grid: 2 columns, sm thumbnails */}
+                <div data-slot="grid-mobile" className={GRID_MOBILE}>
+                  {filteredImages.map((img) => (
+                    <ImagePreview
+                      key={img.id}
+                      size="sm"
+                      src={img.src}
+                      alt={img.alt}
+                      filename={img.filename}
+                      checked={isImageSelected(img)}
+                      onCheckedChange={(checked) => handleImageCheckedChange(img, checked)}
+                      onDelete={img.onDelete}
+                      onPreview={img.onPreview}
+                      previewLabel={img.previewLabel}
+                      className="w-full"
+                    />
+                  ))}
+                </div>
+
+                {/* Tablet grid: 3 columns, md thumbnails */}
+                <div data-slot="grid-tablet" className={GRID_TABLET}>
+                  {filteredImages.map((img) => (
+                    <ImagePreview
+                      key={img.id}
+                      size="md"
+                      src={img.src}
+                      alt={img.alt}
+                      filename={img.filename}
+                      checked={isImageSelected(img)}
+                      onCheckedChange={(checked) => handleImageCheckedChange(img, checked)}
+                      onDelete={img.onDelete}
+                      onPreview={img.onPreview}
+                      previewLabel={img.previewLabel}
+                      className="w-full"
+                    />
+                  ))}
+                </div>
+
+                {/* Desktop grid: 5 columns, lg thumbnails */}
+                <div data-slot="grid-desktop" className={GRID_DESKTOP}>
+                  {filteredImages.map((img) => (
+                    <ImagePreview
+                      key={img.id}
+                      size="lg"
+                      src={img.src}
+                      alt={img.alt}
+                      filename={img.filename}
+                      checked={isImageSelected(img)}
+                      onCheckedChange={(checked) => handleImageCheckedChange(img, checked)}
+                      onDelete={img.onDelete}
+                      onPreview={img.onPreview}
+                      previewLabel={img.previewLabel}
+                      className="w-full"
+                    />
+                  ))}
+                </div>
+              </>
+            )
+          ) : (
+            /* Empty search state */
+            <div
+              data-slot="empty-search"
+              className="flex w-full items-center justify-center py-spacing-3xl"
+            >
+              <p className="text-text-sm font-normal leading-[20px] text-[rgba(107,119,128,1)] dark:text-[rgba(156,163,175,1)]">
+                {emptySearchLabel}
+              </p>
+            </div>
+          )
+        )}
+
+        {/* ── Pagination ──────────────────────────────────────── */}
+        {pagination && (
+          <>
+            {/* Mobile / Tablet pagination — hidden at xl+ */}
+            <div data-slot="pagination-mobile" className={PAGINATION_MOBILE_WRAP}>
+              <Pagination
+                type="numeric"
+                placement="center"
+                mobile
+                page={currentPage}
+                totalPages={totalPages}
+                onPageChange={onPageChange}
+                rtl={dir === 'rtl'}
+                className="w-full"
+              />
+            </div>
+
+            {/* Desktop pagination — shown at xl+ only */}
+            <div data-slot="pagination-desktop" className={PAGINATION_DESKTOP_WRAP}>
+              <Pagination
+                type="numeric"
+                placement="center"
+                page={currentPage}
+                totalPages={totalPages}
+                onPageChange={onPageChange}
+                rtl={dir === 'rtl'}
+                className="w-full"
+              />
+            </div>
+          </>
+        )}
+      </div>
+    );
+  },
+);