@emulsify/core 1.3.1 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emulsify/core",
-  "version": "1.3.1",
+  "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/.github/workflows/addtoprojects_20240130164835.yml

@@ -1,21 +0,0 @@
-name: Add to projects
-
-on:
-  issues:
-    types:
-      - opened
-  pull_request:
-    types:
-      - opened
-
-jobs:
-  add-to-project:
-    name: Add issue to project
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/add-to-project@v0.3.0
-        with:
-          # You can target a repository in a different organization
-          # to the issue
-          project-url: https://github.com/orgs/emulsify-ds/projects/6
-          github-token: ${{ secrets.ADD_TO_PROJECT_PAT }}

package/.history/.github/workflows/addtoprojects_20240607213528.yml

@@ -1,21 +0,0 @@
-name: Add to projects
-
-on:
-  issues:
-    types:
-      - opened
-  pull_request:
-    types:
-      - opened
-
-jobs:
-  add-to-project:
-    name: Add issue to project
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/add-to-project@v0.3.0
-        with:
-          # 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 }}

package/.history/.github/workflows/contributors_20240130164835.yml

@@ -1,23 +0,0 @@
-name: Add contributors
-on:
-  schedule:
-    - cron: "20 20 * * *"
-  push:
-    branches:
-      - master
-
-jobs:
-  add-contributors:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: BobAnkh/add-contributors@master
-        with:
-          CONTRIBUTOR: "### Contributors"
-          COLUMN_PER_ROW: "6"
-          ACCESS_TOKEN: ${{secrets.ADD_TO_PROJECT_PAT}}
-          IMG_WIDTH: "100"
-          FONT_SIZE: "14"
-          PATH: "/README.md"
-          COMMIT_MESSAGE: "docs(README): update contributors"
-          AVATAR_SHAPE: "round"

package/.history/.github/workflows/contributors_20240607213836.yml

@@ -1,23 +0,0 @@
-name: Add contributors
-on:
-  schedule:
-    - cron: "20 20 * * *"
-  push:
-    branches:
-      - main
-
-jobs:
-  add-contributors:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: BobAnkh/add-contributors@master
-        with:
-          CONTRIBUTOR: "### Contributors"
-          COLUMN_PER_ROW: "6"
-          ACCESS_TOKEN: ${{secrets.ADD_TO_PROJECT_PAT}}
-          IMG_WIDTH: "100"
-          FONT_SIZE: "14"
-          PATH: "/README.md"
-          COMMIT_MESSAGE: "docs(README): update contributors"
-          AVATAR_SHAPE: "round"

package/.history/.husky/commit-msg_20240729171216

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npm run husky:commit-msg

package/.history/.husky/commit-msg_20240729172358

@@ -1,2 +0,0 @@
-#!/bin/sh
-npm run husky:commit-msg

package/.history/.husky/pre-commit_20240729171216

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npm run husky:pre-commit

package/.history/.husky/pre-commit_20240729172429

@@ -1,2 +0,0 @@
-#!/bin/sh
-npm run husky:pre-commit

package/.history/.releaserc_20240607133550

@@ -1,11 +0,0 @@
-module.exports = {
-  tagFormat: '${version}',
-  branches: ['main'],
-  repositoryUrl: 'git@github.com:emulsify-ds/emulsify-core.git',
-  plugins: [
-    '@semantic-release/commit-analyzer',
-    '@semantic-release/release-notes-generator',
-    ['@semantic-release/npm', { npmPublish: false }],
-    '@semantic-release/github',
-  ],
-};

package/.history/.releaserc_20240607134831

@@ -1,18 +0,0 @@
-{
-  "tagFormat": "${version}",
-  "branches": [
-    "main"
-  ],
-  "repositoryUrl": "git@github.com:emulsify-ds/emulsify-core.git",
-  "plugins": [
-    "@semantic-release/commit-analyzer",
-    "@semantic-release/release-notes-generator",
-    [
-      "@semantic-release/npm",
-      {
-        "npmPublish": false
-      }
-    ],
-    "@semantic-release/github"
-  ]
-}

package/.history/.releaserc_20240607135005

@@ -1,11 +0,0 @@
-module.exports = {
-  tagFormat: '${version}',
-  branches: ['main'],
-  repositoryUrl: 'git@github.com:emulsify-ds/emulsify-core.git',
-  plugins: [
-    '@semantic-release/commit-analyzer',
-    '@semantic-release/release-notes-generator',
-    ['@semantic-release/npm', { npmPublish: false }],
-    '@semantic-release/github',
-  ],
-};

package/.history/.storybook/main_20240722083211.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/manager_20240311205454.js

