@kitconcept/volto-light-theme 1.0.0-rc.7 → 1.0.0-rc.8

package/.eslintrc

@@ -0,0 +1,48 @@
+{
+  "extends": ["react-app", "prettier", "plugin:jsx-a11y/recommended"],
+  "plugins": ["prettier", "react-hooks", "jsx-a11y"],
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true,
+    "mocha": true,
+    "jasmine": true
+  },
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "legacyDecorators": true
+    }
+  },
+  "rules": {
+    "import/no-unresolved": 0,
+    "no-alert": 1,
+    "no-console": 1,
+    "no-debugger": 1,
+    "prettier/prettier": [
+      "error",
+      { "trailingComma": "all", "singleQuote": true }
+    ],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/react-in-jsx-scope": "off"
+  },
+  "globals": {
+    "root": true,
+    "__DEVELOPMENT__": true,
+    "__CLIENT__": true,
+    "__SERVER__": true,
+    "__DISABLE_SSR__": true,
+    "__DEVTOOLS__": true,
+    "__DEBUG__": true,
+    "__SSR__": true,
+    "__SENTRY__": true,
+    "cy": true,
+    "Cypress": true,
+    "jest": true,
+    "socket": true,
+    "webpackIsomorphicTools": true
+  }
+}

package/CHANGELOG.md

@@ -8,6 +8,19 @@
 
 <!-- towncrier release notes start -->
 
