Merge branch 'main' into slots2024

packages/components/.storybook/main.ts

@@ -9,7 +9,6 @@ const config: StorybookConfig = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
-    '@storybook/addon-mdx-gfm',
   ],
   framework: {
     name: '@storybook/react-vite',

packages/components/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import theme from './theme';
+
+addons.setConfig({
+  theme,
+});

packages/components/.storybook/preview.ts

@@ -1,3 +1,5 @@
+import './storybook-base.css';
+
 export const parameters = {
   backgrounds: {
     default: 'light',

packages/components/.storybook/storybook-base.css

@@ -0,0 +1,15 @@
+/* Base styles */
+:root {
+  --basic-font-family: system-ui;
+  --basic-font-size: 16px;
+  background: var(--background-color);
+  font-family: var(--basic-font-family);
+  font-size: var(--basic-font-size);
+  line-height: 1.5;
+}
+
+.sbdocs.sbdocs-content {
+  p {
+    font-size: 16px;
+  }
+}

packages/components/.storybook/theme.ts

@@ -0,0 +1,10 @@
+import { create } from '@storybook/theming/create';
+import logo from './Logo.svg';
+
+export default create({
+  base: 'light',
+  brandTitle: '@plone/components StoryBook',
+  brandUrl: 'https://plone-components.netlify.app/',
+  brandImage: logo,
+  brandTarget: '_self',
+});

packages/components/CHANGELOG.md

@@ -8,6 +8,16 @@
 
 <!-- towncrier release notes start -->
 
+## 2.0.0-alpha.2 (2024-02-23)
+
+### Bugfix
+
+- Move basic general CSS rules to StoryBook so we don't spoil the build @sneridagh [#5791](https://github.com/plone/volto/issues/5791)
+
+### Internal
+
+- Improve StoryBook look and feel @sneridagh [#5791](https://github.com/plone/volto/issues/5791)
+
 ## 2.0.0-alpha.1 (2024-02-18)
 
 ### Bugfix

packages/components/package.json

@@ -8,7 +8,7 @@
     }
   ],
   "license": "MIT",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.2",
   "repository": {
     "type": "git",
     "url": "http://github.com/plone/components.git"
@@ -91,9 +91,11 @@
     "@storybook/addon-links": "^7.5.1",
     "@storybook/addon-mdx-gfm": "^7.5.1",
     "@storybook/blocks": "^7.5.1",
+    "@storybook/manager-api": "^7.6.17",
     "@storybook/react": "^7.5.1",
     "@storybook/react-vite": "^7.5.1",
     "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.6.17",
     "@testing-library/jest-dom": "6.1.4",
     "@testing-library/react": "14.0.0",
     "@types/jest-axe": "^3.5.7",

packages/components/src/stories/Introduction.stories.mdx

@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Introduction" />
+
+
+# `@plone/components`
+
+This package contains ReactJS components for using Plone as a headless CMS.
+
+The purpose of this package is to provide an agnostic set of baseline components to build Plone sites upon.
+
+## Usage
+
+Using the package manager of your choice (npm, yarn, pnpm) install the package:
+
+```shell
+yarn add @plone/components
+```
+
+Whenever you want to use the components, all are exported as named exports:
+
+```ts
+import { TextField } from '@plone/components';
+
+const MyComponent = (props) => {
+  return (
+    <>
+      <TextField label="Username" />
+    </>;
+  )
+}
+
+export default MyComponent;
+```
+

packages/components/src/styles/basic/theme.css

@@ -1,15 +1,5 @@
 @import '../quanta/colors.css';
 
-/* Base styles */
-:root {
-  --basic-font-family: system-ui;
-  --basic-font-size: 14px;
-  background: var(--background-color);
-  font-family: var(--basic-font-family);
-  font-size: var(--basic-font-size);
-  line-height: 1.5;
-}
-
 /* color themes for dark and light modes, generated with Leonardo.
  * Light: https://leonardocolor.io/theme.html?name=Light&config=%7B%22baseScale%22%3A%22Gray%22%2C%22colorScales%22%3A%5B%7B%22name%22%3A%22Gray%22%2C%22colorKeys%22%3A%5B%22%23000000%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Purple%22%2C%22colorKeys%22%3A%5B%22%235e30eb%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Red%22%2C%22colorKeys%22%3A%5B%22%23e32400%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%5D%2C%22lightness%22%3A98%2C%22contrast%22%3A1%2C%22saturation%22%3A100%2C%22formula%22%3A%22wcag2%22%7D */
 :root {

packages/generator-volto/generators/addon/templates/package.json

@@ -43,6 +43,6 @@
     "stylelint-prettier": "4.0.2"
   },
   "peerDependencies": {
-    "@plone/volto": "^17.0.0"
+    "@plone/volto": "^18.0.0"
   }
 }

packages/generator-volto/news/5780.bugfix

@@ -0,0 +1 @@
+Switch peerDependencies to Volto 18 for generator-volto alpha's/latest.