Polishment, i18n and README

.github/workflows/acceptance.yml

@@ -61,7 +61,7 @@ jobs:
         name: Start Servers
         with:
           run: |
-            make start-test-acceptance-server-ci &
+            make start-test-acceptance-server &
             make start-test-acceptance-frontend &
           # your step-level and job-level environment variables are available to your commands as-is
           # npm install will count towards the wait-for timeout

.github/workflows/i18n.yml

@@ -0,0 +1,44 @@
+name: i18n
+on: [push]
+jobs:
+  unit:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Main checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+
+      - 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: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: |
+          pnpm i
+          make install
+          pnpm i
+
+      - name: test i18n command
+        run: make i18n

Makefile

@@ -1,5 +1,3 @@
-# Yeoman Volto App development
-
 ### Defensive settings for make:
 #     https://tech.davis-hansson.com/p/make/
 SHELL:=bash
@@ -27,16 +25,16 @@ DOCKER_IMAGE_ACCEPTANCE=plone/server-acceptance:${PLONE_VERSION}
 
 ADDON_NAME='@kitconcept/volto-button-block'
 
-.PHONY: install
-install: ## Build
-	@echo "$(GREEN)==> Installs the dev environment $(RESET)"
-	pnpm exec missdev --no-config --fetch-https
-
 .PHONY: help
-help:		## Show this help.
+help:		## Show this help
 	@echo -e "$$(grep -hE '^\S+:.*##' $(MAKEFILE_LIST) | sed -e 's/:.*##\s*/:/' -e 's/^\(.\+\):\(.*\)/\\x1b[36m\1\\x1b[m:\2/' | column -c2 -t -s :)"
 
 # Dev Helpers
+.PHONY: install
+install: ## Installs the dev environment using mrs-developer
+	@echo "$(GREEN)==> Installs the dev environment $(RESET)"
+	pnpm exec missdev --no-config --fetch-https
+
 .PHONY: i18n
 i18n: ## Sync i18n
 	pnpm --filter $(ADDON_NAME) i18n
@@ -62,31 +60,27 @@ test-ci: ## Run unit tests in CI
 	CI=1 RAZZLE_JEST_CONFIG=$(CURRENT_DIR)/jest-addon.config.js pnpm --filter @plone/volto test
 
 .PHONY: start-backend-docker
-start-backend-docker:		## Starts a Docker-based backend
+start-backend-docker:		## Starts a Docker-based backend for developing
 	@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)
 
 ## Acceptance
 .PHONY: start-test-acceptance-frontend-dev
-start-test-acceptance-frontend-dev: ## Start acceptance server
+start-test-acceptance-frontend-dev: ## Start acceptance frontend in dev mode
 	RAZZLE_API_PATH=http://127.0.0.1:55001/plone pnpm start
 
 .PHONY: start-test-acceptance-frontend
-start-test-acceptance-frontend: ## Start acceptance server
+start-test-acceptance-frontend: ## Start acceptance frontend in prod 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
 	docker run -it --rm -p 55001:55001 $(DOCKER_IMAGE_ACCEPTANCE)
 
-.PHONY: start-test-acceptance-server-ci
-start-test-acceptance-server-ci: ## Start acceptance server
-	docker run -i --rm -p 55001:55001 $(DOCKER_IMAGE_ACCEPTANCE)
-
 .PHONY: test-acceptance
-test-acceptance: ## Start Cypress
+test-acceptance: ## 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 CI
+test-acceptance-headless: ## 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}'

README.md

@@ -53,6 +53,108 @@ yarn start
 
 Go to http://localhost:3000, login, create a new page. The button block will show up in the Volto blocks chooser.
 
