@emulsify/core 0.0.0-development → 1.1.2

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',
+  ],
+};

package/.history/config/a11y.config_20240607163120.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/webpack/css/style_20240228152007.js

@@ -0,0 +1 @@
+import '../../../../../components/style.scss';

package/.history/config/webpack/css/style_20240607163238.js

@@ -0,0 +1 @@
+import '../../../../../../components/style.scss';

package/.history/config/webpack/css_20240317194751.js

@@ -0,0 +1 @@
+import '../../../../components/style.scss';

package/.history/config/webpack/css_20240607163108.js

@@ -0,0 +1 @@
+import '../../../../../components/style.scss';

package/.history/config/webpack/css_20240607163132.js

@@ -0,0 +1 @@
+import '../../../../../../components/style.scss';

package/.history/config/webpack/loaders_20240401184511.js

@@ -0,0 +1,87 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const globImporter = require('node-sass-glob-importer');
+const fs = require('fs-extra');
+
+let babelConfig;
+let postcssConfig;
+
+// Check if custom babel config is available.
+if (fs.existsSync('./config/babel.config.js')) {
+  babelConfig = './config/babel.config.js';
+} else {
+  babelConfig = './node_modules/emulsify-core/config/babel.config.js';
+}
+
+// Check if custom postcss config is available.
+if (fs.existsSync('./config/postcss.config.js')) {
+  postcssConfig = './config/postcss.config.js';
+} else {
+  postcssConfig = './node_modules/emulsify-core/config/postcss.config.js';
+}
+
+const JSLoader = {
+  test: /^(?!.*\.(stories|component)\.js$).*\.js$/,
+  exclude: /node_modules/,
+  loader: 'babel-loader',
+  options: {
+    configFile: babelConfig,
+  },
+};
+
+const ImageLoader = {
+  test: /\.(png|svg|jpg|gif)$/i,
+  exclude: /icons\/.*\.svg$/,
+  loader: 'file-loader',
+};
+
+const CSSLoader = {
+  test: /\.s[ac]ss$/i,
+  exclude: /node_modules/,
+  use: [
+    MiniCssExtractPlugin.loader,
+    {
+      loader: 'css-loader',
+      options: {
+        sourceMap: true,
+        url: false,
+      },
+    },
+    {
+      loader: 'postcss-loader',
+      options: {
+        sourceMap: true,
+        postcssOptions: {
+          config: postcssConfig,
+          plugins: [['autoprefixer']],
+        },
+      },
+    },
+    {
+      loader: 'sass-loader',
+      options: {
+        sourceMap: true,
+        sassOptions: {
+          importer: globImporter(),
+          outputStyle: 'compressed',
+        },
+      },
+    },
+  ],
+};
+
+const SVGSpriteLoader = {
+  test: /icons\/.*\.svg$/, // your icons directory
+  loader: 'svg-sprite-loader',
+  options: {
+    extract: true,
+    runtimeCompat: true,
+    spriteFilename: './icons.svg',
+  },
+};
+
+module.exports = {
+  JSLoader,
+  CSSLoader,
+  SVGSpriteLoader,
+  ImageLoader,
+};

package/.history/config/webpack/loaders_20240610084138.js

