@wix/patterns-fields 1.0.0

package/src/components/exclamation/exclamation.tsx

@@ -0,0 +1,86 @@
+import type { FC, ReactNode } from 'react';
+import React, { useMemo } from 'react';
+
+import type { BoxProps, TooltipProps } from '@wix/design-system';
+import { Box, Tooltip } from '@wix/design-system';
+import {
+  StatusAlertFilled,
+  StatusWarningFilled,
+} from '@wix/wix-ui-icons-common';
+
+import { classes, st } from './exclamation.st.css.js';
+
+const TOOLTIP_MAX_WIDTH = 230;
+const SMALL_TOOLTIP_MAX_WIDTH = 204;
+
+interface ExclamationProps {
+  size?: number;
+  type?: 'warning' | 'error';
+  className?: string;
+}
+
+const getExclamationIcon = (type: ExclamationProps['type']) =>
+  type === 'error' ? StatusAlertFilled : StatusWarningFilled;
+
+export const Exclamation: FC<ExclamationProps> = ({
+  className,
+  type = 'warning',
+  size,
+}) => {
+  const Icon = useMemo(() => getExclamationIcon(type), [type]);
+
+  return (
+    <Box
+      className={st(
+        classes.exclamation,
+        {
+          type,
+        },
+        className,
+      )}
+    >
+      <Icon size={size} data-hook="exclamation-icon" />
+    </Box>
+  );
+};
+
+Exclamation.displayName = 'Exclamation';
+
+export interface DetailedExclamationProps extends ExclamationProps {
+  onShow?: () => void;
+  tooltipContent?: ReactNode;
+  tooltipSize?: TooltipProps['size'];
+  boxProps?: BoxProps;
+  dataHook?: string;
+}
+
+export const DetailedExclamation: FC<DetailedExclamationProps> = ({
+  onShow,
+  tooltipContent,
+  tooltipSize,
+  boxProps,
+  dataHook,
+  ...exclamationProps
+}) => {
+  const maxWidth =
+    tooltipSize === 'small' ? SMALL_TOOLTIP_MAX_WIDTH : TOOLTIP_MAX_WIDTH;
+
+  const tooltipProps = {
+    dataHook,
+    appendTo: 'window' as const,
+    size: tooltipSize,
+    maxWidth,
+    onShow,
+    content: tooltipContent,
+  };
+
+  return (
+    <Box {...boxProps}>
+      <Tooltip {...tooltipProps}>
+        <Exclamation {...exclamationProps} />
+      </Tooltip>
+    </Box>
+  );
+};
+
+DetailedExclamation.displayName = 'DetailedExclamation';

package/src/components/exclamation/index.ts

@@ -0,0 +1,2 @@
+export * from './exclamation';
+export * from './type-mismatch-exclamation';

package/src/components/exclamation/type-mismatch-exclamation.tsx

