@muonic/muon 0.0.2-beta.0

package/scripts/style-dictionary.mjs

@@ -0,0 +1,64 @@
+import path from 'path';
+
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+
+const prefix = 'mn';
+const root = path.join(__filename, '..', '..');
+const buildPath = path.join(root, 'build', 'tokens');
+
+export default {
+  include: [root + '/tokens/**/*.js', root + '/tokens/**/*.json', root + '/tokens/*.json', root + '/components/**/**/config-tokens.json', root + '/components/**/**/design-tokens.json'],
+  platforms: {
+    js: {
+      buildPath: path.join(buildPath, 'es6/'),
+      transforms: ['color/css', 'size/rem'],
+      files: [
+        {
+          destination: 'muon-tokens-module.js',
+          format: 'es6/module'
+        }
+      ]
+    },
+    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'],
+      files: [
+        {
+          destination: 'muon-tokens.js',
+          format: 'javascript/es6'
+        },
+        {
+          destination: 'muon-tokens.mjs',
+          format: 'javascript/es6'
+        }
+      ]
+    },
+    'font-face': {
+      buildPath: path.join(buildPath, 'css/'),
+      files: [
+        {
+          destination: prefix + '-fonts.css',
+          format: 'css/fonts'
+        }
+      ],
+      filter: {
+        attributes: {
+          category: 'asset',
+          type: 'font'
+        }
+      }
+    }
+  }
+};

package/scripts/utils/config.mjs

@@ -0,0 +1,30 @@
+import path from 'path';
+import appRoot from 'app-root-path';
+import fs from 'fs';
+
+const getConfig = (configFile = 'muon.config.json') => {
+  let config = {};
+  try {
+    let configPath = path.join(process.cwd(), configFile);
+
+    if (!fs.existsSync(configPath)) {
+      configPath = path.join(`${appRoot}/${configFile}`);
+    }
+    config = JSON.parse(fs.readFileSync(configPath).toString());
+  } catch (e) {
+    console.error('Missing config, is this the right folder?', e);
+    process.exit(1);
+  }
+
+  return config;
+};
+
+const getDestination = () => {
+  const config = getConfig();
+  return config?.destination || 'dist';
+};
+
+export {
+  getConfig,
+  getDestination
+};

package/scripts/utils/index.mjs

