Block model v3

.eslintrc.js

@@ -1,12 +1,32 @@
+const fs = require('fs');
+const projectRootPath = __dirname;
+
+let coreLocation;
+if (fs.existsSync(`${projectRootPath}/core`))
+  coreLocation = `${projectRootPath}/core`;
+else if (fs.existsSync(`${projectRootPath}/../../core`))
+  coreLocation = `${projectRootPath}/../../core`;
+
 module.exports = {
-  extends: './core/packages/volto/.eslintrc',
+  extends: `${coreLocation}/packages/volto/.eslintrc`,
   rules: {
     'import/no-unresolved': 1,
   },
   settings: {
     'import/resolver': {
       alias: {
-        map: [['@plone/volto', './core/packages/volto/src']],
+        map: [
+          ['@plone/volto', `${coreLocation}/packages/volto/src`],
+          [
+            '@plone/volto-slate',
+            `${coreLocation}/core/packages/volto-slate/src`,
+          ],
+          ['@plone/registry', `${coreLocation}/packages/registry/src`],
+          [
+            '@kitconcept/volto-button-block',
+            './packages/volto-button-block/src',
+          ],
+        ],
         extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
       },
     },

.github/workflows/acceptance.yml

@@ -1,5 +1,17 @@
 name: Acceptance tests
-on: [push]
+on:
+  push:
+    paths:
+      - "*.js"
+      - "*.json"
+      - "*.yaml"
+      - "cypress/**"
+      - "packages/**"
+      - ".github/workflows/acceptance.yml"
+
+env:
+  NODE_VERSION: 20.x
+  CYPRESS_RETRIES: 2
 
 jobs:
 
@@ -8,18 +20,13 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - name: Use Node.js 20.x
+      - name: Use Node.js ${{ env.NODE_VERSION }}
         uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: ${{ env.NODE_VERSION }}
 
-      - uses: pnpm/action-setup@v3
-        name: Install pnpm
-        with:
-          version: 8
-          # We don't want to install until later,
-          # when the cache and Cypress are in place
-          run_install: false
+      - name: Enable corepack
+        run: corepack enable
 
       - name: Get pnpm store directory
         shell: bash
@@ -39,7 +46,7 @@ jobs:
         uses: actions/cache@v4
         with:
           path: ~/.cache/Cypress
-          key: binary-20.x-${{ hashFiles('pnpm-lock.yaml') }}
+          key: binary-${{ env.NODE_VERSION }}-${{ hashFiles('pnpm-lock.yaml') }}
 
       - name: Install dependencies
         run: make install
@@ -53,8 +60,8 @@ jobs:
         name: Start Servers
         with:
           run: |
-            make start-test-acceptance-server-ci &
-            make start-test-acceptance-frontend &
+            make ci-acceptance-backend-start &
+            make acceptance-frontend-prod-start &
           # your step-level and job-level environment variables are available to your commands as-is
           # npm install will count towards the wait-for timeout
           # whenever possible, move unrelated scripts to a different step
@@ -81,7 +88,7 @@ jobs:
 
           # working-directory: backend
 
-      - run: make test-acceptance-headless
+      - run: make ci-acceptance-test
 
       # Upload Cypress screenshots
       - uses: actions/upload-artifact@v4

.pre-commit-config.yaml

@@ -0,0 +1,27 @@
+repos:
+  - repo: local
+    hooks:
+      - id: prettier
+        name: prettier
+        entry: pnpm exec prettier --write
+        language: system
+        files: '^packages/.*/src/.*/?.*.(js|jsx|ts|tsx)$'
+        types: [file]
+      - id: eslint
+        name: eslint
+        entry: pnpm exec eslint --max-warnings=0 --fix
+        language: system
+        files: '^packages/.*/src/.*/?.*.(js|jsx|ts|tsx)$'
+        types: [file]
+      - id: stylelint
+        name: stylelint
+        entry: pnpm exec stylelint --fix
+        language: system
+        files: '^packages/.*/src/.*/?.*.(css|scss|less)$'
+        types: [file]
+      - id: i18n
+        name: i18n
+        entry: make ci-i18n
+        language: system
+        files: '^packages/.*/src/.*/?.*.(js|jsx|ts|tsx)$'
+        types: [file]

Makefile

@@ -19,6 +19,9 @@ GREEN=`tput setaf 2`
 RESET=`tput sgr0`
 YELLOW=`tput setaf 3`
 
+GIT_FOLDER=$(CURRENT_DIR)/.git
+PRE_COMMIT=pipx run --spec 'pre-commit==3.7.1' pre-commit
+
 PLONE_VERSION=6
 DOCKER_IMAGE=plone/server-dev:${PLONE_VERSION}
 DOCKER_IMAGE_ACCEPTANCE=plone/server-acceptance:${PLONE_VERSION}
@@ -31,14 +34,29 @@ help:		## Show this help
 
 # Dev Helpers
 .PHONY: install
-install: ## Install task, checks if missdev (mrs-developer) is present and runs it
+install: ## Installs the add-on in a development environment
+	@echo "$(GREEN)Install$(RESET)"
+	if [ -d $(GIT_FOLDER) ]; then $(PRE_COMMIT) install; else echo "$(RED) Not installing pre-commit$(RESET)";fi
 	pnpm dlx mrs-developer missdev --no-config --fetch-https
 	pnpm i
+	pnpm build:deps
+
+.PHONY: start
+start: ## Starts Volto, allowing reloading of the add-on during development
+	pnpm start
+
+.PHONY: build
+build: ## Build a production bundle for distribution of the project with the add-on
+	pnpm build
 
 .PHONY: i18n
 i18n: ## Sync i18n
 	pnpm --filter $(ADDON_NAME) i18n
 
+.PHONY: ci-i18n
+ci-i18n: ## Check if i18n is not synced
+	pnpm --filter $(ADDON_NAME) i18n && git diff -G'^[^\"POT]' --exit-code
+
 .PHONY: format
 format: ## Format codebase
 	pnpm lint:fix
@@ -51,40 +69,60 @@ lint: ## Lint Codebase
 	pnpm prettier
 	pnpm stylelint --allow-empty-input
 
+.PHONY: release
+release: ## Release the add-on on npmjs.org
+	pnpm release
+
+.PHONY: release-dry-run
+release-dry-run: ## Dry-run the release of the add-on on npmjs.org
+	pnpm release
+
 .PHONY: test
 test: ## Run unit tests
 	pnpm test
 
 .PHONY: test-ci
-test-ci: ## Run unit tests in CI
-	CI=1 RAZZLE_JEST_CONFIG=$(CURRENT_DIR)/jest-addon.config.js pnpm --filter @plone/volto 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
 
-.PHONY: start-backend-docker
-start-backend-docker:		## Starts a Docker-based backend for developing
+.PHONY: backend-docker-start
+backend-docker-start:	## Starts a Docker-based backend for development
 	@echo "$(GREEN)==> Start Docker-based Plone Backend$(RESET)"
-	docker run -it --rm --name=backend -p 8080:8080 -e SITE=Plone -e ADDONS='$(KGS)' $(DOCKER_IMAGE)
+	docker run -it --rm --name=backend -p 8080:8080 -e SITE=Plone $(DOCKER_IMAGE)
+
+## Storybook
+.PHONY: storybook-start
+storybook-start: ## Start Storybook server on port 6006
+	@echo "$(GREEN)==> Start Storybook$(RESET)"
+	pnpm run storybook
+
+.PHONY: storybook-build
+storybook-build: ## Build Storybook
+	@echo "$(GREEN)==> Build Storybook$(RESET)"
+	mkdir -p $(CURRENT_DIR)/.storybook-build
+	pnpm run build-storybook -o $(CURRENT_DIR)/.storybook-build
 
 ## Acceptance
-.PHONY: start-test-acceptance-frontend-dev
-start-test-acceptance-frontend-dev: ## Start acceptance frontend in dev mode
+.PHONY: acceptance-frontend-dev-start
+acceptance-frontend-dev-start: ## Start acceptance frontend in development mode
 	RAZZLE_API_PATH=http://127.0.0.1:55001/plone pnpm start
 
-.PHONY: start-test-acceptance-frontend
-start-test-acceptance-frontend: ## Start acceptance frontend in prod mode
+.PHONY: acceptance-frontend-prod-start
+acceptance-frontend-prod-start: ## Start acceptance frontend in production mode
 	RAZZLE_API_PATH=http://127.0.0.1:55001/plone pnpm build && pnpm start:prod
 
-.PHONY: start-test-acceptance-server
-start-test-acceptance-server: ## Start acceptance server
+.PHONY: acceptance-backend-start
+acceptance-backend-start: ## Start backend acceptance server
 	docker run -it --rm -p 55001:55001 $(DOCKER_IMAGE_ACCEPTANCE)
 
-.PHONY: start-test-acceptance-server-ci
-start-test-acceptance-server-ci: ## Start acceptance server in CI mode (no terminal attached)
+.PHONY: ci-acceptance-backend-start
+ci-acceptance-backend-start: ## Start backend acceptance server in headless mode for CI
 	docker run -i --rm -p 55001:55001 $(DOCKER_IMAGE_ACCEPTANCE)
 
-.PHONY: test-acceptance
-test-acceptance: ## Start Cypress in interactive mode
-	pnpm exec cypress open --config-file $(CURRENT_DIR)/cypress.config.js --config specPattern=$(CURRENT_DIR)'/cypress/tests/**/*.{js,jsx,ts,tsx}'
+.PHONY: acceptance-test
+acceptance-test: ## Start Cypress in interactive mode
+	pnpm --filter @plone/volto exec cypress open --config-file $(CURRENT_DIR)/cypress.config.js --config specPattern=$(CURRENT_DIR)'/cypress/tests/**/*.{js,jsx,ts,tsx}'
 
-.PHONY: test-acceptance-headless
-test-acceptance-headless: ## Run cypress tests in headless mode for CI
-	pnpm exec cypress run --config-file $(CURRENT_DIR)/cypress.config.js --config specPattern=$(CURRENT_DIR)'/cypress/tests/**/*.{js,jsx,ts,tsx}'
+.PHONY: ci-acceptance-test
+ci-acceptance-test: ## Run cypress tests in headless mode for CI
+	pnpm --filter @plone/volto exec cypress run --config-file $(CURRENT_DIR)/cypress.config.js --config specPattern=$(CURRENT_DIR)'/cypress/tests/**/*.{js,jsx,ts,tsx}'