@wix/patterns-fields 1.0.0

package/src/components/media-gallery/form-media-gallery-items-preview.tsx

@@ -0,0 +1,144 @@
+import React, { useMemo } from 'react';
+import type { WixCodeGalleryItem } from '../../auto-field-types';
+import { getImageDimensions, ThumbnailSize } from '../../auto-field-types';
+import { Box, Text } from '@wix/design-system';
+import { MediaImage } from '../media-image';
+import { style, classes } from './form-media-gallery-field.st.css.js';
+
+// --- Layout types and constants ---
+
+type GalleryImageItem = {
+  src: string;
+  actualWidth: number;
+  withMarginRight?: boolean;
+  withMarginTop?: boolean;
+  morePlaceholder?: never;
+};
+
+type GalleryPlaceholderItem = {
+  src?: undefined;
+  actualWidth: number;
+  morePlaceholder: number;
+};
+
+type GalleryItem = GalleryImageItem | GalleryPlaceholderItem;
+
+const IMAGE_HEIGHT = ThumbnailSize.M;
+const GAP = 3;
+const PLACEHOLDER_WIDTH = 69;
+
+// --- Layout hook ---
+
+const useFormMediaGalleryItems = (
+  value?: WixCodeGalleryItem[],
+  boxWidth = 0,
+): GalleryItem[] =>
+  useMemo(() => {
+    if (!(value?.length && boxWidth)) {
+      return [];
+    }
+
+    const result: GalleryItem[] = [];
+
+    for (let i = 0, usedWidth = 0; i < value.length; i++) {
+      const item = value[i];
+      if (!item) continue;
+
+      const { width, height } = getImageDimensions(item.src);
+      const actualWidth = (width * IMAGE_HEIGHT) / height;
+
+      const offsetLeft = usedWidth % boxWidth;
+      let totalWidth = offsetLeft + actualWidth;
+
+      // Check if the image wraps to the second row
+      if (usedWidth < boxWidth && totalWidth > boxWidth) {
+        usedWidth = boxWidth;
+        totalWidth = actualWidth;
+      }
+
+      const isSecondRow = usedWidth / boxWidth >= 1;
+      const withMarginRight =
+        totalWidth <= boxWidth - GAP && i !== value.length - 1;
+      const withMarginTop = isSecondRow;
+
+      usedWidth += actualWidth + (withMarginRight ? GAP : 0);
+
+      // Terminate if the image doesn't fit — show "+N" placeholder
+      if (usedWidth > boxWidth * 2 - PLACEHOLDER_WIDTH) {
+        result.push({
+          actualWidth: PLACEHOLDER_WIDTH,
+          morePlaceholder: value.length - i,
+        });
+        return result;
+      }
+
+      result.push({
+        src: item.src,
+        actualWidth,
+        withMarginRight,
+        withMarginTop,
+      });
+    }
+
+    return result;
+  }, [value, boxWidth]);
+
+// --- Component ---
+
+export interface FormMediaGalleryViewProps {
+  width: number;
+  value?: WixCodeGalleryItem[];
+}
+
+export const FormMediaGalleryItemsPreview: React.FC<
+  FormMediaGalleryViewProps
+> = ({ width, value }) => {
+  const images = useFormMediaGalleryItems(value, width);
+
+  if (!images?.length) return null;
+
+  return (
+    <div className={classes.viewBox}>
+      {images.map((item: GalleryItem, index: number) => {
+        if (item.src) {
+          const {
+            src,
+            actualWidth,
+            withMarginTop = false,
+            withMarginRight = false,
+          } = item;
+          return (
+            <MediaImage
+              key={index}
+              className={style(classes.image, {
+                withMarginTop,
+                withMarginRight,
+              })}
+              borderRadius={0}
+              transparent
+              src={src}
+              size={MediaImage.Size.M}
+              width={`${actualWidth}px`}
+              height={IMAGE_HEIGHT}
+            />
+          );
+        }
+
+        return (
+          <Box
+            key="placeholder"
+            width={item.actualWidth}
+            height={IMAGE_HEIGHT}
+            marginTop={`${GAP}px`}
+            align="center"
+            verticalAlign="middle"
+          >
+            <Text size="small">+{item.morePlaceholder}</Text>
+          </Box>
+        );
+      })}
+    </div>
+  );
+};
+
+FormMediaGalleryItemsPreview.displayName = 'FormMediaGalleryItemsPreview';