@@ -0,0 +1,283 @@
+import ts from 'typescript';
+import { analyzeText, analyzeSourceFile, transformAnalyzerResult } from 'web-component-analyzer';
+import StyleDictionary from 'style-dictionary';
+import formatHelpers from 'style-dictionary/lib/common/formatHelpers/index.js';
+import _ from 'lodash';
+import appRoot from 'app-root-path';
+import glob from 'glob';
+import globToRegExp from 'glob-to-regexp';
+import fs from 'fs';
+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 { getConfig, getDestination } from './config.mjs';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const cleanup = (destination, cleanOnRollup = false) => {
+  return new Promise((resolve) => {
+    const cemFilePath = path.join(destination, 'custom-elements.json');
+    const buildPath = path.join(__filename, '..', '..', '..', 'build');
+
+    if (fs.existsSync(destination)) {
+      if (cleanOnRollup) {
+        // eslint-disable-next-line no-unused-expressions
+        fs.rmSync(cemFilePath, { force: true });
+      } else {
+        fs.rmSync(destination, { force: true, recursive: true });
+      }
+    }
+
+    if (!fs.existsSync(destination)) {
+      fs.mkdirSync(destination);
+    }
+    if (!cleanOnRollup) {
+      fs.rmSync(buildPath, { force: true, recursive: true });
+      fs.mkdirSync(buildPath);
+    }
+    return resolve();
+  });
+};
+
+const filterPathToCustomElements = async (componentsList) => {
+  let pathPattern = '*';
+  if (Array.isArray(componentsList) && componentsList?.length > 0) {
+    if (componentsList.length > 1) {
+      pathPattern = `{${componentsList.toString()}}`;
+    } else {
+      pathPattern = componentsList[0] === 'all' ? '*' : componentsList[0]; // single component defined within array
+    }
+  } else {
+    pathPattern = componentsList === 'all' ? '*' : componentsList; // single component defined as string
+  }
+  return pathPattern;
+};
+
+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
+  if (additional) {
+    muonComponents = `{${muonComponents},${additional}}`;
+  }
+
+  return glob.sync(muonComponents).map((f) => path.resolve(f));
+};
+
+const analyze = async () => {
+  const files = (await findComponents()).map((file) => {
+    const code = fs.readFileSync(file);
+
+    return { fileName: file, text: code.toString() };
+  });
+
+  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
+    return {
+      file: result.sourceFile.fileName,
+      name: result.componentDefinitions[0].tagName,
+      exportName: result.sourceFile?.symbol?.exports?.keys()?.next()?.value
+    };
+  });
+};
+
+const getAliasPaths = (type) => {
+  const defaultPaths = {
+    '@muon/components/*': '@muonic/muon/components/*',
+    '@muon/mixins/*': '@muonic/muon/mixins/*',
+    '@muon/directives/*': '@muonic/muon/directives/*',
+    '@muon/utils/*': '@muonic/muon/utils/*',
+    '@muon/tokens': '@muonic/muon/build/tokens/es6/muon-tokens'
+  };
+
+  const config = getConfig();
+  const alias = config?.alias || {};
+
+  if (type === 'glob') {
+    const paths = {
+      ...alias,
+      ...defaultPaths
+    };
+    const obj = {};
+
+    Object.keys(paths).forEach((key) => {
+      const value = paths[key];
+      if (
+        value.startsWith('./') ||
+        value.startsWith('../') ||
+        value.startsWith('/')
+      ) {
+        obj[key] = [value];
+      } else {
+        // @TODO: This needs a better way to find the node_modules folder
+        obj[key] = [`${appRoot}/node_modules/${value}`];
+      }
+    });
+
+    return obj;
+  }
+
+  if (type === 'regex') {
+    const objGlobToRegexArr = (paths) => {
+      if (!paths) {
+        return [];
+      }
+
+      return Object.keys(paths).map((key) => {
+        //TODO: What happens if someone uses ** in their glob?
+        const regKey = globToRegExp(key.replaceAll('*', '{*}'), { extended: true });
+        //@TODO: See how to replace * better
+        return { find: regKey, replacement: paths[key].replaceAll('*', '$1') };
+      });
+    };
+
+    const additionalAlias = objGlobToRegexArr(config?.alias)?.map(({ find, replacement }) => {
+      return {
+        find,
+        replacement: path.join(process.cwd(), replacement)
+      };
+    }).filter((alias) => alias);
+
+    const defaultAlias = objGlobToRegexArr(defaultPaths);
+
+    return [...additionalAlias, ...defaultAlias];
+  }
+
+  return undefined;
+};
+
+const sourceFilesAnalyzer = async () => {
+  const files = await findComponents();
+  const paths = getAliasPaths('glob');
+  const options = {
+    noEmitOnError: false,
+    allowJs: true,
+    maxNodeModuleJsDepth: 3,
+    experimentalDecorators: true,
+    target: ts.ScriptTarget.Latest,
+    downlevelIteration: true,
+    module: ts.ModuleKind.ESNext,
+    strictNullChecks: true,
+    moduleResolution: ts.ModuleResolutionKind.NodeJs,
+    esModuleInterop: true,
+    noEmit: true,
+    allowSyntheticDefaultImports: true,
+    allowUnreachableCode: true,
+    allowUnusedLabels: true,
+    skipLibCheck: true,
+    baseUrl: '.',
+    paths
+  };
+  const program = ts.createProgram(files, options);
+  const sourceFiles = program.getSourceFiles().filter((sf) => files.includes(sf.fileName));
+
+  const results = sourceFiles.map((sourceFile) => analyzeSourceFile(sourceFile, {
+    ts,
+    program,
+    verbose: true,
+    config: {
+      format: 'json',
+      discoverNodeModules: true,
+      excludedDeclarationNames: ['ScopedElementsMixin']
+    }
+  }));
+
+  const tagNames = results?.map((result) => result.componentDefinitions[0].tagName);
+  const tagsSet = new Set(tagNames);
+  if (tagsSet?.size !== tagNames?.length) {
+    console.error('---------------------------------------------');
+    console.error('No two custom elements can have same tag name `%s`', tagNames);
+    console.error('---------------------------------------------');
+    process.exit(1);
+  }
+  return transformAnalyzerResult('json', results, program);
+};
+
+const styleDictionary = async () => {
+  const config = getConfig();
+
+  // Set the overriding tokens if there are any
+  if (config.tokens && config.tokens.dir) {
+    styleConfig.source = config.tokens.dir;
+  }
+
+  const tokenUtils = path.join(__dirname, '..', '..', 'tokens', 'utils');
+  const cssFontTemplate = _.template(fs.readFileSync(path.join(tokenUtils, 'templates', 'font-face.css.template')));
+
+  const styleDict = StyleDictionary.extend(styleConfig);
+
+  styleDict.registerFormat(jsonReference);
+
+  styleDict.registerFormat({
+    name: 'css/fonts',
+    formatter: cssFontTemplate
+  });
+
+  styleDict.registerFormat({
+    name: 'es6/module',
+    formatter: function ({ dictionary, file }) {
+      return formatHelpers.fileHeader({ file }) +
+        'export default ' +
+        JSON.stringify(dictionary.tokens, null, 2) + ';';
+    }
+  });
+
+  styleDict.registerTransform(stringTransform);
+  styleDict.registerTransform(colorTransform);
+
+  return styleDict;
+};
+
+const createTokens = async () => {
+  const dictionary = await styleDictionary();
+
+  return dictionary.buildAllPlatforms();
+};
+
+const componentDefiner = async () => {
+  const config = getConfig();
+  const compList = await analyze();
+  const prefix = config?.components?.prefix || 'muon';
+  let componentDefinition = `import '@webcomponents/scoped-custom-element-registry';`;
+
+  componentDefinition += compList.map(({ file, name, exportName }) => {
+    const elName = `${prefix}-${name}`;
+
+    return `import { ${exportName} } from '${file}';
+    customElements.define('${elName}', ${exportName});
+    `;
+  }).join('');
+
+  return componentDefinition;
+};
+
+const runner = async (file, overrideDestination) => {
+  const destination = overrideDestination || getDestination();
+
+  cleanup(destination).then(async () => {
+    import(file);
+  });
+};
+
+export {
+  cleanup,
+  getConfig,
+  getDestination,
+  filterPathToCustomElements,
+  createTokens,
+  componentDefiner,
+  runner,
+  sourceFilesAnalyzer,
+  getAliasPaths
+};

