Refactor vlt8

sneridagh · sneridagh · commit 76056582c8a0 · 2025-10-29T11:02:33.000+01:00
diff --git a/.github/workflows/acceptance.yml b/.github/workflows/acceptance.yml
@@ -9,7 +9,7 @@ on:
       - "packages/**"
 
 env:
-  NODE_VERSION: 20.x
+  NODE_VERSION: 24.x
   CYPRESS_RETRIES: 2
 
 jobs:
diff --git a/.github/workflows/code.yml b/.github/workflows/code.yml
@@ -8,7 +8,7 @@ on:
       - "packages/**"
 
 env:
-  NODE_VERSION: 20.x
+  NODE_VERSION: 24.x
 
 jobs:
   codeanalysis:
diff --git a/.github/workflows/i18n.yml b/.github/workflows/i18n.yml
@@ -8,7 +8,7 @@ on:
       - "packages/**"
 
 env:
-  NODE_VERSION: 20.x
+  NODE_VERSION: 24.x
 
 jobs:
   unit:
diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
@@ -8,7 +8,7 @@ on:
       - ".github/workflows/storybook.yml"
 
 env:
-  NODE_VERSION: 20.x
+  NODE_VERSION: 24.x
 
 permissions:
   contents: write
diff --git a/.github/workflows/unit.yml b/.github/workflows/unit.yml
@@ -8,7 +8,7 @@ on:
       - "packages/**"
 
 env:
-  NODE_VERSION: 20.x
+  NODE_VERSION: 24.x
 
 jobs:
   unit:
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
diff --git a/Makefile b/Makefile
@@ -76,9 +76,11 @@ release-dry-run: ## Dry-run the release of the add-on on npmjs.org
 test: ## Run unit tests
 	pnpm test
 
-.PHONY: test-ci
+.PHONY: ci-test
 ci-test: ## Run unit tests in CI
-	CI=1 RAZZLE_JEST_CONFIG=$(CURRENT_DIR)/jest-addon.config.js pnpm --filter @plone/volto test -- --passWithNoTests
+	# Unit Tests need the i18n to be built
+	VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto i18n
+	CI=1 pnpm test --passWithNoTests
 
 .PHONY: backend-docker-start
 backend-docker-start:	## Starts a Docker-based backend for development
diff --git a/jest-addon.config.js b/jest-addon.config.js
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
     "build": "pnpm build:deps && VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto build",
     "build:deps": "pnpm --filter @plone/registry --filter @plone/components build",
     "i18n": "pnpm --filter @kitconcept/volto-separator-block i18n",
-    "test": "RAZZLE_JEST_CONFIG=$(pwd)/jest-addon.config.js pnpm --filter @plone/volto test -- --passWithNoTests",
+    "test": "pnpm --filter @kitconcept/volto-separator-block exec vitest",
     "lint": "eslint --max-warnings=0 'packages/**/src/**/*.{js,jsx,ts,tsx}'",
     "lint:fix": "eslint --fix 'packages/**/src/**/*.{js,jsx,ts,tsx}'",
     "prettier": "prettier --check 'packages/**/src/**/*.{js,jsx,ts,tsx}'",
@@ -41,4 +41,4 @@
     "mrs-developer": "^2.2.0"
   },
   "packageManager": "pnpm@9.1.1"
-}
+}
diff --git a/packages/volto-separator-block/package.json b/packages/volto-separator-block/package.json
@@ -2,7 +2,7 @@
   "name": "@kitconcept/volto-separator-block",
   "version": "4.2.1",
   "description": "volto-separator-block: Volto add-on that provides a visual separator between blocks",
-  "main": "src/index.js",
+  "main": "src/index.ts",
   "license": "MIT",
   "keywords": [
     "volto-addon",
@@ -27,15 +27,24 @@
     "release-alpha": "release-it --preRelease=alpha"
   },
   "dependencies": {
-    "@plone/components": "workspace:*"
+    "classnames": "^2.5.1"
   },
   "peerDependencies": {
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-intl": "^3.12.1"
   },
   "devDependencies": {
-    "@plone/scripts": "^3.6.1",
-    "release-it": "^17.1.1"
+    "@plone/scripts": "^3.10.3",
+    "@plone/types": "workspace:*",
+    "@testing-library/cypress": "10.0.3",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.2.0",
+    "@types/node": "^24",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "release-it": "^19.0.3",
+    "typescript": "^5.7.3",
+    "vitest": "^3.1.2"
   }
 }
diff --git a/packages/volto-separator-block/src/components/Data.tsx b/packages/volto-separator-block/src/components/Data.tsx
@@ -2,9 +2,18 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import { SeparatorSchema } from './schema';
+import type { BlockEditProps } from '@plone/types';
 
-const SeparatorData = (props) => {
-  const { block, data, onChangeBlock } = props;
+const SeparatorData = (props: BlockEditProps) => {
+  const {
+    block,
+    data,
+    onChangeBlock,
+    blocksConfig,
+    navRoot,
+    contentType,
+    blocksErrors,
+  } = props;
   const intl = useIntl();
   const schema = SeparatorSchema({ ...props, intl });
 
@@ -19,8 +28,12 @@ const SeparatorData = (props) => {
         });
       }}
       formData={data}
-      fieldIndex={data.index}
       block={block}
