Merge branch 'main' into Node22asLTS

* main: (37 commits) Release generate-volto 9.0.0-alpha.19 Release @plone/providers 1.0.0-alpha.3 Release @plone/components 2.0.0-alpha.16 Release @plone/client 1.0.0-alpha.19 Release @plone/types 1.0.0-alpha.21 Some types improvements/fixes (#6412) [providers] Improve and group providers (#6069) Adjust the path to perform a proper `git diff` between the cached and… (#6410) Test whether commenting out the `ignore` command has any affect on the Netlify build. support depth in getNavigationQuery (#6400) Update caniuse Oct24 (#6408) Upgraded nextjs deps and configuration (#6388) Update `typescript` and `vitest` everywhere (#6407) Remove all traces of Jest 24 in core (#6406) Release @plone/components 2.0.0-alpha.15 [components] Fix Select component logic to support `items` use case (#6405) Fix clean make command (#6403) Release 18.0.0-alpha.46 Release @plone/components 2.0.0-alpha.14 Add missing export for new components (#6391) ...
plone · Oct 18, 2024 · 0158b85 · 0158b85
2 parents 4c1433b + 3371c84
commit 0158b85
Show file tree

Hide file tree

Showing 123 changed files with 3,646 additions and 6,796 deletions.
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
@@ -10,6 +10,9 @@ on:
     paths:
       - 'docs/**'
       - 'styles/**'
+      - '.github/workflows/docs.yml'
+      - 'requirements-docs.txt'
+      - '.vale.ini'
 
 jobs:
   docs:
@@ -32,9 +35,7 @@ jobs:
         run: pip install virtualenv
 
       - name: pip install requirements
-        run: |
-          pip install -r requirements-docs.txt
-          sudo snap install --edge vale
+        run: pip install -r requirements-docs.txt
 
       - name: Check for broken links
         run: make docs-linkcheckbroken
@@ -43,7 +44,4 @@ jobs:
         run: make docs-html
 
       - name: Run vale
-        run: |
-          git clone https://github.com/errata-ai/Microsoft.git
-          cp -r ./Microsoft/Microsoft ./styles
-          vale --no-exit ./docs
+        run: make docs-vale VALEOPTS=--no-exit
diff --git a/Makefile b/Makefile
@@ -16,6 +16,7 @@ include variables.mk
 # Sphinx variables
 # You can set these variables from the command line.
 SPHINXOPTS      ?=
+VALEOPTS        ?=
 # Internal variables.
 SPHINXBUILD     = "$(realpath bin/sphinx-build)"
 SPHINXAUTOBUILD = "$(realpath bin/sphinx-autobuild)"
@@ -66,7 +67,7 @@ test: ## Run unit tests
 .PHONY: clean
 clean: ## Clean development environment
 	rm -rf node_modules
-	find ./packages -name node_modules -exec rm -rf {} \;
+	find ./packages -name node_modules -not -path "./packages/volto/__tests__/*" -exec rm -rf {} \;
 
 .PHONY: install
 install: ## Set up development environment
@@ -120,7 +121,7 @@ docs-linkcheckbroken: bin/python docs-news  ## Run linkcheck and show only broke
 .PHONY: docs-vale
 docs-vale: bin/python docs-news  ## Install (once) and run Vale style, grammar, and spell checks
 	bin/vale sync
-	bin/vale --no-wrap $(VALEFILES)
+	bin/vale --no-wrap $(VALEOPTS) $(VALEFILES)
 	@echo
 	@echo "Vale is finished; look for any errors in the above output."
 

diff --git a/apps/nextjs/.eslintrc.js b/apps/nextjs/.eslintrc.js
diff --git a/apps/nextjs/.eslintrc.json b/apps/nextjs/.eslintrc.json
@@ -0,0 +1,9 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"],
+  "ignorePatterns": [".next/**", "dist/**", "node_modules/**"],
+  "settings": {
+    "next": {
+      "rootDir": "apps/nextjs/"
+    }
+  }
+}
diff --git a/apps/nextjs/.gitignore b/apps/nextjs/.gitignore
@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

