@plone/volto 18.35.0 → 18.35.1

package/src/components/theme/View/LinkView.stories.jsx

@@ -0,0 +1,57 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import LinkViewComponent from './LinkView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlLinkViewComponent = injectIntl(LinkViewComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        userSession: {
+          token: null,
+        },
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlLinkViewComponent
+        token="1234"
+        content={{
+          ...args,
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  title: 'Hello World!',
+  description: 'Hi',
+  remoteUrl: '/news',
+};
+
+export default {
+  title: 'Public components/View/LinkView',
+  component: LinkViewComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    title: {
+      description: 'Title of the component',
+    },
+    remoteUrl: {
+      description: 'remoteUrl mentioned in the page',
+    },
+  },
+};

package/src/components/theme/View/ListingView.stories.jsx

@@ -0,0 +1,70 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import ListingViewComponent from './ListingView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlListingViewComponent = injectIntl(ListingViewComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlListingViewComponent
+        content={{
+          title: 'Hello World!',
+          description: 'Hi',
+          ...args,
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  items: [
+    {
+      title: 'My item',
+      description: 'My item description',
+      url: '/item',
+      '@type': 'Document',
+    },
+    {
+      title: 'Second item',
+      description: 'My second item description',
+      url: '/item2',
+      '@type': 'Document',
+    },
+  ],
+};
+
+export default {
+  title: 'Public components/View/ListingView',
+  component: ListingViewComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    items: {
+      control: 'object',
+      description: 'Listed pages',
+    },
+    title: {
+      description: 'Title of the page listed',
+    },
+    description: {
+      description: 'Description of the page',
+    },
+  },
+};

package/src/components/theme/View/NewsItemView.stories.jsx

@@ -0,0 +1,58 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import NewsItemViewComponent from './NewsItemView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlNewsItemViewComponent = injectIntl(NewsItemViewComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlNewsItemViewComponent
+        content={{
+          ...args,
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  title: 'Hello World!',
+  description: 'Hi',
+  text: {
+    data: '<p>Hello World!</p>',
+  },
+};
+
+export default {
+  title: 'Public components/View/NewsItemView',
+  component: NewsItemViewComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    title: {
+      description: 'Title of the page listed',
+    },
+    description: {
+      description: 'Description of the page',
+    },
+    text: {
+      description: 'Content',
+    },
+  },
+};

package/src/components/theme/View/RenderBlocks.stories.jsx

@@ -0,0 +1,112 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import RenderBlocksComponent from './RenderBlocks';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+import config from '@plone/volto/registry';
+
+const IntlRenderBlocksComponent = injectIntl(RenderBlocksComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlRenderBlocksComponent
+        blocksConfig={{
+          ...config.blocks.blocksConfig,
+          custom: {
+            id: 'custom',
+            ...args,
+          },
+        }}
+        content={{
+          blocks_layout: {
+            items: ['a', 'b'],
+          },
+          ...args,
+        }}
+        path="/foo"
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  view: ({ id, data }) => (
+    <div>
+      {id} - {data.text}
+    </div>
+  ),
+  blocks: {
+    a: {
+      '@type': 'custom',
+      text: 'a',
+    },
+    b: {
+      '@type': 'custom',
+      text: 'b',
+    },
+  },
+};
+export const PathToBlocks = StoryComponent.bind({});
+PathToBlocks.args = {
+  view: ({ id, data, path }) => (
+    <div>
+      id: {id} - text: {data.text} - path: {path}
+    </div>
+  ),
+
+  blocks: {
+    a: {
+      '@type': 'custom',
+      text: 'bar',
+    },
+    b: {
+      '@type': 'custom',
+      text: 'foo',
+    },
+  },
+};
+
+export const InvalidBlocks = StoryComponent.bind({});
+InvalidBlocks.args = {
+  blocks_layout: {
+    items: ['MISSING-YOU-1', 'a', 'MISSING-YOU-2'],
+  },
+  blocks: {
+    a: {
+      '@type': 'custom',
+      text: 'bar',
+    },
+  },
+};
+export default {
+  title: 'Internal components/View/RenderBlocks',
+  component: RenderBlocksComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    view: {
+      description: 'Pattern in which to place block content',
+    },
+    blocks: {
+      description: 'blocks in the page',
+    },
+    blocks_layout: {
+      description: 'block layout in the page',
+    },
+  },
+};

package/src/components/theme/View/SummaryView.stories.jsx