package/src/components/media-gallery/index.ts

@@ -0,0 +1 @@
+export * from './media-gallery-view';

package/src/components/media-gallery/media-gallery-dialog/add-link-modal.tsx

@@ -0,0 +1,150 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  Modal,
+  CustomModalLayout,
+  BounceAnimation,
+  Box,
+  FormField,
+  Input,
+  RadioGroup,
+} from '@wix/design-system';
+import { useTranslations } from '../../../hooks';
+import type { OrganizeMediaItem, OrganizeMediaItemLink } from './types';
+
+enum LinkTarget {
+  newTab = '_blank',
+  currentTab = '_self',
+}
+
+export interface AddLinkModalProps {
+  mediaType?: OrganizeMediaItem['dataType'];
+  link?: OrganizeMediaItemLink;
+  onSave: (link?: OrganizeMediaItemLink) => void;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const AddLinkModal: React.FC<AddLinkModalProps> = ({
+  isOpen,
+  onClose,
+  link,
+  onSave,
+  mediaType,
+}) => {
+  const { t } = useTranslations();
+
+  const [url, setUrl] = useState(link?.url ?? '');
+  const [target, setTarget] = useState<string>(link?.target ?? '_blank');
+  const [error, setError] = useState(false);
+  const [animateUrlError, setAnimateUrlError] = useState(false);
+
+  useEffect(() => {
+    setUrl(link?.url ?? '');
+    setTarget(link?.target ?? '_blank');
+    setError(false);
+    setAnimateUrlError(false);
+  }, [link, isOpen]);
+
+  const handleOnSave = useCallback(() => {
+    const normalizedUrl = normalizeUrl(url);
+    if (normalizedUrl && !isValidUrl(normalizedUrl)) {
+      setError(true);
+      setAnimateUrlError(true);
+      return;
+    }
+    onSave(
+      normalizedUrl
+        ? {
+            url: normalizedUrl,
+            text: normalizedUrl,
+            target: target as '_blank' | '_self',
+          }
+        : undefined,
+    );
+    onClose();
+  }, [url, target, onSave, onClose]);
+
+  const onEndAnimateUrlError = useCallback(() => setAnimateUrlError(false), []);
+
+  return (
+    <Modal isOpen={isOpen} onRequestClose={onClose} screen="desktop">
+      <CustomModalLayout
+        title={
+          mediaType === 'Video'
+            ? t('CMS.mediaGallery.addLink.titleVideo')
+            : t('CMS.mediaGallery.addLink.titleImage')
+        }
+        subtitle={
+          mediaType === 'Video'
+            ? t('CMS.mediaGallery.addLink.subtitleVideo')
+            : t('CMS.mediaGallery.addLink.subtitleImage')
+        }
+        onCloseButtonClick={onClose}
+        primaryButtonText={t('CMS.mediaGallery.addLink.save')}
+        primaryButtonOnClick={handleOnSave}
+        secondaryButtonText={t('CMS.mediaGallery.addLink.cancel')}
+        secondaryButtonOnClick={onClose}
+        width="600px"
+        content={
+          <Box direction="vertical" gap="SP2">
+            <BounceAnimation
+              active={animateUrlError}
+              onEnd={onEndAnimateUrlError}
+            >
+              <FormField
+                required
+                label={t('CMS.mediaGallery.addLink.urlLabel')}
+                status={error ? 'error' : undefined}
+                statusMessage={
+                  error ? t('CMS.mediaGallery.addLink.invalidUrl') : undefined
+                }
+              >
+                <Input
+                  value={url}
+                  onChange={(e) => {
+                    setUrl(e.target.value);
+                    setError(false);
+                  }}
+                  placeholder="https://"
+                />
+              </FormField>
+            </BounceAnimation>
+            <FormField label={t('CMS.mediaGallery.addLink.targetLabel')}>
+              <RadioGroup
+                value={target}
+                onChange={(value) => setTarget(value as string)}
+              >
+                <RadioGroup.Radio value={LinkTarget.newTab}>
+                  {t('CMS.mediaGallery.addLink.newTab')}
+                </RadioGroup.Radio>
+                <RadioGroup.Radio value={LinkTarget.currentTab}>
+                  {t('CMS.mediaGallery.addLink.currentTab')}
+                </RadioGroup.Radio>
+              </RadioGroup>
+            </FormField>
+          </Box>
+        }
+      />
+    </Modal>
+  );
+};
+
+function normalizeUrl(url: string): string {
+  const trimmed = url.trim();
+  if (!trimmed) {
+    return '';
+  }
+  if (/^https?:\/\//i.test(trimmed)) {
+    return trimmed;
+  }
+  return `https://${trimmed}`;
+}
+
+function isValidUrl(url: string): boolean {
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+}

package/src/components/media-gallery/media-gallery-dialog/add-media-button.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Button, Loader } from '@wix/design-system';
+import { Add as AddIcon } from '@wix/wix-ui-icons-common';
+import { useTranslations } from '../../../hooks';
+import { useAddMediaControl } from './hooks';
+import type { OrganizeMediaItem } from './types';
+
+export interface AddMediaButtonProps {
+  onAddMedia: (items: OrganizeMediaItem[]) => void;
+}
+
+export const AddMediaButton: React.FC<AddMediaButtonProps> = ({
+  onAddMedia,
+}) => {
+  const { t } = useTranslations();
+  const { onOpen, isLoading } = useAddMediaControl(onAddMedia);
+
+  return (
+    <Button
+      prefixIcon={isLoading ? undefined : <AddIcon />}
+      onClick={onOpen}
+      dataHook="media-gallery-add-media-button"
+    >
+      {isLoading ? <Loader size="tiny" /> : t('CMS.mediaGallery.addMedia')}
+    </Button>
+  );
+};

