@wix/patterns-fields 1.35.0 → 1.37.0

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

@@ -0,0 +1,203 @@
+import React, { useRef, useMemo, useState, useEffect } from 'react';
+import {
+  Cell,
+  DatePicker,
+  FormField,
+  Layout,
+  TimeInput,
+} 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, BaseInputRef } from '../../types/base-input';
+import { isEmpty } from '../../validations/string';
+
+export interface FormDateTimeProps extends BaseInputProps<string | null> {}
+
+const _FormDateTime = (props: FormDateTimeProps) => {
+  const { field, dataHook, inputRef, formControl, data } = props;
+  const { translate: t } = useWixPatternsContainer();
+
+  const controller = useController({
+    name: field?.id ?? '',
+    control: formControl,
+    defaultValue: data?.[field?.id ?? ''],
+    rules: {
+      validate: (v) => {
+        if (field?.validation?.required && isEmpty(v)) {
+          return t('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      },
+    },
+  });
+
+  const date = useMemo(() => {
+    if (!controller.field.value) {
+      return undefined;
+    }
+    const d = new Date(controller.field.value);
+    return isNaN(d.getTime()) ? undefined : d;
+  }, [controller.field.value]);
+
+  const [dateStatusMessage, setDateStatusMessage] = useState('');
+  const [timeStatusMessage, setTimeStatusMessage] = useState('');
+
+  const ref = useRef<BaseInputRef>({});
+  const dateRef = useRef<BaseInputRef>({});
+  const timeRef = useRef<BaseInputRef>({});
+  const [dateValue, setDateValue] = useState<number | string | undefined>(
+    date?.getDate(),
+  );
+  const [timeValue, setTimeValue] = useState<number | string | undefined>(
+    date?.getTime(),
+  );
+
+  useEffect(() => {
+    ref.current.focus = () => {
+      if (dateRef.current.invalid) {
+        return dateRef.current.focus?.();
+      }
+
+      return timeRef.current.focus?.();
+    };
+
+    inputRef?.(ref.current);
+  }, [inputRef]);
+
+  return (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      dataHook={dataHook}
+    >
+      <Layout>
+        <Cell span={6}>
+          <DatePicker
+            ref={(internalRef) => {
+              dateRef.current.focus = () =>
+                // TODO: PR to WSR needed to expose as public API
+                // @ts-expect-error
+                internalRef?.state?.inputRef?.focus?.();
+            }}
+            width="100%"
+            value={date}
+            onChange={() => {}}
+            // onChange is triggered only when you have valid, non-empty value.
+            // and onValidate is triggered on every change so we use onValidate
+            onValidate={({ validationType, value: newValue, format }) => {
+              if (validationType === 'valid') {
+                const dateWithNewDate = date
+                  ? new Date(date)
+                  : new Date(newValue);
+                const _value = new Date(newValue);
+                dateWithNewDate.setFullYear(_value.getFullYear());
+                dateWithNewDate.setMonth(_value.getMonth());
+                dateWithNewDate.setDate(_value.getDate());
+                controller.field.onChange(dateWithNewDate.toISOString());
+                setDateValue(new Date(newValue).getDate());
+                setDateStatusMessage('');
+                dateRef.current.invalid = false;
+              } else if (validationType === 'formatError' && newValue === '') {
+                if (field.validation?.required) {
+                  setDateStatusMessage(
+                    t('cairo.fieldValidation.requiredField'),
+                  );
+                  dateRef.current.invalid = true;
+                } else {
+                  setDateStatusMessage('');
+                  dateRef.current.invalid = false;
+                }
+                setDateValue(newValue);
+                if (!timeValue) {
+                  controller.field.onChange(null);
+                }
+              } else {
+                setDateStatusMessage(
+                  t('cairo.customFields.fieldType.date.invalid.value', {
+                    dateFormat: format ?? '',
+                  }),
+                );
+                dateRef.current.invalid = true;
+              }
+
+              ref.current.invalid =
+                dateRef.current.invalid || timeRef.current.invalid;
+            }}
+            status={
+              controller.fieldState.error || dateStatusMessage
+                ? 'error'
+                : undefined
+            }
+            statusMessage={
+              controller.fieldState.error?.message || dateStatusMessage
+            }
+            dataHook={`datetime-date-${field.id}`}
+          />
+        </Cell>
+        <Cell span={6}>
+          <TimeInput
+            ref={(internalRef) => {
+              timeRef.current.focus = () => internalRef?.focus();
+            }}
+            dataHook={`datetime-time-${field.id}`}
+            value={date ?? null}
+            status={
+              controller.fieldState.error || timeStatusMessage
+                ? 'error'
+                : undefined
+            }
+            statusMessage={
+              controller.fieldState.error?.message || timeStatusMessage
+            }
+            onInvalid={() => {
+              timeRef.current.invalid = true;
+              setTimeStatusMessage(
+                t('cairo.customFields.fieldType.dateAndTime.invalid.value'),
+              );
+              ref.current.invalid =
+                dateRef.current.invalid || timeRef.current.invalid;
+            }}
+            onChange={({ date: newValue }) => {
+              timeRef.current.invalid = false;
+              ref.current.invalid =
+                dateRef.current.invalid || timeRef.current.invalid;
+
+              if (newValue) {
+                const dateWithNewTime = date ? new Date(date) : newValue;
+                dateWithNewTime.setHours(newValue.getHours());
+                dateWithNewTime.setMinutes(newValue.getMinutes());
+                dateWithNewTime.setSeconds(newValue.getSeconds());
+                dateWithNewTime.setMilliseconds(newValue.getMilliseconds());
+                controller.field.onChange(dateWithNewTime.toISOString());
+                setTimeStatusMessage('');
+                setDateStatusMessage('');
+              } else {
+                if (!newValue) {
+                  setTimeValue('');
+                  if (field.validation?.required) {
+                    setTimeStatusMessage(
+                      t('cairo.fieldValidation.requiredField'),
+                    );
+                    timeRef.current.invalid = true;
+                  } else {
+                    setTimeStatusMessage('');
+                    timeRef.current.invalid = false;
+                  }
+                  if (!ref.current.invalid) {
+                    if (!dateValue) {
+                      controller.field.onChange(null);
+                    }
+                  }
+                }
+              }
+            }}
+          />
+        </Cell>
+      </Layout>
+    </FormField>
+  );
+};
+
+export const FormDateTime = observer(_FormDateTime);

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

@@ -0,0 +1 @@
+export * from './form-date-time';

package/src/components/delete-dialog/delete-dialog.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog1598107043";
+var _namespace_ = "deletedialog759595497";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"deletedialog1598107043__root","layout":"deletedialog1598107043__layout"};
+export var classes = {"root":"deletedialog759595497__root","layout":"deletedialog759595497__layout"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/document/form-document-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formdocumentfield3746585343";
+var _namespace_ = "formdocumentfield347804993";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formdocumentfield3746585343__root","viewWrapper":"formdocumentfield3746585343__viewWrapper","textWidth":"formdocumentfield3746585343__textWidth","documentLoader":"formdocumentfield3746585343__documentLoader","addDocument":"formdocumentfield3746585343__addDocument","addItemWrapper":"formdocumentfield3746585343__addItemWrapper"};
+export var classes = {"root":"formdocumentfield347804993__root","viewWrapper":"formdocumentfield347804993__viewWrapper","textWidth":"formdocumentfield347804993__textWidth","documentLoader":"formdocumentfield347804993__documentLoader","addDocument":"formdocumentfield347804993__addDocument","addItemWrapper":"formdocumentfield347804993__addItemWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -0,0 +1,26 @@
+import type { Field } from '@wix/bex-core';
+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 FormDocumentDriver(
+  base: UniDriver,
+  body: UniDriver,
+  field: Field,
+) {
+  const formField = FormFieldUniDriver(base, body);
+  const documentField = base.$(`[data-hook="document-${field.id}"]`);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getLabel: () => getFormFieldLabelText(formField),
+    documentFieldExists: () => documentField.exists(),
+    isRequired: () => formField.isRequired(),
+    hasError: () => formField.hasStatus('error'),
+    getErrorMessage: () => formField.getStatusMessage(),
+  };
+}

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

@@ -0,0 +1,51 @@
+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 { isEmpty } from '../../validations/string';
+import { FormDocumentField } from './form-document-field';
+
+export interface FormDocumentProps extends BaseInputProps<string> {}
+
+const _FormDocument = (props: FormDocumentProps) => {
+  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) => {
+        if (field.validation?.required && isEmpty(value)) {
+          return t('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}
+    >
+      <FormDocumentField
+        data={controller.field.value}
+        onChange={(value) => controller.field.onChange(value)}
+        onClear={() => controller.field.onChange(null)}
+        dataHook={`document-${field.id}`}
+      />
+    </FormField>
+  );
+};
+
+export const FormDocument = observer(_FormDocument);

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

@@ -0,0 +1,27 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  FormFieldUniDriver,
+  InputUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+import {
+  baseUniDriverFactory,
+  getFormFieldLabelText,
+} from '../../testkit/base-driver';
+
+export function FormEmailDriver(base: UniDriver, body: UniDriver) {
+  const formField = FormFieldUniDriver(base, body);
+  const inputBase = base.$(`[data-hook^="email-"]`);
+  const input = InputUniDriver(inputBase, body);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getLabel: () => getFormFieldLabelText(formField),
+    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/email/form-email.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { FormField, Input } 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 { isEmpty } from '../../validations/string';
+import { isValid as isValidEmail } from '../../validations/email';
+
+export interface FormEmailProps extends BaseInputProps<string> {}
+
+const _FormEmail = (props: FormEmailProps) => {
+  const { field, dataHook, formControl, data } = props;
+  const { translate: pt } = useWixPatternsContainer();
+  const { t } = useTranslations();
+
+  // Errors surface as soon as RHF marks the field invalid.
+  // Intentional delta from auto-patterns: dropped the `formState.isSubmitted` gate
+  // so users see validation feedback immediately while typing.
+  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 pt('cairo.fieldValidation.requiredField');
+        }
+        if (value && !isValidEmail(value)) {
+          return t('auto-patterns.fields.email_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
+        dataHook={`email-${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 FormEmail = observer(_FormEmail);

package/src/components/email/index.ts

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

package/src/components/exclamation/exclamation.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "exclamation2381589603";
+var _namespace_ = "exclamation3170841142";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"exclamation2381589603__root","exclamation":"exclamation2381589603__exclamation","actions":"exclamation2381589603__actions","action":"exclamation2381589603__action"};
+export var classes = {"root":"exclamation3170841142__root","exclamation":"exclamation3170841142__exclamation","actions":"exclamation3170841142__actions","action":"exclamation3170841142__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext4239267361";
+var _namespace_ = "highlightedtext1832354936";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"highlightedtext4239267361__root","substring":"highlightedtext4239267361__substring"};
-export var keyframes = {"highlighted":"highlightedtext4239267361__highlighted","highlighted-match":"highlightedtext4239267361__highlighted-match"}; 
+export var classes = {"root":"highlightedtext1832354936__root","substring":"highlightedtext1832354936__substring"};
+export var keyframes = {"highlighted":"highlightedtext1832354936__highlighted","highlighted-match":"highlightedtext1832354936__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

@@ -0,0 +1,31 @@
+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 FormImageInputDriver(
+  base: UniDriver,
+  body: UniDriver,
+  field: Field,
+) {
+  const formField = FormFieldUniDriver(base, body);
+  const imageViewerBase = base.$(`[data-hook="image-${field.id}"]`);
+  const imageViewer = ImageViewerUniDriver(imageViewerBase, body);
+
+  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(),
+  };
+}

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

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Box, FormField, ImageViewer } from '@wix/design-system';
+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 { isEmpty } from '../../validations/string';
+import { getImageUrl } from '../../utils/get-image-url';
+import { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from '../../utils/media-constants';
+
+export interface FormImageInputProps extends BaseInputProps<string> {}
+
+const _FormImageInput = (props: FormImageInputProps) => {
+  const { field, dataHook, formControl, data } = props;
+
+  const { translate: t, openMediaManager } = useWixPatternsContainer();
+  const isMobile = useIsMobile();
+
+  async function openMedia() {
+    if (!openMediaManager) {
+      return;
+    }
+    try {
+      const chosenMediaItems = await openMediaManager({
+        multiSelect: false,
+        category: 'IMAGE',
+      });
+
+      const newImage = chosenMediaItems?.items[0]?.media?.image?.image;
+
+      controller.field.onChange(newImage);
+    } catch (error) {
+      console.error('Error opening Media Manager or no files selected:', error);
+    }
+  }
+
+  const controller = useController({
+    name: field?.id ?? '',
+    control: formControl,
+    defaultValue: data?.[field?.id ?? ''],
+    rules: {
+      validate: (value) => {
+        if (field.validation?.required && isEmpty(value)) {
+          return t('cairo.fieldValidation.requiredField');
+        }
+
+        return true;
+      },
+    },
+  });
+
+  const imageUrl =
+    controller.field.value && getImageUrl(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}
+    >
+      <Box width="100%" maxWidth={MEDIA_MAX_WIDTH}>
+        <ImageViewer
+          imageUrl={imageUrl}
+          dataHook={`image-${field.id}`}
+          onAddImage={isMobile ? undefined : () => openMedia()}
+          onUpdateImage={isMobile ? undefined : () => openMedia()}
+          updateImageInfo={t('cairo.replace-image.tooltip')}
+          removeImageInfo={t('cairo.remove-image.tooltip')}
+          addImageInfo={t('cairo.add-image.tooltip')}
+          height={MEDIA_HEIGHT}
+          width="100%"
+          fit="cover"
+          onRemoveImage={() => controller.field.onChange(null)}
+        />
+      </Box>
+    </FormField>
+  );
+};
+
+export const FormImageInput = observer(_FormImageInput);

package/src/components/image/image-view-field.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Box, Text } from '@wix/design-system';
+import { getImageUrl } from '../../utils/get-image-url';
+import {
+  MEDIA_HEIGHT,
+  MEDIA_MAX_WIDTH,
+  MEDIA_BORDER_RADIUS,
+} from '../../utils/media-constants';
+
+export interface ImageViewFieldProps {
+  value: unknown;
+  displayName: string;
+  id: string;
+}
+
+export const ImageViewField: React.FC<ImageViewFieldProps> = ({
+  value,
+  displayName,
+  id,
+}) => {
+  const imageValue = typeof value === 'string' ? value : undefined;
+  const imageUrl = getImageUrl(imageValue);
+
+  if (!imageUrl) {
+    return <Text>-</Text>;
+  }
+
+  return (
+    <Box
+      height={MEDIA_HEIGHT}
+      width="100%"
+      maxWidth={MEDIA_MAX_WIDTH}
+      borderRadius={MEDIA_BORDER_RADIUS}
+      overflow="hidden"
+    >
+      <img
+        src={imageUrl}
+        alt={displayName || id}
+        style={{
+          height: '100%',
+          width: '100%',
+          objectFit: 'cover',
+          display: 'block',
+        }}
+      />
+    </Box>
+  );
+};

package/src/components/image/index.ts

@@ -1,3 +1,5 @@
 export * from './image-thumbnail';
 export * from './image-view';
+export * from './image-view-field';
 export * from './cell-image-edit';
+export * from './form-image-input';

package/src/components/image/thumbnail-replace-overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay2773158491";
+var _namespace_ = "thumbnailreplaceoverlay583325301";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"thumbnailreplaceoverlay2773158491__root","icon":"thumbnailreplaceoverlay2773158491__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay583325301__root","icon":"thumbnailreplaceoverlay583325301__icon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/index.ts

@@ -1,9 +1,11 @@
 export * from './address';
+export * from './array';
 export * from './audio';
 export * from './common';
 export * from './exclamation';
 export * from './time-input';
 export * from './time-view';
+export * from './json-input';
 export * from './object';
 export * from './media-gallery';
 export * from './rich-content';
@@ -13,6 +15,8 @@ export * from './video';
 export * from './document';
 export * from './multi-document';
 export * from './color-view';
+export * from './date-input';
+export * from './datetime-input';
 export * from './delete-dialog';
 export * from './email';
 export * from './boolean';

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

@@ -0,0 +1,2 @@
+export * from './json-input';
+export * from './form-json-input';