Merge pull request #16 from plone/introducesupportviews

Support views - RenderBlocks

.gitignore

@@ -2,6 +2,7 @@ node_modules/
 dist/
 stats.html
 storybook-static
+lib
 
 # yarn 3
 .pnp.*
@@ -11,3 +12,5 @@ storybook-static
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+.parcel-cache/

.npmignore

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

.storybook/main.ts

@@ -1,6 +1,18 @@
 import type { StorybookConfig } from '@storybook/react-vite';
+import globby from 'globby';
+
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  // For some reason the property does not allow negation
+  // https://github.com/storybookjs/storybook/issues/11181#issuecomment-1535288804
+  stories: globby.sync(
+    [
+      '../src/**/*.mdx',
+      '../src/**/*.stories.@(js|jsx|ts|tsx)',
+      '!../**/node_modules/**/*',
+      '!../**/lib/**/*',
+    ],
+    { cwd: './.storybook' },
+  ),
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',

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"
+  }
+}

news/16.feature

@@ -0,0 +1 @@
+Introduce support views - Add `RenderBlocks` view @sneridagh

package.json

@@ -22,15 +22,15 @@
     "src",
     "README.md"
   ],
-  "main": "./dist/index.umd.cjs",
+  "source": "./src/index.ts",
+  "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/src/index.d.ts",
-  "source": "./src/index.ts",
   "exports": {
     ".": {
       "types": "./dist/src/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.umd.cjs"
+      "require": "./dist/index.cjs"
     },
     "./src/*": "./src/*"
   },
@@ -46,7 +46,8 @@
     "react-query"
   ],
   "scripts": {
-    "build": "vite build",
+    "develop": "npx -p mrs-developer missdev --output=lib --fetch-https",
+    "build": "parcel build",
     "test": "vitest --no-threads --passWithNoTests",
     "coverage": "vitest run --coverage --no-threads",
     "lint": "yarn eslint && yarn prettier && yarn stylelint",
@@ -68,6 +69,8 @@
     "access": "public"
   },
   "devDependencies": {
+    "@parcel/packager-ts": "2.10.3",
+    "@parcel/transformer-typescript-types": "2.10.3",
     "@storybook/addon-essentials": "^7.5.1",
     "@storybook/addon-interactions": "^7.5.1",
     "@storybook/addon-links": "^7.5.1",
@@ -90,8 +93,10 @@
     "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",
+    "parcel": "^2.10.3",
     "postcss-scss": "4.0.9",
     "prettier": "3.0.3",
     "release-it": "16.2.1",
@@ -104,13 +109,15 @@
     "stylelint-prettier": "4.0.2",
     "typescript": "5.2.2",
     "vite": "^4.5.0",
-    "vite-plugin-dts": "^3.6.3",
     "vitest": "^0.34.6",
     "vitest-axe": "^0.1.0"
   },
   "dependencies": {
+    "@react-aria/utils": "^3.22.0",
     "@react-spectrum/utils": "^3.11.1",
     "classnames": "^2.3.2",
+    "clsx": "^2.0.0",
+    "lodash": "^4.17.21",
     "react": "18.2.0",
     "react-aria-components": "^1.0.0-rc.0",
     "react-dom": "18.2.0"

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,70 @@
+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 = {
+  /**
+   * Plone content object
+   */
+  content: GetContentResponse;
+  /**
+   * Current blocks configuration object
+   * From the registry or local to this instance (eg. in a blocks in block container)
+   */
+  blocksConfig: BlocksConfig;
+  /**
+   * Wrap the blocks in an enclosing tag
+   * From the registry or local to this instance (eg. in a blocks in block container)
+   */
+  as: React.ElementType;
+  /**
+   * Router location object
+   */
+  location: Location;
+  /**
+   * Metadata object
+   * In case of the blocks in block container use case, it's the metadata (content data)
+   * from the parent container, passed down to the contained blocks
+   */
+  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

@@ -15,10 +15,22 @@
     "isolatedModules": true,
     "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

@@ -1,11 +1,10 @@
 import path from 'path';
 import react from '@vitejs/plugin-react';
-import dts from 'vite-plugin-dts';
 import { defineConfig } from 'vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [dts(), react()],
+  plugins: [react()],
   build: {
     lib: {
       entry: [path.resolve(__dirname, 'src/index.ts')],
@@ -19,6 +18,7 @@ export default defineConfig({
         'react-aria-components',
         '@react-spectrum/utils',
         'classnames',
+        'lodash',
       ],
       output: {
         globals: {

vitest.config.ts

@@ -9,5 +9,6 @@ export default defineConfig({
     // 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/**'],
   },
 });