@muonic/muon 0.0.2-experimental-151-6e27a7a.0 → 0.0.2-experimental-153-7d10f5f.0

package/components/card/src/card-component.js

@@ -5,6 +5,8 @@ import { Image } from '@muon/components/image';
 import styles from './card-styles.css';
 
 /**
+ * A card is a container for content.
+ *
  * @element card
  */
 export class Card extends ScopedElementsMixin(ImageHolderMixin(CardMixin(MuonElement))) {

package/components/image/src/image-component.js

@@ -9,8 +9,8 @@ import {
 
 import styles from './image-styles.css';
 
-/**.
- * Loading images with default lazy loading
+/**
+ * Loading images with default lazy loading.
  *
  * @element image
  */

package/components/inputter/src/inputter-component.js

@@ -205,8 +205,8 @@ export class Inputter extends ScopedElementsMixin(ValidationMixin(MaskMixin(Muon
   }
 }
 
-/**.
- * InputterDetail component to handle helper text
+/**
+ * InputterDetail component to handle helper text.
  *
  * @element inputter-detail
  * @private

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-experimental-151-6e27a7a.0",
+  "version": "0.0.2-experimental-153-7d10f5f.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "web-test-runner \"./tests/**/*.test.js\" --coverage",
+    "test:scripts": "ava \"tests/scripts/utils/utils-test.js\"",
     "test:browserstack": "web-test-runner \"./tests/**/*.test.js\" --config web-test-runner.browserstack.config.mjs",
     "release": "standard-version"
   },
@@ -56,6 +57,7 @@
     "@web/test-runner": "0.14.0",
     "@web/test-runner-browserstack": "0.5.1",
     "@web/test-runner-playwright": "0.8.10",
+    "ava": "4.3.3",
     "sinon": "14.0.0"
   },
   "engines": {

package/scripts/serve/run.mjs

@@ -4,7 +4,7 @@ import StorybookConfig from '../../storybook/server.config.mjs';
 
 const myServerDefinitions = [
   { name: 'no-open', type: Boolean },
-  { name: 'no-watch', type: Boolean },
+  { name: 'no-watch', type: Boolean }
 ];
 
 const myConfig = commandLineArgs(myServerDefinitions, { partial: true });

package/scripts/style-dictionary.mjs

@@ -21,6 +21,16 @@ export default {
         }
       ]
     },
+    ref: {
+      buildPath: path.join(buildPath, 'json/'),
+      transforms: ['color/css', 'size/rem'],
+      files: [
+        {
+          destination: 'muon-tokens-reference.json',
+          format: 'json/reference'
+        }
+      ]
+    },
     es6: {
       buildPath: path.join(buildPath, 'es6/'),
       transforms: ['name/cti/constant', 'color/css', 'size/rem'],

package/scripts/utils/index.mjs

@@ -12,6 +12,7 @@ import path from 'path';
 import styleConfig from '../style-dictionary.mjs';
 import colorTransform from '../../tokens/utils/transforms/color.js';
 import stringTransform from '../../tokens/utils/transforms/string.js';
+import jsonReference from '../../tokens/utils/formats/reference.js';
 
 import { fileURLToPath } from 'url';
 
@@ -138,7 +139,7 @@ const getAliasPaths = (type) => {
         obj[key] = [value];
       } else {
         // @TODO: This needs a better way to find the node_modules folder
-        obj[key] = [`node_modules/${value}`];
+        obj[key] = [`${appRoot}/node_modules/${value}`];
       }
     });
 
