@emulsify/core 0.0.0-development

package/package.json

@@ -0,0 +1,136 @@
+{
+  "name": "@emulsify/core",
+  "version": "0.0.0-development",
+  "description": "Bundled tooling for Storybook development + Webpack Build",
+  "keywords": [
+    "component library",
+    "design system",
+    "drupal",
+    "pattern library",
+    "storybook",
+    "styleguide"
+  ],
+  "author": "Four Kitchens <shout@fourkitchens.com>",
+  "license": "GPL-2.0",
+  "engines": {
+    "node": ">=20"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/emulsify-ds/emulsify-core.git"
+  },
+  "bugs": {
+    "url": "https://github.com/emulsify-ds/emulsify-core/issues"
+  },
+  "homepage": "https://github.com/emulsify-ds/emulsify-core#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "coverage": "npm run test && open-cli .coverage/lcov-report/index.html",
+    "format": "npm run lint-fix; npm run prettier-fix",
+    "husky:commit-msg": "commitlint --edit $1",
+    "husky:pre-commit": "npm run lint",
+    "lint": "npm run lint-js",
+    "lint-fix": "npm run lint-js -- --fix",
+    "lint-js": "eslint --config config/eslintrc.config.json --no-error-on-unmatched-pattern ./config ./storybook",
+    "lint-staged": "lint-staged",
+    "prepare": "[ -d '.git' ] && (husky install) || true",
+    "prettier": "prettier --config config/prettierrc.json --ignore-unknown \"**/*.{js,yml,scss,md}\"",
+    "prettier-fix": "prettier --config config/prettierrc.json --write --ignore-unknown \"**/*.{js,yml,scss,md}\"",
+    "semantic-release": "semantic-release",
+    "storybook": "storybook dev --ci -s ../../dist,../../assets/images,../../assets/icons,../../assets/videos -p 6006",
+    "storybook-build": "storybook build -s ../../dist,../../assets/images,../../assets/icons,../../assets/videos -o .out",
+    "storybook-deploy": "storybook-to-ghpages -o .out",
+    "test": "jest --coverage  --config ./config/jest.config.js",
+    "twatch": "jest --no-coverage --watch --verbose"
+  },
+  "dependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/eslint-parser": "^7.23.10",
+    "@emulsify/cli": "^1.6.0",
+    "@storybook/addon-a11y": "^7.6.17",
+    "@storybook/addon-actions": "^7.6.17",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/addon-styling-webpack": "^1.0.0",
+    "@storybook/addon-themes": "^7.6.17",
+    "@storybook/html": "^7.6.17",
+    "@storybook/html-webpack5": "^7.6.17",
+    "add-attributes-twig-extension": "^0.1.0",
+    "autoprefixer": "^10.4.19",
+    "babel-loader": "^9.1.3",
+    "babel-preset-minify": "^0.5.2",
+    "bem-twig-extension": "^0.1.1",
+    "breakpoint-sass": "^3.0.0",
+    "chalk": "^5.2.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "concurrently": "^8.2.2",
+    "css-loader": "^7.1.1",
+    "eslint": "^8.57.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jest": "^27.9.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-security": "^2.1.1",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-webpack-plugin": "^4.1.0",
+    "file-loader": "^6.2.0",
+    "fs-extra": "^11.2.0",
+    "glob": "^10.3.12",
+    "graceful-fs": "^4.2.11",
+    "html-webpack-plugin": "^5.6.0",
+    "imagemin-webpack-plugin": "^2.4.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "js-yaml": "^4.1.0",
+    "js-yaml-loader": "^1.2.2",
+    "lint-staged": "^15.2.2",
+    "mini-css-extract-plugin": "^2.9.0",
+    "node-sass-glob-importer": "^5.3.3",
+    "normalize.css": "^8.0.1",
+    "open-cli": "^8.0.0",
+    "pa11y": "^7.0.0",
+    "postcss": "^8.4.38",
+    "postcss-loader": "^8.1.1",
+    "postcss-scss": "^4.0.9",
+    "ramda": "^0.29.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "regenerator-runtime": "^0.14.1",
+    "sass": "^1.75.0",
+    "sass-loader": "^14.2.1",
+    "storybook": "^7.6.17",
+    "style-dictionary": "^3.9.2",
+    "stylelint": "^16.3.1",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-prettier": "^5.0.0",
+    "stylelint-selector-bem-pattern": "^4.0.0",
+    "stylelint-webpack-plugin": "^5.0.0",
+    "svg-sprite-loader": "^6.0.11",
+    "token-transformer": "^0.0.33",
+    "twig-drupal-filters": "^3.2.0",
+    "twig-loader": "github:fourkitchens/twig-loader",
+    "twig-testing-library": "^1.2.0",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-merge": "^5.10.0",
+    "yaml": "^2.4.1"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^19.2.0",
+    "@commitlint/config-conventional": "^19.1.0",
+    "@semantic-release/changelog": "^6.0.2",
+    "@semantic-release/commit-analyzer": "^11.1.0",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^10.0.2",
+    "@semantic-release/release-notes-generator": "^12.1.0",
+    "husky": "^9.0.11",
+    "semantic-release": "^23.0.4"
+  },
+  "overrides": {
+    "graceful-fs": "^4.2.11"
+  },
+  "main": "commitlint.config.js"
+}

