@emulsify/core 1.2.1 → 1.3.0

package/.history/config/webpack/{loaders_20240401184511.js → loaders_20240730152304.js}

@@ -9,14 +9,14 @@ let postcssConfig;
 if (fs.existsSync('./config/babel.config.js')) {
   babelConfig = './config/babel.config.js';
 } else {
-  babelConfig = './node_modules/emulsify-core/config/babel.config.js';
+  babelConfig = './node_modules/@emulsify/core/config/babel.config.js';
 }
 
 // Check if custom postcss config is available.
 if (fs.existsSync('./config/postcss.config.js')) {
   postcssConfig = './config/postcss.config.js';
 } else {
-  postcssConfig = './node_modules/emulsify-core/config/postcss.config.js';
+  postcssConfig = './node_modules/@emulsify/core/config/postcss.config.js';
 }
 
 const JSLoader = {
@@ -29,7 +29,7 @@ const JSLoader = {
 };
 
 const ImageLoader = {
-  test: /\.(png|svg|jpg|gif)$/i,
+  test: /\.(jpe?g|png|gif)$/i,
   exclude: /icons\/.*\.svg$/,
   loader: 'file-loader',
 };

package/.history/config/webpack/loaders_20240730152315.js

@@ -0,0 +1,87 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const globImporter = require('node-sass-glob-importer');
+const fs = require('fs-extra');
+
+let babelConfig;
+let postcssConfig;
+
+// Check if custom babel config is available.
+if (fs.existsSync('./config/babel.config.js')) {
+  babelConfig = './config/babel.config.js';
+} else {
+  babelConfig = './node_modules/@emulsify/core/config/babel.config.js';
+}
+
+// Check if custom postcss config is available.
+if (fs.existsSync('./config/postcss.config.js')) {
+  postcssConfig = './config/postcss.config.js';
+} else {
+  postcssConfig = './node_modules/@emulsify/core/config/postcss.config.js';
+}
+
+const JSLoader = {
+  test: /^(?!.*\.(stories|component)\.js$).*\.js$/,
+  exclude: /node_modules/,
+  loader: 'babel-loader',
+  options: {
+    configFile: babelConfig,
+  },
+};
+
+const ImageLoader = {
+  test: /\.(jpe?g|png|gif|svg)$/i,
+  exclude: /icons\/.*\.svg$/,
+  loader: 'file-loader',
+};
+
+const CSSLoader = {
+  test: /\.s[ac]ss$/i,
+  exclude: /node_modules/,
+  use: [
+    MiniCssExtractPlugin.loader,
+    {
+      loader: 'css-loader',
+      options: {
+        sourceMap: true,
+        url: false,
+      },
+    },
+    {
+      loader: 'postcss-loader',
+      options: {
+        sourceMap: true,
+        postcssOptions: {
+          config: postcssConfig,
+          plugins: [['autoprefixer']],
+        },
+      },
+    },
+    {
+      loader: 'sass-loader',
+      options: {
+        sourceMap: true,
+        sassOptions: {
+          importer: globImporter(),
+          outputStyle: 'compressed',
+        },
+      },
+    },
+  ],
+};
+
+const SVGSpriteLoader = {
+  test: /icons\/.*\.svg$/, // your icons directory
+  loader: 'svg-sprite-loader',
+  options: {
+    extract: true,
+    runtimeCompat: true,
+    spriteFilename: './icons.svg',
+  },
+};
+
+module.exports = {
+  JSLoader,
+  CSSLoader,
+  SVGSpriteLoader,
+  ImageLoader,
+};

package/.history/config/webpack/plugins_20240730152746.js

@@ -0,0 +1,77 @@
+/* eslint-disable no-underscore-dangle */
+const path = require('path');
+const webpack = require('webpack');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const _MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
+const _SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
+const glob = require('glob');
+
+const imagePath = path.resolve(__dirname, '../../../../../assets/images');
+
+const MiniCssExtractPlugin = new _MiniCssExtractPlugin({
+  filename: '[name].css',
+  chunkFilename: '[id].css',
+});
+
+const ImageminPlugin = new ImageMinimizerPlugin({
+  minimizer: {
+    implementation: ImageMinimizerPlugin.imageminMinify,
+    options: {
+      // Lossless optimization with custom option
+      // Feel free to experiment with options for better result for you
+      plugins: [
+        ["gifsicle", { interlaced: true }],
+        ["jpegtran", { progressive: true }],
+        ["optipng", { optimizationLevel: 5 }],
+        // Svgo configuration here https://github.com/svg/svgo#configuration
+        [
+          "svgo",
+          {
+            plugins: [
+              {
+                name: "preset-default",
+                params: {
+                  overrides: {
+                    removeViewBox: false,
+                    addAttributesToSVGElement: {
+                      params: {
+                        attributes: [
+                          { xmlns: "http://www.w3.org/2000/svg" },
+                        ],
+                      },
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      ],
+    },
+  },
+});
+
+const SpriteLoaderPlugin = new _SpriteLoaderPlugin({
+  plainSprite: true,
+});
+
+const ProgressPlugin = new webpack.ProgressPlugin();
+
+module.exports = {
+  ProgressPlugin,
+  MiniCssExtractPlugin,
+  ImageminPlugin,
+  SpriteLoaderPlugin,
+  CleanWebpackPlugin: new CleanWebpackPlugin({
+    protectWebpackAssets: false, // Required for removal of extra, unwanted dist/css/*.js files.
+    cleanOnceBeforeBuildPatterns: ['!*.{png,jpg,gif,svg}'],
+    cleanAfterEveryBuildPatterns: [
+      'remove/**',
+      '!js',
+      'css/**/*.js', // Remove all unwanted, auto generated JS files from dist/css folder.
+      'css/**/*.js.map',
+      '!*.{png,jpg,gif,svg}',
+    ],
+  }),
+};

package/.history/config/webpack/plugins_20240730152818.js

@@ -0,0 +1,76 @@
+/* eslint-disable no-underscore-dangle */
+const path = require('path');
+const webpack = require('webpack');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const _MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
+const _SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
+const glob = require('glob');
+
+const imagePath = path.resolve(__dirname, '../../../../../assets/images');
+
+const MiniCssExtractPlugin = new _MiniCssExtractPlugin({
+  filename: '[name].css',
+  chunkFilename: '[id].css',
+});
+
+const ImageminPlugin = new ImageMinimizerPlugin({
+  minimizer: {
+    implementation: ImageMinimizerPlugin.imageminMinify,
+    options: {
+      // Lossless optimization with custom option
+      plugins: [
+        ["gifsicle", { interlaced: true }],
+        ["jpegtran", { progressive: true }],
+        ["optipng", { optimizationLevel: 5 }],
+        // Svgo configuration here https://github.com/svg/svgo#configuration
+        [
+          "svgo",
+          {
+            plugins: [
+              {
+                name: "preset-default",
+                params: {
+                  overrides: {
+                    removeViewBox: false,
+                    addAttributesToSVGElement: {
+                      params: {
+                        attributes: [
+                          { xmlns: "http://www.w3.org/2000/svg" },
+                        ],
+                      },
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      ],
+    },
+  },
+});
+
+const SpriteLoaderPlugin = new _SpriteLoaderPlugin({
+  plainSprite: true,
+});
+
+const ProgressPlugin = new webpack.ProgressPlugin();
+
+module.exports = {
+  ProgressPlugin,
+  MiniCssExtractPlugin,
+  ImageminPlugin,
+  SpriteLoaderPlugin,
+  CleanWebpackPlugin: new CleanWebpackPlugin({
+    protectWebpackAssets: false, // Required for removal of extra, unwanted dist/css/*.js files.
+    cleanOnceBeforeBuildPatterns: ['!*.{png,jpg,gif,svg}'],
+    cleanAfterEveryBuildPatterns: [
+      'remove/**',
+      '!js',
+      'css/**/*.js', // Remove all unwanted, auto generated JS files from dist/css folder.
+      'css/**/*.js.map',
+      '!*.{png,jpg,gif,svg}',
+    ],
+  }),
+};

package/.history/config/webpack/plugins_20240730153144.js

@@ -0,0 +1,76 @@
+/* eslint-disable no-underscore-dangle */
+const path = require('path');
+const webpack = require('webpack');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const _MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
+const _SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
+const glob = require('glob');
+
+const imagePath = path.resolve(__dirname, '../../../../../assets/images');
+
+const MiniCssExtractPlugin = new _MiniCssExtractPlugin({
+  filename: '[name].css',
+  chunkFilename: '[id].css',
+});
+
+const ImageminPlugin = new ImageMinimizerPlugin({
+  minimizer: {
+    implementation: ImageMinimizerPlugin.imageminMinify,
+    options: {
+      // Lossless optimization with custom option
+      plugins: [
+        ['gifsicle', { interlaced: true }],
+        ['jpegtran', { progressive: true }],
+        ['optipng', { optimizationLevel: 5 }],
+        // Svgo configuration here https://github.com/svg/svgo#configuration
+        [
+          "svgo",
+          {
+            plugins: [
+              {
+                name: "preset-default",
+                params: {
+                  overrides: {
+                    removeViewBox: false,
+                    addAttributesToSVGElement: {
+                      params: {
+                        attributes: [
+                          { xmlns: "http://www.w3.org/2000/svg" },
+                        ],
+                      },
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      ],
+    },
+  },
+});
+
+const SpriteLoaderPlugin = new _SpriteLoaderPlugin({
+  plainSprite: true,
+});
+
+const ProgressPlugin = new webpack.ProgressPlugin();
+
+module.exports = {
+  ProgressPlugin,
+  MiniCssExtractPlugin,
+  ImageminPlugin,
+  SpriteLoaderPlugin,
+  CleanWebpackPlugin: new CleanWebpackPlugin({
+    protectWebpackAssets: false, // Required for removal of extra, unwanted dist/css/*.js files.
+    cleanOnceBeforeBuildPatterns: ['!*.{png,jpg,gif,svg}'],
+    cleanAfterEveryBuildPatterns: [
+      'remove/**',
+      '!js',
+      'css/**/*.js', // Remove all unwanted, auto generated JS files from dist/css folder.
+      'css/**/*.js.map',
+      '!*.{png,jpg,gif,svg}',
+    ],
+  }),
+};

package/.history/config/webpack/plugins_20240730153215.js

@@ -0,0 +1,76 @@
+/* eslint-disable no-underscore-dangle */
+const path = require('path');
+const webpack = require('webpack');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const _MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
+const _SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
+const glob = require('glob');
+
+const imagePath = path.resolve(__dirname, '../../../../../assets/images');
+
+const MiniCssExtractPlugin = new _MiniCssExtractPlugin({
+  filename: '[name].css',
+  chunkFilename: '[id].css',
+});
+
+const ImageminPlugin = new ImageMinimizerPlugin({
+  minimizer: {
+    implementation: ImageMinimizerPlugin.imageminMinify,
+    options: {
+      // Lossless optimization with custom option
+      plugins: [
+        ['gifsicle', { interlaced: true }],
+        ['jpegtran', { progressive: true }],
+        ['optipng', { optimizationLevel: 5 }],
+        // Svgo configuration here https://github.com/svg/svgo#configuration
+        [
+          "svgo",
+          {
+            plugins: [
+              {
+                name: "preset-default",
+                params: {
+                  overrides: {
+                    removeViewBox: false,
+                    addAttributesToSVGElement: {
+                      params: {
+                        attributes: [
+                          { xmlns: "http://www.w3.org/2000/svg" },
+                        ],
+                      },
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      ],
+    },
+  },
+});
+
+const SpriteLoaderPlugin = new _SpriteLoaderPlugin({
+  plainSprite: true,
+});
+
+const ProgressPlugin = new webpack.ProgressPlugin();
+
+module.exports = {
+  ProgressPlugin,
+  MiniCssExtractPlugin,
+  ImageminPlugin,
+  SpriteLoaderPlugin,
+  CleanWebpackPlugin: new CleanWebpackPlugin({
+    protectWebpackAssets: false, // Required for removal of extra, unwanted dist/css/*.js files.
+    cleanOnceBeforeBuildPatterns: ['!*.{png,jpg,gif,svg}'],
+    cleanAfterEveryBuildPatterns: [
+      'remove/**',
+      '!js',
+      'css/**/*.js', // Remove all unwanted, auto generated JS files from dist/css folder.
+      'css/**/*.js.map',
+      '!*.{png,jpg,gif,svg}',
+    ],
+  }),
+};

package/.history/config/webpack/{webpack.common_20240607090919.js → webpack.common_20240730152548.js}

@@ -4,8 +4,8 @@ const loaders = require('./loaders');
 const plugins = require('./plugins');
 
 const webpackDir = path.resolve(__dirname);
-const rootDir = path.resolve(__dirname, '../../../..');
-const distDir = path.resolve(__dirname, '../../../../dist');
+const rootDir = path.resolve(__dirname, '../../../../..');
+const distDir = path.resolve(__dirname, '../../../../../dist');
 
 // Glob pattern for scss files that ignore file names prefixed with underscore.
 const scssPattern = path.resolve(rootDir, 'components/**/!(_*).scss');
@@ -60,11 +60,13 @@ module.exports = {
   },
   plugins: [
     plugins.MiniCssExtractPlugin,
-    plugins.ImageminPlugin,
     plugins.SpriteLoaderPlugin,
     plugins.ProgressPlugin,
     plugins.CleanWebpackPlugin,
   ],
+  optimization: [
+    plugins.ImageminPlugin,
+  ],
   output: {
     path: distDir,
     filename: '[name].js',

package/.history/config/webpack/webpack.common_20240730152652.js

@@ -0,0 +1,76 @@
+const path = require('path');
+const glob = require('glob');
+const loaders = require('./loaders');
+const plugins = require('./plugins');
+
+const webpackDir = path.resolve(__dirname);
+const rootDir = path.resolve(__dirname, '../../../../..');
+const distDir = path.resolve(__dirname, '../../../../../dist');
+
+// Glob pattern for scss files that ignore file names prefixed with underscore.
+const scssPattern = path.resolve(rootDir, 'components/**/!(_*).scss');
+// Glob pattern for JS files.
+const jsPattern = path.resolve(
+  rootDir,
+  'components/**/!(*.stories|*.component|*.min|*.test).js',
+);
+
+// Prepare list of scss and js file for "entry".
+function getEntries(scssMatcher, jsMatcher) {
+  const entries = {};
+
+  // SCSS entries
+  glob.sync(scssMatcher).forEach((file) => {
+    const filePath = file.split('components/')[1];
+    const newfilePath = `css/${filePath.replace('.scss', '')}`;
+    entries[newfilePath] = file;
+  });
+
+  // JS entries
+  glob.sync(jsMatcher).forEach((file) => {
+    const filePath = file.split('components/')[1];
+    const newfilePath = `js/${filePath.replace('.js', '')}`;
+    entries[newfilePath] = file;
+  });
+
+  entries.svgSprite = path.resolve(webpackDir, 'svgSprite.js');
+
+  // CSS Files.
+  glob.sync(`${webpackDir}/css/*js`).forEach((file) => {
+    const baseFileName = path.basename(file);
+    const newfilePath = `css/${baseFileName.replace('.js', '')}`;
+    entries[newfilePath] = file;
+  });
+
+  return entries;
+}
+
+module.exports = {
+  stats: {
+    errorDetails: true,
+  },
+  entry: getEntries(scssPattern, jsPattern),
+  module: {
+    rules: [
+      loaders.CSSLoader,
+      loaders.SVGSpriteLoader,
+      loaders.ImageLoader,
+      loaders.JSLoader,
+    ],
+  },
+  plugins: [
+    plugins.MiniCssExtractPlugin,
+    plugins.SpriteLoaderPlugin,
+    plugins.ProgressPlugin,
+    plugins.CleanWebpackPlugin,
+  ],
+  optimization: {
+    minimizer: [
+      plugins.ImageminPlugin
+    ]
+  },
+  output: {
+    path: distDir,
+    filename: '[name].js',
+  },
+};

package/.history/package_20240730153116.json

@@ -0,0 +1,136 @@
+{
+  "name": "@emulsify/core",
+  "version": "1.2.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.24.0",
+    "@babel/eslint-parser": "^7.25.1",
+    "@emulsify/cli": "^1.10.1",
+    "@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.19",
+    "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",
+    "image-minimizer-webpack-plugin": "^4.1.0",
+    "imagemin": "^9.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.2",
+    "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": "^7.0.0",
+    "postcss": "^8.4.40",
+    "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": "^14.2.1",
+    "storybook": "^7.6.17",
+    "style-dictionary": "^3.9.2",
+    "stylelint": "^16.8.0",
+    "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": "^5.10.0",
+    "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"
+  }
+}