@@ -0,0 +1,163 @@
+import type { FC, ReactNode } from 'react';
+import React, { useCallback } from 'react';
+
+import type { BoxProps } from '@wix/design-system';
+import { Box, Loader, TextButton } from '@wix/design-system';
+
+import type { DetailedExclamationProps } from './exclamation';
+import { DetailedExclamation } from './exclamation';
+import { classes } from './exclamation.st.css.js';
+
+export interface TypeMismatchExclamationProps {
+  /** The translated field type name for display */
+  typeName: string;
+  /** The translated field name for display */
+  fieldName: string;
+  /** Whether the data can be converted to the target type */
+  isConverted: boolean;
+  /** Whether conversion is in progress */
+  isConverting: boolean;
+  /** The converted value to apply on convert click */
+  convertedValue: unknown;
+  /** Handler for converting the value */
+  onChange: (data?: unknown) => void;
+  /** Handler for clearing the value */
+  onClear: () => void;
+  /** Whether the field is read-only */
+  readOnly?: boolean;
+  /** Box props for styling */
+  boxProps?: BoxProps;
+  /** Mouse down handler for action buttons */
+  onActionMouseDown?: React.MouseEventHandler;
+  /** Called when the tooltip is shown */
+  onShow?: () => void;
+  /** Called when the convert action is triggered */
+  onConvertClick?: () => void;
+  /** Called when the clear action is triggered */
+  onClearClick?: () => void;
+  /** Localized text for "Convert to {typeName}" button */
+  convertButtonText: string;
+  /** Localized text for disabled convert button */
+  convertDisabledText: string;
+  /** Localized text for "Clear" button */
+  clearButtonText: string;
+  /** Localized text for the tooltip message */
+  tooltipText: string;
+}
+
+export const TypeMismatchExclamation: FC<TypeMismatchExclamationProps> = ({
+  typeName,
+  isConverted,
+  isConverting,
+  convertedValue,
+  onClear,
+  onChange,
+  readOnly,
+  boxProps,
+  onActionMouseDown,
+  onShow,
+  onConvertClick,
+  onClearClick,
+  convertButtonText,
+  convertDisabledText,
+  clearButtonText,
+  tooltipText,
+}) => {
+  const onConvert = useCallback(() => {
+    onChange(convertedValue);
+    onConvertClick?.();
+  }, [onChange, convertedValue, onConvertClick]);
+
+  const onClearHandler = useCallback(() => {
+    onClear();
+    onClearClick?.();
+  }, [onClear, onClearClick]);
+
+  const isConvertAllowed = isConverted && !readOnly;
+  const convertBtn =
+    isConvertAllowed || isConverting ? (
+      <TextButton
+        className={classes.action}
+        skin="light"
+        onClick={onConvert}
+        size="small"
+        underline="always"
+        disabled={isConverting}
+        suffixIcon={
+          isConverting ? <Loader color="white" size="tiny" /> : undefined
+        }
+        dataHook="type-mismatch-exclamation-convert-button"
+      >
+        {convertButtonText}
+      </TextButton>
+    ) : (
+      <TextButton
+        className={classes.action}
+        skin="light"
+        size="small"
+        underline="always"
+        disabled
+        dataHook="type-mismatch-exclamation-convert-disabled-button"
+      >
+        {convertDisabledText}
+      </TextButton>
+    );
+
+  const clearBtn = (
+    <TextButton
+      className={classes.action}
+      skin="light"
+      size="small"
+      underline="always"
+      disabled={readOnly}
+      onClick={readOnly ? undefined : onClearHandler}
+      dataHook="type-mismatch-exclamation-clear-button"
+    >
+      {clearButtonText}
+    </TextButton>
+  );
+
+  return (
+    <TypeMismatchDetailedExclamation
+      boxProps={boxProps}
+      typeName={typeName}
+      tooltipText={tooltipText}
+      tooltipContent={
+        <div className={classes.actions} onMouseDown={onActionMouseDown}>
+          {convertBtn}
+          {clearBtn}
+        </div>
+      }
+      onShow={onShow}
+    />
+  );
+};
+
+TypeMismatchExclamation.displayName = 'TypeMismatchExclamation';
+
+interface TypeMismatchDetailedExclamationProps
+  extends Omit<DetailedExclamationProps, 'tooltipContent'> {
+  typeName: string;
+  tooltipText: string;
+  tooltipContent?: ReactNode;
+}
+
+export const TypeMismatchDetailedExclamation: FC<
+  TypeMismatchDetailedExclamationProps
+> = ({ typeName, tooltipText, tooltipContent, ...props }) => {
+  return (
+    <DetailedExclamation
+      {...props}
+      dataHook="type-mismatch-detailed-exclamation-tooltip"
+      type="warning"
+      tooltipContent={
+        <Box direction="vertical" gap="12px">
+          {tooltipText}
+          {tooltipContent}
+        </Box>
+      }
+    />
+  );
+};
+
+TypeMismatchDetailedExclamation.displayName = 'TypeMismatchDetailedExclamation';

