chore: DLT-1941 add dialtone combinator package

.markdownlintignore

@@ -1,3 +1,4 @@
 CHANGELOG.md
 node_modules
 dist
+packages/combinator

.stylelintignore

@@ -1,2 +1,3 @@
 packages/dialtone-css/lib/build/less/utilities
 packages/dialtone-css/lib/build/less/dialtone-reset.less
+packages/combinator

apps/dialtone-documentation/docs/.vuepress/baseComponents/ComponentCombinator.vue

@@ -1,51 +1,20 @@
 <template>
-  <div v-if="component && documentation">
-    <div class="d-d-flex d-mt64 d-h628">
-      <dtc-combinator
-        :documentation="documentation"
-        :component="component"
-        :library="library"
-        :variants="variants"
-      />
-    </div>
-    <ul
-      v-if="hasBlueprints"
-      class="d-ls-reset d-mt64 d-bgc-black-025 d-ba d-bar4"
-    >
-      <template
-        v-for="(variant, name) in variants"
-        :key="name"
-      >
-        <dtc-section
-          :heading="capitalize(name)"
-          :open="false"
-        >
-          <div class="d-d-flex d-hmx332">
-            <dtc-combinator
-              :documentation="documentation"
-              :component="component"
-              :library="library"
-              :variants="{ default: variant }"
-              root-class="d-baw0"
-              blueprint
-            />
-          </div>
-        </dtc-section>
-      </template>
-    </ul>
-  </div>
+  <dtc-combinator
+    :component="component"
+    :library="library"
+    :documentation="componentDocumentation"
+  />
 </template>
 
 <script>