@@ -0,0 +1,87 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const globImporter = require('node-sass-glob-importer');
+const fs = require('fs-extra');
+
+let babelConfig;
+let postcssConfig;
+
+// Check if custom babel config is available.
+if (fs.existsSync('./config/babel.config.js')) {
+  babelConfig = './config/babel.config.js';
+} else {
+  babelConfig = './node_modules/@emulsify/core/config/babel.config.js';
+}
+
+// Check if custom postcss config is available.
+if (fs.existsSync('./config/postcss.config.js')) {
+  postcssConfig = './config/postcss.config.js';
+} else {
+  postcssConfig = './node_modules/@emulsify/core/config/postcss.config.js';
+}
+
+const JSLoader = {
+  test: /^(?!.*\.(stories|component)\.js$).*\.js$/,
+  exclude: /node_modules/,
+  loader: 'babel-loader',
+  options: {
+    configFile: babelConfig,
+  },
+};
+
+const ImageLoader = {
+  test: /\.(png|svg|jpg|gif)$/i,
+  exclude: /icons\/.*\.svg$/,
+  loader: 'file-loader',
+};
+
+const CSSLoader = {
+  test: /\.s[ac]ss$/i,
+  exclude: /node_modules/,
+  use: [
+    MiniCssExtractPlugin.loader,
+    {
+      loader: 'css-loader',
+      options: {
+        sourceMap: true,
+        url: false,
+      },
+    },
+    {
+      loader: 'postcss-loader',
+      options: {
+        sourceMap: true,
+        postcssOptions: {
+          config: postcssConfig,
+          plugins: [['autoprefixer']],
+        },
+      },
+    },
+    {
+      loader: 'sass-loader',
+      options: {
+        sourceMap: true,
+        sassOptions: {
+          importer: globImporter(),
+          outputStyle: 'compressed',
+        },
+      },
+    },
+  ],
+};
+
+const SVGSpriteLoader = {
+  test: /icons\/.*\.svg$/, // your icons directory
+  loader: 'svg-sprite-loader',
+  options: {
+    extract: true,
+    runtimeCompat: true,
+    spriteFilename: './icons.svg',
+  },
+};
+
+module.exports = {
+  JSLoader,
+  CSSLoader,
+  SVGSpriteLoader,
+  ImageLoader,
+};

package/.history/config/webpack/plugins_20240401184104.js

@@ -0,0 +1,48 @@
+/* eslint-disable no-underscore-dangle */
+const path = require('path');
+const webpack = require('webpack');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const _MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const _ImageminPlugin = require('imagemin-webpack-plugin').default;
+const _SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
+const glob = require('glob');
+
+const imagePath = path.resolve(__dirname, '../../../../assets/images');
+
+const MiniCssExtractPlugin = new _MiniCssExtractPlugin({
+  filename: '[name].css',
+  chunkFilename: '[id].css',
+});
+
+const ImageminPlugin = new _ImageminPlugin({
+  disable: process.env.NODE_ENV !== 'production',
+  externalImages: {
+    context: imagePath,
+    sources: glob.sync(path.resolve(imagePath, '**/*.{png,jpg,gif,svg}')),
+    destination: imagePath,
+  },
+});
+
+const SpriteLoaderPlugin = new _SpriteLoaderPlugin({
+  plainSprite: true,
+});
+
+const ProgressPlugin = new webpack.ProgressPlugin();
+
+module.exports = {
+  ProgressPlugin,
+  MiniCssExtractPlugin,
+  ImageminPlugin,
+  SpriteLoaderPlugin,
+  CleanWebpackPlugin: new CleanWebpackPlugin({
+    protectWebpackAssets: false, // Required for removal of extra, unwanted dist/css/*.js files.
+    cleanOnceBeforeBuildPatterns: ['!*.{png,jpg,gif,svg}'],
+    cleanAfterEveryBuildPatterns: [
+      'remove/**',
+      '!js',
+      'css/**/*.js', // Remove all unwanted, auto generated JS files from dist/css folder.
+      'css/**/*.js.map',
+      '!*.{png,jpg,gif,svg}',
+    ],
+  }),
+};

package/.history/config/webpack/plugins_20240607163148.js

