@wix/patterns-fields 1.35.0 → 1.37.0

package/src/components/time-input/cell-time-input.tsx

@@ -0,0 +1,104 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import {
+  TimeInput as WSRTimeInput,
+  CloseButton,
+  type TimeInputImperativeActions,
+  type TimeInputProps as WSRTimeInputProps,
+} from '@wix/design-system';
+import { useTranslations } from '../../hooks/use-translations';
+import { dateToTime, timeToDate, type Time } from './hooks';
+
+export interface CellTimeInputProps {
+  value?: Time | null;
+  onChange?: (value: Time | null) => void;
+  onCommit?: () => void;
+  inputRef?: React.MutableRefObject<{ focus: () => void } | null | undefined>;
+  dataHook?: string;
+  placeholder?: string;
+  step?: WSRTimeInputProps['step'];
+}
+
+/**
+ * Cell-layer Time input. Wraps WDS `<TimeInput>` with cell-edit semantics:
+ * - `value`/`onChange` use the `Time` string format (`hh:mm:ss.SSS`);
+ *   conversion to/from `Date` for the WDS boundary happens via
+ *   `timeToDate`/`dateToTime`.
+ * - WDS `onChange` (fires on option click and on blur with a parsed custom
+ *   value) forwards a `Time` string to `onChange`, then schedules `onCommit`
+ *   on a microtask so WDS's two-phase change (synchronous blur + async
+ *   selection callback) collapses into a single commit.
+ * - Clear button (X) suffix clears the value and commits.
+ * - Locale is sourced from i18n so the dropdown's 12/24h cycle matches the
+ *   format rendered by `<TimeView>` in view mode.
+ */
+export const CellTimeInput = forwardRef<
+  TimeInputImperativeActions,
+  CellTimeInputProps
+>(({ value, onChange, onCommit, dataHook, placeholder, step = 15 }) => {
+  const { i18n } = useTranslations();
+
+  const dateValue = useMemo(
+    () => (value ? timeToDate(value) : undefined),
+    [value],
+  );
+
+  const wsrRef = useRef<TimeInputImperativeActions | null>(null);
+
+  useEffect(() => {
+    wsrRef.current?.focus();
+  }, []);
+
+  const handleChange = useCallback(
+    ({ date }: { date: Date | null }) => {
+      const newTime = date ? dateToTime(date) : null;
+      if (newTime === value) {
+        return;
+      }
+      onChange?.(newTime);
+      onCommit?.();
+    },
+    [onChange, onCommit, value],
+  );
+
+  const handleClear = useCallback(() => {
+    onChange?.(null);
+    onCommit?.();
+  }, [onChange, onCommit]);
+
+  return (
+    <WSRTimeInput
+      dataHook={dataHook}
+      ref={wsrRef}
+      size="small"
+      border="none"
+      step={step}
+      timeStyle="short"
+      width="100%"
+      locale={i18n.language as WSRTimeInputProps['locale']}
+      placeholder={placeholder ?? 'hh:mm'}
+      autoSelect={false}
+      value={dateValue ?? null}
+      onChange={handleChange}
+      popoverProps={{ appendTo: 'window', moveBy: { y: 4 } }}
+      suffix={
+        value ? (
+          <CloseButton
+            as="button"
+            size="small"
+            skin="standardFilled"
+            onClick={handleClear}
+            dataHook="cell-time-input-clear"
+          />
+        ) : undefined
+      }
+    />
+  );
+});
+
+CellTimeInput.displayName = 'CellTimeInput';

package/src/components/time-input/form-time.driver.ts

@@ -0,0 +1,20 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { FormFieldUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+
+import {
+  baseUniDriverFactory,
+  getFormFieldLabelText,
+} from '../../testkit/base-driver';
+
+export function FormTimeDriver(base: UniDriver, body: UniDriver) {
+  const formField = FormFieldUniDriver(base, body);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getLabel: () => getFormFieldLabelText(formField),
+    hasError: () => formField.hasStatus('error'),
+    getErrorMessage: () => formField.getStatusMessage(),
+    isRequired: () => formField.isRequired(),
+    hasSuffix: async () => (await formField.getSuffix()) !== null,
+  };
+}