package/src/components/highlighted-text/highlighted-text.st.css

@@ -0,0 +1,39 @@
+@property st-global(--wds-color-yellow-200);
+@property st-global(--wds-color-yellow-400);
+@property st-global(--wsr-color-Y20);
+@property st-global(--wsr-color-Y40);
+
+.root {
+    -st-states: highlightedBackground;
+}
+
+.root:highlightedBackground {
+    animation: highlighted 150ms ease-out 1 forwards;
+}
+
+.substring {
+    -st-states: isHighlighted;
+}
+
+.substring:isHighlighted {
+    animation: highlighted-match 150ms ease-out 50ms 1 forwards;
+}
+
+
+@keyframes highlighted {
+    from {
+        background-color: transparent;
+    }
+    to {
+        background-color: var(--wds-color-yellow-400, var(--wsr-color-Y40));
+    }
+}
+
+@keyframes highlighted-match {
+    from {
+        background-color: transparent;
+    }
+    to {
+        background-color: var(--wds-color-yellow-200, var(--wsr-color-Y20));
+    }
+}

package/src/components/highlighted-text/highlighted-text.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "highlightedtext2964394036";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style: import("@stylable/runtime").STFunction = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"highlightedtext2964394036__root","substring":"highlightedtext2964394036__substring"};
+export var keyframes = {"highlighted":"highlightedtext2964394036__highlighted","highlighted-match":"highlightedtext2964394036__highlighted-match"}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"wds-color-yellow-200":"--wds-color-yellow-200","wds-color-yellow-400":"--wds-color-yellow-400","wsr-color-Y20":"--wsr-color-Y20","wsr-color-Y40":"--wsr-color-Y40"}; 
+
+
+
+

package/src/components/highlighted-text/highlighted-text.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { style, classes } from './highlighted-text.st.css.js';
+
+import type { HighlightDescriptor } from '../../utils';
+
+export interface HighlightTextProps {
+  highlight: HighlightDescriptor;
+  highlightedBackground?: boolean;
+  className?: string;
+  dataHook?: string;
+}
+
+export const HighlightedText: React.FC<HighlightTextProps> = ({
+  highlight,
+  highlightedBackground = true,
+  className,
+  dataHook,
+}) => (
+  <span
+    data-hook={dataHook}
+    className={style(classes.root, { highlightedBackground }, className)}
+  >
+    {highlight.map(({ substring, isHighlighted }, key) => (
+      <span
+        key={key}
+        className={style(classes.substring, { isHighlighted })}
+        children={substring}
+      />
+    ))}
+  </span>
+);

package/src/components/highlighted-text/index.ts

@@ -0,0 +1 @@
+export * from './highlighted-text';

package/src/components/index.ts

@@ -0,0 +1,16 @@
+export * from './address';
+export * from './audio';
+export * from './common';
+export * from './exclamation';
+export * from './time-input';
+export * from './time-view';
+export * from './object';
+export * from './media-gallery';
+export * from './rich-content';
+export * from './rich-text';
+export * from './text';
+export * from './video';
+export * from './document';
+export * from './multi-document';
+export * from './color-view';
+export * from './delete-dialog';

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

@@ -0,0 +1,6 @@
+export * from './types';
+export * from './use-media-control';
+export * from './use-paste-url-form';
+export * from './use-document-delete';
+export * from './paste-url-button';
+export * from './paste-url-form';

package/src/components/media-control/paste-url-button.st.css

@@ -0,0 +1,12 @@
+.root {
+    margin-top: 6px;
+}
+
+.iconButtonTooltip {
+    height: max-content;
+}
+
+.iconButton {
+    width: 24px;
+    height: 24px;
+}

