@wix/patterns-fields 1.0.0

package/src/components/media-tag/highlighted-media-tag.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import type { HighlightDescriptor } from '../../utils';
+
+import { HighlightedText } from '../highlighted-text';
+
+import type { MediaTagProps } from './web-media-tag';
+import { MediaTag } from './web-media-tag';
+
+export type HighlightedMediaTagProps = Omit<MediaTagProps, 'title'> & {
+  titleHighlight: HighlightDescriptor;
+};
+
+export const HighlightedMediaTag: React.FC<HighlightedMediaTagProps> = ({
+  titleHighlight,
+  ...props
+}) => {
+  return (
+    <MediaTag
+      {...props}
+      title={
+        <HighlightedText
+          highlight={titleHighlight}
+          highlightedBackground={false}
+        />
+      }
+    />
+  );
+};
+
+HighlightedMediaTag.displayName = 'HighlightedMediaTag';

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

@@ -0,0 +1,2 @@
+export * from './web-media-tag';
+export * from './highlighted-media-tag';

package/src/components/media-tag/web-media-tag/index.ts

@@ -0,0 +1,4 @@
+export { MediaTag } from './media-tag';
+export type { MediaTagProps } from './media-tag';
+export { TableMediaTagView } from './table-media-tag-view';
+export type { TableMediaTagViewProps } from './table-media-tag-view';

package/src/components/media-tag/web-media-tag/media-tag.st.css

@@ -0,0 +1,12 @@
+@property st-global(--wds-color-blue-400);
+@property st-global(--wsr-color-B40);
+
+.root {
+    box-sizing: border-box;
+    padding: 3px 6px 3px 3px;
+    border-radius: 3px;
+    max-height: 24px;
+    min-width: 54px;
+    max-width: 100%;
+    background-color: var(--wds-color-blue-400, var(--wsr-color-B40));
+}

package/src/components/media-tag/web-media-tag/media-tag.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "mediatag1642571975";
+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":"mediatag1642571975__root"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"wds-color-blue-400":"--wds-color-blue-400","wsr-color-B40":"--wsr-color-B40"}; 
+
+
+
+

package/src/components/media-tag/web-media-tag/media-tag.tsx

@@ -0,0 +1,29 @@
+import type { CSSProperties } from 'react';
+import React from 'react';
+
+import type { BoxProps, TextProps } from '@wix/design-system';
+import { Box, Text } from '@wix/design-system';
+
+import { style, classes } from './media-tag.st.css.js';
+
+export interface MediaTagProps extends BoxProps {
+  thumb: React.ReactNode;
+  title: React.ReactNode;
+  titleTextProps?: TextProps;
+}
+
+export const MediaTag: React.FC<
+  MediaTagProps & Omit<CSSProperties, 'direction'>
+> = ({ thumb, title, titleTextProps, className, children, ...props }) => {
+  return (
+    <Box {...props} className={style(classes.root, className)}>
+      <Box width="18px" height="18px" children={thumb} />
+      <Box minWidth="0" marginLeft="SP1" verticalAlign="middle">
+        <Text ellipsis size="small" children={title} {...titleTextProps} />
+      </Box>
+      {children}
+    </Box>
+  );
+};
+
+MediaTag.displayName = 'MediaTag';

package/src/components/media-tag/web-media-tag/table-media-tag-view.tsx

@@ -0,0 +1,37 @@
+import type { FC } from 'react';
+import React from 'react';
+import type { BoxProps } from '@wix/design-system';
+import { Box } from '@wix/design-system';
+
+import { getMediaTitle } from '../../../utils';
+import { MediaTag } from './media-tag';
+
+const TableMediaTagBox: FC<BoxProps> = (props) => (
+  <Box
+    {...props}
+    paddingLeft="SP2"
+    paddingRight="SP2"
+    boxSizing="border-box"
+    verticalAlign="middle"
+    width="100%"
+    height="100%"
+  />
+);
+
+export interface TableMediaTagViewProps {
+  data?: string;
+  thumb?: React.ReactNode;
+}
+
+export const TableMediaTagView: FC<TableMediaTagViewProps> = ({
+  data,
+  thumb,
+}) => {
+  return (
+    <TableMediaTagBox>
+      {data && <MediaTag thumb={thumb} title={getMediaTitle(data)} />}
+    </TableMediaTagBox>
+  );
+};
+
+TableMediaTagView.displayName = 'TableMediaTagView';

