@wix/patterns-fields 1.0.0

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

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { Text, TextProps } from '@wix/design-system';
+
+import { smallTooltipCommonProps } from '../../utils/tooltip';
+import { truncateEntityTitle } from '../../utils/truncate-entity-title';
+import { classes, st } from './text-view.st.css.js';
+
+export type TextViewProps = TextProps & {
+  data?: string | number | boolean;
+};
+
+export const TextView = (props: TextViewProps) => {
+  const {
+    data = '',
+    size = 'small',
+    weight = 'normal',
+    tooltipProps,
+    className,
+    ...rest
+  } = props;
+  return (
+    <Text
+      ellipsis
+      {...rest}
+      size={size}
+      weight={weight}
+      tooltipProps={{ ...smallTooltipCommonProps, ...tooltipProps }}
+      className={st(classes.textView, {}, className)}
+    >
+      {truncateEntityTitle(String(data))}
+    </Text>
+  );
+};
+
+TextView.displayName = 'TextView';

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

@@ -0,0 +1,40 @@
+import type { FC } from 'react';
+import React, { useRef } from 'react';
+
+import type { TimeInputImperativeActions } from '@wix/design-system';
+
+import type { FormInputProps } from '../../types';
+import { useAutoFocus } from '../../hooks';
+
+import { AutoWidthTimeInput } from './time-input';
+import { useTime, type Time } from './hooks';
+
+export type FormTimeInputProps = FormInputProps<Time>;
+
+export const FormTimeInput: FC<FormTimeInputProps> = ({
+  data,
+  onChange,
+  onInput,
+  autoFocus,
+  readOnly,
+  dataHook,
+}) => {
+  const inputRef = useRef<TimeInputImperativeActions>(null);
+  useAutoFocus(inputRef, autoFocus);
+
+  const [value, onChangeValue] = useTime(data, onChange);
+
+  return (
+    <AutoWidthTimeInput
+      dataHook={dataHook}
+      ref={inputRef}
+      readOnly={readOnly}
+      value={value}
+      onChange={onChangeValue}
+      onInput={onInput}
+    />
+  );
+};
+
+FormTimeInput.displayName = 'FormTimeInput';
+

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

@@ -0,0 +1,77 @@
+import { useCallback, useMemo } from 'react';
+
+export type Time = string; // hh:mm:ss.SSS
+
+const COMMON_TIME_STRUCTURE_REGEXP = /(\d+):(\d+)(?::(\d+))?(?:\.(\d+))?/;
+
+const timePartToNumber = (timePart?: string) => {
+  const number = Number(timePart);
+  return Number.isFinite(number) ? number : 0;
+};
+
+const numberToTimePart = (number: number, partLength = 2) => {
+  return ('00' + number).slice(-partLength);
+};
+
+export const timeToDate = (time: Time): Date => {
+  const date = new Date();
+  try {
+    const timeMatch = time.match(COMMON_TIME_STRUCTURE_REGEXP);
+
+    if (!timeMatch) {
+      return date;
+    }
+
+    const timeParts = [
+      timeMatch[1],
+      timeMatch[2],
+      timeMatch[3],
+      timeMatch[4],
+    ].map(timePartToNumber) as [number, number, number, number];
+
+    date.setHours(...timeParts);
+  } catch {
+    date.setHours(0, 0, 0, 0);
+  }
+  return date;
+};
+
+export const dateToTime = (date: Date): Time => {
+  if (!Number.isFinite(date.getTime())) {
+    return '00:00:00.000';
+  }
+
+  const hh = numberToTimePart(date.getHours());
+  const mm = numberToTimePart(date.getMinutes());
+  const ss = numberToTimePart(date.getSeconds());
+  const SSS = numberToTimePart(date.getMilliseconds(), 3);
+
+  return `${hh}:${mm}:${ss}.${SSS}`;
+};
+
+/**
+ * Data format adapter hook for TimeInput component.
+ *
+ * Converts between storage format (string "hh:mm:ss.SSS") and UI format (Date object).
+ * This allows the Design System's TimeInput component (which expects Date) to work
+ * seamlessly with auto-patterns form state (which stores time as strings).
+ *
+ * @param time - Time value as string in "hh:mm:ss.SSS" format from form state
+ * @param onChangeTime - Callback that expects time as string in "hh:mm:ss.SSS" format
+ * @returns Tuple of [Date value for UI, onChange handler that converts Date back to string]
+ *
+ * @example
+ * const [value, onChangeValue] = useTime(data, onChange);
+ * <TimeInput value={value} onChange={onChangeValue} />
+ */
+export const useTime = (
+  time: Time | undefined,
+  onChangeTime: (time?: Time) => void,
+) => {
+  const value = useMemo(() => (time ? timeToDate(time) : undefined), [time]);
+  const onChangeValue = useCallback(
+    (date?: Date) => onChangeTime(date && dateToTime(date)),
+    [onChangeTime],
+  );
+  return [value, onChangeValue] as const;
+};

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

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

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

