@muonic/muon 0.0.2-beta.0

package/tokens/utils/templates/font-face.css.template

@@ -0,0 +1,30 @@
+<% _.forIn(properties && properties.asset && properties.asset.font, function(font) {
+  var fileFormatArr = [];
+  if (font.eot) {
+  	fileFormatArr.push("url('" + font.eot.value + "');\n\tsrc: url('" + font.eot.value + "?#iefix') format('embedded-opentype')");
+  }
+  if (font.otf) {
+  	fileFormatArr.push("url('" + font.otf.value + "') format('otf')");
+  }
+  if (font.ttf) {
+  	fileFormatArr.push("url('" + font.ttf.value + "') format('truetype')");
+  }
+  if (font.svg) {
+  	fileFormatArr.push("url('" + font.svg.value + "#" + font.name.value.replace(/ /g,'%20') + "') format('svg')");
+  }
+  if (font.woff) {
+  	fileFormatArr.push("url('" + font.woff.value + "') format('woff')");
+  }
+  if (font.woff2) {
+  	fileFormatArr.push("url('" + font.woff2.value + "') format('woff2')");
+  }
+%>
+@font-face {
+  font-family: "<%= font.name.value %>";
+  font-display: fallback;<% if (font.unicodeRange) { %>
+  unicode-range: <%= font.unicodeRange.value %>;<% } %>
+  src: <%= fileFormatArr.join(',\n\t\t') %>;<% if (font.style) { %>
+  font-style: <%= font.style.value %>;<% } if (font.weight) { %>
+  font-weight: <%= font.weight.value %>;<% } %>
+}
+<% }); %>

package/tokens/utils/transforms/color.js

@@ -0,0 +1,27 @@
+const chroma = require('chroma-js');
+
+const colorTransform = (token) => {
+  const { value, modify = [] } = token;
+  let color = chroma(value);
+  // iterate over the modify array (see tokens/color.json)
+  // and apply each modification in order
+  modify.forEach(({ type, amount }) => {
+    // modifier type must match a method name in chromajs
+    // https://gka.github.io/chroma.js/
+    // chroma methods can be chained, so each time we override the color variable
+    // we can still call other chroma methods, similar to
+    // chroma(value).brighten(1).darken(1).hex();
+    color = color[type](amount);
+
+  });
+
+  return color.hex();
+};
+
+module.exports = {
+  name: 'color/css',
+  type: 'value',
+  transitive: true,
+  matcher: (token) => token.modify,
+  transformer: colorTransform
+};

package/tokens/utils/transforms/string.js

@@ -0,0 +1,6 @@
+module.exports = {
+  name: 'string/css',
+  type: 'value',
+  matcher: (token) => token.type === 'string',
+  transformer: (token) => `"${token.value}"`
+};

package/tokens/utils/validation.json

@@ -0,0 +1,76 @@
+{
+  "validation": {
+    "isRequired": {
+      "message": {
+        "description": "Display message for isRequired validation function",
+        "value": "This field is required"
+      }
+    },
+    "isNumber": {
+      "message": {
+        "description": "Display message for isNumber validation function",
+        "value": "Needs to be a number"
+      }
+    },
+    "isInteger": {
+      "message": {
+        "description": "Display message for isInteger validation function",
+        "value": "Needs to be a whole number"
+      }
+    },
+    "isEmail": {
+      "message": {
+        "description": "Display message for isEmail validation function",
+        "value": "Your email does not look right"
+      }
+    },
+    "minLength": {
+      "message": {
+        "description": "Display message for minLength validation function",
+        "value": "Length must be at least $min characters"
+      }
+    },
+    "maxLength": {
+      "message": {
+        "description": "Display message for maxLength validation function",
+        "value": "Length must be no longer than $max characters"
+      }
+    },
+    "isBetween": {
+      "message": {
+        "description": "Display message for isBetween validation function",
+        "value": "Length must be between $min and $max characters"
+      }
+    },
+    "isDate": {
+      "message": {
+        "description": "Display message for isDate validation function",
+        "value": "Your date does not look right"
+      }
+    },
+    "minDate": {
+      "message": {
+        "description": "Display message for minDate validation function",
+        "value": "Date must be on or after $minDate"
+      }
+    },
+    "maxDate": {
+      "message": {
+        "description": "Display message for maxDate validation function",
+        "value": "Date must be on or before $maxDate"
+      }
+    },
+    "hasNumbers": {
+      "message": {
+        "description": "Display message for hasNumbers validation function",
+        "value": "Must include at least one number"
+      }
+    },
+    "hasLetters": {
+      "message": {
+        "description": "Display message for hasLetters validation function",
+        "value": "Must include at least one letter"
+      }
+    }
+  }
+}