package/src/components/media-control/paste-url-button.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "pasteurlbutton4171484403";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style: import("@stylable/runtime").STFunction = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"pasteurlbutton4171484403__root","iconButtonTooltip":"pasteurlbutton4171484403__iconButtonTooltip","iconButton":"pasteurlbutton4171484403__iconButton"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

package/src/components/media-control/paste-url-button.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { classes } from './paste-url-button.st.css.js';
+import { TextButton } from '@wix/design-system';
+
+export interface PasteURLButtonProps {
+  disabled?: boolean;
+  onClick: () => void;
+  title: string;
+  dataHook?: string;
+}
+
+export const PasteURLButton: React.FC<PasteURLButtonProps> = ({
+  disabled,
+  onClick,
+  title,
+  dataHook = 'paste-url-button',
+}) => {
+  return (
+    <TextButton
+      size="small"
+      underline="always"
+      className={classes.root}
+      disabled={disabled}
+      onClick={onClick}
+      dataHook={dataHook}
+    >
+      {title}
+    </TextButton>
+  );
+};
+
+PasteURLButton.displayName = 'PasteURLButton';

package/src/components/media-control/paste-url-form.tsx

@@ -0,0 +1,65 @@
+import React, { useCallback, useMemo } from 'react';
+
+import { isDataValidOrNotSet } from '../../utils/media-utils';
+
+import { useTranslations } from '../../hooks';
+import { PasteURLModal } from './paste-url-modal';
+
+export enum MediaFieldType {
+  image = 'image',
+  document = 'document',
+}
+
+export interface PasteURLFormProps {
+  value?: string;
+  title: string;
+  show: boolean;
+  closeModal: () => void;
+  onSave: (value: string) => void;
+  fieldType?: MediaFieldType;
+}
+
+export const PasteURLForm: React.FC<PasteURLFormProps> = ({
+  show,
+  closeModal,
+  onSave,
+  value,
+  title,
+  fieldType = MediaFieldType.document,
+}) => {
+  const { t } = useTranslations();
+
+  const onSaveURL = useCallback((url?: string) => url && onSave(url), [onSave]);
+
+  const urlValidator = useMemo(
+    () => (inputValue?: string) =>
+      isDataValidOrNotSet(inputValue || undefined, fieldType),
+    [fieldType],
+  );
+
+  return (
+    <PasteURLModal
+      dataHook="paste-url-form"
+      show={show}
+      value={value}
+      onSave={onSaveURL}
+      onClose={closeModal}
+      validator={urlValidator}
+      title={title}
+      primaryButtonText={t('CMS.mediaControl.pasteUrl.button.save')}
+      secondaryButtonText={t('CMS.mediaControl.pasteUrl.button.cancel')}
+      inputPlaceholder={
+        fieldType === MediaFieldType.document
+          ? t('CMS.mediaControl.pasteUrl.placeholder.document')
+          : t('CMS.mediaControl.pasteUrl.placeholder.image')
+      }
+      errorStatusMessage={
+        fieldType === MediaFieldType.document
+          ? t('CMS.mediaControl.pasteUrl.error.document')
+          : t('CMS.mediaControl.pasteUrl.error.image')
+      }
+    />
+  );
+};
+
+PasteURLForm.displayName = 'PasteURLForm';

package/src/components/media-control/paste-url-modal.tsx

