docs: separate dialtone documentation site and library (#6)

* dialtone cleanup

* move code-workspace file to project root

* separate dialtone docs from library

* stop outputting fonts to docs

apps/dialtone-documentation/.eslintignore

@@ -0,0 +1,10 @@
+# dependencies
+node_modules
+
+# vuepress
+!docs/.vuepress
+docs/.vuepress/.cache
+docs/.vuepress/.temp
+
+# builds
+docs/.vuepress/dist

apps/dialtone-documentation/.eslintrc.js

@@ -0,0 +1,117 @@
+module.exports = {
+  extends: [
+    'standard',
+    'semistandard',
+    'plugin:vue/base',
+    'plugin:vue/vue3-recommended',
+    'plugin:vuejs-accessibility/recommended',
+    'plugin:jest/recommended',
+  ],
+  env: {
+    browser: true,
+    node: true,
+    amd: true,
+  },
+  globals: {
+    __VUEPRESS_SSR__: 'readonly',
+  },
+  rules: {
+    camelcase: ['error', {
+      properties: 'never', // Ignore snake_case in JSON properties, which are often params.
+      allow: ['^opt_'], // Allow opt_varname arguments.
+    }],
+    'comma-dangle': ['error', 'always-multiline'],
+    'max-len': ['error', {
+      code: 120,
+      tabWidth: 2,
+    }],
+    'prefer-promise-reject-errors': ['error', {
+      allowEmptyReject: true,
+    }],
+    'vue/comma-dangle': ['error', 'always-multiline'],
+    'vue/component-name-in-template-casing': ['error', 'kebab-case', {
+      registeredComponentsOnly: true,
+    }],
+
+    'vuejs-accessibility/label-has-for': [
+      'error',
+      {
+        required: {
+          some: ['nesting', 'id'],
+        },
+        allowChildren: true,
+      },
+    ],
+    'vue/new-line-between-multi-line-property': ['warn'],
+    'vue/html-comment-content-spacing': ['warn'],
+    'vue/no-potential-component-option-typo': ['warn'],
+    'vue/multi-word-component-names': ['off'],
+    'vue/no-reserved-component-names': ['error', {
+      disallowVueBuiltInComponents: true,
+      disallowVue3BuiltInComponents: true,
+    }],
+    'vue/no-v-model-argument': ['warn'],
+    'vue/padding-line-between-blocks': ['warn'],
+    'vue/require-direct-export': ['warn'],
+    'vue/require-name-property': ['error'],
+    'vue/valid-next-tick': ['error'],
+    'vue/block-tag-newline': ['error'],
+    'vue/no-duplicate-attr-inheritance': ['error'],
+    'vue/no-undef-components': ['error', {
+      ignorePatterns: ['icon-', 'router-link', 'toc', 'dtc-', 'dt-'],
+    }],
+    'vue/v-on-event-hyphenation': ['error'],
+    'vue/no-template-target-blank': ['error'],
+    'vue/no-static-inline-styles': ['off'],
+    'vuejs-accessibility/iframe-has-title': 'warn',
+    'vuejs-accessibility/aria-props': 'warn',
+
+    'max-lines': ['warn', { max: 300, skipBlankLines: true, skipComments: true }],
+    quotes: ['error', 'single', { allowTemplateLiterals: true }],
+    complexity: ['warn', 5],
+
+    //             Vue core extensions
+    // these all match regular non-vue ESLint rules,
+    // but makes them apply to js within the vue template.
+    'vue/array-bracket-spacing': ['error', 'never'],
+    'vue/arrow-spacing': ['error', { before: true, after: true }],
+    'vue/block-spacing': ['error', 'always'],
+    'vue/brace-style': ['error', '1tbs', { allowSingleLine: true }],
+    'vue/camelcase': ['error', {
+      properties: 'never', // Ignore snake_case in JSON properties, which are often params.
+      allow: ['^opt_'], // Allow opt_varname arguments.
+    }],
+    'vue/comma-spacing': ['error', { before: false, after: true }],
+    'vue/comma-style': ['error', 'last'],
+    'vue/dot-location': ['error', 'property'],
+    'vue/dot-notation': ['error', { allowKeywords: true }],
+    'vue/eqeqeq': ['error', 'always', { null: 'ignore' }],
+    'vue/func-call-spacing': ['error', 'never'],
+    'vue/key-spacing': ['error', { beforeColon: false, afterColon: true }],
+    'vue/keyword-spacing': ['error', { before: true, after: true }],
+    'vue/no-constant-condition': ['error', { checkLoops: false }],
+    'vue/no-empty-pattern': 'error',
+    'vue/no-extra-parens': ['error', 'functions'],
+    'vue/no-irregular-whitespace': 'error',
+    'vue/no-sparse-arrays': 'error',
+    'vue/object-curly-newline': ['error', { multiline: true, consistent: true }],
+    'vue/object-curly-spacing': ['error', 'always'],
+    'vue/object-property-newline': ['error', { allowMultiplePropertiesPerLine: true }],
+    'vue/operator-linebreak': ['error', 'after', { overrides: { '?': 'before', ':': 'before', '|>': 'before' } }],
+    'vue/prefer-template': ['error'],
+    'vue/space-in-parens': ['error', 'never'],
+    'vue/space-infix-ops': 'error',
+    'vue/space-unary-ops': ['error', { words: true, nonwords: false }],
+    'vue/template-curly-spacing': ['error', 'never'],
+    'vue/no-v-html': 'off',
+    'jest/expect-expect': 'off',
+    'vue/max-attributes-per-line': ['warn', {
+      singleline: {
+        max: 8,
+      },
+      multiline: {
+        max: 1,
+      },
+    }],
+  },
+};

apps/dialtone-documentation/.gitignore

@@ -0,0 +1,26 @@
+# Build generated files #
+######################
+docs/assets/css
+docs/assets/fonts
+docs/.vuepress/public/fonts
+docs/_includes/icons
+docs/_includes/patterns
+docs/_includes/spot
+
+# OS generated files #
+######################
+.DS_Store
+
+# NPM #
+###############
+node_modules
+
+# Environment normalization #
+###############
+/docs/.bundle
+/docs/vendor/bundle
+
+# VuePress #
+.temp
+.cache
+docs/.vuepress/dist

packages/dialtone/docs/.vuepress/baseComponents/BaseIcon.vue → apps/dialtone-documentation/docs/.vuepress/baseComponents/BaseIcon.vue

@@ -11,19 +11,17 @@
       <header class="dialtone-icon-card__header js-dialtone-icon-card-copy-area">
         <div :class="cardIconClass">
           <component
-            :is="dynamicIconComponent"
+            :is="vue"
           />
         </div>
         <p class="dialtone-icon-card__subtitle d-tt-capitalize">
           {{ name }}
-          {{ (!isWeatherKind && variation) ? `(${variation})` : '' }}
         </p>
       </header>
       <footer :class="cardFooterClass">
         <div class="dialtone-icon-card__content">
           <h2 class="dialtone-icon-card__title d-tt-capitalize">
             {{ name }}
-            {{ (!isWeatherKind && variation) ? `(${variation})` : '' }}
           </h2>
           <div class="dialtone-icon-card__list">
             <span class="dialtone-icon-card__list__item">
@@ -49,13 +47,28 @@
 </template>
 
 <script>
-import { defineAsyncComponent } from 'vue';
+import SpotPublish from '@dialpad/dialtone/lib/dist/vue/spot/SpotPublish.vue';
+import SpotWirelessScreenshare from '@dialpad/dialtone/lib/dist/vue/spot/SpotWirelessScreenshare.vue';
+import SpotFemaleLaptopTyping from '@dialpad/dialtone/lib/dist/vue/spot/SpotFemaleLaptopTyping.vue';
+import SpotMaleLaptopTyping from '@dialpad/dialtone/lib/dist/vue/spot/SpotMaleLaptopTyping.vue';
+import SpotFileUpload from '@dialpad/dialtone/lib/dist/vue/spot/SpotFileUpload.vue';
+import SpotBrowserTableGraph from '@dialpad/dialtone/lib/dist/vue/spot/SpotBrowserTableGraph.vue';
+import SpotBrowserListCallout from '@dialpad/dialtone/lib/dist/vue/spot/SpotBrowserListCallout.vue';
 
-export const ICON_KINDS = ['brand', 'patterns', 'spot', 'system', 'weather'];
-export const ICON_VARIATIONS = ['dark', 'light', 'night', 'day'];
+export const ICON_KINDS = ['spot'];
 
 export default {
   name: 'BaseIcon',
+  components: {
+    SpotPublish,
+    SpotWirelessScreenshare,
+    SpotFemaleLaptopTyping,
+    SpotMaleLaptopTyping,
+    SpotFileUpload,
+    SpotBrowserTableGraph,
+    SpotBrowserListCallout,
+  },
+
   props: {
     name: {
       type: String,
@@ -99,22 +112,9 @@ export default {
       type: Boolean,
       default: false,
     },
-
-    variation: {
-      type: String,
-      default: null,
-      validator: (_variation) => {
-        if (_variation === null) return true;
-        return ICON_VARIATIONS.includes(_variation);
-      },
-    },
   },
 
   computed: {
-    isWeatherKind () {
-      return this.kind === 'weather';
-    },
-
     isSpotKind () {
       return this.kind === 'spot';
     },
@@ -124,22 +124,11 @@ export default {
     },
 
     cardFooterClass () {
-      return this.isSpotKind ? 'dialtone-icon-card__footer-spot-illustration' : 'dialtone-icon-card__footer';
+      return 'dialtone-icon-card__footer-spot-illustration';
     },
 
     cardIconClass () {
-      return this.isSpotKind ? 'dialtone-icon-card__icon--autosize' : 'dialtone-icon-card__icon';
-    },
-
-    dynamicIconComponent () {
-      switch (this.kind) {
-        case 'patterns':
-          return defineAsyncComponent(() => import(`../../../lib/dist/vue/patterns/${this.vue}.vue`));
-        case 'spot':
-          return defineAsyncComponent(() => import(`../../../lib/dist/vue/spot/${this.vue}.vue`));
-        default:
-          return defineAsyncComponent(() => import(`../../../lib/dist/vue/icons/${this.vue}.vue`));
-      }
+      return 'dialtone-icon-card__icon--autosize';
     },
   },
 };

packages/dialtone/docs/.vuepress/baseComponents/IconSizesTable.vue → apps/dialtone-documentation/docs/.vuepress/baseComponents/IconSizesTable.vue

@@ -64,7 +64,7 @@ export default {
   async created () {
     const module = await import('../../_data/icons-sizes.json');
     this.iconSizes = module.v6;
-    this.exampleIcon = defineAsyncComponent(() => import('../../../lib/dist/vue/icons/IconPhone.vue'));
+    this.exampleIcon = defineAsyncComponent(() => import('@dialpad/dialtone/lib/dist/vue/icons/IconPhone.vue'));
   },
 };
 </script>

packages/dialtone/docs/.vuepress/client.js → apps/dialtone-documentation/docs/.vuepress/client.js

@@ -20,16 +20,6 @@ import ComponentCombinator from './baseComponents/ComponentCombinator.vue';
 import ExampleTabs from './baseComponents/ExampleTabs.vue';
 import SvgLoader from './baseComponents/SvgLoader.vue';
 
-// Common icons
-import IconInfo from '@svgIcons/IconInfo.vue';
-import IconLightbulb from '@svgIcons/IconLightbulb.vue';
-import IconCheckCircle from '@svgIcons/IconCheckCircle.vue';
-import IconWarning from '@svgIcons/IconWarning.vue';
-import IconError from '@svgIcons/IconError.vue';
-import IconClose from '@svgIcons/IconClose.vue';
-import IconCheckmark from '@svgIcons/IconCheckmark.vue';
-import IconPhone from '@svgIcons/IconPhone.vue';
-
 export default defineClientConfig({
   enhance ({ app, router, siteData }) {
     // Common views
@@ -51,16 +41,6 @@ export default defineClientConfig({
     app.component('ComponentCombinator', ComponentCombinator);
     app.component('ExampleTabs', ExampleTabs);
     app.component('SvgLoader', SvgLoader);
-
-    // Common icons
-    app.component('IconInfo', IconInfo);
-    app.component('IconPhone', IconPhone);
-    app.component('IconLightbulb', IconLightbulb);
-    app.component('IconCheckCircle', IconCheckCircle);
-    app.component('IconWarning', IconWarning);
-    app.component('IconError', IconError);
-    app.component('IconClose', IconClose);
-    app.component('IconCheckmark', IconCheckmark);
   },
   setup () {},
   rootComponents: [],

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

@@ -1,4 +1,4 @@
-import dialtoneChangelog from '@projectRoot/CHANGELOG.json';
+import dialtoneChangelog from '@projectRoot/node_modules/@dialpad/dialtone/CHANGELOG.json';
 import dialtoneVueChangelog from '@projectRoot/node_modules/@dialpad/dialtone-vue/CHANGELOG.json';
 
 export const DIALTONE_CHANGELOGS = {

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

@@ -98,8 +98,6 @@ export default defineUserConfig({
 
   alias: {
     '@data': path.resolve(__dirname, '../_data/'), // Needed to import json data.
-    '@svgIcons': path.resolve(__dirname, '../../lib/dist/vue/icons/'), // Needed to easily import svg
-    '@v7Icons': path.resolve(__dirname, '../../lib/dist/vue/v7/'), // Needed to easily import new icons
     '@exampleComponents': path.resolve(__dirname, './exampleComponents'),
     '@baseComponents': path.resolve(__dirname, './baseComponents'),
     '@views': path.resolve(__dirname, './views'),

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

@@ -3,7 +3,7 @@ import Layout from './layouts/Layout.vue';
 import NotFound from './layouts/NotFound.vue';
 
 // CSS
-import '@projectRoot/lib/dist/css/dialtone.css';
+import '@dialpad/dialtone/lib/dist/css/dialtone.css';
 import './assets/less/dialtone-docs.less';
 import './assets/less/dialtone-syntax.less';
 import { onBeforeMount, provide, ref } from 'vue';

packages/dialtone/docs/.vuepress/views/Icons.vue → apps/dialtone-documentation/docs/.vuepress/views/Icons.vue

@@ -1,14 +1,13 @@
 <template>
   <div
-    :class="{ ['d-bgc-contrast d-fc-primary-inverted']: ['light', 'night'].includes(variation) }"
     class="d-stack16 d-p16 d-bar8"
   >
     <h3
-      :id="`${variation}-${kind}`"
+      :id="kind"
       class="d-docsite--header-3 d-mt0"
     >
       <a
-        :href="`#${variation}-${kind}`"
+        :href="`#${kind}`"
         class="header-anchor"
       >#</a>
       {{ title }}
@@ -24,7 +23,6 @@
         :hidden="icon.hidden"
         :name="icon.name"
         :selected="selectedCardIndex === index"
-        :variation="variation"
         :vue="icon.vue"
         @click="toggleCard(index)"
       />
@@ -33,7 +31,7 @@
 </template>
 
 <script>
-import BaseIcon, { ICON_KINDS, ICON_VARIATIONS } from '../baseComponents/BaseIcon.vue';
+import BaseIcon, { ICON_KINDS } from '../baseComponents/BaseIcon.vue';
 
 export default {
   name: 'Icons',
@@ -50,15 +48,6 @@ export default {
       },
     },
 
-    variation: {
-      type: String,
-      default: null,
-      validator: (_variation) => {
-        if (_variation === null) return true;
-        return ICON_VARIATIONS.includes(_variation);
-      },
-    },
-
     size: {
       type: String,
       default: null,
@@ -82,21 +71,11 @@ export default {
     iconsContainerClass () {
       return this.size ? `d-gl-docsite-icons--${this.size}` : 'd-gl-docsite-icons';
     },
-
-    isWeatherKind () {
-      return this.kind === 'weather';
-    },
-
-    isPatternsKind () {
-      return this.kind === 'patterns';
-    },
   },
 
   async beforeCreate () {
     const importedModule = await import(`../../_data/svg-${this.kind}.json`);
-    this.icons = (this.isWeatherKind || this.isPatternsKind)
-      ? importedModule.default[this.variation]
-      : this.icons = importedModule.default;
+    this.icons = importedModule.default;
   },
 
   methods: {