@kitconcept/volto-light-theme 6.0.0-alpha.8 → 6.0.0

package/src/components/Widgets/BlocksObject.tsx

@@ -0,0 +1,353 @@
+import { useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import omit from 'lodash/omit';
+import { Button } from '@plone/components';
+import { Text } from 'react-aria-components';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import { applySchemaDefaults } from '@plone/volto/helpers/Blocks/Blocks';
+import AnimateHeight from 'react-animate-height';
+import ObjectWidget from '@plone/volto/components/manage/Widgets/ObjectWidget';
+import {
+  getBlocksFieldname,
+  getBlocksLayoutFieldname,
+  moveBlock,
+} from '@plone/volto/helpers/Blocks/Blocks';
+import DndSortableList from '../../helpers/DndSortableList';
+import cx from 'classnames';
+import upSVG from '@plone/volto/icons/up-key.svg';
+import downSVG from '@plone/volto/icons/down-key.svg';
+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,
+  BlocksData,
+  Content,
+  JSONSchema,
+} from '@plone/types';
+import type { IntlShape } from 'react-intl';
+import config from '@plone/volto/registry';
+
+const messages = defineMessages({
+  labelRemoveItem: {
+    id: 'Remove item',
+    defaultMessage: 'Remove item',
+  },
+  labelCollapseItem: {
+    id: 'Collapse item',
+    defaultMessage: 'Collapse item',
+  },
+  labelShowItem: {
+    id: 'Show item',
+    defaultMessage: 'Show item',
+  },
+  emptyObjectList: {
+    id: 'Empty object list',
+    defaultMessage: 'Empty object list',
+  },
+  add: {
+    id: 'Add (object list)',
+    defaultMessage: 'Add',
+  },
+});
+
+export type BlocksObjectWidgetSchema =
+  | (JSONSchema & { addMessage: string })
+  | ((props: BlocksObjectWidgetProps) => JSONSchema & { addMessage: string });
+
+export type BlocksObjectWidgetProps = {
+  /**
+   * The ID of the widget.
+   */
+  id: string;
+  /**
+   * The ID of the block this widget belongs to.
+   */
+  block: string;
+  /**
+   * The fieldset this widget belongs to.
+   */
+  fieldSet: string;
+  /**
+   * The title of the widget.
+   */
+  title: string;
+  /**
+   * The current value of the widget, which is BlocksData.
+   */
+  value?: BlocksData;
+  /**
+   * The default value for the widget. Can be a string or an object.
+   */
+  default?: string | object;
+  /**
+   * Whether the widget is required.
+   */
+  required?: boolean;
+  /**
+   * The value to use when the widget is missing a value.
+   */
+  missing_value?: unknown;
+  /**
+   * The CSS class name for the widget.
+   */
+  className?: string;
+  /**
+   * A callback function that is called when the value of the widget changes.
+   * @param id The ID of the widget.
+   * @param value The new value of the widget.
+   */
+  onChange: (id: string, value: any) => void;
+  /**
+   * The index of the currently active object.
+   */
+  activeObject: number;
+  /**
+   * A callback function that is called to set the active object.
+   * @param index The index of the object to set as active.
+   */
+  setActiveObject: (index: number) => void;
+  /**
+   * The schema for the BlocksObjectWidget.
+   */
+  schema: BlocksObjectWidgetSchema;
+  /**
+   * The name of the schema.
+   */
+  schemaName: string;
+  /**
+   * An optional function to enhance the schema.
+   * @param args An object containing the schema, form data, intl, navRoot, and contentType.
+   */
+  schemaEnhancer?: (args: {
+    schema: JSONSchema & { addMessage: string };
+    formData: BlockConfigBase;
+    intl: IntlShape;
+    navRoot: Content;
+    contentType: string;
+  }) => JSONSchema;
+};
+
+function deleteBlock(formData, blockId: string) {
+  const blocksFieldname = getBlocksFieldname(formData);
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
+
+  let newFormData = {
+    ...formData,
+    [blocksLayoutFieldname]: {
+      items: formData[blocksLayoutFieldname].items.filter(
+        (value) => value !== blockId,
+      ),
+    },
+    [blocksFieldname]: omit(formData[blocksFieldname], [blockId]),
+  };
+
+  return newFormData;
+}
+
+const BlocksObjectWidget = (props: BlocksObjectWidgetProps) => {
+  const { block, fieldSet, id, value, onChange, schemaEnhancer, schemaName } =
+    props;
+
+  const schema = config.getUtility({
+    type: 'schema',
+    name: schemaName,
+  }).method;
+
+  const [localActiveObject, setLocalActiveObject] = useState(
+    props.activeObject ?? value?.blocks_layout?.items?.length - 1,
+  );
+
+  let activeObject: number, setActiveObject: (index: number) => void;
+  if (
+    (props.activeObject || props.activeObject === 0) &&
+    props.setActiveObject
+  ) {
+    activeObject = props.activeObject;
+    setActiveObject = props.setActiveObject;
+  } else {
+    activeObject = localActiveObject;
+    setActiveObject = setLocalActiveObject;
+  }
+
+  const intl = useIntl();
+
+  function handleChangeActiveObject(index) {
+    const newIndex = activeObject === index ? -1 : index;
+
+    setActiveObject(newIndex);
+  }
+
+  const objectSchema = typeof schema === 'function' ? schema(props) : schema;
+
+  function handleDragEnd(event) {
+    const { active, over } = event;
+
+    if (active.id !== over.id) {
+      const source = value.blocks_layout.items.indexOf(active.id);
+      const destination = value.blocks_layout.items.indexOf(over.id);
+
+      const newFormData = moveBlock(value, source, destination);
+      onChange(id, newFormData);
+    }
+  }
+
+  return (
+    <div className="blocks-object-widget">
+      <FormFieldWrapper {...props} noForInFieldLabel className="objectlist">
+        <div className="add-item-button-wrapper">
+          <Button
+            aria-label={
+              objectSchema.addMessage ||
+              `${intl.formatMessage(messages.add)} ${objectSchema.title}`
+            }
+            onPress={(e) => {
+              const newId = uuid();
+              const data = {};
+
+              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,
+                intl,
+              });
+
+              onChange(id, {
+                ...(value || {}),
+                blocks: {
+                  ...value?.blocks,
+                  [newId]: dataWithDefaults,
+                },
+                blocks_layout: {
+                  ...value?.blocks_layout,
+                  items: [...(value?.blocks_layout?.items || []), newId],
+                },
+              });
+
+              setActiveObject(value?.blocks_layout?.items?.length || 0);
+            }}
+          >
+            <Icon name={addSVG} size="18px" />
+            {/* Custom addMessage in schema, else default to English */}
+            <Text>
+              {objectSchema.addMessage ||
+                `${intl.formatMessage(messages.add)} ${objectSchema.title}`}
+            </Text>
+          </Button>
+        </div>
+        {value?.blocks_layout?.items?.length === 0 && (
+          <input
+            aria-labelledby={`fieldset-${
+              fieldSet || 'default'
+            }-field-label-${id}`}
+            type="hidden"
+            value={intl.formatMessage(messages.emptyObjectList)}
+          />
+        )}
+      </FormFieldWrapper>
+      <DndSortableList
+        // TODO: adapt it to the new DndSortableList shape
+        sortedItems={value?.blocks_layout?.items || []}
+        items={value?.blocks}
+        handleDragEnd={handleDragEnd}
+        activeObject={activeObject}
+        setActiveObject={setActiveObject}
+      >
+        {({ item, uid, index, attributes, listeners }) => {
+          return (
+            <div
+              className={cx('bow-item-wrapper', {
+                active: activeObject === index,
+              })}
+              key={uid}
+            >
+              <div
+                className="bow-item-title-bar"
+                onClick={() => handleChangeActiveObject(index)}
+                role="presentation"
+                aria-label={`${
+                  activeObject === index
+                    ? intl.formatMessage(messages.labelCollapseItem)
+                    : intl.formatMessage(messages.labelShowItem)
+                } #${index ? index + 1 : ''}`}
+              >
+                <div className="drag handle" {...listeners} {...attributes}>
+                  <Icon name={dragSVG} size="18px" />
+                </div>
+
+                <div className="bow-item-title">
+                  {item.title ||
+                    `${objectSchema.title} #${index !== undefined ? index + 1 : ''}`}
+                </div>
+                <div className="bow-tools">
+                  <button
+                    aria-label={`${intl.formatMessage(
+                      messages.labelRemoveItem,
+                    )} #${index + 1}`}
+                    onClick={() => {
+                      onChange(id, deleteBlock(value, uid));
+                    }}
+                  >
+                    <Icon name={deleteSVG} size="20px" color="#e40166" />
+                  </button>
+                  {activeObject === index ? (
+                    <Icon name={upSVG} size="20px" />
+                  ) : (
+                    <Icon name={downSVG} size="20px" />
+                  )}
+                </div>
+              </div>
+              <AnimateHeight
+                animateOpacity
+                duration={300}
+                height={activeObject === index ? 'auto' : 0}
+              >
+                <div
+                  className={cx('bow-item-content', {
+                    active: activeObject === index,
+                  })}
+                >
+                  <ObjectWidget
+                    id={`${uid}`}
+                    key={`bow-${uid}`}
+                    block={block}
+                    schema={
+                      schemaEnhancer
+                        ? // @ts-ignore - TODO Make sure this continues to have sense
+                          schemaEnhancer({
+                            schema: objectSchema,
+                            formData: item,
+                            intl,
+                          })
+                        : objectSchema
+                    }
+                    value={item}
+                    onChange={(fieldId: string, fieldValue: any) => {
+                      const newvalue = {
+                        ...value.blocks[fieldId],
+                        ...fieldValue,
+                      };
+                      onChange(id, {
+                        ...value,
+                        blocks: {
+                          ...value.blocks,
+                          [fieldId]: newvalue,
+                        },
+                      });
+                    }}
+                  />
+                </div>
+              </AnimateHeight>
+            </div>
+          );
+        }}
+      </DndSortableList>
+    </div>
+  );
+};
+export default BlocksObjectWidget;

