@muonic/muon 0.0.2-beta.0

package/mixins/validation-mixin.js

@@ -0,0 +1,272 @@
+import { html, repeat, dedupeMixin } from '@muonic/muon';
+import customValidation from '@muon/utils/validation/index.js';
+import { FormElementMixin } from '@muon/mixins/form-element-mixin';
+
+/**
+ * A mixin to hold the validation state of a form element.
+ *
+ * @mixin
+ */
+
+export const ValidationMixin = dedupeMixin((superClass) =>
+  class ValidationMixinClass extends FormElementMixin(superClass) {
+
+    static get properties() {
+      return {
+        validation: {
+          type: Array
+        },
+
+        disableNative: {
+          type: Boolean
+        },
+
+        showMessage: {
+          type: Boolean
+        },
+
+        _pristine: {
+          type: Boolean,
+          state: true
+        },
+
+        _validationState: {
+          type: Object,
+          state: true
+        }
+      };
+    }
+
+    constructor() {
+      super();
+
+      this.validation = [];
+      this.disableNative = false;
+      this.showMessage = true;
+      this._pristine = true;
+      this._validationState = [];
+    }
+
+    /**
+     * A getter method to get pristine state of the form element.
+     *
+     * @returns {boolean} - Pristine state.
+     * @public
+     */
+    get isPristine() {
+      return this._pristine;
+    }
+
+    /**
+     * A getter method to get dirty state of the form element.
+     *
+     * @returns {boolean} - Dirty state.
+     * @public
+     */
+    get isDirty() {
+      return !this._pristine;
+    }
+
+    reportValidity() {
+      return this.validity;
+    }
+
+    get validity() {
+      this._pristine = false;
+      return this.validate();
+    }
+
+    reset() {
+      super.reset();
+      this._pristine = true;
+      this._validationState = [];
+    }
+
+    /**
+     * A method to validate the value of the form element.
+     *
+     * @returns {ValidityState} - Validity state of the form element.
+     * @public
+     * @override
+     */
+    validate() {
+      let validationState = [];
+      this.__updateAllValidity('');
+      if (this.validation?.length > 0) {
+        validationState = this.validation.map((val) => {
+          const vf = this.__parseValidationFunction(val);
+          const functionName = vf.functionName;
+          const params = [this, this.value].concat(vf.params);
+          return {
+            name: functionName,
+            value: customValidation[functionName].apply(this, params)
+          };
+        });
+      }
+
+      const nativeValidationState = this.__validateNative();
+      if (nativeValidationState) {
+        validationState.push(nativeValidationState);
+      }
+
+      this._validationState = validationState;
+      this.__updateAllValidity(this.validationMessage);
+      return this._slottedInputs[0].validity;
+    }
+
+    /**
+     * A method to do native html form element validation.
+     *
+     * @returns {object} - Validation state.
+     * @private
+     */
+    __validateNative() {
+      if (this.disableNative) {
+        return undefined;
+      }
+
+      let message;
+      this._slottedInputs.forEach((input) => {
+        if (!input.validity.valid) {
+          if (input.validity.patternMismatch && input.title) {
+            message = input.title;
+          } else {
+            message = input.validationMessage;
+          }
+        }
+      });
+      return message ? {
+        name: 'native',
+        value: message
+      } : undefined;
+    }
+
+    /**
+     * A method to parse the validation function name to return function name and parameter list (if any).
+     *
+     * @param {string} validation - Validation function name.
+     * @returns {object} - Parsed function name and parameter list.
+     * @private
+     */
+    __parseValidationFunction(validation) {
+      let params = [];
+      const arr = validation.split('(');
+      const functionName = arr[0];
+      const paramString = arr.length > 1 && arr[1].split(')')[0];
+      if (paramString) {
+        params = paramString.split(',').map((value) => {
+          const int = parseInt(value, 10);
+          const clean = value.split('');
+          // remove quotes from 'string'
+          clean.pop();
+          clean.shift();
+          return isNaN(int) ? clean.join('') : int;
+        });
+      }
+      return {
+        functionName,
+        params
+      };
+    }
+
+    /**
+     * A method to update the custom validity of the html form elements.
+     *
+     * @param {string} validationMessage - Validation message to be set.
+     * @returns {void}
+     * @private
+     */
+    __updateAllValidity(validationMessage) {
+      if (this.isDirty) {
+        this._slottedInputs.forEach((input) => {
+          if (input.setCustomValidity) {
+            input.setCustomValidity(validationMessage);
+          }
+        });
+      }
+    }
+
+    /**
+     * A getter method to return warning icon of validation message.
+     *
+     * @protected
+     * @override
+     * @readonly
+     */
+    get _addValidationIcon() {
+      return undefined;
+    }
+
+    /**
+     * A method to get a validation message combind from the validity states.
+     *
+     * @returns {string} - Validation message.
+     */
+    get validationMessage() {
+      return this._validationState?.filter((state) => {
+        return state?.value;
+      }).map((state) => {
+        return state.value + '.';
+      }).join(' ');
+    }
+
+    /**
+     * A method to get validation message template.
+     *
+     * @returns {object} TemplateResult - validation message template.
+     * @protected
+     * @override
+     */
+    get _addValidationMessage() {
+      if (this.showMessage && this.isDirty && this.validationMessage) {
+        return html`
+          <div class="validation">
+            ${this._addValidationIcon}
+            <div class="message">
+              ${this.validationMessage}
+            </div>
+          </div>`;
+      }
+
+      return html``;
+    }
+
+    /**
+     * A method to get list view of validation message template.
+     *
+     * @returns {object} TemplateResult - validation message template.
+     * @protected
+     * @override
+     */
+    get _addValidationListMessage() {
+      if (this.showMessage && this.isDirty && this.validationMessage) {
+        const failedValidationStates = this._validationState?.filter((state) => {
+          return state?.value;
+        });
+        if (failedValidationStates) {
+          return html`
+            <div class="validation">
+              <ul>
+                ${repeat(failedValidationStates, (validationState) => html`<li>${this._addValidationState(validationState.name, validationState.value)}</li>`)}
+              </ul>
+            </div>`;
+        }
+      }
+
+      return html``;
+    }
+
+    /**
+     * A method to render each of validation state message template.
+     *
+     * @param {string} key - Validation function name.
+     * @param {string} value - Validation state or message.
+     * @returns {object} TemplateResult validation template.
+     * @protected
+     * @override
+     */
+    _addValidationState(key, value) {
+      return html`<p> ${value}. </p>`;
+    }
+  }
+);

