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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.20",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -26,11 +26,20 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "i18n": "rm -rf build/messages && NODE_ENV=production i18n --addon",
+    "dry-release": "release-it --dry-run",
+    "release": "release-it",
+    "release-major-alpha": "release-it major --preRelease=alpha",
+    "release-alpha": "release-it --preRelease=alpha",
+    "release-rc": "release-it --preRelease=rc"
+  },
   "addons": [
     "@kitconcept/volto-bm3-compat"
   ],
   "devDependencies": {
     "@plone/scripts": "^3.6.2",
+    "@plone/types": "workspace:*",
     "@storybook/react": "^8.6.12",
     "@testing-library/cypress": "10.0.3",
     "@testing-library/jest-dom": "^6.8.0",
@@ -40,24 +49,26 @@
     "@types/node": "^22",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@playwright/test": "^1.55.0",
+    "playwright": "^1.55.0",
     "react-intl-redux": "2.3.0",
     "redux-mock-store": "1.5.4",
     "release-it": "^19.0.3",
     "typescript": "^5.7.3",
-    "vitest": "^3.1.2",
-    "@plone/types": "2.0.0-alpha.7"
+    "vitest": "^3.1.2"
   },
   "dependencies": {
     "@dnd-kit/core": "6.0.8",
     "@dnd-kit/sortable": "7.0.2",
     "@dnd-kit/utilities": "3.2.2",
+    "@kitconcept/volto-bm3-compat": "workspace:^",
+    "@plone/components": "workspace:^",
     "embla-carousel-autoplay": "^8.0.0",
     "embla-carousel-react": "^8.0.0",
     "react-animate-height": "^3.2.3",
-    "react-aria-components": "^1.7.0",
+    "react-aria-components": "^1.14.0",
     "react-colorful": "^5.6.1",
-    "uuid": "^11.0.0",
-    "@plone/components": "^4.0.0-alpha.1"
+    "uuid": "^11.0.0"
   },
   "peerDependencies": {
     "classnames": "^2.5.1",
@@ -67,13 +78,5 @@
     "react-intl": "^3.12.1",
     "react-redux": "^8.1.2",
     "react-router-dom": "^5.2.0"
-  },
-  "scripts": {
-    "i18n": "rm -rf build/messages && NODE_ENV=production i18n --addon",
-    "dry-release": "release-it --dry-run",
-    "release": "release-it",
-    "release-major-alpha": "release-it major --preRelease=alpha",
-    "release-alpha": "release-it --preRelease=alpha",
-    "release-rc": "release-it --preRelease=rc"
   }
-}
+}

package/src/__mocks__/semantic-ui-react.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+
+type GenericProps = {
+  children?: React.ReactNode;
+} & Record<string, unknown>;
+
+const createComponent =
+  (element: keyof JSX.IntrinsicElements = 'div') =>
+  ({ children, ...rest }: GenericProps) =>
+    React.createElement(element, rest, children);
+
+export const Container = createComponent('div');
+export const Segment = createComponent('section');
+export const Button = createComponent('button');
+export const Form = createComponent('form');
+export const Input = createComponent('input');
+export const Pagination = createComponent('div');
+export const Dimmer = createComponent('div');
+export const Loader = createComponent('div');
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  Container,
+  Segment,
+  Button,
+  Form,
+  Input,
+  Pagination,
+  Dimmer,
+  Loader,
+};

package/src/components/Blocks/Block/Edit.jsx

@@ -35,6 +35,7 @@ import {
   buildStyleClassNamesExtenders,
 } from '@plone/volto/helpers/Blocks/Blocks';
 import MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