package/src/components/Widgets/Buttons.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import { Button } from '@plone/components';
+import isEqual from 'lodash/isEqual';
+import find from 'lodash/find';
+
+export type Actions =
+  | {
+      name: string;
+      label: string;
+      style: Record<`--${string}`, string>;
+    }
+  | {
+      name: string;
+      label: string;
+      style: undefined;
+    };
+
+/**
+ * A tuple that has an icon in the first element and a i18n string in the second.
+ */
+export type ActionInfo = [React.ReactElement<any>, string] | [string, string];
+
+export type ButtonsWidgetProps = {
+  /**
+   * Unique identifier for the widget.
+   */
+  id: string;
+
+  /**
+   * Callback function to handle changes.
+   */
+  onChange: Function;
+
+  /**
+   * List of actions available for the widget.
+   */
+  actions: Actions[];
+
+  /**
+   * Map containing additional the information (icon and i18n string) for each action.
+   */
+  actionsInfoMap: Record<string, ActionInfo>;
+
+  /**
+   * List of actions to be filtered out. In case that we don't want the default ones
+   * we can filter them out.
+   */
+  filterActions: string[];
+
+  /**
+   * Current value of the widget.
+   */
+  value: string;
+
+  /**
+   * Default value of the widget.
+   */
+  default: string;
+
+  /**
+   * Indicates if the widget is disabled.
+   */
+  disabled: boolean;
+
+  /**
+   * Indicates if the widget is disabled (alternative flag for compatibility reasons).
+   */
+  isDisabled: boolean;
+};
+
+const ButtonsWidget = (props: ButtonsWidgetProps) => {
+  const { disabled, id, onChange, actions, actionsInfoMap, value, isDisabled } =
+    props;
+
+  React.useEffect(() => {
+    if (!props.value && props.default) {
+      props.onChange(
+        props.id,
+        find(actions, { name: props.default })?.style || props.default,
+      );
+    }
+  });
+
+  return (
+    <FormFieldWrapper {...props} className="widget">
+      <div className="buttons buttons-widget">
+        {actions.map((action) => (
+          <Button
+            key={action.name}
+            aria-label={actionsInfoMap[action.name][1]}
+            onPress={() => onChange(id, action.style || action.name)}
+            className={
+              isEqual(value, action.style || action.name) ? 'active' : null
+            }
+            isDisabled={disabled || isDisabled}
+          >
+            {typeof actionsInfoMap[action.name][0] === 'string' ? (
+              <div className="image-sizes-text">
+                {actionsInfoMap[action.name][0]}
+              </div>
+            ) : (
+              <Icon
+                name={actionsInfoMap[action.name][0]}
+                title={actionsInfoMap[action.name][1] || action.name}
+                size="24px"
+              />
+            )}
+          </Button>
+        ))}
+      </div>
+    </FormFieldWrapper>
+  );
+};
+
+export default ButtonsWidget;