package/src/components/multi-document/index.ts

@@ -0,0 +1,2 @@
+export { MultiDocumentView } from './multi-document-view/multi-document-view';
+export { FormMultiDocumentField } from './multi-document-input/form-multi-document-field';

package/src/components/multi-document/multi-document-input/form-multi-document-field.tsx

@@ -0,0 +1,103 @@
+import React, { useRef, useCallback } from 'react';
+
+import { MEDIA_TYPES } from '../../../utils/media-utils';
+import type { AddItemActions } from '@wix/design-system';
+
+import type { FormMediaControlProps } from '../../media-control';
+import {
+  PasteURLForm,
+  useMediaControl,
+  usePasteURLForm,
+} from '../../media-control';
+import { FormDocumentInput } from '../../document/form';
+import { useTranslations, useWithCallback } from '../../../hooks';
+
+import { FormMultiDocumentView } from './form-multi-document-view';
+
+export const FormMultiDocumentField: React.FC<
+  FormMediaControlProps<string[]>
+> = ({
+  data,
+  onChange: onChangeMultiDocument,
+  onInput,
+  autoFocus,
+  readOnly,
+  invalid,
+  dataHook,
+}) => {
+  const { t } = useTranslations();
+
+  const onChange = useWithCallback(onChangeMultiDocument, onInput);
+
+  const inputRef = useRef<AddItemActions>(null);
+  const firstDocumentViewRef = useRef<HTMLDivElement>(null);
+
+  const { callMedia, loading, downloadMedia } = useMediaControl({
+    mediaType: MEDIA_TYPES.ALL_MEDIA,
+    value: data,
+    onChange,
+    autoFocus,
+    readOnly,
+    inputRef,
+    viewRef: firstDocumentViewRef,
+    multiSelect: true,
+  });
+
+  const onPastedURLChange = useCallback(
+    (value: string, indexToReplace?: number) => {
+      if (indexToReplace !== undefined) {
+        const nextData = [...(data ?? [])];
+        nextData.splice(indexToReplace, 1, value);
+        onChange(nextData);
+      } else {
+        onChange([...(data ?? []), value]);
+      }
+    },
+    [data, onChange],
+  );
+
+  const { isOpen, title, onOpen, onClose, onSave, value } = usePasteURLForm({
+    onChange: onPastedURLChange,
+  });
+
+  return (
+    <>
+      {data?.length ? (
+        <FormMultiDocumentView
+          dataHook={dataHook}
+          data={data}
+          readOnly={readOnly}
+          callMedia={callMedia}
+          onDownload={downloadMedia}
+          onChange={onChange}
+          ref={firstDocumentViewRef}
+          loading={loading}
+          onOpenPasteURLForm={onOpen}
+        />
+      ) : (
+        <FormDocumentInput
+          dataHook={dataHook}
+          ref={inputRef}
+          theme="dashes"
+          disabled={readOnly}
+          loading={loading}
+          error={invalid}
+          loaderBorderStyle="dashed"
+          onAddButtonClick={callMedia as () => Promise<void>}
+          onPasteURLButtonClick={onOpen({
+            title: t('CMS.document.pasteUrl.title'),
+          })}
+        />
+      )}
+      <PasteURLForm
+        title={title}
+        value={value}
+        show={isOpen}
+        closeModal={onClose}
+        onSave={onSave}
+      />
+    </>
+  );
+};
+
+FormMultiDocumentField.displayName = 'FormMultiDocumentField';

package/src/components/multi-document/multi-document-input/form-multi-document-view.tsx