package/release.config.js

@@ -0,0 +1,11 @@
+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/scripts/a11y.js

@@ -0,0 +1,92 @@
+#!/usr/bin/env node
+/**
+ * @file a11y.js
+ * Contains a script that, when executed, will execute a11y linting tools
+ * against the storybook build.
+ */
+const chalk = import("chalk").then(m => m.default);
+
+const R = require('ramda');
+const path = require('path');
+const pa11y = require('pa11y');
+const {
+  storybookBuildDir,
+  pa11y: pa11yConfig,
+} = require('../config/a11y.config.js');
+// project specific configuration.
+const {
+  ignore,
+  components,
+} = require('../../../config/emulsify-core/a11y.config.js');
+
+const STORYBOOK_BUILD_DIR = path.resolve(__dirname, '../', storybookBuildDir);
+const STORYBOOK_IFRAME = path.join(STORYBOOK_BUILD_DIR, 'iframe.html');
+
+const severityToColor = R.cond([
+  [R.equals('error'), R.always('red')],
+  [R.equals('warning'), R.always('yellow')],
+  [R.equals('notice'), R.always('blue')],
+]);
+
+const issueIsValid = ({ code, runnerExtras: { description } }) =>
+  ignore.codes.includes(code) || ignore.descriptions.includes(description)
+    ? false
+    : true;
+
+const logIssue = ({ type: severity, message, context, selector }) => {
+  console.log(`
+    severity: ${chalk[severityToColor(severity)](severity)}
+    message: ${message}
+    context: ${context}
+    selector: ${selector}
+  `);
+};
+
+const logReport = ({ issues, pageUrl }) => {
+  const validIssues = issues.filter(issueIsValid);
+  const hasIssues = validIssues.length > 0;
+
+  if (hasIssues) {
+    console.log(chalk.red(`Issues found in component: ${pageUrl}`));
+    validIssues.map(logIssue);
+  } else {
+    console.log(chalk.green(`No issues found in component: ${pageUrl}`));
+  }
+
+  return hasIssues;
+};
+
+const lintComponent = async (name) =>
+  pa11y(`${STORYBOOK_IFRAME}?id=${name}`, {
+    includeNotices: true,
+    includeWarnings: true,
+    runners: ['axe'],
+    ...pa11yConfig,
+  });
+
+const lintReportAndExit = R.pipe(
+  R.map(lintComponent),
+  (p) => Promise.all(p),
+  R.andThen(
+    R.pipe(
+      R.map(logReport),
+      R.reject(R.equals(false)),
+      R.unless(R.isEmpty, () => process.exit(1)),
+    ),
+  ),
+);
+
+// Only perform linting/reporting when instructed.
+/* istanbul ignore next */
+if (R.pathEq(['argv', 2], '-r')(process)) {
+  lintReportAndExit(components);
+}
+
+module.exports = {
+  severityToColor,
+  issueIsValid,
+  logIssue,
+  logReport,
+  lintComponent,
+  lintReportAndExit,
+};

package/scripts/a11y.test.js