+## 1.0.0-rc.8 (2023-07-14)
+
+### Bugfix
+
+- Fix Image content type @iRohitSingh [#18](https://github.com/kitconcept/volto-light-theme/pull/18)
+- Fix a11y issues in EventView @steffenri [#147](https://github.com/kitconcept/volto-light-theme/pull/147)
+- Remove typo in fileview @steffenri [#148](https://github.com/kitconcept/volto-light-theme/pull/148)
+
+### Documentation
+
+- Documentation on local docker development - local ESlint working @sneridagh [#144](https://github.com/kitconcept/volto-light-theme/pull/144)
+
+
 ## 1.0.0-rc.7 (2023-07-13)
 
 ### Bugfix

package/Makefile

@@ -135,7 +135,6 @@ status-test-acceptance-server: ## Status of Acceptance Server (for use it while
 debug-frontend:  ## Run bash in the Frontend container (for debug infrastructure purposes)
 	${DEV_COMPOSE} run --entrypoint bash addon-dev
 
-.PHONY: install-local
-install-local:  ## Installs essentials for developing locally (ESlint, prettier...) (for use it while developing)
-	yarn remove -A @plone/volto && yarn add @plone/volto && git co -- package.json yarn.lock
-	mv .eslintrc.local.js .eslintrc.js
+.PHONY: pull-backend-image
+pull-backend-image:  ## Pulls and updates the backend image (for use it while developing)
+	docker pull ghcr.io/kitconcept/voltolighttheme:latest

package/README.md

@@ -98,11 +98,68 @@ These main rules spec applies to the theme:
 - Separator-Block (https://www.npmjs.com/package/@kitconcept/volto-separator-block)
 - Heading-Block (https://www.npmjs.com/package/@kitconcept/volto-heading-block)
 - Introduction-Block (https://www.npmjs.com/package/@kitconcept/volto-introduction-block)
+- Accordion-Block (https://www.npmjs.com/package/@eeacms/volto-accordion-block)
 
 and the following add-ons:
 
 - DSGVO-Banner (https://www.npmjs.com/package/@kitconcept/volto-dsgvo-banner)
 
+## Installation
+
+It is recommended that your project or policy add-on `package.json` include the aforementioned add-ons.
+
+```json
+  "dependencies": {
+    "@eeacms/volto-accordion-block": "9.0.0",
+    "@kitconcept/volto-button-block": "2.1.0",
+    "@kitconcept/volto-dsgvo-banner": "1.3.0",
+    "@kitconcept/volto-heading-block": "2.2.0",
+    "@kitconcept/volto-introduction-block": "1.0.0",
+    "@kitconcept/volto-light-theme": "1.0.0",
+    "@kitconcept/volto-separator-block": "3.2.0",
+  }
+```
+
+This theme won't install them for you, as they are declared as `peerDependencies`.
+This is because the theme won't have to force you to use any specific add-on version, and avoids package hoisting issues.
+
+In your project or policy add-on `package.json` you should declare all of them as Volto add-ons
+
+```json
+  "addons": [
+    "@eeacms/volto-accordion-block",
+    "@kitconcept/volto-button-block",
+    "@kitconcept/volto-heading-block",
+    "@kitconcept/volto-introduction-block",
+    "@kitconcept/volto-highlight-block",
+    "@kitconcept/volto-separator-block",
+    "@kitconcept/volto-light-theme",
+    "your_policy_addon_here"
+  ],
+```
+
+Make sure your policy add-on is the last one, as you would want that its configuration has priority over all the others. Make sure also that `@kitconcept/volto-light-theme` is the one before your policy add-on.
+
+Then, declare the theme in your project `package.json`:
+
+```json
+  "theme": "@kitconcept/volto-light-theme",
+```
+
+Alternativelly, you can also declare it in your project's `volto.config.js`:
+
+```js
+const addons = [];
+const theme = '@kitconcept/volto-light-theme';
+
+module.exports = {
+  addons,
+  theme,
+};
+```
+
+You can specify your project add-ons in `volto.config.js`, but sometimes is better to have them all in one place (in your policy add-on) for portability.
+
 ## Development Setup
 
 This theme works under Volto 17 alpha 16 onwards.
@@ -110,24 +167,147 @@ Compatibility with Volto 16 might be achieved, but it has to be at customization
 specific project add-on.
 This is mainly due to the `RenderBlocks` customization that is based in the one in 17 because of the Grid block in core and the autogrouping feature.
 See more information about the other dependencies in `peerDependencies` in `package.json`.
+It is possible to develop this add-on using docker containers and the provided convenience Makefile commands.
+Run `make help` to list the available commands.
+
+````text
+    build-backend                       Build
+    start-backend                       Starts Docker backend
+    stop-backend                        Stop Docker backend
+    build-live                          Build Addon live
+    build-addon                         Build Addon dev
+    start-dev                           Starts Dev container
+    dev                                 Develop the addon
+    help                                Show this help.
+    i18n                                Sync i18n
+    format                              Format codebase
+    lint                                Lint Codebase
+    test                                Run unit tests
+    test-ci                             Run unit tests in CI
+    install-acceptance                  Install Cypress, build acceptance containers
+    start-test-acceptance-server        Start acceptance server (for use it in while developing)
+    start-test-acceptance-server-prod   Start acceptance server in prod (used by CI)
+    test-acceptance                     Start Cypress (for use it while developing)
+    test-acceptance-headless            Run cypress tests in CI
+    stop-test-acceptance-server         Stop acceptance server (for use it while finished developing)
+    status-test-acceptance-server       Status of Acceptance Server (for use it while developing)
+    debug-frontend                      Run bash in the Frontend container (for debug infrastructure purposes)
+    pull-backend-image                  Pulls and updates the backend image (for use it while developing)
+````
 
 ### Prerequisites
 
 - Docker
 - Node 18 (e.g. via nvm)
 
-### Build a project
+### Development environment Setup
+
+Run once
+
+```shell
+make dev
+```
+
+which will build and launch the backend and frontend containers.
+There's no need to build them again after doing it the first time unless something has changed from the container setup.
+
+In order to make the local IDE play well with this setup, is it required to run once `yarn` to install locally the required packages (ESlint, Prettier, Stylelint).
 
 Run
 
-````
+```shell
+yarn
+```
+
+### Build the containers manually
+
+Run
+
+```shell
+make build-backend
+make build-addon
+```
+
+## Run the containers
+
+Run
+
+```shell
 make start-dev
-````
+```
+
+This will start both the frontend and backend containers.
 
 ### Stop Backend (Docker)
 
-Run:
+After developing, in order to stop the running backend, don't forget to run:
 
-````
-make stop-backend-docker
-````
+Run
+
+```shell
+make stop-backend
+```
+
+### Linting
+
+Run
+
+```shell
+make lint
+```
+
+### Formatting
+
+Run
+
+```shell
+make format
+```
+
+### i18n
+
+Run
+
+```shell
+make i18n
+```
+
+### Unit tests
+
+Run
+
+```shell
+make test
+```
+
+### Acceptance tests
+
+Run once
+
+```shell
+make install-acceptance
+```
+
+For starting the servers
+
+Run
+
+```shell
+make start-test-acceptance-server
+```
+
+The frontend is run in dev mode, so development while writing tests is possible.
+
+Run
+
+```shell
+make test-acceptance
+```
+
+To run Cypress tests afterwards.
+
+When finished, don't forget to shutdown the backend server.
+
+```shell
+make stop-test-acceptance-server
+```

package/dockerfiles/docker-compose.yml

@@ -19,6 +19,8 @@ services:
       # RAZZLE_INTERNAL_API_PATH: http://host.docker.internal:8080/Plone
       RAZZLE_API_PATH: http://127.0.0.1:8080/Plone
       HOST: 0.0.0.0
+    depends_on:
+      - backend
     ports:
       - 3000:3000
       - 3001:3001

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "1.0.0-rc.7",
+  "version": "1.0.0-rc.8",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.js",
   "repository": {
@@ -33,6 +33,16 @@
   },
   "devDependencies": {
     "@plone/scripts": "^3.0.0",
+    "babel-eslint": "10.1.0",
+    "eslint": "6.8.0",
+    "eslint-config-prettier": "6.11.0",
+    "eslint-config-react-app": "5.2.1",
+    "eslint-plugin-flowtype": "4.7.0",
+    "eslint-plugin-import": "2.20.2",
+    "eslint-plugin-jsx-a11y": "6.2.3",
+    "eslint-plugin-prettier": "3.1.3",
+    "eslint-plugin-react": "7.20.0",
+    "eslint-plugin-react-hooks": "4.0.2",
     "postcss-scss": "4.0.6",
     "prettier": "2.0.5",
     "razzle-plugin-scss": "4.2.18",

package/src/components/Theme/EventView.jsx

@@ -224,21 +224,21 @@ const EventView = (props) => {
                             </div>
                           </Grid.Column>
                           <div className="event-button">
-                            <Button className="event-btn">
-                              <a
-                                className="ics-download"
-                                target="_blank"
-                                rel="noreferrer"
-                                href={`${expandToBackendURL(
-                                  content['@id'],
-                                )}/ics_view`}
-                              >
+                            <a
+                              className="ics-download"
+                              target="_blank"
+                              rel="noreferrer"
+                              href={`${expandToBackendURL(
+                                content['@id'],
+                              )}/ics_view`}
+                            >
+                              <Button className="event-btn">
                                 <FormattedMessage
                                   id="ICS-Download"
                                   defaultMessage="ICS Download"
                                 />
-                              </a>
-                            </Button>
+                              </Button>
+                            </a>
                           </div>
                         </Grid.Row>
                       </Grid>

package/src/customizations/volto/components/theme/View/FileView.jsx

@@ -30,7 +30,7 @@ const FileView = ({ content }) => (
     </h1>
     <div className="file-detail">
       {content.description && (
-        <p className="documentDescription">{content.description}iRohitSingh</p>
+        <p className="documentDescription">{content.description}</p>
       )}
       {content.file?.download && (
         <>

package/src/theme/_content.scss

@@ -145,3 +145,36 @@
     }
   }
 }
+.contenttype-image {
+  .content-area {
+    max-width: var(--default-container-width) !important;
+    margin-right: auto;
+    margin-bottom: 0;
+    margin-left: auto;
+    .documentFirstHeading {
+      @media only screen and (max-width: 769px) {
+        margin-bottom: 60px;
+      }
+    }
+    figure {
+      img {
+        aspect-ratio: $aspect-ratio;
+      }
+      figcaption {
+        margin-top: 20px;
+        margin-bottom: 0;
+        .title {
+          margin-bottom: 5px;
+        }
+        .description div {
+          margin-bottom: 5px;
+        }
+        .credits {
+          padding-bottom: 20px;
+          margin-bottom: 0;
+          color: #0066cc;
+        }
+      }
+    }
+  }
+}

package/.eslintrc.local.js

@@ -1,50 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const projectRootPath = __dirname;
-const packageJson = require(path.join(projectRootPath, 'package.json'));
-
-let voltoPath = './node_modules/@plone/volto';
-
-let configFile;
-if (fs.existsSync(`${this.projectRootPath}/tsconfig.json`))
-  configFile = `${this.projectRootPath}/tsconfig.json`;
-else if (fs.existsSync(`${this.projectRootPath}/jsconfig.json`))
-  configFile = `${this.projectRootPath}/jsconfig.json`;
-
-if (configFile) {
-  const jsConfig = require(configFile).compilerOptions;
-  const pathsConfig = jsConfig.paths;
-  if (pathsConfig['@plone/volto'])
-    voltoPath = `./${jsConfig.baseUrl}/${pathsConfig['@plone/volto'][0]}`;
-}
-
-const AddonConfigurationRegistry = require(`${voltoPath}/addon-registry.js`);
-const reg = new AddonConfigurationRegistry(__dirname);
-
-// Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
-const addonAliases = Object.keys(reg.packages).map((o) => [
-  o,
-  reg.packages[o].modulePath,
-]);
-
-module.exports = {
-  extends: `${voltoPath}/.eslintrc`,
-  settings: {
-    'import/resolver': {
-      alias: {
-        map: [
-          ['@plone/volto', '@plone/volto/src'],
-          ['@plone/volto-slate', '@plone/volto/packages/volto-slate/src'],
-          ...addonAliases,
-          ['@package', `${__dirname}/src`],
-          ['@root', `${__dirname}/src`],
-          ['~', `${__dirname}/src`],
-        ],
-        extensions: ['.js', '.jsx', '.json'],
-      },
-      'babel-plugin-root-import': {
-        rootPathSuffix: 'src',
-      },
-    },
-  },
-};