@muonic/muon 0.0.2-experimental-178-7990088.0 → 0.0.2-experimental-180-b50e9e6.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.2-beta.10](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.9...v0.0.2-beta.10) (2023-05-04)
+
+
+### Bug Fixes
+
+* move adding lightdom on perform ([41e7843](https://github.com/centrica-engineering/muon/commit/41e7843f57342e84d719a86a34de0ce1862081dc))
+
 ### [0.0.2-beta.9](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.8...v0.0.2-beta.9) (2023-04-21)
 
 ### [0.0.2-beta.8](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.7...v0.0.2-beta.8) (2023-04-20)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-experimental-178-7990088.0",
+  "version": "0.0.2-experimental-180-b50e9e6.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/scripts/utils/index.mjs

@@ -61,19 +61,33 @@ const filterPathToCustomElements = async (componentsList) => {
 
 const findComponents = async () => {
   const config = getConfig();
-  const additional = config?.components?.dir;
   const componentsList = config?.components?.included;
   const pathPattern = await filterPathToCustomElements(componentsList);
   // initial Muon components
   let muonComponents = path.join(__filename, '..', '..', '..', 'components', '**', `${pathPattern}-component.js`);
+
   // additional components
+  const additional = config?.components?.dir;
   if (additional) {
-    muonComponents = `{${muonComponents},${additional}}`;
+    muonComponents = `{${muonComponents},${additional.toString()}}`;
   }
 
   return glob.sync(muonComponents).map((f) => path.resolve(f));
 };
 
+const getPrefix = () => {
+  const config = getConfig();
+  return config?.components?.prefix || 'muon';
+};
+
+const getTagFromAnalyzerResult = (result) => {
+  // @TODO: An assumption that the first component in the file is the component we are looking for
+  const tags = result.componentDefinitions[0]?.declaration?.jsDoc?.tags;
+  const tagName = tags?.filter((jsDocTag) => jsDocTag.tag === 'element')?.[0]?.comment;
+  const prefix = tags?.filter((jsDocTag) => jsDocTag.tag === 'prefix')?.[0]?.comment ?? getPrefix();
+  return { tagName, prefix };
+};
+
 const analyze = async () => {
   const files = (await findComponents()).map((file) => {
     const code = fs.readFileSync(file);
@@ -84,11 +98,12 @@ const analyze = async () => {
   const { results } = analyzeText(files);
 
   return results.map((result) => {
-    // @TODO: An assumption that the first component in the file is the component we are looking for
+    const { tagName, prefix } = getTagFromAnalyzerResult(result);
     return {
       file: result.sourceFile.fileName,
-      name: result.componentDefinitions[0].tagName,
-      exportName: result.sourceFile?.symbol?.exports?.keys()?.next()?.value
+      name: tagName,
+      exportName: result.sourceFile?.symbol?.exports?.keys()?.next()?.value,
+      elementName: `${prefix}-${tagName}`
     };
   });
 };
@@ -194,7 +209,14 @@ const sourceFilesAnalyzer = async () => {
     }
   }));
 
-  const tagNames = results?.map((result) => result.componentDefinitions[0].tagName);
+  const tagNames = results?.map((result) => {
+    const {tagName, prefix } = getTagFromAnalyzerResult(result);
+
+    const elementName = `${prefix}-${tagName}`;
+    result.componentDefinitions[0].tagName = elementName;
+    return elementName;
+  });
+
   const tagsSet = new Set(tagNames);
   if (tagsSet?.size !== tagNames?.length) {
     console.error('---------------------------------------------');
@@ -265,14 +287,12 @@ const createTokens = async () => {
 const componentDefiner = async () => {
   const config = getConfig();
   const compList = await analyze();
-  const prefix = config?.components?.prefix || 'muon';
+  const prefix = getPrefix();
   let componentDefinition = `import '@webcomponents/scoped-custom-element-registry';`;
 
-  componentDefinition += compList.map(({ file, name, exportName }) => {
-    const elName = `${prefix}-${name}`;
-
+  componentDefinition += compList.map(({ file, name, exportName, elementName }) => {
     return `import { ${exportName} } from '${file}';
-    customElements.define('${elName}', ${exportName});
+    customElements.define('${elementName}', ${exportName});
     `;
   }).join('');
 

package/storybook/stories.js

@@ -1,7 +1,6 @@
 import { staticHTML, unsafeStatic } from '@muonic/muon';
-export default (name, el) => {
-  const prefix = process.env.MUON_PREFIX;
-  const element = `${prefix}-${name}`;
+export default (name, el, prefix = process.env.MUON_PREFIX) => {
+  const element = prefix ? `${prefix}-${name}` : name;
 
   if (!customElements.get(element)) {
     customElements.define(element, el);
@@ -10,7 +9,7 @@ export default (name, el) => {
   const elName = name ? name : element;
   const defaultValues = {
     title: element,
-    component: elName,
+    component: element,
     argTypes: {
       registry: {
         table: {

package/tests/scripts/utils/cta-component.js

@@ -0,0 +1,17 @@
+import { MuonElement } from '@muonic/muon';
+
+/**
+ * A Nucleus call-to-action allows users to take action once they are ready for it.
+ *
+ * @element cta
+ * @prefix mnx
+ *
+ */
+
+export class TestCta extends MuonElement {
+  static get properties() {
+    return {
+      enabled: { type: Boolean }
+    };
+  }
+}

package/tests/scripts/utils/muon.config.prefix.override.json

@@ -0,0 +1,13 @@
+{
+  "components": {
+    "included": ["inputter" ,"cta"],
+    "dir": "tests/scripts/utils/cta-component.js"
+  },
+  "tokens": {
+    "dir": ["tokens/*.json"],
+    "theme": "default"
+  },
+  "alias": {
+    "@muon/utils/validation": "./utils/validation"
+  }
+}

package/tests/scripts/utils/muon.config.test.json

@@ -1,7 +1,7 @@
 {
   "components": {
-    "included": ["inputter" ,"card","image"],
-    "dir": "tests/scripts/utils/*-component.js"
+    "included": ["inputter" ,"card", "image"],
+    "dir": "tests/scripts/utils/card-component.js"
   },
   "tokens": {
     "dir": ["tokens/*.json"],

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

@@ -179,15 +179,15 @@ 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 components = ['muon-card', 'muon-cta', 'muon-detail', 'muon-form', 'muon-icon', 'muon-image', 'muon-inputter', 'inputter-detail'];
   const propertiesMap = {
-    card: ['classes', 'inlineStyles', 'standardTemplate', 'image', 'alt', 'background', 'type'],
-    cta: ['href', 'classes', 'inlineStyles', 'standardTemplate', 'submitTemplate', 'resetTemplate', 'loading', 'loadingMessage', 'disabled', 'icon', 'type'],
-    detail: ['icon', 'classes', 'inlineStyles', 'standardTemplate', 'open', 'type'],
-    form: ['standardTemplate', 'type'],
-    icon: ['size', 'classes', 'inlineStyles', 'sizes', 'iconSize', 'standardTemplate', 'name', 'category', 'allSizes', 'describe', 'type'],
-    image: ['src', 'classes', 'inlineStyles', 'placeholderImage', 'standardTemplate', 'background', 'backgroundsize', 'alt', 'ratio', 'placeholder', 'loading', 'type'],
-    inputter: ['helper', 'classes', 'inlineStyles', 'slottedStyles', 'isHelperOpen', 'isPristine', 'isDirty', 'validity', 'validationMessage', 'validation', 'disableNative', 'showMessage', 'name', 'value', 'labelID', 'heading', 'mask', 'separator', 'type'],
+    'muon-card': ['classes', 'inlineStyles', 'standardTemplate', 'image', 'alt', 'background', 'type'],
+    'muon-cta': ['href', 'classes', 'inlineStyles', 'standardTemplate', 'submitTemplate', 'resetTemplate', 'loading', 'loadingMessage', 'disabled', 'icon', 'type'],
+    'muon-detail': ['icon', 'classes', 'inlineStyles', 'standardTemplate', 'open', 'type'],
+    'muon-form': ['standardTemplate', 'type'],
+    'muon-icon': ['size', 'classes', 'inlineStyles', 'sizes', 'iconSize', 'standardTemplate', 'name', 'category', 'allSizes', 'describe', 'type'],
+    'muon-image': ['src', 'classes', 'inlineStyles', 'placeholderImage', 'standardTemplate', 'background', 'backgroundsize', 'alt', 'ratio', 'placeholder', 'loading', 'type'],
+    'muon-inputter': ['helper', 'classes', 'inlineStyles', 'slottedStyles', 'isHelperOpen', 'isPristine', 'isDirty', 'validity', 'validationMessage', 'validation', 'disableNative', 'showMessage', 'name', 'value', 'labelID', 'heading', 'mask', 'separator', 'type'],
     'inputter-detail': ['icon', 'classes', 'inlineStyles', 'standardTemplate', 'open', 'type']
   };
   t.deepEqual(jsonResult.tags?.map((tag) => tag.name).sort(), components.sort());
@@ -201,6 +201,33 @@ testRunner('sourceFilesAnalyzer', async (t) => {
   });
 });
 
+testRunner('sourceFilesAnalyzer with prefix override', async (t) => {
+  const stub = await esmock('../../../scripts/utils/index.mjs', {
+    '../../../scripts/utils/config.mjs': {
+      getConfig: (configFile) => JSON.parse(fs.readFileSync('tests/scripts/utils/muon.config.prefix.override.json').toString())
+    }
+  });
+  const result = await stub.sourceFilesAnalyzer();
+  const jsonResult = JSON.parse(result);
+
+  const components = ['muon-cta', 'muon-inputter', 'inputter-detail', 'mnx-cta'];
+  const propertiesMap = {
+    'muon-cta': ['href', 'classes', 'inlineStyles', 'standardTemplate', 'submitTemplate', 'resetTemplate', 'loading', 'loadingMessage', 'disabled', 'icon', 'type'],
+    'muon-inputter': ['helper', 'classes', 'inlineStyles', 'slottedStyles', 'isHelperOpen', 'isPristine', 'isDirty', 'validity', 'validationMessage', 'validation', 'disableNative', 'showMessage', 'name', 'value', 'labelID', 'heading', 'mask', 'separator', 'type'],
+    'inputter-detail': ['icon', 'classes', 'inlineStyles', 'standardTemplate', 'open', 'type'],
+    'mnx-cta': ['enabled', 'type']
+  };
+  t.deepEqual(jsonResult.tags?.map((tag) => tag.name).sort(), components.sort());
+
+  components.forEach((component) => {
+    t.deepEqual(jsonResult.tags.filter((tag) => tag.name === component)[0].properties?.map(
+      (property) => property.name), propertiesMap[component], component);
+  });
+  jsonResult.tags?.map((tag) => {
+    t.true(tag.description !== undefined, `${tag.name} description is not present`);
+  });
+});
+
 testRunner('sourceFilesAnalyzer error', async (t) => {
   const stub = await esmock('../../../scripts/utils/index.mjs', {
     '../../../scripts/utils/config.mjs': {
@@ -223,9 +250,9 @@ testRunner('sourceFilesAnalyzer single file', async (t) => {
   const result = await stub.sourceFilesAnalyzer();
   const jsonResult = JSON.parse(result);
 
-  const components = ['card'];
+  const components = ['muon-card'];
   const propertiesMap = {
-    card: ['classes', 'inlineStyles', 'standardTemplate', 'image', 'alt', 'background', 'type'],
+    'muon-card': ['classes', 'inlineStyles', 'standardTemplate', 'image', 'alt', 'background', 'type'],
   };
   t.deepEqual(jsonResult.tags?.map((tag) => tag.name), components);