@emulsify/core 2.0.0 → 2.2.0

package/.storybook/preview.js

@@ -1,9 +1,6 @@
 import { useEffect } from '@storybook/preview-api';
 import Twig from 'twig';
-import { setupTwig } from './setupTwig';
-
-// Project config to import stylesheets.
-import('../../../../config/emulsify-core/storybook/preview');
+import { setupTwig, fetchCSSFiles } from './utils.js';
 
 // If in a Drupal project, it's recommended to import a symlinked version of drupal.js.
 import './_drupal.js';
@@ -21,6 +18,7 @@ export const decorators = [
 ];
 
 setupTwig(Twig);
+fetchCSSFiles();
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },

package/.storybook/{setupTwig.js → utils.js}

@@ -22,6 +22,29 @@ const fetchVariantConfig = () => {
   }
 };
 
+/**
+ * Fetches and loads all CSS files from the specified directories based on the project's configuration.
+ * If the platform is 'drupal', it also includes CSS files from additional component directories.
+ *
+ * @returns {undefined} If an error occurs, the function will return undefined.
+ */
+const fetchCSSFiles = () => {
+  try {
+    // Load all CSS files from 'dist'.
+    const cssFiles = require.context('../../../../dist', true, /\.css$/);
+    cssFiles.keys().forEach(file => cssFiles(file));
+
+    // Load all CSS files from 'components' for 'drupal' platform.
+    const emulsifyConfig = require('../../../../project.emulsify.json');
+    if (emulsifyConfig.project.platform === 'drupal') {
+      const drupalCSSFiles = require.context('../../../../components', true, /\.css$/);
+      drupalCSSFiles.keys().forEach(file => drupalCSSFiles(file));
+    }
+  } catch (e) {
+    return undefined;
+  }
+};
+
 module.exports.namespaces = {};
 for (const { name, directory } of fetchVariantConfig()) {
   module.exports.namespaces[name] = resolve(__dirname, '../../../../', directory);
@@ -41,3 +64,6 @@ module.exports.setupTwig = function setupTwig(twig) {
   twigAddAttributes(twig);
   return twig;
 };
+
+// Export the fetchCSSFiles function
+module.exports.fetchCSSFiles = fetchCSSFiles;

package/.storybook/webpack.config.js

@@ -115,5 +115,10 @@ module.exports = async ({ config }) => {
     }),
   ];
 
+  // Configure fallback for optional modules that may not be present
+  config.resolve.fallback = {
+    '../../../../components': false,
+  };
+
   return config;
 };

package/config/.stylelintrc.json

@@ -50,7 +50,13 @@
     "function-no-unknown": null,
     "import-notation": null,
     "media-feature-range-notation": null,
-    "prettier/prettier": true,
+    "prettier/prettier": [
+      true,
+      {
+        "singleQuote": true,
+        "tabWidth": 2
+      }
+    ],
     "property-no-vendor-prefix": null,
     "selector-class-pattern": null,
     "selector-not-notation": null,

package/config/eslintrc.config.json

@@ -21,9 +21,16 @@
     "it": true,
     "describe": true
   },
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "requireConfigFile": false,
+    "babelOptions": {
+      "babelrc": false,
+      "configFile": false
+    }
+  },
   "rules": {
     "strict": 0,
-    "prettier/prettier": "error",
     "consistent-return": ["off"],
     "no-underscore-dangle": ["off"],
     "max-nested-callbacks": ["warn", 3],
@@ -36,6 +43,7 @@
     }],
     "no-param-reassign": ["off"],
     "no-prototype-builtins": ["off"],
