Initial push of the Plone 7 base package

.github/workflows/changelog.yml

@@ -49,7 +49,7 @@ jobs:
             theming:
               - 'packages/theming/**'
             plone7:
-              - 'packages/revolto/**'
+              - 'packages/voltotng/**'
             wrongNews:
               - added|modified: 'news/**'
 
@@ -156,7 +156,7 @@ jobs:
         if: steps.filter.outputs.plone7 == 'true'
         run: |
           git fetch --no-tags origin main
-          towncrier check --compare-with origin/main --dir packages/revolto
+          towncrier check --compare-with origin/main --dir packages/voltotng
         env:
           BASE_BRANCH: ${{ github.base_ref }}
 

package.json

@@ -6,7 +6,7 @@
     "watch": "pnpm --filter @plone/registry --filter @plone/client --filter @plone/components --filter @plone/providers watch",
     "build:deps": "pnpm --filter @plone/registry build",
     "build:all": "pnpm --filter @plone/registry --filter @plone/client --filter @plone/components --filter @plone/providers build",
-    "build:all:force": "pnpm --filter @plone/registry --filter @plone/client --filter @plone/components --filter @plone/providers build:force",
+    "build:all:force": "pnpm --filter @plone/registry --filter @plone/client --filter @plone/components --filter @plone/providers --filter @plone/react-router build:force",
     "build:registry": "pnpm --filter @plone/registry run build",
     "build:components": "pnpm --filter @plone/components run build",
     "build": "pnpm --filter @plone/volto build",

packages/react-router/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

packages/react-router/.npmignore

@@ -0,0 +1,6 @@
+news
+towncrier.toml
+.changelog.draft
+node_modules/
+.release-it.json
+.eslintrc.js

packages/react-router/.release-it.json

@@ -0,0 +1,28 @@
+{
+  "plugins": {
+    "../scripts/prepublish.js": {}
+  },
+  "hooks": {
+    "after:bump": [
+      "pipx run towncrier build --draft --yes --version ${version} > .changelog.draft && pipx run towncrier build --yes --version ${version}",
+      "pnpm build:force"
+    ],
+    "after:release": "rm .changelog.draft"
+  },
+  "npm": {
+    "publish": false
+  },
+  "git": {
+    "changelog": "pipx run towncrier build --draft --yes --version 0.0.0",
+    "requireUpstream": false,
+    "requireCleanWorkingDir": false,
+    "commitMessage": "Release @plone/react-router ${version}",
+    "tagName": "plone-react-router-${version}",
+    "tagAnnotation": "Release @plone/react-router ${version}"
+  },
+  "github": {
+    "release": true,
+    "releaseName": "@plone/react-router ${version}",
+    "releaseNotes": "cat .changelog.draft"
+  }
+}

packages/react-router/CHANGELOG.md

