docs(playground): DLT-3119 refine playground UI and integrate across doc site (#1127)

Author: francisrupert

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

@@ -3,10 +3,14 @@
     :component="component"
     :library="library"
     :documentation="componentDocumentation"
+    :variants="componentVariants"
+    :dev-mode="isDev"
   />
 </template>
 
 <script>
+import { variantBank } from '@dialpad/dialtone-combinator';
+
 export default {
   name: 'ComponentCombinator',
 
@@ -40,13 +44,22 @@ export default {
       );
     },
 
+    componentVariants () {
+      return variantBank()[this.componentName] ?? {};
+    },
+
     library () {
       return {
         ...this.dialtoneComponents,
         ...this.dialtoneIcons,
         ...this.dialtoneIllustrations,
       };
     },
+
+    isDev () {
+      return typeof __VUEPRESS_DEV__ !== 'undefined'
+        && (__VUEPRESS_DEV__ || __DIALTONE_DEPLOY_PREVIEW__);
+    },
   },
 };
 </script>

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

@@ -113,6 +113,16 @@ const resolveConstantRef = (rawDefault, values) => {
   return rawDefault;
 };
 
+const extractRawDefault = (defaultValue) => {
+  // vue-docgen-api produces { func, value } objects, but Vite's JSON import
+  // may evaluate them to direct JS values at runtime. Handle both formats.
+  if (defaultValue != null && typeof defaultValue === 'object' && 'value' in defaultValue) {
+    return defaultValue.value;
+  }
+  if (defaultValue === undefined) return undefined;
+  return String(defaultValue);
+};
+
 const resolveDefaultValue = (rawDefault, values) => {
   if (!rawDefault) return rawDefault;
   if (rawDefault === 'undefined') return null;
@@ -127,7 +137,7 @@ const docProps = componentDocs.find(f => isSameComponentName(f.displayName))
       name: item.name,
       description: item.description,
       type: item.type?.name,
-      defaultValue: resolveDefaultValue(item.defaultValue?.value, item.values),
+      defaultValue: resolveDefaultValue(extractRawDefault(item.defaultValue), item.values),
       values: item.values,
       required: item.required,
       deprecated: isDeprecated(item),

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

@@ -1,26 +1,23 @@
 <template>
-  <dt-tooltip
-    :message="message"
-    :sticky="true"
+  <dt-button
+    :aria-label="ariaLabel"
+    size="xs"
+    importance="clear"
+    kind="muted"
+    @click="copyToClipboard"
   >
-    <template #anchor>
-      <dt-button
-        :aria-label="ariaLabel"
-        size="xs"
-        importance="clear"
-        kind="muted"
-        @click="copyToClipboard"
-      >
-        <template #startIcon="{ iconSize }">
-          <dt-icon
-            name="copy"
-            :size="iconSize"
-          />
-        </template>
-        <slot />
-      </dt-button>
+    <template #startIcon="{ iconSize }">
+      <dt-icon
+        :name="copied ? 'check' : 'copy'"
+        :size="iconSize"
+        :class="{ 'd-fc-success': copied }"
+      />
     </template>
-  </dt-tooltip>
+    <template v-if="copied">
+      Copied!
+    </template>
+    <slot v-else />
+  </dt-button>
 </template>
 
 <script setup>
@@ -30,13 +27,13 @@ const props = defineProps({
   text: { type: String, required: true },
   ariaLabel: { type: String, required: true },
 });
-const message = ref(props.ariaLabel);
+const copied = ref(false);
 const copyToClipboard = async () => {
   try {
     await navigator.clipboard.writeText(props.text);
-    message.value = 'Copied';
-    await new Promise(resolve => setTimeout(resolve, 750));
-    message.value = props.ariaLabel;
+    copied.value = true;
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    copied.value = false;
   } catch {
     console.error('Error copying to clipboard', props.text);
   }

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

@@ -49,6 +49,14 @@ export default defineUserConfig({
       css: {
         devSourcemap: true,
       },
+      resolve: {
+        alias: [
+          // The combinator's DtcNode uses runtime template compilation (h({ template: '...' })),
+          // which requires the full Vue build including the compiler.
+          // Exact match only — must not rewrite vue/server-renderer etc. during SSR build.
+          { find: /^vue$/, replacement: 'vue/dist/vue.esm-bundler.js' },
+        ],
+      },
       server: {
         // hmr: {
         //   overlay: false,

apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleTabs.vue

@@ -17,26 +17,20 @@
         panel-id="2"
         selected
       >
-        <p>
-          First tab
-        </p>
+        First tab
       </dt-tab>
       <dt-tab
         id="3"
         panel-id="4"
       >
-        <p>
-          Second tab
-        </p>
+        Second tab
       </dt-tab>
       <dt-tab
         id="5"
         panel-id="6"
         label="Third Label"
       >
-        <p>
-          Third tab
-        </p>
+        Third tab
       </dt-tab>
     </template>
     <div

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

@@ -9,7 +9,7 @@ figma_url: https://www.figma.com/design/W58r5BkO8qTw3vem9YieJd/DT9-Component-Lib
 keywords: ["profile picture", "user image", "profile image", "d-avatar", "DtAvatar", "dt-avatar", "initials", "user icon", "persona"]
 ---
 
-<code-well-header>
+<!-- <code-well-header>
   <dt-stack direction="row" align="center" gap="500">
     <dt-avatar size="lg">
       <template #icon>
@@ -19,9 +19,9 @@ keywords: ["profile picture", "user image", "profile image", "d-avatar", "DtAvat
     <dt-avatar size="lg" full-name="dp" seed="user-123" presence="busy" />
     <dt-avatar size="lg" image-src="/assets/images/person.png" image-alt="avatar user" presence="active" />
   </dt-stack>
-</code-well-header>
+</code-well-header> -->
 
-<!-- <component-combinator component-name="DtAvatar" /> -->
+<component-combinator component-name="DtAvatar" />
 
 ## Usage
 

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

@@ -9,14 +9,7 @@ figma_url: https://www.figma.com/design/W58r5BkO8qTw3vem9YieJd/DT9-Component-Lib
 keywords: ["label","tag","indicator","count","d-badge","DtBadge","dt-badge"]
 ---
 
-<code-well-header>
-  <dt-stack direction="row" gap="400" align="center">
-    <dt-badge text="Label"></dt-badge>
-    <dt-badge kind="count" text="1"></dt-badge>
-  </dt-stack>
-</code-well-header>
-
-<!-- <component-combinator component-name="DtBadge" /> -->
+<component-combinator component-name="DtBadge" />
 
 ## Usage
 

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

@@ -23,6 +23,8 @@ keywords: ["alert","notification","message","d-banner","DtBanner","dt-banner"]
     </dt-stack>
 </code-well-header>
 
+<!-- <component-combinator component-name="DtBanner" /> -->
+
 ## Usage
 
 System banners are used for **system** messaging. They are full-width notices placed in one of two locations:

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

@@ -9,7 +9,7 @@ figma_url: https://www.figma.com/design/W58r5BkO8qTw3vem9YieJd/DT9-Component-Lib
 keywords: ["navigation", "path", "d-breadcrumbs", "DtBreadcrumbs", "dt-breadcrumbs", "trail", "path navigation"]
 ---
 
-<code-well-header>
+<!-- <code-well-header>
   <dt-breadcrumbs
     :breadcrumbs="[
       { href: '#', label: 'Root' },
@@ -19,9 +19,9 @@ keywords: ["navigation", "path", "d-breadcrumbs", "DtBreadcrumbs", "dt-breadcrum
       { href: '#', label: 'Current Page', selected: true },
     ]"
   />
-</code-well-header>
+</code-well-header> -->
 
-<!-- <component-combinator component-name="DtBreadcrumbs" /> -->
+<component-combinator component-name="DtBreadcrumbs" />
 
 ## Usage
 

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

@@ -7,31 +7,14 @@ storybook: https://dialtone.dialpad.com/vue/?path=/story/components-button-group
 keywords: ["button set", "btn group", "action group", "d-btn-group", "DtButtonGroup", "dt-button-group", "toolbar", "segmented button"]
 ---
 
-<code-well-header class="d-d-block">
-  <dt-button-group alignment="start" class="d-g8">
+<!-- <code-well-header class="d-d-block">
+  <dt-button-group alignment="start">
     <dt-button importance="primary">Confirm</dt-button>
     <dt-button importance="outlined">Cancel</dt-button>
   </dt-button-group>
-</code-well-header>
+</code-well-header> -->
 
-<code-example-tabs
-htmlCode='
-<div role="group" class="d-btn-group d-btn-group--start" alignment="start">
-  <button type="button" class="base-button__button d-btn d-btn--primary">
-    <span class="d-btn__label base-button__label"> Confirm </span>
-  </button>
-  <button data-qa="dt-button" type="button" class="base-button__button d-btn d-btn--outlined">
-    <span class="d-btn__label base-button__label"> Cancel </span>
-  </button>
-</div>
-'
-vueCode='
-<dt-button-group>
-  <dt-button importance="primary">Confirm</dt-button>
-  <dt-button importance="outlined">Cancel</dt-button>
-</dt-button-group>
-'
-showHtmlWarning />
+<component-combinator component-name="DtButtonGroup" />
 
 ## Variants
 
@@ -41,7 +24,7 @@ The alignment and the order of buttons within it can be customized to suit the s
 
 When aligned to `start`, the `primary` button is on the **left** side of the group.
 <code-well-header class="d-d-block">
-  <dt-button-group alignment="start" class="d-g8">
+  <dt-button-group alignment="start">
     <dt-button importance="primary">Confirm</dt-button>
     <dt-button importance="outlined">Cancel</dt-button>
   </dt-button-group>
@@ -70,7 +53,7 @@ showHtmlWarning />
 
 When aligned to `end`, the `primary` button is on the **right** side of the group.
 <code-well-header class="d-d-block">
-  <dt-button-group alignment="end" class="d-g8">
+  <dt-button-group alignment="end">
     <dt-button importance="outlined">Cancel</dt-button>
     <dt-button importance="primary">Confirm</dt-button>
   </dt-button-group>
@@ -99,7 +82,7 @@ showHtmlWarning />
 
 When set to `space-between`, the elements are evenly distributed within the row, creating a directional flow where the `primary` button is either on the **left** (regressive) or on the **right** (progressive).
 <code-well-header class="d-d-block">
-  <dt-button-group alignment="space-between" class="d-g8">
+  <dt-button-group alignment="space-between">
     <dt-button importance="outlined">Previous</dt-button>
     <dt-button importance="primary">Next</dt-button>
   </dt-button-group>