package/muon-element/index.js

@@ -0,0 +1,97 @@
+import { html, LitElement, adoptStyles, supportsAdoptingStyleSheets } from '@muonic/muon';
+
+/**
+ * @typedef {module:lit.CSSResultOrNative} CSSResultOrNative - define css type
+ */
+
+export const MuonElementMixin = (superClass) => class extends superClass {
+
+  static get properties() {
+    return {
+      type: { type: String }
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.type = 'standard';
+
+    this.__addLightDOM();
+
+  }
+
+  /**
+   * A method to inject light DOM styles into parent.
+   * This currently has some limitations:
+   * - Cannot easily target the element with attributes.
+   * - With this implementation CSS can be written outside of host, leaking styles.
+   * - :host might not be the right use here as users might believe they can use its other features.
+   *
+   * @returns {CSSResultOrNative} - Return modified css that is injected.
+   * @private
+   */
+  __addLightDOM() {
+    const checkSheets = (styleSheets, styleName) => {
+      return [].slice.call(styleSheets).filter((sheet) => {
+        return sheet.title === styleName;
+      });
+    };
+
+    this.updateComplete.then(() => {
+      const css = this.slottedStyles;
+
+      if (!css) {
+        return undefined;
+      }
+
+      const clonedCSS = Object.assign({}, css);
+
+      const nodeName = this.nodeName.toLowerCase();
+      const parentNode = this.getRootNode();
+      const parentNodeType = parentNode.nodeName;
+      const styleName = `${nodeName}-styles`;
+
+      // First need to replace `:host` with the component name
+      clonedCSS.cssText = clonedCSS.cssText.replace(/:host/g, nodeName);
+
+      // How we add the styles depends on where it is being added, HTMLDocument or another ShadowDom.
+      // If the Document we don't want to add multiple times
+      if (parentNodeType === '#document-fragment') {
+        // If it is within a shadowDom
+        let stylesAdded;
+
+        if (supportsAdoptingStyleSheets) {
+          const stylesheet = new CSSStyleSheet();
+
+          stylesheet.replaceSync(clonedCSS.cssText);
+          stylesAdded = [...parentNode.adoptedStyleSheets, stylesheet];
+        } else {
+          stylesAdded = [clonedCSS];
+        }
+
+        adoptStyles(parentNode, stylesAdded);
+      } else if (parentNodeType === '#document') {
+        // If it is in the parent DOM
+        const styleSheets = parentNode.styleSheets;
+
+        if (!Array.from(checkSheets(styleSheets, styleName)).length > 0) {
+          const style = document.createElement('style');
+          style.innerHTML = String.raw`${clonedCSS.cssText}`;
+          style.title = styleName;
+          document.head.appendChild(style);
+        }
+      }
+
+      return clonedCSS;
+
+    });
+    return undefined;
+  }
+
+  render() {
+    return html`${this[`${this.type}Template`]}`;
+  }
+};
+
+export const MuonElement = MuonElementMixin(LitElement);

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@muonic/muon",
+  "version": "0.0.2-beta.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "web-test-runner \"./tests/**/*.test.js\" --coverage",
+    "test:scripts": "NODE_OPTIONS=--loader=esmock c8 ava \"tests/scripts/utils/utils-test.mjs\"",
+    "test:browserstack": "web-test-runner \"./tests/**/*.test.js\" --config web-test-runner.browserstack.config.mjs",
+    "release": "standard-version"
+  },
+  "bin": {
+    "muon-serve": "./scripts/serve/index.mjs",
+    "muon-build-storybook": "./scripts/build/storybook/index.mjs"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@open-wc/building-rollup": "2.0.1",
+    "@open-wc/scoped-elements": "2.1.2",
+    "@rollup/plugin-alias": "3.1.9",
+    "@rollup/plugin-json": "4.1.0",
+    "@rollup/plugin-node-resolve": "14.0.0",
+    "@rollup/plugin-replace": "4.0.0",
+    "@rollup/plugin-virtual": "2.1.0",
+    "@web/dev-server": "0.1.32",
+    "@web/dev-server-rollup": "0.3.18",
+    "@web/dev-server-storybook": "0.5.4",
+    "@web/storybook-prebuilt": "0.1.34",
+    "@webcomponents/scoped-custom-element-registry": "0.0.5",
+    "app-root-path": "3.0.0",
+    "autoprefixer": "10.4.7",
+    "chokidar": "3.5.3",
+    "chroma-js": "2.4.2",
+    "command-line-args": "5.2.1",
+    "deepmerge": "4.2.2",
+    "glob": "8.0.3",
+    "glob-to-regexp": "0.4.1",
+    "lit": "2.2.7",
+    "lodash": "4.17.21",
+    "path-is-inside": "1.0.2",
+    "postcss": "8.4.14",
+    "postcss-clean": "1.2.2",
+    "postcss-import": "14.1.0",
+    "postcss-preset-env": "7.7.2",
+    "postcss-simple-vars": "6.0.3",
+    "rollup-plugin-lit-css": "4.0.0",
+    "rollup-plugin-styles": "4.0.0",
+    "style-dictionary": "3.7.1",
+    "typescript": "4.8.2",
+    "web-component-analyzer": "1.1.6"
+  },
+  "devDependencies": {
+    "@open-wc/testing": "3.1.6",
+    "@web/dev-server-esbuild": "0.3.2",
+    "@web/test-runner": "0.14.0",
+    "@web/test-runner-browserstack": "0.5.1",
+    "@web/test-runner-playwright": "0.8.10",
+    "ava": "4.3.3",
+    "c8": "^7.12.0",
+    "esmock": "^2.0.3",
+    "sinon": "14.0.0"
+  },
+  "engines": {
+    "node": ">=16.13.0"
+  },
+  "browserslist": [
+    "defaults",
+    "not IE 11"
+  ]
+}