@@ -0,0 +1,71 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import SummaryViewComponent from './SummaryView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlSummaryViewComponent = injectIntl(SummaryViewComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlSummaryViewComponent
+        content={{
+          ...args,
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  title: 'Hello World!',
+  description: 'Hi',
+  items: [
+    {
+      title: 'My item',
+      description: 'My item description',
+      url: '/item',
+      image: {
+        scales: {
+          thumb: {
+            download: 'file:///preview.jpg',
+          },
+        },
+      },
+      image_caption: 'My image caption',
+      '@type': 'News Item',
+    },
+  ],
+};
+export default {
+  title: 'Public components/View/SummaryView',
+  component: SummaryViewComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+
+  argTypes: {
+    title: {
+      description: 'Title of the page listed',
+    },
+    description: {
+      description: 'Description of the page',
+    },
+    items: {
+      description: 'Content in the page',
+    },
+  },
+};

package/src/components/theme/View/TabularView.stories.jsx

@@ -0,0 +1,66 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import TabularViewComponent from './TabularView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlTabularViewComponent = injectIntl(TabularViewComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlTabularViewComponent
+        content={{
+          ...args,
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  title: 'Hello World!',
+  description: 'Hi',
+  items: [
+    {
+      title: 'My item 1',
+      description: 'My item description 1',
+      url: '/item1',
+    },
+    {
+      title: 'My item 2',
+      description: 'My item description 2',
+      url: '/item2',
+    },
+  ],
+};
+export default {
+  title: 'Public components/View/TabularView',
+  component: TabularViewComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    title: {
+      description: 'Title of the page listed',
+    },
+    description: {
+      description: 'Description of the page',
+    },
+    items: {
+      description: 'Row items of the page',
+    },
+  },
+};

package/src/helpers/I18n/I18n.test.ts

@@ -0,0 +1,44 @@
+import { createIntl, createIntlCache } from 'react-intl';
+import type { IntlShape } from 'react-intl';
+import { formatMessageWithFallback } from './I18n';
+
+const buildIntl = (
+  locale: string,
+  messages: Record<string, string>,
+): IntlShape => createIntl({ locale, messages }, createIntlCache());
+
+describe('formatMessageWithFallback', () => {
+  it('returns the translated string when the locale catalog has an entry', () => {
+    const intl = buildIntl('pt-BR', { Image: 'Imagem' });
+    expect(formatMessageWithFallback(intl, 'Image')).toBe('Imagem');
+  });
+
+  it('falls back to the input message when no translation is registered', () => {
+    const intl = buildIntl('pt-BR', {});
+    expect(formatMessageWithFallback(intl, 'Image')).toBe('Image');
+  });
+
+  it('returns undefined unchanged', () => {
+    const intl = buildIntl('en', {});
+    expect(formatMessageWithFallback(intl, undefined)).toBeUndefined();
+  });
+
+  it('returns null unchanged', () => {
+    const intl = buildIntl('en', {});
+    expect(formatMessageWithFallback(intl, null)).toBeNull();
+  });
+
+  it('returns an empty string unchanged', () => {
+    const intl = buildIntl('en', {});
+    expect(formatMessageWithFallback(intl, '')).toBe('');
+  });
+
+  it('does not call intl.formatMessage when the message is falsy', () => {
+    const intl = buildIntl('en', {});
+    const spy = vi.spyOn(intl, 'formatMessage');
+    formatMessageWithFallback(intl, undefined);
+    formatMessageWithFallback(intl, null);
+    formatMessageWithFallback(intl, '');
+    expect(spy).not.toHaveBeenCalled();
+  });
+});

package/src/helpers/I18n/I18n.ts

@@ -0,0 +1,31 @@
+/**
+ * I18n helpers.
+ * @module helpers/I18n/I18n
+ */
+
+import type { IntlShape } from 'react-intl';
+
+/**
+ * Format a `react-intl` message using a plain string as both the id and the
+ * default fallback. Useful when a UI value (e.g. a block title configured as
+ * a plain string) should be looked up in the locale catalog when available,
+ * and rendered as-is otherwise.
+ *
+ * Returns the input untouched when it is falsy, so the result can be used
+ * directly in `||` fallback chains.
+ *
+ * @param intl react-intl `intl` instance, typically from `useIntl()`.
+ * @param message The string to translate; used as both `id` and
+ *   `defaultMessage`.
+ * @returns Translated text, or `message` unchanged if falsy / no translation.
+ */
+export function formatMessageWithFallback<T extends string | undefined | null>(
+  intl: IntlShape,
+  message: T,
+): T extends string ? string : T {
+  if (!message) return message as T extends string ? string : T;
+  return intl.formatMessage({
+    id: message,
+    defaultMessage: message,
+  }) as T extends string ? string : T;
+}

package/src/helpers/index.js

@@ -112,6 +112,7 @@ export {
   normalizeString,
 } from '@plone/volto/helpers/Utils/Utils';
 export { messages } from './MessageLabels/MessageLabels';
+export { formatMessageWithFallback } from './I18n/I18n';
 export {
   withBlockSchemaEnhancer,
   withVariationSchemaEnhancer,

package/src/server.jsx

@@ -243,7 +243,13 @@ server.get('/*', (req, res) => {
         : store.getState().content.data?.language?.token ||
           config.settings.defaultLanguage;
 
-      if (toBackendLang(initialLang) !== contentLang && url !== '/') {
+      const isMultilingual = config.settings.isMultilingual;
+
+      if (
+        toBackendLang(initialLang) !== contentLang &&
+        !/\/\.well-known\/.*$/.test(location.pathname) &&
+        !(isMultilingual && location.pathname === '/')
+      ) {
         const newLang = toReactIntlLang(
           new locale.Locales(contentLang).best(supported).toString(),
         );

package/types/components/manage/Controlpanels/Relations/RelationsMatrix.d.ts

@@ -3,7 +3,7 @@ declare const _default: {
         state: {
             isObjectBrowserOpen: boolean;
         };
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, initialPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

package/types/components/manage/Multilingual/ManageTranslations.d.ts

@@ -3,7 +3,7 @@ declare const _default: {
         state: {
             isObjectBrowserOpen: boolean;
         };
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, initialPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

package/types/components/manage/Sidebar/ObjectBrowser.d.ts

@@ -31,7 +31,7 @@ declare function withObjectBrowser(WrappedComponent: any): {
          *     }),
          *   });
          */
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, initialPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

package/types/components/manage/Sidebar/ObjectBrowserBody.test.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/manage/Widgets/ImageWidget.d.ts

@@ -10,7 +10,7 @@ export const ImageInput: {
         state: {
             isObjectBrowserOpen: boolean;
         };
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, initialPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

package/types/components/manage/Widgets/InternalUrlWidget.d.ts

@@ -41,7 +41,7 @@ declare const _default: {
         state: {
             isObjectBrowserOpen: boolean;
         };
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, initialPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

package/types/components/manage/Widgets/QuerystringWidget.d.ts

@@ -13,10 +13,6 @@ export function objectSchema({ intl, isDisabled, value }: {
             title: any;
             widget: string;
         };
-        depth: {
-            title: any;
-            type: string;
-        };
         sort_on: {
             title: any;
             widget: string;

package/types/components/manage/Widgets/UrlWidget.d.ts

@@ -41,7 +41,7 @@ declare const _default: {
         state: {
             isObjectBrowserOpen: boolean;
         };
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, initialPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

package/types/components/manage/Widgets/index.d.ts

@@ -23,7 +23,7 @@ export declare const UrlWidget: import("@loadable/component").LoadableClassCompo
         state: {
             isObjectBrowserOpen: boolean;
         };
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, initialPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;
@@ -63,7 +63,7 @@ export declare const InternalUrlWidget: import("@loadable/component").LoadableCl
         state: {
             isObjectBrowserOpen: boolean;
         };
-        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, onlyFolderishSelectable, }?: {
+        openObjectBrowser: ({ mode, onSelectItem, dataName, overlay, propDataName, searchableTypes, selectableTypes, maximumSelectionSize, currentPath, initialPath, onlyFolderishSelectable, }?: {
             mode: string;
             dataName: string;
             onSelectItem: string;

package/types/components/theme/View/EventView.stories.d.ts

@@ -0,0 +1,19 @@
+export const Default: any;
+export const EventViewAllProps: any;
+export const EventViewWithoutLinkToApiInTheText: any;
+declare namespace _default {
+    export let title: string;
+    export { EventViewComponent as component };
+    export let decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    export namespace argTypes {
+        namespace end {
+            let control: string;
+        }
+        namespace start {
+            let control_1: string;
+            export { control_1 as control };
+        }
+    }
+}
+export default _default;
+import EventViewComponent from './EventView';

package/types/components/theme/View/FileView.stories.d.ts

@@ -0,0 +1,18 @@
+export const Default: any;
+declare namespace _default {
+    export let title: string;
+    export { FileViewComponent as component };
+    export let decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    export namespace argTypes {
+        export namespace title_1 {
+            let description: string;
+        }
+        export { title_1 as title };
+        export namespace filename {
+            let description_1: string;
+            export { description_1 as description };
+        }
+    }
+}
+export default _default;
+import FileViewComponent from './FileView';