package/src/components/media-gallery/media-gallery-dialog/content-keys.ts

@@ -0,0 +1,48 @@
+export default {
+  emptySearchResultsTitle: 'CMS.mediaGallery.dialog.emptySearchResultsTitle',
+  emptySearchResultsSubtitle:
+    'CMS.mediaGallery.dialog.emptySearchResultsSubtitle',
+  modalDone: 'CMS.mediaGallery.dialog.modalDone',
+  modalTitle: 'CMS.mediaGallery.dialog.modalTitle',
+  selectionSelectAll: 'CMS.mediaGallery.dialog.selectionSelectAll',
+  selectionDeselectAll: 'CMS.mediaGallery.dialog.selectionDeselectAll',
+  selectionDelete: 'CMS.mediaGallery.dialog.selectionDelete',
+  selectionSelected: 'CMS.mediaGallery.dialog.selectionSelected',
+  sortLabel: 'CMS.mediaGallery.dialog.sortLabel',
+  sortByTitleAsc: 'CMS.mediaGallery.dialog.sortByTitleAsc',
+  sortByTitleDesc: 'CMS.mediaGallery.dialog.sortByTitleDesc',
+  sortByFilenameAsc: 'CMS.mediaGallery.dialog.sortByFilenameAsc',
+  sortByFilenameDesc: 'CMS.mediaGallery.dialog.sortByFilenameDesc',
+  searchPlaceholder: 'CMS.mediaGallery.dialog.searchPlaceholder',
+  settingsTitle: 'CMS.mediaGallery.dialog.settingsTitle',
+  settingsNewItemsDirectionLabel:
+    'CMS.mediaGallery.dialog.settingsNewItemsDirectionLabel',
+  settingsNewItemsDirectionStart:
+    'CMS.mediaGallery.dialog.settingsNewItemsDirectionStart',
+  settingsNewItemsDirectionEnd:
+    'CMS.mediaGallery.dialog.settingsNewItemsDirectionEnd',
+  settingsNewItemsTitleLabel:
+    'CMS.mediaGallery.dialog.settingsNewItemsTitleLabel',
+  settingsNewItemsTitleEmpty:
+    'CMS.mediaGallery.dialog.settingsNewItemsTitleEmpty',
+  settingsNewItemsTitleFilename:
+    'CMS.mediaGallery.dialog.settingsNewItemsTitleFilename',
+  itemTitleLabel: 'CMS.mediaGallery.dialog.itemTitleLabel',
+  itemTitlePlaceholder: 'CMS.mediaGallery.dialog.itemTitlePlaceholder',
+  itemDescriptionLabel: 'CMS.mediaGallery.dialog.itemDescriptionLabel',
+  itemDescriptionPlaceholder:
+    'CMS.mediaGallery.dialog.itemDescriptionPlaceholder',
+  itemAltLabel: 'CMS.mediaGallery.dialog.itemAltLabel',
+  itemAltTooltip: 'CMS.mediaGallery.dialog.itemAltTooltip',
+  itemAltPlaceholder: 'CMS.mediaGallery.dialog.itemAltPlaceholder',
+  itemDeleteTooltip: 'CMS.mediaGallery.dialog.itemDeleteTooltip',
+  itemFocalPointTooltip: 'CMS.mediaGallery.dialog.itemFocalPointTooltip',
+  masonryLayoutTooltip: 'CMS.mediaGallery.dialog.masonryLayoutTooltip',
+  gridLayoutTooltip: 'CMS.mediaGallery.dialog.gridLayoutTooltip',
+  modalDoneEmpty: 'CMS.mediaGallery.dialog.modalDoneEmpty',
+  externalLinkLabel: 'CMS.mediaGallery.dialog.externalLinkLabel',
+  externalLinkButtonEdit: 'CMS.mediaGallery.dialog.externalLinkButtonEdit',
+  externalLinkButtonAdd: 'CMS.mediaGallery.dialog.externalLinkButtonAdd',
+  externalLinkTextPlaceholder:
+    'CMS.mediaGallery.dialog.externalLinkTextPlaceholder',
+};

