From f6aed35653ea8a23a1a5233004be9837cb82369e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89rico=20Andrei?= <ericof@gmail.com>
Date: Sat, 24 Feb 2024 14:02:40 -0300
Subject: [PATCH] fix: Fix Storybook generation

---
 Makefile                       |  14 +++
 dockerfiles/Dockerfile.dev     |   1 +
 dockerfiles/docker-compose.yml |   4 +-
 dockerfiles/storybook.js       | 181 +++++++++++++++++++++++++++++++++
 package.json                   |   2 +
 5 files changed, 200 insertions(+), 2 deletions(-)
 create mode 100644 dockerfiles/storybook.js

diff --git a/Makefile b/Makefile
index 2d7d39e..ee845fd 100644
--- a/Makefile
+++ b/Makefile
@@ -64,6 +64,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
@@ -148,6 +149,19 @@ 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
 
+# Storybook
+.PHONY: start-storybook
+start-storybook: ## Starts Storybook
+	@echo "$(GREEN)==> Start Storybook $(RESET)"
+	${DOCKER_COMPOSE} up addon-storybook
+
+.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
+
+# Release
 .PHONY: release
 release:  ## Release a version of the add-on
 	yarn release
diff --git a/dockerfiles/Dockerfile.dev b/dockerfiles/Dockerfile.dev
index 8e8b1b4..a1649db 100644
--- a/dockerfiles/Dockerfile.dev
+++ b/dockerfiles/Dockerfile.dev
@@ -5,6 +5,7 @@ FROM plone/frontend-dev:${VOLTO_VERSION}
 ARG ADDON_NAME
 ARG ADDON_PATH
 
+COPY --chown=node:node dockerfiles/storybook.js /app/.storybook/main.js
 COPY --chown=node:node package.json /app/src/addons/${ADDON_PATH}/
 
 RUN <<EOT
diff --git a/dockerfiles/docker-compose.yml b/dockerfiles/docker-compose.yml
index 74173dc..7aab214 100644
--- a/dockerfiles/docker-compose.yml
+++ b/dockerfiles/docker-compose.yml
@@ -9,7 +9,7 @@ services:
       args:
         ADDON_NAME: "${ADDON_NAME}"
         ADDON_PATH: "${ADDON_PATH}"
-        VOLTO_VERSION: ${VOLTO_VERSION:-16}
+        VOLTO_VERSION: ${VOLTO_VERSION:-17}
     volumes:
       - ${CURRENT_DIR}:/app/src/addons/${ADDON_PATH}/
     environment:
@@ -29,7 +29,7 @@ services:
       args:
         ADDON_NAME: "${ADDON_NAME}"
         ADDON_PATH: "${ADDON_PATH}"
-        VOLTO_VERSION: ${VOLTO_VERSION:-16}
+        VOLTO_VERSION: ${VOLTO_VERSION:-17}
     volumes:
       - ${CURRENT_DIR}:/app/src/addons/${ADDON_PATH}/
       - ${CURRENT_DIR}/.storybook:/app/storybook-static/
