Introduce @plone/theming

apps/rr7/app/root.tsx

@@ -20,8 +20,8 @@ import { flattenToAppURL } from './utils';
 import config from '@plone/registry';
 import './config';
 
-import '@plone/theme/styles/main.css';
-import '@plone/components/dist/basic.css';
+import '@plone/theming/styles/main.css';
+// import '@plone/components/dist/basic.css';
 import '@plone/slots/main.css';
 
 function useHrefLocal(to: string) {

apps/rr7/package.json

@@ -27,7 +27,7 @@
     "@plone/providers": "workspace:*",
     "@plone/registry": "workspace:*",
     "@plone/slots": "workspace:*",
-    "@plone/theme": "workspace:*",
+    "@plone/theming": "workspace:*",
     "@react-router/dev": "7.0.0-pre.4",
     "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",

packages/blocks/Image/index.tsx

@@ -1,7 +1,8 @@
-import { BlocksFormData } from '@plone/types';
+import { BlockViewProps } from '@plone/types';
 import { usePloneProvider } from '@plone/providers';
 
-const ImageBlockView = (props: BlocksFormData) => {
+const ImageBlockView = (props: BlockViewProps) => {
+  console.log(props);
   const flattenToAppURL = usePloneProvider().flattenToAppURL;
   const { data } = props;
   const url = data.image_scales

packages/blocks/package.json

@@ -48,7 +48,8 @@
   "dependencies": {
     "@plone/components": "workspace:*",
     "@plone/registry": "workspace:*",
-    "@plone/providers": "workspace:*"
+    "@plone/providers": "workspace:*",
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@plone/registry": "workspace:*",

packages/slots/components/ContentArea.tsx

@@ -1,4 +1,4 @@
-import { RenderBlocks } from '@plone/components';
+import RenderBlocks from '@plone/blocks/RenderBlocks/RenderBlocks';
 import { SlotComponentProps } from '../SlotRenderer';
 import config from '@plone/registry';
 

packages/theming/.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/theming/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@plone/theme",
+  "name": "@plone/theming",
   "description": "Plone base theming",
   "maintainers": [
     {
@@ -48,6 +48,7 @@
     }
   },
   "dependencies": {
+    "@plone/components": "workspace:*",
     "@plone/registry": "workspace:*",
     "lightningcss": "1.28.1",
     "lightningcss-cli": "1.28.1"

packages/theming/styles/main.css

@@ -1,3 +1,4 @@
-@layer reset, components, layout, addons, theme;
+@layer reset, plone-components, layout, addons, theme;
 @import 'reset.css';
+@import '@plone/components/dist/basic.css';
 @import 'layout.css';

packages/types/src/config/Blocks.d.ts

@@ -51,6 +51,10 @@ export interface BlockConfigBase {
    * The group of the block
    */
   group: string;
+  /**
+   * The category of the block
+   */
+  category: string;
   /**
    * The view mode component
    */