Support views - RenderBlocks

.gitignore

@@ -2,6 +2,7 @@ node_modules/
 dist/
 stats.html
 storybook-static
+lib
 
 # yarn 3
 .pnp.*

.npmignore

@@ -1,4 +1,5 @@
 news
+lib
 towncrier.toml
 .towncrier
 .storybook

mrs.developer.json

@@ -0,0 +1,10 @@
+{
+  "plone": {
+    "packages": {
+      "@plone/types/*": "/packages/types/*"
+    },
+    "url": "git@github.com:plone/volto.git",
+    "https": "https://github.com/plone/volto.git",
+    "branch": "plone/types"
+  }
+}

package.json

@@ -46,6 +46,7 @@
     "react-query"
   ],
   "scripts": {
+    "develop": "npx -p mrs-developer missdev --output=lib --fetch-https",
     "build": "vite build",
     "test": "vitest --no-threads --passWithNoTests",
     "coverage": "vitest run --coverage --no-threads",
@@ -90,6 +91,7 @@
     "eslint-plugin-prettier": "5.0.1",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-storybook": "^0.6.15",
+    "history": "^5.3.0",
     "jest-axe": "^8.0.0",
     "jsdom": "^22.1.0",
     "postcss-scss": "4.0.9",

src/Views/RenderBlocks/DefaultBlockView.tsx

@@ -0,0 +1,5 @@
+const DefaultBlockView = () => {
+  return <>This block has no view assigned</>;
+};
+
+export default DefaultBlockView;

src/Views/RenderBlocks/RenderBlocks.tsx

@@ -0,0 +1,51 @@
+import { Fragment } from 'react';
+// import { defineMessages, useIntl } from 'react-intl';
+
+import { map } from 'lodash';
+import { hasBlocksData } from '../../helpers/blocks';
+import DefaultBlockView from './DefaultBlockView';
+import type { GetContentResponse } from '@plone/types/content/get';
+import type { BlocksConfig } from '@plone/types/config/Blocks';
+import type { Location } from 'history';
+
+type RenderBlocksProps = {
+  content: GetContentResponse;
+  blocksConfig: BlocksConfig;
+  as: React.ElementType;
+  location: Location;
+  metadata?: GetContentResponse;
+};
+
+const RenderBlocks = (props: RenderBlocksProps) => {
+  const { blocksConfig, content, location, metadata } = props;
+  const CustomTag = props.as || Fragment;
+
+  return hasBlocksData(content) ? (
+    <CustomTag>
+      {map(content.blocks_layout.items, (block) => {
+        const blockData = content.blocks?.[block];
+        const blockType = blockData?.['@type'];
+        const Block = blocksConfig[blockType]?.view || DefaultBlockView;
+
+        return Block ? (
+          <Block
+            id={block}
+            metadata={metadata}
+            properties={content}
+            data={blockData}
+            path={location?.pathname || ''}
+            blocksConfig={blocksConfig}
+          />
+        ) : blockData ? (
+          <div key={block}>Unknown block found: {blockType}</div>
+        ) : (
+          <div key={block}>Invalid Block</div>
+        );
+      })}
+    </CustomTag>
+  ) : (
+    ''
+  );
+};
+
+export default RenderBlocks;

src/helpers/blocks.ts

@@ -0,0 +1,11 @@
+import type { GetContentResponse } from '@plone/types/content/get';
+import { find, keys, endsWith } from 'lodash';
+
+export function hasBlocksData(content: GetContentResponse) {
+  return (
+    find(
+      keys(content),
+      (key) => key !== 'volto.blocks' && endsWith(key, 'blocks'),
+    ) !== undefined
+  );
+}

src/index.ts

@@ -3,3 +3,7 @@ export { default as Container } from './components/Container/Container';
 export { default as Icon } from './components/Icon/Icon';
 export { default as Input } from './components/Input/Input';
 export { default as Link } from './components/Link/Link';
+export { default as Select } from './components/Select/Select';
+export { default as TextArea } from './components/TextArea/TextArea';
+export { default as RenderBlocks } from './Views/RenderBlocks/RenderBlocks';
+export { default as DefaultBlockView } from './Views/RenderBlocks/DefaultBlockView';

tsconfig.json

@@ -16,9 +16,22 @@
     "noEmit": true,
     "jsx": "react-jsx",
     "types": ["vite", "vitest/globals"],
-    "baseUrl": "."
+    "baseUrl": ".",
+    "paths": {
+      "@plone/types/*": ["src/lib/plone/packages/types/*"]
+    }
   },
   "include": ["src", "./setupTesting.ts"],
-  "exclude": ["node_modules", "dist", "coverage", "src/**/*.test.{ts,tsx}"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "exclude": [
+    "node_modules",
+    "dist",
+    "coverage",
+    "src/**/*.test.{ts,tsx}",
+    "src/**/*.stories.{ts,tsx}"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
 }

vite.config.ts

@@ -19,6 +19,7 @@ export default defineConfig({
         'react-aria-components',
         '@react-spectrum/utils',
         'classnames',
+        'lodash',
       ],
       output: {
         globals: {

yarn.lock

@@ -1757,7 +1757,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.13.10":
+"@babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.7.6":
   version: 7.23.2
   resolution: "@babel/runtime@npm:7.23.2"
   dependencies:
@@ -3020,6 +3020,7 @@ __metadata:
     eslint-plugin-prettier: 5.0.1
     eslint-plugin-react: 7.33.2
     eslint-plugin-storybook: ^0.6.15
+    history: ^5.3.0
     jest-axe: ^8.0.0
     jsdom: ^22.1.0
     postcss-scss: 4.0.9
@@ -11188,6 +11189,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"history@npm:^5.3.0":
+  version: 5.3.0
+  resolution: "history@npm:5.3.0"
+  dependencies:
+    "@babel/runtime": ^7.7.6
+  checksum: d73c35df49d19ac172f9547d30a21a26793e83f16a78386d99583b5bf1429cc980799fcf1827eb215d31816a6600684fba9686ce78104e23bd89ec239e7c726f
+  languageName: node
+  linkType: hard
+
 "hosted-git-info@npm:^2.1.4":
   version: 2.8.9
   resolution: "hosted-git-info@npm:2.8.9"