chore: Update linters

plonegovbr · Feb 24, 2024 · cc79a3b · cc79a3b
1 parent fc8018d
commit cc79a3b
Show file tree

Hide file tree

Showing 13 changed files with 122 additions and 251 deletions.
diff --git a/Makefile b/Makefile
@@ -22,7 +22,7 @@ RESET=`tput sgr0`
 YELLOW=`tput setaf 3`
 
 PLONE_VERSION=6
-VOLTO_VERSION=16.26.0
+VOLTO_VERSION=17.15.2
 
 ADDON_NAME='@plonegovbr/volto-code-block'
 ADDON_PATH='volto-code-block'
@@ -32,45 +32,43 @@ CMD=CURRENT_DIR=${CURRENT_DIR} ADDON_NAME=${ADDON_NAME} ADDON_PATH=${ADDON_PATH}
 DOCKER_COMPOSE=${CMD} -p ${ADDON_PATH} -f ${DEV_COMPOSE}
 ACCEPTANCE=${CMD} -p ${ADDON_PATH}-acceptance -f ${ACCEPTANCE_COMPOSE}
 
+COMPOSE_FILE=dockerfiles/docker-compose.yml
+ACCEPTANCE_COMPOSE=acceptance/docker-compose.yml
+CMD=CURRENT_DIR=${CURRENT_DIR} ADDON_NAME=${ADDON_NAME} ADDON_PATH=${ADDON_PATH} VOLTO_VERSION=${VOLTO_VERSION} PLONE_VERSION=${PLONE_VERSION} docker compose
+DOCKER_COMPOSE=${CMD} -p ${ADDON_PATH} -f ${COMPOSE_FILE}
+DEV_COMPOSE=COMPOSE_PROFILES=dev ${DOCKER_COMPOSE}
+LIVE_COMPOSE=COMPOSE_PROFILES=dev ${DOCKER_COMPOSE}
+ACCEPTANCE=${CMD} -p ${ADDON_PATH}-acceptance -f ${ACCEPTANCE_COMPOSE}
+
 .PHONY: build-backend
 build-backend: ## Build
 	@echo "$(GREEN)==> Build Backend Container $(RESET)"
-	${DOCKER_COMPOSE} build backend
+	${DEV_COMPOSE} build backend
 
 .PHONY: start-backend
 start-backend: ## Starts Docker backend
 	@echo "$(GREEN)==> Start Docker-based Plone Backend $(RESET)"
-	${DOCKER_COMPOSE} up backend -d
+	${DEV_COMPOSE} up backend -d
 
 .PHONY: stop-backend
 stop-backend: ## Stop Docker backend
 	@echo "$(GREEN)==> Stop Docker-based Plone Backend $(RESET)"
-	${DOCKER_COMPOSE} stop backend
+	${DEV_COMPOSE} stop backend
+
+.PHONY: build-live
+build-live: ## Build Addon live
+	@echo "$(GREEN)==> Build Addon development container $(RESET)"
+	${LIVE_COMPOSE} build addon-live
 
 .PHONY: build-addon
 build-addon: ## Build Addon dev
 	@echo "$(GREEN)==> Build Addon development container $(RESET)"
-	${DOCKER_COMPOSE} build addon-dev
-	${DOCKER_COMPOSE} build addon-storybook
+	${DEV_COMPOSE} build addon-dev
 
 .PHONY: start-dev
 start-dev: ## Starts Dev container
 	@echo "$(GREEN)==> Start Addon Development container $(RESET)"
-	${DOCKER_COMPOSE} up addon-dev
-
-.PHONY: start-storybook
-start-storybook: ## Starts Storybook
-	@echo "$(GREEN)==> Start Storybook $(RESET)"
-	${DOCKER_COMPOSE} up addon-storybook
-
-.PHONY: debug
-debug: ## Starts Dev container
-	@echo "$(GREEN)==> Start Addon Development container $(RESET)"
-	${DOCKER_COMPOSE} exec -it addon-dev bash
-
-.PHONY: debug-frontend
-debug-frontend:  ## Run bash in the Frontend container (for debug infrastructure purposes)
-	${DOCKER_COMPOSE} run --entrypoint bash addon-dev
+	${DEV_COMPOSE} up addon-dev backend
 
 .PHONY: dev
 dev: ## Develop the addon
@@ -84,73 +82,76 @@ dev: ## Develop the addon
 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 :)"
 
+## Setup the local environment
+.PHONY: install
+install: ## Install the local environment, Cypress, build acceptance containers
+	yarn
+	make install-acceptance
+
 # Dev Helpers
 .PHONY: i18n
 i18n: ## Sync i18n