package/storybook/find-stories.js

@@ -0,0 +1,36 @@
+const path = require('path');
+const fs = require('fs');
+const pathIsInside = require('path-is-inside');
+
+const findStories = async (dir = process.cwd()) => {
+  const { getConfig, getDestination, filterPathToCustomElements } = await import('../scripts/utils/index.mjs');
+
+  const config = getConfig();
+  const componentsList = config?.components?.included;
+
+  if (!componentsList) {
+    return [];
+  }
+
+  const pathPattern = await filterPathToCustomElements(componentsList);
+  const patterns = path.join(__filename, '..', '..', 'components', pathPattern, 'story.js');
+
+  if (
+    pathIsInside(process.cwd(), path.join(__filename, '..', '..')) ||
+    pathIsInside(path.join(__filename, '..', '..'), process.cwd())
+  ) {
+    return [path.relative(dir, patterns)];
+  } else {
+    const destination = getDestination();
+    const symlink = path.join(destination, 'stories');
+
+    if (!fs.existsSync(symlink)) {
+      fs.symlinkSync(path.join(__filename, '..', '..', 'components'),
+        symlink, 'dir');
+    }
+
+    return [path.relative(dir, path.join(symlink, pathPattern, 'story.js'))];
+  }
+};
+
+module.exports = findStories;