diff --git a/apps/nextjs/LICENSE b/apps/nextjs/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Plone Foundation
+Copyright (c) 2024 Plone Foundation
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/apps/nextjs/README.md b/apps/nextjs/README.md
@@ -2,6 +2,11 @@
 
 This is a proof of concept of a [Next.js](https://nextjs.org) app, using the app router and the `@plone/client` and `@plone/components` library. This is intended to serve as both a playground for the development of both packages and as demo of Plone using Next.js.
 
+> [!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:

diff --git a/apps/nextjs/next.config.js → apps/nextjs/next.config.mjs b/apps/nextjs/next.config.js → apps/nextjs/next.config.mjs
@@ -1,7 +1,10 @@
-const path = require('path');
+import path from 'path';
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  typescript: {
+    ignoreBuildErrors: true,
+  },
   // sassOptions: {
   //   includePaths: [path.join(__dirname, 'src/lib/components/src/styles')],
   // },
@@ -46,4 +49,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+export default nextConfig;
diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json
@@ -13,21 +13,22 @@
     "@plone/blocks": "workspace: *",
     "@plone/client": "workspace: *",
     "@plone/components": "workspace: *",
-    "@plone/registry": "workspace: *",
     "@plone/providers": "workspace: *",
-    "@tanstack/react-query": "^5.37.1",
-    "next": "14.2.2",
+    "@plone/registry": "workspace: *",
+    "@tanstack/react-query": "^5.59.0",
+    "next": "14.2.14",
     "react": "^18",
-    "react-aria-components": "^1.1.1",
+    "react-aria-components": "^1.4.0",
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@tanstack/react-query-devtools": "^5.37.1",
+    "@plone/types": "workspace: *",
+    "@tanstack/react-query-devtools": "^5.59.0",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "14.2.2",
-    "typescript": "^5.4.5"
+    "eslint-config-next": "14.2.14",
+    "typescript": "^5.6.3"
   }
 }
diff --git a/apps/nextjs/src/app/Providers.tsx b/apps/nextjs/src/app/Providers.tsx
@@ -1,15 +1,32 @@
 'use client';
 import React from 'react';
-import { useRouter } from 'next/navigation';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { PloneClientProvider } from '@plone/providers';
+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 { RouterProvider } from 'react-aria-components';
-import { FlattenToAppURLProvider } from '@plone/components';
 import { flattenToAppURL } from './utils';
 import config from './config';
 
+// Custom hook to unify the location object between NextJS and Plone
+function useLocation() {
+  const pathname = usePathname();
+  const 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 }) => {
@@ -36,19 +53,25 @@ const Providers: React.FC<{
     }),
   );
 
-  let router = useRouter();
+  const router = useRouter();
 
   return (
-    <RouterProvider navigate={router.push}>
-      <PloneClientProvider client={ploneClient}>
-        <QueryClientProvider client={queryClient}>
-          <FlattenToAppURLProvider flattenToAppURL={flattenToAppURL}>
-            {children}
-            <ReactQueryDevtools initialIsOpen={false} />
-          </FlattenToAppURLProvider>
-        </QueryClientProvider>
-      </PloneClientProvider>
-    </RouterProvider>
+    <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>
   );
 };
 

