@wix/patterns-fields 1.0.0

package/src/utils/media-item-utils.ts

@@ -0,0 +1,305 @@
+/**
+ * Media Item URI utilities
+ * Ported from @wix/santa-platform-utils/src/mediaItemUtils/mediaItemUtils.js
+ * Rewritten in TypeScript without lodash dependency.
+ */
+
+// --- Types ---
+
+export type MediaType = 'image' | 'document' | 'video' | 'audio' | 'vector';
+
+export interface CreateMediaItemParams {
+  mediaId: string;
+  type: MediaType;
+  title?: string;
+  width?: number;
+  height?: number;
+  posterId?: string;
+  watermark?: string;
+  duration?: number;
+}
+
+export interface CreateMediaItemResult {
+  item: string;
+}
+export interface MediaItemError {
+  error: string;
+}
+
+export interface ParsedImageItem {
+  type: 'image';
+  mediaId: string;
+  title: string;
+  width: number;
+  height: number;
+  watermark?: string;
+}
+
+export interface ParsedVideoItem {
+  type: 'video';
+  mediaId: string;
+  posterId: string;
+  width: number;
+  height: number;
+  title: string;
+}
+
+export interface ParsedDocumentItem {
+  type: 'document';
+  mediaId: string;
+  title: string;
+}
+export interface ParsedVectorItem {
+  type: 'vector';
+  mediaId: string;
+  title: string;
+}
+export interface ParsedAudioItem {
+  type: 'audio';
+  mediaId: string;
+  title: string;
+  duration: number;
+}
+
+export type ParsedMediaItem =
+  | ParsedImageItem
+  | ParsedVideoItem
+  | ParsedDocumentItem
+  | ParsedVectorItem
+  | ParsedAudioItem;
+export type ParseMediaItemResult = ParsedMediaItem | MediaItemError;
+export type CreateMediaItemUriResult = CreateMediaItemResult | MediaItemError;
+
+// --- Constants ---
+
+const errors = {
+  empty_media_id: 'empty_media_id',
+  empty_poster_id: 'empty_poster_id',
+  bad_media_id: 'bad_media_id',
+  unknown_media_type: 'unknown_media_type',
+  missing_width_height: 'missing_width_height',
+  non_string_media_id: 'non_string_media_id',
+} as const;
+
+// --- Regex matchers ---
+
+const matchers = {
+  image:
+    /^wix:image:\/\/v1\/([^/]+)\/([^/]+)#originWidth=([0-9]+)&originHeight=([0-9]+)(?:&watermark=([^/]+))?$/,
+  video:
+    /^wix:video:\/\/v1\/([^/]+)\/([^/]+)#posterUri=([^/]+)&posterWidth=([0-9]+)&posterHeight=([0-9]+)$/,
+  document: /^wix:document:\/\/v1\/([^/]+(?:\/[^/]+)?)\/([^/]+)$/,
+  vector: /^wix:vector:\/\/v1\/([^/]+)\/([^/]*)$/,
+  audio: /^wix:audio:\/\/v1\/([^/]+)\/([^/]+)#duration=([0-9]+)$/,
+  deprecated_video:
+    /^wix:video:\/\/v1\/([^/]+)\/([^/]+)\/#posterUri=([^/]+)&posterWidth=([0-9]+)&posterHeight=([0-9]+)$/,
+  deprecated_image: /^image:\/\/v1\/([^/]+)\/([0-9]+)_([0-9]+)\/([^/]*)$/,
+  deprecated_type: /^(image):/,
+  type: /^wix:(\w+):/,
+  splitExtension: /\.(?=[^.]+$)/,
+  emptyTitle: /^_\./,
+};
+
+// --- Helpers ---
+
+function convertTitleToFilename(
+  type: MediaType,
+  title = '',
+  uri: string,
+): string {
+  const [uriName, uriExtension] = uri.split(matchers.splitExtension);
+  const [titleName, titleExtension] = title.split(matchers.splitExtension);
+  let filename = '';
+  switch (type) {
+    case 'image':
+      filename = `${titleName || '_'}.${titleExtension || uriExtension}`;
+      break;
+    case 'video':
+      filename = `${titleName || '_'}${
+        titleExtension ? `.${titleExtension}` : ''
+      }`;
+      break;
+    case 'document':
+    case 'audio':
+    case 'vector':
+      filename = `${titleName || uriName}.${titleExtension || uriExtension}`;
+      break;
+  }
+  return encodeURI(filename);
+}
+
+function convertFilenameToTitle(filename: string): string {
+  if (matchers.emptyTitle.test(filename)) {
+    return '';
+  }
+  try {
+    return decodeURI(filename);
+  } catch {
+    return filename;
+  }
+}
+
+// --- Parse ---
+
+export function parseMediaItemUri(mediaItemUri = ''): ParseMediaItemResult {
+  if (typeof mediaItemUri !== 'string') {
+    return { error: errors.non_string_media_id };
+  }
+
+  const [, type] = mediaItemUri.match(matchers.type) || [];
+  switch (type) {
+    case 'image': {
+      const [, mediaId, filename, w, h, watermark] =
+        mediaItemUri.match(matchers.image) || [];
+      if (mediaId) {
+        const parsed: ParsedImageItem = {
+          type: 'image',
+          mediaId,
+          title: convertFilenameToTitle(filename),
+          width: parseInt(w, 10),
+          height: parseInt(h, 10),
+        };
+        if (watermark) {
+          parsed.watermark = watermark;
+        }
+        return parsed;
+      }
+      return { error: errors.bad_media_id };
+    }
+    case 'video': {
+      const videoMatcher = matchers.deprecated_video.test(mediaItemUri)
+        ? matchers.deprecated_video
+        : matchers.video;
+      const [, mediaId, filename, posterId, w, h] =
+        mediaItemUri.match(videoMatcher) || [];
+      if (mediaId && posterId) {
+        return {
+          type: 'video',
+          mediaId,
+          posterId,
+          title: convertFilenameToTitle(filename),
+          width: parseInt(w, 10),
+          height: parseInt(h, 10),
+        };
+      }
+      return { error: errors.bad_media_id };
+    }
+    case 'document': {
+      const [, mediaId, filename] = mediaItemUri.match(matchers.document) || [];
+      if (mediaId) {
+        return {
+          type: 'document',
+          mediaId,
+          title: convertFilenameToTitle(filename),
+        };
+      }
+      return { error: errors.bad_media_id };
+    }
+    case 'vector': {
+      const [, mediaId, filename] = mediaItemUri.match(matchers.vector) || [];
+      if (mediaId) {
+        return {
+          type: 'vector',
+          mediaId,
+          title: convertFilenameToTitle(filename),
+        };
+      }
+      return { error: errors.bad_media_id };
+    }
+    case 'audio': {
+      const [, mediaId, filename, duration] =
+        mediaItemUri.match(matchers.audio) || [];
+      if (mediaId) {
+        return {
+          type: 'audio',
+          mediaId,
+          title: convertFilenameToTitle(filename),
+          duration: parseInt(duration, 10),
+        };
+      }
+      return { error: errors.bad_media_id };
+    }
+    default: {
+      // Check deprecated image format
+      const [, deprecatedType] =
+        mediaItemUri.match(matchers.deprecated_type) || [];
+      if (deprecatedType) {
+        const [, mediaId, w, h, filename] =
+          mediaItemUri.match(matchers.deprecated_image) || [];
+        if (mediaId) {
+          return {
+            type: 'image',
+            mediaId,
+            title: convertFilenameToTitle(filename),
+            width: parseInt(w, 10),
+            height: parseInt(h, 10),
+          };
+        }
+      }
+      return { error: errors.unknown_media_type };
+    }
+  }
+}
+
+// --- Create ---
+
+export function createMediaItemUri(
+  params: CreateMediaItemParams,
+): CreateMediaItemUriResult {
+  const {
+    mediaId,
+    type,
+    title = '',
+    width = 0,
+    height = 0,
+    posterId = '',
+    watermark,
+    duration = 0,
+  } = params;
+  if (!mediaId) {
+    return { error: errors.empty_media_id };
+  }
+  const filename = convertTitleToFilename(type, title, mediaId);
+
+  switch (type) {
+    case 'image': {
+      if (isNaN(height) || isNaN(width)) {
+        return { error: errors.missing_width_height };
+      }
+      const wm = watermark ? `&watermark=${watermark}` : '';
+      return {
+        item: `wix:image://v1/${mediaId}/${filename}#originWidth=${width}&originHeight=${height}${wm}`,
+      };
+    }
+    case 'video': {
+      if (!posterId) {
+        return { error: errors.empty_poster_id };
+      }
+      if (isNaN(height) || isNaN(width)) {
+        return { error: errors.missing_width_height };
+      }
+      const vid = mediaId.replace('video/', '');
+      return {
+        item: `wix:video://v1/${vid}/${filename}#posterUri=${posterId}&posterWidth=${width}&posterHeight=${height}`,
+      };
+    }
+    case 'document':
+      return { item: `wix:document://v1/${mediaId}/${filename}` };
+    case 'vector':
+      return { item: `wix:vector://v1/${mediaId}/${filename}` };
+    case 'audio':
+      return {
+        item: `wix:audio://v1/${mediaId}/${filename}#duration=${duration}`,
+      };
+    default:
+      return { error: errors.unknown_media_type };
+  }
+}
+
+// --- Type guard ---
+
+export function isMediaItemError(
+  result: ParseMediaItemResult | CreateMediaItemUriResult,
+): result is MediaItemError {
+  return 'error' in result;
+}