-	${DOCKER_COMPOSE} run addon-dev i18n
-
-.PHONY: build-storybook
-build-storybook: ## Build storybook
-	@echo "$(GREEN)==> Build storybook $(RESET)"
-	if [ ! -d .storybook ]; then mkdir .storybook; fi
-	${DOCKER_COMPOSE} run addon-storybook build-storybook
-
-.PHONY: release
-release: ## Release package
-	yarn
-	npx release-it
-
-.PHONY: dry-run-release
-dry-run-release: ## Dry Run Release package
-	yarn
-	npx release-it --dry-run
+	@echo "$(YELLOW)==> Do not forget to setup the local environment (make install) $(RESET)"
+	yarn i18n
 
 .PHONY: format
 format: ## Format codebase
-	${DOCKER_COMPOSE} run addon-dev lint:fix
-	${DOCKER_COMPOSE} run addon-dev prettier:fix
-	${DOCKER_COMPOSE} run addon-dev stylelint:fix
+	${DEV_COMPOSE} run --rm addon-dev lint:fix
+	${DEV_COMPOSE} run --rm addon-dev prettier:fix
+	${DEV_COMPOSE} run --rm addon-dev stylelint:fix
 
 .PHONY: lint
 lint: ## Lint Codebase
-	${DOCKER_COMPOSE} run addon-dev lint
-	${DOCKER_COMPOSE} run addon-dev prettier
-	${DOCKER_COMPOSE} run addon-dev stylelint
+	${DEV_COMPOSE} run --rm addon-dev lint
+	${DEV_COMPOSE} run --rm addon-dev prettier
+	${DEV_COMPOSE} run --rm addon-dev stylelint --allow-empty-input
 
 .PHONY: test
 test: ## Run unit tests
-	${DOCKER_COMPOSE} run addon-dev test --watchAll
+	${DEV_COMPOSE} run --rm addon-dev test --watchAll
 
 .PHONY: test-ci
 test-ci: ## Run unit tests in CI
-	${DOCKER_COMPOSE} run -e CI=1 addon-dev test
+	${DEV_COMPOSE} run -e CI=1 addon-dev test
 
 ## Acceptance
 .PHONY: install-acceptance
-install-acceptance: ## Install Cypress, build containers
+install-acceptance: ## Install Cypress, build acceptance containers
 	(cd acceptance && yarn)
 	${ACCEPTANCE} --profile dev --profile prod build
 
 .PHONY: start-test-acceptance-server
-start-test-acceptance-server: ## Start acceptance server
-	${ACCEPTANCE} --profile dev up -d
+start-test-acceptance-server: ## Start acceptance server (for use it in while developing)
+	${ACCEPTANCE} --profile dev up
 
 .PHONY: start-test-acceptance-server-prod
-start-test-acceptance-server-prod: ## Start acceptance server
+start-test-acceptance-server-prod: ## Start acceptance server in prod (used by CI)
 	${ACCEPTANCE} --profile prod up -d
 
 .PHONY: test-acceptance
-test-acceptance: ## Start Cypress
+test-acceptance: ## Start Cypress (for use it while developing)
 	(cd acceptance && ./node_modules/.bin/cypress open)
 
 .PHONY: test-acceptance-headless
 test-acceptance-headless: ## Run cypress tests in CI
 	(cd acceptance && ./node_modules/.bin/cypress run)
 
 .PHONY: stop-test-acceptance-server
-stop-test-acceptance-server: ## Stop acceptance server
-	${ACCEPTANCE} down
+stop-test-acceptance-server: ## Stop acceptance server (for use it while finished developing)
+	${ACCEPTANCE} --profile dev down
 
 .PHONY: status-test-acceptance-server
-status-test-acceptance-server: ## Status of Acceptance Server
+status-test-acceptance-server: ## Status of Acceptance Server (for use it while developing)
 	${ACCEPTANCE} ps