diff --git a/dockerfiles/storybook.js b/dockerfiles/storybook.js
new file mode 100644
index 0000000..5cef161
--- /dev/null
+++ b/dockerfiles/storybook.js
@@ -0,0 +1,181 @@
+const webpack = require('webpack');
+const fs = require('fs');
+const path = require('path');
+
+const projectRootPath = path.resolve('.');
+const lessPlugin = require('@plone/volto/webpack-plugins/webpack-less-plugin');
+const scssPlugin = require('razzle-plugin-scss');
+
+const createConfig = require('../node_modules/razzle/config/createConfigAsync.js');
+const razzleConfig = require(path.join(projectRootPath, 'razzle.config.js'));
+
+const SVGLOADER = {
+  test: /icons\/.*\.svg$/,
+  use: [
+    {
+      loader: 'svg-loader',
+    },
+    {
+      loader: 'svgo-loader',
+      options: {
+        plugins: [
+          {
+            name: 'preset-default',
+            params: {
+              overrides: {
+                convertPathData: false,
+                removeViewBox: false,
+              },
+            },
+          },
+          'removeTitle',
+          'removeUselessStrokeAndFill',
+        ],
+      },
+    },
+  ],
+};
+
+const defaultRazzleOptions = {
+  verbose: false,
+  debug: {},
+  buildType: 'iso',
+  cssPrefix: 'static/css',
+  jsPrefix: 'static/js',
+  enableSourceMaps: true,
+  enableReactRefresh: true,
+  enableTargetBabelrc: false,
+  enableBabelCache: true,
+  forceRuntimeEnvVars: [],
+  mediaPrefix: 'static/media',
+  staticCssInDev: false,
+  emitOnErrors: false,
+  disableWebpackbar: false,
+  browserslist: [
+    '>1%',
+    'last 4 versions',
+    'Firefox ESR',
+    'not ie 11',
+    'not dead',
+  ],
+};
+
+module.exports = {
+  core: {
+    builder: 'webpack5',
+  },
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    // '@storybook/preset-scss',
+  ],
+  typescript: {
+    check: false,
+    reactDocgen: 'any-string',
+  },
+  webpackFinal: async (config, { configType }) => {
+    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    // You can change the configuration based on that.
+    // 'PRODUCTION' is used when building the static version of storybook.
+
+    // Make whatever fine-grained changes you need
+    let baseConfig;
+    baseConfig = await createConfig(
+      'web',
+      'dev',
+      {
+        // clearConsole: false,
+        modifyWebpackConfig: razzleConfig.modifyWebpackConfig,
+        plugins: razzleConfig.plugins,
+      },
+      webpack,
+      false,
+      undefined,
+      [],
+      defaultRazzleOptions,
+    );
+    const AddonConfigurationRegistry = require('@plone/volto/addon-registry');
+
+    const registry = new AddonConfigurationRegistry(projectRootPath);
+
+    config = lessPlugin({ registry }).modifyWebpackConfig({
+      env: { target: 'web', dev: 'dev' },
+      webpackConfig: config,
+      webpackObject: webpack,
+      options: {},
+    });
+
+    config = scssPlugin.modifyWebpackConfig({
+      env: { target: 'web', dev: 'dev' },
+      webpackConfig: config,
+      webpackObject: webpack,
+      options: { razzleOptions: {} },
+    });
+
+    // Put the SVG loader on top and prevent the asset/resource rule
+    // from processing the app's SVGs
+    config.module.rules.unshift(SVGLOADER);
+    const fileLoaderRule = config.module.rules.find((rule) =>
+      rule.test.test('.svg'),
+    );
+    fileLoaderRule.exclude = /icons\/.*\.svg$/;
+
+    config.plugins.unshift(
+      new webpack.DefinePlugin({
+        __DEVELOPMENT__: true,
+        __CLIENT__: true,
+        __SERVER__: false,
+      }),
+    );
+
+    const resultConfig = {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: { ...config.resolve.alias, ...baseConfig.resolve.alias },
+        fallback: { ...config.resolve.fallback, zlib: false },
+      },
+    };
+
+    // Addons have to be loaded with babel
+    const addonPaths = registry.addonNames.map((addon) =>
+      fs.realpathSync(registry.packages[addon].modulePath),
+    );
+    resultConfig.module.rules[1].exclude = (input) =>
+      // exclude every input from node_modules except from @plone/volto
+      /node_modules\/(?!(@plone\/volto)\/)/.test(input) &&
+      // If input is in an addon, DON'T exclude it
+      !addonPaths.some((p) => input.includes(p));
+
+    const addonExtenders = registry.getAddonExtenders().map((m) => require(m));
+
+    const extendedConfig = addonExtenders.reduce(
+      (acc, extender) =>
+        extender.modify(acc, { target: 'web', dev: 'dev' }, config),
+      resultConfig,
+    );
+
+    // Note: we don't actually support razzle plugins, which are also a feature
+    // of the razzle.extend.js addons file. Those features are probably
+    // provided in a different manner by Storybook plugins (for example scss
+    // loaders).
+
+    return extendedConfig;
+  },
+  babel: async (options) => {
+    return {
+      ...options,
+      plugins: [
+        ...options.plugins,
+        [
+          './node_modules/babel-plugin-root-import/build/index.js',
+          {
+            rootPathSuffix: './src',
+          },
+        ],
+      ],
+      // any extra options you want to set
+    };
+  },
+};
diff --git a/package.json b/package.json
index 0724430..0bd307d 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,10 @@
   "license": "MIT",
   "keywords": [
     "volto-addon",
+    "volto-block",
     "volto",
     "plone",
+    "highlighting",
     "react"
   ],
   "publishConfig": {