@emulsify/core 1.3.1 → 1.4.0

package/.history/.storybook/main_20240809140306.js

@@ -0,0 +1,153 @@
+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_20240806082313.json → package_20240809140648.json}

@@ -1,6 +1,6 @@
 {
   "name": "@emulsify/core",
-  "version": "1.2.2",
+  "version": "1.4.0",
   "description": "Bundled tooling for Storybook development + Webpack Build",
   "keywords": [
     "component library",

package/.storybook/main.js

@@ -1,6 +1,8 @@
 const { configOverrides } = require('../../../../config/emulsify-core/storybook/main');
 
-const defaultConfig = {
+const safeConfigOverrides = configOverrides || {};
+
+const config = {
   stories: [
     '../../../../components/**/*.stories.@(js|jsx|ts|tsx)',
   ],
@@ -19,7 +21,7 @@ const defaultConfig = {
     options: {},
   },
   docs: {
-    autodocs: true,
+    autodocs: false,
   },
   managerHead: (head) => `
     ${head}
@@ -146,8 +148,7 @@ const defaultConfig = {
       }
     </style>
   `,
+  ...safeConfigOverrides,
 };
 
-const config = Object.keys(configOverrides).length ? configOverrides : defaultConfig;
-
 module.exports = config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emulsify/core",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Bundled tooling for Storybook development + Webpack Build",
   "keywords": [
     "component library",

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/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',
-    });
-  });
-});

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

package/.history/.storybook/setupTwig_20240326081425.js

@@ -1,59 +0,0 @@
-const { resolve } = require('path');
-const twigDrupal = require('twig-drupal-filters');
-const twigBEM = require('bem-twig-extension');
-const twigAddAttributes = require('add-attributes-twig-extension');
-
-/**
- * Fetches project-based variant configuration. If no such configuration
- * exists, returns default values.
- *
- * @returns project-based variant configuration, or default config.
- */
-const fetchVariantConfig = () => {
-  try {
-    return require('../../../project.emulsify.json').variant.structureImplementations;
-  } catch (e) {
-    return [
-      {
-        name: 'base',
-        directory: '../../components/00-base',
-      },
-      {
-        name: 'atoms',
-        directory: '../../components/01-atoms',
-      },
-      {
-        name: 'molecules',
-        directory: '../../components/02-molecules',
-      },
-      {
-        name: 'organisms',
-        directory: '../../components/03-organisms',
-      },
-      {
-        name: 'templates',
-        directory: '../../components/04-templates',
-      },
-    ];
-  }
-};
-
-module.exports.namespaces = {};
-for (const { name, directory } of fetchVariantConfig()) {
-  module.exports.namespaces[name] = resolve(__dirname, '../../../', directory);
-}
-
-/**
- * Configures and extends a standard twig object.
- *
- * @param {Twig} twig - twig object that should be configured and extended.
- *
- * @returns {Twig} configured twig object.
- */
-module.exports.setupTwig = function setupTwig(twig) {
-  twig.cache();
-  twigDrupal(twig);
-  twigBEM(twig);
-  twigAddAttributes(twig);
-  return twig;
-};