@emulsify/core 0.0.0-development

package/.storybook/_drupal.js

@@ -0,0 +1,27 @@
+// Simple Drupal.behaviors usage for Storybook
+
+window.Drupal = { behaviors: {} };
+
+(function (Drupal, drupalSettings) {
+  Drupal.throwError = function (error) {
+    setTimeout(function () {
+      throw error;
+    }, 0);
+  };
+
+  Drupal.attachBehaviors = function (context, settings) {
+    context = context || document;
+    settings = settings || drupalSettings;
+    const behaviors = Drupal.behaviors;
+
+    Object.keys(behaviors).forEach(function (i) {
+      if (typeof behaviors[i].attach === 'function') {
+        try {
+          behaviors[i].attach(context, settings);
+        } catch (e) {
+          Drupal.throwError(e);
+        }
+      }
+    });
+  };
+})(Drupal, window.drupalSettings);

package/.storybook/emulsifyTheme.js

@@ -0,0 +1,38 @@
+// Documentation on theming Storybook: https://storybook.js.org/docs/configurations/theming/
+
+import { create } from '@storybook/theming';
+
+export default create({
+  base: 'dark',
+
+  // UI
+  appBg: '#00405B',
+  appContentBg: '#e6f5fc',
+  appBorderColor: '#99D9F4',
+  appBorderRadius: 4,
+
+  // Typography
+  fontBase: '"Mona Sans", sans-serif',
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: 'white',
+  textInverseColor: 'rgba(255,255,255,0.9)',
+  textMutedColor: '#E6F5FC',
+
+  // Toolbar default and active colors
+  barTextColor: '#005F89',
+  barSelectedColor: '#8B1E7E',
+  barBg: '#CCECFA',
+
+  // Form colors
+  inputBg: 'red',
+  inputBorder: 'silver',
+  inputTextColor: '#00202E',
+  inputBorderRadius: 4,
+  // Branding
+  brandTitle: 'Emulsify',
+  brandUrl: 'https://emulsify.info',
+  brandImage:
+    'https://raw.githubusercontent.com/fourkitchens/emulsify-core/main/assets/images/emulsify-logo-sb.svg?token=GHSAT0AAAAAACIEXLVC5R3KBCX6HGKGTBBSZNYFWMA',
+});

package/.storybook/main.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/.storybook/manager-head.html

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

package/.storybook/manager.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/.storybook/preview.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/.storybook/setupTwig.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/.storybook/setupTwig.test.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/.storybook/webpack.config.js

@@ -0,0 +1,67 @@
+const path = require('path');
+const globImporter = require('node-sass-glob-importer');
+const _StyleLintPlugin = require('stylelint-webpack-plugin');
+const { namespaces } = require('./setupTwig');
+const ESLintPlugin = require('eslint-webpack-plugin');
+
+module.exports = async ({ config }) => {
+  // Twig
+  config.module.rules.push({
+    test: /\.twig$/,
+    use: [
+      {
+        loader: 'twig-loader',
+        options: {
+          twigOptions: {
+            namespaces,
+          },
+        },
+      },
+    ],
+  });
+
+  // SCSS
+  config.module.rules.push({
+    test: /\.s[ac]ss$/i,
+    use: [
+      'style-loader',
+      {
+        loader: 'css-loader',
+        options: {
+          sourceMap: true,
+        },
+      },
+      {
+        loader: 'sass-loader',
+        options: {
+          sourceMap: true,
+          sassOptions: {
+            importer: globImporter(),
+          },
+        },
+      },
+    ],
+  });
+
+  config.plugins.push(
+    new _StyleLintPlugin({
+      configFile: path.resolve(__dirname, '../', '.stylelintrc.json'),
+      context: path.resolve(__dirname, '../', 'components'),
+      files: '**/*.scss',
+      failOnError: false,
+      quiet: false,
+    }),
+    new ESLintPlugin({
+      context: path.resolve(__dirname, '../', 'components'),
+      extensions: ['js'],
+    }),
+  );
+
+  // YAML
+  config.module.rules.push({
+    test: /\.ya?ml$/,
+    loader: 'js-yaml-loader',
+  });
+
+  return config;
+};

package/CODE_OF_CONDUCT.md

@@ -0,0 +1,56 @@
+# Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our community include:
+
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the overall community
+
+Examples of unacceptable behavior include:
+
+- The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Project maintainers are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the project maintainers responsible for enforcement at [howdy@fourkitchens.com](mailto:howdy@fourkitchens.com). All complaints will be reviewed and investigated promptly and fairly.
+
+All project maintainers are obligated to respect the privacy and security of the reporter of any incident.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.0,
+available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at https://www.contributor-covenant.org/translations.