@@ -0,0 +1,111 @@
+import React, { useCallback, useState } from 'react';
+
+import { Box, Text } from '@wix/design-system';
+
+import { DocumentControl, AddDocumentButton } from '../../document/form';
+import type { OpenPasteURLFormParams } from '../../media-control';
+import { PasteURLButton, useDocumentDelete } from '../../media-control';
+import { DeleteDialog } from '../../delete-dialog';
+import { useTranslations } from '../../../hooks';
+
+import { classes } from './form-multi-document.st.css.js';
+
+interface FormMultiDocumentViewProps {
+  data: string[];
+  readOnly?: boolean;
+  onChange: (value: string[]) => void;
+  callMedia: (index?: number) => Promise<void>;
+  onDownload: (mediaURI?: string) => void;
+  loading: boolean;
+  dataHook?: string;
+  onOpenPasteURLForm: (params: OpenPasteURLFormParams) => () => void;
+}
+
+export const FormMultiDocumentView = React.forwardRef<
+  HTMLDivElement,
+  FormMultiDocumentViewProps
+>(
+  (
+    {
+      data,
+      readOnly,
+      onChange,
+      callMedia,
+      loading,
+      dataHook,
+      onOpenPasteURLForm,
+      onDownload,
+    },
+    ref,
+  ) => {
+    const { t } = useTranslations();
+
+    const [replacedDocumentIndex, setReplacedDocumentIndex] = useState<
+      number | null
+    >(null);
+
+    const { isOpen, onDelete, onDeleteCancel, onDeleteConfirm, title, text } =
+      useDocumentDelete({ data, onChange });
+
+    const onReplace = useCallback(
+      (index: number) => async () => {
+        setReplacedDocumentIndex(index);
+        await callMedia(index);
+        setReplacedDocumentIndex(null);
+      },
+      [callMedia],
+    );
+
+    return (
+      <div data-hook={dataHook}>
+        <Box direction="vertical" className={classes.viewRoot}>
+          {data.map((mediaURI, index) => (
+            <DocumentControl
+              dataHook={`multi-document-field-document-${index}`}
+              key={index}
+              ref={index === 0 ? ref : undefined}
+              mediaURI={mediaURI}
+              readOnly={readOnly}
+              onReplace={onReplace(index)}
+              onDelete={onDelete(index)}
+              onDownload={onDownload}
+              className={classes.singleViewWrapper}
+              loading={index === replacedDocumentIndex ? loading : false}
+              loaderClassName={classes.singleViewWrapper}
+              onOpenPasteURLForm={onOpenPasteURLForm({
+                index,
+                value: mediaURI,
+                title: t('CMS.document.replaceWithUrl.title'),
+              })}
+            />
+          ))}
+          <AddDocumentButton
+            dataHook="multi-document-field-add-document-button"
+            theme="plain"
+            disabled={readOnly}
+            onClick={callMedia as () => Promise<void>}
+            className={classes.addDocumentButton}
+            loading={replacedDocumentIndex === null ? loading : false}
+          />
+        </Box>
+        <PasteURLButton
+          title={t('CMS.document.pasteUrl.button')}
+          disabled={readOnly}
+          onClick={onOpenPasteURLForm({
+            title: t('CMS.document.pasteUrl.title'),
+          })}
+        />
+        <DeleteDialog
+          open={isOpen}
+          title={title}
+          onClose={onDeleteCancel}
+          onDelete={onDeleteConfirm}
+        >
+          <Text>{text}</Text>
+        </DeleteDialog>
+      </div>
+    );
+  },
+);
+
+FormMultiDocumentView.displayName = 'FormMultiDocumentView';

package/src/components/multi-document/multi-document-input/form-multi-document.st.css

