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

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/.github/workflows/acceptance.yml

@@ -4,7 +4,7 @@ on: [push]
 env:
   ADDON_NAME: "@kitconcept/volto-light-theme"
   ADDON_PATH: "volto-light-theme"
-  VOLTO_VERSION: "17.0.0-alpha.17"
+  VOLTO_VERSION: "17.0.0-alpha.20"
 
 jobs:
 

package/.github/workflows/deploy.yml

@@ -11,7 +11,7 @@ on:
 env:
   ENVIRONMENT: "light-theme.kitconcept.io"
   IMAGE_NAME: "ghcr.io/kitconcept/voltolighttheme-frontend"
-  VOLTO_VERSION: "17.0.0-alpha.17"
+  VOLTO_VERSION: "17.0.0-alpha.20"
 
 jobs:
   meta:

package/CHANGELOG.md

@@ -8,6 +8,39 @@
 
 <!-- towncrier release notes start -->
 
+## 1.0.0-rc.9 (2023-07-19)
+
+### Breaking
+
+- Refactor existing customizations, removing the ones no longer needed (because they are present in Volto already) and using the new pattern in the others. Volto 17a20 is required in order to retain consistency. @sneridagh [#166](https://github.com/kitconcept/volto-light-theme/pull/166)
+
+### Bugfix
+
+- Fix NewsItemView as wella sd Link View @iFlameing [#127](https://github.com/kitconcept/volto-light-theme/pull/127)
+- Fix Image View in edit mode @iFlameing. [#154](https://github.com/kitconcept/volto-light-theme/pull/154)
+- Update volto-image-block @sneridagh [#159](https://github.com/kitconcept/volto-light-theme/pull/159)
+- Fix File View implementation @iFlameing [#162](https://github.com/kitconcept/volto-light-theme/pull/162)
+
+### Internal
+
+- Upgrade volto-image-block to fix the image upload @sneridagh [#149](https://github.com/kitconcept/volto-light-theme/pull/149)
+- Upgrade to Volto 17a20 @sneridagh [#163](https://github.com/kitconcept/volto-light-theme/pull/163)
+- Remove the `apiExpanders` existing locally in the package since it's already in Volto 17a20 @sneridagh [#164](https://github.com/kitconcept/volto-light-theme/pull/164)
+
+
+## 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

@@ -22,7 +22,7 @@ RESET=`tput sgr0`
 YELLOW=`tput setaf 3`
 
 PLONE_VERSION=6
-VOLTO_VERSION=17.0.0-alpha.17
+VOLTO_VERSION=17.0.0-alpha.20
 
 ADDON_NAME='@kitconcept/volto-light-theme'
 ADDON_PATH='volto-light-theme'
@@ -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.9",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.js",
   "repository": {
@@ -25,7 +25,6 @@
     "access": "public"
   },
   "scripts": {
-    "i18n": "rm -rf build/messages && NODE_ENV=production i18n --addon",
     "dry-release": "release-it --dry-run",
     "release": "release-it",
     "release-major-alpha": "release-it major --preRelease=alpha",
@@ -33,6 +32,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",
@@ -57,10 +66,10 @@
     "@kitconcept/volto-button-block": "^2.1.0",
     "@kitconcept/volto-dsgvo-banner": "^1.3.0",
     "@kitconcept/volto-heading-block": "^2.2.0",
-    "@kitconcept/volto-image-block": "^1.0.1",
+    "@kitconcept/volto-image-block": "^1.0.3",
     "@kitconcept/volto-introduction-block": "^1.0.0",
     "@kitconcept/volto-separator-block": "^3.2.2",
     "@kitconcept/volto-slider-block": "^4.2.0",
-    "@plone/volto": "^17.0.0-alpha.17"
+    "@plone/volto": "^17.0.0-alpha.20"
   }
 }

package/src/components/Blocks/Listing/DefaultTemplate.jsx

@@ -0,0 +1,47 @@
+// See Customization for more info
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ConditionalLink, UniversalLink } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+import { isInternalURL } from '@plone/volto/helpers/Url/Url';
+
+const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
+  let link = null;
+  let href = linkHref?.[0]?.['@id'] || '';
+
+  if (isInternalURL(href)) {
+    link = (
+      <ConditionalLink to={flattenToAppURL(href)} condition={!isEditMode}>
+        {linkTitle || href}
+      </ConditionalLink>
+    );
+  } else if (href) {
+    link = <UniversalLink href={href}>{linkTitle || href}</UniversalLink>;
+  }
+
+  return (
+    <>
+      <div className="items">
+        {items.map((item) => (
+          <div className="listing-item" key={item['@id']}>
+            <ConditionalLink item={item} condition={!isEditMode}>
+              <div className="listing-body">
+                <h2>{item.title ? item.title : item.id}</h2>
+                <p>{item.description}</p>
+              </div>
+            </ConditionalLink>
+          </div>
+        ))}
+      </div>
+
+      {link && <div className="footer">{link}</div>}
+    </>
+  );
+};
+DefaultTemplate.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.any).isRequired,
+  linkMore: PropTypes.any,
+  isEditMode: PropTypes.bool,
+};
+export default DefaultTemplate;

package/src/components/Blocks/Search/components/SearchDetails.jsx

@@ -0,0 +1,33 @@
+/**
+ * OVERRIDE SearchDetails.jsx
+ * REASON: Special template for displaying this component, use h2 instead of h4
+ */
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  searchResults: {
+    id: 'Search results',
+    defaultMessage: 'Search results',
+  },
+  searchedFor: {
+    id: 'Searched for',
+    defaultMessage: 'Searched for',
+  },
+});
+
+const SearchDetails = ({ total, text }) => {
+  const intl = useIntl();
+  return (
+    <h2 className="search-details">
+      <nobr>
+        <span className="number">{total}</span>{' '}
+        <span className="label">
+          {intl.formatMessage(messages.searchResults)}
+        </span>
+      </nobr>
+    </h2>
+  );
+};
+
+export default SearchDetails;

