@kitconcept/volto-light-theme 8.0.0-alpha.2 → 8.0.0-alpha.21

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);

package/src/components/Widgets/ThemeColorSwatch.tsx

@@ -2,16 +2,12 @@ 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 ThemeColorSwatch = (
+  props: Omit<ColorSwatchProps, 'themes' | 'colors'>,
+) => {
+  const themes: ColorSwatchProps['themes'] = config.blocks.themes;
 
-  const defaultValue = colors.find(
-    (color) => color.name === config.settings.defaultBackgroundColor,
-  )?.style;
-
-  return (
-    <ColorSwatchWidget {...props} default={defaultValue} colors={colors} />
-  );
+  return <ColorSwatchWidget {...props} themes={themes} />;
 };
 
 export default ThemeColorSwatch;

package/src/config/blocks.tsx

@@ -4,8 +4,12 @@ import type { StyleDefinition } from '@plone/types';
 import cloneDeep from 'lodash/cloneDeep';
 
 import { composeSchema } from '@plone/volto/helpers/Extensions';
-import { findStyleByName } from '@plone/volto/helpers/Blocks/Blocks';
 import { defaultStylingSchema } from '../components/Blocks/schema';
+import {
+  blockThemesEnhancer,
+  styleDefinitionsEnhancer,
+} from '../helpers/styleDefinitions';
+
 import {
   gridTeaserDisableStylingSchema,
   teaserSchemaEnhancer,
@@ -40,7 +44,6 @@ import { tocBlockSchemaEnhancer } from '../components/Blocks/Toc/schema';
 import { mapsBlockSchemaEnhancer } from '../components/Blocks/Maps/schema';
 import { sliderBlockSchemaEnhancer } from '../components/Blocks/Slider/schema';
 import EventMetadataView from '../components/Blocks/EventMetadata/View';
-import isEmpty from 'lodash/isEmpty';
 
 import SearchBlockViewEvent from '../components/Blocks/EventCalendar/Search/SearchBlockView';
 import SearchBlockEditEvent from '../components/Blocks/EventCalendar/Search/SearchBlockEdit';
@@ -51,6 +54,7 @@ declare module '@plone/types' {
   export interface BlocksConfigData {
     introduction: BlockConfigBase;
     heading: BlockConfigBase;
+    banner: BlockConfigBase;
     __button: BlockConfigBase;
     separator: BlockConfigBase;
     slider: BlockConfigBase;
@@ -62,6 +66,7 @@ declare module '@plone/types' {
   }
   export interface BlockConfigBase {
     themes?: StyleDefinition[];
+    defaultTheme: string;
     allowedBlocks?: string[];
     allowed_headline_tags?: string[][];
     unwantedButtons?: string[];
@@ -142,38 +147,18 @@ export default function install(config: ConfigType) {
     },
   ];
 
-  function blockThemesEnhancer({ data, container }) {
-    if (!data['@type']) return {};
-    const blockConfig = config.blocks.blocksConfig[data['@type']];
-    if (!blockConfig) return {};
-    const blockStyleDefinitions =
-      // We look up for the blockThemes in the block's config, then in the global config
-      // We keep `colors` for BBB, but `themes` should be used
-      blockConfig.themes || blockConfig.colors || config.blocks.themes || [];
-
-    if (
-      !isEmpty(container) &&
-      container.theme &&
-      (!data.theme || data.theme === 'default')
-    ) {
-      return findStyleByName(blockStyleDefinitions, container.theme);
-    }
-    if (data.theme) {
-      return data.theme
-        ? findStyleByName(blockStyleDefinitions, data.theme)
-        : {};
-    } else {
-      // No theme, return default color
-      return findStyleByName(config.blocks.themes, 'default');
-    }
-  }
-
   config.registerUtility({
     name: 'blockThemesEnhancer',
     type: 'styleWrapperStyleObjectEnhancer',
     method: blockThemesEnhancer,
   });
 
+  config.registerUtility({
+    name: 'styleDefinitionsEnhancer',
+    type: 'styleWrapperStyleObjectEnhancer',
+    method: styleDefinitionsEnhancer,
+  });
+
   // No required blocks except eventMetadata
   config.blocks.requiredBlocks = [
     ...config.blocks.requiredBlocks,
@@ -314,6 +299,10 @@ export default function install(config: ConfigType) {
       ),
     );
 
+  config.blocks.blocksConfig.banner = {
+    ...config.blocks.blocksConfig.banner,
+    schemaEnhancer: defaultStylingSchema,
+  };
   config.blocks.blocksConfig.introduction = {
     ...config.blocks.blocksConfig.introduction,
     unwantedButtons: ['heading-three', 'blockquote'],
@@ -416,7 +405,10 @@ export default function install(config: ConfigType) {
   };
 
   // Slider Block
-  config.blocks.blocksConfig.slider.schemaEnhancer = sliderBlockSchemaEnhancer;
+  config.blocks.blocksConfig.slider = {
+    ...config.blocks.blocksConfig.slider,
+    schemaEnhancer: sliderBlockSchemaEnhancer,
+  };
 
   return config;
 }

package/src/config/slots.ts

@@ -5,6 +5,7 @@ import FollowUsLogoAndLinks from '../components/Footer/slots/FollowUsLogoAndLink
 import Colophon from '../components/Footer/slots/Colophon';
 import CoreFooter from '../components/Footer/slots/CoreFooter';
 import StickyMenu from '../components/StickyMenu/StickyMenu';
+import MobileStickyMenu from '../components/StickyMenu/MobileStickyMenu';
 import Anontools from '../components/Anontools/Anontools';
 import type { Content } from '@plone/types';
 
@@ -57,5 +58,11 @@ export default function install(config: ConfigType) {
     component: Colophon,
   });
 
+  config.registerSlotComponent({
+    name: 'MobileStickyMenu',
+    slot: 'preFooter',
+    component: MobileStickyMenu,
+  });
+
   return config;
 }

package/src/config/widgets.ts

@@ -1,8 +1,5 @@
 import type { ConfigType } from '@plone/registry';
-import BlockWidth from '../components/Widgets/BlockWidth';
-import BlockAlignment from '../components/Widgets/BlockAlignment';
 import ColorSwatch from '../components/Widgets/ColorSwatch';
-import Size from '../components/Widgets/Size';
 import ColorPicker from '../components/Widgets/ColorPicker';
 import ThemeColorSwatch from '../components/Widgets/ThemeColorSwatch';
 // import BlocksObject from '../components/Widgets/BlocksObject';
@@ -12,7 +9,8 @@ import { footerLogosSchema } from '../components/Widgets/schema/footerLogosSchem
 import { footerLinksSchema } from '../components/Widgets/schema/footerLinksSchema';
 import { iconLinkListSchema } from '../components/Widgets/schema/iconLinkListSchema';
 import ModalJSONEditor from '../components/Widgets/ModalJSONEditor';
-import AlignWidget from '../components/Widgets/AlignWidget';
+import SoftTextWidget from '../components/Widgets/SoftTextWidget';
+import SoftTextareaWidget from '../components/Widgets/SoftTextareaWidget';
 
 export default function install(config: ConfigType) {
   // Color picker widget override - use our own non-semanticUI widget
@@ -20,21 +18,19 @@ export default function install(config: ConfigType) {
   // `color_picker` is a terrible name for this widget, it should be `colorSwatch`
   // ToDo: Rename it in Volto 19
   config.widgets.widget.color_picker = ColorSwatch;
+  config.widgets.widget.colorSwatch = ColorSwatch;
 
   // ObjectList widget override - use our own non-semanticUI widget
   // it uses also dnd-kit for drag and drop
   config.widgets.widget.object_list = ObjectList;
 
-  config.widgets.widget.align = AlignWidget;
-
   // Force Preview image link widget to the image widget
   config.widgets.id.preview_image_link = config.widgets.widget.image;
 
-  config.widgets.widget.blockWidth = BlockWidth;
-  config.widgets.widget.blockAlignment = BlockAlignment;
   config.widgets.widget.colorPicker = ColorPicker;
-  config.widgets.widget.size = Size;
   config.widgets.widget.themeColorSwatch = ThemeColorSwatch;
+  config.widgets.widget.softTextWidget = SoftTextWidget;
+  config.widgets.widget.softTextareaWidget = SoftTextareaWidget;
 
   config.widgets.widget.modalJSONEditor = ModalJSONEditor;
 

package/src/customizations/volto/components/manage/DragDropList/DragDropList.jsx

@@ -0,0 +1,263 @@
+/**
+ * OVERRIDE: DragDropList.jsx
+ * REASON: Adding BlockModelv3 guards and customizations.
+ *  Not moved to core yet, and as it's temporary, we keep it here.
+ * DATE: 2025-12-01
+ * DEVELOPER: @sneridagh
+ */
+
+import React, { useRef } from 'react';
+import isEmpty from 'lodash/isEmpty';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import { v4 as uuid } from 'uuid';
+import config from '@plone/volto/registry';
+
+const getVerticalPlaceholder = (
+  draggedDOM,
+  sourceIndex,
+  destinationIndex,
+  parentDOM,
+) => {
+  // Because of the margin rendering rules, there is no easy
+  // way to calculate the offset of the placeholder.
+  //
+  // (Note that this is the reason we cannot use the solutions
+  // published on the net, because they assume that we are in control
+  // of the content and there are no additional margins involved.)
+  //
+  // To get a placeholder that looks good in all cases, we
+  // fill up the space between the previous and the next element.
+  const childrenArray = [...parentDOM.children];
+  // Remove the source element
+  childrenArray.splice(sourceIndex, 1);
+  // Also remove the placeholder that the library always inserts at the end
+  childrenArray.splice(-1, 1);
+  const parentRect = parentDOM.getBoundingClientRect();
+  const prevNode = childrenArray[destinationIndex - 1];
+  const nextNode = childrenArray[destinationIndex];
+  let top, bottom;
+  if (prevNode) {
+    const prevRect = prevNode.getBoundingClientRect();
+    top = prevRect.top + prevRect.height - parentRect.top;
+  } else {
+    top = 0;
+  }
+  if (nextNode) {
+    const nextRect = nextNode.getBoundingClientRect();
+    bottom = nextRect.top - parentRect.top;
+  } else {
+    bottom =
+      parentRect.bottom +
+      draggedDOM.getBoundingClientRect().height -
+      parentRect.top;
+  }
+  return {
+    clientY: top,
+    clientHeight: bottom - top,
+    clientX: parseFloat(window.getComputedStyle(parentDOM).paddingLeft),
+    clientWidth: draggedDOM.clientWidth,
+  };
+};
+
+const getHorizontalPlaceholder = (draggedDOM, destinationIndex, parentDOM) => {
+  // The next element will be the one with a gray placeholder behind it.
+  //
+  // If the element is the last (doesn't have a next element), the whole draggable
+  // area will be highlighted
+
+  const parentRect = parentDOM.getBoundingClientRect();
+  let height;
+
+  height = parentRect.bottom - parentRect.top;
+
+  let clientWidth = draggedDOM.clientWidth;
+
+  let innerDroppablePlaceholderMarginLeft =
+    parentDOM.children[destinationIndex].getBoundingClientRect().x;
+  if (parentDOM.children.length - 1 === destinationIndex) {
+    innerDroppablePlaceholderMarginLeft = parentRect.x;
+    clientWidth = parentDOM.getBoundingClientRect().width;
+  }
+  return {
+    clientY: 0,
+    clientHeight: height,
+    clientX: parseFloat(innerDroppablePlaceholderMarginLeft - parentRect.x),
+    clientWidth: clientWidth,
+  };
+};
+
+const DragDropList = (props) => {
+  const {
+    childList,
+    children,
+    direction = 'vertical',
+    onMoveItem,
+    as = 'div',
+    style,
+    forwardedAriaLabelledBy,
+    reactBeautifulDnd,
+  } = props; //renderChild
+  const { DragDropContext, Draggable, Droppable } = reactBeautifulDnd;
+  const [placeholderProps, setPlaceholderProps] = React.useState({});
+  const [uid] = React.useState(uuid());
+  // queueing timed action
+  const timer = useRef(null);
+  const parentRef = useRef(null);
+  const onDragStart = React.useCallback(
+    (event) => {
+      clearTimeout(timer.current);
+      const queryAttr = 'data-rbd-draggable-id';
+      const domQuery = `[${queryAttr}='${event.draggableId}']`;
+      const draggedDOM = document.querySelector(domQuery);
+      if (!draggedDOM) {
+        return;
+      }
+      const sourceIndex = event.source.index;
+      setPlaceholderProps(
+        direction === 'horizontal'
+          ? getHorizontalPlaceholder(draggedDOM, sourceIndex, parentRef.current)
+          : getVerticalPlaceholder(
+              draggedDOM,
+              sourceIndex,
+              sourceIndex,
+              parentRef.current,
+            ),
+      );
+    },
+    [direction],
+  );
+
+  const onDragEnd = React.useCallback(
+    (result) => {
+      clearTimeout(timer.current);
+      onMoveItem(result);
+      setPlaceholderProps({});
+    },
+    [onMoveItem],
+  );
+
+  const onDragUpdate = React.useCallback(
+    (update) => {
+      clearTimeout(timer.current);
+      setPlaceholderProps({});
+      if (!update.destination) {
+        return;
+      }
+      const draggableId = update.draggableId;
+      const queryAttr = 'data-rbd-draggable-id';
+      const domQuery = `[${queryAttr}='${draggableId}']`;
+      const draggedDOM = document.querySelector(domQuery);
+      if (!draggedDOM) {
+        return;
+      }
+      const sourceIndex = update.source.index;
+      const destinationIndex = update.destination.index;
+      // Wait until the animations have finished, to make it look good.
+      timer.current = setTimeout(() => {
+        setPlaceholderProps(
+          direction === 'horizontal'
+            ? getHorizontalPlaceholder(
+                draggedDOM,
+                destinationIndex,
+                parentRef.current,
+              )
+            : getVerticalPlaceholder(
+                draggedDOM,
+                sourceIndex,
+                destinationIndex,
+                parentRef.current,
+              ),
+        );
+      }, 250);
+    },
+    [direction],
+  );
+
+  const AsDomComponent = as;
+  return (
+    <DragDropContext
+      onDragStart={onDragStart}
+      onDragUpdate={onDragUpdate}
+      onDragEnd={onDragEnd}
+    >
+      <Droppable
+        droppableId={uid}
+        direction={direction}
+        renderClone={(provided, snapshot, rubric) => {
+          const index = rubric.source.index;
+          return children({
+            child: childList[index][1],
+            childId: childList[index][0],
+            index,
+            draginfo: provided,
+          });
+        }}
+      >
+        {(provided, snapshot) => (
+          <AsDomComponent
+            ref={(el) => {
+              provided.innerRef(el);
+              parentRef.current = el;
+            }}
+            {...provided.droppableProps}
+            style={{ ...style, position: 'relative' }}
+            aria-labelledby={forwardedAriaLabelledBy}
+          >
+            {childList
+              .filter(([id, child]) => id && child) // beware numbers!
+              .map(([childId, child], index) => {
+                const dragDisabled =
+                  config.blocks.blocksConfig?.[child?.['@type']]?.blockModel ===
+                  3;
+                if (!dragDisabled) {
+                  return (
+                    <Draggable
+                      draggableId={childId.toString()}
+                      index={index}
+                      key={childId}
+                      isDragDisabled={!!dragDisabled}
+                      style={{
+                        userSelect: 'none',
+                      }}
+                    >
+                      {(draginfo) =>
+                        children({ child, childId, index, draginfo })
+                      }
+                    </Draggable>
+                  );
+                } else {
+                  return (
+                    <React.Fragment key={childId}>
+                      {children({
+                        child,
+                        childId,
+                        index,
+                        draginfo: { draggableProps: {} },
+                      })}
+                    </React.Fragment>
+                  );
+                }
+              })}
+            {provided.placeholder}
+            {!isEmpty(placeholderProps) && snapshot.isDraggingOver && (
+              <div
+                style={{
+                  position: 'absolute',
+                  top: placeholderProps.clientY,
+                  left: placeholderProps.clientX,
+                  height: placeholderProps.clientHeight,
+                  background: '#eee',
+                  width: placeholderProps.clientWidth,
+                  borderRadius: '3px',
+                  ...(direction === 'horizontal' && { zIndex: -1 }),
+                }}
+              />
+            )}
+          </AsDomComponent>
+        )}
+      </Droppable>
+    </DragDropContext>
+  );
+};
+
+export default injectLazyLibs(['reactBeautifulDnd'])(DragDropList);

package/src/customizations/volto/components/theme/LanguageSelector/LanguageSelector.tsx

@@ -0,0 +1,10 @@
+/**
+ * OVERRIDE LanguageSelector.tsx
+ * REASON: Show only two letters of the native language name.
+ * SemanticUI-free located at the components folder.
+ * To override it, override the @kitconcept/volto-light-theme one instead of
+ * this one.
+ */
+import LanguageSelector from '../../../../../components/LanguageSelector/LanguageSelector';
+
+export default LanguageSelector;

package/src/helpers/styleDefinitions.test.tsx

@@ -0,0 +1,30 @@
+import { styleDefinitionsEnhancer } from './styleDefinitions';
+import config from '@plone/volto/registry';
+
+describe('styleDefinitionsEnhancer', () => {
+  it('should enhance style definitions correctly', () => {
+    const data = {
+      styles: {
+        backgroundColor: 'red',
+        textColor: 'blue',
+      },
+    };
+
+    config.registerUtility({
+      type: 'styleFieldDefinition',
+      name: 'backgroundColor',
+      method: () => {
+        return [
+          { name: 'red', label: 'Red', style: { '--bg-color': 'red' } },
+          { name: 'green', label: 'Green', style: { '--bg-color': 'green' } },
+        ];
+      },
+    });
+
+    const container = {};
+
+    const result = styleDefinitionsEnhancer({ data, container });
+
+    expect(result).toEqual({ '--bg-color': 'red' });
+  });
+});

package/src/helpers/styleDefinitions.ts

@@ -0,0 +1,49 @@
+import config from '@plone/volto/registry';
+import { findStyleByName } from '@plone/volto/helpers/Blocks/Blocks';
+import isEmpty from 'lodash/isEmpty';
+
+export function blockThemesEnhancer({ data, container }) {
+  if (!data['@type']) return {};
+  const blockConfig = config.blocks.blocksConfig[data['@type']];
+  if (!blockConfig) return {};
+  const blockStyleDefinitions =
+    // We look up for the blockThemes in the block's config, then in the global config
+    // We keep `colors` for BBB, but `themes` should be used
+    blockConfig.themes || blockConfig.colors || config.blocks.themes || [];
+
+  if (
+    !isEmpty(container) &&
+    container.theme &&
+    (!data.theme || data.theme === 'default')
+  ) {
+    return findStyleByName(blockStyleDefinitions, container.theme);
+  }
+  if (data.theme) {
+    return data.theme ? findStyleByName(blockStyleDefinitions, data.theme) : {};
+  } else {
+    // No theme, return default color
+    return findStyleByName(config.blocks.themes, 'default');
+  }
+}
+
+export function styleDefinitionsEnhancer({ data, container }) {
+  let resultantStyles = {};
+  Object.keys(data.styles || {}).forEach((fieldName) => {
+    const styleFieldEnhancer = config.getUtility({
+      type: 'styleFieldDefinition',
+      name: fieldName,
+    });
+
+    if (styleFieldEnhancer.method) {
+      resultantStyles = {
+        ...resultantStyles,
+        ...findStyleByName(
+          styleFieldEnhancer.method({ data, container }),
+          data.styles[fieldName],
+        ),
+      };
+    }
+  });
+
+  return resultantStyles;
+}