@@ -0,0 +1,173 @@
+import React, {
+  forwardRef,
+  useRef,
+  useMemo,
+  useState,
+  useCallback,
+} from 'react';
+import { useTranslations } from '../../hooks/use-translations';
+import isEqual from 'lodash/isEqual';
+import type {
+  TimeInputProps as WSRTimeInputProps,
+  TimeInputImperativeActions,
+} from '@wix/design-system';
+import { TimeInput as WSRTimeInput } from '@wix/design-system';
+
+import { useRequestFrameCallback, useSetSelectionOnFocus } from '../../hooks';
+
+export type { TimeInputImperativeActions } from '@wix/design-system';
+
+export interface TimeInputProps
+  extends Omit<
+    WSRTimeInputProps,
+    'value' | 'onChange' | 'locale' | 'onInvalid'
+  > {
+  value?: Date;
+  onChange?(date?: Date): void;
+  onInvalidChange?(invalid: boolean): void;
+  onInput?(): void;
+}
+
+const formatLocalTime = (date: Date): string => {
+  return date.toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+};
+
+export const TimeInput = forwardRef<TimeInputImperativeActions, TimeInputProps>(
+  (
+    {
+      value,
+      onFocus,
+      onBlur,
+      onChange,
+      onInvalidChange,
+      onInput,
+      placeholder,
+      invalidMessage,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    const { t, i18n } = useTranslations();
+
+    const invalidRef = useRef(false);
+    const onInputInvalid = useCallback(() => {
+      onInput?.();
+      invalidRef.current = true;
+      onInvalidChange?.(true);
+    }, [onInvalidChange, onInput]);
+
+    const onInputChange = useCallback(
+      ({ date }: { date: Date | null }) => {
+        onInput?.();
+
+        invalidRef.current = false;
+        onInvalidChange?.(false);
+
+        const time = date !== null ? date : undefined;
+        !isEqual(value, time) && onChange?.(time);
+      },
+      [value, onChange, onInput, onInvalidChange],
+    );
+
+    const onSetSelection = useSetSelectionOnFocus();
+    const onInputFocus = useCallback(
+      (e: React.FocusEvent<HTMLInputElement>) => {
+        onSetSelection(e);
+        onFocus?.(e);
+      },
+      [onSetSelection, onFocus],
+    );
+
+    const requestBlurCallback = useRequestFrameCallback();
+    const onInputBlur = useCallback(
+      (e: React.FocusEvent<HTMLInputElement>) => {
+        onBlur?.(e);
+
+        if (invalidRef.current) {
+          requestBlurCallback(() => {
+            if (!invalidRef.current) {
+              onInvalidChange?.(false);
+            }
+          });
+        }
+      },
+      [onBlur, requestBlurCallback, onInvalidChange],
+    );
+
+    return (
+      <WSRTimeInput
+        {...props}
+        ref={forwardedRef}
+        value={value || null}
+        onFocus={onInputFocus}
+        onBlur={onInputBlur}
+        autoSelect={false}
+        onChange={onInputChange}
+        onInvalid={onInputInvalid}
+        placeholder={placeholder ?? t('auto-patterns.time_input.placeholder')}
+        invalidMessage={
+          invalidMessage ?? t('auto-patterns.time_input.invalid_message')
+        }
+        locale={i18n.language as WSRTimeInputProps['locale']}
+      />
+    );
+  },
+);
+
+TimeInput.displayName = 'TimeInput';
+
+const maxLengthDateTime = new Date(2012, 12, 12, 12);
+
+const inputWidthOffset = 4;
+const inputInvalidOffset = 2.75;
+const popoverWidthOffset = 13;
+
+export const AutoWidthTimeInput = forwardRef<
+  TimeInputImperativeActions,
+  TimeInputProps
+>(({ value, popoverProps, onInvalidChange, ...props }, forwardedRef) => {
+  const [invalid, setInvalid] = useState(false);
+  const onChangeInvalid = useCallback(
+    (status: boolean) => {
+      setInvalid(status);
+      onInvalidChange?.(status);
+    },
+    [onInvalidChange],
+  );
+
+  const calcWidth = useCallback(
+    (offset: number) => {
+      const formatted = formatLocalTime(maxLengthDateTime);
+      const invalidOffset = invalid ? inputInvalidOffset : 0;
+      return `${formatted.length + offset + invalidOffset}ch`;
+    },
+    [invalid],
+  );
+
+  const width = useMemo(() => calcWidth(inputWidthOffset), [calcWidth]);
+  const popoverWidth = useMemo(
+    () => calcWidth(popoverWidthOffset),
+    [calcWidth],
+  );
+
+  return (
+    <div style={{ width }}>
+      <TimeInput
+        {...props}
+        ref={forwardedRef}
+        value={value}
+        onInvalidChange={onChangeInvalid}
+        popoverProps={{
+          ...popoverProps,
+          placement: 'bottom-start',
+          width: popoverWidth,
+        }}
+      />
+    </div>
+  );
+});
+
+AutoWidthTimeInput.displayName = 'TimeInput';

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

@@ -0,0 +1,13 @@
+import { timeToDate, type Time } from '../time-input/hooks';
+
+const formatLocalTime = (date: Date): string => {
+  return date.toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+};
+
+export const useFormattedTime = (time?: Time) => {
+  return time ? formatLocalTime(timeToDate(time)) : undefined;
+};
+

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

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

package/src/components/time-view/time-view.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { TextView, type TextViewProps } from '../text';
+
+import { useFormattedTime } from './hooks';
+import { Time } from '../time-input';
+
+export type TimeViewProps = TextViewProps & {
+  data?: Time;
+};
+
+export const TimeView: React.FC<TimeViewProps> = ({ data, ...props }) => {
+  const time = useFormattedTime(data);
+  return <TextView {...props} data={time} />;
+};
+
+TimeView.displayName = 'TimeView';

package/src/components/user-site-fonts/fonts-urls.ts

@@ -0,0 +1,8 @@
+// Auto-generated from @wix/fonts-data
+// Source: googleFonts and fontsCssFileUrl exports from @wix/fonts-data
+// To update anything, see auto-cms-v2/bin/extract-fonts-urls.js
+
+export const googleFonts =
+  'https://static.parastorage.com/services/fonts-data/dist/google.pevhwy3x6rjv97vktts5.css';
+export const fontsCssFileUrl =
+  'https://static.parastorage.com/services/fonts-data/dist/fonts.hz267ac7fkkfb3a18o8z.css';

package/src/components/user-site-fonts/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { googleFonts, fontsCssFileUrl } from './fonts-urls';
+
+export const UserSiteFontsPreload = () => (
+  <>
+    <link rel="preload" as="style" href={googleFonts} />
+    <link rel="preload" as="style" href={fontsCssFileUrl} />
+  </>
+);
+
+export const UserSiteFonts = () => (
+  <>
+    <link rel="stylesheet" href={googleFonts} />
+    <link rel="stylesheet" href={fontsCssFileUrl} />
+  </>
+);

package/src/components/video/index.ts

@@ -0,0 +1,2 @@
+export { VideoView } from './video-view';
+export type { VideoViewProps } from './video-view';

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Box } from '@wix/design-system';
+
+import { MediaImage } from '../media-image';
+import { VideoIndicatorOverlay } from '../media-image/overlays';
+
+export interface VideoViewProps {
+  data?: string;
+  height?: string;
+  width?: string;
+  borderRadius?: string;
+}
+
+export const VideoView: React.FC<VideoViewProps> = ({
+  data,
+  height = '36px',
+  width = '100%',
+  borderRadius,
+}) => {
+  return (
+    <Box verticalAlign="middle" height="100%">
+      <MediaImage
+        src={data}
+        height={height}
+        width={width}
+        borderRadius={borderRadius}
+        size={MediaImage.Size.S}
+        suspended
+        overlay={
+          <VideoIndicatorOverlay
+            src={data}
+            size="small"
+            placement="bottomLeft"
+          />
+        }
+      />
+    </Box>
+  );
+};
+
+VideoView.displayName = 'VideoView';