@@ -0,0 +1,159 @@
+import 'regenerator-runtime/runtime';
+
+const mockExit = jest
+  .spyOn(global.process, 'exit')
+  .mockImplementation(() => {});
+jest.mock('pa11y', () => jest.fn());
+jest.spyOn(global.console, 'log').mockImplementation(() => {});
+const pa11y = require('pa11y');
+const path = require('path');
+const {
+  severityToColor,
+  issueIsValid,
+  logIssue,
+  logReport,
+  lintComponent,
+  lintReportAndExit,
+} = require('./a11y');
+const {
+  ignore,
+  storybookBuildDir,
+  pa11y: pa11yConfig,
+} = require('../config/a11y.config');
+
+const STORYBOOK_BUILD_DIR = path.resolve(__dirname, '../', storybookBuildDir);
+const STORYBOOK_IFRAME = path.join(STORYBOOK_BUILD_DIR, 'iframe.html');
+
+pa11y.mockResolvedValue('very official report');
+
+describe('a11y', () => {
+  beforeEach(() => {
+    global.console.log.mockClear();
+    global.process.exit.mockClear();
+  });
+  it('can map axe issue severity to the correct chalk color', () => {
+    expect.assertions(3);
+    expect(severityToColor('error')).toBe('red');
+    expect(severityToColor('warning')).toBe('yellow');
+    expect(severityToColor('notice')).toBe('blue');
+  });
+
+  it('identifies invalid issues based on the code or the description', () => {
+    expect.assertions(3);
+    expect(
+      issueIsValid({
+        code: ignore.codes[0],
+        runnerExtras: {},
+      }),
+    ).toBe(false);
+    expect(
+      issueIsValid({
+        runnerExtras: {
+          description: ignore.descriptions[0],
+        },
+      }),
+    ).toBe(false);
+    expect(issueIsValid({ code: 'chicken', runnerExtras: {} })).toBe(true);
+  });
+
+  it('can use an axe issue to generate a single log message about the issue', () => {
+    expect.assertions(1);
+    logIssue({
+      type: 'error',
+      message: 'this chicken is not fried enough.',
+      context: 'https://example.com',
+      selector: 'kfc > popeyes > .chicken',
+    });
+    expect(global.console.log.mock.calls[0][0]).toMatchInlineSnapshot(`
+      "
+          severity: error
+          message: this chicken is not fried enough.
+          context: https://example.com
+          selector: kfc > popeyes > .chicken
+        "
+    `);
+  });
+
+  it('can log a whole axe report', () => {
+    const report = {
+      issues: [
+        {
+          type: 'error',
+          message: 'this pizza is too soggy',
+          context: 'https://example.com',
+          selector: 'pizza > .hut',
+          runnerExtras: {},
+        },
+        {
+          type: 'error',
+          message: 'this pasta is undercooked',
+          context: 'https://example.com',
+          selector: 'olive > .garden',
+          runnerExtras: {},
+        },
+      ],
+      pageUrl: 'https://example/component.html',
+    };
+    expect(logReport(report)).toBe(true);
+    expect(global.console.log.mock.calls).toMatchInlineSnapshot(`
+      Array [
+        Array [
+          "Issues found in component: https://example/component.html",
+        ],
+        Array [
+          "
+          severity: error
+          message: this pizza is too soggy
+          context: https://example.com
+          selector: pizza > .hut
+        ",
+        ],
+        Array [
+          "
+          severity: error
+          message: this pasta is undercooked
+          context: https://example.com
+          selector: olive > .garden
+        ",
+        ],
+      ]
+    `);
+  });
+
+  it('logs about a component having no issue if a report comes back empty', () => {
+    expect(logReport({ issues: [], pageUrl: 'papa-johns' })).toBe(false);
+    expect(global.console.log.mock.calls[0][0]).toMatchInlineSnapshot(
+      `"No issues found in component: papa-johns"`,
+    );
+  });
+
+  it('can call pa11y with the full path to a component', async () => {
+    expect.assertions(2);
+    await expect(lintComponent('chicken-strips')).resolves.toBe(
+      'very official report',
+    );
+    expect(pa11y).toHaveBeenCalledWith(
+      `${STORYBOOK_IFRAME}?id=chicken-strips`,
+      pa11yConfig,
+    );
+  });
+
+  it('runs linter, reports on issues, and exits with code "1" if valid issues are found', async () => {
+    expect.assertions(1);
+    pa11y.mockResolvedValueOnce({
+      issues: [
+        {
+          type: 'error',
+          message: 'these 7 layer supreme burritos do not taste that good',
+          context: 'https://example.com',
+          selector: 'taco > bell > .burrito',
+          runnerExtras: {},
+        },
+      ],
+      pageUrl: '/path/to/taco-bell',
+    });
+
+    await lintReportAndExit(['taco-bell']);
+    expect(global.process.exit).toHaveBeenCalledWith(1);
+  });
+});

package/scripts/loadYaml.js

@@ -0,0 +1,17 @@
+import { resolve } from 'path';
+import { readFileSync } from 'fs';
+import { parse } from 'yaml';
+import R from 'ramda';
+
+/**
+ * Small utility function that loads a yaml file and parses it synchronously.
+ * This is intended to make composition cleaner.
+ *
+ * @param {string} relativePath - relative path to a yaml file that will be loaded and parsed.
+ *
+ * @returns {string} JavaScript object that results from the yaml parsing of the specified file.
+ */
+export default function loadYaml(relativePath) {
+  const fullPath = resolve(__dirname, relativePath);
+  return parse(readFileSync(fullPath, 'utf8'));
+}

package/scripts/loadYaml.test.js

@@ -0,0 +1,30 @@
+import fs from 'fs';
+import yaml from 'yaml';
+import loadYaml from './loadYaml';
+
+jest
+  .spyOn(fs, 'readFileSync')
+  .mockImplementation(() => 'yaml spaghetti and meatballs');
+
+jest.spyOn(yaml, 'parse').mockImplementation(() => ({
+  the: 'yaml spaghetti and meatballs',
+}));
+
+describe('loadYaml', () => {
+  beforeEach(() => {
+    fs.readFileSync.mockClear();
+    yaml.parse.mockClear();
+  });
+
+  it('can load a yaml file, parse it, and return it', () => {
+    expect.assertions(3);
+    expect(loadYaml('./big-phat-burger.yml')).toEqual({
+      the: 'yaml spaghetti and meatballs',
+    });
+    expect(fs.readFileSync).toHaveBeenCalledWith(
+      `${__dirname}/big-phat-burger.yml`,
+      'utf8',
+    );
+    expect(yaml.parse).toHaveBeenCalledWith('yaml spaghetti and meatballs');
+  });
+});