package/storybook/server.config.mjs

@@ -0,0 +1,19 @@
+import { fromRollup } from '@web/dev-server-rollup';
+import { storybookPlugin } from '@web/dev-server-storybook';
+import rollupJson from '@rollup/plugin-json';
+import { serverPlugins } from '@muonic/muon/scripts/rollup-plugins.mjs';
+
+const json = fromRollup(rollupJson);
+
+export default {
+  nodeResolve: true,
+  mimeTypes: {
+    '**/*.json': 'js',
+    '**/*.css': 'js'
+  },
+  plugins: [
+    json(),
+    ...serverPlugins,
+    storybookPlugin({ type: 'web-components' })
+  ]
+};

package/storybook/stories.js

@@ -0,0 +1,86 @@
+import { staticHTML, unsafeStatic } from '@muonic/muon';
+export default (name, el) => {
+  const prefix = process.env.MUON_PREFIX;
+  const element = `${prefix}-${name}`;
+
+  if (!customElements.get(element)) {
+    customElements.define(element, el);
+  }
+
+  const elName = name ? name : element;
+  const defaultValues = {
+    title: element,
+    component: elName,
+    argTypes: {
+      registry: {
+        table: {
+          disable: true
+        }
+      },
+      renderOptions: {
+        table: {
+          disable: true
+        }
+      },
+      shadowRootOptions: {
+        table: {
+          disable: true
+        }
+      },
+      scopedElements: {
+        table: {
+          disable: true
+        }
+      },
+      slottedStyles: {
+        table: {
+          disable: true
+        }
+      }
+    }
+  };
+
+  const getTagEl = () => {
+    return unsafeStatic(element);
+  };
+
+  const dynamicArgs = (args) => {
+    const dArgs = args && Object.keys(args).map((arg) => {
+      if (arg === 'text') {
+        return undefined;
+      }
+
+      if (typeof args[arg] === 'boolean') {
+        return args[arg] === true ? arg : undefined;
+      } else if (typeof args[arg] === 'number') {
+        return `${arg}=${args[arg]}`;
+      } else if (Array.isArray(args[arg])) {
+        const arrayArgs = args[arg].map((arrayVal) => {
+          return `"${arrayVal}"`;
+        });
+        return `${arg}=[${arrayArgs}]`;
+      } else {
+        return `${arg}="${args[arg]}"`;
+      }
+    }).filter((arg) => arg).join(' ');
+
+    return unsafeStatic(dArgs);
+  };
+
+  const template = (args, inner) => {
+    const tag = getTagEl();
+    const dArgs = dynamicArgs(args);
+    return staticHTML`
+      <${tag} ${dArgs}>${inner ? inner(args) : ''}</${tag}>`;
+  };
+
+  return {
+    defaultValues,
+    element,
+    elName,
+    template,
+    getTagEl,
+    dynamicArgs
+  };
+
+};

package/storybook/tokens/color.js