@@ -0,0 +1,50 @@
+@property st-global(--wds-border-radius-300);
+@property st-global(--wds-color-blue-300);
+@property st-global(--wds-color-blue-500);
+@property st-global(--wds-color-neutral-600);
+@property st-global(--wsr-color-B30);
+@property st-global(--wsr-color-B50);
+@property st-global(--wsr-color-D60);
+
+:vars {
+    BorderRadius: 2px;
+    documentViewBorderRadius: var(--wds-border-radius-300, calc(value(BorderRadius) * 3));
+}
+
+.viewRoot {
+    border-radius: value(documentViewBorderRadius);
+    border: 1px solid var(--wds-color-blue-300, var(--wsr-color-B30));
+}
+
+.singleViewWrapper {
+    border-radius: 0;
+    border-bottom: 1px solid var(--wds-color-neutral-600, var(--wsr-color-D60));
+    background-color: transparent !important;
+}
+
+.viewRoot > div:first-child .singleViewWrapper {
+    border-top-left-radius: value(documentViewBorderRadius);
+    border-top-right-radius: value(documentViewBorderRadius);
+}
+
+.singleViewWrapper:hover {
+    background-color: var(--wds-color-blue-500, var(--wsr-color-B50)) !important;
+}
+
+.singleViewWrapper:focus-visible {
+    border-bottom: 1px solid transparent;
+    position: relative;
+    z-index: 1;
+}
+
+.addDocumentButton {
+    border-bottom-left-radius: value(documentViewBorderRadius);
+    border-bottom-right-radius: value(documentViewBorderRadius);
+}
+
+.addDocumentButton:focus-within {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: value(documentViewBorderRadius);
+    border-bottom-right-radius: value(documentViewBorderRadius);
+}

package/src/components/multi-document/multi-document-input/form-multi-document.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "formmultidocument2604366581";
+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":"formmultidocument2604366581__root","viewRoot":"formmultidocument2604366581__viewRoot","singleViewWrapper":"formmultidocument2604366581__singleViewWrapper","addDocumentButton":"formmultidocument2604366581__addDocumentButton"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {"BorderRadius":"2px","documentViewBorderRadius":"var(--wds-border-radius-300, calc(2px * 3))"}; 
+export var vars = {"wds-border-radius-300":"--wds-border-radius-300","wds-color-blue-300":"--wds-color-blue-300","wds-color-blue-500":"--wds-color-blue-500","wds-color-neutral-600":"--wds-color-neutral-600","wsr-color-B30":"--wsr-color-B30","wsr-color-B50":"--wsr-color-B50","wsr-color-D60":"--wsr-color-D60"}; 
+
+
+
+

package/src/components/multi-document/multi-document-view/multi-document-tags.tsx

@@ -0,0 +1,23 @@
+import type { CSSProperties } from 'react';
+import React from 'react';
+import type { BoxProps } from '@wix/design-system';
+import { Box } from '@wix/design-system';
+import { DocumentView } from '../../document';
+
+export interface MultiDocumentTagsProps extends BoxProps {
+  documents?: string[];
+}
+
+export const MultiDocumentTags: React.FC<
+  MultiDocumentTagsProps & CSSProperties
+> = ({ documents, ...props }) => {
+  return (
+    <Box width="100%" gap="SP1" verticalAlign="top" {...props}>
+      {documents?.map((document, index) => (
+        <DocumentView data={document} key={`${index}_${document}`} />
+      ))}
+    </Box>
+  );
+};
+
+MultiDocumentTags.displayName = 'MultiDocumentTags';

package/src/components/multi-document/multi-document-view/multi-document-view.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { MultiDocumentTags } from './multi-document-tags';
+
+export interface MultiDocumentViewProps {
+  data?: string[];
+}
+
+export const MultiDocumentView: React.FC<MultiDocumentViewProps> = ({
+  data,
+}) => {
+  return <MultiDocumentTags overflow="hidden" documents={data} />;
+};
+
+MultiDocumentView.displayName = 'MultiDocumentView';

package/src/components/object/form-json-input.tsx

@@ -0,0 +1,34 @@
+import React, { useRef, useImperativeHandle } from 'react';
+
+import type { InputArea } from '@wix/design-system';
+
+import { JsonInput, JsonInputProps } from './json-input';
+import { FormInputProps } from '../../types';
+import { useAutoFocus } from '../../hooks';
+
+export type FormJsonInputProps = FormInputProps<any> & JsonInputProps;
+
+export const FormJsonInput = React.forwardRef<InputArea, FormJsonInputProps>(
+  ({ data, onChange, onInput, autoFocus, readOnly, dataHook }, ref) => {
+    const inputRef = useRef<InputArea | null>(null);
+    useAutoFocus(inputRef, autoFocus);
+
+    // Expose the internal input ref to the parent via forwarded ref
+    useImperativeHandle(ref, () => inputRef.current as InputArea);
+
+    return (
+      <JsonInput
+        dataHook={dataHook}
+        ref={inputRef}
+        value={data}
+        onChange={onChange}
+        onInput={onInput}
+        readOnly={readOnly}
+        rows={5}
+        resizable
+      />
+    );
+  },
+);
+
+FormJsonInput.displayName = 'FormJsonInput';

