chore: add support for commonJS to esm

apps/dialtone-documentation/.eslintrc.js → apps/dialtone-documentation/.eslintrc.cjs

@@ -24,6 +24,9 @@ module.exports = {
     'max-len': ['error', {
       code: 120,
       tabWidth: 2,
+      ignoreComments: true,
+      ignoreStrings: true,
+      ignoreTemplateLiterals: true,
     }],
     'prefer-promise-reject-errors': ['error', {
       allowEmptyReject: true,

apps/dialtone-documentation/docs/.vuepress/common/constants.js

@@ -12,45 +12,6 @@ export const DIALTONE_CHANGELOGS = {
   },
 };
 
-/**
-* TECH DEBT: the following constants are duplicated from postcss/constants.js
-* There's a ticket to adress this: https://dialpad.atlassian.net/browse/DLT-1288
-*/
-export const SHADOW_VARIABLES = [
-  'Small',
-  'Medium',
-  'Large',
-  'ExtraLarge',
-  'Card',
-  'Focus',
-  'FocusInset',
-].join('|');
-
-export const TYPOGRAPHY_VARIABLES = [
-  'Body',
-  'BodyCompact',
-  'Headline',
-  'HeadlineEyebrow',
-  'HeadlineSoft',
-  'HeadlineCompact',
-  'HeadlineCompactSoft',
-  'Label',
-  'LabelPlain',
-  'LabelCompact',
-  'LabelCompactPlain',
-  'Helper',
-  'Code',
-].join('|');
-
-export const TYPOGRAPHY_SIZES = [
-  'Small',
-  'Base',
-  'Medium',
-  'Large',
-  'ExtraLarge',
-  'ExtraExtraLarge',
-].join('|');
-
 export default {
   DIALTONE_CHANGELOGS,
 };

apps/dialtone-documentation/docs/.vuepress/common/token-utilities.js

@@ -1,73 +1,11 @@
-/**
-* TECH DEBT: this file is a not exact duplication of postcss/dialtone-generators.js and postcss/helpers.js
-* There's a ticket to adress this: https://dialpad.atlassian.net/browse/DLT-1288
-*/
-import { SHADOW_VARIABLES, TYPOGRAPHY_VARIABLES, TYPOGRAPHY_SIZES } from './constants';
-import dialtoneTokensLight from '@dialpad/dialtone-tokens/dist/tokens-light.json';
-import dialtoneTokensDark from '@dialpad/dialtone-tokens/dist/tokens-dark.json';
-
-const pascalToKebabCase = (string) => {
-  return string.split(/(?=[A-Z]|[0-9]{3,}?)/).join('-').toLowerCase();
-};
-
-/**
-* Extract the box shadow tokens from dialtone-tokens
-* based on SHADOW_VARIABLES.
-* Performs the name parsing e.g. FocusInset -> focus-inset and
-* returns an array containing the shadowName as key and
-* the max token index + 1 as value
-*
-* @returns {Object}
-*/
-const extractShadows = (mode) => {
-  const tokens = mode === 'light' ? dialtoneTokensLight : dialtoneTokensDark;
-  const shadowsRegex = new RegExp(`dtShadow(${SHADOW_VARIABLES})([0-9])(\\w+)`);
-  return Object.keys(tokens)
-    .filter(key => shadowsRegex.test(key))
-    .reduce((shadows, shadow) => {
-      const [name, index] = shadow
-        .split(shadowsRegex)
-        .filter(chunk => !!chunk);
-
-      const shadowName = pascalToKebabCase(name);
-
-      shadows[shadowName] = Number.parseInt(index) + 1;
-      return shadows;
-    }, {});
-};
-
-/**
-* Extract the typography tokens from dialtone-tokens.
-* Performs the name parsing e.g. BodySmall -> body-small and
-* returns a set containing typographyNames
-*
-* @returns {Set}
-*/
-const extractTypographies = () => {
-  // eslint-disable-next-line max-len
-  const typographiesRegex = new RegExp(`dtTypography(${TYPOGRAPHY_VARIABLES})(${TYPOGRAPHY_SIZES})(\\w+)`);
-  return Object.keys(dialtoneTokensLight)
-    .filter(key => typographiesRegex.test(key))
-    .reduce((typographies, typography) => {
-      const [name, size] = typography
-        .split(typographiesRegex)
-        .filter(chunk => !!chunk);
-
-      const typographyName = pascalToKebabCase(name);
-      const typographySize = pascalToKebabCase(size);
-
-      typographies.add(`${typographyName}-${typographySize}`);
-
-      return typographies;
-    }, new Set());
-};
+import Helpers from '@dialpad/dialtone/postcss/helpers.cjs';
 
 /**
  * Compose typography tokens
  */
 export function getComposedTypographyTokens () {
   const tokens = [];
-  const dialtoneTypographies = extractTypographies();
+  const dialtoneTypographies = Helpers.extractTypographies();
   dialtoneTypographies
     .forEach(typographyName => {
       const composedVar = `--dt-typography-${typographyName}`;
@@ -84,7 +22,7 @@ export function getComposedTypographyTokens () {
  */
 export function getComposedShadowTokens (theme) {
   const tokens = [];
-  const dialtoneShadows = extractShadows(theme);
+  const dialtoneShadows = Helpers.extractShadows(theme);
   Object
     .keys(dialtoneShadows)
     .forEach(shadowName => {

apps/dialtone-documentation/docs/.vuepress/config.js

@@ -1,3 +1,4 @@
+import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
 import { defineUserConfig } from 'vuepress';
 import { getDirname, path } from '@vuepress/utils';
 import { viteBundler } from '@vuepress/bundler-vite';
@@ -45,7 +46,7 @@ export default defineUserConfig({
 
   bundler: viteBundler({
     viteOptions: {
-      plugins: [viteSvgLoader()],
+      plugins: [viteSvgLoader(), viteCommonjs()],
       css: {
         devSourcemap: true,
       },

apps/dialtone-documentation/package.json

@@ -49,19 +49,21 @@
     "lint:docs": "markdownlint '**/*.md'",
     "start": "vuepress dev docs"
   },
+  "type": "module",
   "gitHooks": {
     "pre-commit": "lint-staged"
   },
   "dependencies": {
-    "@dialpad/dialtone-icons": "workspace:^",
-    "@dialpad/dialtone": "workspace:^"
+    "@dialpad/dialtone": "workspace:^",
+    "@dialpad/dialtone-icons": "workspace:^"
   },
   "devDependencies": {
     "@dialpad/dialtone-combinator": "^0.3.1",
     "@dialpad/dialtone-tokens": "workspace:^",
     "@dialpad/dialtone-vue": "^3.94.2",
     "@dialpad/postcss-responsive-variations": "^1.1.5",
     "@docsearch/js": "^3.5.1",
+    "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@toycode/markdown-it-class": "^1.2.4",
     "@vuepress/bundler-vite": "2.0.0-beta.60",
     "@vuepress/client": "2.0.0-beta.60",

packages/dialtone/.eslintrc.js → packages/dialtone/.eslintrc.cjs

@@ -24,6 +24,9 @@ module.exports = {
     'max-len': ['error', {
       code: 120,
       tabWidth: 2,
+      ignoreComments: true,
+      ignoreStrings: true,
+      ignoreTemplateLiterals: true,
     }],
     'prefer-promise-reject-errors': ['error', {
       allowEmptyReject: true,

packages/dialtone/gulpfile.js → packages/dialtone/gulpfile.cjs

@@ -62,15 +62,15 @@ const less = settings.styles ? require('gulp-less') : null;
 const postCSSResponsify = settings.styles
   ? require('@dialpad/postcss-responsive-variations')({ breakpoints, classes })
   : null;
-const postCSSDialtoneGenerator = settings.styles ? require('./postcss/dialtone-generators') : null;
+const postCSSDialtoneGenerator = settings.styles ? require('./postcss/dialtone-generators.cjs') : null;
 const sourcemaps = settings.styles ? require('gulp-sourcemaps') : null;
 const autoprefixer = settings.styles ? require('autoprefixer') : null;
 
 //  @@ SVGS
 const path = settings.svgs ? require('path') : null;
 const svgmin = settings.svgs ? require('gulp-svgmin') : null;
 const replace = settings.svgs ? require('gulp-replace') : null;
-const svgStrokeToFill = settings.svgs ? require('./svg-stroke-to-fill') : null;
+const svgStrokeToFill = settings.svgs ? require('./svg-stroke-to-fill.cjs') : null;
 const categories = [
   'alerts',
   'arrows',
@@ -98,7 +98,7 @@ const paths = {
     libSvg: './lib/dist/svg/**/*',
     libVueIcons: './lib/dist/vue/**/*',
     libFonts: './dist/fonts/**/*',
-    libJS: './lib/dist/js/**/*.{mjs,js}',
+    libJS: './lib/dist/js/**/*.{mjs,js,cjs}',
   },
   scripts: {
     input: './lib/build/js/**/*',