Merge addons

Makefile

@@ -123,3 +123,15 @@ i18n:  ## Update locales
 
 .PHONY: test
 test:  backend-test frontend-test ## Test codebase
+
+.PHONY: integrate-addon
+integrate-addon: ## Integrates a repo that already as a git remote to this
+	git remote add $(ADDON) [email protected]:kitconcept/$(ADDON).git || true
+	git fetch $(ADDON)
+	git branch --list $(ADDON)-merge | grep -q $(ADDON)-merge && \
+  git switch $(ADDON)-merge || \
+  git switch -c $(ADDON)-merge
+	git reset --hard $(ADDON)/main
+	mkdir -p frontend/packages/$(ADDON)
+	git mv -k .github/ frontend/packages/$(ADDON)/
+	git ls-tree --name-only HEAD | xargs -I{} git mv -k "{}" frontend/packages/$(ADDON)/

README.md

@@ -5,6 +5,28 @@
 
 Core setup for kitconcept GmbH distributions built on top of Plone
 
+It is composed of the following packages:
+
+- Volto Light Theme ([@kitconcept/volto-light-theme](https://github.com/kitconcept/kitconcept-core/tree/main/frontend/packages/volto-light-theme))
+- Button Block ([@kitconcept/volto-button-block](https://github.com/kitconcept/kitconcept-core/tree/main/frontend/packages/volto-button-block))
+- Highlight Block ([@kitconcept/volto-highlight-block](https://github.com/kitconcept/kitconcept-core/tree/main/frontend/packages/volto-highlight-block))
+- Introduction Block ([@kitconcept/volto-introduction-block](https://github.com/kitconcept/kitconcept-core/tree/main/frontend/packages/volto-introduction-block))
+- Logos Block ([@kitconcept/volto-logos-block](https://github.com/kitconcept/kitconcept-core/tree/main/frontend/packages/volto-logos-block))
+- Separator Block ([@kitconcept/volto-separator-block](https://github.com/kitconcept/kitconcept-core/tree/main/frontend/packages/volto-separator-block))
+- Heading Block ([@kitconcept/volto-heading-block](https://github.com/kitconcept/kitconcept-core/tree/main/frontend/packages/volto-heading-block))
+- Banner Block ([@kitconcept/volto-banner-block](https://github.com/kitconcept/kitconcept-core/tree/main/frontend/packages/volto-banner-block))
+- Slider Block ([@kitconcept/volto-slider-block](https://github.com/kitconcept/kitconcept-core/tree/main/frontend/packages/volto-slider-block))
+- Carousel Block ([@kitconcept/volto-carousel-block](https://github.com/kitconcept/kitconcept-core/tree/main/frontend/packages/volto-carousel-block))
+- Accordion Block ([@eeacms/volto-accordion-block](https://www.npmjs.com/package/@eeacms/volto-accordion-block))
+- DSGVO Banner ([@kitconcept/volto-dsgvo-banner](https://github.com/kitconcept/kitconcept-core/tree/main/frontend/packages/volto-dsgvo-banner))
+- Volto BM3 Compatibility Layer ([@kitconcept/volto-bm3-compat](https://github.com/kitconcept/kitconcept-core/tree/main/frontend/packages/volto-bm3-compat))
+
+You will find them in the `frontend/packages` directory.
+They are all built on the top of VLT (Volto Light Theme) but they can be used independently if you load the corresponding CSS in the way that VLT does.
+They are all released independently on npm.
+`@kitconcept/core` is a package that is the aggregator and the glue for all these packages.
+It is released on npm as well, and you can use it in your projects to install all the packages at once.
+
 ## Quick Start 🏁
 
 ### Prerequisites ✅

frontend/.eslintrc.js

@@ -20,6 +20,27 @@ module.exports = {
   extends: `${coreLocation}/packages/volto/.eslintrc`,
   rules: {
     'import/no-unresolved': 1,
+    'import/named': 'error',
+    'react/jsx-filename-extension': [1, { extensions: ['.tsx', '.jsx'] }],
+    'no-restricted-imports': [
+      'error',
+      {
+        name: '@plone/volto/components',
+        message:
+          'Importing from barrel files is not allowed. Please use direct imports of the modules instead.',
+      },
+      {
+        name: '@plone/volto/helpers',
+        message:
+          'Importing from barrel files is not allowed. Please use direct imports of the modules instead.',
+      },
+      {
+        name: '@plone/volto/actions',
+        message:
+          'Importing from barrel files is not allowed. Please use direct imports of the modules instead.',
+      },
+    ],
+    'react/jsx-key': [2, { checkFragmentShorthand: true }],
   },
   settings: {
     'import/resolver': {
@@ -28,7 +49,10 @@ module.exports = {
           ['@plone/volto', `${coreLocation}/packages/volto/src`],
           ['@plone/volto-slate', `${coreLocation}/packages/volto-slate/src`],
           ['@plone/registry', `${coreLocation}/packages/registry/src`],
-          ['core', './packages/kitconcept-core/src'],
+          [
+            '@kitconcept/core',
+            `${projectRootPath}/packages/kitconcept-core/src`,
+          ],
           ...addonAliases,
         ],
         extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],

frontend/Makefile

@@ -96,8 +96,8 @@ test: ## Run unit tests
 .PHONY: ci-test
 ci-test: ## Run unit tests in CI
 	# Unit Tests need the i18n to be built
-	VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto i18n
-	CI=1 RAZZLE_JEST_CONFIG=$(CURRENT_DIR)/jest-addon.config.js pnpm --filter @plone/volto test -- --passWithNoTests
+	pnpm --filter @kitconcept/core i18n && VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto i18n
+	CI=1 pnpm --filter @kitconcept/volto-light-theme --filter @kitconcept/volto-bm3-compat exec vitest
 
 .PHONY: backend-docker-start
 backend-docker-start:	## Starts a Docker-based backend for development

frontend/package.json

@@ -17,8 +17,8 @@
     "start:prod": "pnpm --filter @plone/volto start:prod",
     "build": "VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto build",
     "build:deps": "pnpm --filter @plone/registry --filter @plone/components build",
-    "i18n": "pnpm --filter core i18n && VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto i18n",
-    "test": "RAZZLE_JEST_CONFIG=$(pwd)/jest-addon.config.js pnpm --filter @plone/volto test -- --passWithNoTests",
+    "i18n": "pnpm --filter @kitconcept/core i18n && VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto i18n",
+    "test": "pnpm --filter @kitconcept/volto-light-theme --filter @kitconcept/volto-bm3-compat exec vitest",
     "lint": "VOLTOCONFIG=$(pwd)/volto.config.js eslint --max-warnings=0 'packages/**/src/**/*.{js,jsx,ts,tsx}'",
     "lint:fix": "VOLTOCONFIG=$(pwd)/volto.config.js eslint --fix 'packages/**/src/**/*.{js,jsx,ts,tsx}'",
     "prettier": "prettier --check 'packages/**/src/**/*.{js,jsx,ts,tsx}'",
@@ -43,7 +43,18 @@
   "pnpm": {
     "overrides": {
       "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
-      "react-refresh": "^0.14.2"
+      "react-refresh": "^0.14.2",
+      "@kitconcept/volto-light-theme": "workspace:*",
+      "@kitconcept/volto-button-block": "workspace:*",
+      "@kitconcept/volto-dsgvo-banner": "workspace:*",
+      "@kitconcept/volto-heading-block": "workspace:*",
+      "@kitconcept/volto-highlight-block": "workspace:*",
+      "@kitconcept/volto-introduction-block": "workspace:*",
+      "@kitconcept/volto-separator-block": "workspace:*",
+      "@kitconcept/volto-banner-block": "workspace:*",
+      "@kitconcept/volto-logos-block": "workspace:*",
+      "@kitconcept/volto-carousel-block": "workspace:*",
+      "@kitconcept/volto-bm3-compat": "workspace:*"
     }
   },
   "packageManager": "[email protected]"

frontend/packages/kitconcept-core/package.json

@@ -43,10 +43,23 @@
     "@kitconcept/volto-light-theme"
   ],
   "dependencies": {
-    "@plone/components": "workspace:*",
+    "@eeacms/volto-accordion-block": "^10.4.6",
+    "@kitconcept/volto-banner-block": "workspace:*",
+    "@kitconcept/volto-bm3-compat": "workspace:*",
+    "@kitconcept/volto-button-block": "workspace:*",
+    "@kitconcept/volto-carousel-block": "workspace:*",
+    "@kitconcept/volto-dsgvo-banner": "workspace:*",
+    "@kitconcept/volto-heading-block": "workspace:*",
+    "@kitconcept/volto-highlight-block": "workspace:*",
+    "@kitconcept/volto-introduction-block": "workspace:*",
+    "@kitconcept/volto-light-theme": "workspace:*",
+    "@kitconcept/volto-logos-block": "workspace:*",
+    "@kitconcept/volto-separator-block": "workspace:*",
+    "@kitconcept/volto-slider-block": "workspace:*",
+    "@mbarde/volto-image-crop-widget": "^0.5.1",
     "@plone-collective/volto-authomatic": "3.0.0-alpha.3",
-    "@kitconcept/volto-light-theme": "7.0.0-alpha.15",
-    "@mbarde/volto-image-crop-widget": "^0.5.1"
+    "@plone/components": "workspace:*",
+    "@plonegovbr/volto-social-media": "^2.0.0-alpha.6"
   },
   "peerDependencies": {
     "react": "18.2.0",
@@ -57,6 +70,8 @@
     "@plone/types": "workspace:*",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "release-it": "^18.1.2"
+    "@testing-library/react": "^16.2.0",
+    "release-it": "^18.1.2",
+    "vitest": "^3.2.4"
   }
 }

frontend/packages/kitconcept-core/tsconfig.json

@@ -14,7 +14,7 @@
     "jsx": "react-jsx",
     "paths": {
       "@plone/volto/*": ["../../core/packages/volto/src/*"],
-      "core/*": ["./src/*"]
+      "@kitconcept/core/*": ["./src/*"]
     }
   },
   "include": ["**/*.ts", "**/*.tsx"],

frontend/packages/kitconcept-core/vitest.config.mjs

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vitest/config';
+import voltoVitestConfig from '@plone/volto/vitest.config.mjs';
+import path from 'path';
+
+export default defineConfig({
+  ...voltoVitestConfig,
+  resolve: {
+    alias: {
+      '@plone/volto': path.resolve(__dirname, '../../core/packages/volto/src'), // Add paths accordingly
+      // 'promise-file-reader': require.resolve('promise-file-reader') // Add to identify dependency from package
+    },
+  },
+});

frontend/packages/volto-banner-block/.eslintrc.js

@@ -0,0 +1,62 @@
+const fs = require('fs');
+const projectRootPath = __dirname;
+const { AddonRegistry } = require('@plone/registry/addon-registry');
+
+let coreLocation;
+if (fs.existsSync(`${projectRootPath}/core`))
+  coreLocation = `${projectRootPath}/core`;
+else if (fs.existsSync(`${projectRootPath}/../../core`))
+  coreLocation = `${projectRootPath}/../../core`;
+
+const { registry } = AddonRegistry.init(`${coreLocation}/packages/volto`);
+
+// Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
+const addonAliases = Object.keys(registry.packages).map((o) => [
+  o,
+  registry.packages[o].modulePath,
+]);
+
+module.exports = {
+  extends: `${coreLocation}/packages/volto/.eslintrc`,
+  rules: {
+    'import/no-unresolved': 1,
+    'import/named': 'error',
+    'react/jsx-filename-extension': [1, { extensions: ['.tsx', '.jsx'] }],
+    'no-restricted-imports': [
+      'error',
+      {
+        name: '@plone/volto/components',
+        message:
+          'Importing from barrel files is not allowed. Please use direct imports of the modules instead.',
+      },
+      {
+        name: '@plone/volto/helpers',
+        message:
+          'Importing from barrel files is not allowed. Please use direct imports of the modules instead.',
+      },
+      {
+        name: '@plone/volto/actions',
+        message:
+          'Importing from barrel files is not allowed. Please use direct imports of the modules instead.',
+      },
+    ],
+    'react/jsx-key': [2, { checkFragmentShorthand: true }],
+  },
+  settings: {
+    'import/resolver': {
+      alias: {
+        map: [
+          ['@plone/volto', `${coreLocation}/packages/volto/src`],
+          ['@plone/volto-slate', `${coreLocation}/packages/volto-slate/src`],
+          ['@plone/registry', `${coreLocation}/packages/registry/src`],
+          [
+            '@kitconcept/volto-banner-block',
+            `${projectRootPath}/packages/volto-banner-block/src`,
+          ],
+          ...addonAliases,
+        ],
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+      },
+    },
+  },
+};

frontend/packages/volto-banner-block/.github/workflows/acceptance.yml

@@ -0,0 +1,102 @@
+name: Acceptance tests
+on:
+  push:
+    paths:
+      - "*.js"
+      - "*.json"
+      - "*.yaml"
+      - "cypress/**"
+      - "packages/**"
+      - ".github/workflows/acceptance.yml"
+
+env:
+  NODE_VERSION: 22.x
+  CYPRESS_RETRIES: 2
+
+jobs:
+
+  acceptance:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Enable corepack
+        run: npm i -g corepack@latest && corepack enable
+
+      - 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: Cache Cypress Binary
+        id: cache-cypress-binary
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/Cypress
+          key: binary-${{ env.NODE_VERSION }}-${{ hashFiles('pnpm-lock.yaml') }}
+
+      - name: Install dependencies
+        run: make install
+
+      - name: Install Cypress if not in cache
+        if: steps.cache-cypress-binary.outputs.cache-hit != 'true'
+        working-directory: core/packages/volto
+        run: make cypress-install
+
+      - uses: JarvusInnovations/background-action@v1
+        name: Start Servers
+        with:
+          run: |
+            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
+          # to background multiple processes: add & to the end of the command
+
+          wait-on: |
+            http-get://localhost:55001/plone
+            http://localhost:3000
+          # IMPORTANT: to use environment variables in wait-on, you must use this form: ${{ env.VAR }}
+          # See wait-on section below for all resource types and prefixes
+
+          tail: true # true = stderr,stdout
+          # This will allow you to monitor the progress live
+
+          log-output-resume: stderr
+          # Eliminates previosuly output stderr log entries from post-run output
+
+          wait-for: 10m
+
+          log-output: stderr,stdout # same as true
+
+          log-output-if: failure
+
+      - run: make ci-acceptance-test
+
+      # Upload Cypress screenshots
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: cypress-screenshots-acceptance
+          path: acceptance/cypress/screenshots
+
+      # Upload Cypress videos
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: cypress-videos-acceptance
+          path: acceptance/cypress/videos