package/src/components/time-input/form-time.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { FormField } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useController } from '@wix/bex-core/form';
+
+import { BaseInputProps } from '../../types/base-input';
+import { useTranslations } from '../../hooks';
+import {
+  isDataValidOrNotSet,
+  timeValidation,
+} from '../../validations/validations';
+import { isEmpty } from '../../validations/string';
+import { TypeMismatchExclamation } from '../exclamation/type-mismatch-exclamation';
+
+import { FormTimeInput } from './form-time-input';
+
+export interface FormTimeProps extends BaseInputProps<string> {}
+
+const _FormTime = (props: FormTimeProps) => {
+  const { field, dataHook, formControl, data } = props;
+
+  const { translate: pt } = useWixPatternsContainer();
+  const { t } = useTranslations();
+
+  const controller = useController({
+    name: field.id,
+    control: formControl,
+    defaultValue: data?.[field.id],
+    rules: {
+      validate: (value) => {
+        if (field.validation?.required && isEmpty(value)) {
+          return pt('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      },
+    },
+  });
+
+  return (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      status={controller.fieldState.error ? 'error' : undefined}
+      statusMessage={controller.fieldState.error?.message}
+      dataHook={dataHook}
+      suffix={
+        isDataValidOrNotSet(
+          controller.field.value,
+          timeValidation,
+        ) ? undefined : (
+          <TypeMismatchExclamation
+            typeName={t('auto-patterns.fields.field_type_time_title')}
+            clearButtonText={t('auto-patterns.fields.type_mismatch_clear')}
+            convertButtonText={t('auto-patterns.fields.type_mismatch_convert')}
+            onClear={() => controller.field.onChange(undefined)}
+            onChange={(value) => controller.field.onChange(value)}
+            convertDisabledText={t(
+              'auto-patterns.fields.type_mismatch_convert_disabled',
+            )}
+            fieldName={field.displayName}
+            isConverted={false}
+            isConverting={false}
+            convertedValue="00:00:00.000"
+            tooltipText={t('auto-patterns.fields.type_mismatch_tip', {
+              typeName: 'Time',
+            })}
+          />
+        )
+      }
+    >
+      <FormTimeInput
+        autoFocus={false}
+        data={controller.field.value}
+        onChange={(value) => controller.field.onChange(value)}
+        dataHook={`time-${field.id}`}
+      />
+    </FormField>
+  );
+};
+
+export const FormTime = observer(_FormTime);

package/src/components/time-input/index.ts

@@ -1,3 +1,5 @@
 export * from './time-input';
+export * from './cell-time-input';
+export * from './form-time';
 export * from './form-time-input';
 export * from './hooks';

package/src/components/time-view/hooks.ts

@@ -1,13 +1,14 @@
+import { useTranslations } from '../../hooks/use-translations';
 import { timeToDate, type Time } from '../time-input/hooks';
 
-const formatLocalTime = (date: Date): string => {
-  return date.toLocaleTimeString([], {
-    hour: '2-digit',
-    minute: '2-digit',
-  });
+const formatLocalTime = (date: Date, locale: string): string => {
+  // `timeStyle: 'short'` matches WDS TimeInput's own format: numeric hour in
+  // 12h locales ("9:45 AM") and zero-padded hour in 24h locales ("09:45"),
+  // so View and Edit render the same string.
+  return date.toLocaleTimeString(locale, { timeStyle: 'short' });
 };
 
 export const useFormattedTime = (time?: Time) => {
-  return time ? formatLocalTime(timeToDate(time)) : undefined;
+  const { i18n } = useTranslations();
+  return time ? formatLocalTime(timeToDate(time), i18n.language) : undefined;
 };
-

package/src/components/time-view/index.ts

@@ -1,3 +1,2 @@
 export * from './time-view';
 export * from './hooks';
-

package/src/components/url/form-url.driver.ts

@@ -0,0 +1,28 @@
+import type { Field } from '@wix/bex-core';
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  FormFieldUniDriver,
+  InputUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+import { baseUniDriverFactory } from '../../testkit/base-driver';
+
+export function FormUrlDriver(base: UniDriver, body: UniDriver, field: Field) {
+  const formField = FormFieldUniDriver(base, body);
+  const inputBase = base.$(`[data-hook="url-${field.id}"]`);
+  const input = InputUniDriver(inputBase, body);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getLabel: async () => {
+      const labelEl = await formField.getLabel();
+      return labelEl?.textContent ?? '';
+    },
+    getValue: () => input.getValue(),
+    enterText: (value: string) => input.enterText(value),
+    blur: () => input.blur(),
+    hasError: () => formField.hasStatus('error'),
+    getErrorMessage: () => formField.getStatusMessage(),
+    isRequired: () => formField.isRequired(),
+  };
+}

package/src/components/url/form-url.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { FormField, Input } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import { Link } from '@wix/wix-ui-icons-common';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useController } from '@wix/bex-core/form';
+
+import { BaseInputProps } from '../../types/base-input';
+import { isEmpty } from '../../validations/string';
+import { isValidUri } from '../../validations/url';
+
+export interface FormUrlProps extends BaseInputProps<string> {}
+
+const _FormUrl = (props: FormUrlProps) => {
+  const { field, dataHook, formControl, data } = props;
+  const { translate: t } = useWixPatternsContainer();
+
+  const controller = useController({
+    name: field.id,
+    control: formControl,
+    defaultValue: data?.[field.id],
+    rules: {
+      validate: (value: string | null | undefined) => {
+        if (field.validation?.required && isEmpty(value)) {
+          return t('cairo.fieldValidation.requiredField');
+        } else if (value) {
+          return isValidUri(value) || t('cairo.customFields.url-input.error');
+        }
+        return true;
+      },
+    },
+  });
+
+  return (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      dataHook={dataHook}
+      status={controller.fieldState.error ? 'error' : undefined}
+      statusMessage={controller.fieldState.error?.message}
+    >
+      <Input
+        prefix={
+          <Input.IconAffix>
+            <Link />
+          </Input.IconAffix>
+        }
+        placeholder={t('cairo.customFields.url-input.placeholder')}
+        dataHook={`url-${field.id}`}
+        value={controller.field.value}
+        onChange={(e) => controller.field.onChange?.(e.target.value)}
+        onBlur={controller.field.onBlur}
+        ref={controller.field.ref}
+      />
+    </FormField>
+  );
+};
+
+export const FormUrl = observer(_FormUrl);

package/src/components/url/index.ts

@@ -1,2 +1,3 @@
 export * from './url-view';
 export * from './cell-url-input';
+export * from './form-url';

package/src/components/video/form-video.driver.ts

@@ -0,0 +1,48 @@
+import type { Field } from '@wix/bex-core';
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  FormFieldUniDriver,
+  ImageViewerUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+import { baseUniDriverFactory } from '../../testkit/base-driver';
+
+export function FormVideoDriver(
+  base: UniDriver,
+  body: UniDriver,
+  field: Field,
+) {
+  const formField = FormFieldUniDriver(base, body);
+  const imageViewerBase = base.$(`[data-hook="video-${field.id}"]`);
+  const imageViewer = ImageViewerUniDriver(imageViewerBase, body);
+
+  const replaceButton = base.$(`[data-hook="video-replace-${field.id}"]`);
+  const moreButton = base.$(`[data-hook="video-more-${field.id}"]`);
+  const previewAction = body.$(`[data-hook="video-preview-${field.id}"]`);
+  const downloadAction = body.$(`[data-hook="video-download-${field.id}"]`);
+  const deleteAction = body.$(`[data-hook="video-delete-${field.id}"]`);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getLabel: async () => {
+      const labelEl = await formField.getLabel();
+      return labelEl?.textContent ?? '';
+    },
+    getImageUrl: () => imageViewer.getImageUrl(),
+    isAddItemVisible: () => imageViewer.isAddItemVisible(),
+    hasError: () => formField.hasStatus('error'),
+    getErrorMessage: () => formField.getStatusMessage(),
+    isRequired: () => formField.isRequired(),
+    hasSuffix: async () => (await formField.getSuffix()) !== null,
+    hasReplaceButton: () => replaceButton.exists(),
+    hasMoreButton: () => moreButton.exists(),
+    clickMore: () => moreButton.click(),
+    clickReplace: () => replaceButton.click(),
+    isPreviewActionVisible: () => previewAction.exists(),
+    isDownloadActionVisible: () => downloadAction.exists(),
+    isDeleteActionVisible: () => deleteAction.exists(),
+    clickPreview: () => previewAction.click(),
+    clickDownload: () => downloadAction.click(),
+    clickDelete: () => deleteAction.click(),
+  };
+}

package/src/components/video/form-video.tsx

@@ -0,0 +1,244 @@
+import React from 'react';
+import {
+  FormField,
+  ImageViewer,
+  Modal,
+  CustomModalLayout,
+  MediaOverlay,
+  Box,
+  Tooltip,
+  IconButton,
+  PopoverMenu,
+  Image,
+} from '@wix/design-system';
+import {
+  Replace,
+  More,
+  Download,
+  Delete,
+  Maximize,
+} from '@wix/wix-ui-icons-common';
+import { observer } from 'mobx-react-lite';
+import { useIsMobile, useWixPatternsContainer } from '@wix/bex-core/react';
+import { useController } from '@wix/bex-core/form';
+import { BaseInputProps } from '../../types/base-input';
+import { useTranslations } from '../../hooks';
+import { isEmpty } from '../../validations/string';
+import { isDataValidOrNotSet } from '../../validations/validations';
+import * as videoValidation from '../../validations/video';
+import { TypeMismatchExclamation } from '../exclamation/type-mismatch-exclamation';
+import { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from '../../utils/media-constants';
+import { useVideoPreview } from './use-video-preview';
+
+interface VideoMediaDescriptor {
+  video?: string;
+}
+
+interface MediaManagerVideoItem {
+  _id?: string;
+  displayName?: string;
+  mediaType?: string;
+  media?: VideoMediaDescriptor;
+}
+
+export interface FormVideoProps extends BaseInputProps<string> {}
+
+const _FormVideo = (props: FormVideoProps) => {
+  const { field, dataHook, formControl, data } = props;
+
+  const { translate: pt, openMediaManager } = useWixPatternsContainer();
+  const { t } = useTranslations();
+  const isMobile = useIsMobile();
+
+  const controller = useController({
+    name: field?.id ?? '',
+    control: formControl,
+    defaultValue: data?.[field?.id ?? ''],
+    rules: {
+      validate: (value) => {
+        if (field.validation?.required && isEmpty(value)) {
+          return pt('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      },
+    },
+  });
+
+  async function openMedia() {
+    if (!openMediaManager) return;
+    try {
+      const chosenMediaItems = await openMediaManager({
+        multiSelect: false,
+        category: 'VIDEO',
+      });
+
+      const mediaItem = chosenMediaItems?.items?.[0] as
+        | MediaManagerVideoItem
+        | undefined;
+      const newVideo = mediaItem?.media?.video;
+      if (newVideo) {
+        controller.field.onChange(newVideo);
+      }
+    } catch (error) {
+      console.error('Error opening Media Manager or no files selected:', error);
+    }
+  }
+
+  const {
+    videoUrl,
+    posterUrl: imageUrl,
+    isPreviewOpen,
+    openPreview: handlePreview,
+    closePreview: handleClosePreview,
+    handleDownload,
+  } = useVideoPreview({ videoUri: controller.field.value });
+
+  return (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      status={controller.fieldState.error ? 'error' : undefined}
+      statusMessage={controller.fieldState.error?.message}
+      dataHook={dataHook}
+      suffix={
+        isDataValidOrNotSet(
+          controller.field.value,
+          videoValidation,
+        ) ? undefined : (
+          <TypeMismatchExclamation
+            typeName={t('auto-patterns.fields.field_type_video_title')}
+            clearButtonText={t('auto-patterns.fields.type_mismatch_clear')}
+            convertButtonText={t('auto-patterns.fields.type_mismatch_convert')}
+            onClear={() => controller.field.onChange(undefined)}
+            onChange={(value) => controller.field.onChange(value)}
+            convertDisabledText={t(
+              'auto-patterns.fields.type_mismatch_convert_disabled',
+            )}
+            fieldName={field.displayName}
+            isConverted={false}
+            isConverting={false}
+            convertedValue={null}
+            tooltipText={t('auto-patterns.fields.type_mismatch_tip', {
+              typeName: 'Video',
+            })}
+          />
+        )
+      }
+    >
+      {controller.field.value ? (
+        <Box width="100%" maxWidth={MEDIA_MAX_WIDTH} height={MEDIA_HEIGHT}>
+          <MediaOverlay
+            dataHook={`video-${field.id}`}
+            hoverSkin="dark"
+            media={
+              <Image
+                src={imageUrl}
+                width="100%"
+                height={MEDIA_HEIGHT}
+                fit="cover"
+              />
+            }
+          >
+            <MediaOverlay.Content placement="middle" visible="hover">
+              <Box gap="SP2">
+                <Tooltip
+                  content={t('auto-patterns.fields.replace_video_tooltip')}
+                >
+                  <IconButton
+                    onClick={() => openMedia()}
+                    skin="light"
+                    priority="secondary"
+                    disabled={isMobile}
+                    ariaLabel={t('auto-patterns.fields.replace_video_tooltip')}
+                    dataHook={`video-replace-${field.id}`}
+                  >
+                    <Replace />
+                  </IconButton>
+                </Tooltip>
+                <PopoverMenu
+                  triggerElement={({ toggle }) => (
+                    <Tooltip
+                      content={t('auto-patterns.fields.more_actions_tooltip')}
+                    >
+                      <IconButton
+                        priority="secondary"
+                        onClick={toggle}
+                        skin="light"
+                        ariaLabel={t(
+                          'auto-patterns.fields.more_actions_tooltip',
+                        )}
+                        dataHook={`video-more-${field.id}`}
+                      >
+                        <More />
+                      </IconButton>
+                    </Tooltip>
+                  )}
+                >
+                  <PopoverMenu.MenuItem
+                    prefixIcon={<Maximize />}
+                    text={t('auto-patterns.fields.preview_video')}
+                    onClick={handlePreview}
+                    disabled={!videoUrl}
+                    dataHook={`video-preview-${field.id}`}
+                  />
+                  <PopoverMenu.MenuItem
+                    prefixIcon={<Download />}
+                    text={t('auto-patterns.fields.download_video')}
+                    onClick={handleDownload}
+                    dataHook={`video-download-${field.id}`}
+                  />
+                  <PopoverMenu.Divider />
+                  <PopoverMenu.MenuItem
+                    prefixIcon={<Delete />}
+                    text={t('auto-patterns.fields.remove_video')}
+                    onClick={() => controller.field.onChange(null)}
+                    dataHook={`video-delete-${field.id}`}
+                  />
+                </PopoverMenu>
+              </Box>
+            </MediaOverlay.Content>
+          </MediaOverlay>
+        </Box>
+      ) : (
+        <Box width="100%" maxWidth={MEDIA_MAX_WIDTH}>
+          <ImageViewer
+            dataHook={`video-${field.id}`}
+            onAddImage={isMobile ? undefined : () => openMedia()}
+            addImageInfo={t('auto-patterns.fields.add_video_tooltip')}
+            height={MEDIA_HEIGHT}
+            width="100%"
+          />
+        </Box>
+      )}
+      {isPreviewOpen && (
+        <Modal isOpen={isPreviewOpen} onRequestClose={handleClosePreview}>
+          <CustomModalLayout
+            title={field.displayName}
+            onCloseButtonClick={handleClosePreview}
+            content={
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  padding: '24px',
+                }}
+              >
+                <video
+                  controls
+                  autoPlay
+                  style={{ maxWidth: '100%', maxHeight: '70vh' }}
+                  poster={imageUrl}
+                >
+                  {videoUrl && <source src={videoUrl} type="video/mp4" />}
+                  Your browser does not support the video tag.
+                </video>
+              </div>
+            }
+          />
+        </Modal>
+      )}
+    </FormField>
+  );
+};
+
+export const FormVideo = observer(_FormVideo);

package/src/components/video/index.ts

@@ -1,4 +1,10 @@
 export { VideoView } from './video-view';
 export type { VideoViewProps } from './video-view';
+export { VideoViewField } from './video-view-field';
+export type { VideoViewFieldProps } from './video-view-field';
 export { CellVideoEdit } from './cell-video-edit';
 export type { CellVideoEditProps } from './cell-video-edit';
+export { FormVideo } from './form-video';
+export type { FormVideoProps } from './form-video';
+export { useVideoPreview } from './use-video-preview';
+export type { UseVideoPreviewOptions } from './use-video-preview';