@@ -0,0 +1,48 @@
+/* eslint-disable no-underscore-dangle */
+const path = require('path');
+const webpack = require('webpack');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const _MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const _ImageminPlugin = require('imagemin-webpack-plugin').default;
+const _SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
+const glob = require('glob');
+
+const imagePath = path.resolve(__dirname, '../../../../../assets/images');
+
+const MiniCssExtractPlugin = new _MiniCssExtractPlugin({
+  filename: '[name].css',
+  chunkFilename: '[id].css',
+});
+
+const ImageminPlugin = new _ImageminPlugin({
+  disable: process.env.NODE_ENV !== 'production',
+  externalImages: {
+    context: imagePath,
+    sources: glob.sync(path.resolve(imagePath, '**/*.{png,jpg,gif,svg}')),
+    destination: imagePath,
+  },
+});
+
+const SpriteLoaderPlugin = new _SpriteLoaderPlugin({
+  plainSprite: true,
+});
+
+const ProgressPlugin = new webpack.ProgressPlugin();
+
+module.exports = {
+  ProgressPlugin,
+  MiniCssExtractPlugin,
+  ImageminPlugin,
+  SpriteLoaderPlugin,
+  CleanWebpackPlugin: new CleanWebpackPlugin({
+    protectWebpackAssets: false, // Required for removal of extra, unwanted dist/css/*.js files.
+    cleanOnceBeforeBuildPatterns: ['!*.{png,jpg,gif,svg}'],
+    cleanAfterEveryBuildPatterns: [
+      'remove/**',
+      '!js',
+      'css/**/*.js', // Remove all unwanted, auto generated JS files from dist/css folder.
+      'css/**/*.js.map',
+      '!*.{png,jpg,gif,svg}',
+    ],
+  }),
+};

package/.history/config/webpack/svgSprite_20240401184053.js

@@ -0,0 +1,5 @@
+function requireAll(r) {
+  r.keys().forEach(r);
+}
+
+requireAll(require.context('../../../../assets/icons/', true, /\.svg$/));

package/.history/config/webpack/svgSprite_20240607163207.js

@@ -0,0 +1,5 @@
+function requireAll(r) {
+  r.keys().forEach(r);
+}
+
+requireAll(require.context('../../../../../assets/icons/', true, /\.svg$/));

package/.history/config/webpack/webpack.common_20240607090919.js

@@ -0,0 +1,72 @@
+const path = require('path');
+const glob = require('glob');
+const loaders = require('./loaders');
+const plugins = require('./plugins');
+
+const webpackDir = path.resolve(__dirname);
+const rootDir = path.resolve(__dirname, '../../../..');
+const distDir = path.resolve(__dirname, '../../../../dist');
+
+// Glob pattern for scss files that ignore file names prefixed with underscore.
+const scssPattern = path.resolve(rootDir, 'components/**/!(_*).scss');
+// Glob pattern for JS files.
+const jsPattern = path.resolve(
+  rootDir,
+  'components/**/!(*.stories|*.component|*.min|*.test).js',
+);
+
+// Prepare list of scss and js file for "entry".
+function getEntries(scssMatcher, jsMatcher) {
+  const entries = {};
+
+  // SCSS entries
+  glob.sync(scssMatcher).forEach((file) => {
+    const filePath = file.split('components/')[1];
+    const newfilePath = `css/${filePath.replace('.scss', '')}`;
+    entries[newfilePath] = file;
+  });
+
+  // JS entries
+  glob.sync(jsMatcher).forEach((file) => {
+    const filePath = file.split('components/')[1];
+    const newfilePath = `js/${filePath.replace('.js', '')}`;
+    entries[newfilePath] = file;
+  });
+
+  entries.svgSprite = path.resolve(webpackDir, 'svgSprite.js');
+
+  // CSS Files.
+  glob.sync(`${webpackDir}/css/*js`).forEach((file) => {
+    const baseFileName = path.basename(file);
+    const newfilePath = `css/${baseFileName.replace('.js', '')}`;
+    entries[newfilePath] = file;
+  });
+
+  return entries;
+}
+
+module.exports = {
+  stats: {
+    errorDetails: true,
+  },
+  entry: getEntries(scssPattern, jsPattern),
+  module: {
+    rules: [
+      loaders.CSSLoader,
+      loaders.SVGSpriteLoader,
+      loaders.ImageLoader,
+      loaders.JSLoader,
+    ],
+  },
+  plugins: [
+    plugins.MiniCssExtractPlugin,
+    plugins.ImageminPlugin,
+    plugins.SpriteLoaderPlugin,
+    plugins.ProgressPlugin,
+    plugins.CleanWebpackPlugin,
+  ],
+  output: {
+    path: distDir,
+    filename: '[name].js',
+  },
+};