+## Development
+
+The development of this add-on is done in isolation using a new approach using pnpm workspaces and latest `mrs-developer` and other Volto core improvements.
+For this reason, it only works with pnpm and Volto 18 (currently in alpha)
+
+### Requisites
+
+- Volto 18 (2024-03-21: currently in alpha)
+- pnpm as package manager
+
+### Make convenience commands
+
+Run `make help` to list the available commands.
+
+```text
+help                                 Show this help
+install                              Installs the dev environment using mrs-developer
+i18n                                 Sync i18n
+format                               Format codebase
+lint                                 Lint Codebase
+test                                 Run unit tests
+test-ci                              Run unit tests in CI
+start-backend-docker                 Starts a Docker-based backend for developing
+start-test-acceptance-frontend-dev   Start acceptance frontend in dev mode
+start-test-acceptance-frontend       Start acceptance frontend in prod mode
+start-test-acceptance-server         Start acceptance server
+test-acceptance                      Start Cypress in interactive mode
+test-acceptance-headless             Run cypress tests in headless mode for CI
+```
+
+### Development Environment Setup
+
+Run
+
+```shell
+pnpm i
+make install
+pnpm i
+```
+
+### Start developing
+
+Run (in separate terminal sessions)
+
+```shell
+make start-backend-docker
+```
+
+```shell
+pnpm start
+```
+
+### Linting
+
+Run
+
+```shell
+make lint
+```
+
+### Formatting
+
+Run
+
+```shell
+make format
+```
+
+### i18n
+
+Run
+
+```shell
+make i18n
+```
+
+### Unit tests
+
+Run
+
+```shell
+make test
+```
+
+### Run Cypress tests
+
+Run (in separate terminal sessions)
+
+```shell
+make start-test-acceptance-frontend-dev
+```
+
+```shell
+make start-test-acceptance-server
+```
+
+Start the Cypress interactive test runner:
+
+```shell
+make test-acceptance
+```
+
 # Credits
 
 <img alt="Forschungszentrum Jülich" src="https://github.com/kitconcept/volto-blocks/raw/master/fz-juelich.svg" width="200px" />

package.json

@@ -16,6 +16,7 @@
     "access": "public"
   },
   "scripts": {
+    "preinstall": "npx only-allow pnpm",
     "start": "pnpm build:deps && VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto start",
     "start:prod": "pnpm --filter @plone/volto start:prod",
     "build": "pnpm build:deps && VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto build",

packages/volto-button-block/locales/de/LC_MESSAGES/volto.po

@@ -32,6 +32,11 @@ msgstr "Ausrichtung"
 msgid "Button Block"
 msgstr "Knopf"
 
+#. Default: "Button text"
+#: components/View
+msgid "Button text"
+msgstr ""
+
 #. Default: "Center"
 #: components/Widgets/AlignWidget
 msgid "Center"

packages/volto-button-block/locales/en/LC_MESSAGES/volto.po

@@ -27,6 +27,11 @@ msgstr ""
 msgid "Button Block"
 msgstr ""
 
+#. Default: "Button text"
+#: components/View
+msgid "Button text"
+msgstr ""
+
 #. Default: "Center"
 #: components/Widgets/AlignWidget
 msgid "Center"

packages/volto-button-block/locales/nl/LC_MESSAGES/volto.po

@@ -31,6 +31,11 @@ msgstr "Uitlijning"
 msgid "Button Block"
 msgstr "Knop"
 
+#. Default: "Button text"
+#: components/View
+msgid "Button text"
+msgstr ""
+
 #. Default: "Center"
 #: components/Widgets/AlignWidget
 msgid "Center"

packages/volto-button-block/locales/pt_BR/LC_MESSAGES/volto.po

@@ -32,6 +32,11 @@ msgstr "Alinhamento"
 msgid "Button Block"
 msgstr "Bloco de Botão"
 
+#. Default: "Button text"
+#: components/View
+msgid "Button text"
+msgstr ""
+
 #. Default: "Center"
 #: components/Widgets/AlignWidget
 msgid "Center"

packages/volto-button-block/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-03-20T20:01:06.848Z\n"
+"POT-Creation-Date: 2024-03-21T09:47:55.308Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Content-Type: text/plain; charset=utf-8\n"
@@ -29,6 +29,11 @@ msgstr ""
 msgid "Button Block"
 msgstr ""
 
+#. Default: "Button text"
+#: components/View
+msgid "Button text"
+msgstr ""
+
 #. Default: "Center"
 #: components/Widgets/AlignWidget
 msgid "Center"