package/utils/scroll/index.js

@@ -0,0 +1,31 @@
+export default ({
+  element, // the element to scroll to
+  focusOn = element // optional element that gets focus
+} = {}) => {
+  const motionQuery = window.matchMedia('(prefers-reduced-motion)');
+
+  setTimeout(function () { // Firefox needs this in order to allow the event queue to clear before scrolling
+    if (!motionQuery.matches) {
+      element.scrollIntoView({
+        behavior: 'smooth'
+      });
+    }
+  }, 0);
+
+  focusOn.focus({
+    preventScroll: !motionQuery.matches
+  });
+
+  // https://css-tricks.com/smooth-scrolling-accessibility/
+  // "In order for this to work on non-focusable target elements (section, div, span, h1-6, ect),
+  // we have to set tabindex="-1" on them"
+
+  if (focusOn !== document.activeElement) { // Checking if the target was focused
+    const tabIndex = focusOn.getAttribute('tabindex');
+    focusOn.setAttribute('tabindex', '-1'); // Adding tabindex for elements not focusable
+    focusOn.focus({
+      preventScroll: !motionQuery.matches
+    }); // Setting focus
+    focusOn.setAttribute('tabindex', tabIndex); //resetting tabindex
+  }
+};

package/utils/validation/index.js

@@ -0,0 +1,205 @@
+import {
+  VALIDATION_IS_REQUIRED_MESSAGE,
+  VALIDATION_IS_NUMBER_MESSAGE,
+  VALIDATION_IS_INTEGER_MESSAGE,
+  VALIDATION_IS_EMAIL_MESSAGE,
+  VALIDATION_MIN_LENGTH_MESSAGE,
+  VALIDATION_MAX_LENGTH_MESSAGE,
+  VALIDATION_IS_BETWEEN_MESSAGE,
+  VALIDATION_IS_DATE_MESSAGE,
+  VALIDATION_MIN_DATE_MESSAGE,
+  VALIDATION_MAX_DATE_MESSAGE,
+  VALIDATION_HAS_NUMBERS_MESSAGE,
+  VALIDATION_HAS_LETTERS_MESSAGE
+} from '@muon/tokens';
+
+const regularExpressions = {
+  // eslint-disable-next-line no-useless-escape
+  email: /^[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/i
+};
+
+const withoutChar = (value, separator) => {
+  return value.split(separator).join('');
+};
+
+const convertIsoDate = (isoDate) => {
+  return isoDate.split('-').reverse().join('/');
+};
+
+const isRequired = (inputter, value) => {
+  return (value === undefined || value.length === 0) && VALIDATION_IS_REQUIRED_MESSAGE;
+};
+
+const isNumber = (inputter, value) => {
+  const number = inputter.separator ? withoutChar(value, inputter.separator) : value;
+  const val = Number(number);
+  const isNum = typeof val === 'number' && !isNaN(val);
+  return value.length > 0 && !isNum && VALIDATION_IS_NUMBER_MESSAGE;
+};
+
+const isInteger = (inputter, value) => {
+  const number = inputter.separator ? withoutChar(value, inputter.separator) : value;
+  const val = Number(number);
+  const isInt = typeof val === 'number' && isFinite(val) && Math.floor(val) === val;
+
+  return value.length > 0 && !isInt && VALIDATION_IS_INTEGER_MESSAGE;
+};
+
+const isEmail = (inputter, value) => {
+  const emailRegexp = new RegExp(regularExpressions.email, 'i');
+  return value.length > 0 && !emailRegexp.test(value) && VALIDATION_IS_EMAIL_MESSAGE;
+};
+
+const minLength = (inputter, value, min) => {
+  const str = inputter.separator ? withoutChar(value, inputter.separator) : value;
+  return value.length > 0 && str.length < min && VALIDATION_MIN_LENGTH_MESSAGE.replace('$min', min);
+};
+
+const maxLength = (inputter, value, max) => {
+  const str = inputter.separator ? withoutChar(value, inputter.separator) : value;
+  return value.length > 0 && str.length > max && VALIDATION_MAX_LENGTH_MESSAGE.replace('$max', max);
+};
+
+const isBetween = (inputter, value, min, max) => {
+  const str = inputter.separator ? withoutChar(value, inputter.separator) : value;
+  return value.length > 0 && (str.length < min || str.length > max) && VALIDATION_IS_BETWEEN_MESSAGE.replace('$min', min).replace('$max', max);
+};
+
+const stringToDate = (dateString) => {
+  const arr = dateString.indexOf('/') !== -1 ? dateString.split('/') : dateString.split('-');
+
+  let dayString;
+  let monthString;
+  let yearString;
+
+  if (dateString.indexOf('/') !== -1) {
+    dayString = arr[0];
+    monthString = arr[1];
+    yearString = arr[2];
+  } else {
+    dayString = arr[2];
+    monthString = arr[1];
+    yearString = arr[0];
+  }
+
+  const day = parseInt(dayString, 10);
+  const month = parseInt(monthString, 10) - 1;
+  const year = parseInt(yearString, 10);
+  const date = new Date(year, month, day);
+  return date;
+};
+
+const isDate = (inputter, dateString) => {
+  const isValid = (string, length, a, b) => {
+    return string && string.length === length && isNumeric(string) && a === b;
+  };
+
+  const arr = dateString.indexOf('/') !== -1 ? dateString.split('/') : dateString.split('-');
+
+  let dayString;
+  let monthString;
+  let yearString;
+
+  if (dateString.indexOf('/') !== -1) {
+    dayString = arr[0];
+    monthString = arr[1];
+    yearString = arr[2];
+  } else {
+    dayString = arr[2];
+    monthString = arr[1];
+    yearString = arr[0];
+  }
+
+  const day = parseInt(dayString, 10);
+  const month = parseInt(monthString, 10) - 1;
+  const year = parseInt(yearString, 10);
+
+  // Check formatting first
+  const formatValid =
+    dateString.length === 10 && isNumeric(dayString) && isNumeric(monthString) && isNumeric(yearString);
+
+  if (dateString.length > 0 && !formatValid) {
+    return VALIDATION_IS_DATE_MESSAGE;
+  }
+
+  // Check date is a valid date
+  const date = new Date(year, month, day);
+  const dayValid = isValid(dayString, 2, date.getDate(), day);
+  const monthValid = isValid(monthString, 2, date.getMonth(), month);
+  const yearValid = isValid(yearString, 4, date.getFullYear(), year);
+  const valid = dayValid && monthValid && yearValid;
+
+  return dateString.length > 0 && !valid ? VALIDATION_IS_DATE_MESSAGE : '';
+};
+
+const minDate = (inputter, value, min) => {
+  if (isDate(inputter, value) === '') {
+    const minDate = stringToDate(min);
+    const date = stringToDate(value);
+    const displayDate = convertIsoDate(min);
+
+    if (value.length > 0 && date < minDate) {
+      return VALIDATION_MIN_DATE_MESSAGE.replace('$minDate', displayDate);
+    }
+  }
+
+  return '';
+};
+
+const maxDate = (inputter, value, max) => {
+  if (isDate(inputter, value) === '') {
+    const maxDate = stringToDate(max);
+    const date = stringToDate(value);
+    const displayDate = convertIsoDate(max);
+
+    if (value.length > 0 && date > maxDate) {
+      return VALIDATION_MAX_DATE_MESSAGE.replace('$maxDate', displayDate);
+    }
+  }
+
+  return '';
+};
+
+/**
+ * A function to check whether the value is numeric or not.
+ *
+ * @function
+ * @param {string} value -  value to check.
+ * @returns {boolean} - True or false.
+ * @example
+ * // returns false
+ * isNumeric('abcd');
+ * @example
+ * // returns true
+ * isNumeric('374');
+ */
+function isNumeric(value) {
+  const regex = /[^0-9]/g;
+  return value && !value.match(regex);
+}
+
+const hasNumbers = (inputter, value) => {
+  return value.length > 0 && !/\d/.test(value) ? VALIDATION_HAS_NUMBERS_MESSAGE : '';
+};
+
+const hasLetters = (inputter, value) => {
+  const regExp = /[a-zA-Z]/g;
+  return value.length > 0 && !regExp.test(value) ? VALIDATION_HAS_LETTERS_MESSAGE : '';
+};
+
+const validations = {
+  isRequired,
+  isNumber,
+  isInteger,
+  isEmail,
+  minDate,
+  maxDate,
+  minLength,
+  maxLength,
+  isBetween,
+  isDate,
+  hasNumbers,
+  hasLetters
+};
+
+export { validations as default };

package/web-test-runner.browserstack.config.mjs

@@ -0,0 +1,123 @@
+import { browserstackLauncher } from '@web/test-runner-browserstack';
+
+import { serverPlugins } from '@muonic/muon/scripts/rollup-plugins.mjs';
+import { checkRunSnapshots } from './tests/runner/commands.mjs';
+
+// options shared between all browsers
+const sharedCapabilities = {
+  // your username and key for browserstack, you can get this from your browserstack account
+  // it's recommended to store these as environment variables
+  'browserstack.user': process.env.BROWSER_STACK_USERNAME,
+  'browserstack.key': process.env.BROWSER_STACK_ACCESS_KEY,
+
+  project: 'Muon',
+  name: 'CI tests',
+  // if you are running tests in a CI, the build id might be available as an
+  // environment variable. this is useful for identifying test runs
+  // this is for example the name for github actions
+  build: `Muon ${process.env.GITHUB_RUN_NUMBER || 'unknown'}`,
+};
+
+export default {
+  testRunnerHtml: (testFramework) =>
+    `<html>
+      <head>
+        <script type="module">
+          import '@webcomponents/scoped-custom-element-registry';
+        </script>
+      </head>
+      <body>
+        <script>window.process = { env: { NODE_ENV: "development" } }</script>
+        <script type="module" src="${testFramework}"></script>
+      </body>
+    </html>`,
+  nodeResolve: true,
+  mimeTypes: {
+    '**/*.css': 'js'
+  },
+  plugins: [
+    ...serverPlugins,
+    checkRunSnapshots(false)
+  ],
+  // how many browsers to run concurrently in browserstack. increasing this significantly
+  // reduces testing time, but your subscription might limit concurrent connections
+  concurrentBrowsers: 2,
+  // amount of test files to execute concurrently in a browser. the default value is based
+  // on amount of available CPUs locally which is irrelevant when testing remotely
+  concurrency: 3,
+  browsers: [
+    // create a browser launcher per browser you want to test
+    // you can get the browser capabilities from the browserstack website
+    browserstackLauncher({
+      capabilities: {
+        ...sharedCapabilities,
+        browserName: 'Chrome',
+        os: 'Windows',
+        os_version: '10',
+      },
+    }),
+    browserstackLauncher({
+      capabilities: {
+        ...sharedCapabilities,
+        browserName: 'Firefox',
+        os: 'Windows',
+        os_version: '10',
+      },
+    }),
+    browserstackLauncher({
+      capabilities: {
+        ...sharedCapabilities,
+        browserName: 'Edge',
+        os: 'Windows',
+        os_version: '10',
+      },
+    }),
+    browserstackLauncher({
+      capabilities: {
+        ...sharedCapabilities,
+        browserName: 'Safari',
+        os: 'OS X',
+        os_version: 'Big Sur',
+      },
+    }),
+    browserstackLauncher({
+      capabilities: {
+        ...sharedCapabilities,
+        realMobile: true,
+        device: 'Google Pixel 5',
+        os_version: '12.0',
+        browserName: 'Android',
+      },
+    }),
+    browserstackLauncher({
+      capabilities: {
+        ...sharedCapabilities,
+        realMobile: true,
+        device: 'Samsung Galaxy S20',
+        os_version: '10.0',
+        browserName: 'Android',
+      },
+    }),
+    // browserstackLauncher({
+    //   capabilities: {
+    //     ...sharedCapabilities,
+    //     realMobile: true,
+    //     device: 'iPhone 13 Pro',
+    //     os_version: '15.6',
+    //     browserName: 'iPhone',
+    //   },
+    // }),
+    // browserstackLauncher({
+    //   capabilities: {
+    //     ...sharedCapabilities,
+    //     realMobile: true,
+    //     device: 'iPhone SE 2020',
+    //     os_version: '13',
+    //     browserName: 'iPhone',
+    //   },
+    // }),
+  ],
+  browserStartTimeout: 60000,
+  testsStartTimeout: 60000,
+  testsFinishTimeout: 120000,
+};

package/web-test-runner.config.mjs

@@ -0,0 +1,44 @@
+import { playwrightLauncher } from '@web/test-runner-playwright';
+import { serverPlugins } from '@muonic/muon/scripts/rollup-plugins.mjs';
+import { checkRunSnapshots } from './tests/runner/commands.mjs';
+
+export default {
+  testRunnerHtml: (testFramework) =>
+    `<html>
+      <head>
+        <script type="module">
+          import '@webcomponents/scoped-custom-element-registry';
+        </script>
+      </head>
+      <body>
+        <script>window.process = { env: { NODE_ENV: "development" } }</script>
+        <script type="module" src="${testFramework}"></script>
+      </body>
+    </html>`,
+  nodeResolve: true,
+  mimeTypes: {
+    '**/*.css': 'js'
+  },
+  browsers: [
+    playwrightLauncher({ product: 'chromium' }),
+    playwrightLauncher({ product: 'firefox' }),
+    playwrightLauncher({ product: 'webkit' })
+  ],
+  browserStartTimeout: 30000, // default 30000
+  testsStartTimeout: 20000, // default 10000
+  testsFinishTimeout: 60000, // default 20000
+  concurrentBrowsers: 2,
+  concurrency: 2,
+  plugins: [
+    ...serverPlugins,
+    checkRunSnapshots()
+  ],
+  coverageConfig: {
+    threshold: {
+      statements: 99,
+      branches: 99,
+      functions: 99,
+      lines: 99
+    }
+  }
+};