@emulsify/core 1.3.1 → 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

@@ -1,8 +1,15 @@
 const { configOverrides } = require('../../../../config/emulsify-core/storybook/main');
 
-const defaultConfig = {
+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',
@@ -19,7 +26,7 @@ const defaultConfig = {
     options: {},
   },
   docs: {
-    autodocs: true,
+    autodocs: false,
   },
   managerHead: (head) => `
     ${head}
@@ -146,8 +153,7 @@ const defaultConfig = {
       }
     </style>
   `,
+  ...safeConfigOverrides,
 };
 
-const config = Object.keys(configOverrides).length ? configOverrides : defaultConfig;
-
 module.exports = config;

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,
 };