package/src/components/Blocks/Search/components/SearchInput.jsx

@@ -0,0 +1,56 @@
+/**
+ * OVERRIDE SearchDetails.jsx
+ * REASON: Special template for displaying this component
+ */
+import React from 'react';
+import { Button, Input } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Icon } from '@plone/volto/components';
+import loupeSVG from '@plone/volto/icons/zoom.svg';
+
+const messages = defineMessages({
+  search: {
+    id: 'Search',
+    defaultMessage: 'Search',
+  },
+});
+
+const SearchInput = (props) => {
+  const { data, searchText, setSearchText, isLive, onTriggerSearch } = props;
+  const intl = useIntl();
+
+  return (
+    <div className="search-input">
+      <Input
+        id={`${props.id}-searchtext`}
+        value={searchText}
+        placeholder={
+          data.searchInputPrompt || intl.formatMessage(messages.search)
+        }
+        fluid
+        onKeyPress={(event) => {
+          if (isLive || event.key === 'Enter') onTriggerSearch(searchText);
+        }}
+        onChange={(event, { value }) => {
+          setSearchText(value);
+          if (isLive) {
+            onTriggerSearch(value);
+          }
+        }}
+        aria-label="Search"
+      />
+      {isLive && (
+        <Button
+          basic
+          icon
+          className="search-input-live-icon-button"
+          aria-label="Search"
+        >
+          <Icon name={loupeSVG} />
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default SearchInput;

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/components/Theme/FileView.jsx

@@ -0,0 +1,65 @@
+/**
+ * File view component.
+ * @module components/theme/View/FileView
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container as SemanticContainer } from 'semantic-ui-react';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+import FileType from '../../helpers/Filetype';
+
+/**
+ * File view component class.
+ * @function FileView
+ * @params {object} content Content object.
+ * @returns {string} Markup of the component.
+ */
+const FileView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+  return (
+    <Container id="page-document" className="view-wrapper fileitem-view">
+      <h1 className="documentFirstHeading">
+        {content.title}
+        {content.subtitle && ` - ${content.subtitle}`}
+      </h1>
+      {content.description && (
+        <p className="documentDescription">{content.description}</p>
+      )}
+      {content.file?.download && (
+        <p>
+          <a href={flattenToAppURL(content.file.download)}>
+            {content.file.filename}
+          </a>{' '}
+          <span>
+            ({FileType(content?.file['content-type'])}/{' '}
+            {content.file?.size < 1000000
+              ? Math.round(content.file.size / 1000)
+              : Math.round(content.file.size / 1000000)}
+            {content.file?.size < 1000000 ? 'KB' : 'MB'})
+          </span>
+        </p>
+      )}
+    </Container>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+FileView.propTypes = {
+  content: PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string,
+    file: PropTypes.shape({
+      download: PropTypes.string,
+      filename: PropTypes.string,
+    }),
+  }).isRequired,
+};
+
+export default FileView;