Init @plone/cmsui

packages/cmsui/.eslintrc.cjs

@@ -0,0 +1,11 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  overrides: [
+    {
+      files: ['**/*.ts', '**/*.tsx'],
+      extends: [
+        'plugin:react/jsx-runtime', // We only want this for non-library code (eg. volto add-ons)
+      ],
+    },
+  ],
+};

packages/cmsui/.release-it.json

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

packages/cmsui/.storybook/main.ts

@@ -0,0 +1,41 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import { mergeConfig } from 'vite';
+
+const config: StorybookConfig = {
+  // For some reason the property does not allow negation
+  // https://github.com/storybookjs/storybook/issues/11181#issuecomment-1535288804
+  stories: [
+    '../components/**/*.mdx',
+    '../components/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+      },
+      propFilter: () => true,
+    },
+  },
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      build: {
+        minify: false,
+      },
+    });
+  },
+};
+export default config;

packages/cmsui/.storybook/manager.js

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

packages/cmsui/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

packages/cmsui/.storybook/preview.ts

@@ -0,0 +1,24 @@
+import './storybook-base.css';
+import '@plone/components/dist/basic.css';
+import '../main.css';
+import config from '@plone/registry';
+import installSlots from '../config';
+import installBlocks from '@plone/blocks';
+
+config.set('slots', {});
+config.set('utilities', {});
+installSlots(config);
+installBlocks(config);
+
+export const parameters = {
+  backgrounds: {
+    default: 'light',
+  },
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

packages/cmsui/.storybook/storybook-base.css

@@ -0,0 +1,19 @@
+/* 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;
+  }
+}
+
+#storybook-root {
+  width: 100vw;
+}

packages/cmsui/.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/cmsui/.stylelintrc

@@ -0,0 +1,14 @@
+{
+  "extends": ["stylelint-config-idiomatic-order"],
+  "plugins": ["stylelint-prettier"],
+  "overrides": [
+    {
+      "files": ["**/*.scss"],
+      "customSyntax": "postcss-scss"
+    }
+  ],
+  "rules": {
+    "prettier/prettier": true,
+    "order/properties-alphabetical-order": null
+  }
+}

packages/cmsui/CHANGELOG.md

@@ -0,0 +1,11 @@
+# @plone/cmsui Release Notes
+
+<!-- Do *NOT* add new change log entries to this file.
+     Instead create a file in the news directory.
+     For helpful instructions, see:
+     https://6.docs.plone.org/contributing/index.html#change-log-entry
+-->
+
+<!-- towncrier release notes start -->
+
+## 1.0.0 (unreleased)

packages/cmsui/README.md

@@ -0,0 +1,8 @@
+# `@plone/cmsui`
+
+This package provides default structural slots for Plone 7 and the API-first story.
+
+> [!WARNING]
+> This package or app is experimental.
+> The community offers no support whatsoever for it.
+> Breaking changes may occur without notice.

packages/cmsui/index.ts

@@ -0,0 +1,5 @@
+import type { ConfigType } from '@plone/registry';
+
+export default function install(config: ConfigType) {
+  return config;
+}

packages/cmsui/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@plone/cmsui",
+  "description": "Plone CMSUI components",
+  "maintainers": [
+    {
+      "name": "Plone Foundation",
+      "url": "https://plone.org"
+    }
+  ],
+  "funding": "https://github.com/sponsors/plone",
+  "license": "MIT",
+  "version": "1.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"
+  },
+  "main": "index.ts",
+  "scripts": {
+    "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",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "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": {
+    "@plone/client": "workspace:*",
+    "@plone/components": "workspace:*",
+    "@plone/registry": "workspace:*",
+    "react-aria-components": "^1.5.0"
+  },
+  "devDependencies": {
+    "@plone/types": "workspace:*",
+    "@storybook/addon-essentials": "^8.0.4",
+    "@storybook/addon-interactions": "^8.0.4",
+    "@storybook/addon-links": "^8.0.4",
+    "@storybook/addon-mdx-gfm": "^8.0.4",
+    "@storybook/blocks": "^8.0.4",
+    "@storybook/manager-api": "^8.0.4",
+    "@storybook/react": "^8.0.4",
+    "@storybook/react-vite": "^8.0.4",
+    "@storybook/theming": "^8.0.4",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint-plugin-storybook": "^0.8.0",
+    "jest-axe": "^8.0.0",
+    "release-it": "17.1.1",
+    "storybook": "^8.0.4",
+    "tsconfig": "workspace:*",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.8",
+    "vitest": "^2.1.3",
+    "vitest-axe": "^0.1.0"
+  }
+}