+import ErrorBoundary from './ErrorBoundary';
 
 const messages = defineMessages({
   unknownBlock: {
@@ -288,12 +289,19 @@ export class Edit extends Component {
               as={'div'}
               className="block-inner-container"
             >
-              <Block
-                {...this.props}
-                blockNode={this.blockNode}
-                data={this.props.data}
-                className={cx({ contained: parentIsContainer })}
-              />
+              <ErrorBoundary
+                name={`blockId-${this.props.id}-type-${type}`}
+                block={this.props.block}
+                type={type}
+                isEdit
+              >
+                <Block
+                  {...this.props}
+                  blockNode={this.blockNode}
+                  data={this.props.data}
+                  className={cx({ contained: parentIsContainer })}
+                />
+              </ErrorBoundary>
             </MaybeWrap>
 
             {blocksConfig?.[type]?.blockModel === 3 && (

package/src/components/Blocks/Block/EditBlockWrapper.jsx

@@ -84,7 +84,15 @@ const EditBlockWrapper = (props) => {
     style: { ...style, ...draginfo.draggableProps.style },
   };
 
-  return blocksConfig?.[type]?.blockModel !== 3 ? (
+  if (blocksConfig?.[type]?.blockModel === 3) {
+    // We still need to attach the draggable props/ref so RBD stays happy,
+    // but we skip rendering the drag handle and friends
+    // consider removing the whole EditBlockWrapper for BlockModelv3 blocks in the future
+    // or moving the handlers here.
+    return <>{children}</>;
+  }
+
+  return (
     <div
       ref={draginfo.innerRef}
       {...styleMergedWithDragProps}
@@ -160,8 +168,6 @@ const EditBlockWrapper = (props) => {
         </div>
       </div>
     </div>
-  ) : (
-    <>{children}</>
   );
 };
 

package/src/components/Blocks/Block/ErrorBoundary.test.tsx

@@ -0,0 +1,55 @@
+import React, { type FC } from 'react';
+import { render, screen } from '@testing-library/react';
+import { afterAll, afterEach, describe, expect, it, vi } from 'vitest';
+import { Provider } from 'react-intl-redux';
+import { ErrorBoundary } from './ErrorBoundary';
+import configureStore from 'redux-mock-store';
+
+describe('Error boundary', () => {
+  const consoleErrorSpy = vi
+    .spyOn(console, 'error')
+    .mockImplementation(() => undefined);
+
+  afterEach(() => {
+    consoleErrorSpy.mockClear();
+  });
+
+  afterAll(() => {
+    consoleErrorSpy.mockRestore();
+  });
+
+  const mockStore = configureStore();
+
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  it('renders fallback UI when a child throws', () => {
+    const ThrowError: FC = () => {
+      throw new Error('Test');
+    };
+
+    const { container } = render(
+      <Provider store={store}>
+        <ErrorBoundary
+          name="test"
+          block="123"
+          type="slate"
+          blocks={null}
+          blocksLayout={null}
+          title={null}
+        >
+          <ThrowError />
+        </ErrorBoundary>
+      </Provider>,
+    );
+
+    expect(screen.getByText('Block error:')).toBeInTheDocument();
+    expect(
+      container.querySelector('.block-error-boundary .title'),
+    ).toBeInTheDocument();
+  });
+});

package/src/components/Blocks/Block/ErrorBoundary.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import type { ErrorInfo, ReactNode } from 'react';
+import { connect } from 'react-redux';
+import type { BlocksData } from '@plone/types';
+import ErrorBoundaryMessage from './ErrorBoundaryMessage';
+
+type OwnProps = {
+  name?: string;
+  block?: string;
+  type?: string;
+  isEdit?: boolean;
+  children?: ReactNode;
+};
+
+type StateProps = {
+  blocks: BlocksData['blocks'];
+  blocksLayout: BlocksData['blocks_layout'];
+  title: string | null;
+};
+
+type ErrorBoundaryState = {
+  hasError: boolean;
+};
+
+type ErrorBoundaryProps = OwnProps & StateProps;
+
+export class ErrorBoundary extends React.Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  state: ErrorBoundaryState = { hasError: false };
+
+  static getDerivedStateFromError(_error: Error): ErrorBoundaryState {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidUpdate(prevProps: ErrorBoundaryProps) {
+    const titleChanged = prevProps.title !== this.props.title;
+    const blocksChanged = prevProps.blocks !== this.props.blocks;
+    const blocksLayoutChanged =
+      prevProps.blocksLayout !== this.props.blocksLayout;
+
+    if (
+      (blocksChanged || blocksLayoutChanged || titleChanged) &&
+      this.state.hasError
+    ) {
+      this.setState({ hasError: false });
+    }
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // eslint-disable-next-line
+    console.error(error, errorInfo);
+  }
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      return (
+        <ErrorBoundaryMessage
+          name={this.props.name}
+          block={this.props.block}
+          type={this.props.type}
+          isEdit={this.props.isEdit}
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+type ReduxState = {
+  form?: {
+    global?: {
+      blocks?: BlocksData['blocks'];
+      blocks_layout?: BlocksData['blocks_layout'];
+      title: string | null;
+    };
+  };
+};
+
+const mapStateToProps = (state: ReduxState): StateProps => ({
+  blocks: state.form?.global?.blocks ?? null,
+  blocksLayout: state.form?.global?.blocks_layout ?? null,
+  // Title is used for demonstration purposes
+  // If we want to use it in metadata sources, we should connect it to the full state
+  // which I am reluctant to do because nowadays the form state can be quite large
+  title: state.form?.global?.title ?? null,
+});
+
+export default connect(mapStateToProps)(ErrorBoundary);

package/src/components/Blocks/Block/ErrorBoundaryMessage.tsx

@@ -0,0 +1,66 @@
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+type ErrorBoundaryMessageProps = {
+  name?: string;
+  block?: string;
+  type?: string;
+  isEdit?: boolean;
+};
+
+const messages = defineMessages({
+  title: {
+    id: 'blockErrorBoundaryTitle',
+    defaultMessage: 'Block error:',
+  },
+  description: {
+    id: 'blockErrorBoundaryDescription',
+    defaultMessage:
+      'The {type} block with the id {block} has encountered an error.{lineBreak}You can try to undo your changes (via the undo toolbar or pressing {shortcut}), or try to delete the block and recreate it again.',
+  },
+  viewDescription: {
+    id: 'blockErrorBoundaryViewDescription',
+    defaultMessage:
+      'The {type} block with the id {block} errored and cannot be displayed.{lineBreak}Please contact the site administrator for further assistance.',
+  },
+});
+
+const ErrorBoundaryMessage = (props: ErrorBoundaryMessageProps) => {
+  const intl = useIntl();
+
+  if (props.isEdit) {
+    return (
+      <div className="block-error-boundary">
+        <div className="title">{intl.formatMessage(messages.title)}</div>
+        <p>
+          <FormattedMessage
+            {...messages.description}
+            values={{
+              type: <code>{props.type}</code>,
+              block: <code>{props.block}</code>,
+              lineBreak: <br />,
+              shortcut: <code>ctrl/cmd + Z</code>,
+            }}
+          />
+        </p>
+      </div>
+    );
+  } else {
+    return (
+      <div className="block-error-boundary">
+        <div className="title">{intl.formatMessage(messages.title)}</div>
+        <p>
+          <FormattedMessage
+            {...messages.viewDescription}
+            values={{
+              type: <code>{props.type}</code>,
+              block: <code>{props.block}</code>,
+              lineBreak: <br />,
+            }}
+          />
+        </p>
+      </div>
+    );
+  }
+};
+
+export default ErrorBoundaryMessage;

package/src/components/Blocks/EventCalendar/Search/components/EventTemplate.tsx

@@ -49,7 +49,7 @@ const EventItem = ({ item, lang, isEditMode }) => {
               <span className="event-title">{item.head_title}</span>
             )}
           </div>
-          <DefaultSummary item={item} HeadingTag="h2" />
+          <DefaultSummary item={item} />
         </Card.Summary>
       </Card>
     </div>

package/src/components/Blocks/Image/Edit.jsx

@@ -13,6 +13,7 @@ import Caption from '../../Caption/Caption';
 function Edit(props) {
   const { data } = props;
   const Image = config.getComponent({ name: 'Image' }).component;
+
   const onSelectItem = React.useCallback(
     (url, item) => {
       const dataAdapter = props.blocksConfig[props.data['@type']].dataAdapter;

package/src/components/Blocks/Listing/DefaultTemplate.jsx

@@ -1,4 +1,5 @@
 // See Customization for more info
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
 import Card from '../../../primitives/Card/Card';
@@ -11,6 +12,8 @@ import cx from 'classnames';
 const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
   let link = null;
   let href = linkHref?.[0]?.['@id'] || '';
+  const site = useSelector((state) => state.site?.data);
+  const hideProfileLinks = site?.['kitconcept.disable_profile_links'];
 
   if (isInternalURL(href)) {
     link = (
@@ -24,16 +27,19 @@ const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
 
   return (
     <>
-      <div className="items">
+      <ul className="items">
         {items.map((item) => {
           const Summary =
             config.getComponent({
               name: 'Summary',
               dependencies: [item['@type']],
             }).component || DefaultSummary;
-          const showLink = !Summary.hideLink && !isEditMode;
+          let showLink = !Summary.hideLink && !isEditMode;
+          if (item['@type'] === 'Person' && hideProfileLinks !== undefined) {
+            showLink = !hideProfileLinks && !isEditMode;
+          }
           return (
-            <div
+            <li
               className={cx('listing-item', {
                 [`${item['@type']?.toLowerCase()}-listing`]: item['@type'],
               })}
@@ -41,13 +47,13 @@ const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
             >
               <Card item={showLink ? item : null}>
                 <Card.Summary>
-                  <Summary item={item} HeadingTag="h2" />
+                  <Summary item={item} />
                 </Card.Summary>
               </Card>
-            </div>
+            </li>
           );
         })}
-      </div>
+      </ul>
 
       {link && <div className="footer">{link}</div>}
     </>

package/src/components/Blocks/Listing/GridTemplate.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
 import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
 import Card from '../../../primitives/Card/Card';
 import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers/Url/Url';
@@ -11,6 +12,8 @@ const GridTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
   let link = null;
   let href = linkHref?.[0]?.['@id'] || '';
   const PreviewImageComponent = config.getComponent('PreviewImage').component;
+  const site = useSelector((state) => state.site?.data);
+  const hideProfileLinks = site?.['kitconcept.disable_profile_links'];
 
   if (isInternalURL(href)) {
     link = (
@@ -24,7 +27,7 @@ const GridTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
 
   return (
     <>
-      <div className="items">
+      <ul className="items">
         {items.map((item) => {
           const CustomItemBodyTemplate = config.getComponent({
             name: 'GridListingItemTemplate',
@@ -35,7 +38,10 @@ const GridTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
               name: 'Summary',
               dependencies: [item['@type']],
             }).component || DefaultSummary;
-          const showLink = !Summary.hideLink && !isEditMode;
+          let showLink = !Summary.hideLink && !isEditMode;
+          if (item['@type'] === 'Person' && hideProfileLinks !== undefined) {
+            showLink = !hideProfileLinks && !isEditMode;
+          }
 
           const ItemBodyTemplate = (props) =>
             CustomItemBodyTemplate ? (
@@ -49,14 +55,17 @@ const GridTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
                     imageComponent={PreviewImageComponent}
                   />
                 )}
-                <Card.Summary a11yLabelId={props.a11yLabelId}>
-                  <Summary item={item} HeadingTag="h2" />
+                <Card.Summary
+                  a11yLabelId={props.a11yLabelId}
+                  LinkToItem={props.LinkToItem}
+                >
+                  <Summary item={item} />
                 </Card.Summary>
               </>
             );
 
           return (
-            <div
+            <li
               className={cx('listing-item', {
                 [`${item['@type']?.toLowerCase()}-listing`]: item['@type'],
               })}
@@ -65,10 +74,10 @@ const GridTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
               <Card item={showLink ? item : null}>
                 <ItemBodyTemplate item={item} />
               </Card>
-            </div>
+            </li>
           );
         })}
-      </div>
+      </ul>
 
       {link && <div className="footer">{link}</div>}
     </>

package/src/components/Blocks/Listing/ListingBody.jsx

@@ -6,6 +6,7 @@ import Slugger from 'github-slugger';
 import { renderLinkElement } from '@plone/volto-slate/editor/render';
 import config from '@plone/volto/registry';
 import withQuerystringResults from '@plone/volto/components/manage/Blocks/Listing/withQuerystringResults';
+import SlotRenderer from '@plone/volto/components/theme/SlotRenderer/SlotRenderer';
 
 const messages = defineMessages({
   PaginationNavigationFor: {
@@ -38,7 +39,7 @@ const Headline = ({
       mode={!isEditMode && 'view'}
       children={data.headline}
       attributes={attr}
-      className={cx('headline', {
+      className={cx('headline block-title', {
         emptyListing: !listingItems?.length > 0,
       })}
       style={style}
@@ -63,6 +64,7 @@ export const ListingBody = (props) => {
     id,
     total,
     properties,
+    content,
   } = props;
 
   let ListingBodyTemplate;
@@ -99,6 +101,7 @@ export const ListingBody = (props) => {
           isEditMode={isEditMode}
         />
       )}
+      <SlotRenderer name="aboveListingItems" content={content} data={data} />
       {listingItems?.length > 0 ? (
         <div ref={listingRef}>
           <ListingBodyTemplate

package/src/components/Blocks/Listing/SummaryTemplate.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
 import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
 import Card from '../../../primitives/Card/Card';
 import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers/Url/Url';
@@ -8,6 +9,8 @@ import DefaultSummary from '@kitconcept/volto-light-theme/components/Summary/Def
 import cx from 'classnames';
 
 const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
+  const site = useSelector((state) => state.site?.data);
+  const hideProfileLinks = site?.['kitconcept.disable_profile_links'];
   let link = null;
   let href = linkHref?.[0]?.['@id'] || '';
   const PreviewImageComponent = config.getComponent('PreviewImage').component;
@@ -23,7 +26,7 @@ const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
 
   return (
     <>
-      <div className="items">
+      <ul className="items">
         {items.map((item) => {
           const CustomItemBodyTemplate = config.getComponent({
             name: 'SummaryListingItemTemplate',
@@ -34,7 +37,10 @@ const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
               name: 'Summary',
               dependencies: [item['@type']],
             }).component || DefaultSummary;
-          const showLink = !Summary.hideLink && !isEditMode;
+          let showLink = !Summary.hideLink && !isEditMode;
+          if (item['@type'] === 'Person' && hideProfileLinks !== undefined) {
+            showLink = !hideProfileLinks && !isEditMode;
+          }
           const ItemBodyTemplate = (props) =>
             CustomItemBodyTemplate ? (
               <CustomItemBodyTemplate item={item} />
@@ -45,13 +51,16 @@ const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
                   showPlaceholderImage={true}
                   imageComponent={PreviewImageComponent}
                 />
-                <Card.Summary a11yLabelId={props.a11yLabelId}>
-                  <Summary item={item} HeadingTag="h3" />
+                <Card.Summary
+                  a11yLabelId={props.a11yLabelId}
+                  LinkToItem={props.LinkToItem}
+                >
+                  <Summary item={item} />
                 </Card.Summary>
               </>
             );
           return (
-            <div
+            <li
               className={cx('listing-item has--align--left', {
                 [`${item['@type']?.toLowerCase()}-listing`]: item['@type'],
               })}
@@ -60,10 +69,10 @@ const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
               <Card item={showLink ? item : null}>
                 <ItemBodyTemplate item={item} />
               </Card>
-            </div>
+            </li>
           );
         })}
-      </div>
+      </ul>
 
       {link && <div className="footer">{link}</div>}
     </>