package/rollup.config.mjs

@@ -0,0 +1,30 @@
+import merge from 'deepmerge';
+import { rollupPlugins } from '@muonic/muon/scripts/rollup-plugins.mjs';
+import virtual from '@rollup/plugin-virtual';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import { createBasicConfig } from '@open-wc/building-rollup';
+import { componentDefiner, getDestination } from '@muonic/muon/scripts/utils/index.mjs';
+import path from 'path';
+
+const config = createBasicConfig();
+const input = 'index.js';
+
+export default merge(config, {
+  ...config,
+  input,
+  treeshake: false,
+  plugins: [
+    virtual({
+      'component-definitions.js': componentDefiner()
+    }),
+    ...rollupPlugins,
+    nodeResolve()
+  ],
+  output: {
+    ...config.output,
+    dir: undefined,
+    file: path.join(getDestination(), 'index.js'),
+    sourcemap: false,
+    inlineDynamicImports: true
+  }
+});

package/scripts/build/storybook/index.mjs

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+import path from 'path';
+import { runner } from '../../utils/index.mjs';
+
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const file = path.join(__dirname, 'run.mjs');
+
+runner(file);

package/scripts/build/storybook/run.mjs

@@ -0,0 +1,47 @@
+#!/usr/bin/env node
+
+import { execFileSync } from 'child_process';
+import path from 'path';
+import fs from 'fs';
+
+import commandLineArgs from 'command-line-args';
+
+const args = commandLineArgs([
+  {
+    name: 'config-dir',
+    alias: 'c',
+    type: String,
+    defaultValue: './.storybook'
+  },
+  {
+    name: 'output-dir',
+    alias: 'o',
+    type: String,
+    defaultValue: 'storybook-static'
+  },
+  {
+    name: 'type',
+    alias: 't',
+    type: String,
+    defaultValue: 'web-components'
+  }
+]);
+
+const main = async () => {
+  const configDir = path.resolve(args['config-dir']);
+  const outputDir = path.resolve(args['output-dir']);
+  const execArgs = [
+    '--config-dir', configDir,
+    '--output-dir', outputDir,
+  ];
+
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir);
+  }
+
+  execFileSync('build-storybook', execArgs);
+
+  console.log('Storybook build completed');
+};
+
+main();

