@emulsify/core 0.0.0-development → 1.1.1

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/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/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>

package/.history/README_20240607162731.md

@@ -0,0 +1,94 @@
+![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.
+
+**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.
+
+## Installation and usage
+Installation and configuration is setup by the provided base theme project(s). As of this writing, Emulsify Drupal is the only base theme project [with this integration](https://github.com/emulsify-ds/emulsify-drupal/blob/main/whisk/package.json#L36).
+
+### Manual installation
+- `npm install @emulsify/core` within your repository or project theme.
+- Copy the provided `npm run` scripts from [Emulsify Drupal's package.json](https://github.com/emulsify-ds/emulsify-drupal/blob/main/whisk/package.json#L15)
+- Copy the contents of `whisk/config/emulsify-core/` from [Emulsify Drupal](https://github.com/emulsify-ds/emulsify-drupal/tree/main/whisk/config/emulsify-core) into your project so `config/` exists at the root of your repository or project theme. The files within `config/` allow you to extend or overwrite configuration provided by Emulsify Core.
+
+### Common Scripts
+
+Run `nvm use` prior to running any of the following commands to verify you are using Node 20.
+(Each is prefixed with `npm run `)
+
+**develop**
+Starts and instance of storybook, watches for any files changes, recompiles CSS/JS, and live reloads storybook assets.
+
+**lint**
+Lints all JS/SCSS within your components and reports any violations.
+
+**lint-fix**
+Automatically fixes any simple violations.
+
+**prettier**
+Outputs any code formatting violations.
+
+**prettier-fix**
+Automatically fixes any simple code formatting violations.
+
+**storybook-build**
+Builds a static output of the storybook instance.
+
+
+### Quick Links
+
+- [Emulsify Homepage](https://www.emulsify.info/)
+
+## 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>

package/.history/config/a11y.config_20240607110020.js

@@ -0,0 +1,61 @@
+module.exports = {
+  storybookBuildDir: '../../../.out',
+  pa11y: {
+    includeNotices: false,
+    includeWarnings: false,
+    runners: ['axe'],
+  },
+  // A11y linting is done on a component-by-component
+  // basis, which results in the linter reporting some errors that
+  // should be ignored. These codes and descriptions allow for those
+  // errors to be targeted specifically.
+  ignore: {
+    codes: ['landmark-one-main', 'page-has-heading-one'],
+    descriptions: ['Ensures all page content is contained by landmarks'],
+  },
+  // List of storybook component IDs defined and used in this project.
+  components: [
+    'base-colors--palettes',
+    'base-motion--usage',
+    'atoms-button--twig',
+    'atoms-button--twig-alt',
+    'atoms-forms--checkboxes',
+    'atoms-forms--radio-buttons',
+    'atoms-forms--select-dropdowns',
+    'atoms-forms--textfields-examples',
+    'atoms-images--images',
+    'atoms-images--figures',
+    'atoms-images--icons',
+    'atoms-links--links',
+    'atoms-lists--definition-list',
+    'atoms-lists--unordered-list',
+    'atoms-lists--ordered-list',
+    'atoms-tables--table',
+    'atoms-text--headings-examples',
+    'atoms-text--blockquote-example',
+    'atoms-text--preformatted',
+    'atoms-text--random',
+    'atoms-videos--wide',
+    'atoms-videos--full',
+    'molecules-cards--card-example',
+    'molecules-cards--card-with-background',
+    'molecules-cta--cta-example',
+    'molecules-menus--breadcrumbs',
+    'molecules-menus--inline',
+    'molecules-menus--main',
+    'molecules-menus--social',
+    'molecules-menus-pager--pager-example',
+    'molecules-status--status-examples',
+    'molecules-tabs--js-tabs',
+    'organisms-grids--default-grid',
+    'organisms-grids--card-grid',
+    'organisms-grids--cta-grid',
+    'organisms-site--footer',
+    'organisms-site--header',
+    'templates-layouts--full-width',
+    'templates-layouts--with-sidebar',
+    'templates-place-holder--place-holder',
+    'pages-content-types--article',
+    'pages-landing-pages--home',
+  ],
+};

package/.history/config/a11y.config_20240607163052.js

@@ -0,0 +1,61 @@
+module.exports = {
+  storybookBuildDir: '../../../../.out',
+  pa11y: {
+    includeNotices: false,
+    includeWarnings: false,
+    runners: ['axe'],
+  },
+  // A11y linting is done on a component-by-component
+  // basis, which results in the linter reporting some errors that
+  // should be ignored. These codes and descriptions allow for those
+  // errors to be targeted specifically.
+  ignore: {
+    codes: ['landmark-one-main', 'page-has-heading-one'],
+    descriptions: ['Ensures all page content is contained by landmarks'],
+  },
+  // List of storybook component IDs defined and used in this project.
+  components: [
+    'base-colors--palettes',
+    'base-motion--usage',
+    'atoms-button--twig',
+    'atoms-button--twig-alt',
+    'atoms-forms--checkboxes',
+    'atoms-forms--radio-buttons',
+    'atoms-forms--select-dropdowns',
+    'atoms-forms--textfields-examples',
+    'atoms-images--images',
+    'atoms-images--figures',
+    'atoms-images--icons',
+    'atoms-links--links',
+    'atoms-lists--definition-list',
+    'atoms-lists--unordered-list',
+    'atoms-lists--ordered-list',
+    'atoms-tables--table',
+    'atoms-text--headings-examples',
+    'atoms-text--blockquote-example',
+    'atoms-text--preformatted',
+    'atoms-text--random',
+    'atoms-videos--wide',
+    'atoms-videos--full',
+    'molecules-cards--card-example',
+    'molecules-cards--card-with-background',
+    'molecules-cta--cta-example',
+    'molecules-menus--breadcrumbs',
+    'molecules-menus--inline',
+    'molecules-menus--main',
+    'molecules-menus--social',
+    'molecules-menus-pager--pager-example',
+    'molecules-status--status-examples',
+    'molecules-tabs--js-tabs',
+    'organisms-grids--default-grid',
+    'organisms-grids--card-grid',
+    'organisms-grids--cta-grid',
+    'organisms-site--footer',
+    'organisms-site--header',
+    'templates-layouts--full-width',
+    'templates-layouts--with-sidebar',
+    'templates-place-holder--place-holder',
+    'pages-content-types--article',
+    'pages-landing-pages--home',
+  ],
+};