@emulsify/core 1.4.0 → 2.0.0

package/.github/workflows/addtoprojects.yml

@@ -18,4 +18,4 @@ jobs:
           # You can target a repository in a different organization
           # to the issue
           project-url: https://github.com/orgs/emulsify-ds/projects/6
-          token: ${{ secrets.ADD_TO_PROJECT_PAT }}
+          github-token: ${{ secrets.ADD_TO_PROJECT_PAT }}

package/.storybook/main.js

@@ -4,7 +4,12 @@ const safeConfigOverrides = configOverrides || {};
 
 const config = {
   stories: [
-    '../../../../components/**/*.stories.@(js|jsx|ts|tsx)',
+    '../../../../(src|components)/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  staticDirs: [
+    '../../../../assets/images',
+    '../../../../assets/icons',
+    '../../../../dist',
   ],
   addons: [
     '../../../@storybook/addon-a11y',

package/.storybook/manager.js

@@ -1,5 +1,4 @@
-import { addons } from '@storybook/addons';
-
+import { addons } from '@storybook/manager-api';
 import emulsifyTheme from './emulsifyTheme';
 
 import('../../../../config/emulsify-core/storybook/theme')

package/.storybook/preview.js

@@ -1,11 +1,8 @@
-import { useEffect } from '@storybook/client-api';
+import { useEffect } from '@storybook/preview-api';
 import Twig from 'twig';
 import { setupTwig } from './setupTwig';
 
-// GLOBAL CSS
-import('../../../../dist/css/style.css');
-
-// Custom theme preview config if it exists.
+// Project config to import stylesheets.
 import('../../../../config/emulsify-core/storybook/preview');
 
 // If in a Drupal project, it's recommended to import a symlinked version of drupal.js.

package/.storybook/webpack.config.js

@@ -1,22 +1,66 @@
 const path = require('path');
 const globImporter = require('node-sass-glob-importer');
+
 const _StyleLintPlugin = require('stylelint-webpack-plugin');
-const { namespaces } = require('./setupTwig');
 const ESLintPlugin = require('eslint-webpack-plugin');
+const resolves = require('../config/webpack/resolves');
+
+// Emulsify project configuration.
+const emulsifyConfig = require('../../../../project.emulsify.json');
+
+/**
+ * Transforms namespace:component to @namespace/template/path
+ */
+class ProjectNameResolverPlugin {
+  constructor(options = {}) {
+    this.prefix = options.projectName;
+  }
+
+  apply(resolver) {
+    const target = resolver.ensureHook('resolve');
+    resolver
+      .getHook('before-resolve')
+      .tapAsync('ProjectNameResolverPlugin', (request, resolveContext, callback) => {
+        const requestPath = request.request;
+
+        if (requestPath && requestPath.startsWith(`${this.prefix}:`)) {
+          const newRequestPath = requestPath.replace(`${this.prefix}:`, `${this.prefix}/`);
+          const newRequest = {
+            ...request,
+            request: newRequestPath,
+          };
+
+          resolver.doResolve(
+            target,
+            newRequest,
+            `Resolved ${this.prefix} URI: ${resolves.TwigResolve.alias[requestPath]}`,
+            resolveContext,
+            callback
+          );
+        } else {
+          callback();
+        }
+      });
+  }
+}
 
 module.exports = async ({ config }) => {
+  // Alias
+  Object.assign(config.resolve.alias, resolves.TwigResolve.alias);
+
   // Twig
   config.module.rules.push({
     test: /\.twig$/,
     use: [
       {
-        loader: 'twig-loader',
+        loader: path.resolve(__dirname, '../config/webpack/sdc-loader.js'),
         options: {
-          twigOptions: {
-            namespaces,
-          },
+          projectName: emulsifyConfig.project.name,
         },
       },
+      {
+        loader: 'twigjs-loader',
+      },
     ],
   });
 
@@ -43,25 +87,33 @@ module.exports = async ({ config }) => {
     ],
   });
 
+  // YAML
+  config.module.rules.push({
+    test: /\.ya?ml$/,
+    loader: 'js-yaml-loader',
+  });
+
+  // Plugins
   config.plugins.push(
     new _StyleLintPlugin({
       configFile: path.resolve(__dirname, '../', '.stylelintrc.json'),
-      context: path.resolve(__dirname, '../', 'components'),
+      context: path.resolve(__dirname, '../', 'src'),
       files: '**/*.scss',
       failOnError: false,
       quiet: false,
     }),
     new ESLintPlugin({
-      context: path.resolve(__dirname, '../', 'components'),
+      context: path.resolve(__dirname, '../', 'src'),
       extensions: ['js'],
     }),
   );
 
-  // YAML
-  config.module.rules.push({
-    test: /\.ya?ml$/,
-    loader: 'js-yaml-loader',
-  });
+  // Resolver Plugins
+  config.resolve.plugins = [
+    new ProjectNameResolverPlugin({
+      projectName: emulsifyConfig.project.name,
+    }),
+  ];
 
   return config;
 };

package/config/eslintrc.config.json