packages/cmsui/setupTesting.ts

@@ -0,0 +1,3 @@
+import '@testing-library/jest-dom';
+import { toHaveNoViolations } from 'jest-axe';
+expect.extend(toHaveNoViolations);

packages/cmsui/stories.ts

@@ -0,0 +1,22 @@
+export const storyData = {
+  blocks: {
+    '7ab29abe-b38c-406b-94d7-b270e544a998': {
+      '@type': 'slate',
+      value: [
+        {
+          type: 'p',
+          children: [
+            {
+              text: 'Lorem ipsum dolor sit amet eu tempus ornare elit. Curabitur egestas quisque molestie pellentesque nunc imperdiet posuere morbi nunc eleifend. Volutpat enim augue blandit aliquam interdum pulvinar eu mattis congue. Eleifend mauris ut fermentum egestas mi faucibus adipiscing arcu nibh scelerisque justo habitasse. Mi consectetur hac maecenas leo dictumst vitae phasellus quam praesent vivamus nullam imperdiet integer mauris.',
+            },
+          ],
+        },
+      ],
+      plaintext:
+        'Lorem ipsum dolor sit amet eu tempus ornare elit. Curabitur egestas quisque molestie pellentesque nunc imperdiet posuere morbi nunc eleifend. Volutpat enim augue blandit aliquam interdum pulvinar eu mattis congue. Eleifend mauris ut fermentum egestas mi faucibus adipiscing arcu nibh scelerisque justo habitasse. Mi consectetur hac maecenas leo dictumst vitae phasellus quam praesent vivamus nullam imperdiet integer mauris.',
+    },
+  },
+  blocks_layout: {
+    items: ['7ab29abe-b38c-406b-94d7-b270e544a998'],
+  },
+};

packages/cmsui/towncrier.toml

@@ -0,0 +1,33 @@
+[tool.towncrier]
+filename = "CHANGELOG.md"
+directory = "news/"
+title_format = "## {version} ({project_date})"
+underlines = ["", "", ""]
+template = "../scripts/templates/towncrier_template.jinja"
+start_string = "<!-- towncrier release notes start -->\n"
+issue_format = "[#{issue}](https://github.com/plone/volto/issues/{issue})"
+
+[[tool.towncrier.type]]
+directory = "breaking"
+name = "Breaking"
+showcontent = true
+
+[[tool.towncrier.type]]
+directory = "feature"
+name = "Feature"
+showcontent = true
+
+[[tool.towncrier.type]]
+directory = "bugfix"
+name = "Bugfix"
+showcontent = true
+
+[[tool.towncrier.type]]
+directory = "internal"
+name = "Internal"
+showcontent = true
+
+[[tool.towncrier.type]]
+directory = "documentation"
+name = "Documentation"
+showcontent = true

packages/cmsui/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "tsconfig/react-library.json",
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": [
+    "node_modules",
+    "build",
+    "public",
+    "coverage",
+    "src/**/*.test.{js,jsx,ts,tsx}",
+    "src/**/*.spec.{js,jsx,ts,tsx}",
+    "src/**/*.stories.{js,jsx,ts,tsx}"
+  ]
+}

packages/cmsui/vitest.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vitest/config';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './setupTesting.ts',
+    // you might want to disable it, if you don't have tests that rely on CSS
+    // since parsing CSS is slow
+    css: true,
+    exclude: ['**/node_modules/**', '**/lib/**'],
+  },
+});