package/src/exports/auto-field-types.ts

@@ -0,0 +1 @@
+export * from '../auto-field-types';

package/src/exports/form-document-field.ts

@@ -0,0 +1 @@
+export { FormDocumentField } from '../components/document/form-document-field';

package/src/exports/form-media-gallery-field.ts

@@ -0,0 +1 @@
+export { FormMediaGalleryField } from '../components/media-gallery/form-media-gallery-field';

package/src/exports/form-rich-content-input.ts

@@ -0,0 +1 @@
+export { FormRichContentInput } from '../components/rich-content/editor';

package/src/exports/providers.ts

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

package/src/exports/rich-content-view.ts

@@ -0,0 +1 @@
+export * from '../components/rich-content/rich-content-view';

package/src/exports/types.ts

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

package/src/exports/unidriver.ts

@@ -0,0 +1,2 @@
+export { FormMediaGalleryFieldUniDriver } from '../components/media-gallery/form-media-gallery-field.uni.driver';
+export { ColorViewUniDriver } from '../components/color-view/color-view.uni.driver';

package/src/exports/validations.ts

@@ -0,0 +1,18 @@
+export * from '../validations/validations';
+
+import * as arrayValidation from '../validations/array';
+import * as emailValidation from '../validations/email';
+import * as objectValidation from '../validations/object';
+import * as richContentValidation from '../validations/rich-content';
+import * as richTextValidation from '../validations/rich-text';
+import * as timeValidation from '../validations/time';
+import * as videoValidation from '../validations/video';
+export {
+  arrayValidation,
+  emailValidation,
+  objectValidation,
+  richContentValidation,
+  richTextValidation,
+  timeValidation,
+  videoValidation,
+};