+
+.PHONY: debug-frontend
+debug-frontend:  ## Run bash in the Frontend container (for debug infrastructure purposes)
+	${DEV_COMPOSE} run --entrypoint bash addon-dev
+
+.PHONY: pull-backend-image
+pull-backend-image:  ## Pulls and updates the backend image (for use it while developing)
+	docker pull ghcr.io/voltointranet-trece:latest
+
+.PHONY: release
+release:  ## Release a version of the add-on
+	yarn release
diff --git a/jest-addon.config.js b/jest-addon.config.js
@@ -1,9 +1,6 @@
 module.exports = {
   testMatch: ['**/src/addons/**/?(*.)+(spec|test).[jt]s?(x)'],
-  collectCoverageFrom: [
-    'src/addons/**/src/**/*.{js,jsx,ts,tsx}',
-    '!src/**/*.d.ts',
-  ],
+  collectCoverageFrom: ['src/addons/**/src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts'],
   transformIgnorePatterns: ['node_modules/(?!(volto-slate|@plone/volto)/)'],
   moduleNameMapper: {
     '@plone/volto/cypress': '<rootDir>/node_modules/@plone/volto/cypress',
@@ -12,14 +9,11 @@ module.exports = {
     '@package/(.*)$': '<rootDir>/src/$1',
     '@root/(.*)$': '<rootDir>/src/$1',
     '~/(.*)$': '<rootDir>/src/$1',
-    'load-volto-addons':
-      '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
+    'load-volto-addons': '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
   },
   transform: {
     '^.+\\.js(x)?$': 'babel-jest',
-    '^.+\\.css$': 'jest-css-modules',
-    '^.+\\.less$': 'jest-css-modules',
-    '^.+\\.scss$': 'jest-css-modules',
     '^.+\\.(png)$': 'jest-file',
     '^.+\\.(jpg)$': 'jest-file',
     '^.+\\.(svg)$': './node_modules/@plone/volto/jest-svgsystem-transform.js',

diff --git a/package.json b/package.json
@@ -22,73 +22,45 @@
     "cypress:open": "NODE_ENV=production ../../../node_modules/cypress/bin/cypress open",
     "cypress:run": "NODE_ENV=test ../../../node_modules/cypress/bin/cypress run",
     "cypress:start-frontend": "cd ../../../ && RAZZLE_API_PATH=http://localhost:55001/plone yarn start",
-    "dry-release": "release-it --dry-run",
     "i18n": "rm -rf build/messages && NODE_ENV=production i18n --addon",
-    "prettier:fix": "./node_modules/.bin/prettier --single-quote --write 'src/**/*.{js,jsx,json,css,less,md}'",
-    "prettier": "./node_modules/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,json,css,less,md}'",
-    "release-alpha": "release-it --preRelease=alpha",
-    "release-major-alpha": "release-it major --preRelease=alpha",
+    "dry-release": "release-it --dry-run",
     "release": "release-it",
-    "stylelint:fix": "yarn stylelint --fix && yarn stylelint:overrides --fix",
-    "stylelint:overrides": "./node_modules/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'",
-    "stylelint": "./node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'"
+    "release-major-alpha": "release-it major --preRelease=alpha",
+    "release-alpha": "release-it --preRelease=alpha",
+    "release-rc": "release-it --preRelease=rc"
   },
   "peerDependencies": {
-    "@plone/volto": ">=15.12.0"
+    "@plone/volto": ">=17.0.0"
   },
   "dependencies": {
-    "@plone/scripts": "*",
-    "prismjs": "*"
+    "prismjs": "1.29.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.0.2",
-    "@commitlint/config-conventional": "^17.0.2",
-    "@release-it/conventional-changelog": "^5.0.0",
-    "@typescript-eslint/eslint-plugin": "*",
-    "prettier": "2.0.5",
-    "release-it": "*",
-    "stylelint": "13.3.3",
-    "stylelint-config-idiomatic-order": "8.1.0",
-    "stylelint-config-prettier": "8.0.1",
-    "stylelint-prettier": "1.1.2"
+    "@plone/scripts": "^3.0.0",
+    "@commitlint/cli": "^18.6.1",
+    "@commitlint/config-conventional": "^18.6.2",
+    "@release-it/conventional-changelog": "^8.0.1",
+    "@babel/eslint-parser": "7.22.15",
+    "eslint": "8.49.0",
+    "eslint-config-prettier": "9.0.0",
+    "eslint-config-react-app": "7.0.1",
+    "eslint-plugin-flowtype": "8.0.3",
+    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "5.0.0",
+    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "postcss-less": "6.0.0",
+    "postcss-scss": "4.0.8",
+    "prettier": "3.0.3",
+    "release-it": "^16.1.5",
+    "stylelint": "15.10.3",
+    "stylelint-config-idiomatic-order": "9.0.0",
+    "stylelint-config-sass-guidelines": "10.0.0",
+    "stylelint-prettier": "4.0.2"
   },
   "repository": {
     "type": "git",
     "url": "git@github.com:plonegovbr/volto-code-block.git"
-  },
-  "prettier": {
-    "trailingComma": "all",
-    "singleQuote": true,
-    "overrides": [
-      {
-        "files": "*.overrides",
-        "options": {
-          "parser": "less"
-        }
-      }
-    ]
-  },
-  "stylelint": {
-    "extends": [
-      "stylelint-config-idiomatic-order"
-    ],
-    "plugins": [
-      "stylelint-prettier"
-    ],
-    "rules": {
-      "prettier/prettier": true,
-      "rule-empty-line-before": [
-        "always-multi-line",
-        {
-          "except": [
-            "first-nested"
-          ],
-          "ignore": [
-            "after-comment"
-          ]
-        }
-      ]
-    },
-    "ignoreFiles": "theme/themes/default/**/*.overrides"
   }
 }
diff --git a/src/components/Blocks/Code/DefaultView.jsx b/src/components/Blocks/Code/DefaultView.jsx
@@ -3,14 +3,7 @@ import SyntaxHighlighter from '../../SyntaxHighlighter/SyntaxHighlighter';
 
 const CodeView = (props) => {
   const { data } = props;
-  const {
-    code,
-    style,
-    language,
-    lineNbr,
-    showLineNumbers,
-    wrapLongLines,
-  } = data;
+  const { code, style, language, lineNbr, showLineNumbers, wrapLongLines } = data;
   const styleWrap = wrapLongLines ? 'wrapLongLines' : '';
   const className = `code-block-wrapper ${style} ${styleWrap}`;
 
@@ -19,12 +12,7 @@ const CodeView = (props) => {
       {data && (
         <div className={'block code'}>
           <div className={className}>
-            <SyntaxHighlighter
-              code={code}
-              language={language}
-              showLineNumbers={showLineNumbers}
-              lineNbr={lineNbr}
-            />
+            <SyntaxHighlighter code={code} language={language} showLineNumbers={showLineNumbers} lineNbr={lineNbr} />
           </div>
         </div>
       )}

diff --git a/src/components/Blocks/Code/DefaultView.stories.jsx b/src/components/Blocks/Code/DefaultView.stories.jsx
@@ -3,11 +3,9 @@ import React from 'react';
 import CodeView from './DefaultView';
 import Wrapper from '@plone/volto/storybook';
 
-const codePython =
-  'from Testing.makerequest import makerequest\nfrom zope.component.hooks import setSite\nimport transaction\n\n\napp = makerequest(app)\nsite = app.Plone\nsetSite(site)\n\n# Change admin password\nuser = "admin"\npassword = "verynotsecure"\napp.acl_users.users.updateUserPassword(user, password)\n\n\n# Persist changes\ntransaction.commit()\napp._p_jar.sync()';
+const codePython = 'from Testing.makerequest import makerequest\nfrom zope.component.hooks import setSite\nimport transaction\n\n\napp = makerequest(app)\nsite = app.Plone\nsetSite(site)\n\n# Change admin password\nuser = "admin"\npassword = "verynotsecure"\napp.acl_users.users.updateUserPassword(user, password)\n\n\n# Persist changes\ntransaction.commit()\napp._p_jar.sync()';
 
-const codeLongLines =
-  '# Code to show how wrap long lines would work\n\ntext = "This is a really, really, really, really long line including a lot of words and letters and a text that should not make any sense, but should be long, very long"\n\nprint(text)';
+const codeLongLines = '# Code to show how wrap long lines would work\n\ntext = "This is a really, really, really, really long line including a lot of words and letters and a text that should not make any sense, but should be long, very long"\n\nprint(text)';
 
 const StoryComponent = injectIntl(({ children, ...args }) => {
   const { language, style, code, showLineNumbers, wrapLongLines } = args;

diff --git a/src/components/Blocks/Code/Edit.jsx b/src/components/Blocks/Code/Edit.jsx
@@ -28,13 +28,7 @@ const CodeBlockEdit = (props) => {
   return (
     <div className="block code">
       <div className={className}>
-        <Editor
-          value={code}
-          onValueChange={(code) => handleChange(code)}
-          highlight={(code) => highlight(code, language)}
-          padding={10}
-          preClassName={`code-block-wrapper ${data.style} language-${data.language}`}
-        />
+        <Editor value={code} onValueChange={(code) => handleChange(code)} highlight={(code) => highlight(code, language)} padding={10} preClassName={`code-block-wrapper ${data.style} language-${data.language}`} />
         <SidebarPortal selected={selected}>
           <CodeBlockData {...props} />
         </SidebarPortal>