@@ -0,0 +1,94 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Modal, CustomModalLayout, Input } from '@wix/design-system';
+
+export interface PasteURLModalProps {
+  show: boolean;
+  onClose: () => void;
+  onSave: (url?: string) => void;
+  value?: string;
+  title?: string;
+  inputPlaceholder?: string;
+  primaryButtonText?: string;
+  secondaryButtonText?: string;
+  keepMounted?: boolean;
+  dataHook?: string;
+  validator?: (value?: string) => boolean;
+  errorStatusMessage?: string;
+}
+
+export const PasteURLModal: React.FC<PasteURLModalProps> = ({
+  show,
+  onClose,
+  onSave,
+  value = '',
+  title = 'Insert Link',
+  inputPlaceholder = 'Enter URL',
+  primaryButtonText = 'Save',
+  secondaryButtonText = 'Cancel',
+  dataHook = 'paste-url-modal',
+  validator,
+  errorStatusMessage,
+}) => {
+  const [url, setUrl] = useState(value);
+  const [touched, setTouched] = useState(false);
+
+  useEffect(() => {
+    setUrl(value);
+    setTouched(false);
+  }, [value, show]);
+
+  const isValid = useMemo(() => {
+    if (!validator) {
+      return true;
+    }
+    return validator(url || undefined);
+  }, [url, validator]);
+
+  const showError = touched && !isValid && url !== '';
+
+  const handleConfirm = () => {
+    if (!isValid) {
+      setTouched(true);
+      return;
+    }
+    onSave(url);
+    onClose();
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setUrl(e.target.value);
+    setTouched(true);
+  };
+
+  return (
+    <Modal
+      isOpen={show}
+      onRequestClose={onClose}
+      screen="desktop"
+      dataHook={dataHook}
+    >
+      <CustomModalLayout
+        dataHook={`${dataHook}.layout`}
+        title={title}
+        closeButtonProps={{ onClick: onClose }}
+        primaryButtonOnClick={handleConfirm}
+        secondaryButtonOnClick={onClose}
+        primaryButtonText={primaryButtonText}
+        secondaryButtonText={secondaryButtonText}
+        overflowY="none"
+        width="600px"
+        content={
+          <Input
+            dataHook={`${dataHook}.urlInput`}
+            placeholder={inputPlaceholder}
+            value={url}
+            onChange={handleChange}
+            autoFocus
+            status={showError ? 'error' : undefined}
+            statusMessage={showError ? errorStatusMessage : undefined}
+          />
+        }
+      />
+    </Modal>
+  );
+};

package/src/components/media-control/types.ts

@@ -0,0 +1,11 @@
+import type { FormInputProps } from '../../types';
+
+type WithPreviewCallbacks = {
+  previewCallbacks?: { onOpen: () => void; onClose: () => void };
+};
+
+export type FormMediaControlProps<T = string> = Omit<
+  FormInputProps<T>,
+  'field'
+> &
+  WithPreviewCallbacks;

package/src/components/media-control/use-document-delete.ts

@@ -0,0 +1,48 @@
+import { useCallback, useState } from 'react';
+
+import { useTranslations } from '../../hooks';
+import { getMediaTitle } from '../../utils/media-utils';
+
+export interface UseDocumentDeleteParams {
+  data?: string[];
+  onChange: (value: string[]) => void;
+}
+
+export const useDocumentDelete = ({
+  data = [],
+  onChange,
+}: UseDocumentDeleteParams) => {
+  const { t } = useTranslations();
+  const [indexToDelete, setIndexToDelete] = useState<number | null>(null);
+
+  const onDelete = useCallback(
+    (index: number) => () => setIndexToDelete(index),
+    [],
+  );
+
+  const onDeleteCancel = useCallback(() => setIndexToDelete(null), []);
+
+  const onDeleteConfirm = useCallback(() => {
+    if (indexToDelete === null) {
+      return;
+    }
+
+    const updatedData = [...(data ?? [])];
+    updatedData.splice(indexToDelete, 1);
+    onChange(updatedData);
+
+    setIndexToDelete(null);
+  }, [indexToDelete, onChange, data]);
+
+  const filename =
+    indexToDelete !== null ? getMediaTitle(data[indexToDelete]) : '';
+
+  return {
+    isOpen: indexToDelete !== null,
+    onDelete,
+    onDeleteCancel,
+    onDeleteConfirm,
+    title: t('CMS.document.delete.title', { filename }),
+    text: t('CMS.document.delete.message', { filename }),
+  };
+};