@kitconcept/volto-light-theme 8.0.0-alpha.3 → 8.0.0-alpha.30

package/src/components/Widgets/ColorSwatch.test.tsx

@@ -0,0 +1,188 @@
+import React, { createContext, useContext } from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/react';
+import ColorSwatch from './ColorSwatch';
+import type { StyleDefinition } from '@plone/types';
+
+vi.mock('@plone/volto/components/manage/Widgets/FormFieldWrapper', () => ({
+  __esModule: true,
+  default: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="form-field-wrapper">{children}</div>
+  ),
+}));
+
+const MockRadioGroupContext = createContext<
+  ((value: string) => void) | undefined
+>(undefined);
+
+vi.mock('@plone/components', () => ({
+  RadioGroup: ({
+    children,
+    onChange,
+    ...rest
+  }: {
+    children: React.ReactNode;
+    onChange?: (value: string) => void;
+  }) => {
+    const { isDisabled: _isDisabled, ...passThrough } = rest as Record<
+      string,
+      unknown
+    >;
+
+    return (
+      <MockRadioGroupContext.Provider value={onChange}>
+        <div role="radiogroup" {...passThrough}>
+          {React.Children.map(children, (child) =>
+            React.isValidElement(child)
+              ? React.cloneElement(child, {
+                  onSelect: onChange,
+                })
+              : child,
+          )}
+        </div>
+      </MockRadioGroupContext.Provider>
+    );
+  },
+  Radio: ({
+    value,
+    onSelect,
+    className,
+    children,
+    ...rest
+  }: {
+    value: string;
+    onSelect?: (value: string) => void;
+    className?: string;
+    children?: React.ReactNode;
+  }) => {
+    const groupOnChange = useContext(MockRadioGroupContext);
+    return (
+      <button
+        type="button"
+        className={className}
+        data-value={value}
+        onClick={() => {
+          groupOnChange?.(value);
+          onSelect?.(value);
+        }}
+        {...rest}
+      >
+        {children}
+      </button>
+    );
+  },
+  Tooltip: ({ children }: { children: React.ReactNode }) => (
+    <span data-testid="tooltip">{children}</span>
+  ),
+}));
+
+vi.mock('react-aria-components', () => ({
+  Focusable: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  TooltipTrigger: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
+}));
+
+const palette: StyleDefinition[] = [
+  {
+    name: 'default',
+    label: 'Default',
+    style: { '--theme-color': '#fff' },
+  },
+  {
+    name: 'ocean',
+    label: 'Ocean',
+    style: { '--theme-color': '#00a0e6' },
+  },
+  {
+    name: 'sunset',
+    label: 'Sunset',
+    style: { '--theme-color': '#ff6b00' },
+  },
+];
+
+const renderColorSwatch = (
+  props: Partial<React.ComponentProps<typeof ColorSwatch>> = {},
+) => {
+  const { colors = palette, themes, onChange = vi.fn(), ...rest } = props;
+
+  const componentProps: React.ComponentProps<typeof ColorSwatch> = {
+    id: 'theme',
+    label: 'Theme',
+    title: 'Theme',
+    colors,
+    onChange,
+    ...rest,
+  } as React.ComponentProps<typeof ColorSwatch>;
+
+  if (themes !== undefined) {
+    componentProps.themes = themes;
+  }
+
+  return render(<ColorSwatch {...componentProps} />);
+};
+
+const getActiveClassName = (container: HTMLElement | Document) =>
+  container.querySelector('.color-swatch-option-handler.active')?.className ??
+  '';
+
+describe('ColorSwatch', () => {
+  it('renders nothing when no palettes are provided', () => {
+    const { container } = renderColorSwatch({ themes: [] });
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('highlights the provided value', () => {
+    const { container } = renderColorSwatch({ value: 'ocean' });
+    expect(getActiveClassName(container)).toContain('ocean');
+  });
+
+  it('highlights the default value when no current value exists', () => {
+    const { container } = renderColorSwatch({
+      value: undefined,
+      default: 'sunset',
+    });
+    expect(getActiveClassName(container)).toContain('sunset');
+  });
+
+  it('falls back to the "default" palette name when no value or default is provided', () => {
+    const { container } = renderColorSwatch({
+      value: undefined,
+      default: undefined,
+    });
+    expect(getActiveClassName(container)).toContain('default');
+  });
+
+  it('falls back to the first color when no "default" palette is present', () => {
+    const colorsWithoutDefault: StyleDefinition[] = [
+      {
+        name: 'primary',
+        label: 'Primary',
+        style: { '--theme-color': '#333' },
+      },
+      {
+        name: 'secondary',
+        label: 'Secondary',
+        style: { '--theme-color': '#666' },
+      },
+    ];
+
+    const { container } = renderColorSwatch({
+      colors: colorsWithoutDefault,
+      value: undefined,
+      default: undefined,
+    });
+
+    expect(getActiveClassName(container)).toContain('primary');
+  });
+
+  it('notifies when a different swatch is chosen', () => {
+    const handleChange = vi.fn();
+    const { container } = renderColorSwatch({ onChange: handleChange });
+    const buttons = container.querySelectorAll('.color-swatch-option-wrapper');
+
+    fireEvent.click(buttons[2]);
+
+    expect(handleChange).toHaveBeenCalledWith('theme', 'sunset');
+  });
+});

package/src/components/Widgets/ColorSwatch.tsx

@@ -1,58 +1,96 @@
 import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
-import { Button } from '@plone/components';
+import { Radio, RadioGroup, Tooltip } from '@plone/components';
 import cx from 'classnames';
+import { Focusable, TooltipTrigger } from 'react-aria-components';
+import type { StyleDefinition } from '@plone/types';
 
-export type Color =
-  | {
-      name: string;
-      label: string;
-      style: Record<`--${string}`, string>;
-    }
-  | {
-      name: string;
-      label: string;
-      style: undefined;
-    };
-
-export type ColorSwatchProps = {
+type BaseColorSwatchProps = {
   id: string;
   title: string;
+  label: string;
   value?: string;
-  default?: string | object;
+  default?: string;
   required?: boolean;
-  missing_value?: unknown;
   className?: string;
   onChange: (id: string, value: any) => void;
-  colors: Color[];
-  themes: Color[];
+  disabled?: boolean;
+  isDisabled?: boolean;
 };
 
+type ColorsOnly = { colors: StyleDefinition[]; themes?: undefined };
+type ThemesOnly = { themes: StyleDefinition[]; colors?: undefined };
+
+export type ColorSwatchProps = BaseColorSwatchProps & (ColorsOnly | ThemesOnly);
+
 const ColorSwatch = (props: ColorSwatchProps) => {
-  const { id, value, onChange } = props;
+  const {
+    id,
+    label,
+    title,
+    value,
+    onChange,
+    disabled,
+    isDisabled,
+    default: defaultValue,
+  } = props;
   const colors = props.themes || props.colors || [];
 
+  const selectedColorName = colors.find(({ name }) => name === value)?.name;
+  const defaultSelectedColorName =
+    !selectedColorName && typeof defaultValue === 'string'
+      ? colors.find(({ name }) => name === defaultValue)?.name
+      : undefined;
+
+  const fallbackColorName =
+    !selectedColorName && !defaultSelectedColorName
+      ? colors.find(({ name }) => name === 'default')?.name || colors[0]?.name
+      : undefined;
+
+  const radioGroupValueProps: {
+    value?: string;
+    defaultValue?: string;
+  } = selectedColorName
+    ? { value: selectedColorName }
+    : defaultSelectedColorName
+      ? { defaultValue: defaultSelectedColorName }
+      : fallbackColorName
+        ? { defaultValue: fallbackColorName }
+        : {};
+
+  const currentColorName =
+    selectedColorName ?? defaultSelectedColorName ?? fallbackColorName;
+
   return colors.length > 0 ? (
     <FormFieldWrapper {...props} className="color-swatch-widget">
-      <div className="buttons">
-        {colors.map((color) => {
-          const colorName = color.name;
-          return (
-            <Button
-              key={id + colorName}
-              className={cx(colorName, { active: value === colorName })}
-              onPress={(e) => {
-                onChange(
-                  id,
-                  colorName === value ? props.missing_value : colorName,
-                );
-              }}
-              value={value}
-              style={color.style}
-              aria-label={color.label}
-            />
-          );
-        })}
-      </div>
+      <RadioGroup
+        aria-label={title || label || id}
+        orientation="horizontal"
+        {...radioGroupValueProps}
+        onChange={(value) => onChange(id, value)}
+        isDisabled={disabled || isDisabled}
+      >
+        {colors.map((color) => (
+          <Radio
+            aria-label={color.label}
+            value={color.name}
+            className="color-swatch-option-wrapper"
+            key={color.name}
+          >
+            <TooltipTrigger delay={120} closeDelay={80} trigger="hover">
+              <Focusable>
+                <div
+                  role="img"
+                  className={cx('color-swatch-option-handler', color.name, {
+                    active: currentColorName === color.name,
+                  })}
+                  style={color.style}
+                ></div>
+              </Focusable>
+              <Tooltip>{color.label}</Tooltip>
+            </TooltipTrigger>
+          </Radio>
+        ))}
+      </RadioGroup>
     </FormFieldWrapper>
   ) : null;
 };

package/src/components/Widgets/ObjectList.tsx

@@ -16,10 +16,11 @@ import deleteSVG from '@plone/volto/icons/delete.svg';
 import addSVG from '@plone/volto/icons/add.svg';
 import dragSVG from '@plone/volto/icons/drag.svg';
 import { v4 as uuid } from 'uuid';
-import type { BlockConfigBase, Content, JSONSchema } from '@plone/types';
+import type { Content, JSONSchema } from '@plone/types';
 import type { IntlShape } from 'react-intl';
 import config from '@plone/volto/registry';
 import isEmpty from 'lodash/isEmpty';
+import { type DragEndEvent } from '@dnd-kit/core';
 
 const messages = defineMessages({
   labelRemoveItem: {
@@ -114,11 +115,22 @@ export type ObjectListWidgetProps = {
    */
   schemaEnhancer?: (args: {
     schema: JSONSchema & { addMessage: string };
-    formData: BlockConfigBase;
+    formData: object;
     intl: IntlShape;
-    navRoot: Content;
-    contentType: string;
+    navRoot?: Content;
+    contentType?: string;
   }) => JSONSchema;
+  /**
+   * Another optional function to enhance the schema.
+   * (Deprecated API with fewer supported arguments.
+   * This is here for backwards-compatibility
+   * with the ObjectListWidget in Volto.)
+   */
+  schemaExtender?: (
+    schema: JSONSchema,
+    formData: object,
+    intl: IntlShape,
+  ) => JSONSchema;
 };
 
 const EMPTY_SCHEMA = {
@@ -141,14 +153,16 @@ const ObjectListWidget = (props: ObjectListWidgetProps) => {
     value = [],
     onChange,
     schemaEnhancer,
+    schemaExtender,
     schemaName,
   } = props;
 
   const schema =
-    config.getUtility({
-      type: 'schema',
-      name: schemaName,
-    }).method ||
+    (schemaName &&
+      config.getUtility({
+        type: 'schema',
+        name: schemaName,
+      }).method) ||
     props.schema ||
     EMPTY_SCHEMA;
 
@@ -170,7 +184,7 @@ const ObjectListWidget = (props: ObjectListWidgetProps) => {
 
   const intl = useIntl();
 
-  function handleChangeActiveObject(index) {
+  function handleChangeActiveObject(index: number) {
     const newIndex = activeObject === index ? -1 : index;
 
     setActiveObject(newIndex);
@@ -178,13 +192,22 @@ const ObjectListWidget = (props: ObjectListWidgetProps) => {
 
   const objectSchema =
     typeof schema === 'function' ? schema({ ...props, activeObject }) : schema;
+  const getEnhancedSchema = (data: object) => {
+    const enhancedSchema = schemaEnhancer
+      ? schemaEnhancer({ schema: objectSchema, formData: data, intl })
+      : objectSchema;
+    const extendedSchema = schemaExtender
+      ? schemaExtender(objectSchema, data, intl)
+      : enhancedSchema;
+    return extendedSchema;
+  };
 
-  function handleDragEnd(event) {
+  function handleDragEnd(event: DragEndEvent) {
     const { active, over } = event;
 
-    if (active.id !== over.id) {
+    if (active.id !== over?.id) {
       const source = value.findIndex((item) => item['@id'] === active.id);
-      const destination = value.findIndex((item) => item['@id'] === over.id);
+      const destination = value.findIndex((item) => item['@id'] === over?.id);
 
       const newValue = reorderArray(value, source, destination);
       onChange(id, newValue);
@@ -205,13 +228,9 @@ const ObjectListWidget = (props: ObjectListWidgetProps) => {
                 '@id': uuid(),
               };
 
-              const objSchema = schemaEnhancer
-                ? // @ts-ignore - TODO Make sure this continues to have sense
-                  schemaEnhancer({ schema: objectSchema, formData: data, intl })
-                : objectSchema;
               const dataWithDefaults = applySchemaDefaults({
                 data,
-                schema: objSchema,
+                schema: getEnhancedSchema(data),
                 intl,
               });
 
@@ -318,16 +337,7 @@ const ObjectListWidget = (props: ObjectListWidgetProps) => {
                       id={`${uid}`}
                       key={`olw-${uid}`}
                       block={block}
-                      schema={
-                        schemaEnhancer
-                          ? // @ts-ignore - TODO Make sure this continues to have sense
-                            schemaEnhancer({
-                              schema: objectSchema,
-                              formData: item,
-                              intl,
-                            })
-                          : objectSchema
-                      }
+                      schema={getEnhancedSchema(item)}
                       value={item}
                       onChange={(fieldId: string, fieldValue: any) => {
                         const newvalue = value.map((v, i) =>

package/src/components/Widgets/SoftTextWidget.tsx

@@ -0,0 +1,129 @@
+import { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Input, Label } from 'semantic-ui-react';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+
+const SoftTextWidget = (props) => {
+  const {
+    id,
+    value,
+    onChange,
+    onBlur,
+    onClick,
+    icon,
+    iconAction,
+    minLength,
+    maxLength,
+    softMaxLength,
+    placeholder,
+    isDisabled,
+    focus,
+  } = props;
+  const ref = useRef();
+  const [softLengthWarning, setSoftLengthWarning] = useState('');
+  useEffect(() => {
+    if (focus) {
+      ref.current.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  // START CUSTOMIZATION
+  const handleChange = (id, newValue) => {
+    if (softMaxLength && newValue?.length) {
+      const remaining = softMaxLength - newValue.length;
+      if (remaining < 0) {
+        setSoftLengthWarning(
+          `You have exceeded the recommended limit by ${Math.abs(remaining)}`,
+        );
+      } else {
+        setSoftLengthWarning('');
+      }
+    }
+    onChange(id, newValue);
+  };
+  // END CUSTOMIZATION
+  return (
+    <FormFieldWrapper {...props} className="text">
+      <Input
+        id={`field-${id}`}
+        name={id}
+        value={value || ''}
+        disabled={isDisabled}
+        icon={icon || null}
+        placeholder={placeholder}
+        // START CUSTOMIZATION
+        onChange={({ target }) =>
+          handleChange(id, target.value === '' ? undefined : target.value)
+        }
+        // END CUSTOMIZATION
+        ref={ref}
+        onBlur={({ target }) =>
+          onBlur(id, target.value === '' ? undefined : target.value)
+        }
+        onClick={() => onClick()}
+        minLength={minLength || null}
+        maxLength={maxLength || null}
+      />
+      {/* START CUSTOMIZATION */}
+      {softLengthWarning.length > 0 && (
+        <Label key={softLengthWarning} basic color="yellow" pointing>
+          {softLengthWarning}
+        </Label>
+      )}
+      {/* END CUSTOMIZATION */}
+      {icon && iconAction && (
+        <button className={`field-${id}-action-button`} onClick={iconAction}>
+          <Icon name={icon} size="18px" />
+        </button>
+      )}
+    </FormFieldWrapper>
+  );
+};
+export default SoftTextWidget;
+SoftTextWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  value: PropTypes.string,
+  focus: PropTypes.bool,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onClick: PropTypes.func,
+  onEdit: PropTypes.func,
+  onDelete: PropTypes.func,
+  icon: PropTypes.shape({
+    xmlns: PropTypes.string,
+    viewBox: PropTypes.string,
+    content: PropTypes.string,
+  }),
+  iconAction: PropTypes.func,
+  minLength: PropTypes.number,
+  maxLength: PropTypes.number,
+  // START CUSTOMIZATION
+  softMaxLength: PropTypes.number,
+  // END CUSTOMIZATION
+  wrapped: PropTypes.bool,
+  placeholder: PropTypes.string,
+};
+SoftTextWidget.defaultProps = {
+  description: null,
+  required: false,
+  error: [],
+  value: null,
+  onChange: () => {},
+  onBlur: () => {},
+  onClick: () => {},
+  onEdit: null,
+  onDelete: null,
+  focus: false,
+  icon: null,
+  iconAction: null,
+  minLength: null,
+  maxLength: null,
+  // START CUSTOMIZATION
+  softMaxLength: null,
+  // END CUSTOMIZATION
+};

package/src/components/Widgets/SoftTextareaWidget.tsx

@@ -0,0 +1,118 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Label, TextArea } from 'semantic-ui-react';
+import { injectIntl } from 'react-intl';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+/**
+ * TextareaWidget, a widget for multiple lines text
+ *
+ * To use it, in schema properties, declare a field like:
+ *
+ * ```jsx
+ * {
+ *  title: "Text",
+ *  widget: 'textarea',
+ * }
+ * ```
+ */
+const SoftTextareaWidget = (props) => {
+  const {
+    id,
+    maxLength,
+    value,
+    onChange,
+    placeholder,
+    isDisabled,
+    softMaxLength,
+  } = props;
+  const [lengthError, setlengthError] = useState('');
+  const [softLengthWarning, setSoftLengthWarning] = useState('');
+  const onhandleChange = (id, value) => {
+    if (maxLength && value?.length) {
+      let remlength = maxLength - value.length;
+      if (remlength < 0) {
+        setlengthError(
+          `You have exceeded word limit by ${Math.abs(remlength)}`,
+        );
+      } else {
+        setlengthError('');
+      }
+    }
+    //START CUSTOMIZATION
+    if (softMaxLength && value?.length) {
+      let remaining = softMaxLength - value.length;
+      if (remaining < 0) {
+        setSoftLengthWarning(
+          `You have exceeded the recommended limit by ${Math.abs(remaining)}`,
+        );
+      } else {
+        setSoftLengthWarning('');
+      }
+    }
+    //END CUSTOMIZATION
+    onChange(id, value);
+  };
+  return (
+    <FormFieldWrapper {...props} className="textarea">
+      <TextArea
+        id={`field-${id}`}
+        name={id}
+        value={value || ''}
+        disabled={isDisabled}
+        placeholder={placeholder}
+        onChange={({ target }) =>
+          onhandleChange(id, target.value === '' ? undefined : target.value)
+        }
+      />
+      {/* START CUSTOMIZATION */}
+      {softLengthWarning.length > 0 && (
+        <Label key={softLengthWarning} basic color="yellow" pointing>
+          {softLengthWarning}
+        </Label>
+      )}
+      {/* END CUSTOMIZATION */}
+      {lengthError.length > 0 && (
+        <Label key={lengthError} basic color="red" pointing>
+          {lengthError}
+        </Label>
+      )}
+    </FormFieldWrapper>
+  );
+};
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+SoftTextareaWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  maxLength: PropTypes.number,
+  softMaxLength: PropTypes.number,
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  onEdit: PropTypes.func,
+  onDelete: PropTypes.func,
+  wrapped: PropTypes.bool,
+  placeholder: PropTypes.string,
+};
+/**
+ * Default properties.
+ * @property {Object} defaultProps Default properties.
+ * @static
+ */
+SoftTextareaWidget.defaultProps = {
+  description: null,
+  maxLength: null,
+  softMaxLength: null,
+  required: false,
+  error: [],
+  value: null,
+  onChange: null,
+  onEdit: null,
+  onDelete: null,
+};
+export default injectIntl(SoftTextareaWidget);