diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 0000000..9183f9d --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,2 @@ +[ -n "$CI" ] && exit 0 +yarn lint-staged diff --git a/.i18n.babel.config.js b/.i18n.babel.config.js deleted file mode 100644 index a900a75..0000000 --- a/.i18n.babel.config.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@plone/volto/babel'); diff --git a/CHANGELOG.md b/CHANGELOG.md index ad50815..ba7c0ee 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,26 @@ All notable changes to this project will be documented in this file. Dates are d Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). +### [5.2.3](https://github.com/eea/volto-block-style/compare/5.2.2...5.2.3) - 25 September 2023 + +#### :bug: Bug Fixes + +- fix: preset style not present on text - refs #257668 [Crețu Mihaela - [`bbfd66f`](https://github.com/eea/volto-block-style/commit/bbfd66fdb79c10e95ea8c25f446cca1a1faa90a1)] + +#### :house: Internal changes + +- style: lint-staged reorder in package.json [Alin Voinea - [`ccf0e13`](https://github.com/eea/volto-block-style/commit/ccf0e13d57f05e386dc2434a13f2d207305e6ddb)] + +#### :house: Documentation changes + +- docs: Cleanup Makefile, update DEVELOP documentation, i18n - refs #254894 [valentinab25 - [`63da518`](https://github.com/eea/volto-block-style/commit/63da518812ce0120b0b8be3471207e60934e229f)] + +#### :hammer_and_wrench: Others + +- test: EN locales, pre-commit fix, feature PRs checks Refs #257193 [valentinab25 - [`cf81a8e`](https://github.com/eea/volto-block-style/commit/cf81a8ee6b5549357f59217e3ae432be831746a3)] +- test: Fix eslint and yarn i18n [Alin Voinea - [`ce41324`](https://github.com/eea/volto-block-style/commit/ce41324feea60679910349cfaf7d8a604fd4b287)] +- i18n: Add en [Alin Voinea - [`1f4fe2e`](https://github.com/eea/volto-block-style/commit/1f4fe2e66c6a5a92e22c10cff9086b84b2d7c0c1)] +- test: Update Makefile and docker-compose to align it with Jenkinsfile [valentinab25 - [`b8b8a3c`](https://github.com/eea/volto-block-style/commit/b8b8a3c8e36b64556eeaaf6ad4811c34efab3f4a)] ### [5.2.2](https://github.com/eea/volto-block-style/compare/5.2.1...5.2.2) - 24 July 2023 #### :bug: Bug Fixes diff --git a/DEVELOP.md b/DEVELOP.md index e756935..c9d6b10 100644 --- a/DEVELOP.md +++ b/DEVELOP.md @@ -2,6 +2,28 @@ ## Develop +1. Make sure you have `docker` and `docker compose` installed and running on your machine: + + ```Bash + git clone https://github.com/eea/volto-block-style.git + cd volto-block-style + git checkout -b bugfix-123456 develop + make + make start + ``` + +1. Wait for `Volto started at 0.0.0.0:3000` meesage + +1. Go to http://localhost:3000 + +1. Happy hacking! + + ```Bash + cd src/addons/volto-block-style/ + ``` + +### Or add @eeacms/volto-block-style to your Volto project + Before starting make sure your development environment is properly set. See [Volto Developer Documentation](https://docs.voltocms.com/getting-started/install/) 1. Make sure you have installed `yo`, `@plone/generator-volto` and `mrs-developer` @@ -49,3 +71,37 @@ Before starting make sure your development environment is properly set. See [Vol 1. Happy hacking! cd src/addons/volto-block-style/ + +## Cypress + +To run cypress locally, first make sure you don't have any Volto/Plone running on ports `8080` and `3000`. + +You don't have to be in a `clean-volto-project`, you can be in any Volto Frontend +project where you added `volto-block-style` to `mrs.developer.json` + +Go to: + + ```BASH + cd src/addons/volto-block-style/ + ``` + +Start: + + ```Bash + make + make start + ``` + +This will build and start with Docker a clean `Plone backend` and `Volto Frontend` with `volto-block-style` block installed. + +Open Cypress Interface: + + ```Bash + make cypress-open + ``` + +Or run it: + + ```Bash + make cypress-run + ``` diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..bd8e10d --- /dev/null +++ b/Dockerfile @@ -0,0 +1,14 @@ +# syntax=docker/dockerfile:1 +ARG VOLTO_VERSION +FROM plone/frontend-builder:${VOLTO_VERSION} + +ARG ADDON_NAME +ARG ADDON_PATH + +COPY --chown=node:node ./ /app/src/addons/${ADDON_PATH}/ + +RUN /setupAddon +RUN yarn install + +ENTRYPOINT ["yarn"] +CMD ["start"] diff --git a/Jenkinsfile b/Jenkinsfile index ed8fd6d..565e7a7 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -62,11 +62,17 @@ pipeline { stage('Tests') { when { - allOf { - environment name: 'CHANGE_ID', value: '' - anyOf { - not { changelog '.*^Automated release [0-9\\.]+$' } - branch 'master' + anyOf { + allOf { + not { environment name: 'CHANGE_ID', value: '' } + environment name: 'CHANGE_TARGET', value: 'develop' + } + allOf { + environment name: 'CHANGE_ID', value: '' + anyOf { + not { changelog '.*^Automated release [0-9\\.]+$' } + branch 'master' + } } } } @@ -110,11 +116,17 @@ pipeline { stage('Integration tests') { when { - allOf { - environment name: 'CHANGE_ID', value: '' - anyOf { - not { changelog '.*^Automated release [0-9\\.]+$' } - branch 'master' + anyOf { + allOf { + not { environment name: 'CHANGE_ID', value: '' } + environment name: 'CHANGE_TARGET', value: 'develop' + } + allOf { + environment name: 'CHANGE_ID', value: '' + anyOf { + not { changelog '.*^Automated release [0-9\\.]+$' } + branch 'master' + } } } } @@ -167,13 +179,19 @@ pipeline { stage('Report to SonarQube') { when { - allOf { - environment name: 'CHANGE_ID', value: '' - anyOf { - branch 'master' - allOf { - branch 'develop' - not { changelog '.*^Automated release [0-9\\.]+$' } + anyOf { + allOf { + not { environment name: 'CHANGE_ID', value: '' } + environment name: 'CHANGE_TARGET', value: 'develop' + } + allOf { + environment name: 'CHANGE_ID', value: '' + anyOf { + allOf { + branch 'develop' + not { changelog '.*^Automated release [0-9\\.]+$' } + } + branch 'master' } } } @@ -197,6 +215,37 @@ pipeline { } } + stage('SonarQube compare to master') { + when { + anyOf { + allOf { + not { environment name: 'CHANGE_ID', value: '' } + environment name: 'CHANGE_TARGET', value: 'develop' + } + allOf { + environment name: 'CHANGE_ID', value: '' + branch 'develop' + not { changelog '.*^Automated release [0-9\\.]+$' } + } + } + } + steps { + node(label: 'docker') { + script { + sh '''docker pull eeacms/gitflow''' + sh '''echo "Error" > checkresult.txt''' + catchError(buildResult: 'FAILURE', stageResult: 'FAILURE') { + sh '''set -o pipefail; docker run -i --rm --name="$BUILD_TAG-gitflow-sn" -e GIT_BRANCH="$BRANCH_NAME" -e GIT_NAME="$GIT_NAME" eeacms/gitflow /checkSonarqubemaster.sh | grep -v "Found script" | tee checkresult.txt''' + } + + publishChecks name: 'SonarQube', title: 'Sonarqube Code Quality Check', summary: "Quality check on the SonarQube metrics from branch develop, comparing it with the ones from master branch. No bugs are allowed", + text: readFile(file: 'checkresult.txt'), conclusion: "${currentBuild.currentResult}", + detailsURL: "${env.BUILD_URL}display/redirect" + } + } + } + } + stage('Pull Request') { when { not { diff --git a/Makefile b/Makefile index 3e1bf8c..4a5cbed 100644 --- a/Makefile +++ b/Makefile @@ -1,62 +1,98 @@ -SHELL=/bin/bash +############################################################################## +# Run: +# make +# make start +# +# Go to: +# +# http://localhost:3000 +# +# Cypress: +# +# make cypress-open +# +############################################################################## +# SETUP MAKE +# +## Defensive settings for make: https://tech.davis-hansson.com/p/make/ +SHELL:=bash +.ONESHELL: +# for Makefile debugging purposes add -x to the .SHELLFLAGS +.SHELLFLAGS:=-eu -o pipefail -O inherit_errexit -c +.SILENT: +.DELETE_ON_ERROR: +MAKEFLAGS+=--warn-undefined-variables +MAKEFLAGS+=--no-builtin-rules + +# Colors +# OK=Green, warn=yellow, error=red +ifeq ($(TERM),) +# no colors if not in terminal + MARK_COLOR= + OK_COLOR= + WARN_COLOR= + ERROR_COLOR= + NO_COLOR= +else + MARK_COLOR=`tput setaf 6` + OK_COLOR=`tput setaf 2` + WARN_COLOR=`tput setaf 3` + ERROR_COLOR=`tput setaf 1` + NO_COLOR=`tput sgr0` +endif +############################################################################## +# SETTINGS AND VARIABLE DIR=$(shell basename $$(pwd)) -ADDON ?= "@eeacms/volto-block-style" - -# We like colors -# From: https://coderwall.com/p/izxssa/colored-makefile-for-golang-projects -RED=`tput setaf 1` -GREEN=`tput setaf 2` -RESET=`tput sgr0` -YELLOW=`tput setaf 3` - -project: - npm install -g yo - npm install -g @plone/generator-volto - npm install -g mrs-developer - yo @plone/volto project --addon ${ADDON} --workspace "src/addons/${DIR}" --no-interactive - ln -sf $$(pwd) project/src/addons/ - cp .project.eslintrc.js .eslintrc.js - cd project && yarn - @echo "-------------------" - @echo "$(GREEN)Volto project is ready!$(RESET)" - @echo "$(RED)Now run: cd project && yarn start$(RESET)" - -all: project - -.PHONY: start-test-backend -start-test-backend: ## Start Test Plone Backend - @echo "$(GREEN)==> Start Test Plone Backend$(RESET)" - docker run -i --rm -e ZSERVER_HOST=0.0.0.0 -e ZSERVER_PORT=55001 -p 55001:55001 -e SITE=plone -e APPLY_PROFILES=plone.app.contenttypes:plone-content,plone.restapi:default,kitconcept.volto:default-homepage -e CONFIGURE_PACKAGES=plone.app.contenttypes,plone.restapi,kitconcept.volto,kitconcept.volto.cors -e ADDONS='plone.app.robotframework plone.app.contenttypes plone.restapi kitconcept.volto' plone ./bin/robot-server plone.app.robotframework.testing.PLONE_ROBOT_TESTING - -.PHONY: start-backend-docker -start-backend-docker: ## Starts a Docker-based backend - @echo "$(GREEN)==> Start Docker-based Plone Backend$(RESET)" - docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e ADDONS="kitconcept.volto" -e ZCML="kitconcept.volto.cors" plone +NODE_MODULES?="../../../node_modules" +PLONE_VERSION?=6 +VOLTO_VERSION?=16 +ADDON_PATH="${DIR}" +ADDON_NAME="@eeacms/${ADDON_PATH}" +DOCKER_COMPOSE=PLONE_VERSION=${PLONE_VERSION} VOLTO_VERSION=${VOLTO_VERSION} ADDON_NAME=${ADDON_NAME} ADDON_PATH=${ADDON_PATH} docker compose + +# Top-level targets +.PHONY: all +all: clean install + +.PHONY: clean +clean: ## Cleanup development environment + ${DOCKER_COMPOSE} down --volumes --remove-orphans + +.PHONY: install +install: ## Build and install development environment + echo "Running: ${DOCKER_COMPOSE} build" + ${DOCKER_COMPOSE} pull + ${DOCKER_COMPOSE} build + +.PHONY: start +start: ## Start development environment + echo "Running: ${DOCKER_COMPOSE} up" + ${DOCKER_COMPOSE} up + +.PHONY: shell +shell: ## Start a shell in the frontend container + echo "Running: ${DOCKER_COMPOSE} run frontend bash" + ${DOCKER_COMPOSE} run --entrypoint=bash frontend -.PHONY: test -test: - docker pull plone/volto-addon-ci:alpha - docker run -it --rm -e NAMESPACE="@eeacms" -e GIT_NAME="${DIR}" -e RAZZLE_JEST_CONFIG=jest-addon.config.js -v "$$(pwd):/opt/frontend/my-volto-project/src/addons/${DIR}" -e CI="true" plone/volto-addon-ci:alpha - -.PHONY: test-update -test-update: - docker pull plone/volto-addon-ci:alpha - docker run -it --rm -e NAMESPACE="@eeacms" -e GIT_NAME="${DIR}" -e RAZZLE_JEST_CONFIG=jest-addon.config.js -v "$$(pwd):/opt/frontend/my-volto-project/src/addons/${DIR}" -e CI="true" plone/volto-addon-ci:alpha yarn test src/addons/${DIR}/src --watchAll=false -u +.PHONY: cypress-open +cypress-open: ## Open cypress integration tests + NODE_ENV=development $(NODE_MODULES)/cypress/bin/cypress open -.PHONY: 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 :)" +.PHONY: cypress-run +cypress-run: ## Run cypress integration tests + NODE_ENV=development $(NODE_MODULES)/cypress/bin/cypress run +.PHONY: test +test: ## Run jest tests + ${DOCKER_COMPOSE} run -e CI=1 frontend test -ifeq ($(wildcard ./project),) - NODE_MODULES = "../../../node_modules" -else - NODE_MODULES = "./project/node_modules" -endif +.PHONY: test-update +test-update: ## Update jest tests snapshots + ${DOCKER_COMPOSE} run -e CI=1 frontend test -u .PHONY: stylelint -stylelint: +stylelint: ## Stylelint $(NODE_MODULES)/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}' .PHONY: stylelint-overrides @@ -64,36 +100,32 @@ stylelint-overrides: $(NODE_MODULES)/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides' .PHONY: stylelint-fix -stylelint-fix: +stylelint-fix: ## Fix stylelint $(NODE_MODULES)/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}' --fix $(NODE_MODULES)/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides' --fix .PHONY: prettier -prettier: +prettier: ## Prettier $(NODE_MODULES)/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,json,css,less,md}' .PHONY: prettier-fix -prettier-fix: +prettier-fix: ## Fix prettier $(NODE_MODULES)/.bin/prettier --single-quote --write 'src/**/*.{js,jsx,json,css,less,md}' .PHONY: lint -lint: +lint: ## ES Lint $(NODE_MODULES)/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}' .PHONY: lint-fix -lint-fix: +lint-fix: ## Fix ES Lint $(NODE_MODULES)/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}' .PHONY: i18n -i18n: +i18n: ## i18n rm -rf build/messages NODE_ENV=development $(NODE_MODULES)/.bin/i18n --addon -.PHONY: cypress-run -cypress-run: - rm -rf .nyc_output - NODE_ENV=development $(NODE_MODULES)/cypress/bin/cypress run - -.PHONY: cypress-open -cypress-open: - NODE_ENV=development $(NODE_MODULES)/cypress/bin/cypress open +.PHONY: 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 :)" + head -n 14 Makefile diff --git a/README.md b/README.md index d0c35f3..c067d20 100644 --- a/README.md +++ b/README.md @@ -56,6 +56,10 @@ block types that you want to enable. By default it is enabled for all blocks. 1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone + ```Bash + docker compose up backend + ``` + 1. Start Volto frontend - If you already have a volto project, just update `package.json`: diff --git a/cypress.config.js b/cypress.config.js index 30be8ac..4846ce9 100644 --- a/cypress.config.js +++ b/cypress.config.js @@ -2,12 +2,12 @@ const { defineConfig } = require('cypress'); module.exports = defineConfig({ viewportWidth: 1280, - defaultCommandTimeout: 8888, + defaultCommandTimeout: 5000, chromeWebSecurity: false, reporter: 'junit', video: true, retries: { - runMode: 8, + runMode: 1, openMode: 0, }, reporterOptions: { diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..5d79f5c --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,32 @@ +version: "3" +services: + backend: + image: eeacms/plone-backend + ports: + - "8080:8080" + environment: + SITE: "Plone" + PROFILES: "eea.kitkat:testing" + + frontend: + build: + context: ./ + dockerfile: ./Dockerfile + args: + ADDON_NAME: "${ADDON_NAME}" + ADDON_PATH: "${ADDON_PATH}" + VOLTO_VERSION: ${VOLTO_VERSION:-16} + ports: + - "3000:3000" + - "3001:3001" + depends_on: + - backend + volumes: + - ./:/app/src/addons/${ADDON_PATH} + environment: + CI: "true" + NODE_ENV: "development" + RAZZLE_JEST_CONFIG: "src/addons/${ADDON_PATH}/jest-addon.config.js" + RAZZLE_INTERNAL_API_PATH: "http://backend:8080/Plone" + RAZZLE_DEV_PROXY_API_PATH: "http://backend:8080/Plone" + HOST: "0.0.0.0" diff --git a/locales/de/LC_MESSAGES/volto.po b/locales/de/LC_MESSAGES/volto.po new file mode 100644 index 0000000..995073f --- /dev/null +++ b/locales/de/LC_MESSAGES/volto.po @@ -0,0 +1,70 @@ +msgid "" +msgstr "" +"Project-Id-Version: \n" +"Report-Msgid-Bugs-To: \n" +"POT-Creation-Date: \n" +"PO-Revision-Date: \n" +"Last-Translator: \n" +"Language: \n" +"Language-Team: \n" +"Content-Type: \n" +"Content-Transfer-Encoding: \n" +"Plural-Forms: \n" + +#: Widgets/Align +#: Widgets/TextAlign +# defaultMessage: Center +msgid "Center" +msgstr "" + +#: Widgets/TextAlign +# defaultMessage: Clear selection +msgid "Clear selection" +msgstr "" + +#: Blocks/StretchBlock +# defaultMessage: Fit +msgid "Fit" +msgstr "" + +#: Widgets/Align +# defaultMessage: Full +msgid "Full" +msgstr "" + +#: Widgets/TextAlign +# defaultMessage: Justify +msgid "Justify" +msgstr "" + +#: Widgets/Align +#: Widgets/TextAlign +# defaultMessage: Left +msgid "Left" +msgstr "" + +#: Widgets/Align +# defaultMessage: Narrow +msgid "Narrow" +msgstr "" + +#: Widgets/Align +# defaultMessage: None +msgid "None" +msgstr "" + +#: Widgets/Align +#: Widgets/TextAlign +# defaultMessage: Right +msgid "Right" +msgstr "" + +#: Blocks/StretchBlock +# defaultMessage: Stretch +msgid "Stretch" +msgstr "" + +#: Widgets/Align +# defaultMessage: Wide +msgid "Wide" +msgstr "" diff --git a/locales/en/LC_MESSAGES/volto.po b/locales/en/LC_MESSAGES/volto.po new file mode 100644 index 0000000..995073f --- /dev/null +++ b/locales/en/LC_MESSAGES/volto.po @@ -0,0 +1,70 @@ +msgid "" +msgstr "" +"Project-Id-Version: \n" +"Report-Msgid-Bugs-To: \n" +"POT-Creation-Date: \n" +"PO-Revision-Date: \n" +"Last-Translator: \n" +"Language: \n" +"Language-Team: \n" +"Content-Type: \n" +"Content-Transfer-Encoding: \n" +"Plural-Forms: \n" + +#: Widgets/Align +#: Widgets/TextAlign +# defaultMessage: Center +msgid "Center" +msgstr "" + +#: Widgets/TextAlign +# defaultMessage: Clear selection +msgid "Clear selection" +msgstr "" + +#: Blocks/StretchBlock +# defaultMessage: Fit +msgid "Fit" +msgstr "" + +#: Widgets/Align +# defaultMessage: Full +msgid "Full" +msgstr "" + +#: Widgets/TextAlign +# defaultMessage: Justify +msgid "Justify" +msgstr "" + +#: Widgets/Align +#: Widgets/TextAlign +# defaultMessage: Left +msgid "Left" +msgstr "" + +#: Widgets/Align +# defaultMessage: Narrow +msgid "Narrow" +msgstr "" + +#: Widgets/Align +# defaultMessage: None +msgid "None" +msgstr "" + +#: Widgets/Align +#: Widgets/TextAlign +# defaultMessage: Right +msgid "Right" +msgstr "" + +#: Blocks/StretchBlock +# defaultMessage: Stretch +msgid "Stretch" +msgstr "" + +#: Widgets/Align +# defaultMessage: Wide +msgid "Wide" +msgstr "" diff --git a/locales/it/LC_MESSAGES/volto.po b/locales/it/LC_MESSAGES/volto.po new file mode 100644 index 0000000..995073f --- /dev/null +++ b/locales/it/LC_MESSAGES/volto.po @@ -0,0 +1,70 @@ +msgid "" +msgstr "" +"Project-Id-Version: \n" +"Report-Msgid-Bugs-To: \n" +"POT-Creation-Date: \n" +"PO-Revision-Date: \n" +"Last-Translator: \n" +"Language: \n" +"Language-Team: \n" +"Content-Type: \n" +"Content-Transfer-Encoding: \n" +"Plural-Forms: \n" + +#: Widgets/Align +#: Widgets/TextAlign +# defaultMessage: Center +msgid "Center" +msgstr "" + +#: Widgets/TextAlign +# defaultMessage: Clear selection +msgid "Clear selection" +msgstr "" + +#: Blocks/StretchBlock +# defaultMessage: Fit +msgid "Fit" +msgstr "" + +#: Widgets/Align +# defaultMessage: Full +msgid "Full" +msgstr "" + +#: Widgets/TextAlign +# defaultMessage: Justify +msgid "Justify" +msgstr "" + +#: Widgets/Align +#: Widgets/TextAlign +# defaultMessage: Left +msgid "Left" +msgstr "" + +#: Widgets/Align +# defaultMessage: Narrow +msgid "Narrow" +msgstr "" + +#: Widgets/Align +# defaultMessage: None +msgid "None" +msgstr "" + +#: Widgets/Align +#: Widgets/TextAlign +# defaultMessage: Right +msgid "Right" +msgstr "" + +#: Blocks/StretchBlock +# defaultMessage: Stretch +msgid "Stretch" +msgstr "" + +#: Widgets/Align +# defaultMessage: Wide +msgid "Wide" +msgstr "" diff --git a/locales/ro/LC_MESSAGES/volto.po b/locales/ro/LC_MESSAGES/volto.po new file mode 100644 index 0000000..995073f --- /dev/null +++ b/locales/ro/LC_MESSAGES/volto.po @@ -0,0 +1,70 @@ +msgid "" +msgstr "" +"Project-Id-Version: \n" +"Report-Msgid-Bugs-To: \n" +"POT-Creation-Date: \n" +"PO-Revision-Date: \n" +"Last-Translator: \n" +"Language: \n" +"Language-Team: \n" +"Content-Type: \n" +"Content-Transfer-Encoding: \n" +"Plural-Forms: \n" + +#: Widgets/Align +#: Widgets/TextAlign +# defaultMessage: Center +msgid "Center" +msgstr "" + +#: Widgets/TextAlign +# defaultMessage: Clear selection +msgid "Clear selection" +msgstr "" + +#: Blocks/StretchBlock +# defaultMessage: Fit +msgid "Fit" +msgstr "" + +#: Widgets/Align +# defaultMessage: Full +msgid "Full" +msgstr "" + +#: Widgets/TextAlign +# defaultMessage: Justify +msgid "Justify" +msgstr "" + +#: Widgets/Align +#: Widgets/TextAlign +# defaultMessage: Left +msgid "Left" +msgstr "" + +#: Widgets/Align +# defaultMessage: Narrow +msgid "Narrow" +msgstr "" + +#: Widgets/Align +# defaultMessage: None +msgid "None" +msgstr "" + +#: Widgets/Align +#: Widgets/TextAlign +# defaultMessage: Right +msgid "Right" +msgstr "" + +#: Blocks/StretchBlock +# defaultMessage: Stretch +msgid "Stretch" +msgstr "" + +#: Widgets/Align +# defaultMessage: Wide +msgid "Wide" +msgstr "" diff --git a/locales/volto.pot b/locales/volto.pot index e69de29..b9c309c 100644 --- a/locales/volto.pot +++ b/locales/volto.pot @@ -0,0 +1,72 @@ +msgid "" +msgstr "" +"Project-Id-Version: Plone\n" +"POT-Creation-Date: 2023-08-29T17:26:00.716Z\n" +"Last-Translator: Plone i18n \n" +"Language-Team: Plone i18n \n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=utf-8\n" +"Content-Transfer-Encoding: 8bit\n" +"Plural-Forms: nplurals=1; plural=0;\n" +"Language-Code: en\n" +"Language-Name: English\n" +"Preferred-Encodings: utf-8\n" +"Domain: volto\n" + +#: Widgets/Align +#: Widgets/TextAlign +# defaultMessage: Center +msgid "Center" +msgstr "" + +#: Widgets/TextAlign +# defaultMessage: Clear selection +msgid "Clear selection" +msgstr "" + +#: Blocks/StretchBlock +# defaultMessage: Fit +msgid "Fit" +msgstr "" + +#: Widgets/Align +# defaultMessage: Full +msgid "Full" +msgstr "" + +#: Widgets/TextAlign +# defaultMessage: Justify +msgid "Justify" +msgstr "" + +#: Widgets/Align +#: Widgets/TextAlign +# defaultMessage: Left +msgid "Left" +msgstr "" + +#: Widgets/Align +# defaultMessage: Narrow +msgid "Narrow" +msgstr "" + +#: Widgets/Align +# defaultMessage: None +msgid "None" +msgstr "" + +#: Widgets/Align +#: Widgets/TextAlign +# defaultMessage: Right +msgid "Right" +msgstr "" + +#: Blocks/StretchBlock +# defaultMessage: Stretch +msgid "Stretch" +msgstr "" + +#: Widgets/Align +# defaultMessage: Wide +msgid "Wide" +msgstr "" diff --git a/package.json b/package.json index b5e31d2..320c3d9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@eeacms/volto-block-style", - "version": "5.2.2", + "version": "5.2.3", "description": "volto-block-style: Volto add-on", "main": "src/index.js", "author": "European Environment Agency: IDM2 A-Team", @@ -29,9 +29,32 @@ "@cypress/code-coverage": "^3.10.0", "@plone/scripts": "*", "babel-plugin-transform-class-properties": "^6.24.1", + "husky": "*", + "lint-staged": "*", "md5": "^2.3.0", "postcss-less": "6.0.0" }, + "lint-staged": { + "src/**/*.{js,jsx,ts,tsx,json}": [ + "make lint-fix", + "make prettier-fix" + ], + "src/**/*.{jsx}": [ + "make i18n" + ], + "theme/**/*.{css,less}": [ + "make stylelint-fix" + ], + "src/**/*.{css,less}": [ + "make stylelint-fix" + ], + "theme/**/*.overrides": [ + "make stylelint-fix" + ], + "src/**/*.overrides": [ + "make stylelint-fix" + ] + }, "scripts": { "release": "release-it", "release-major-beta": "release-it major --preRelease=beta", @@ -49,6 +72,7 @@ "lint:fix": "make lint-fix", "i18n": "make i18n", "cypress:run": "make cypress-run", - "cypress:open": "make cypress-open" + "cypress:open": "make cypress-open", + "prepare": "husky install" } } diff --git a/src/BlockStyleWrapper/BlockStyleWrapperEdit.test.jsx b/src/BlockStyleWrapper/BlockStyleWrapperEdit.test.jsx new file mode 100644 index 0000000..cb2c978 --- /dev/null +++ b/src/BlockStyleWrapper/BlockStyleWrapperEdit.test.jsx @@ -0,0 +1,51 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import { BrowserRouter as Router } from 'react-router-dom'; +import { Provider } from 'react-redux'; +import configureMockStore from 'redux-mock-store'; +import '@testing-library/jest-dom/extend-expect'; + +import BlockStyleWrapperEdit from './BlockStyleWrapperEdit'; + +jest.mock('react-portal', () => { + return { + Portal: ({ children }) => children, + }; +}); + +describe('BlockStyleWrapperEdit', () => { + const defaultProps = { + selected: true, + block: {}, + data: { + align: 'left', + size: 'medium', + styles: { + backgroundColor: 'red', + textColor: 'blue', + }, + }, + }; + + const initialState = { + userSession: { + token: 'mockToken', + }, + }; + + const mockStore = configureMockStore(); + const store = mockStore(initialState); + + it('renders correctly when selected is true', () => { + const { container } = render( + + + + + , + ); + + expect(container.querySelector('.open-styles-button')).toBeInTheDocument(); + expect(container.querySelector('.styled')).toBeInTheDocument(); + }); +}); diff --git a/src/BlockStyleWrapper/index.js b/src/BlockStyleWrapper/index.js index d711e7b..bef204b 100644 --- a/src/BlockStyleWrapper/index.js +++ b/src/BlockStyleWrapper/index.js @@ -1,2 +1,2 @@ -export BlockStyleWrapperEdit from './BlockStyleWrapperEdit'; -export BlockStyleWrapperView from './BlockStyleWrapperView'; +export { default as BlockStyleWrapperEdit } from './BlockStyleWrapperEdit'; +export { default as BlockStyleWrapperView } from './BlockStyleWrapperView'; diff --git a/src/StyleWrapper/StyleWrapperView.jsx b/src/StyleWrapper/StyleWrapperView.jsx index 21f1300..6b1a714 100644 --- a/src/StyleWrapper/StyleWrapperView.jsx +++ b/src/StyleWrapper/StyleWrapperView.jsx @@ -172,7 +172,7 @@ const StyleWrapperView = (props) => { const ViewComponentWrapper = style?.viewComponent; return styled ? ( - nativeIntegration ? ( + nativeIntegration && !style_name?.includes('content-box') ? ( children ) : (
diff --git a/src/StyleWrapper/StyleWrapperView.test.jsx b/src/StyleWrapper/StyleWrapperView.test.jsx index bbf5e57..1359b0b 100644 --- a/src/StyleWrapper/StyleWrapperView.test.jsx +++ b/src/StyleWrapper/StyleWrapperView.test.jsx @@ -31,6 +31,12 @@ describe('getInlineStyles', () => { borderRadius: '5px', }; + const dataWithLessProperties = { + margin: { top: '1', right: '1', bottom: '1', left: '1', unit: 'em' }, + padding: { top: '2', right: '2', bottom: '2', left: '2', unit: 'em' }, + borderRadius: '5px', + }; + const expectedStyles = { backgroundColor: 'red', '--background-color': 'red', @@ -46,6 +52,13 @@ describe('getInlineStyles', () => { padding: '2em 2em 2em 2em', borderRadius: '5px', }; + + const expectedStylesWithLessProperties = { + margin: '1em 1em 1em 1em', + padding: '2em 2em 2em 2em', + borderRadius: '5px', + }; + it('returns the correct styles', () => { const props = { mode: 'edit', @@ -120,6 +133,25 @@ describe('getInlineStyles', () => { const styles = getInlineStyles(newData, props); expect(styles).toEqual(newExpectedStyles); }); + + it('returns the correct styles with missing properties', () => { + const newData = { + ...dataWithLessProperties, + shadowColor: '', + }; + + const newExpectedStyles = { + ...expectedStylesWithLessProperties, + lineHeight: undefined, + }; + + const props = { + mode: 'edit', + }; + + const styles = getInlineStyles(newData, props); + expect(styles).toEqual(newExpectedStyles); + }); }); describe('getStyle', () => { diff --git a/src/StyleWrapper/index.js b/src/StyleWrapper/index.js index df009b4..561c7bb 100644 --- a/src/StyleWrapper/index.js +++ b/src/StyleWrapper/index.js @@ -1,2 +1,2 @@ -export StyleWrapperEdit from './StyleWrapperEdit'; -export StyleWrapperView from './StyleWrapperView'; +export { default as StyleWrapperEdit } from './StyleWrapperEdit'; +export { default as StyleWrapperView } from './StyleWrapperView';