package/src/components/media-gallery/media-gallery-dialog/hooks.ts

@@ -0,0 +1,108 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useMediaControl } from '../../media-control';
+import { MEDIA_TYPES } from '../../../utils/media-utils';
+import { convertMediaControlItemToOrganizeMediaItem } from './utils';
+import type { MediaGalleryDialogProps, OrganizeMediaItem } from './types';
+import contentKeys from './content-keys';
+
+export type MediaGalleryDialogHookParams = Partial<
+  Omit<MediaGalleryDialogProps, 'isOpen'> & { initialOpen: boolean }
+>;
+
+export type MediaGalleryDialogHookPayload = MediaGalleryDialogProps & {
+  openMediaGalleryDialog: () => void;
+};
+
+export const useMediaGalleryDialog = ({
+  initialOpen,
+  items,
+  ...rest
+}: MediaGalleryDialogHookParams): MediaGalleryDialogHookPayload => {
+  const [isOpen, setIsOpen] = useState(Boolean(initialOpen));
+
+  const openMediaGalleryDialog = useCallback(() => setIsOpen(true), []);
+  const mediaGalleryDialogItems = useMemo(() => items || [], [items]);
+  const onMediaGalleryDialogClose = useCallback(() => {
+    setIsOpen(false);
+    rest.onClose?.();
+  }, [rest.onClose]);
+
+  return {
+    openMediaGalleryDialog,
+    isOpen,
+    onClose: onMediaGalleryDialogClose,
+    items: mediaGalleryDialogItems,
+    ...rest,
+  };
+};
+
+/**
+ * Opens media manager (multi-select) to add new items to the gallery.
+ *
+ * Note: In cms-web, defaultNewItemName flows from Redux into this hook.
+ * In patterns-fields, we don't have Redux for preferences, so the conversion
+ * always uses mediaId for `name`. The dialog's `onAddMedia` callback
+ * handles the EMPTY case by calling `setItemsEmptyTitles`.
+ */
+export const useAddMediaControl = (
+  onAddMedia?: (newItems: OrganizeMediaItem[]) => void,
+) => {
+  const onChange = useCallback(
+    (value: string[]) => {
+      onAddMedia?.(
+        value
+          .map((val) => convertMediaControlItemToOrganizeMediaItem(val))
+          .filter(Boolean) as OrganizeMediaItem[],
+      );
+    },
+    [onAddMedia],
+  );
+
+  const { callMedia, loading } = useMediaControl({
+    multiSelect: true,
+    mediaType: MEDIA_TYPES.GALLERY,
+    onChange,
+  });
+
+  return {
+    onOpen: useCallback(() => callMedia(), [callMedia]),
+    isLoading: loading,
+  };
+};
+
+/** Opens media manager (single-select) to replace one item */
+export const useReplaceMediaControl = (
+  onMediaReplaced?: (newItem: OrganizeMediaItem) => void,
+) => {
+  const onChange = useCallback(
+    (value: string) => {
+      const newItem = convertMediaControlItemToOrganizeMediaItem(value);
+      if (newItem) {
+        onMediaReplaced?.(newItem);
+      }
+    },
+    [onMediaReplaced],
+  );
+
+  const { callMedia, loading } = useMediaControl({
+    multiSelect: false,
+    mediaType: MEDIA_TYPES.ALL_MEDIA,
+    onChange,
+  });
+
+  return {
+    onOpen: useCallback(() => callMedia(), [callMedia]),
+    isLoading: loading,
+  };
+};
+
+/** Product requirement: show different text on Done button if there are no items yet */
+export const useContentKeys = (items: OrganizeMediaItem[]) =>
+  useMemo(
+    () => ({
+      ...contentKeys,
+      modalDone:
+        items.length === 0 ? contentKeys.modalDoneEmpty : contentKeys.modalDone,
+    }),
+    [items],
+  );