@@ -0,0 +1,87 @@
+import tokens from '@muonic/muon/build/tokens/es6/muon-tokens-module.js';
+
+const colorDetails = ([key, data]) => {
+  return `
+    <div class='swatch'>
+      <div style="background: ${data.value}" class='colour slide-right'></div>
+      <div class='details ${key}-decoration'>
+        <p class='name'>
+          <span class='value'>${key}</span>
+        </p>
+        <p class='value'>
+          <span class='value'>${data.value}</span>
+        </p>
+      </div>
+    </div>`;
+};
+
+const colorLoop = (entries) => {
+  let palletteHtml = '';
+
+  for (const [key, data] of entries) {
+
+    if (data.value) {
+      palletteHtml += colorDetails([key, data]);
+    } else {
+      const entries = Object.entries(data);
+      palletteHtml += `<h2>${key}</h2>`;
+      palletteHtml += colorLoop(entries);
+      palletteHtml += `<hr>`;
+    }
+  }
+
+  return palletteHtml;
+};
+
+const generatePallette = () => {
+  const entries = Object.entries(tokens.theme.color);
+
+  return colorLoop(entries);
+};
+
+export default {
+  title: 'Tokens/Theme'
+};
+
+export const color = () => {
+  return `<div class="inner" type="page">
+  <style>
+    body {
+      padding: 2em;
+    }
+    .swatch {
+      position: relative;
+      margin: 24px;
+      min-width: 175px;
+      border: 2px solid #EEE;
+      border-radius: 8px;
+      overflow: hidden;
+      display: inline-block;
+    }
+    .swatch .colour {
+      width: 100%;
+      height: 100px;
+    }
+    .swatch .details {
+      padding: 16px;
+      background: #fff;
+    }
+    .swatch .name {
+      text-transform: capitalize;
+      font-size: 18px;
+
+    }
+    .colour-value {
+      font-size: 0.75em;
+      display: block;
+    }
+
+    h1, h2 {
+      text-transform: capitalize;
+      color: currentColor;
+    }
+  </style>
+  <h1>Colors</h1>
+  ${generatePallette()}
+</div>`;
+};

package/storybook/tokens/font.js

@@ -0,0 +1,52 @@
+import tokens from '@muonic/muon/build/tokens/es6/muon-tokens-module.js';
+
+export default {
+  title: 'Tokens/Theme'
+};
+
+const fontHTML = (key, data, type, args) => {
+  return `
+    <h3>${key} - ${data.value}</h3>
+
+    <span style="font-${type}: ${data.value}">${args.text}</span>
+  `;
+};
+
+const generate = (type, args) => {
+  const entries = Object.entries(tokens.theme.font[type]);
+  let allHTML = `<h2>${type}</h2>`;
+
+  for (const [key, data] of entries) {
+
+    if (data.value) {
+      allHTML += fontHTML(key, data, type, args);
+    }
+  }
+
+  return allHTML;
+};
+
+const generateAll = (args) => {
+  return Object.entries(tokens.theme.font).map((entry) => {
+    const key = entry[0];
+    return generate(key, args);
+  }).join('');
+};
+
+export const font = (args) => {
+  return `<div class="inner" type="page">
+  <style>
+    body {
+      padding: 2em;
+    }
+
+    h2 {
+      text-transform: capitalize;
+    }
+  </style>
+  <h1>Font</h1>
+    ${generateAll(args)}
+</div>`;
+};
+
+font.args = { text: 'The quick brown fox jumps over the lazy dog' };

package/storybook/tokens/spacer.js

@@ -0,0 +1,48 @@
+import tokens from '@muonic/muon/build/tokens/es6/muon-tokens-module.js';
+
+export default {
+  title: 'Tokens/Theme'
+};
+
+const spacerHTML = (key, data) => {
+  const size = data.value;
+  return `
+    <h2>${key}</h2>
+    <span>${size}</span>
+    <div style="width: ${size}; height: ${size};"  class="square"></div>
+  `;
+};
+
+const generateAll = () => {
+  return Object.entries(tokens.theme.spacer).map((entry) => {
+    const key = entry[0];
+    const data = entry[1];
+
+    if (data.value) {
+      return spacerHTML(key, data);
+    }
+
+    return undefined;
+  }).filter((entry) => entry).join('');
+};
+
+export const spacer = () => {
+  return `<div class="inner" type="page">
+  <style>
+    body {
+      padding: 2em;
+    }
+
+    h2 {
+      text-transform: uppercase;
+    }
+
+    .square {
+      background: #888;
+      border: 2px solid #FFF;
+    }
+  </style>
+  <h1>Spacers</h1>
+    ${generateAll()}
+</div>`;
+};