package/scripts/rollup-plugins.mjs

@@ -0,0 +1,116 @@
+import { fromRollup } from '@web/dev-server-rollup';
+import stylesPlugin from 'rollup-plugin-styles';
+import replacePlugin from '@rollup/plugin-replace';
+import aliasPlugin from '@rollup/plugin-alias';
+import autoprefixer from 'autoprefixer';
+import postcssPreset from 'postcss-preset-env';
+import postcssImport from 'postcss-import';
+import postcssVariables from 'postcss-simple-vars';
+import litcssPlugin from 'rollup-plugin-lit-css';
+import { cleanup, getConfig, getDestination, createTokens, sourceFilesAnalyzer, getAliasPaths } from './utils/index.mjs';
+
+import path from 'path';
+import fs from 'fs';
+
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const config = getConfig();
+
+const muonPlugin = () => {
+  return {
+    name: 'muon',
+    async buildStart() {
+      const destination = getDestination();
+      cleanup(destination, true).then(async () => {
+        const cejson = await sourceFilesAnalyzer();
+        fs.writeFileSync(path.join(destination, 'custom-elements.json'), cejson);
+      });
+    }
+  };
+};
+
+const tokenPath = path.join(__dirname, '..', 'build', 'tokens', 'es6', 'muon-tokens.mjs');
+let designTokens = {};
+
+const buildTokensPlugin = () => {
+  return {
+    name: 'generate-tokens-plugin',
+    async buildStart() {
+      await createTokens();
+      designTokens = await import(tokenPath);
+    }
+  };
+};
+
+const styles = fromRollup(stylesPlugin);
+const replace = fromRollup(replacePlugin);
+const litcss = fromRollup(litcssPlugin);
+const alias = fromRollup(aliasPlugin);
+const muon = fromRollup(muonPlugin);
+const buildTokens = fromRollup(buildTokensPlugin);
+
+const aliasConfig = {
+  entries: getAliasPaths('regex')
+};
+
+const postcssPlugins = [
+  postcssVariables({
+    variables() {
+      return designTokens;
+    },
+    unknown(node) {
+      node.remove(); // removing unknown or unset tokens
+    }
+  }),
+  postcssImport(),
+  postcssPreset({
+    stage: 0,
+    features: {
+      'logical-properties-and-values': false /* allowing start end values */
+    }
+  }),
+  autoprefixer({ grid: true })
+];
+
+// @TODO: bring back when global css is used
+// const createGlobalCSS = async (destination) => {
+//   const globalCSSUrl = path.join(__filename, '..', '..', '..', 'css', 'global.css');
+//   const globalCSSDest = path.join(destination, 'muon.min.css');
+//   const globalCSS = fs.readFileSync(globalCSSUrl);
+//   const processedCSS = await postcss(postcssPlugins).process(globalCSS, { from: globalCSSUrl, to: globalCSSDest });
+
+//   fs.writeFileSync(globalCSSDest, processedCSS.css, 'utf8');
+// };
+
+const styleConfig = {
+  mode: 'emit',
+  minimize: true,
+  plugins: postcssPlugins
+};
+
+const replaceConfig = {
+  preventAssignment: true,
+  values: {
+    'process.env.MUON_PREFIX': JSON.stringify(config?.components?.prefix || 'muon')
+  }
+};
+
+export const serverPlugins = [
+  buildTokens(),
+  alias(aliasConfig),
+  replace(replaceConfig),
+  styles(styleConfig),
+  litcss({ exclude: ['**/css/*.css', '**/dist/*.css', 'muon.min.css'] }),
+  muon()
+];
+
+export const rollupPlugins = [
+  buildTokensPlugin(),
+  aliasPlugin(aliasConfig),
+  replacePlugin(replaceConfig),
+  stylesPlugin(styleConfig),
+  litcssPlugin({ exclude: ['**/css/*.css', '**/dist/*.css', 'muon.min.css'] }),
+  muonPlugin()
+];

package/scripts/serve/index.mjs

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+import path from 'path';
+import { runner } from '../utils/index.mjs';
+
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const file = path.join(__dirname, 'run.mjs');
+
+runner(file);

package/scripts/serve/run.mjs

@@ -0,0 +1,27 @@
+import { startDevServer } from '@web/dev-server';
+import commandLineArgs from 'command-line-args';
+import StorybookConfig from '../../storybook/server.config.mjs';
+
+const myServerDefinitions = [
+  { name: 'no-open', type: Boolean },
+  { name: 'no-watch', type: Boolean }
+];
+
+const myConfig = commandLineArgs(myServerDefinitions, { partial: true });
+
+const main = async () => {
+  await startDevServer({
+    argv: myConfig._unknown,
+    config: {
+      ...StorybookConfig,
+      open: !myConfig['no-open'],
+      watch: !myConfig['no-watch'],
+      mimeTypes: {
+        // '**/muon.min.css': 'text/css', // @TODO: pass global style file name from config
+        ...StorybookConfig.mimeTypes
+      }
+    }
+  });
+};
+
+main();