package/src/external-types.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="@wix/yoshi-flow-library/types" />
+
+declare module 'draftjs-conductor' {
+  import type {
+    EditorState,
+    RawDraftContentState,
+    DraftDecorator,
+    Editor,
+  } from 'draft-js';
+
+  export function registerCopySource(editor: Editor): { unregister: () => void };
+  export function handleDraftEditorPastedText(
+    text: string,
+    html: string | undefined,
+    editorState: EditorState,
+  ): EditorState | false;
+  export function onDraftEditorCopy(editor: any): void;
+  export function onDraftEditorCut(editor: any): void;
+  export function getDraftEditorPastedContent(html: string): any;
+  export function getListNestingStyles(
+    selectorPrefix?: string,
+    minDepth?: number,
+    maxDepth?: number,
+    counterStyles?: string[],
+  ): string;
+  export function generateListNestingStyles(
+    selectorPrefix: string,
+    minDepth: number,
+    maxDepth: number,
+    counterStyles: string[],
+  ): string;
+  export function blockDepthStyleFn(block: any): string;
+  export function createEditorStateFromRaw(
+    rawContentState: RawDraftContentState | null,
+    decorator?: DraftDecorator,
+  ): EditorState;
+  export function serialiseEditorStateToRaw(
+    editorState: EditorState,
+  ): RawDraftContentState | null;
+  export const DRAFT_DEFAULT_MAX_DEPTH: number;
+  export const DRAFT_DEFAULT_DEPTH_CLASS: string;
+}

package/src/hooks/index.ts

@@ -0,0 +1,8 @@
+export * from './use-auto-focus';
+export * from './use-controlled-input';
+export * from './use-request-callback';
+export * from './use-set-selection-on-focus';
+export * from './use-open-state';
+export * from './use-translations';
+export * from './use-with-callback';
+export * from './use-resize-effect';

