Merge branch 'main' into visually-hidden-utility-class

.eslintrc.cjs

@@ -56,6 +56,7 @@ const config = {
       ],
       rules: {
         '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/ban-ts-comment': 0,
       },
     },
     {

.gitignore

@@ -72,6 +72,4 @@ docs/_build/
 /.tool-versions
 docs/source/news
 
-.turbo
-.parcel-cache/
 tsconfig.tsbuildinfo

.npmrc

@@ -3,4 +3,3 @@ public-hoist-pattern[]=*prettier*
 public-hoist-pattern[]=*stylelint*
 public-hoist-pattern[]=*cypress*
 public-hoist-pattern[]=*process*
-public-hoist-pattern[]=*parcel*

PACKAGES.md

@@ -17,9 +17,9 @@ It's published "as is", so you can import the type definitions from anywhere in
 
 ## Core packages
 
--   `@plone/registry`
 -   `@plone/client`
 -   `@plone/components`
+-   `@plone/registry`
 
 
 ### Rules
@@ -28,34 +28,45 @@ Core packages must not depend on any other `@plone/*` package, with only one exc
 They must be published and bundled in a traditional (transpiled) way.
 The bundle of these packages must work on both CommonJS and ECMAScript Module (ESM) environments.
 
-## Feature packages
-
--   `@plone/contents`
-
 
 ## Utility packages
 
--   `@plone/blocks`
--   `@plone/helpers`
 -   `@plone/drivers`
+-   `@plone/helpers`
+-   `@plone/providers`
 -   `@plone/rsc`
 
 
 ### Rules
 
 Utility packages can depend on core packages and other utility packages.
-They must be published in a traditional way, bundled.
+They must be published in the traditional way, as a bundle.
 This bundle must work on both CommonJS and ESM environments.
 
 
+## Feature packages
+
+-   `@plone/blocks`
+-   `@plone/contents`
+-   `@plone/slots`
+
+
+### Rules
+
+Feature packages, or add-on packages, can depend on any other package.
+You must distribute them as source code, and not transpile them.
+They must provide a default configuration registry loader as the default main entry point export.
+They must be loadable as any other add-on.
+
+
 ## Development utility packages
 
 These are packages that are not bundled, and they are used in conjunction with Volto core or Volto projects.
 They contain utilities that are useful for the development of a Volto project.
 Some of them are released:
 
 - `@plone/scripts`
-- `@plone/generator-volto`
+- `@plone/generator-volto` (deprecated)
 
 Some of them are used by the build, and separated in packages for convenience.
 

RELEASING.md

@@ -44,13 +44,15 @@ The release process calls `towncrier`.
 It is a Python library that uses the Python utility `pipx`.
 This utility allows you to call and execute Python modules without installing them as a prerequisite in your system.
 It works similar to the NodeJS `npx` utility.
-On macOS, you can install `pipx` into your system:
+
+Install {term}`pipx` for your active Python, and ensure it is on your `$PATH`.
+Carefully read the console output for further instructions, if needed.
 
 ```shell
-brew install pipx
+python3 -m pip install pipx
+pipx ensurepath
 ```
 
-Or follow detailed instructions in the `pipx` documentation for [Installation](https://pypa.github.io/pipx/installation/).
 
 ## Running the release process
 

apps/rr7/.eslintrc.cjs

@@ -0,0 +1,80 @@
+/**
+ * This is intended to be a basic starting point for linting in your app.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+
+  // Base config
+  extends: ['eslint:recommended'],
+
+  overrides: [
+    // React
+    {
+      files: ['**/*.{js,jsx,ts,tsx}'],
+      plugins: ['react', 'jsx-a11y'],
+      extends: [
+        'plugin:react/recommended',
+        'plugin:react/jsx-runtime',
+        'plugin:react-hooks/recommended',
+        'plugin:jsx-a11y/recommended',
+      ],
+      settings: {
+        react: {
+          version: 'detect',
+        },
+        formComponents: ['Form'],
+        linkComponents: [
+          { name: 'Link', linkAttribute: 'to' },
+          { name: 'NavLink', linkAttribute: 'to' },
+        ],
+      },
+    },
+
+    // Typescript
+    {
+      files: ['**/*.{ts,tsx}'],
+      plugins: ['@typescript-eslint', 'import'],
+      parser: '@typescript-eslint/parser',
+      settings: {
+        'import/internal-regex': '^~/',
+        'import/resolver': {
+          node: {
+            extensions: ['.ts', '.tsx'],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        'plugin:@typescript-eslint/recommended',
+        'plugin:import/recommended',
+        'plugin:import/typescript',
+      ],
+    },
+
+    // Node
+    {
+      files: ['.eslintrc.js'],
+      env: {
+        node: true,
+      },
+    },
+  ],
+};

apps/rr7/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+
+/.cache
+/build
+.env
+.react-router
+.registry.loader.js

apps/rr7/README.md

@@ -0,0 +1,30 @@
+# Plone on React Router 7
+
+This is a proof of concept of a [React Router](https://reactrouter.com/dev/docs) app, using the `@plone/*` libraries.
+This is intended to serve as both a playground for the development of both packages and as a demo of Plone using Remix.
+
+> [!WARNING]
+> This package or app is experimental.
+> The community offers no support whatsoever for it.
+> Breaking changes may occur without notice.
+
+## Development
+
+To start, from the root of the monorepo, issue the following commands.
+
+```shell
+pnpm install
+pnpm --filter plone-remix run dev
+```
+
+Then start the Plone backend.
+
+% TODO MAKEFILE
+```shell
+make backend-docker-start
+```
+
+
+## About this app
+
+- [Remix Docs](https://remix.run/docs/en/main)

apps/rr7/app/client.ts

@@ -0,0 +1,8 @@
+import ploneClient from '@plone/client';
+import config from '@plone/registry';
+
+const cli = ploneClient.initialize({
+  apiPath: config.settings.apiPath,
+});
+
+export { cli as ploneClient };

apps/rr7/app/config.ts

@@ -0,0 +1,15 @@
+import config from '@plone/registry';
+import { blocksConfig, slate } from '@plone/blocks';
+
+const settings = {
+  apiPath: 'http://localhost:3000',
+  slate,
+};
+
+// @ts-expect-error We need to fix typing
+config.set('settings', settings);
+
+// @ts-expect-error We need to fix typing
+config.set('blocks', { blocksConfig });
+
+export default config;

apps/rr7/app/root.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useHref,
+  useLocation,
+  useNavigate,
+  useParams,
+} from 'react-router';
+import type { LinksFunction } from 'react-router';
+
+import { QueryClient } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import PloneClient from '@plone/client';
+import { PloneProvider } from '@plone/providers';
+import { flattenToAppURL } from './utils';
+import config from '@plone/registry';
+import './config';
+
+import '@plone/components/dist/basic.css';
+
+function useHrefLocal(to: string) {
+  return useHref(flattenToAppURL(to));
+}
+
+export const links: LinksFunction = () => [
+  { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+  {
+    rel: 'preconnect',
+    href: 'https://fonts.gstatic.com',
+    crossOrigin: 'anonymous',
+  },
+  {
+    rel: 'stylesheet',
+    href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+  },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            // With SSR, we usually want to set some default staleTime
+            // above 0 to avoid refetching immediately on the client
+            staleTime: 60 * 1000,
+          },
+        },
+      }),
+  );
+
+  const [ploneClient] = useState(() =>
+    PloneClient.initialize({
+      apiPath: config.settings.apiPath,
+    }),
+  );
+
+  const RRNavigate = useNavigate();
+  const navigate = (to: string) => {
+    return RRNavigate(flattenToAppURL(to));
+  };
+
+  return (
+    <PloneProvider
+      ploneClient={ploneClient}
+      queryClient={queryClient}
+      useLocation={useLocation}
+      useParams={useParams}
+      useHref={useHrefLocal}
+      navigate={navigate}
+    >
+      <Outlet />
+      <ReactQueryDevtools initialIsOpen={false} />
+    </PloneProvider>
+  );
+}

apps/rr7/app/routes.ts

@@ -0,0 +1,7 @@
+import type { RouteConfig } from '@react-router/dev/routes';
+import { index, route } from '@react-router/dev/routes';
+
+export const routes: RouteConfig = [
+  index('routes/home.tsx'),
+  route('*', 'routes/$.tsx'),
+];

apps/rr7/app/routes/$.tsx

@@ -0,0 +1,2 @@
+import Content, { loader } from './home';
+export { loader, Content as default };