Fix for Storybook

.editorconfig

@@ -0,0 +1,36 @@
+# EditorConfig Configurtaion file, for more details see:
+# http://EditorConfig.org
+# EditorConfig is a convention description, that could be interpreted
+# by multiple editors to enforce common coding conventions for specific
+# file types
+
+# top-most EditorConfig file:
+# Will ignore other EditorConfig files in Home directory or upper tree level.
+root = true
+
+
+[*]  # For All Files
+# Unix-style newlines with a newline ending every file
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+# Set default charset
+charset = utf-8
+# Indent style default
+indent_style = space
+# Max Line Length - a hard line wrap, should be disabled
+max_line_length = off
+
+[*.{py,cfg,ini}]
+# 4 space indentation
+indent_size = 4
+
+[*.{html,dtml,pt,zpt,xml,zcml,js,jsx,tsx,json,less,css}]
+# 2 space indentation
+indent_size = 2
+
+[{Makefile,.gitmodules}]
+# Tab indentation (no size specified, but view as 4 spaces)
+indent_style = tab
+indent_size = unset
+tab_width = unset

.eslintrc

@@ -1,6 +1,6 @@
 {
-  "extends": ["react-app", "prettier", "plugin:jsx-a11y/recommended"],
-  "plugins": ["prettier", "react-hooks", "jsx-a11y"],
+  "extends": ["react-app", "prettier"],
+  "plugins": ["prettier", "react-hooks"],
   "env": {
     "es6": true,
     "browser": true,

.github/workflows/code.yml

@@ -9,7 +9,7 @@ jobs:
 
     steps:
       - name: Main checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Linting
         run: make lint

.github/workflows/storybook.yml

@@ -9,15 +9,16 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2.3.1
+        uses: actions/checkout@v4
 
       - name: Generate Storybook
         run: |
-          make storybook
+          mkdir -p .storybook
+          chmod -R 777 .storybook
+          make build-storybook
 
-      # Come up with a way to extract it from the container
-      # - name: Deploy to GitHub pages
-      #   uses: JamesIves/github-pages-deploy-action@v4
-      #   with:
-      #     branch: gh-pages
-      #     folder: addon-testing-project/storybook-static
+      - name: Deploy to GitHub pages
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          branch: gh-pages
+          folder: .storybook

.github/workflows/unit.yml

@@ -9,7 +9,7 @@ jobs:
 
     steps:
       - name: Main checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Unit tests
         run: make test-ci

.gitignore

@@ -6,6 +6,7 @@ cypress/videos/
 node_modules
 project/
 results
+.storybook
 
 # yarn 3
 .pnp.*

.prettierignore

@@ -0,0 +1 @@
+.storybook

Makefile

@@ -31,7 +31,7 @@ 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}
+LIVE_COMPOSE=COMPOSE_PROFILES=live ${DOCKER_COMPOSE}
 ACCEPTANCE=${CMD} -p ${ADDON_PATH}-acceptance -f ${ACCEPTANCE_COMPOSE}
 
 .PHONY: build-backend
@@ -58,6 +58,7 @@ build-live: ## Build Addon live
 build-addon: ## Build Addon dev
 	@echo "$(GREEN)==> Build Addon development container $(RESET)"
 	${DEV_COMPOSE} build addon-dev
+	${DEV_COMPOSE} build addon-storybook
 
 .PHONY: start-dev
 start-dev: ## Starts Dev container
@@ -85,8 +86,7 @@ install: ## Install the local environment, Cypress, build acceptance containers
 # Dev Helpers
 .PHONY: i18n
 i18n: ## Sync i18n
-	@echo "$(YELLOW)==> Do not forget to setup the local environment (make install) $(RESET)"
-	yarn i18n
+	${DEV_COMPOSE} run --rm -e ADDON_PATH=$(ADDON_PATH) --entrypoint '/app/i18n.sh' addon-dev
 
 .PHONY: format
 format: ## Format codebase
@@ -100,6 +100,7 @@ lint: ## Lint Codebase
 	${DEV_COMPOSE} run --rm addon-dev prettier
 	${DEV_COMPOSE} run --rm addon-dev stylelint --allow-empty-input
 
+## Tests
 .PHONY: test
 test: ## Run unit tests
 	${DEV_COMPOSE} run --rm addon-dev test --watchAll
@@ -108,6 +109,19 @@ test: ## Run unit tests
 test-ci: ## Run unit tests in CI
 	${DEV_COMPOSE} run -e CI=1 addon-dev test
 
+## Storybook
+.PHONY: start-storybook
+start-storybook: ## Starts Storybook
+	@echo "$(GREEN)==> Start Storybook $(RESET)"
+	${DEV_COMPOSE} up addon-storybook
+
+
+.PHONY: build-storybook
+build-storybook: ## Build storybook
+	@echo "$(GREEN)==> Build storybook $(RESET)"
+	if [ ! -d .storybook ]; then mkdir .storybook; fi
+	${DEV_COMPOSE} run addon-storybook build-storybook
+
 ## Acceptance
 .PHONY: install-acceptance
 install-acceptance: ## Install Cypress, build acceptance containers

babel.config.js

@@ -0,0 +1,17 @@
+module.exports = function (api) {
+  api.cache(true);
+  const presets = ['razzle/babel'];
+  const plugins = [
+    [
+      'react-intl', // React Intl extractor, required for the whole i18n infrastructure to work
+      {
+        messagesDir: './build/messages/',
+      },
+    ],
+  ];
+
+  return {
+    plugins,
+    presets,
+  };
+};

dockerfiles/Dockerfile.dev

@@ -5,6 +5,9 @@ FROM plone/frontend-dev:${VOLTO_VERSION}
 ARG ADDON_NAME
 ARG ADDON_PATH
 
+# Copy i18n helper
+COPY --chown=node:node dockerfiles/i18n.sh /app/
+
 # Copy linter / prettier configs
 COPY --chown=node:node .eslintignore* .prettierignore* /app/
 
@@ -19,3 +22,5 @@ RUN <<EOT
     /setupAddon
     yarn install --network-timeout 1000000
 EOT
+
+EXPOSE 6006

dockerfiles/docker-compose.yml

@@ -19,15 +19,31 @@ 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
     tty: true
     profiles:
       - dev
 
+  addon-storybook:
+    build:
+      context: ../
+      dockerfile: ./dockerfiles/Dockerfile.dev
+      args:
+        ADDON_NAME: "${ADDON_NAME}"
+        ADDON_PATH: "${ADDON_PATH}"
+        VOLTO_VERSION: ${VOLTO_VERSION:-16}
+    volumes:
+      - ${CURRENT_DIR}:/app/src/addons/${ADDON_PATH}/
+      - ${CURRENT_DIR}/.storybook:/app/storybook-static/
+    ports:
+      - 6006:6006
+    command: "storybook"
+    tty: true
+    profiles:
+      - dev
+
   addon-live:
     build:
       context: ../

dockerfiles/i18n.sh

@@ -0,0 +1,2 @@
+#!/bin/sh
+cd "/app/src/addons/${ADDON_PATH}/" && /app/node_modules/.bin/i18n --addon && rm -Rf build || exit

jest-addon-config.js

@@ -1,18 +1,14 @@
 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'],
   moduleNameMapper: {
     '@plone/volto/cypress': '<rootDir>/node_modules/@plone/volto/cypress',
     '@plone/volto/babel': '<rootDir>/node_modules/@plone/volto/babel',
     '@plone/volto/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
     '@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',
   },
   transform: {
     '^.+\\.js(x)?$': 'babel-jest',

locales/de/LC_MESSAGES/volto.po

@@ -17,33 +17,54 @@ msgstr ""
 "Domain: volto\n"
 
 #: components/LoginAuthomatic/LoginAuthomatic
+#: components/LoginOIDC/LoginOIDC
+# defaultMessage: Authenticating
 msgid "Authenticating"
 msgstr ""
 
 #: components/LoginAuthomatic/LoginAuthomatic
+#: components/LoginOIDC/LoginOIDC
+# defaultMessage: Authentication failed.
 msgid "Authentication failed."
 msgstr ""
 
 #: components/Login/LoginForm
+# defaultMessage: Loading
+msgid "Loading"
+msgstr ""
+
+#: components/Login/LoginForm
+# defaultMessage: Login
 msgid "Log In"
 msgstr ""
 
 #: components/AuthProvider/AuthProvider
+# defaultMessage: Log in with
 msgid "Log in with"
 msgstr ""
 
 #: components/Login/LoginForm
+# defaultMessage: Login
 msgid "Login"
 msgstr ""
 
 #: components/LoginAuthomatic/LoginAuthomatic
+#: components/LoginOIDC/LoginOIDC
+# defaultMessage: Login Failed
 msgid "Login Failed"
 msgstr ""
 
 #: components/Login/LoginForm
+# defaultMessage: Select Login Provider
 msgid "Select Login Provider"
 msgstr ""
 
 #: components/AuthProvider/AuthProvider
+# defaultMessage: Sign up with
 msgid "Sign up with"
 msgstr ""
+
+#: components/Logout/Logout
+# defaultMessage: You have been logged out
+msgid "You have been logged out"
+msgstr ""

locales/en/LC_MESSAGES/volto.po

@@ -17,33 +17,54 @@ msgstr ""
 "Domain: volto\n"
 
 #: components/LoginAuthomatic/LoginAuthomatic
+#: components/LoginOIDC/LoginOIDC
+# defaultMessage: Authenticating
 msgid "Authenticating"
 msgstr ""
 
 #: components/LoginAuthomatic/LoginAuthomatic
+#: components/LoginOIDC/LoginOIDC
+# defaultMessage: Authentication failed.
 msgid "Authentication failed."
 msgstr ""
 
 #: components/Login/LoginForm
+# defaultMessage: Loading
+msgid "Loading"
+msgstr ""
+
+#: components/Login/LoginForm
+# defaultMessage: Login
 msgid "Log In"
 msgstr ""
 
 #: components/AuthProvider/AuthProvider
+# defaultMessage: Log in with
 msgid "Log in with"
 msgstr ""
 
 #: components/Login/LoginForm
+# defaultMessage: Login
 msgid "Login"
 msgstr ""
 
 #: components/LoginAuthomatic/LoginAuthomatic
+#: components/LoginOIDC/LoginOIDC
+# defaultMessage: Login Failed
 msgid "Login Failed"
 msgstr ""
 
 #: components/Login/LoginForm
+# defaultMessage: Select Login Provider
 msgid "Select Login Provider"
 msgstr ""
 
 #: components/AuthProvider/AuthProvider
+# defaultMessage: Sign up with
 msgid "Sign up with"
 msgstr ""
+
+#: components/Logout/Logout
+# defaultMessage: You have been logged out
+msgid "You have been logged out"
+msgstr ""