package/src/components/media-gallery/media-gallery-dialog/item-actions.tsx

@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react';
+import { Box, Button, Loader } from '@wix/design-system';
+import { useTranslations } from '../../../hooks';
+import { useReplaceMediaControl } from './hooks';
+import type { OrganizeMediaItem, OrganizeMediaItemChange } from './types';
+
+export interface ItemActionsProps {
+  item: OrganizeMediaItem;
+  onReplace: (change: OrganizeMediaItemChange) => void;
+}
+
+export const ItemActions: React.FC<ItemActionsProps> = ({
+  item,
+  onReplace,
+}) => {
+  const { t } = useTranslations();
+
+  const onMediaReplaced = useCallback(
+    (newItem: OrganizeMediaItem) => {
+      onReplace({ itemId: item.id ?? '', data: newItem });
+    },
+    [item.id, onReplace],
+  );
+
+  const { onOpen, isLoading } = useReplaceMediaControl(onMediaReplaced);
+
+  return (
+    <Box align="center" verticalAlign="middle" gap="SP1" paddingRight="SP1">
+      <Button
+        priority="secondary"
+        size="small"
+        onClick={onOpen}
+        dataHook="media-gallery-replace-item"
+      >
+        {isLoading ? <Loader size="tiny" /> : t('CMS.mediaGallery.replaceItem')}
+      </Button>
+    </Box>
+  );
+};