@plone/volto 19.0.0-alpha.0 → 19.0.0-alpha.1

package/types/components/manage/ConditionalLink/ConditionalLink.d.ts

@@ -1,15 +1,11 @@
-export default ConditionalLink;
-declare function ConditionalLink({ condition, to, item, ...props }: {
-    [x: string]: any;
-    condition: any;
-    to: any;
-    item: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace ConditionalLink {
-    namespace propTypes {
-        let condition: any;
-        let to: any;
-        let item: any;
-        let children: any;
-    }
-}
+import React from 'react';
+import type { UniversalLinkProps } from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+    condition?: boolean;
+    to?: string;
+    children: React.ReactNode;
+} & Omit<UniversalLinkProps, "href" | "item"> & {
+    href?: string;
+    item?: UniversalLinkProps["item"];
+} & React.RefAttributes<HTMLAnchorElement | HTMLDivElement>>>;
+export default _default;

package/types/components/manage/Contents/__mocks__/index.vitest.d.ts

@@ -0,0 +1,2 @@
+export declare const Contents: any;
+export declare const ContentsRenameModal: any;

package/types/components/manage/Form/__mocks__/index.vitest.d.ts

@@ -0,0 +1,8 @@
+export declare const Field: any;
+export declare const InlineForm: any;
+export declare const ModalForm: any;
+export declare const UndoToolbar: any;
+export declare const BlocksToolbar: any;
+export declare const BlockDataForm: any;
+export declare const BlocksForm: any;
+export declare const Form: any;

package/types/components/manage/MaybeWrap/MaybeWrap.d.ts

@@ -1,5 +1,7 @@
-export default function MaybeWrap({ condition, as: Component, ...props }: {
-    [x: string]: any;
-    condition: any;
-    as?: string;
-}): any;
+import React, { ComponentPropsWithoutRef } from 'react';
+type MaybeWrapProps<T extends React.ElementType> = {
+    condition: boolean;
+    as: T;
+} & ComponentPropsWithoutRef<React.ElementType extends T ? 'div' : T>;
+declare function MaybeWrap<T extends React.ElementType = 'div'>(props: MaybeWrapProps<T>): any;
+export default MaybeWrap;

package/types/components/manage/UniversalLink/UniversalLink.d.ts

@@ -1,22 +1,56 @@
-export default UniversalLink;
-declare function UniversalLink({ href, item, openLinkInNewTab, download, children, className, title, ...props }: {
-    [x: string]: any;
-    href: any;
-    item?: any;
-    openLinkInNewTab: any;
+import React from 'react';
+import type { ObjectBrowserItem } from '@plone/types';
+type BaseProps = {
+    openLinkInNewTab?: boolean;
     download?: boolean;
-    children: any;
-    className?: any;
-    title?: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace UniversalLink {
-    namespace propTypes {
-        let href: any;
-        let openLinkInNewTab: any;
-        let download: any;
-        let className: any;
-        let title: any;
-        let item: any;
-        let children: any;
-    }
+    children: React.ReactNode;
+    className?: string;
+    title?: string;
+    smooth?: boolean;
+    onClick?: (e: React.MouseEvent) => void;
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+};
+type HrefOnly = {
+    href: string;
+    item?: never;
+} & BaseProps;
+type ItemOnly = {
+    href?: never;
+    item: Partial<ObjectBrowserItem> & {
+        remoteUrl?: string;
+    };
+} & BaseProps;
+export type UniversalLinkProps = HrefOnly | ItemOnly;
+export interface AppState {
+    content: {
+        data?: {
+            '@components'?: {
+                translations?: {
+                    items?: {
+                        language: string;
+                        '@id': string;
+                    }[];
+                };
+            };
+        };
+    };
+    navroot: {
+        data: {
+            navroot: {
+                id: string;
+            };
+        };
+    };
+    intl: {
+        locale: string;
+    };
+    userSession: {
+        token: string | null;
+    };
 }
+export declare const __test: {
+    renderCounter: () => void;
+};
+export declare function getUrl(props: UniversalLinkProps, token: string | null, item: UniversalLinkProps['item'], children: React.ReactNode): string;
+declare const UniversalLink: React.MemoExoticComponent<React.ForwardRefExoticComponent<UniversalLinkProps & React.RefAttributes<HTMLAnchorElement | HTMLDivElement>>>;
+export default UniversalLink;

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

@@ -0,0 +1,33 @@
+export declare const AlignWidget: any;
+export declare const ButtonsWidget: any;
+export declare const ArrayWidget: any;
+export declare const CheckboxWidget: any;
+export declare const FileWidget: any;
+export declare const IdWidget: any;
+export declare const PasswordWidget: any;
+export declare const QueryWidget: any;
+export declare const QuerySortOnWidget: any;
+export declare const QuerystringWidget: any;
+export declare const SchemaWidget: any;
+export declare const SelectWidget: any;
+export declare const TextareaWidget: any;
+export declare const TextWidget: any;
+export declare const TokenWidget: any;
+export declare const WysiwygWidget: any;
+export declare const UrlWidget: any;
+export declare const InternalUrlWidget: any;
+export declare const EmailWidget: any;
+export declare const NumberWidget: any;
+export declare const ImageSizeWidget: any;
+export declare const RegistryImageWidget: any;
+export declare const ReferenceWidget: any;
+export declare const ObjectBrowserWidget: any;
+export declare const ObjectWidget: any;
+export declare const ObjectListWidget: any;
+export declare const VocabularyTermsWidget: any;
+export declare const SelectMetadataWidget: any;
+export declare const SelectAutoComplete: any;
+export declare const ColorPickerWidget: any;
+export declare const DatetimeWidget: any;
+export declare const RecurrenceWidget: any;
+export declare const FormFieldWrapper: any;

package/types/helpers/Loadable/__mocks__/Loadable.vitest.d.ts

@@ -0,0 +1,3 @@
+export function __setLoadables(): Promise<void>;
+export const injectLazyLibs: any;
+export const preloadLazyLibs: any;

package/types/react-router-hash-link.d.ts

@@ -0,0 +1,12 @@
+declare module 'react-router-hash-link' {
+  import { ComponentType } from 'react';
+  import { NavLinkProps } from 'react-router-dom';
+
+  interface HashLinkProps extends NavLinkProps {
+    smooth?: boolean;
+    scroll?: (element: HTMLElement) => void;
+  }
+
+  export const HashLink: ComponentType<HashLinkProps>;
+  export const NavHashLink: ComponentType<HashLinkProps>;
+}

package/types/routes.d.ts

@@ -39,6 +39,10 @@ declare const routes: {
     path: string;
     component: any;
     routes: ({
+        path: string;
+        component: React.ComponentType;
+        exact?: boolean;
+    } | {
         path: string;
         component: any;
         exact?: undefined;

package/types/server.d.ts

@@ -1,3 +1,3 @@
-export function defaultReadCriticalCss(): any;
+export function defaultReadCriticalCss(): string;
 export default server;
 declare const server: any;

package/vite-plugins/svg.mjs

@@ -0,0 +1,81 @@
+import { promises as fs } from 'fs';
+import { optimize as optimizeSvg } from 'svgo';
+import _debug from 'debug';
+
+const debug = _debug('volto-vite-svg-loader');
+
+export function svgLoader(options = {}) {
+  const { svgoConfig, svgo, defaultImport } = options;
+
+  const svgRegex = /icons\/.*\.svg(\?(raw|skipsvgo))?$/;
+
+  return {
+    name: 'svg-loader',
+    enforce: 'pre',
+
+    async load(id) {
+      if (!id.match(svgRegex)) {
+        return;
+      }
+
+      debug('\n', `Processing: ${id}.`);
+
+      const [path, query] = id.split('?', 2);
+      const importType = query || defaultImport;
+
+      if (importType === 'url') {
+        return; // Use default svg loader
+      }
+
+      let content;
+      try {
+        content = await fs.readFile(path, 'utf-8');
+      } catch (ex) {
+        debug(
+          '\n',
+          `${id} couldn't be loaded by vite-svg-loader, fallback to default loader`,
+        );
+
+        return;
+      }
+
+      if (importType === 'raw') {
+        return `export default ${JSON.stringify(content)}`;
+      }
+
+      if (svgo !== false && query !== 'skipsvgo') {
+        content = optimizeSvg(content, {
+          ...svgoConfig,
+          path,
+        }).data;
+      }
+
+      const match = content.match(/<svg([^>]+)+>([\s\S]+)<\/svg>/i);
+      let attrs = {};
+
+      if (match) {
+        attrs = match[1];
+        if (attrs) {
+          attrs = attrs
+            .match(/([\w-:]+)(=)?("[^<>"]*"|'[^<>']*'|[\w-:]+)/g)
+            .reduce(function (obj, attr) {
+              var split = attr.split('=');
+              var name = split[0];
+              var value = true;
+              if (split && split[1]) {
+                value = split[1].replace(/['"]/g, '');
+              }
+              obj[name] = value;
+              return obj;
+            }, {});
+        }
+
+        content = match[2] || '';
+      }
+
+      content = content.replace(/\n/g, ' ').trim();
+
+      return `export default ${JSON.stringify({ attributes: attrs, content: content })}`;
+    },
+  };
+}

package/vitest.config.mjs

@@ -0,0 +1,77 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import { svgLoader } from './vite-plugins/svg.mjs';
+import { fileURLToPath } from 'url';
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const projectRoot = path.resolve(__dirname);
+
+export default defineConfig({
+  plugins: [
+    react(),
+    svgLoader({
+      svgoConfig: {
+        plugins: [
+          {
+            name: 'preset-default',
+            params: {
+              overrides: {
+                convertPathData: false,
+                removeViewBox: false,
+              },
+            },
+          },
+          'removeTitle',
+          'removeUselessStrokeAndFill',
+        ],
+      },
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@plone/volto': path.resolve(__dirname, 'src'),
+      '@plone/volto-slate': path.resolve(__dirname, '../volto-slate/src'),
+      '@root': path.resolve(__dirname, 'src'),
+      'promise-file-reader': require.resolve('promise-file-reader'),
+      'react-dropzone': require.resolve('react-dropzone'),
+      'prop-types': require.resolve('prop-types'),
+    },
+  },
+  test: {
+    isolate: true,
+    deps: {
+      moduleDirectories: ['node_modules'],
+    },
+    snapshotFormat: { printBasicPrototype: false },
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: [
+      `${projectRoot}/test-setup-globals-vitest.js`,
+      `${projectRoot}/test-setup-config.jsx`,
+      `${projectRoot}/jest-setup-afterenv.js`,
+      `${projectRoot}/jest-addons-loader.js`,
+    ],
+    globalSetup: `${projectRoot}/global-test-setup.js`,
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      include: [
+        'src/**/*.{test,spec}.{js,ts,jsx,tsx}',
+        '__test__/**/*.{test,spec}.{js,ts,jsx,tsx}',
+      ],
+      exclude: [
+        'node_modules/**',
+        '**/dist/**',
+        '**/*.config.{js,ts}',
+        '**/jest-*.js',
+      ],
+    },
+    css: true,
+  },
+});

package/src/components/manage/ConditionalLink/ConditionalLink.jsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
-import PropTypes from 'prop-types';
-
-const ConditionalLink = ({ condition, to, item, ...props }) => {
-  if (condition) {
-    return (
-      <UniversalLink href={to} item={item} {...props}>
-        {props.children}
-      </UniversalLink>
-    );
-  } else {
-    return <>{props.children}</>;
-  }
-};
-
-ConditionalLink.propTypes = {
-  condition: PropTypes.bool,
-  to: PropTypes.string,
-  item: PropTypes.shape({
-    '@id': PropTypes.string,
-    remoteUrl: PropTypes.string, //of plone @type 'Link'
-  }),
-  children: PropTypes.node,
-};
-
-export default ConditionalLink;

package/src/components/manage/ConditionalLink/ConditionalLink.test.jsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import { MemoryRouter } from 'react-router-dom';
-
-import ConditionalLink from './ConditionalLink';
-
-describe('ConditionalLink', () => {
-  it('renders a ConditionalLink component not link', () => {
-    const component = renderer.create(
-      <MemoryRouter>
-        <ConditionalLink>
-          <h1>Title</h1>
-        </ConditionalLink>
-      </MemoryRouter>,
-    );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
-  });
-  it('renders a ConditionalLink component with link', () => {
-    const component = renderer.create(
-      <MemoryRouter>
-        <ConditionalLink isLink>
-          <h1>Title</h1>
-        </ConditionalLink>
-      </MemoryRouter>,
-    );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
-  });
-});

package/src/components/manage/MaybeWrap/MaybeWrap.jsx

@@ -1,9 +0,0 @@
-import React from 'react';
-
-export default function MaybeWrap({
-  condition,
-  as: Component = 'div',
-  ...props
-}) {
-  return condition ? <Component {...props} /> : props.children;
-}

package/src/components/manage/UniversalLink/UniversalLink.jsx

@@ -1,154 +0,0 @@
-/*
- * UniversalLink
- * @module components/UniversalLink
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { HashLink as Link } from 'react-router-hash-link';
-import { useSelector } from 'react-redux';
-import {
-  flattenToAppURL,
-  isInternalURL,
-  URLUtils,
-} from '@plone/volto/helpers/Url/Url';
-
-import config from '@plone/volto/registry';
-import cx from 'classnames';
-
-const UniversalLink = ({
-  href,
-  item = null,
-  openLinkInNewTab,
-  download = false,
-  children,
-  className = null,
-  title = null,
-  ...props
-}) => {
-  const token = useSelector((state) => state.userSession?.token);
-
-  let url = href;
-  if (!href && item) {
-    if (item['@id'] === '') {
-      url = config.settings.publicURL;
-    } else if (!item['@id']) {
-      // eslint-disable-next-line no-console
-      console.error(
-        'Invalid item passed to UniversalLink',
-        item,
-        props,
-        children,
-      );
-      url = '#';
-    } else {
-      //case: generic item
-      url = flattenToAppURL(item['@id']);
-
-      //case: item like a Link
-      let remoteUrl = item.remoteUrl || item.getRemoteUrl;
-      if (!token && remoteUrl) {
-        url = remoteUrl;
-      }
-
-      //case: item of type 'File'
-      if (
-        !token &&
-        config.settings.downloadableObjects.includes(item['@type'])
-      ) {
-        url = `${url}/@@download/file`;
-      }
-
-      if (
-        !token &&
-        config.settings.viewableInBrowserObjects.includes(item['@type'])
-      ) {
-        url = `${url}/@@display-file/file`;
-      }
-    }
-  }
-
-  const isExternal = !isInternalURL(url);
-
-  const isDownload = (!isExternal && url.includes('@@download')) || download;
-  const isDisplayFile =
-    (!isExternal && url.includes('@@display-file')) || false;
-
-  const checkedURL = URLUtils.checkAndNormalizeUrl(url);
-
-  url = checkedURL.url;
-  let tag = (
-    <Link
-      to={flattenToAppURL(url)}
-      target={openLinkInNewTab ?? false ? '_blank' : null}
-      title={title}
-      className={className}
-      smooth={config.settings.hashLinkSmoothScroll}
-      {...props}
-    >
-      {children}
-    </Link>
-  );
-
-  if (isExternal) {
-    const isTelephoneOrMail = checkedURL.isMail || checkedURL.isTelephone;
-    tag = (
-      <a
-        href={url}
-        title={title}
-        target={
-          !isTelephoneOrMail && !(openLinkInNewTab === false) ? '_blank' : null
-        }
-        rel="noopener noreferrer"
-        className={cx({ external: !isTelephoneOrMail }, className)}
-        {...props}
-      >
-        {children}
-      </a>
-    );
-  } else if (isDownload) {
-    tag = (
-      <a
-        href={flattenToAppURL(url)}
-        download
-        title={title}
-        className={className}
-        {...props}
-      >
-        {children}
-      </a>
-    );
-  } else if (isDisplayFile) {
-    tag = (
-      <a
-        href={flattenToAppURL(url)}
-        title={title}
-        target="_blank"
-        rel="noopener noreferrer"
-        className={className}
-        {...props}
-      >
-        {children}
-      </a>
-    );
-  }
-  return tag;
-};
-
-UniversalLink.propTypes = {
-  href: PropTypes.string,
-  openLinkInNewTab: PropTypes.bool,
-  download: PropTypes.bool,
-  className: PropTypes.string,
-  title: PropTypes.string,
-  item: PropTypes.shape({
-    '@id': PropTypes.string.isRequired,
-    remoteUrl: PropTypes.string, //of plone @type 'Link'
-  }),
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]),
-};
-
-export default UniversalLink;

package/src/components/manage/Widgets/FileWidget.test.jsx

@@ -1,91 +0,0 @@
-import React from 'react';
-import { Provider } from 'react-intl-redux';
-import { render, waitFor } from '@testing-library/react';
-import configureStore from 'redux-mock-store';
-
-import FileWidget from './FileWidget';
-
-jest.spyOn(global.Date, 'now').mockImplementation(() => '0');
-
-const mockStore = configureStore();
-
-describe('FileWidget', () => {
-  test('renders an empty file widget component', async () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
-
-    const { container } = render(
-      <Provider store={store}>
-        <FileWidget
-          id="my-field"
-          title="My field"
-          fieldSet="default"
-          onChange={() => {}}
-        />
-      </Provider>,
-    );
-
-    await waitFor(() => {});
-    expect(container).toMatchSnapshot();
-  });
-  test('renders a file widget component with value', async () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
-
-    const { container } = render(
-      <Provider store={store}>
-        <FileWidget
-          id="my-field"
-          title="My field"
-          fieldSet="default"
-          onChange={() => {}}
-          value={{
-            download: 'http://myfile',
-            'content-type': 'image/png',
-            filename: 'myfile',
-            encoding: '',
-          }}
-        />
-      </Provider>,
-    );
-
-    await waitFor(() => {});
-    expect(container).toMatchSnapshot();
-  });
-  test('renders a file widget component with value in raw data', async () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
-
-    const { container } = render(
-      <Provider store={store}>
-        <FileWidget
-          id="my-field"
-          title="My field"
-          fieldSet="default"
-          onChange={() => {}}
-          value={{
-            data: 'oiweurtksdgfjaslfqw9523563456',
-            'content-type': 'image/png',
-            filename: 'myfile',
-            encoding: 'base64',
-          }}
-        />
-      </Provider>,
-    );
-
-    await waitFor(() => {});
-    expect(container).toMatchSnapshot();
-  });
-});