@@ -1,15 +0,0 @@
-import { addons } from '@storybook/addons';
-
-import emulsifyTheme from './emulsifyTheme';
-
-import('../../../config/emulsify-core/storybook/theme')
-.then((customTheme) => {
-  addons.setConfig({
-    theme: customTheme.default,
-  });
-})
-.catch(() => {
-  addons.setConfig({
-    theme: emulsifyTheme,
-  });
-});

package/.history/.storybook/manager_20240607162817.js

@@ -1,15 +0,0 @@
-import { addons } from '@storybook/addons';
-
-import emulsifyTheme from './emulsifyTheme';
-
-import('../../../../config/emulsify-core/storybook/theme')
-.then((customTheme) => {
-  addons.setConfig({
-    theme: customTheme.default,
-  });
-})
-.catch(() => {
-  addons.setConfig({
-    theme: emulsifyTheme,
-  });
-});

package/.history/.storybook/preview_20240401184023.js

@@ -1,40 +0,0 @@
-import { useEffect } from '@storybook/client-api';
-import Twig from 'twig';
-import { setupTwig } from './setupTwig';
-
-// GLOBAL CSS
-(async () => {
-  let compiled;
-  try {
-    compiled = await import('../../../dist/css/style.css');
-  } catch (e) {}
-})();
-
-// Custom theme preview config if it exists.
-(async () => {
-  let preview;
-  try {
-    preview = await import('../../../config/emulsify-core/storybook/preview');
-  } catch (e) {}
-})();
-
-// If in a Drupal project, it's recommended to import a symlinked version of drupal.js.
-import './_drupal.js';
-
-export const decorators = [
-  (Story, { args }) => {
-    const { renderAs } = args || {};
-
-    // Usual emulsify hack to add Drupal behaviors.
-    useEffect(() => {
-      Drupal.attachBehaviors();
-    }, [args]);
-    return Story();
-  },
-];
-
-setupTwig(Twig);
-
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-};

package/.history/.storybook/preview_20240607162826.js

@@ -1,40 +0,0 @@
-import { useEffect } from '@storybook/client-api';
-import Twig from 'twig';
-import { setupTwig } from './setupTwig';
-
-// GLOBAL CSS
-(async () => {
-  let compiled;
-  try {
-    compiled = await import('../../../../dist/css/style.css');
-  } catch (e) {}
-})();
-
-// Custom theme preview config if it exists.
-(async () => {
-  let preview;
-  try {
-    preview = await import('../../../../config/emulsify-core/storybook/preview');
-  } catch (e) {}
-})();
-
-// If in a Drupal project, it's recommended to import a symlinked version of drupal.js.
-import './_drupal.js';
-
-export const decorators = [
-  (Story, { args }) => {
-    const { renderAs } = args || {};
-
-    // Usual emulsify hack to add Drupal behaviors.
-    useEffect(() => {
-      Drupal.attachBehaviors();
-    }, [args]);
-    return Story();
-  },
-];
-
-setupTwig(Twig);
-
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-};

package/.history/.storybook/preview_20240610083720.js

@@ -1,37 +0,0 @@
-import { useEffect } from '@storybook/client-api';
-import Twig from 'twig';
-import { setupTwig } from './setupTwig';
-
-(async () => {
-  let compiled;
-  let preview;
-  // GLOBAL CSS
-  try {
-    compiled = await import('../../../dist/css/style.css');
-  } catch (e) { }
-  // Custom theme preview config if it exists.
-  try {
-    preview = await import('../../../../config/emulsify-core/storybook/preview');
-  } catch (e) {}
-})();
-
-// If in a Drupal project, it's recommended to import a symlinked version of drupal.js.
-import './_drupal.js';
-
-export const decorators = [
-  (Story, { args }) => {
-    const { renderAs } = args || {};
-
-    // Usual emulsify hack to add Drupal behaviors.
-    useEffect(() => {
-      Drupal.attachBehaviors();
-    }, [args]);
-    return Story();
-  },
-];
-
-setupTwig(Twig);
-
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-};

package/.history/.storybook/preview_20240610083852.js

@@ -1,30 +0,0 @@
-import { useEffect } from '@storybook/client-api';
-import Twig from 'twig';
-import { setupTwig } from './setupTwig';
-
-// GLOBAL CSS
-import('../../../../dist/css/style.css');
-
-// Custom theme preview config if it exists.
-import('../../../../config/emulsify-core/storybook/preview');
-
-// If in a Drupal project, it's recommended to import a symlinked version of drupal.js.
-import './_drupal.js';
-
-export const decorators = [
-  (Story, { args }) => {
-    const { renderAs } = args || {};
-
-    // Usual emulsify hack to add Drupal behaviors.
-    useEffect(() => {
-      Drupal.attachBehaviors();
-    }, [args]);
-    return Story();
-  },
-];
-
-setupTwig(Twig);
-
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-};

package/.history/.storybook/setupTwig.test_20240228163244.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',
-    });
-  });
-});