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

package/src/components/Widgets/ObjectList.tsx

@@ -0,0 +1,342 @@
+import { useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+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 { reorderArray } from '@plone/volto/helpers/Utils/Utils';
+import AnimateHeight from 'react-animate-height';
+import ObjectWidget from '@plone/volto/components/manage/Widgets/ObjectWidget';
+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, Content, JSONSchema } from '@plone/types';
+import type { IntlShape } from 'react-intl';
+import config from '@plone/volto/registry';
+import isEmpty from 'lodash/isEmpty';
+
+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 ObjectListWidgetSchema =
+  | (JSONSchema & { addMessage: string })
+  | ((props: ObjectListWidgetProps) => JSONSchema & { addMessage: string });
+
+export type ObjectListWidgetProps = {
+  /**
+   * 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?: Array<Record<string, any>>;
+  /**
+   * 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 ObjectListWidget.
+   */
+  schema?: ObjectListWidgetSchema;
+  /**
+   * The name of the schema.
+   */
+  schemaName?: string | undefined;
+  /**
+   * 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;
+};
+
+const EMPTY_SCHEMA = {
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: [],
+    },
+  ],
+  properties: {},
+  required: [],
+};
+
+const ObjectListWidget = (props: ObjectListWidgetProps) => {
+  const {
+    block,
+    fieldSet,
+    id,
+    value = [],
+    onChange,
+    schemaEnhancer,
+    schemaName,
+  } = props;
+
+  const schema =
+    config.getUtility({
+      type: 'schema',
+      name: schemaName,
+    }).method ||
+    props.schema ||
+    EMPTY_SCHEMA;
+
+  const [localActiveObject, setLocalActiveObject] = useState(
+    props.activeObject ?? value?.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.findIndex((item) => item['@id'] === active.id);
+      const destination = value.findIndex((item) => item['@id'] === over.id);
+
+      const newValue = reorderArray(value, source, destination);
+      onChange(id, newValue);
+    }
+  }
+
+  return (
+    <div className="object-list-widget">
+      <FormFieldWrapper {...props} noForInFieldLabel className="objectlist">
+        <div className="add-item-button-wrapper">
+          <Button
+            aria-label={
+              objectSchema.addMessage ||
+              `${intl.formatMessage(messages.add)} ${objectSchema.title}`
+            }
+            onPress={() => {
+              const data = {
+                '@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,
+                intl,
+              });
+
+              onChange(id, [...(value || []), dataWithDefaults]);
+              setActiveObject(value?.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?.length === 0 && (
+          <input
+            aria-labelledby={`fieldset-${
+              fieldSet || 'default'
+            }-field-label-${id}`}
+            type="hidden"
+            value={intl.formatMessage(messages.emptyObjectList)}
+          />
+        )}
+      </FormFieldWrapper>
+      {!isEmpty(value) && (
+        <DndSortableList
+          items={value || []}
+          handleDragEnd={handleDragEnd}
+          activeObject={activeObject}
+          setActiveObject={setActiveObject}
+        >
+          {({ item, uid, index, attributes, listeners }) => {
+            return (
+              <div
+                className={cx('olw-item-wrapper', {
+                  active: activeObject === index,
+                })}
+                key={uid}
+              >
+                <div
+                  className="olw-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="olw-item-title">
+                    {item.title ||
+                      `${objectSchema.title} #${index !== undefined ? index + 1 : ''}`}
+                  </div>
+                  <div className="olw-tools">
+                    <div
+                      role="presentation"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                      }}
+                    >
+                      <Button
+                        aria-label={`${intl.formatMessage(
+                          messages.labelRemoveItem,
+                        )} #${index + 1}`}
+                        onPress={() => {
+                          onChange(
+                            id,
+                            value.filter((v, i) => i !== index),
+                          );
+                        }}
+                      >
+                        <Icon name={deleteSVG} size="20px" color="#e40166" />
+                      </Button>
+                    </div>
+                    {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('olw-item-content', {
+                      active: activeObject === index,
+                    })}
+                  >
+                    <ObjectWidget
+                      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
+                      }
+                      value={item}
+                      onChange={(fieldId: string, fieldValue: any) => {
+                        const newvalue = value.map((v, i) =>
+                          i !== index ? v : fieldValue,
+                        );
+                        onChange(id, newvalue);
+                      }}
+                    />
+                  </div>
+                </AnimateHeight>
+              </div>
+            );
+          }}
+        </DndSortableList>
+      )}
+    </div>
+  );
+};
+export default ObjectListWidget;

package/src/components/Widgets/{ThemingColorPicker.tsx → RACThemingColorPicker.tsx}

@@ -1,3 +1,7 @@
+// Description: A color picker widget using react-aria-components
+// color picker component. Put in the fridge for now because
+// it had performance problems with Volto sidebar.
+// For now, using `ColorPicker` widget instead.
 import { ColorField, ColorPicker } from '@plone/components';
 import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 

package/src/components/Widgets/Size.tsx

@@ -0,0 +1,75 @@
+import { defineMessages, useIntl } from 'react-intl';
+import ButtonsWidget, {
+  type ActionInfo,
+  type ButtonsWidgetProps,
+} from './Buttons';
+import type { IntlShape } from 'react-intl';
+
+const messages = defineMessages({
+  s: {
+    id: 'Small',
+    defaultMessage: 'Small',
+  },
+  m: {
+    id: 'Medium',
+    defaultMessage: 'Medium',
+  },
+  l: {
+    id: 'Large',
+    defaultMessage: 'Large',
+  },
+});
+
+export const defaultActionsInfo = ({
+  intl,
+}: {
+  intl: IntlShape;
+}): Record<string, ActionInfo> => ({
+  s: ['S', intl.formatMessage(messages.s)],
+  m: ['M', intl.formatMessage(messages.m)],
+  l: ['L', intl.formatMessage(messages.l)],
+});
+
+const DEFAULT_ACTIONS = [
+  {
+    name: 's',
+    label: 'Small',
+  },
+  {
+    name: 'm',
+    label: 'Medium',
+  },
+  {
+    name: 'l',
+    label: 'Large',
+  },
+];
+
+const SizeWidget = (props: ButtonsWidgetProps) => {
+  const intl = useIntl();
+
+  const { actions = DEFAULT_ACTIONS, actionsInfoMap, filterActions } = props;
+  let filteredActions;
+  if (filterActions) {
+    filteredActions = actions.filter((action) =>
+      filterActions.includes(action.name),
+    );
+  } else {
+    filteredActions = actions;
+  }
+
+  const actionsInfo = {
+    ...defaultActionsInfo({ intl }),
+    ...actionsInfoMap,
+  };
+
+  return (
+    <ButtonsWidget
+      {...props}
+      actions={filteredActions}
+      actionsInfoMap={actionsInfo}
+    />
+  );
+};
+
+export default SizeWidget;

package/src/components/Widgets/ThemeColorSwatch.tsx

@@ -0,0 +1,17 @@
+import ColorSwatchWidget from './ColorSwatch';
+import config from '@plone/volto/registry';
+import type { ColorSwatchProps } from './ColorSwatch';
+
+const ThemeColorSwatch = (props: ColorSwatchProps) => {
+  const colors: ColorSwatchProps['colors'] = config.blocks.themes;
+
+  const defaultValue = colors.find(
+    (color) => color.name === config.settings.defaultBackgroundColor,
+  )?.style;
+
+  return (
+    <ColorSwatchWidget {...props} default={defaultValue} colors={colors} />
+  );
+};
+
+export default ThemeColorSwatch;

package/src/components/Widgets/schema/footerLinksSchema.ts

@@ -0,0 +1,64 @@
+import type { BlockEditProps } from '@plone/types';
+import { defineMessages } from 'react-intl';
+import type { IntlShape } from 'react-intl';
+
+const messages = defineMessages({
+  title: {
+    id: 'Title',
+    defaultMessage: 'Title',
+  },
+  item: {
+    id: 'Link',
+    defaultMessage: 'Link',
+  },
+  addLink: {
+    id: 'Add link',
+    defaultMessage: 'Add link',
+  },
+  Target: {
+    id: 'Target',
+    defaultMessage: 'Target',
+  },
+  openLinkInNewTab: {
+    id: 'Open in a new tab',
+    defaultMessage: 'Open in a new tab',
+  },
+});
+
+export function footerLinksSchema({
+  props,
+  intl,
+}: {
+  props: BlockEditProps;
+  intl: IntlShape;
+}) {
+  return {
+    title: intl.formatMessage(messages.item),
+    addMessage: intl.formatMessage(messages.addLink),
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['title', 'href', 'openLinkInNewTab'],
+      },
+    ],
+
+    properties: {
+      title: {
+        title: intl.formatMessage(messages.title),
+      },
+      href: {
+        title: intl.formatMessage(messages.Target),
+        widget: 'object_browser',
+        mode: 'link',
+        selectedItemAttrs: ['Title', 'Description', '@type'],
+        allowExternals: true,
+      },
+      openLinkInNewTab: {
+        title: intl.formatMessage(messages.openLinkInNewTab),
+        type: 'boolean',
+      },
+    },
+    required: [],
+  };
+}

package/src/components/Widgets/schema/footerLogosSchema.ts

@@ -0,0 +1,98 @@
+import type { BlockEditProps } from '@plone/types';
+import { defineMessages } from 'react-intl';
+import type { IntlShape } from 'react-intl';
+
+const messages = defineMessages({
+  Target: {
+    id: 'Target',
+    defaultMessage: 'Target',
+  },
+  title: {
+    id: 'Title',
+    defaultMessage: 'Title',
+  },
+  AltText: {
+    id: 'Alt text',
+    defaultMessage: 'Alt text',
+  },
+  description: {
+    id: 'Description',
+    defaultMessage: 'Description',
+  },
+  logo: {
+    id: 'Logo image',
+    defaultMessage: 'Logo image',
+  },
+  item: {
+    id: 'Logo',
+    defaultMessage: 'Logo',
+  },
+  addLogo: {
+    id: 'Add logo',
+    defaultMessage: 'Add logo',
+  },
+  headline: {
+    id: 'Headline',
+    defaultMessage: 'Headline',
+  },
+  hideDescription: {
+    id: 'Hide description',
+    defaultMessage: 'Hide description',
+  },
+  settings: {
+    id: 'Settings',
+    defaultMessage: 'Settings',
+  },
+  openLinkInNewTab: {
+    id: 'Open in a new tab',
+    defaultMessage: 'Open in a new tab',
+  },
+});
+
+export function footerLogosSchema({
+  props,
+  intl,
+}: {
+  props: BlockEditProps;
+  intl: IntlShape;
+}) {
+  return {
+    title: intl.formatMessage(messages.item),
+    addMessage: intl.formatMessage(messages.addLogo),
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['logo', 'alt', 'href', 'openLinkInNewTab'],
+      },
+    ],
+
+    properties: {
+      title: {
+        title: intl.formatMessage(messages.title),
+      },
+      logo: {
+        title: intl.formatMessage(messages.logo),
+        widget: 'object_browser',
+        selectedItemAttrs: ['Title', 'Description', 'image_field', '@type'],
+        mode: 'image',
+        allowExternals: true,
+      },
+      alt: {
+        title: intl.formatMessage(messages.AltText),
+      },
+      href: {
+        title: intl.formatMessage(messages.Target),
+        widget: 'object_browser',
+        mode: 'link',
+        selectedItemAttrs: ['Title', 'Description'],
+        allowExternals: true,
+      },
+      openLinkInNewTab: {
+        title: intl.formatMessage(messages.openLinkInNewTab),
+        type: 'boolean',
+      },
+    },
+    required: [],
+  };
+}

package/src/components/Widgets/schema/headerActionsSchema.ts

@@ -0,0 +1,64 @@
+import type { BlockEditProps } from '@plone/types';
+import { defineMessages } from 'react-intl';
+import type { IntlShape } from 'react-intl';
+
+const messages = defineMessages({
+  title: {
+    id: 'Title',
+    defaultMessage: 'Title',
+  },
+  item: {
+    id: 'Action',
+    defaultMessage: 'Action',
+  },
+  addAction: {
+    id: 'Add action',
+    defaultMessage: 'Add action',
+  },
+  Target: {
+    id: 'Target',
+    defaultMessage: 'Target',
+  },
+  openLinkInNewTab: {
+    id: 'Open in a new tab',
+    defaultMessage: 'Open in a new tab',
+  },
+});
+
+export function headerActionsSchema({
+  props,
+  intl,
+}: {
+  props: BlockEditProps;
+  intl: IntlShape;
+}) {
+  return {
+    title: intl.formatMessage(messages.item),
+    addMessage: intl.formatMessage(messages.addAction),
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['title', 'href', 'openLinkInNewTab'],
+      },
+    ],
+
+    properties: {
+      title: {
+        title: intl.formatMessage(messages.title),
+      },
+      href: {
+        title: intl.formatMessage(messages.Target),
+        widget: 'object_browser',
+        mode: 'link',
+        selectedItemAttrs: ['Title', 'Description', '@type'],
+        allowExternals: true,
+      },
+      openLinkInNewTab: {
+        title: intl.formatMessage(messages.openLinkInNewTab),
+        type: 'boolean',
+      },
+    },
+    required: [],
+  };
+}