package/src/utils/media-utils.ts

@@ -0,0 +1,163 @@
+/**
+ * Local media utilities - pure string parsing, no external dependencies.
+ * Pure string-based parsing without external dependencies.
+ */
+
+// URI format: wix:{type}://v1/{mediaId}/{filename}[#params]
+const WIX_DOCUMENT_URI_REGEX = /^wix:document:\/\/v1\/(.+)\/([^/]+)$/;
+const WIX_IMAGE_URI_REGEX = /^wix:image:\/\/v1\/([^/]+)\/([^/#]+)/;
+const WIX_VIDEO_URI_REGEX = /^wix:video:\/\/v1\/([^/]+)\/([^/#]+)/;
+const WIX_AUDIO_URI_REGEX = /^wix:audio:\/\/v1\/([^/]+)\/([^/#]+)/;
+const WIX_VECTOR_URI_REGEX = /^wix:vector:\/\/v1\/([^/]+)\/([^/#]+)/;
+
+/**
+ * Helper to check if URI is decodable
+ */
+const isDecodable = (uri: string): boolean => {
+  try {
+    decodeURI(uri);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+const isValidUrl = (str: string): boolean => {
+  try {
+    new URL(str);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+// Type checkers for different media URIs
+export const isWixDocumentURI = (uri: string): boolean => {
+  if (!uri || typeof uri !== 'string') {
+    return false;
+  }
+  return isDecodable(uri) && WIX_DOCUMENT_URI_REGEX.test(uri);
+};
+
+export const isWixImageURI = (uri: string): boolean => {
+  if (!uri || typeof uri !== 'string') {
+    return false;
+  }
+  return isDecodable(uri) && WIX_IMAGE_URI_REGEX.test(uri);
+};
+
+export const isWixVideoURI = (uri: string): boolean => {
+  if (!uri || typeof uri !== 'string') {
+    return false;
+  }
+  return isDecodable(uri) && WIX_VIDEO_URI_REGEX.test(uri);
+};
+
+export const isWixAudioURI = (uri: string): boolean => {
+  if (!uri || typeof uri !== 'string') {
+    return false;
+  }
+  return isDecodable(uri) && WIX_AUDIO_URI_REGEX.test(uri);
+};
+
+export const isWixVectorURI = (uri: string): boolean => {
+  if (!uri || typeof uri !== 'string') {
+    return false;
+  }
+  return isDecodable(uri) && WIX_VECTOR_URI_REGEX.test(uri);
+};
+
+/**
+ * Extract filename from a URI using the appropriate regex
+ */
+const extractFilename = (uri: string, regex: RegExp): string | null => {
+  const match = uri.match(regex);
+  if (!match || !match[2]) {
+    return null;
+  }
+  try {
+    return decodeURIComponent(match[2]);
+  } catch {
+    return match[2];
+  }
+};
+
+/**
+ * Get the title/filename from any Wix media URI
+ * Supports: document, image, video, audio, vector
+ */
+export const getMediaTitle = (uri: string): string => {
+  if (!uri || typeof uri !== 'string') {
+    return uri || '';
+  }
+
+  if (isWixImageURI(uri)) {
+    return extractFilename(uri, WIX_IMAGE_URI_REGEX) || uri;
+  }
+
+  if (isWixVideoURI(uri)) {
+    return extractFilename(uri, WIX_VIDEO_URI_REGEX) || uri;
+  }
+
+  if (isWixAudioURI(uri)) {
+    return extractFilename(uri, WIX_AUDIO_URI_REGEX) || uri;
+  }
+
+  if (isWixVectorURI(uri)) {
+    return extractFilename(uri, WIX_VECTOR_URI_REGEX) || uri;
+  }
+
+  if (isWixDocumentURI(uri)) {
+    return extractFilename(uri, WIX_DOCUMENT_URI_REGEX) || uri;
+  }
+
+  // Fallback: return the URI as-is or try to extract filename from URL path
+  if (isValidUrl(uri)) {
+    try {
+      const url = new URL(uri);
+      const pathname = url.pathname;
+      const filename = pathname.split('/').pop();
+      return filename ? decodeURIComponent(filename) : uri;
+    } catch {
+      return uri;
+    }
+  }
+
+  return uri;
+};
+
+export const executeDownloading = (url: string) => {
+  window.open(url, '_blank', 'noopener');
+};
+
+// Media types enum for media manager
+export enum MEDIA_TYPES {
+  ALL_MEDIA = 'ALL_MEDIA',
+  VIDEO = 'VIDEO_BOX',
+  IMAGE = 'AUTO_CMS_IMAGE',
+  AUDIO = 'MUSIC',
+  GALLERY = 'PRO_GALLERY',
+}
+
+/**
+ * Simple validation for document/image URLs
+ */
+export const isDataValidOrNotSet = (
+  data: string | undefined,
+  type: 'document' | 'image',
+): boolean => {
+  if (data === undefined || data === null || data === '') {
+    return true; // Not set = valid
+  }
+
+  if (type === 'document') {
+    return isWixDocumentURI(data) || isValidUrl(data);
+  }
+
+  // For image type, check if it's a Wix image URI or valid URL
+  if (type === 'image') {
+    return isWixImageURI(data) || isValidUrl(data);
+  }
+
+  return isValidUrl(data);
+};

package/src/utils/noop.ts

@@ -0,0 +1,4 @@
+/**
+ * No-operation function - useful as a default callback
+ */
+export const noop = () => {};

package/src/utils/object-utils.ts

@@ -0,0 +1,12 @@
+/**
+ * Removes null and undefined values from an object
+ */
+export const omitNullish = <T extends Record<string, unknown>>(
+  obj: T,
+): Partial<T> => {
+  return Object.fromEntries(
+    Object.entries(obj).filter(
+      ([, value]) => value !== null && value !== undefined,
+    ),
+  ) as Partial<T>;
+};

package/src/utils/request-idle-callback.ts

@@ -0,0 +1,10 @@
+const globalObj = window;
+
+export const requestIdleCallback =
+  globalObj &&
+  (globalObj.requestIdleCallback?.bind(globalObj) ||
+    globalObj.requestAnimationFrame?.bind(globalObj));
+export const cancelIdleCallback =
+  globalObj &&
+  (globalObj.cancelIdleCallback?.bind(globalObj) ||
+    globalObj.cancelAnimationFrame?.bind(globalObj));

package/src/utils/safe-json.ts

@@ -0,0 +1,55 @@
+export function safeParse(value: string): any {
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+
+const isObject = (value: any): value is Record<string, unknown> =>
+  Boolean(value && typeof value === 'object');
+
+function stringify(
+  value: any,
+  applyFormatting?: boolean,
+  replacer?: (key: string, value: any) => any,
+): string {
+  return typeof value === 'string'
+    ? value
+    : JSON.stringify(value, replacer, applyFormatting ? 2 : undefined);
+}
+
+const flatObjectValues = (value: any, depth = 1): any[] => [
+  value,
+  ...(isObject(value) && depth > 0
+    ? Object.values(value).flatMap((val) => flatObjectValues(val, depth - 1))
+    : []),
+];
+
+function shallowStringify(value: any, applyFormatting?: boolean): string {
+  const shallowValues = new Set(flatObjectValues(value));
+
+  const replacer = (_: string, target: any): any => {
+    if (shallowValues.has(target)) {
+      return target;
+    }
+
+    if (!isObject(target)) {
+      return target;
+    }
+
+    return Array.isArray(target) ? '[...]' : '{...}';
+  };
+
+  return stringify(value, applyFormatting, replacer);
+}
+
+export function safeStringify(
+  value: any,
+  applyFormatting?: boolean,
+  shallow?: boolean,
+): string {
+  return shallow
+    ? shallowStringify(value, applyFormatting)
+    : stringify(value, applyFormatting);
+}

package/src/utils/tooltip.ts

@@ -0,0 +1,17 @@
+import type { TooltipCommonProps } from '@wix/design-system';
+
+export const SHOW_TOOLTIP_DELAY = 300;
+
+export const TOOLTIP_MAX_WIDTH = 254;
+export const tooltipCommonProps: TooltipCommonProps = {
+  size: 'medium',
+  enterDelay: SHOW_TOOLTIP_DELAY,
+  maxWidth: TOOLTIP_MAX_WIDTH,
+};
+
+export const SMALL_TOOLTIP_MAX_WIDTH = 196;
+export const smallTooltipCommonProps: TooltipCommonProps = {
+  size: 'small',
+  enterDelay: SHOW_TOOLTIP_DELAY,
+  maxWidth: SMALL_TOOLTIP_MAX_WIDTH,
+};

package/src/utils/truncate-entity-title.ts

@@ -0,0 +1,6 @@
+const MAX_LENGTH_OF_ENTITY_TITLE_TOOLTIP = 256;
+
+export const truncateEntityTitle = (title: string | undefined) =>
+  ((title ?? '').length > MAX_LENGTH_OF_ENTITY_TITLE_TOOLTIP
+    ? title?.substring(0, MAX_LENGTH_OF_ENTITY_TITLE_TOOLTIP).concat('…')
+    : title) ?? '';

package/src/validations/array.ts

@@ -0,0 +1,21 @@
+export const isValid = (data: any): data is any[] => {
+  return Array.isArray(data);
+};
+
+export const hardConvert = (data: any) => {
+  if (typeof data !== 'string') {
+    throw new Error(`Can not convert "${data}" into array`);
+  }
+
+  try {
+    return JSON.parse(data);
+  } catch {
+    return data.split(',').map((item) => {
+      try {
+        return JSON.parse(item);
+      } catch {
+        return item.trim();
+      }
+    });
+  }
+};

package/src/validations/email.ts

@@ -0,0 +1,19 @@
+/**
+ * domain : domain regex
+ * email: email regex
+ */
+const { emailRegex } = (() => {
+  const anyLetter = '\u00A1-\uD7FF\uE000-\uFFFF-a-zA-Z';
+  const anyDigit = '0-9';
+  const anyLetterOrDigit = `${anyLetter}${anyDigit}`;
+  const anyAllowedSymbol = "!#$%&'*+/=?^_`{|}~-";
+  const allowedWithoutQuotes = `[${anyLetterOrDigit}${anyAllowedSymbol}]+(?:\\.[${anyLetterOrDigit}${anyAllowedSymbol}]+)*`;
+  const allowedBetweenQuotes =
+    '"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|[\x01-\x09\x0b\x0c\x0e-\x7f])*"';
+  const localPart = `(?:${allowedWithoutQuotes}|${allowedBetweenQuotes})`;
+  const domainPart = `(?:[${anyLetterOrDigit}](?:[${anyLetterOrDigit}-]*[${anyLetterOrDigit}])?\\.)+(?:(?:[${anyDigit}]+[${anyLetter}][${anyLetterOrDigit}]*)|(?:[${anyLetter}][${anyLetterOrDigit}]{1,}))`;
+  const email = new RegExp('^' + localPart + '@' + domainPart + '$');
+  return { emailRegex: email };
+})();
+
+export const isValid = (value: string): boolean => emailRegex.test(value);

package/src/validations/object.ts

@@ -0,0 +1,15 @@
+export const isValid = (data: any): data is Record<string, unknown> => {
+  return Object.prototype.toString.apply(data) === '[object Object]';
+};
+
+export const hardConvert = (data: any) => {
+  if (typeof data === 'string') {
+    const parsed = JSON.parse(data);
+
+    if (isValid(parsed)) {
+      return parsed;
+    }
+  }
+
+  throw new Error(`Can not convert "${data}" into object`);
+};

package/src/validations/rich-content.ts

@@ -0,0 +1,34 @@
+import type { RichContent } from '@wix/ricos';
+import { ensureRicosContent, fromPlainText } from '@wix/ricos';
+
+export const isValid = (data: unknown): data is RichContent => {
+  if (!data || typeof data !== 'object') {
+    return false;
+  }
+  try {
+    ensureRicosContent(data as RichContent);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+export const hardConvert = (data: unknown): RichContent => {
+  if (data === null || data === undefined) {
+    return fromPlainText('');
+  }
+
+  if (isValid(data)) {
+    return ensureRicosContent(data);
+  }
+
+  if (typeof data === 'string') {
+    return fromPlainText(data);
+  }
+
+  try {
+    return fromPlainText(JSON.stringify(data));
+  } catch {
+    return fromPlainText(String(data));
+  }
+};

package/src/validations/rich-text.ts

@@ -0,0 +1,24 @@
+export const isValid = (data: any): data is string => {
+  return typeof data === 'string';
+};
+
+export const hardConvert = (data: any) => {
+  if (data === null || data === undefined) {
+    return '';
+  }
+
+  if (typeof data === 'string') {
+    return data;
+  }
+
+  if (typeof data === 'object') {
+    try {
+      return JSON.stringify(data);
+    } catch {
+      throw new Error(`Cannot convert "${data}" into rich text`);
+    }
+  }
+
+  // For numbers, booleans, etc., convert to string
+  return String(data);
+};