@emulsify/core 0.0.0-development → 1.1.2

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
-          github-token: ${{ secrets.ADD_TO_PROJECT_PAT }}
+          token: ${{ secrets.ADD_TO_PROJECT_PAT }}

package/.github/workflows/contributors.yml

@@ -4,7 +4,7 @@ on:
     - cron: "20 20 * * *"
   push:
     branches:
-      - master
+      - main
 
 jobs:
   add-contributors:

package/.history/.github/workflows/addtoprojects_20240130164835.yml

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,23 @@
+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/.storybook/main_20240401184129.js

@@ -0,0 +1,22 @@
+module.exports = {
+  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,
+  },
+};

package/.history/.storybook/main_20240607162805.js

@@ -0,0 +1,22 @@
+module.exports = {
+  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,
+  },
+};

package/.history/.storybook/main_20240610082738.js

@@ -0,0 +1,22 @@
+module.exports = {
+  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,
+  },
+};

package/.history/.storybook/manager_20240311205454.js

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,59 @@
+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;
+};

package/.history/.storybook/setupTwig_20240607163001.js

@@ -0,0 +1,43 @@
+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 as a flat component structure.
+ *
+ * @returns project-based variant configuration, or default config.
+ */
+const fetchVariantConfig = () => {
+  try {
+    return require('../../../../project.emulsify.json').variant.structureImplementations;
+  } catch (e) {
+    return [
+      {
+        name: 'components',
+        directory: '../../../../components',
+      },
+    ];
+  }
+};
+
+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;
+};

package/.history/.storybook/setupTwig_20240607163019.js

@@ -0,0 +1,43 @@
+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 as a flat component structure.
+ *
+ * @returns project-based variant configuration, or default config.
+ */
+const fetchVariantConfig = () => {
+  try {
+    return require('../../../../project.emulsify.json').variant.structureImplementations;
+  } catch (e) {
+    return [
+      {
+        name: 'components',
+        directory: '../../../../components',
+      },
+    ];
+  }
+};
+
+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;
+};

package/.history/README_20240312154948.md

@@ -0,0 +1,72 @@
+> [!WARNING]  
+> Work in progress.
+
+![Emulsify Core Design System](https://github.com/emulsify-ds/.github/blob/6bd435be881bd820bddfa05d88905efe29176a0a/assets/images/header.png)
+
+# Emulsify Core
+
+An open-source toolset for creating and implementing design systems.
+
+### Storybook development and Webpack build
+
+**Emulsify Core** provides a [Storybook](https://storybook.js.org/) component library and a [Webpack](https://webpack.js.org/) development environment. It is meant to make project setup and ongoing development easier by bundling all necessary configuration and providing it as an extendable package for your theme or standalone project.
+
+## Documentation
+
+[docs.emulsify.info](https://emulsify.info/docs)
+
+### Quick Links
+
+1. [Installation](https://www.emulsify.info/docs/emulsify-drupal)
+2. [Usage](https://www.emulsify.info/docs/emulsify-drupal/basic-usage/commands)
+
+## Demo
+
+1. [Storybook](http://storybook.emulsify.info/)
+
+## Contributing
+
+### [Code of Conduct](https://github.com/emulsify-ds/emulsify-drupal/blob/master/CODE_OF_CONDUCT.md)
+
+The project maintainers have adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.
+
+### Contribution Guide
+
+Please also follow the issue template and pull request templates provided. See below for the correct places to post issues:
+
+1. [Emulsify Drupal](https://github.com/emulsify-ds/emulsify-drupal/issues)
+2. [Emulsify Twig Extensions](https://github.com/emulsify-ds/emulsify-twig-extensions/issues)
+3. [Emulsify Tools (Drupal module)](https://www.drupal.org/project/issues/emulsify_tools)
+
+### Committing Changes
+
+To facilitate automatic semantic release versioning, we utilize the [Conventional Changelog](https://github.com/conventional-changelog/conventional-changelog) standard through Commitizen. Follow these steps when commiting your work to ensure semantic release can version correctly.
+
+1. Stage your changes, ensuring they encompass exactly what you wish to change, no more.
+2. Run the `commit` script via `yarn commit` or `npm run commit` and follow the prompts to craft the perfect commit message.
+3. Your commit message will be used to create the changelog for the next version that includes that commit.
+
+## Author
+
+Emulsify® is a product of [Four Kitchens](https://fourkitchens.com).
+
+### Contributors
+
+<table>
+<tr>
+    <td align="center" style="word-wrap: break-word; width: 150.0; height: 150.0">
+        <a href=https://github.com/callinmullaney>
+            <img src=https://avatars.githubusercontent.com/u/369018?v=4 width="100;"  style="border-radius:50%;align-items:center;justify-content:center;overflow:hidden;padding-top:10px" alt=Callin Mullaney/>
+            <br />
+            <sub style="font-size:14px"><b>Callin Mullaney</b></sub>
+        </a>
+    </td>
+    <td align="center" style="word-wrap: break-word; width: 150.0; height: 150.0">
+        <a href=https://github.com/amazingrando>
+            <img src=https://avatars.githubusercontent.com/u/409903?v=4 width="100;"  style="border-radius:50%;align-items:center;justify-content:center;overflow:hidden;padding-top:10px" alt=Randy Oest/>
+            <br />
+            <sub style="font-size:14px"><b>Randy Oest</b></sub>
+        </a>
+    </td>
+</tr>
+</table>