diff --git a/apps/nextjs/src/app/config.ts b/apps/nextjs/src/app/config.ts
@@ -1,12 +1,19 @@
+import config from '@plone/registry';
+import { slate } from '@plone/blocks';
+import { blocksConfig } from '@plone/blocks';
+
 const settings = {
   apiPath: process.env.NEXT_PUBLIC_VERCEL_URL
     ? // Vercel does not prepend the schema to the NEXT_PUBLIC_VERCEL_URL automatic env var
       `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
     : 'http://localhost:3000',
+  slate,
 };
 
-const config = {
-  settings,
-};
+// @ts-expect-error Improve typings
+config.set('settings', settings);
+
+// @ts-expect-error Improve typings
+config.set('blocks', { blocksConfig });
 
 export default config;
diff --git a/apps/nextjs/src/app/content.tsx b/apps/nextjs/src/app/content.tsx
@@ -1,46 +1,30 @@
 'use client';
-
 import { useQuery } from '@tanstack/react-query';
 import { usePathname } from 'next/navigation';
-import Link from 'next/link';
-import { flattenToAppURL } from './utils';
 import { usePloneClient } from '@plone/providers';
-import { Breadcrumbs } from '@plone/components';
+import { Breadcrumbs, RenderBlocks } from '@plone/components';
+import config from '@plone/registry';
+
 import '@plone/components/dist/basic.css';
 
 export default function Content() {
   const { getContentQuery } = usePloneClient();
   const pathname = usePathname();
-  const { data, isLoading } = useQuery(getContentQuery({ path: pathname }));
+  const { data } = useQuery(getContentQuery({ path: pathname }));
 
   if (data) {
     return (
       <div style={{ fontSize: '20px' }}>
-        <h1>{data.title}</h1>
-        {/* <Input
-          name="field1"
-          title="field 1 title"
-          placeholder="Type something…"
-          description="Optional help text"
-          isRequired
-        /> */}
         <Breadcrumbs
           items={data['@components'].breadcrumbs.items || []}
           root={data['@components'].breadcrumbs.root}
           includeRoot
         />
-        <ul>
-          {data?.['@components']?.navigation?.items?.map((item) => (
-            <li key={item['@id']}>
-              <Link href={flattenToAppURL(item['@id'])}>
-                {flattenToAppURL(item['@id'])}
-              </Link>
-            </li>
-          ))}
-        </ul>
-        <div>
-          <pre>{JSON.stringify(data, null, 2)}</pre>
-        </div>
+        <RenderBlocks
+          content={data}
+          blocksConfig={config.blocks.blocksConfig}
+          pathname={pathname}
+        />
       </div>
     );
   }

diff --git a/apps/nextjs/src/app/layout.tsx b/apps/nextjs/src/app/layout.tsx
@@ -5,7 +5,7 @@ import Providers from './Providers';
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: 'NextJS-powered Plone',
+  title: 'Next.js app powered by Plone',
   description: '',
 };
 

diff --git a/apps/nextjs/src/middleware.ts b/apps/nextjs/src/middleware.ts
@@ -2,10 +2,7 @@ import { NextResponse } from 'next/server';
 import type { NextRequest } from 'next/server';
 
 export function middleware(request: NextRequest) {
-  // Clone the request headers and set a new header `x-hello-from-middleware1`
   const requestHeaders = new Headers(request.headers);
-  // console.log(request.nextUrl.pathname);
-  // requestHeaders.set('x-hello-from-middleware1', 'hello');
 
   // You can also set request headers in NextResponse.rewrite
   const response = NextResponse.next({

diff --git a/apps/nextjs/tsconfig.json b/apps/nextjs/tsconfig.json
@@ -1,38 +1,34 @@
 {
-    "compilerOptions": {
-        "target": "es5",
-        "lib": [
-            "dom",
-            "dom.iterable",
-            "esnext"
-        ],
-        "allowJs": true,
-        "skipLibCheck": true,
-        "strict": true,
-        "forceConsistentCasingInFileNames": true,
-        "noEmit": true,
-        "esModuleInterop": true,
-        "module": "esnext",
-        "moduleResolution": "bundler",
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "jsx": "preserve",
-        "incremental": true,
-        "plugins": [
-            {
-                "name": "next"
-            }
-        ]
-    },
-    "include": [
-        "next-env.d.ts",
-        "**/*.ts",
-        "**/*.tsx",
-        "**/*.js",
-        "**/*.jx",
-        ".next/types/**/*.ts"
+  "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
     ],
-    "exclude": [
-        "node_modules",
-    ]
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.js",
+    "**/*.jsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
 }