@@ -1,6 +1,5 @@
 {
   "extends": [
-    "airbnb-base",
     "eslint:recommended",
     "plugin:import/recommended",
     "plugin:security/recommended-legacy",

package/config/webpack/loaders.js

@@ -29,9 +29,8 @@ const JSLoader = {
 };
 
 const ImageLoader = {
-  test: /\.(png|svg|jpg|gif)$/i,
-  exclude: /icons\/.*\.svg$/,
-  loader: 'file-loader',
+  test: /\.(png|jpe?g|gif)$/i,
+  type: 'asset',
 };
 
 const CSSLoader = {
@@ -76,13 +75,22 @@ const SVGSpriteLoader = {
   options: {
     extract: true,
     runtimeCompat: true,
+    outputPath: 'dist/',
     spriteFilename: './icons.svg',
   },
 };
 
+const TwigLoader = {
+  test: /\.twig$/,
+  use: {
+    loader: 'twigjs-loader',
+  },
+};
+
 module.exports = {
   JSLoader,
   CSSLoader,
   SVGSpriteLoader,
   ImageLoader,
+  TwigLoader,
 };

package/config/webpack/optimizers.js

@@ -0,0 +1,18 @@
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
+
+const ImageMinimizer = new ImageMinimizerPlugin({
+  minimizer: {
+    implementation: ImageMinimizerPlugin.imageminMinify,
+    options: {
+      plugins: [
+        ['gifsicle', { interlaced: true }],
+        ['jpegtran', { progressive: true }],
+        ['optipng', { optimizationLevel: 5 }],
+      ],
+    },
+  },
+});
+
+module.exports = {
+  minimizer: [ImageMinimizer],
+};

package/config/webpack/plugins.js

@@ -3,37 +3,77 @@ const path = require('path');
 const webpack = require('webpack');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const _MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const _ImageminPlugin = require('imagemin-webpack-plugin').default;
 const _SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
+const CopyPlugin = require('copy-webpack-plugin');
 const glob = require('glob');
+const fs = require('fs-extra');
 
-const imagePath = path.resolve(__dirname, '../../../../../assets/images');
+// Get directories for file contexts.
+const projectDir = path.resolve(__dirname, '../../../../..');
+const srcDir = path.resolve(projectDir, 'src');
 
+// Emulsify project configuration.
+const emulsifyConfig = require('../../../../../project.emulsify.json');
+
+// Compress images plugin.
 const MiniCssExtractPlugin = new _MiniCssExtractPlugin({
   filename: '[name].css',
   chunkFilename: '[id].css',
 });
 
-const ImageminPlugin = new _ImageminPlugin({
-  disable: process.env.NODE_ENV !== 'production',
-  externalImages: {
-    context: imagePath,
-    sources: glob.sync(path.resolve(imagePath, '**/*.{png,jpg,gif,svg}')),
-    destination: imagePath,
-  },
-});
-
+// Create SVG sprite.
 const SpriteLoaderPlugin = new _SpriteLoaderPlugin({
   plainSprite: true,
 });
 
+// Enable Webpack progress plugin.
 const ProgressPlugin = new webpack.ProgressPlugin();
 
+// Glob pattern for markup files.
+const componentFilesPattern = path.resolve(srcDir, '**/*.{twig,yml}');
+
+/**
+ * Prepare list of twig files to copy to "compiled" directories.
+ * @constructor
+ * @param {string} filesMatcher - Glob pattern.
+ */
+function getPatterns(filesMatcher) {
+  const patterns = [];
+  glob.sync(filesMatcher).forEach((file) => {
+    const projectPath = file.split('/src/')[0];
+    const srcStructure = file.split(`${srcDir}/`)[1];
+    const parentDir = srcStructure.split('/')[0];
+    const filePath = file.split(/(foundation\/|components\/|layout\/)/)[2];
+    const consolidateDirs =
+      parentDir === 'layout' || parentDir === 'foundation'
+        ? '/components/'
+        : '/';
+    const newfilePath =
+      emulsifyConfig.project.platform === 'drupal'
+        ? `${projectPath}${consolidateDirs}${parentDir}/${filePath}`
+        : `${projectPath}/dist/${parentDir}/${filePath}`;
+    patterns.push({
+      from: file,
+      to: newfilePath,
+    });
+  });
+
+  return patterns;
+}
+
+// Copy twig files from src directory.
+const CopyTwigPlugin = fs.existsSync(path.resolve(projectDir, 'src'))
+  ? new CopyPlugin({
+      patterns: getPatterns(componentFilesPattern),
+    })
+  : '';
+
+// Export plugin configuration.
 module.exports = {
   ProgressPlugin,
   MiniCssExtractPlugin,
-  ImageminPlugin,
   SpriteLoaderPlugin,
+  CopyTwigPlugin,
   CleanWebpackPlugin: new CleanWebpackPlugin({
     protectWebpackAssets: false, // Required for removal of extra, unwanted dist/css/*.js files.
     cleanOnceBeforeBuildPatterns: ['!*.{png,jpg,gif,svg}'],

package/config/webpack/resolves.js

@@ -0,0 +1,79 @@
+const path = require('path');
+const glob = require('glob');
+const fs = require('fs-extra');
+
+// Emulsify project configuration.
+const emulsifyConfig = require('../../../../../project.emulsify.json');
+
+// Get directories for file contexts.
+const projectDir = path.resolve(__dirname, '../../../../..');
+const projectName = emulsifyConfig.project.name;
+const srcDir = fs.existsSync(path.resolve(projectDir, 'src'))
+  ? path.resolve(projectDir, 'src')
+  : path.resolve(projectDir, 'components');
+
+// Glob pattern for twig aliases.
+const aliasPattern = path.resolve(srcDir, '**/!(_*).twig');
+
+/**
+ * Return all top-level directories from the projects source directory.
+ * @constructor
+ * @param {string} source - Path to source directory.
+ */
+function getDirectories(source) {
+  const dirs = fs
+    .readdirSync(source, { withFileTypes: true }) // Read contents of the directory
+    .filter((dirent) => dirent.isDirectory()) // Filter only directories
+    .map((dirent) => dirent.name);
+  return dirs;
+}
+
+/**
+ * Return clean directory names if numbering is used for sorting.
+ * @constructor
+ * @param {string} dir - Given directory name.
+ */
+function cleanDirectoryName(dir) {
+  if (/^\d{2}/.test(dir)) {
+    return dir.slice(3);
+  }
+  return dir;
+}
+
+/**
+ * Return a list of twig file file paths from the project source directory.
+ * @constructor
+ * @param {string} aliasMatcher - Glob pattern.
+ */
+function getAliases(aliasMatcher) {
+  // Create default aliases
+  let aliases = {};
+  // Add SDC compatible aliases.
+  glob.sync(aliasMatcher).forEach((file) => {
+    const filePath = file.split(`${srcDir}/`)[1];
+    const fileName = path.basename(filePath);
+
+    if (emulsifyConfig.project.platform === 'drupal') {
+      aliases[`${projectName}/${fileName.replace('.twig', '')}`] = file;
+    }
+  });
+  // Add typical @namespace (path to directory) aliases for twig partials.
+  const dirs = getDirectories(srcDir);
+  dirs.forEach((dir) => {
+    const name = cleanDirectoryName(dir);
+    Object.assign(aliases, {
+      [`@${name}`]: `${projectDir}/${path.basename(srcDir)}/${dir}`,
+    });
+  });
+  return aliases;
+}
+
+// Alias twig namespaces.
+const TwigResolve = {
+  extensions: ['.twig'],
+  alias: getAliases(aliasPattern),
+};
+
+module.exports = {
+  TwigResolve,
+};

package/config/webpack/sdc-loader.js

@@ -0,0 +1,8 @@
+module.exports = function (source) {
+  const projectName = this.getOptions().projectName || '';
+  const result = source.replace(
+    new RegExp(`${projectName}:`, 'g'),
+    `${projectName}/`,
+  );
+  return result;
+};

package/config/webpack/webpack.common.js

@@ -2,43 +2,129 @@ const path = require('path');
 const glob = require('glob');
 const loaders = require('./loaders');
 const plugins = require('./plugins');
+const resolves = require('./resolves');
+const optimizers = require('./optimizers');
+const emulsifyConfig = require('../../../../../project.emulsify.json');
+const fs = require('fs-extra');
 
+// Get directories for file contexts.
 const webpackDir = path.resolve(__dirname);
-const rootDir = path.resolve(__dirname, '../../../../..');
-const distDir = path.resolve(__dirname, '../../../../../dist');
+const projectDir = path.resolve(__dirname, '../../../../..');
+const srcDir = fs.existsSync(path.resolve(projectDir, 'src'))
+  ? path.resolve(projectDir, 'src')
+  : path.resolve(projectDir, 'components');
 
 // Glob pattern for scss files that ignore file names prefixed with underscore.
-const scssPattern = path.resolve(rootDir, 'components/**/!(_*).scss');
+const BaseScssPattern = fs.existsSync(path.resolve(projectDir, 'src'))
+  ? path.resolve(srcDir, '!(components|util)/**/!(_*|cl-*|sb-*).scss')
+  : '';
+const ComponentScssPattern = fs.existsSync(path.resolve(projectDir, 'src'))
+  ? path.resolve(srcDir, 'components/**/!(_*|cl-*|sb-*).scss')
+  : path.resolve(srcDir, '**/!(_*|cl-*|sb-*).scss');
+const ComponentLibraryScssPattern = path.resolve(srcDir, 'util/**/!(_).scss');
+
 // Glob pattern for JS files.
-const jsPattern = path.resolve(
-  rootDir,
-  'components/**/!(*.stories|*.component|*.min|*.test).js',
-);
+const jsPattern = fs.existsSync(path.resolve(projectDir, 'src'))
+  ? path.resolve(
+      srcDir,
+      'components/**/!(*.stories|*.component|*.min|*.test).js',
+    )
+  : path.resolve(srcDir, '**/!(*.stories|*.component|*.min|*.test).js');
+
+// Glob pattern for svgSprite config.
+const spritePattern = path.resolve(webpackDir, 'svgSprite.js');
+
+/**
+ * Return all scss/js/svg files that Webpack needs to compile.
+ * @constructor
+ * @param {string} str - Path to file.
+ * @param {string} replacement - string to replace str.
+ */
+function replaceLastSlash(str, replacement) {
+  // Find the last occurrence of '/'
+  const lastSlashIndex = str.lastIndexOf('/');
+  // If there is no '/' in the string, return the original string
+  if (lastSlashIndex === -1) {
+    return str;
+  }
+  // Replace the last '/' with the specified replacement
+  return (
+    str.slice(0, lastSlashIndex) + replacement + str.slice(lastSlashIndex + 1)
+  );
+}
 
-// Prepare list of scss and js file for "entry".
-function getEntries(scssMatcher, jsMatcher) {
+/**
+ * Return all scss/js/svg files that Webpack needs to compile.
+ * @constructor
+ * @param {string} BaseScssMatcher - Glob pattern.
+ * @param {string} ComponentScssMatcher - Glob pattern.
+ * @param {string} ComponentLibraryScssMatcher - Glob pattern.
+ * @param {string} jsMatcher - Glob pattern.
+ * @param {string} spriteMatcher - Glob pattern.
+ */
+function getEntries(
+  BaseScssMatcher,
+  ComponentScssMatcher,
+  ComponentLibraryScssMatcher,
+  jsMatcher,
+  spriteMatcher,
+) {
   const entries = {};
 
-  // SCSS entries
-  glob.sync(scssMatcher).forEach((file) => {
-    const filePath = file.split('components/')[1];
-    const newfilePath = `css/${filePath.replace('.scss', '')}`;
+  // Non-component or global SCSS entries.
+  glob.sync(BaseScssMatcher).forEach((file) => {
+    const filePath = file.split(`${srcDir}/`)[1];
+    const filePathDist = filePath.split('/')[1]
+      ? filePath.split('/')[1]
+      : filePath.split('/')[0];
+    const newfilePath = fs.existsSync(path.resolve(projectDir, 'src'))
+      ? `dist/global/${filePathDist.replace('.scss', '')}`
+      : `dist/css/${filePathDist.replace('.scss', '')}`;
     entries[newfilePath] = file;
   });
 
-  // JS entries
-  glob.sync(jsMatcher).forEach((file) => {
+  // Component SCSS entries.
+  glob.sync(ComponentScssMatcher).forEach((file) => {
     const filePath = file.split('components/')[1];
-    const newfilePath = `js/${filePath.replace('.js', '')}`;
+    const filePathDist = replaceLastSlash(filePath, '/css/');
+    const distStructure = fs.existsSync(path.resolve(projectDir, 'src'))
+      ? 'components'
+      : 'css';
+    const newfilePath =
+      emulsifyConfig.project.platform === 'drupal' &&
+      fs.existsSync(path.resolve(projectDir, 'src'))
+        ? `components/${filePathDist.replace('.scss', '')}`
+        : `dist/${distStructure}/${filePathDist.replace('.scss', '')}`;
     entries[newfilePath] = file;
   });
 
-  entries.svgSprite = path.resolve(webpackDir, 'svgSprite.js');
+  // Component Library SCSS entries.
+  glob.sync(ComponentLibraryScssMatcher).forEach((file) => {
+    const filePath = file.split(/util/)[1];
+    const newfilePath = `dist/storybook/${filePath.replace('.scss', '')}`;
+    entries[newfilePath] = file;
+  });
+
+  // JS entries.
+  glob.sync(jsMatcher).forEach((file) => {
+    if (!file.includes('dist/')) {
+      const filePath = file.split('components/')[1];
+      const filePathDist = replaceLastSlash(filePath, '/js/');
+      const distStructure = fs.existsSync(path.resolve(projectDir, 'src'))
+        ? 'components'
+        : 'js';
+      const newfilePath =
+        emulsifyConfig.project.platform === 'drupal' &&
+        fs.existsSync(path.resolve(projectDir, 'src'))
+          ? `components/${filePathDist.replace('.js', '')}`
+          : `dist/${distStructure}/${filePathDist.replace('.js', '')}`;
+      entries[newfilePath] = file;
+    }
+  });
 
-  // CSS Files.
-  glob.sync(`${webpackDir}/css/*js`).forEach((file) => {
-    const baseFileName = path.basename(file);
-    const newfilePath = `css/${baseFileName.replace('.js', '')}`;
+  glob.sync(spriteMatcher).forEach((file) => {
+    const filePath = file.split('/webpack/')[1];
+    const newfilePath = `dist/${filePath.replace('.js', '')}`;
     entries[newfilePath] = file;
   });
 
@@ -49,13 +135,20 @@ module.exports = {
   stats: {
     errorDetails: true,
   },
-  entry: getEntries(scssPattern, jsPattern),
+  entry: getEntries(
+    BaseScssPattern,
+    ComponentScssPattern,
+    ComponentLibraryScssPattern,
+    jsPattern,
+    spritePattern,
+  ),
   module: {
     rules: [
       loaders.CSSLoader,
       loaders.SVGSpriteLoader,
       loaders.ImageLoader,
       loaders.JSLoader,
+      loaders.TwigLoader,
     ],
   },
   plugins: [
@@ -63,10 +156,13 @@ module.exports = {
     plugins.ImageminPlugin,
     plugins.SpriteLoaderPlugin,
     plugins.ProgressPlugin,
+    plugins.CopyTwigPlugin,
     plugins.CleanWebpackPlugin,
   ],
   output: {
-    path: distDir,
+    path: `${projectDir}`,
     filename: '[name].js',
   },
+  resolve: resolves.TwigResolve,
+  optimization: optimizers,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emulsify/core",
-  "version": "1.4.0",
+  "version": "2.0.0",
   "description": "Bundled tooling for Storybook development + Webpack Build",
   "keywords": [
     "component library",
@@ -47,16 +47,18 @@
   },
   "dependencies": {
     "@babel/core": "^7.25.2",
-    "@babel/eslint-parser": "^7.25.1",
-    "@emulsify/cli": "^1.10.2",
-    "@storybook/addon-a11y": "^7.6.17",
-    "@storybook/addon-actions": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
+    "@emulsify/cli": "^1.11.0",
+    "@storybook/addon-a11y": "^8.2.9",
+    "@storybook/addon-actions": "^8.2.9",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
     "@storybook/addon-styling-webpack": "^1.0.0",
-    "@storybook/addon-themes": "^7.6.17",
-    "@storybook/html": "^7.6.17",
-    "@storybook/html-webpack5": "^7.6.17",
+    "@storybook/addon-themes": "^8.2.9",
+    "@storybook/html": "^8.2.9",
+    "@storybook/html-webpack5": "^8.2.9",
+    "@storybook/manager-api": "^8.2.9",
+    "@storybook/preview-api": "^8.2.9",
+    "@storybook/theming": "^8.2.9",
     "add-attributes-twig-extension": "^0.1.0",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.1.3",
@@ -66,33 +68,36 @@
     "chalk": "^5.2.0",
     "clean-webpack-plugin": "^4.0.0",
     "concurrently": "^8.2.2",
+    "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.1",
     "eslint": "^8.57.0",
-    "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^27.9.0",
+    "eslint-plugin-jest": "^28.8.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-security": "^2.1.1",
+    "eslint-plugin-security": "^3.0.1",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-webpack-plugin": "^4.1.0",
     "file-loader": "^6.2.0",
     "fs-extra": "^11.2.0",
-    "glob": "^10.3.12",
+    "glob": "^11.0.0",
     "graceful-fs": "^4.2.11",
     "html-webpack-plugin": "^5.6.0",
-    "imagemin-webpack-plugin": "^2.4.2",
+    "image-minimizer-webpack-plugin": "^4.1.0",
+    "imagemin": "^9.0.0",
+    "imagemin-gifsicle": "^7.0.0",
+    "imagemin-jpegtran": "^7.0.0",
+    "imagemin-optipng": "^8.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "js-yaml": "^4.1.0",
     "js-yaml-loader": "^1.2.2",
-    "lint-staged": "^15.2.8",
-    "mini-css-extract-plugin": "^2.9.0",
+    "mini-css-extract-plugin": "^2.9.1",
     "node-sass-glob-importer": "^5.3.3",
     "normalize.css": "^8.0.1",
     "open-cli": "^8.0.0",
     "pa11y": "^8.0.0",
-    "postcss": "^8.4.41",
+    "postcss": "^8.4.44",
     "postcss-loader": "^8.1.1",
     "postcss-scss": "^4.0.9",
     "ramda": "^0.30.1",
@@ -100,10 +105,11 @@
     "react-dom": "^18.2.0",
     "regenerator-runtime": "^0.14.1",
     "sass": "^1.75.0",
-    "sass-loader": "^16.0.0",
-    "storybook": "^7.6.17",
-    "style-dictionary": "^3.9.2",
-    "stylelint": "^16.8.1",
+    "sass-loader": "^16.0.1",
+    "semantic-release": "^24.1.0",
+    "storybook": "^8.2.9",
+    "style-dictionary": "^4.1.0",
+    "stylelint": "^16.9.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-prettier": "^5.0.0",
     "stylelint-selector-bem-pattern": "^4.0.0",
@@ -111,23 +117,23 @@
     "svg-sprite-loader": "^6.0.11",
     "token-transformer": "^0.0.33",
     "twig-drupal-filters": "^3.2.0",
-    "twig-loader": "github:fourkitchens/twig-loader",
     "twig-testing-library": "^1.2.0",
+    "twigjs-loader": "^1.0.3",
     "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
     "webpack-merge": "^6.0.1",
     "yaml": "^2.5.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.3.0",
-    "@commitlint/config-conventional": "^19.1.0",
+    "@commitlint/cli": "^19.4.1",
+    "@commitlint/config-conventional": "^19.4.1",
     "@semantic-release/changelog": "^6.0.2",
     "@semantic-release/commit-analyzer": "^13.0.0",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^10.1.3",
+    "@semantic-release/github": "^10.3.0",
     "@semantic-release/release-notes-generator": "^14.0.0",
-    "husky": "^9.1.4",
-    "semantic-release": "^24.0.0"
+    "husky": "^9.1.5",
+    "lint-staged": "^15.2.10"
   },
   "overrides": {
     "graceful-fs": "^4.2.11"

package/.history/.storybook/main_20240722090919.js

@@ -1,153 +0,0 @@
-const { configOverrides } = require('../../../../config/emulsify-core/storybook/main');
-
-const defaultConfig = {
-  stories: [
-    '../../../../components/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
-  addons: [
-    '../../../@storybook/addon-a11y',
-    '../../../@storybook/addon-links',
-    '../../../@storybook/addon-essentials',
-    '../../../@storybook/addon-themes',
-    '../../../@storybook/addon-styling-webpack'
-  ],
-  core: {
-    builder: 'webpack5',
-  },
-  framework: {
-    name: '@storybook/html-webpack5',
-    options: {},
-  },
-  docs: {
-    autodocs: true,
-  },
-  managerHead: (head) => `
-    ${head}
-    <style>
-      :root {
-        --colors-emulsify-blue-100: #e6f5fc;
-        --colors-emulsify-blue-200: #CCECFA;
-        --colors-emulsify-blue-300: #99D9F4;
-        --colors-emulsify-blue-400: #66c5ef;
-        --colors-emulsify-blue-500: #33b2e9;
-        --colors-emulsify-blue-600: #009fe4;
-        --colors-emulsify-blue-700: #007FB6;
-        --colors-emulsify-blue-800: #005f89;
-        --colors-emulsify-blue-900: #00405b;
-        --colors-emulsify-blue-1000: #00202e;
-        --colors-purple: #8B1E7E;
-      }
-
-      .sidebar-container {
-        background: url('https://raw.githubusercontent.com/fourkitchens/emulsify-core/main/assets/images/corner-bkg.png?token=GHSAT0AAAAAACIEXLVDMX56QK3ZIZWHWHTEZNYFYIA') no-repeat top left;
-      }
-
-      .sidebar-container .sidebar-subheading {
-        color: var(--colors-emulsify-blue-200);
-        font-size: 13px;
-        letter-spacing: 0.15em;
-      }
-
-      .sidebar-container .sidebar-subheading button:focus {
-        color: var(--colors-emulsify-blue-300);
-      }
-
-      /** Triangle icon **/
-      .sidebar-container .sidebar-subheading button span {
-        color: var(--colors-emulsify-blue-300);
-      }
-
-      .sidebar-container .search-field input {
-        border-color: var(--colors-emulsify-blue-700);
-      }
-
-      .sidebar-container .search-field input:active {
-        border-color: var(--colors-emulsify-blue-700);
-      }
-
-      .sidebar-container .search-result-recentlyOpened,
-      .sidebar-container .search-result-back,
-      .sidebar-container .search-result-clearHistory {
-        color: var(--colors-emulsify-blue-300) !important;
-        letter-spacing: 0.15em;
-      }
-
-      .sidebar-container .search-result-back span,
-      .sidebar-container .search-result-back svg,
-      .sidebar-container .search-result-clearHistory span,
-      .sidebar-container .search-result-clearHistory svg {
-        letter-spacing: normal;
-        color: white;
-      }
-
-      .sidebar-container .sidebar-item svg {
-        margin-top: 1px;
-      }
-
-      .sidebar-container .sidebar-item span {
-        margin-top: 4px;
-      }
-
-      .sidebar-container .sidebar-subheading-action svg {
-        color: var(--colors-emulsify-blue-400);
-      }
-
-      .sidebar-container .sidebar-subheading-action:hover svg {
-        color: var(--colors-emulsify-blue-300);
-      }
-
-      .sidebar-header button[title="Shortcuts"] {
-        box-shadow: none;
-        border: 1px solid var(--colors-emulsify-blue-700);
-      }
-
-      .sidebar-header button[title="Shortcuts"]:active {
-        border: 1px solid var(--colors-emulsify-blue-500);
-      }
-
-      .sidebar-header button[title="Shortcuts"]:focus {
-        background: transparent;
-      }
-
-      #shortcuts {
-        border-bottom-color: var(--colors-emulsify-blue-900) !important;
-      }
-
-      [role="main"]:not(:nth-child(3)) {
-        top: 1rem !important;
-        height: calc(100vh - 2rem) !important;
-      }
-
-      [role="main"] .os-host .os-content button:hover {
-        background: var(--colors-emulsify-blue-100);
-      }
-
-      [role="main"] .os-host .os-content button:hover svg {
-        color: var(--colors-emulsify-blue-900);
-      }
-
-      #panel-tab-content,
-      #panel-tab-content>* {
-        color: var(--colors-emulsify-blue-1000) !important;
-      }
-
-      #panel-tab-content a,
-      #panel-tab-content a span,
-      #panel-tab-content a span svg {
-        color: var(--colors-emulsify-blue-800);
-      }
-
-      #panel-tab-content>div>div>div>div>div>div {
-        background: transparent;
-      }
-
-      #panel-tab-content>div>div>div>div>div>div>div {
-        color: var(--colors-emulsify-blue-1000) !important;
-      }
-    </style>
-  `,
-};
-
-const config = Object.keys(configOverrides).length ? configOverrides : defaultConfig;
-
-module.exports = config;

package/.history/.storybook/main_20240809140306.js

@@ -1,153 +0,0 @@
-const { configOverrides } = require('../../../../config/emulsify-core/storybook/main');
-
-const defaultConfig = {
-  stories: [
-    '../../../../components/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
-  addons: [
-    '../../../@storybook/addon-a11y',
-    '../../../@storybook/addon-links',
-    '../../../@storybook/addon-essentials',
-    '../../../@storybook/addon-themes',
-    '../../../@storybook/addon-styling-webpack'
-  ],
-  core: {
-    builder: 'webpack5',
-  },
-  framework: {
-    name: '@storybook/html-webpack5',
-    options: {},
-  },
-  docs: {
-    autodocs: false,
-  },
-  managerHead: (head) => `
-    ${head}
-    <style>
-      :root {
-        --colors-emulsify-blue-100: #e6f5fc;
-        --colors-emulsify-blue-200: #CCECFA;
-        --colors-emulsify-blue-300: #99D9F4;
-        --colors-emulsify-blue-400: #66c5ef;
-        --colors-emulsify-blue-500: #33b2e9;
-        --colors-emulsify-blue-600: #009fe4;
-        --colors-emulsify-blue-700: #007FB6;
-        --colors-emulsify-blue-800: #005f89;
-        --colors-emulsify-blue-900: #00405b;
-        --colors-emulsify-blue-1000: #00202e;
-        --colors-purple: #8B1E7E;
-      }
-
-      .sidebar-container {
-        background: url('https://raw.githubusercontent.com/fourkitchens/emulsify-core/main/assets/images/corner-bkg.png?token=GHSAT0AAAAAACIEXLVDMX56QK3ZIZWHWHTEZNYFYIA') no-repeat top left;
-      }
-
-      .sidebar-container .sidebar-subheading {
-        color: var(--colors-emulsify-blue-200);
-        font-size: 13px;
-        letter-spacing: 0.15em;
-      }
-
-      .sidebar-container .sidebar-subheading button:focus {
-        color: var(--colors-emulsify-blue-300);
-      }
-
-      /** Triangle icon **/
-      .sidebar-container .sidebar-subheading button span {
-        color: var(--colors-emulsify-blue-300);
-      }
-
-      .sidebar-container .search-field input {
-        border-color: var(--colors-emulsify-blue-700);
-      }
-
-      .sidebar-container .search-field input:active {
-        border-color: var(--colors-emulsify-blue-700);
-      }
-
-      .sidebar-container .search-result-recentlyOpened,
-      .sidebar-container .search-result-back,
-      .sidebar-container .search-result-clearHistory {
-        color: var(--colors-emulsify-blue-300) !important;
-        letter-spacing: 0.15em;
-      }
-
-      .sidebar-container .search-result-back span,
-      .sidebar-container .search-result-back svg,
-      .sidebar-container .search-result-clearHistory span,
-      .sidebar-container .search-result-clearHistory svg {
-        letter-spacing: normal;
-        color: white;
-      }
-
-      .sidebar-container .sidebar-item svg {
-        margin-top: 1px;
-      }
-
-      .sidebar-container .sidebar-item span {
-        margin-top: 4px;
-      }
-
-      .sidebar-container .sidebar-subheading-action svg {
-        color: var(--colors-emulsify-blue-400);
-      }
-
-      .sidebar-container .sidebar-subheading-action:hover svg {
-        color: var(--colors-emulsify-blue-300);
-      }
-
-      .sidebar-header button[title="Shortcuts"] {
-        box-shadow: none;
-        border: 1px solid var(--colors-emulsify-blue-700);
-      }
-
-      .sidebar-header button[title="Shortcuts"]:active {
-        border: 1px solid var(--colors-emulsify-blue-500);
-      }
-
-      .sidebar-header button[title="Shortcuts"]:focus {
-        background: transparent;
-      }
-
-      #shortcuts {
-        border-bottom-color: var(--colors-emulsify-blue-900) !important;
-      }
-
-      [role="main"]:not(:nth-child(3)) {
-        top: 1rem !important;
-        height: calc(100vh - 2rem) !important;
-      }
-
-      [role="main"] .os-host .os-content button:hover {
-        background: var(--colors-emulsify-blue-100);
-      }
-
-      [role="main"] .os-host .os-content button:hover svg {
-        color: var(--colors-emulsify-blue-900);
-      }
-
-      #panel-tab-content,
-      #panel-tab-content>* {
-        color: var(--colors-emulsify-blue-1000) !important;
-      }
-
-      #panel-tab-content a,
-      #panel-tab-content a span,
-      #panel-tab-content a span svg {
-        color: var(--colors-emulsify-blue-800);
-      }
-
-      #panel-tab-content>div>div>div>div>div>div {
-        background: transparent;
-      }
-
-      #panel-tab-content>div>div>div>div>div>div>div {
-        color: var(--colors-emulsify-blue-1000) !important;
-      }
-    </style>
-  `,
-};
-
-const config = Object.keys(configOverrides).length ? configOverrides : defaultConfig;
-
-module.exports = config;

package/.history/package_20240806084328.json

@@ -1,135 +0,0 @@
-{
-  "name": "@emulsify/core",
-  "version": "1.3.1",
-  "description": "Bundled tooling for Storybook development + Webpack Build",
-  "keywords": [
-    "component library",
-    "design system",
-    "drupal",
-    "pattern library",
-    "storybook",
-    "styleguide"
-  ],
-  "author": "Four Kitchens <shout@fourkitchens.com>",
-  "license": "GPL-2.0",
-  "engines": {
-    "node": ">=20"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/emulsify-ds/emulsify-core.git"
-  },
-  "bugs": {
-    "url": "https://github.com/emulsify-ds/emulsify-core/issues"
-  },
-  "homepage": "https://github.com/emulsify-ds/emulsify-core#readme",
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "coverage": "npm run test && open-cli .coverage/lcov-report/index.html",
-    "format": "npm run lint-fix; npm run prettier-fix",
-    "husky:commit-msg": "commitlint --edit $1",
-    "husky:pre-commit": "npm run lint",
-    "lint": "npm run lint-js",
-    "lint-fix": "npm run lint-js -- --fix",
-    "lint-js": "eslint --config config/eslintrc.config.json --no-error-on-unmatched-pattern ./config ./storybook",
-    "lint-staged": "lint-staged",
-    "prepare": "[ -d '.git' ] && (husky install) || true",
-    "prettier": "prettier --config config/prettierrc.json --ignore-unknown \"**/*.{js,yml,scss,md}\"",
-    "prettier-fix": "prettier --config config/prettierrc.json --write --ignore-unknown \"**/*.{js,yml,scss,md}\"",
-    "semantic-release": "semantic-release",
-    "storybook": "storybook dev --ci -s ../../dist,../../assets/images,../../assets/icons,../../assets/videos -p 6006",
-    "storybook-build": "storybook build -s ../../dist,../../assets/images,../../assets/icons,../../assets/videos -o .out",
-    "storybook-deploy": "storybook-to-ghpages -o .out",
-    "test": "jest --coverage  --config ./config/jest.config.js",
-    "twatch": "jest --no-coverage --watch --verbose"
-  },
-  "dependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/eslint-parser": "^7.25.1",
-    "@emulsify/cli": "^1.10.2",
-    "@storybook/addon-a11y": "^7.6.17",
-    "@storybook/addon-actions": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/addon-styling-webpack": "^1.0.0",
-    "@storybook/addon-themes": "^7.6.17",
-    "@storybook/html": "^7.6.17",
-    "@storybook/html-webpack5": "^7.6.17",
-    "add-attributes-twig-extension": "^0.1.0",
-    "autoprefixer": "^10.4.20",
-    "babel-loader": "^9.1.3",
-    "babel-preset-minify": "^0.5.2",
-    "bem-twig-extension": "^0.1.1",
-    "breakpoint-sass": "^3.0.0",
-    "chalk": "^5.2.0",
-    "clean-webpack-plugin": "^4.0.0",
-    "concurrently": "^8.2.2",
-    "css-loader": "^7.1.1",
-    "eslint": "^8.57.0",
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^27.9.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-security": "^2.1.1",
-    "eslint-plugin-storybook": "^0.8.0",
-    "eslint-webpack-plugin": "^4.1.0",
-    "file-loader": "^6.2.0",
-    "fs-extra": "^11.2.0",
-    "glob": "^10.3.12",
-    "graceful-fs": "^4.2.11",
-    "html-webpack-plugin": "^5.6.0",
-    "imagemin-webpack-plugin": "^2.4.2",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "js-yaml": "^4.1.0",
-    "js-yaml-loader": "^1.2.2",
-    "lint-staged": "^15.2.8",
-    "mini-css-extract-plugin": "^2.9.0",
-    "node-sass-glob-importer": "^5.3.3",
-    "normalize.css": "^8.0.1",
-    "open-cli": "^8.0.0",
-    "pa11y": "^8.0.0",
-    "postcss": "^8.4.41",
-    "postcss-loader": "^8.1.1",
-    "postcss-scss": "^4.0.9",
-    "ramda": "^0.30.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "regenerator-runtime": "^0.14.1",
-    "sass": "^1.75.0",
-    "sass-loader": "^16.0.0",
-    "storybook": "^7.6.17",
-    "style-dictionary": "^3.9.2",
-    "stylelint": "^16.8.1",
-    "stylelint-config-standard-scss": "^13.1.0",
-    "stylelint-prettier": "^5.0.0",
-    "stylelint-selector-bem-pattern": "^4.0.0",
-    "stylelint-webpack-plugin": "^5.0.1",
-    "svg-sprite-loader": "^6.0.11",
-    "token-transformer": "^0.0.33",
-    "twig-drupal-filters": "^3.2.0",
-    "twig-loader": "github:fourkitchens/twig-loader",
-    "twig-testing-library": "^1.2.0",
-    "webpack": "^5.91.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-merge": "^6.0.1",
-    "yaml": "^2.5.0"
-  },
-  "devDependencies": {
-    "@commitlint/cli": "^19.3.0",
-    "@commitlint/config-conventional": "^19.1.0",
-    "@semantic-release/changelog": "^6.0.2",
-    "@semantic-release/commit-analyzer": "^13.0.0",
-    "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^10.1.3",
-    "@semantic-release/release-notes-generator": "^14.0.0",
-    "husky": "^9.1.4",
-    "semantic-release": "^24.0.0"
-  },
-  "overrides": {
-    "graceful-fs": "^4.2.11"
-  }
-}

package/.history/package_20240809140648.json

@@ -1,135 +0,0 @@
-{
-  "name": "@emulsify/core",
-  "version": "1.4.0",
-  "description": "Bundled tooling for Storybook development + Webpack Build",
-  "keywords": [
-    "component library",
-    "design system",
-    "drupal",
-    "pattern library",
-    "storybook",
-    "styleguide"
-  ],
-  "author": "Four Kitchens <shout@fourkitchens.com>",
-  "license": "GPL-2.0",
-  "engines": {
-    "node": ">=20"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/emulsify-ds/emulsify-core.git"
-  },
-  "bugs": {
-    "url": "https://github.com/emulsify-ds/emulsify-core/issues"
-  },
-  "homepage": "https://github.com/emulsify-ds/emulsify-core#readme",
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "coverage": "npm run test && open-cli .coverage/lcov-report/index.html",
-    "format": "npm run lint-fix; npm run prettier-fix",
-    "husky:commit-msg": "commitlint --edit $1",
-    "husky:pre-commit": "npm run lint",
-    "lint": "npm run lint-js",
-    "lint-fix": "npm run lint-js -- --fix",
-    "lint-js": "eslint --config config/eslintrc.config.json --no-error-on-unmatched-pattern ./config ./storybook",
-    "lint-staged": "lint-staged",
-    "prepare": "[ -d '.git' ] && (husky install) || true",
-    "prettier": "prettier --config config/prettierrc.json --ignore-unknown \"**/*.{js,yml,scss,md}\"",
-    "prettier-fix": "prettier --config config/prettierrc.json --write --ignore-unknown \"**/*.{js,yml,scss,md}\"",
-    "semantic-release": "semantic-release",
-    "storybook": "storybook dev --ci -s ../../dist,../../assets/images,../../assets/icons,../../assets/videos -p 6006",
-    "storybook-build": "storybook build -s ../../dist,../../assets/images,../../assets/icons,../../assets/videos -o .out",
-    "storybook-deploy": "storybook-to-ghpages -o .out",
-    "test": "jest --coverage  --config ./config/jest.config.js",
-    "twatch": "jest --no-coverage --watch --verbose"
-  },
-  "dependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/eslint-parser": "^7.25.1",
-    "@emulsify/cli": "^1.10.2",
-    "@storybook/addon-a11y": "^7.6.17",
-    "@storybook/addon-actions": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/addon-styling-webpack": "^1.0.0",
-    "@storybook/addon-themes": "^7.6.17",
-    "@storybook/html": "^7.6.17",
-    "@storybook/html-webpack5": "^7.6.17",
-    "add-attributes-twig-extension": "^0.1.0",
-    "autoprefixer": "^10.4.20",
-    "babel-loader": "^9.1.3",
-    "babel-preset-minify": "^0.5.2",
-    "bem-twig-extension": "^0.1.1",
-    "breakpoint-sass": "^3.0.0",
-    "chalk": "^5.2.0",
-    "clean-webpack-plugin": "^4.0.0",
-    "concurrently": "^8.2.2",
-    "css-loader": "^7.1.1",
-    "eslint": "^8.57.0",
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^27.9.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-security": "^2.1.1",
-    "eslint-plugin-storybook": "^0.8.0",
-    "eslint-webpack-plugin": "^4.1.0",
-    "file-loader": "^6.2.0",
-    "fs-extra": "^11.2.0",
-    "glob": "^10.3.12",
-    "graceful-fs": "^4.2.11",
-    "html-webpack-plugin": "^5.6.0",
-    "imagemin-webpack-plugin": "^2.4.2",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "js-yaml": "^4.1.0",
-    "js-yaml-loader": "^1.2.2",
-    "lint-staged": "^15.2.8",
-    "mini-css-extract-plugin": "^2.9.0",
-    "node-sass-glob-importer": "^5.3.3",
-    "normalize.css": "^8.0.1",
-    "open-cli": "^8.0.0",
-    "pa11y": "^8.0.0",
-    "postcss": "^8.4.41",
-    "postcss-loader": "^8.1.1",
-    "postcss-scss": "^4.0.9",
-    "ramda": "^0.30.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "regenerator-runtime": "^0.14.1",
-    "sass": "^1.75.0",
-    "sass-loader": "^16.0.0",
-    "storybook": "^7.6.17",
-    "style-dictionary": "^3.9.2",
-    "stylelint": "^16.8.1",
-    "stylelint-config-standard-scss": "^13.1.0",
-    "stylelint-prettier": "^5.0.0",
-    "stylelint-selector-bem-pattern": "^4.0.0",
-    "stylelint-webpack-plugin": "^5.0.1",
-    "svg-sprite-loader": "^6.0.11",
-    "token-transformer": "^0.0.33",
-    "twig-drupal-filters": "^3.2.0",
-    "twig-loader": "github:fourkitchens/twig-loader",
-    "twig-testing-library": "^1.2.0",
-    "webpack": "^5.91.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-merge": "^6.0.1",
-    "yaml": "^2.5.0"
-  },
-  "devDependencies": {
-    "@commitlint/cli": "^19.3.0",
-    "@commitlint/config-conventional": "^19.1.0",
-    "@semantic-release/changelog": "^6.0.2",
-    "@semantic-release/commit-analyzer": "^13.0.0",
-    "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^10.1.3",
-    "@semantic-release/release-notes-generator": "^14.0.0",
-    "husky": "^9.1.4",
-    "semantic-release": "^24.0.0"
-  },
-  "overrides": {
-    "graceful-fs": "^4.2.11"
-  }
-}

package/config/webpack/css/style.js

@@ -1 +0,0 @@
-import '../../../../../../components/style.scss';

package/config/webpack/css.js

@@ -1 +0,0 @@
-import '../../../../../../components/style.scss';