Add new storybook.

web/themes/contrib/civictheme_base/.storybook/importer.scss_variables.js

@@ -1,9 +1,8 @@
-// phpcs:ignoreFile
 //
 // Extract CSS variables as object from SCSS file.
 //
-const fs = require('fs');
-const extractor = require('@alexskrypnyk/scss-variables-extractor');
+import fs from 'fs';
+import extractor from '@alexskrypnyk/scss-variables-extractor';
 
 const files = [
   './components/00-base/_variables.base.scss',
@@ -23,6 +22,6 @@ function getVariables() {
   return variables;
 }
 
-module.exports = {
+export default {
   getVariables,
 };

web/themes/contrib/civictheme_base/.storybook/main.js

@@ -1,54 +1,17 @@
-// phpcs:ignoreFile
-/**
- * Custom configuration for Storybook.
- */
-
-// Using Production version of the asset building Webpack configuration to
-// unify the building pipeline.
-const path = require('path');
-const { merge } = require('webpack-merge');
-const webpack = require('webpack');
-const custom = require('../webpack/webpack.prod');
-const scssVariables = require('./importer.scss_variables');
-const iconUtils = require('../components/00-base/icon/icon.utils');
-const backgroundUtils = require('../components/00-base/background/background.utils');
-const logoUtils = require('../components/02-molecules/logo/logo.utils');
-const addonConfig = require('./addon-config').default();
-
-const customPlugin = new webpack.DefinePlugin({
-  BACKGROUNDS: JSON.stringify(backgroundUtils.getBackgrounds()),
-  ICONS: JSON.stringify(iconUtils.getIcons()),
-  LOGOS: JSON.stringify(logoUtils.getLogos()),
-  SCSS_VARIABLES: JSON.stringify(scssVariables.getVariables()),
-});
-
-module.exports = {
+const config = {
   stories: [
     '../components/**/*.stories.js',
   ],
-  addons: addonConfig,
-  webpackFinal: async (config) => {
-    // Replace normal CSS import with stories CSS import, which already includes
-    // normal CSS import. This is to allow to resolve variables and mixins in
-    // stories CSS.
-    custom.entry = custom.entry.main.map((value) => (value.indexOf('components_css.js') > -1 ? path.resolve(__dirname, 'components_css.stories.js') : value));
-
-    // Remove theme-related entries as components should not have them.
-    custom.entry = custom.entry.filter((p) => !/\/theme_/g.test(p));
-
-    // Modify common configs to let Storybook take over.
-    delete custom.output;
-    delete custom.plugins;
-    custom.plugins = [
-      customPlugin,
-    ];
-    // Special case: override whatever loader is used to load styles with a
-    // style-loader in order to have styles injected during the runtime.
-    custom.module.rules[1].use[0] = 'style-loader';
-
-    // Override assets location for Storybook.
-    custom.module.rules[1].use[2].options.additionalData = custom.module.rules[1].use[2].options.additionalData.replace(/\$ct-assets-directory:\s*[^;]+;/, "$ct-assets-directory: './assets/';");
-
-    return merge(config, custom);
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@whitespace/storybook-addon-html',
+  ],
+  framework: {
+    name: '@storybook/html-vite',
+    options: {},
   },
+  staticDirs: [{ from: '../assets', to: '/assets' }, './static'],
 };
+
+export default config;

web/themes/contrib/civictheme_base/.storybook/manager.js

@@ -1,12 +1,6 @@
-// phpcs:ignoreFile
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import theme from './theme';
 
 addons.setConfig({
   theme,
-  toolbar: {
-    zoom: {
-      hidden: true,
-    },
-  },
 });