@@ -176,7 +177,7 @@ const getAliasPaths = (type) => {
 
 const sourceFilesAnalyzer = async () => {
   const files = await findComponents();
-  const paths = await getAliasPaths('glob');
+  const paths = getAliasPaths('glob');
   const options = {
     noEmitOnError: false,
     allowJs: true,
@@ -206,7 +207,8 @@ const sourceFilesAnalyzer = async () => {
     verbose: true,
     config: {
       format: 'json',
-      discoverNodeModules: true
+      discoverNodeModules: true,
+      excludedDeclarationNames: ['ScopedElementsMixin']
     }
   }));
 
@@ -234,6 +236,8 @@ const styleDictionary = async () => {
 
   const styleDict = StyleDictionary.extend(styleConfig);
 
+  styleDict.registerFormat(jsonReference);
+
   styleDict.registerFormat({
     name: 'css/fonts',
     formatter: cssFontTemplate

package/tests/scripts/utils/test.json

@@ -0,0 +1,9 @@
+{
+  "components": {
+    "included": "inputter,card,image"
+  },
+  "tokens": {
+    "dir": ["tokens/*.json"],
+    "theme": "default"
+  }
+}

package/tests/scripts/utils/utils-test.js

@@ -0,0 +1,134 @@
+const testRunner = require('ava');
+const sinon = require('sinon');
+const appRoot = require('app-root-path');
+
+let utilsLibrary;
+testRunner.before(async () => {
+  await import('../../../scripts/utils/index.mjs').then((utils) => {
+    utilsLibrary = utils;
+  });
+});
+
+testRunner('filterPathToCustomElements default', async (t) => {
+  const componentList = await utilsLibrary.filterPathToCustomElements('all');
+  t.is(componentList, '*');
+});
+
+testRunner('filterPathToCustomElements default array', async (t) => {
+  const componentList = await utilsLibrary.filterPathToCustomElements(['all']);
+  t.is(componentList, '*');
+});
+
+testRunner('filterPathToCustomElements single component', async (t) => {
+  const componentList = await utilsLibrary.filterPathToCustomElements('inputter');
+  t.is(componentList, 'inputter');
+});
+
+testRunner('filterPathToCustomElements single component in array', async (t) => {
+  const componentList = await utilsLibrary.filterPathToCustomElements(['inputter']);
+  t.is(componentList, 'inputter');
+});
+
+testRunner('filterPathToCustomElements multiple component', async (t) => {
+  const componentList = await utilsLibrary.filterPathToCustomElements(['inputter', 'image']);
+  t.is(componentList, '{inputter,image}');
+});
+
+testRunner('getConfig default file and root', async (t) => {
+  const config = utilsLibrary.getConfig();
+  t.true(config !== undefined);
+});
+
+testRunner('getConfig new file default root', async (t) => {
+  const config = utilsLibrary.getConfig('browserstack.json');
+  t.true(config !== undefined);
+});
+
+testRunner('getConfig config file not exist', async (t) => {
+  sinon.stub(process, 'exit');
+  utilsLibrary.getConfig('test.json');
+  t.true(process.exit.called);
+  t.true(process.exit.calledWith(1));
+});
+
+testRunner('getConfig config file', async (t) => {
+  const config = utilsLibrary.getConfig('tests/scripts/utils/test.json');
+  t.true(config !== undefined);
+});
+
+const componentsDefinitionMacro = async (t, expected) => {
+  const componentDefinition = await utilsLibrary.componentDefiner();
+  t.true(componentDefinition !== undefined);
+  t.true(componentDefinition.indexOf(`import '@webcomponents/scoped-custom-element-registry';`) > -1);
+  Object.keys(expected).forEach((component) => {
+    t.true(componentDefinition.indexOf(`import { ${expected[component]} } from '${process.cwd()}/components/${component}/src/${component}-component.js';`) > -1);
+    t.true(componentDefinition.indexOf(`customElements.define('muon-${component}', ${expected[component]});`) > -1);
+  });
+};
+componentsDefinitionMacro.title = (providedTitle, expected) => `${providedTitle} => ${Object.keys(expected)}`;
+
+testRunner('componentDefiner', componentsDefinitionMacro, { card: 'Card', cta: 'Cta', detail: 'Detail', form: 'Form', icon: 'Icon', inputter: 'Inputter', image: 'Image' });
+
+testRunner('getAliasPath glob', async (t) => {
+  const alias = utilsLibrary.getAliasPaths('glob');
+
+  t.deepEqual(alias, {
+    '@muon/components/*': [`${appRoot}/node_modules/@muonic/muon/components/*`],
+    '@muon/mixins/*': [`${appRoot}/node_modules/@muonic/muon/mixins/*`],
+    '@muon/directives/*': [`${appRoot}/node_modules/@muonic/muon/directives/*`],
+    '@muon/utils/*': [`${appRoot}/node_modules/@muonic/muon/utils/*`],
+    '@muon/tokens': [`${appRoot}/node_modules/@muonic/muon/build/tokens/es6/muon-tokens`]
+  });
+});
+
+testRunner('getAliasPath regex', async (t) => {
+  const alias = utilsLibrary.getAliasPaths('regex');
+  t.deepEqual(alias, [
+    {
+      find: /^@muon\/components\/(.*)$/,
+      replacement: '@muonic/muon/components/$1'
+    },
+    {
+      find: /^@muon\/mixins\/(.*)$/,
+      replacement: '@muonic/muon/mixins/$1'
+    },
+    {
+      find: /^@muon\/directives\/(.*)$/,
+      replacement: '@muonic/muon/directives/$1'
+    },
+    {
+      find: /^@muon\/utils\/(.*)$/,
+      replacement: '@muonic/muon/utils/$1'
+    },
+    {
+      find: /^@muon\/tokens$/,
+      replacement: '@muonic/muon/build/tokens/es6/muon-tokens'
+    }
+  ]);
+});
+
+testRunner('sourceFilesAnalyzer', async (t) => {
+  const result = await utilsLibrary.sourceFilesAnalyzer();
+  const jsonResult = JSON.parse(result);
+
+  const components = ['card', 'cta', 'detail', 'form', 'icon', 'image', 'inputter', 'inputter-detail'];
+  const propertiesMap = {
+    card: ['standardTemplate', 'image', 'alt', 'background', 'type'],
+    cta: ['href', 'standardTemplate', 'submitTemplate', 'resetTemplate', 'loading', 'loadingMessage', 'disabled', 'icon', 'type'],
+    detail: ['icon', 'standardTemplate', 'open', 'type'],
+    form: ['standardTemplate', 'type'],
+    icon: ['size', 'sizes', 'iconSize', 'standardTemplate', 'name', 'category', 'allSizes', 'url', 'describe', 'type'],
+    image: ['src', 'placeholderImage', 'standardTemplate', 'background', 'backgroundsize', 'alt', 'ratio', 'placeholder', 'loading', 'type'],
+    inputter: ['helper', 'slottedStyles', 'isHelperOpen', 'isPristine', 'isDirty', 'validity', 'validationMessage', 'validation', 'disableNative', 'showMessage', 'name', 'value', 'labelID', 'heading', 'mask', 'separator', 'type'],
+    'inputter-detail': ['icon', 'standardTemplate', 'open', 'type']
+  };
+  t.deepEqual(jsonResult.tags?.map((tag) => tag.name), components);
+
+  components.forEach((component) => {
+    t.deepEqual(jsonResult.tags.filter((tag) => tag.name === component)[0].properties?.map(
+      (property) => property.name), propertiesMap[component]);
+  });
+  jsonResult.tags?.map((tag) => {
+    t.true(tag.description !== undefined, `${tag.name} description is not present`);
+  });
+});

package/tokens/utils/formats/reference.js

@@ -0,0 +1,17 @@
+module.exports = {
+  name: 'json/reference',
+  formatter: function ({ dictionary }) {
+    const tokens = dictionary.allTokens.map((token) => {
+      token.usesReference = dictionary.usesReference(token.original.value);
+      if (token.usesReference) {
+        token.references = dictionary.getReferences(token.original.value);
+      }
+
+      token.nestedName = token.path.join('.').toLowerCase();
+
+      return token;
+    });
+
+    return JSON.stringify(tokens, null, 2);
+  }
+};