+    "prettier/prettier": ["error", { "singleQuote": true }],
     "valid-jsdoc": ["warn", {
       "prefer": {
         "returns": "return",
@@ -44,7 +52,8 @@
       "requireReturn": false
     }],
     "no-unused-vars": ["warn"],
-    "operator-linebreak": ["error", "after", { "overrides": { "?": "ignore", ":": "ignore" } }]
+    "operator-linebreak": ["error", "after", { "overrides": { "?": "ignore", ":": "ignore" } }],
+    "quotes": ["error", "single"]
   },
   "settings": {
     "import/ignore": [

package/config/webpack/webpack.common.js

@@ -21,7 +21,10 @@ const BaseScssPattern = fs.existsSync(path.resolve(projectDir, 'src'))
 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');
+const ComponentLibraryScssPattern = path.resolve(
+  srcDir,
+  '**/*{cl-*,sb-*}.scss',
+);
 
 // Glob pattern for JS files.
 const jsPattern = fs.existsSync(path.resolve(projectDir, 'src'))
@@ -83,7 +86,7 @@ function getEntries(
     entries[newfilePath] = file;
   });
 
-  // Component SCSS entries.
+  // Component SCSS entries.-
   glob.sync(ComponentScssMatcher).forEach((file) => {
     const filePath = file.split('components/')[1];
     const filePathDist = replaceLastSlash(filePath, '/css/');
@@ -100,7 +103,7 @@ function getEntries(
 
   // Component Library SCSS entries.
   glob.sync(ComponentLibraryScssMatcher).forEach((file) => {
-    const filePath = file.split(/util/)[1];
+    const filePath = file.split(`${srcDir}/`)[1];
     const newfilePath = `dist/storybook/${filePath.replace('.scss', '')}`;
     entries[newfilePath] = file;
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emulsify/core",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "Bundled tooling for Storybook development + Webpack Build",
   "keywords": [
     "component library",
@@ -47,27 +47,28 @@
   },
   "dependencies": {
     "@babel/core": "^7.25.2",
+    "@babel/eslint-parser": "^7.25.1",
     "@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-a11y": "^8.3.0",
+    "@storybook/addon-actions": "^8.3.0",
+    "@storybook/addon-essentials": "^8.3.0",
+    "@storybook/addon-links": "^8.3.0",
     "@storybook/addon-styling-webpack": "^1.0.0",
-    "@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",
+    "@storybook/addon-themes": "^8.3.0",
+    "@storybook/html": "^8.3.0",
+    "@storybook/html-webpack5": "^8.3.0",
+    "@storybook/manager-api": "^8.3.0",
+    "@storybook/preview-api": "^8.3.0",
+    "@storybook/theming": "^8.3.0",
     "add-attributes-twig-extension": "^0.1.0",
     "autoprefixer": "^10.4.20",
-    "babel-loader": "^9.1.3",
+    "babel-loader": "^9.2.1",
     "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",
+    "concurrently": "^9.0.1",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.1",
     "eslint": "^8.57.0",
@@ -97,22 +98,21 @@
     "normalize.css": "^8.0.1",
     "open-cli": "^8.0.0",
     "pa11y": "^8.0.0",
-    "postcss": "^8.4.44",
+    "postcss": "^8.4.47",
     "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": "^1.78.0",
     "sass-loader": "^16.0.1",
-    "semantic-release": "^24.1.0",
-    "storybook": "^8.2.9",
-    "style-dictionary": "^4.1.0",
+    "storybook": "^8.3.0",
+    "style-dictionary": "^4.1.1",
     "stylelint": "^16.9.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-prettier": "^5.0.0",
-    "stylelint-selector-bem-pattern": "^4.0.0",
+    "stylelint-selector-bem-pattern": "^4.0.1",
     "stylelint-webpack-plugin": "^5.0.1",
     "svg-sprite-loader": "^6.0.11",
     "token-transformer": "^0.0.33",
@@ -125,15 +125,16 @@
     "yaml": "^2.5.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.4.1",
-    "@commitlint/config-conventional": "^19.4.1",
+    "@commitlint/cli": "^19.5.0",
+    "@commitlint/config-conventional": "^19.5.0",
     "@semantic-release/changelog": "^6.0.2",
     "@semantic-release/commit-analyzer": "^13.0.0",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^10.3.0",
+    "@semantic-release/github": "^10.3.4",
     "@semantic-release/release-notes-generator": "^14.0.0",
-    "husky": "^9.1.5",
-    "lint-staged": "^15.2.10"
+    "husky": "^9.1.6",
+    "lint-staged": "^15.2.10",
+    "semantic-release": "^24.1.1"
   },
   "overrides": {
     "graceful-fs": "^4.2.11"

package/.storybook/setupTwig.test.js

@@ -1,33 +0,0 @@
-jest.mock('path', () => ({
-  resolve: (...paths) => `${paths[1]}${paths[2]}`,
-}));
-jest.mock('twig-drupal-filters', () => jest.fn());
-jest.mock('bem-twig-extension', () => jest.fn());
-jest.mock('add-attributes-twig-extension', () => jest.fn());
-
-import Twig from 'twig';
-import twigDrupal from 'twig-drupal-filters';
-import twigBEM from 'bem-twig-extension';
-import twigAddAttributes from 'add-attributes-twig-extension';
-
-import { namespaces, setupTwig } from './setupTwig';
-
-describe('setupTwig', () => {
-  it('sets up a twig object with drupal, bem, and attribute decorations', () => {
-    expect.assertions(3);
-    setupTwig(Twig);
-    expect(twigDrupal).toHaveBeenCalledWith(Twig);
-    expect(twigBEM).toHaveBeenCalledWith(Twig);
-    expect(twigAddAttributes).toHaveBeenCalledWith(Twig);
-  });
-
-  it('exports emulsifys namespaces', () => {
-    expect(namespaces).toEqual({
-      base: '../../../../components/00-base',
-      atoms: '../../../../components/01-atoms',
-      molecules: '../../../../components/02-molecules',
-      organisms: '../../../../components/03-organisms',
-      templates: '../../../../components/04-templates',
-    });
-  });
-});