package/src/components/object/index.ts

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

package/src/components/object/json-input.tsx

@@ -0,0 +1,59 @@
+import React, { forwardRef, useCallback } from 'react';
+
+import type { InputAreaProps } from '@wix/design-system';
+import { InputArea } from '@wix/design-system';
+import { useControlledInput, useSetSelectionOnFocus } from '../../hooks';
+import { safeParse, safeStringify } from '../../utils';
+
+export interface JsonInputProps
+  extends Omit<InputAreaProps, 'value' | 'onChange'> {
+  value?: any;
+  onChange?: (value?: any) => void;
+  onInput?: () => void;
+}
+
+export const JsonInput = forwardRef<InputArea, JsonInputProps>(
+  ({ value, onChange, onInput, onBlur, readOnly, disabled, ...props }, ref) => {
+    const [json, setJson] = useControlledInput(safeStringify(value, true));
+    const onJsonChange = useCallback(
+      () =>
+        !readOnly && !disabled
+          ? onChange?.(json ? safeParse(json) : undefined)
+          : undefined,
+      [readOnly, disabled, json, onChange],
+    );
+
+    const onInputChange = useCallback(
+      (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setJson(event.target.value);
+        onInput?.();
+      },
+      [setJson, onInput],
+    );
+
+    const onInputFocus = useSetSelectionOnFocus();
+    const onInputBlur = useCallback(
+      (event: React.FocusEvent<HTMLTextAreaElement>) => {
+        onJsonChange();
+        onBlur?.(event);
+      },
+      [onBlur, onJsonChange],
+    );
+
+    return (
+      <InputArea
+        {...props}
+        ref={ref}
+        value={json ?? ''}
+        onChange={onInputChange}
+        onFocus={onInputFocus}
+        onBlur={onInputBlur}
+        readOnly={readOnly}
+        disabled={disabled}
+        autoSelect={false}
+      />
+    );
+  },
+);
+
+JsonInput.displayName = 'JsonInput';

package/src/components/object/json-view.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import { TextView } from '../text';
+import { safeStringify } from '../../utils/safe-json';
+
+export const JsonView = (props: { data?: unknown }) => {
+  return <TextView {...props} data={safeStringify(props.data, true, true)} />;
+};
+
+JsonView.displayName = 'JsonView';

package/src/components/rich-content/components/index.ts

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

package/src/components/rich-content/components/input-loader/index.ts

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

package/src/components/rich-content/components/input-loader/input-loader.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import type { BoxProps } from '@wix/design-system';
+import { Box, Loader } from '@wix/design-system';
+
+export const InputLoader: React.FC<BoxProps> = (props) => {
+  return (
+    <Box {...props}>
+      <Loader dataHook="input-loader.loader" size="tiny" />
+    </Box>
+  );
+};
+
+InputLoader.displayName = 'InputLoader';

package/src/components/rich-content/editor.ts

@@ -0,0 +1,5 @@
+// Heavy exports - these pull in @wix/ricos editor/viewer (~300kb+ gzipped)
+// Only import this file when you actually need the rich content editor
+export { default as FormRichContentInput } from './rich-content-input/form-input';
+export * from './hooks';
+export * from './rich-content-input/rich-content-editor';

package/src/components/rich-content/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './use-mounted-state';
+export * from './use-plain-text-rich-content';

package/src/components/rich-content/hooks/use-mounted-state.ts

@@ -0,0 +1,23 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+
+type UseMountedState = <S>(initialState: S) => [S, (state: S) => void];
+
+export const useMountedState: UseMountedState = (initialState) => {
+  const [state, setState] = useState(initialState);
+  const isMountedRef = useRef(false);
+
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
+  const setMountedState = useCallback((state) => {
+    if (isMountedRef.current) {
+      setState(state);
+    }
+  }, []);
+
+  return [state, setMountedState];
+};