-import { capitalize, resolveComponent } from 'vue';
-
 export default {
   name: 'ComponentCombinator',
 
   inject: [
     'dialtoneComponents',
+    'dialtoneComponentsDocumentation',
     'dialtoneIcons',
-    'variantBank',
+    'dialtoneIllustrations',
   ],
 
   props: {
@@ -60,58 +29,24 @@ export default {
     },
   },
 
-  data () {
-    return {
-      documentation: null,
-      iconLibrary: null,
-    };
-  },
-
   computed: {
     component () {
-      return resolveComponent(this.componentName);
+      return this.dialtoneComponents[this.componentName];
     },
 
-    variants () {
-      switch (this.componentName) {
-        case 'DtAvatar': return {
-          default: {
-            slots: {
-              default: {
-                initialValue: '<img src="/assets/images/person.png" alt="Avatar image">',
-              },
-            },
-          },
-        };
-        default: return this.variantBank[this.componentName];
-      }
+    componentDocumentation () {
+      return this.dialtoneComponentsDocumentation.find(
+        componentInfo => componentInfo.displayName === this.componentName,
+      );
     },
 
     library () {
       return {
-        ...Object.fromEntries(this.dialtoneComponents.map(componentName => {
-          return [componentName, resolveComponent(componentName)];
-        })),
-
-        ...Object.fromEntries(this.dialtoneIcons.map(componentName => {
-          return [componentName, resolveComponent(componentName)];
-        })),
+        ...this.dialtoneComponents,
+        ...this.dialtoneIcons,
+        ...this.dialtoneIllustrations,
       };
     },
-
-    hasBlueprints () {
-      return this.showBlueprints && Object.keys(this.variants).length > 0;
-    },
-  },
-
-  async beforeCreate () {
-    this.documentation = (
-      await import('@dialpad/dialtone-vue/component-documentation.json')
-    ).default;
-  },
-
-  methods: {
-    capitalize,
   },
 };
 </script>

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

@@ -1,11 +1,12 @@
 import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
 import { defineUserConfig } from 'vuepress';
-import { getDirname, path } from '@vuepress/utils';
+import { getDirname } from '@vuepress/utils';
 import { viteBundler } from '@vuepress/bundler-vite';
 import viteSvgLoader from 'vite-svg-loader';
 import { googleAnalyticsPlugin } from '@vuepress/plugin-google-analytics';
 import { seoPlugin } from 'vuepress-plugin-seo2';
 import anchor from 'markdown-it-anchor';
+import path from 'path';
 
 const sidebar = require('../_data/site-nav.json');
 const { dialtoneVuepressTheme } = require('./theme');
@@ -55,15 +56,18 @@ export default defineUserConfig({
       },
       resolve: {
         alias: {
-          vue$: 'vue/dist/vue.esm-bundler.js',
+          'vue/server-renderer': path.resolve(__dirname, '../../node_modules/vue/server-renderer/index.js'),
+          vue: path.resolve(__dirname, '../../node_modules/vue/dist/vue.esm-bundler.js'),
         },
       },
+      define: {
+        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
+      },
     },
     vuePluginOptions: {
       template: {
         compilerOptions: {
           whitespace: 'preserve',
-          // isCustomElement: (tag) => tag.startsWith('dt-'),
         },
       },
     },

apps/dialtone-documentation/docs/.vuepress/theme/client.js

@@ -10,6 +10,7 @@ import { flushPromises } from '@workspaceRoot/common/utils';
 // CSS
 import '@dialpad/dialtone-css/lib/dist/dialtone.css';
 import '@dialpad/dialtone-vue/css';
+import '@dialpad/dialtone-combinator/css';
 import './assets/less/dialtone-docs.less';
 import './assets/less/dialtone-syntax.less';
 
@@ -41,7 +42,8 @@ export default defineClientConfig({
     if (!__VUEPRESS_SSR__) {
       await initOverlayScrollbars();
       await registerDialtoneVue(app);
-      // await registerDialtoneCombinator(app);
+      await registerDialtoneCombinator(app);
+      await registerDialtoneIcons(app);
     }
     router.options.scrollBehavior = async (to, from, savedPosition) => {
       if (to.hash) {
@@ -75,36 +77,56 @@ export default defineClientConfig({
 
 async function registerDialtoneVue (app) {
   const module = await import('@dialpad/dialtone-vue');
+  const documentation = await import('@dialpad/dialtone-vue/component-documentation.json');
+
   const dialtoneConstants = [];
   const dialtoneComponents = [];
+  const dialtoneUtils = [];
 
   Object.keys(module).forEach(key => {
     if (/^[A-Z_]+$/.test(key)) {
       dialtoneConstants[key] = module[key];
     } else if (key.endsWith('Directive')) {
       app.use(module[key]);
-    } else {
+    } else if (key.startsWith('Dt')) {
       dialtoneComponents[key] = module[key];
       app.component(key, module[key]);
+    } else {
+      dialtoneUtils[key] = module[key];
     }
   });
 
+  app.provide('dialtoneUtils', dialtoneUtils);
   app.provide('dialtoneComponents', dialtoneComponents);
+  app.provide('dialtoneComponentsDocumentation', documentation.default);
 
   window.DIALTONE_CONSTANTS = dialtoneConstants;
 
   // setup custom emojis
-  const { setCustomEmojiUrl, setCustomEmojiJson } = dialtoneComponents;
+  const { setCustomEmojiUrl, setCustomEmojiJson } = dialtoneUtils;
   setCustomEmojiUrl('https://github.githubassets.com/images/icons/emoji/');
   setCustomEmojiJson(customEmojis);
 }
 
-// This is commented because we are currently not using the combinator and it's
-// adding some wrong styles to the page for the dt-list-item component.
+async function registerDialtoneCombinator (app) {
+  const { DtcCombinator } = await import('@dialpad/dialtone-combinator');
+  app.component('DtcCombinator', DtcCombinator);
+}
+
+async function registerDialtoneIcons (app) {
+  const icons = await import('@dialpad/dialtone-icons/vue3');
 
-// async function registerDialtoneCombinator (app) {
-//   const module = await import('@dialpad/dialtone-combinator');
-//   app.component('DtcCombinator', module.DtcCombinator);
-//   app.component('DtcSection', module.DtcSection);
-//   app.provide('variantBank', module.variantBank());
-// }
+  const dialtoneIcons = [];
+  const dialtoneIllustrations = [];
+
+  Object.keys(icons).forEach(key => {
+    if (key.startsWith('DtIcon')) {
+      dialtoneIcons[key] = icons[key];
+    } else if (key.startsWith('DtIllustration')) {
+      dialtoneIllustrations[key] = icons[key];
+    }
+  });
+
+  app.provide('dialtoneIcons', dialtoneIcons);
+  app.provide('dialtoneIllustrations', dialtoneIllustrations);
+}

apps/dialtone-documentation/docs/components/button.md

@@ -8,11 +8,7 @@ storybook: https://dialtone.dialpad.com/vue/?path=/story/components-button--defa
 figma_url: https://www.figma.com/file/2adf7JhZOncRyjYiy2joil/DT-Core%3A-Components-7?node-id=8923%3A20208&viewport=-1695%2C219%2C0.19&t=xHutRjwo1o5zMTgT-11
 ---
 
-<code-well-header>
-  <dt-button> Place Call </dt-button>
-</code-well-header>
-
-<!-- <component-combinator component-name="DtButton" /> -->
+<component-combinator component-name="DtButton"></component-combinator>
 
 ## Usage
 

apps/dialtone-documentation/docs/components/datepicker.md

@@ -577,8 +577,8 @@ The formatted numerical date string.
 <script setup>
 import { ref, inject } from 'vue';
 
-const dialtoneComponents = inject('dialtoneComponents');
-const { formatLong, formatMedium, formatShort, formatNoYear, formatNumerical } = dialtoneComponents;
+const dialtoneUtils = inject('dialtoneUtils');
+const { formatLong, formatMedium, formatShort, formatNoYear, formatNumerical } = dialtoneUtils;
 
 const locale = 'en-US';
 const changeToLabel = 'Change to';

apps/dialtone-documentation/package.json

@@ -46,6 +46,7 @@
   },
   "type": "module",
   "devDependencies": {
+    "@dialpad/dialtone-combinator": "workspace:*",
     "@dialpad/dialtone-css": "workspace:*",
     "@dialpad/dialtone-icons": "workspace:*",
     "@dialpad/dialtone-tokens": "workspace:*",

apps/dialtone-documentation/project.json

@@ -7,17 +7,16 @@
         "dialtone-css:build",
         "dialtone-icons:build",
         "dialtone-tokens:build",
-        "dialtone-vue3:build"
+        "dialtone-vue3:build",
+        "dialtone-combinator:build"
       ],
       "inputs": [
         "{projectRoot}/docs/**/*",
         "!{projectRoot}/docs/.vuepress/.cache",
         "!{projectRoot}/docs/.vuepress/.temp",
         "!{projectRoot}/docs/.vuepress/dist"
       ],
-      "outputs": [
-        "{projectRoot}/docs/.vuepress/dist"
-      ],
+      "outputs": ["{projectRoot}/docs/.vuepress/dist"],
       "options": {
         "cwd": "{projectRoot}",
         "command": "vuepress build docs"
@@ -29,13 +28,14 @@
         "dialtone-css:build",
         "dialtone-icons:build",
         "dialtone-tokens:build",
-        "dialtone-vue3:build"
+        "dialtone-vue3:build",
+        "dialtone-combinator:build"
       ],
       "options": {
         "cwd": "{projectRoot}",
         "commands": [
           {
-            "command": "nx watch --projects=dialtone-css,dialtone-icons,dialtone-tokens,dialtone-vue3 --includeDependentProjects -- nx run \\$NX_PROJECT_NAME:build"
+            "command": "nx watch --projects=dialtone-css,dialtone-icons,dialtone-tokens,dialtone-vue3,dialtone-combinator --includeDependentProjects -- nx run \\$NX_PROJECT_NAME:build"
           },
           {
             "command": "vuepress dev docs"

lint-staged.config.cjs

@@ -3,9 +3,9 @@ module.exports = {
     'pnpm exec eslint --fix',
   ],
   '*.less': [
-    'pnpm exec stylelint --fix'
+    'pnpm exec stylelint --fix --allow-empty-input',
   ],
   '*.{md, mdx}': [
-    'pnpm exec markdownlint'
-  ]
+    'pnpm exec markdownlint',
+  ],
 };

packages/combinator/.eslintignore

@@ -0,0 +1,5 @@
+# build
+dist
+
+# dependencies
+node_modules