@wix/patterns-fields 1.0.0

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

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { MusicSmall as MusicSmallIcon } from '@wix/wix-ui-icons-common';
+
+import { getSchemaType, getMediaTitle } from '../../../utils';
+import { smallTooltipCommonProps } from '../../../utils/tooltip';
+
+import { MediaTag } from '../../media-tag';
+import { HighlightedText } from '../../highlighted-text';
+
+const audioTagProps = {
+  thumb: <MusicSmallIcon />,
+  titleTextProps: { tooltipProps: smallTooltipCommonProps },
+};
+
+export const AudioView: React.FC<any> = ({ data }) => {
+  return data ? (
+    <MediaTag {...audioTagProps} title={getMediaTitle(data)} />
+  ) : null;
+};
+
+export const HighlightedAudioView: React.FC<any> = ({
+  metadata: { highlight } = {} as any,
+  ...props
+}) => {
+  return (
+    <MediaTag
+      {...audioTagProps}
+      dataHook={`auto-view-highlight.${props.pointer}.${getSchemaType(
+        props.schema,
+      )}`}
+      title={
+        <HighlightedText highlight={highlight} highlightedBackground={false} />
+      }
+    />
+  );
+};

package/src/components/audio/audio-field/form-audio-field.st.css

@@ -0,0 +1,28 @@
+@property st-global(--wds-color-red-100);
+@property st-global(--wds-color-blue-300);
+@property st-global(--wds-border-radius-400);
+@property st-global(--wds-input-shadow-focus-standard);
+@property st-global(--wsr-color-R10);
+@property st-global(--wsr-color-B30);
+
+.addItem {
+    -st-states: disabled, error;
+    height: 120px !important;
+    box-sizing: border-box;
+}
+.addItem:focus-within {
+    box-shadow: var(--wds-input-shadow-focus-standard, 0 0 0 3px var(--wds-color-blue-300, var(--wsr-color-B30)));
+    border-radius: var(--wds-border-radius-400, 8px);
+}
+.addItem:disabled {
+    /* to enable addItem hover styles (cursor) in disabled mode */
+    pointer-events: auto !important;
+}
+.addItem:error {
+    border: 1px solid var(--wds-color-red-100, var(--wsr-color-R10)) !important;
+}
+
+
+.mediaTitle {
+    line-height: 18px !important;
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "formaudiofield3380924506";
+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":"formaudiofield3380924506__root","addItem":"formaudiofield3380924506__addItem","mediaTitle":"formaudiofield3380924506__mediaTitle"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"wds-color-red-100":"--wds-color-red-100","wds-color-blue-300":"--wds-color-blue-300","wds-border-radius-400":"--wds-border-radius-400","wds-input-shadow-focus-standard":"--wds-input-shadow-focus-standard","wsr-color-R10":"--wsr-color-R10","wsr-color-B30":"--wsr-color-B30"}; 
+
+
+
+

package/src/components/audio/audio-field/form-audio-field.tsx

@@ -0,0 +1,151 @@
+import type { FC } from 'react';
+import React, { useRef, useMemo } from 'react';
+
+import { getMediaURL } from '../../../auto-field-types';
+import type { AddItemActions } from '@wix/design-system';
+import { AddItem, AudioPlayer, Box, Text } from '@wix/design-system';
+import {
+  DownloadImport as Download,
+  Delete,
+  Replace,
+} from '@wix/wix-ui-icons-common';
+
+import { useWithCallback, useTranslations } from '../../../hooks';
+import { getMediaTitle, MEDIA_TYPES } from '../../../utils';
+
+import { Z_INDEX_MODAL_POPOVER } from '../../common';
+import type { FormMediaControlProps } from '../../media-control';
+import { useMediaControl } from '../../media-control';
+import { MediaLoader } from '../../media-loader';
+import { ActionsButton } from '../actions/actions-button';
+import { ACTIONS_MENU_DIVIDER } from '../actions/actions-menu';
+
+import { style, classes } from './form-audio-field.st.css.js';
+
+export const FormAudioField: FC<FormMediaControlProps> = ({
+  data,
+  onChange: onChangeAudio,
+  onClear: onClearAudio,
+  onInput,
+  autoFocus,
+  readOnly,
+  invalid,
+  dataHook,
+}) => {
+  const { t } = useTranslations();
+
+  const onChange = useWithCallback(onChangeAudio, onInput);
+  const onClear = useWithCallback(onClearAudio, onInput);
+
+  const inputRef = useRef<AddItemActions>(null);
+  const viewRef = useRef<HTMLDivElement>(null);
+
+  const { callMedia, onMediaLoad, downloadMedia, loading } = useMediaControl({
+    mediaType: MEDIA_TYPES.AUDIO,
+    value: data,
+    onChange,
+    autoFocus,
+    readOnly,
+    inputRef,
+    viewRef,
+  });
+
+  const actionsMenuProps = useMemo(() => {
+    const replaceAction = {
+      id: 'AUDIO_REPLACE',
+      dataHook: 'fromAudioInput.button.replace',
+      label: t('CMS.audio.button.replace'),
+      disabled: readOnly,
+      icon: <Replace />,
+      onClick: callMedia,
+    };
+
+    const downloadAction = {
+      id: 'AUDIO_DOWNLOAD',
+      label: t('CMS.audio.button.download'),
+      disabled: false,
+      icon: <Download />,
+      onClick: downloadMedia,
+    };
+
+    const clearAction = {
+      id: 'AUDIO_CLEAR',
+      dataHook: 'fromAudioInput.button.delete',
+      label: t('CMS.audio.button.delete'),
+      disabled: readOnly,
+      icon: <Delete />,
+      onClick: onClear,
+    };
+
+    const actions = [
+      replaceAction,
+      downloadAction,
+      ACTIONS_MENU_DIVIDER,
+      clearAction,
+    ];
+
+    return {
+      dataHook: 'fromAudioInput.moreActionsMenu',
+      actions,
+      zIndex: Z_INDEX_MODAL_POPOVER,
+    };
+  }, [t, readOnly, callMedia, downloadMedia, onClear]);
+
+  if (loading) {
+    return <MediaLoader borderStyle="dashed" className={classes.addItem} />;
+  }
+
+  if (!data) {
+    return (
+      <AddItem
+        ref={inputRef}
+        dataHook={dataHook}
+        className={style(classes.addItem, {
+          disabled: !!readOnly,
+          error: invalid,
+        })}
+        theme="dashes"
+        onClick={callMedia}
+        disabled={readOnly}
+        children={t('CMS.audio.button.add')}
+      />
+    );
+  }
+
+  return (
+    <Box dataHook={dataHook} direction="vertical" gap="S1">
+      <div ref={viewRef} tabIndex={0}>
+        <Box
+          direction="vertical"
+          verticalAlign="middle"
+          backgroundColor="D70"
+          padding="SP5"
+          borderRadius={12}
+        >
+          <Text
+            dataHook="fromAudioInput.audioName"
+            className={classes.mediaTitle}
+          >
+            {getMediaTitle(data)}
+          </Text>
+          <Box direction="horizontal" marginTop="9px" marginBottom="-3px">
+            <AudioPlayer
+              dataHook="fromAudioInput.player"
+              src={getMediaURL(data)}
+              onLoad={onMediaLoad}
+              onLoadError={onMediaLoad}
+            />
+            <Box marginLeft="SP3" gap="SP1">
+              <ActionsButton
+                dataHook="fromAudioInput.button.more"
+                actionsMenuProps={actionsMenuProps}
+                priority="secondary"
+                skin="inverted"
+              />
+            </Box>
+          </Box>
+        </Box>
+      </div>
+    </Box>
+  );
+};

package/src/components/audio/audio-field/index.ts

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

package/src/components/audio/audio-player/audio-player.st.css

@@ -0,0 +1,11 @@
+.root {
+    width: fit-content;
+    z-index: 1000;
+    position: fixed !important;
+    bottom: 42px;
+    right: 48px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

package/src/components/audio/audio-player/audio-player.st.css.ts

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

package/src/components/audio/audio-player/audio-player.tsx

@@ -0,0 +1,49 @@
+import type { FC } from 'react';
+import React, { useEffect, useState } from 'react';
+
+import { getMediaURL } from '../../../auto-field-types';
+import { Box, AudioPlayer, Card, Text, CloseButton } from '@wix/design-system';
+
+import { getMediaTitle } from '../../../utils';
+import { classes } from './audio-player.st.css.js';
+
+interface FloatingAudioPlayerProps {
+  source: string | null;
+  onClose: () => void;
+}
+export const FloatingAudioPlayer: FC<FloatingAudioPlayerProps> = ({
+  source,
+  onClose,
+}) => {
+  const [audioSrc, setAudioSrc] = useState(source);
+
+  useEffect(() => {
+    setAudioSrc(null);
+    onClose?.();
+  }, [onClose]);
+
+  if (!audioSrc) {
+    return null;
+  }
+
+  return (
+    <Card
+      className={classes.root}
+      showShadow
+      controls={<CloseButton size="medium" onClick={onClose} />}
+    >
+      <Box
+        direction="vertical"
+        paddingLeft="SP6"
+        paddingRight="SP6"
+        paddingTop="SP5"
+        paddingBottom="SP5"
+        width="369px"
+        gap="SP3"
+      >
+        <Text secondary>{getMediaTitle(audioSrc)}</Text>
+        <AudioPlayer autoplay src={getMediaURL(audioSrc)} />
+      </Box>
+    </Card>
+  );
+};

package/src/components/audio/audio-player/index.ts

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

package/src/components/audio/index.ts

@@ -0,0 +1,2 @@
+export * from './audio-player';
+export * from './audio-field';

package/src/components/color-view/color-input.tsx

@@ -0,0 +1,161 @@
+import React, { forwardRef, useCallback, useState } from 'react';
+import type {
+  ColorPickerProps,
+  InputImperativeActions,
+  InputProps,
+} from '@wix/design-system';
+import {
+  ColorPicker,
+  FillButton,
+  FillPreview,
+  Input,
+  Popover,
+} from '@wix/design-system';
+import ColorLib, { rgb } from 'color';
+
+type ColorInstance = ReturnType<typeof rgb>;
+
+const omitHash = (value: string) => value.replace(/^#/, '');
+
+const isValidHex = (value: string): boolean =>
+  /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(value);
+
+const normalizeHex = (value: string): string | undefined => {
+  const cleaned = value.startsWith('#') ? value : `#${value}`;
+  if (isValidHex(cleaned)) {
+    return cleaned.toUpperCase();
+  }
+  return undefined;
+};
+
+const safeColorLib = (value: string): ColorInstance | undefined => {
+  try {
+    return ColorLib(value);
+  } catch {
+    return undefined;
+  }
+};
+
+export interface ColorInputProps
+  extends Omit<InputProps, 'value' | 'onChange' | 'prefix' | 'suffix'> {
+  value?: string;
+  onChange?: (hex: string) => void;
+}
+
+export const ColorInput = forwardRef<InputImperativeActions, ColorInputProps>(
+  ({ value: colorValue, onChange, onBlur, ...props }, ref) => {
+    const [inputValue, setInputValue] = useState(
+      colorValue ? omitHash(colorValue) : '',
+    );
+    const [showPicker, setShowPicker] = useState(false);
+    const [pickerColor, setPickerColor] = useState<ColorInstance | undefined>(
+      colorValue ? safeColorLib(colorValue) : undefined,
+    );
+
+    const onInputChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        const raw = e.target.value;
+        setInputValue(raw);
+
+        const hex = normalizeHex(raw);
+        if (hex) {
+          onChange?.(hex);
+          setPickerColor(safeColorLib(hex));
+        }
+      },
+      [onChange],
+    );
+
+    const onInputBlur = useCallback(
+      (e: React.FocusEvent<HTMLInputElement>) => {
+        const hex = normalizeHex(inputValue);
+        if (hex) {
+          onChange?.(hex);
+          setInputValue(omitHash(hex));
+        } else if (colorValue) {
+          setInputValue(omitHash(colorValue));
+        } else {
+          setInputValue('');
+        }
+        onBlur?.(e);
+      },
+      [onChange, onBlur, inputValue, colorValue],
+    );
+
+    const onPickerConfirm = useCallback(
+      (confirmedColor: ColorPickerProps['value']) => {
+        const hex =
+          typeof confirmedColor === 'string'
+            ? confirmedColor
+            : confirmedColor?.hex()?.toUpperCase();
+        if (hex) {
+          onChange?.(hex);
+          setInputValue(omitHash(hex));
+          setPickerColor(safeColorLib(hex));
+        }
+        setShowPicker(false);
+      },
+      [onChange],
+    );
+
+    const onPickerCancel = useCallback(() => {
+      setPickerColor(colorValue ? safeColorLib(colorValue) : undefined);
+      setShowPicker(false);
+    }, [colorValue]);
+
+    const onPreviewClick = useCallback(() => {
+      setShowPicker((prev) => !prev);
+    }, []);
+
+    return (
+      <Input
+        {...props}
+        ref={ref}
+        value={inputValue}
+        onChange={onInputChange}
+        onBlur={onInputBlur}
+        prefix={<Input.Affix>#</Input.Affix>}
+        suffix={
+          <Input.Affix>
+            <Popover
+              shown={showPicker}
+              onClickOutside={() => setShowPicker(false)}
+              animate
+              flip
+              fixed={false}
+              placement="left-start"
+              appendTo="scrollParent"
+              moveBy={{ x: 6, y: 6 }}
+              zIndex={5001}
+            >
+              <Popover.Element>
+                {colorValue ? (
+                  <FillPreview fill={colorValue} onClick={onPreviewClick} />
+                ) : (
+                  <FillButton onClick={onPreviewClick} />
+                )}
+              </Popover.Element>
+              <Popover.Content>
+                <ColorPicker
+                  value={pickerColor as ColorPickerProps['value']}
+                  onChange={
+                    ((c: ColorPickerProps['value']) =>
+                      setPickerColor(
+                        c as ColorInstance | undefined,
+                      )) as ColorPickerProps['onChange']
+                  }
+                  onConfirm={onPickerConfirm}
+                  onCancel={onPickerCancel}
+                  showConverter
+                  allowEmpty
+                />
+              </Popover.Content>
+            </Popover>
+          </Input.Affix>
+        }
+      />
+    );
+  },
+);
+
+ColorInput.displayName = 'ColorInput';

package/src/components/color-view/color-view.st.css

@@ -0,0 +1,14 @@
+.view {
+    width: 100%;
+}
+
+.fillPreview {
+    flex-shrink: 0;
+}
+
+.view .fillPreview {
+    width: 18px;
+    height: 18px;
+    min-width: 18px !important;
+    min-height: 18px !important;
+}

package/src/components/color-view/color-view.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "colorview982264768";
+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":"colorview982264768__root","view":"colorview982264768__view","fillPreview":"colorview982264768__fillPreview"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

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

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { Box, FillPreview, Text } from '@wix/design-system';
+
+import { classes } from './color-view.st.css.js';
+
+export interface ColorViewProps {
+  data?: string;
+  children?: React.ReactNode;
+}
+
+const ColorPreview: React.FC<ColorViewProps> = ({ data, children }) => {
+  return (
+    <Box
+      className={classes.view}
+      align="left"
+      verticalAlign="middle"
+      direction="horizontal"
+      gap="SP1"
+      dataHook="color-view"
+    >
+      <FillPreview
+        className={classes.fillPreview}
+        aspectRatio={1}
+        fill={data}
+        dataHook="color-view-fill-preview"
+      />
+      {children}
+    </Box>
+  );
+};
+
+export const ColorView: React.FC<ColorViewProps> = (props) => {
+  return (
+    <ColorPreview {...props}>
+      <Text size="small" weight="normal" dataHook="color-view-text">
+        {props.data ?? '#'}
+      </Text>
+    </ColorPreview>
+  );
+};

package/src/components/color-view/color-view.uni.driver.ts

@@ -0,0 +1,17 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { FillPreviewUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import { baseUniDriverFactory } from '../../testkit/base-driver';
+
+export function ColorViewUniDriver(base: UniDriver, body: UniDriver) {
+  const root = base.$('[data-hook="color-view"]');
+
+  return {
+    ...baseUniDriverFactory(root),
+    getFillPreview: () =>
+      FillPreviewUniDriver(
+        root.$('[data-hook="color-view-fill-preview"]'),
+        body,
+      ),
+    getText: () => root.$('[data-hook="color-view-text"]').text(),
+  };
+}

package/src/components/color-view/form-color-input.tsx

@@ -0,0 +1,31 @@
+import React, { useRef, useImperativeHandle } from 'react';
+
+import type { InputImperativeActions } from '@wix/design-system';
+
+import { ColorInput, ColorInputProps } from './color-input';
+import { FormInputProps } from '../../types';
+import { useAutoFocus } from '../../hooks';
+
+export type FormColorInputProps = FormInputProps<string> & ColorInputProps;
+
+export const FormColorInput = React.forwardRef<
+  InputImperativeActions,
+  FormColorInputProps
+>(({ data, onChange, autoFocus, readOnly, dataHook }, ref) => {
+  const inputRef = useRef<InputImperativeActions | null>(null);
+  useAutoFocus(inputRef, autoFocus);
+
+  useImperativeHandle(ref, () => inputRef.current as InputImperativeActions);
+
+  return (
+    <ColorInput
+      dataHook={dataHook}
+      ref={inputRef}
+      value={data}
+      onChange={onChange}
+      readOnly={readOnly}
+    />
+  );
+});
+
+FormColorInput.displayName = 'FormColorInput';

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

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

package/src/components/common.ts

@@ -0,0 +1,5 @@
+export const Z_INDEX_POPOVER = 99;
+// export const Z_INDEX_BM_TOAST = 1800;
+export const Z_INDEX_MODAL_OVERLAY = 5000;
+// export const Z_INDEX_FRAME_MODAL = Z_INDEX_MODAL_OVERLAY + 1;
+export const Z_INDEX_MODAL_POPOVER = Z_INDEX_MODAL_OVERLAY + 2;

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

@@ -0,0 +1,3 @@
+.layout {
+    max-width: 510px !important;
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "deletedialog2078994546";
+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":"deletedialog2078994546__root","layout":"deletedialog2078994546__layout"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+