+      onChangeBlock={onChangeBlock}
+      blocksConfig={blocksConfig}
+      navRoot={navRoot}
+      contentType={contentType}
+      errors={blocksErrors}
     />
   );
 };
diff --git a/packages/volto-separator-block/src/components/Edit.tsx b/packages/volto-separator-block/src/components/Edit.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
 import Data from './Data';
 import View from './View';
+import type { BlockEditProps } from '@plone/types';
 
-const SeparatorEdit = (props) => {
+const SeparatorEdit = (props: BlockEditProps) => {
   const { data, block, onChangeBlock, selected } = props;
   return (
     <>
diff --git a/packages/volto-separator-block/src/components/View.tsx b/packages/volto-separator-block/src/components/View.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
 import cx from 'classnames';
+import type { BlockViewProps } from '@plone/types';
 
-const SeparatorView = (props) => {
-  //eslint-disable-next-line
-  const { className, data, style } = props;
+const SeparatorView = (props: BlockViewProps) => {
+  const { className, style } = props;
   return (
     <div className={cx('block separator', className)} style={style}>
       <div className="line" />
diff --git a/packages/volto-separator-block/src/components/index.ts b/packages/volto-separator-block/src/components/index.ts
@@ -0,0 +1,31 @@
+import { defineMessages } from 'react-intl';
+import { SeparatorStyleEnhancer } from './schema';
+import divideHorizontalSVG from '@plone/volto/icons/divide-horizontal.svg';
+import SeparatorView from './View';
+import SeparatorEdit from './Edit';
+import { SeparatorSchema } from './schema';
+
+import type { BlockConfigBase } from '@plone/types/src/config/Blocks';
+
+defineMessages({
+  Separator: {
+    id: 'Separator',
+    defaultMessage: 'Separator',
+  },
+});
+
+const blockConfig: BlockConfigBase = {
+  id: 'separator',
+  title: 'Separator',
+  icon: divideHorizontalSVG,
+  group: 'teasers',
+  view: SeparatorView,
+  edit: SeparatorEdit,
+  schemaEnhancer: SeparatorStyleEnhancer,
+  restricted: false,
+  mostUsed: true,
+  sidebarTab: 1,
+  blockSchema: SeparatorSchema,
+};
+
+export default blockConfig;
diff --git a/packages/volto-separator-block/src/components/schema.ts b/packages/volto-separator-block/src/components/schema.ts
@@ -24,6 +24,7 @@ export const SeparatorSchema = (props) => {
       {
         id: 'default',
         title: 'Default',
+        fields: [],
       },
     ],
     properties: {},
diff --git a/packages/volto-separator-block/src/index.js b/packages/volto-separator-block/src/index.js
diff --git a/packages/volto-separator-block/src/index.ts b/packages/volto-separator-block/src/index.ts
@@ -0,0 +1,19 @@
+import blockConfig from './components';
+import type { ConfigType } from '@plone/registry';
+import type { BlockConfigBase } from '@plone/types/src/config/Blocks';
+
+import './theme/separator-base.css';
+
+declare module '@plone/types' {
+  export interface BlocksConfigData {
+    separator: BlockConfigBase;
+  }
+}
+
+const applyConfig = (config: ConfigType) => {
+  config.blocks.blocksConfig.separator = blockConfig;
+
+  return config;
+};
+
+export default applyConfig;
diff --git a/packages/volto-separator-block/src/theme/separator-base.css b/packages/volto-separator-block/src/theme/separator-base.css
@@ -1,4 +1,4 @@
-// Separator Block
+/* Separator Block */
 .block.separator {
   top: unset;
   display: block;
@@ -47,7 +47,7 @@
   }
 }
 
-// Separator blocks chooser fix due to classname leak from core
+/* Separator blocks chooser fix due to classname leak from core */
 .blocks-chooser .separator {
   position: static;
   height: unset;
diff --git a/packages/volto-separator-block/tsconfig.json b/packages/volto-separator-block/tsconfig.json
@@ -1,32 +1,33 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "module": "commonjs",
-    "allowJs": true,
-    "skipLibCheck": true,
     "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "strictPropertyInitialization": false,
-    "moduleResolution": "Node",
+    "skipLibCheck": true,
+    "target": "es2022",
+    "allowJs": true,
     "resolveJsonModule": true,
+    "moduleDetection": "force",
     "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "module": "preserve",
     "noEmit": true,
+    "lib": ["es2022", "dom", "dom.iterable"],
     "jsx": "react-jsx",
     "paths": {
-      "@plone/volto/*": ["../../core/packages/volto/src/*"]
+      "@plone/volto/*": [
+        "../../core/packages/volto/src/*",
+        "../../../../core/packages/volto/src/*"
+      ],
+      "@kitconcept/volto-separator-block/*": ["./src/*"]
     }
   },
-  "include": ["src", "src/**/*.js"],
+  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
   "exclude": [
     "node_modules",
     "build",
     "public",
     "coverage",
-    "src/**/*.test.{js,jsx,ts,tsx}",
-    "src/**/*.spec.{js,jsx,ts,tsx}",
-    "src/**/*.stories.{js,jsx,ts,tsx}"
+    "**/*.test.{js,jsx,ts,tsx}",
+    "**/*.spec.{js,jsx,ts,tsx}",
+    "**/*.stories.{js,jsx,ts,tsx}"
   ]
 }