package/src/components/Widgets/ColorContrastChecker.tsx

@@ -0,0 +1,117 @@
+import { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
+import type { Content } from '@plone/types';
+import cx from 'classnames';
+import config from '@plone/volto/registry';
+
+type FormState = {
+  content: {
+    data: Content;
+  };
+  form: {
+    global: Content;
+  };
+};
+
+const ColorContrastChecker = (props: { id: string; value: string }) => {
+  const { id, value } = props;
+  const [ligtherColor, setLigtherColor] = useState('#ffffff');
+  const [darkerColor, setDarkerColor] = useState('#000000');
+  const [contrastRatio, setContrastRatio] = useState(21);
+
+  const formData = useSelector<FormState, Content>(
+    (state) => state.form.global,
+  );
+  const colorMap = config.settings.colorMap;
+  const colorPair = colorMap[id].colorPair;
+  const colorDefault = colorMap[id].default;
+
+  // Convert hex to RGB
+  const hexToRgb = (hex) => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+      ? {
+          r: parseInt(result[1], 16),
+          g: parseInt(result[2], 16),
+          b: parseInt(result[3], 16),
+        }
+      : null;
+  };
+
+  // Calculate relative luminance
+  const getLuminance = (r, g, b) => {
+    const [rs, gs, bs] = [r, g, b].map((c) => {
+      c = c / 255;
+      return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+  };
+
+  // Calculate contrast ratio
+  const getContrastRatio = (l1, l2) => {
+    const lighter = Math.max(l1, l2);
+    const darker = Math.min(l1, l2);
+    return (lighter + 0.05) / (darker + 0.05);
+  };
+
+  const ligtherColorObject = hexToRgb(ligtherColor);
+  const darkerColorObject = hexToRgb(darkerColor);
+
+  const lcLum = getLuminance(
+    ligtherColorObject?.r,
+    ligtherColorObject?.g,
+    ligtherColorObject?.b,
+  );
+  const dcLum = getLuminance(
+    darkerColorObject?.r,
+    darkerColorObject?.g,
+    darkerColorObject?.b,
+  );
+
+  const ratio = getContrastRatio(lcLum, dcLum);
+
+  useEffect(() => {
+    setDarkerColor(value ?? colorDefault);
+    setLigtherColor(formData[colorPair] ?? colorMap[colorPair].default);
+    setContrastRatio(ratio);
+  }, [ratio, value, formData, colorDefault, colorPair, colorMap]);
+
+  // Get WCAG compliance levels
+  const getComplianceLevel = (ratio) => {
+    if (ratio >= 3) return 'AA Large';
+    return 'Failed';
+  };
+
+  return (
+    <>
+      {formData[id] && contrastRatio < 4.5 && (
+        <span
+          className={cx('color-contrast-label')}
+          role="alert"
+          aria-live="polite"
+        >
+          <FormattedMessage
+            id="ColorContrastCheckerMessage"
+            defaultMessage={
+              'The color contrast ratio {contrastRatio}:1 might not be accessible for all. WCAG Level: {complianceLevel}'
+            }
+            values={{
+              contrastRatio: contrastRatio.toFixed(1),
+              complianceLevel: getComplianceLevel(contrastRatio),
+            }}
+          />
+          <a
+            target="_blank"
+            href="https://webaim.org/articles/contrast/"
+            rel="noreferrer"
+          >
+            &#x3F;
+          </a>
+        </span>
+      )}
+    </>
+  );
+};
+
+export default ColorContrastChecker;

package/src/components/Widgets/ColorPicker.tsx

@@ -0,0 +1,59 @@
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import { HexColorPicker, HexColorInput } from 'react-colorful';
+import { Button, Dialog, DialogTrigger, Popover } from 'react-aria-components';
+import { ColorSwatch, CloseIcon } from '@plone/components';
+import ColorContrastChecker from './ColorContrastChecker';
+import config from '@plone/volto/registry';
+
+const ColorPicker = (props: {
+  id: string;
+  title: string;
+  value: string;
+  onChange: (id: string, value: any) => void;
+}) => {
+  const { id, onChange, value } = props;
+
+  return (
+    <>
+      <FormFieldWrapper {...props} className="theme-color-picker">
+        <DialogTrigger>
+          <Button className="theme-color-picker-button">
+            <ColorSwatch color={value || '#fff'} />
+          </Button>
+
+          <Popover placement="bottom start">
+            <Dialog className="theme-color-picker-dialog">
+              <HexColorPicker
+                color={value || ''}
+                onChange={(value) => {
+                  // edge case for Batman value
+                  if (value !== '#NaNNaNNaN') {
+                    onChange(id, value);
+                  }
+                }}
+              />
+            </Dialog>
+          </Popover>
+        </DialogTrigger>
+        <HexColorInput
+          color={value || ''}
+          onChange={(value) => onChange(id, value)}
+          prefixed
+        />
+        <Button
+          className="theme-color-picker-reset react-aria-Button"
+          onPress={() => {
+            onChange(id, '');
+          }}
+        >
+          <CloseIcon size="S" />
+        </Button>
+      </FormFieldWrapper>
+      {config.settings.colorMap[props.id] && (
+        <ColorContrastChecker {...props} />
+      )}
+    </>
+  );
+};
+
+export default ColorPicker;

package/src/components/Widgets/{ColorPickerWidget.tsx → ColorSwatch.tsx}

@@ -2,7 +2,7 @@ import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWr
 import { Button } from '@plone/components';
 import cx from 'classnames';
 
-type Color =
+export type Color =
   | {
       name: string;
       label: string;
@@ -14,7 +14,7 @@ type Color =
       style: undefined;
     };
 
-export type ColorPickerWidgetProps = {
+export type ColorSwatchProps = {
   id: string;
   title: string;
   value?: string;
@@ -27,12 +27,12 @@ export type ColorPickerWidgetProps = {
   themes: Color[];
 };
 
-const ColorPickerWidget = (props: ColorPickerWidgetProps) => {
+const ColorSwatch = (props: ColorSwatchProps) => {
   const { id, value, onChange } = props;
   const colors = props.themes || props.colors || [];
 
   return colors.length > 0 ? (
-    <FormFieldWrapper {...props} className="theme-picker-widget">
+    <FormFieldWrapper {...props} className="color-swatch-widget">
       <div className="buttons">
         {colors.map((color) => {
           const colorName = color.name;
@@ -57,4 +57,4 @@ const ColorPickerWidget = (props: ColorPickerWidgetProps) => {
   ) : null;
 };
 
-export default ColorPickerWidget;
+export default ColorSwatch;