package/src/hooks/use-auto-focus.ts

@@ -0,0 +1,19 @@
+import type { RefObject } from 'react';
+import { useEffect } from 'react';
+
+export interface Focusable {
+  focus(): void;
+}
+
+export const useAutoFocus = <T extends Focusable>(
+  ref: RefObject<T>,
+  autoFocus = true,
+) => {
+  useEffect(() => {
+    if (!autoFocus) {
+      return;
+    }
+
+    ref.current?.focus();
+  }, [autoFocus, ref]);
+};

package/src/hooks/use-controlled-input.ts

@@ -0,0 +1,29 @@
+import type { MutableRefObject } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import isEqual from 'lodash/isEqual';
+
+export const useControlledInput = <T>(propsValue?: T) => {
+  const [value, setValue] = useState(propsValue);
+  const prevValueRef = useRef(propsValue);
+  useEffect(() => {
+    if (isEqual(propsValue, prevValueRef.current)) {
+      return;
+    }
+
+    setValue(propsValue);
+    prevValueRef.current = propsValue;
+  }, [propsValue]);
+  return [value, setValue, prevValueRef] as const;
+};
+
+export const useReverseValue = <T>(
+  setValue: (value?: T) => void,
+  prevValueRef: MutableRefObject<T | undefined>,
+) =>
+  useCallback(() => setValue(prevValueRef.current), [setValue, prevValueRef]);
+
+export const useClearValue = <T>(
+  setValue: (value?: T) => void,
+  clearedValue?: T,
+) => useCallback(() => setValue(clearedValue), [setValue, clearedValue]);

package/src/hooks/use-open-state.ts

@@ -0,0 +1,52 @@
+import { useState, useCallback } from 'react';
+
+type OpenStateCallbacks = {
+  onOpen?(): void;
+  onClose?(): void;
+  onChange?(open: boolean): void;
+};
+
+export const useOpenState = (
+  initialOpen = false,
+  {
+    onOpen: onOpenCallback,
+    onClose: onCloseCallback,
+    onChange: onChangeCallback,
+  }: OpenStateCallbacks = {},
+) => {
+  const [isOpen, setOpen] = useState(initialOpen);
+
+  const onOpen = useCallback(() => {
+    setOpen(true);
+    onChangeCallback?.(true);
+    onOpenCallback?.();
+  }, [onChangeCallback, onOpenCallback]);
+
+  const onClose = useCallback(() => {
+    setOpen(false);
+    onChangeCallback?.(false);
+    onCloseCallback?.();
+  }, [onCloseCallback, onChangeCallback]);
+
+  const onToggle = useCallback(
+    () =>
+      setOpen((open) => {
+        if (open) {
+          onCloseCallback?.();
+          onChangeCallback?.(false);
+        } else {
+          onOpenCallback?.();
+          onChangeCallback?.(true);
+        }
+        return !open;
+      }),
+    [onCloseCallback, onChangeCallback, onOpenCallback],
+  );
+
+  return {
+    isOpen,
+    onOpen,
+    onClose,
+    onToggle,
+  };
+};

package/src/hooks/use-request-callback.ts

@@ -0,0 +1,27 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+import {
+  cancelIdleCallback,
+  requestIdleCallback,
+} from '../utils/request-idle-callback';
+
+const requestCallback = (cb: () => void, idle: boolean) =>
+  !idle ? requestAnimationFrame(cb) : requestIdleCallback(cb);
+
+const cancelCallback = (id: number, idle: boolean) =>
+  !idle ? cancelAnimationFrame(id) : cancelIdleCallback(id);
+
+export const useRequestCallback = (idle: boolean) => {
+  const frameIdRef = useRef(0);
+  useEffect(() => () => cancelCallback(frameIdRef.current, idle), [idle]);
+  return useCallback(
+    (cb: () => void) => {
+      cancelCallback(frameIdRef.current, idle);
+      frameIdRef.current = requestCallback(cb, idle);
+    },
+    [idle],
+  );
+};
+
+export const useRequestIdleCallback = () => useRequestCallback(true);
+export const useRequestFrameCallback = () => useRequestCallback(false);