@@ -0,0 +1,59 @@
+# @plone/providers Release Notes
+
+<!-- Do *NOT* add new change log entries to this file.
+     You should create a file in the news directory instead.
+     For helpful instructions, please see:
+     https://6.docs.plone.org/contributing/index.html#contributing-change-log-label
+-->
+
+<!-- towncrier release notes start -->
+
+## 1.0.0-alpha.6 (2024-11-21)
+
+### Feature
+
+- Update RAC to 1.5.0 @sneridagh [#6498](https://github.com/plone/volto/issues/6498)
+
+## 1.0.0-alpha.5 (2024-11-05)
+
+### Internal
+
+- Improve packaging. @sneridagh 
+
+## 1.0.0-alpha.4 (2024-11-05)
+
+### Internal
+
+- Bump local `typescript` version. @sneridagh [#6461](https://github.com/plone/volto/issues/6461)
+- Replace `parcel` with `tsup`. Better types, better tsconfig. Move to ESM. @sneridagh [#6468](https://github.com/plone/volto/issues/6468)
+
+## 1.0.0-alpha.3 (2024-10-18)
+
+## 1.0.0-alpha.2 (2024-10-18)
+
+### Breaking
+
+- Improve and group providers. @sneridagh
+  Breaking:
+    - The interface of the providers has changed. Please check the new one, and adapt your apps accordingly. [#6069](https://github.com/plone/volto/issues/6069)
+
+### Internal
+
+- Update typescript and vitest everywhere @sneridagh [#6407](https://github.com/plone/volto/issues/6407)
+
+## 1.0.0-alpha.1 (2024-05-23)
+
+### Internal
+
+- Cleanup imports in RouterLocation provider @pnicolli [#6029](https://github.com/plone/volto/issues/6029)
+
+## 1.0.0-alpha.0 (2024-05-13)
+
+### Feature
+
+- Initial implementation @sneridagh [#5887](https://github.com/plone/volto/issues/5887)
+
+### Internal
+
+- Improvements to the monorepo setup with utilities, especially ESLint. Build cached option to speedup operations. @sneridagh [#5969](https://github.com/plone/volto/issues/5969)
+- Saner defaults for building deps, switch default to cached, add `build:force` command @sneridagh [#5980](https://github.com/plone/volto/issues/5980)

packages/react-router/README.md

@@ -0,0 +1,188 @@
+# `@plone/providers`
+
+This package contains utility providers for Plone React components.
+The main purpose is to provide dependency injection of common required artifacts needed by any app.
+These artifacts include:
+- Router related
+- Plone Client
+- URL handling methods
+
+> [!WARNING]
+> This package or app is experimental.
+> The community offers no support whatsoever for it.
+> Breaking changes may occur without notice.
+
+## `PloneProvider`
+
+It provides all the necessary artifacts that an app can need grouped in a single provider.
+
+```ts
+interface PloneProvider {
+  ploneClient: InstanceType<typeof PloneClient>;
+  queryClient: QueryClient;
+  useLocation: () => Location | undefined;
+  useParams: (opts?: any) => Record<string, string>;
+  navigate: (path: string) => void;
+  useHref: (to: string, options?: any) => string;
+  flattenToAppURL: (path: string | undefined) => string | undefined;
+}
+```
+
+It should be instantiated at the top of your app.
+You have to provide the required props depending on the framework and the router used.
+This is the example for a Next.js app.
+Please refer to the {file}`apps` folder of the Volto repository for more examples of the usage of `PloneProvider` in different React frameworks.
+
+```tsx
+'use client';
+import React from 'react';
+import {
+  useRouter,
+  usePathname,
+  useSearchParams,
+  useParams,
+} from 'next/navigation';
+import { QueryClient } from '@tanstack/react-query';
+import { PloneProvider } from '@plone/providers';
+import PloneClient from '@plone/client';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { flattenToAppURL } from './utils';
+import config from './config';
+
+// Custom hook to unify the location object between NextJS and Plone
+function useLocation() {
+  let pathname = usePathname();
+  let search = useSearchParams();
+
+  return {
+    pathname,
+    search,
+    searchStr: '',
+    hash: (typeof window !== 'undefined' && window.location.hash) || '',
+    href: (typeof window !== 'undefined' && window.location.href) || '',
+  };
+}
+
+const Providers: React.FC<{
+  children?: React.ReactNode;
+}> = ({ children }) => {
+  // Creating the clients at the file root level makes the cache shared
+  // between all requests and means _all_ data gets passed to _all_ users.
+  // Besides being bad for performance, this also leaks any sensitive data.
+  // We use this pattern to ensure that every client gets its own clients
+  const [queryClient] = React.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] = React.useState(() =>
+    PloneClient.initialize({
+      apiPath: config.settings.apiPath,
+    }),
+  );
+
+  const router = useRouter();
+
+  return (
+    <PloneProvider
+      ploneClient={ploneClient}
+      queryClient={queryClient}
+      // NextJS doesn't have a useLocation hook, so we need to unify this
+      // in a custom hook
+      useLocation={useLocation}
+      navigate={(to) => {
+        router.push(to);
+      }}
+      useParams={useParams}
+      useHref={(to) => flattenToAppURL(to)}
+      flattenToAppURL={flattenToAppURL}
+    >
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </PloneProvider>
+  );
+};
+
+export default Providers;
+
+```
+
+You can use it anywhere in your app by using the hook `usePloneProvider`.
+
+```tsx
+import { usePloneProvider } from '@plone/providers';
+
+const { ploneClient } = usePloneProvider()
+```
+
+Alternatively, you can use it in any other context property.
+
+```tsx
+const { navigate } = usePloneProvider()
+```
+
+## `PloneClientProvider`
+
+`PloneProvider` in a group of other smaller providers.
+You can also instantiate and use them as standalone providers.
+However, you should do this only if the framework has some limitation on using the bulk `PloneClientProvider`.
+
+The following snippets show its usage.
+First, instantiate the provider.
+
+```ts
+export type PloneClientProviderProps = {
+  client: InstanceType<typeof PloneClient>;
+  queryClient: QueryClient;
+  children?: React.ReactNode;
+};
+```
+
+Second, use its related hook through either of the following examples.
+
+```tsx
+import { usePloneClient } from '@plone/providers';
+
+const client = usePloneClient()
+```
+
+or
+
+```tsx
+const { getContentQuery } = usePloneClient()
+```
+
+## `AppRouterProvider`
+
+This provider is included also in `PloneProvider`.
+You can also instantiate and use it as a standalone provider.
+However, you should do this only if the framework has some limitation on using the bulk `PloneClientProvider`.
+
+The following code example shows its usage.
+
+```ts
+interface AppRouterProps {
+  useLocation: () => Location | undefined;
+  useParams: (opts?: any) => Record<string, string>;
+  navigate: (path: string) => void;
+  useHref?: (to: string, options?: any) => string;
+  flattenToAppURL: (path: string | undefined) => string | undefined;
+  children: ReactNode;
+}
+```
+
+The following code sample shows its related hook.
+
+```tsx
+import { useAppRouter } from '@plone/providers';
+
+const { useLocation } = useAppRouter()
+```

packages/react-router/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@plone/react-router",
+  "description": "Plone React Router integration package",
+  "maintainers": [
+    {
+      "name": "Plone Foundation",
+      "url": "https://plone.org"
+    }
+  ],
+  "funding": "https://github.com/sponsors/plone",
+  "license": "MIT",
+  "version": "0.0.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/plone/volto.git"
+  },
+  "bugs": {
+    "url": "https://github.com/plone/volto/issues"
+  },
+  "homepage": "https://plone.org",
+  "keywords": [
+    "volto",
+    "plone",
+    "plone6",
+    "react",
+    "helpers"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "main": "./dist/index.js",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./dist/index.js",
+      "default": "./dist/index.cjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "build:force": "tsup",
+    "check:exports": "attw --pack .",
+    "test": "vitest",
+    "dry-release": "release-it --dry-run",
+    "release": "release-it",
+    "release-major-alpha": "release-it major --preRelease=alpha",
+    "release-alpha": "release-it --preRelease=alpha"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.16.4",
+    "@plone/types": "workspace:*",
+    "@react-router/dev": "7.1.2",
+    "@types/node": "22.10.7",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "release-it": "17.1.1",
+    "tsconfig": "workspace:*",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3",
+    "vitest": "^2.1.3"
+  }
+}