Merge branch 'main' into plip6321-semanticui-free-cmsui

* main: Fix precedence of the quanta layer by adding a base layer for all the… (#6539) Add monorepo structure to the README (#6542)
plone · Dec 16, 2024 · 22f1e5a · 22f1e5a
2 parents 317253c + e0f106a
commit 22f1e5a
Show file tree

Hide file tree

Showing 12 changed files with 54 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -36,6 +36,30 @@ You can build your own or choose from the community released ones:
 You can try a Volto online demo at [https://demo.plone.org/](https://demo.plone.org/).
 
 
+## Monorepo structure
+
+Since version 18.0.0-alpha4, the Volto core repository has had the shape of a monorepo, where "mono" means "single" and "repo" is short for "repository".
+This means that several apps and libraries related to each other are stored in the same repository.
+They are managed together but released individually.
+This allows the code to be shared effectively, and unifies tracking of changes across all of the apps and libraries.
+
+| Package | Location |
+|---|---|
+| [`@plone/client`](https://www.npmjs.com/package/@plone/client) | [`packages/client`](https://github.com/plone/volto/tree/main/packages/client#readme) |
+| [`@plone/components`](https://www.npmjs.com/package/@plone/components) | [`packages/components`](https://github.com/plone/volto/tree/main/packages/components#readme) |
+| [`@plone/generator-volto`](https://www.npmjs.com/package/@plone/generator-volto) | [`packages/generator-volto`](https://github.com/plone/volto/tree/main/packages/generator-volto#readme) |
+| [`@plone/helpers`](https://www.npmjs.com/package/@plone/helpers) | [`packages/helpers`](https://github.com/plone/volto/tree/main/packages/helpers#readme) |
+| [`@plone/providers`](https://www.npmjs.com/package/@plone/providers) | [`packages/providers`](https://github.com/plone/volto/tree/main/packages/providers#readme) |
+| [`@plone/registry`](https://www.npmjs.com/package/@plone/registry) | [`packages/registry`](https://github.com/plone/volto/tree/main/packages/registry#readme) |
+| [`@plone/scripts`](https://www.npmjs.com/package/@plone/scripts) | [`packages/scripts`](https://github.com/plone/volto/tree/main/packages/scripts#readme) |
+| [`@plone/types`](https://www.npmjs.com/package/@plone/types) | [`packages/types`](https://github.com/plone/volto/tree/main/packages/types#readme) |
+| none | [`packages/volto-guillotina`](https://github.com/plone/volto/tree/main/packages/volto-guillotina) |
+| [`@plone/volto-slate`](https://www.npmjs.com/package/@plone/volto-slate) | [`packages/volto-slate`](https://github.com/plone/volto/tree/main/packages/volto-slate#readme) |
+| [`@plone/volto-testing`](https://www.npmjs.com/package/@plone/volto-testing) | [`packages/volto-testing`](https://github.com/plone/volto/tree/main/packages/volto-testing) |
+
+See also [Monorepo structure](https://6.docs.plone.org/volto/contributing/developing-core.html#monorepo-structure).
+
+
 ## Create a Volto project
 
 To start a new project using Volto, follow the [Plone installation documentation](https://6.docs.plone.org/install/create-project.html).

diff --git a/docs/source/configuration/settings-reference.md b/docs/source/configuration/settings-reference.md
@@ -464,7 +464,7 @@ querystringSearchGet
     Please test this setting properly before enabling in a production site.
 
 cssLayers
-    If you want to use CSS layers in Volto styling, it's possible to define them making sure that they are defined and applied at the very top level of the page (head tag).
+   To use CSS layers when styling Volto, you can define and apply them at the very top level of the page, where they appear in the `<head>` tag.
     By using this configuration, you can pass the layer list definition as an array:
 
     ```js

diff --git a/docs/source/contributing/developing-core.md b/docs/source/contributing/developing-core.md
@@ -42,32 +42,35 @@ The workspaces are located in the `packages` or `apps` folder.
 ### Folder layout
 
 Volto has the following folder structure.
+The package `volto` is the core code of Volto.
 
 ```text
-(volto-monorepo)/
+/
 ├─ apps/
-│  ├─ plone
 │  ├─ nextjs
 │  ├─ remix
-│  └─ rr7
+│  ├─ rr7
+│  ├─ vite
+│  └─ vite-ssr
+├─ ...
 ├─ packages/
-│  ├─ volto
+│  ├─ blocks
 │  ├─ client
 │  ├─ components
-│  ├─ registry
-│  ├─ types
 │  ├─ coresandbox
 │  ├─ generator-volto
+│  ├─ helpers
+│  ├─ providers
+│  ├─ registry
 │  ├─ scripts
+│  ├─ slots
+│  ├─ theming
 │  ├─ tsconfig
+│  ├─ types
+│  ├─ volto
 │  ├─ volto-guillotina
 │  ├─ volto-slate
 │  └─ volto-testing
-├─ .gitignore
-├─ package.json
-├─ pnpm-workspace.yaml
-├─ turbo.json
-├─ tsconfig.json
 ├─ ...
 ```
 

diff --git a/packages/components/README.md b/packages/components/README.md
@@ -64,15 +64,15 @@ You can override them in your classes while maintaining them for others.
 
 ### CSS layers
 
-This package use CSS layers to provide a way to style the components in a more flexible way.
+This package uses CSS layers to style the components in a more flexible way.
 It uses the `plone-components` layer name to scope all the CSS declarations in the package.
 The basic styling uses the nested `plone-components.base` named layer.
 You can use the `plone-components` layer to override the basic styling, or use the `plone-components.base` layer to override the basic styling in a more specific way.
 
 ### Quanta
 
 This package also features the Quanta components.
-These components use the basic styling as a baseline, extending them to achieve Quanta look and feel.
+These components use the basic styling as a baseline, extending them to achieve the Quanta look and feel.
 They also extend the basic React components in a composable way.
 The Quanta styling is scoped in the `plone-components.quanta` named layer.
 

diff --git a/packages/components/news/6539.bugfix b/packages/components/news/6539.bugfix
@@ -0,0 +1 @@
+Fixed precedence of the Quanta layer by adding a base layer for all the basic components. @sneridagh
diff --git a/packages/components/news/6542.internal b/packages/components/news/6542.internal
@@ -0,0 +1 @@
+Update `@plone/components`'s URLs in its `package.json`. @stevepiercy
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -11,10 +11,10 @@
   "version": "3.0.0",
   "repository": {
     "type": "git",
-    "url": "http://github.com/plone/components.git"
+    "url": "http://github.com/plone/volto.git"
   },
   "bugs": {
-    "url": "https://github.com/plone/components/issues"
+    "url": "https://github.com/plone/volto/issues"
   },
   "type": "module",
   "files": [

diff --git a/packages/components/src/stories/Introduction.mdx b/packages/components/src/stories/Introduction.mdx
@@ -11,8 +11,8 @@ The purpose of this package is to provide an agnostic set of baseline components
 
 ## Usage
 
-Using the package manager of your choice (npm, yarn, pnpm) to install the package in your app.
-Use pnpm in case you are adding them a Volto add-on/workspace:
+You can use your choice of package manager (npm, yarn, or pnpm) to install the package in your app.
+If you add the components to a Volto add-on or workspace, use pnpm, as shown.
 
 ```shell
 pnpm add @plone/components
@@ -56,15 +56,15 @@ import '@plone/components/src/styles/basic/TextField.css';
 
 ### CSS layers
 
-This package use CSS layers to provide a way to style the components in a more flexible way.
+This package uses CSS layers to style the components in a more flexible way.
 It uses the `plone-components` layer name to scope all the CSS declarations in the package.
 The basic styling uses the nested `plone-components.base` named layer.
 You can use the `plone-components` layer to override the basic styling, or use the `plone-components.base` layer to override the basic styling in a more specific way.
 
-## Quanta
+### Quanta
 
 This package also features the Quanta components.
-These components use the basic styling as a baseline, extending them to achieve Quanta look and feel.
+These components use the basic styling as a baseline, extending them to achieve the Quanta look and feel.
 They also extend the basic React components in a composable way.
 The Quanta styling is scoped in the `plone-components.quanta` named layer.
 

diff --git a/packages/types/news/6539.feature b/packages/types/news/6539.feature
@@ -0,0 +1 @@
+Added the typing for the new `cssLayers` configuration object setting. @sneridagh
diff --git a/packages/volto/.gitignore b/packages/volto/.gitignore
@@ -10,6 +10,7 @@ eslint.xml
 yarn-error.log
 build
 .changelog.draft
+.registry.loader.js
 
 # yarn 3
 .pnp.*

diff --git a/packages/volto/news/6539.feature b/packages/volto/news/6539.feature
@@ -0,0 +1 @@
+Added a setting in the `config` object to set the site's CSS layers, if required. @sneridagh
diff --git a/packages/volto/news/6542.documentation b/packages/volto/news/6542.documentation
@@ -0,0 +1 @@
+Add monorepo structure to the README. Update the monorepo structure file tree. @stevepiercy
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Fixed precedence of the Quanta layer by adding a base layer for all the basic components. @sneridagh
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Update `@plone/components`'s URLs in its `package.json`. @stevepiercy
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Added the typing for the new `cssLayers` configuration object setting. @sneridagh
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Added a setting in the `config` object to set the site's CSS layers, if required. @sneridagh
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Add monorepo structure to the README. Update the monorepo structure file tree. @stevepiercy