docs: DLT-3038 improve default storybook doc view with autodocs (#1071)

Author: francisrupert

packages/dialtone-vue/.storybook/DialtoneDocsPage.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Controls,
+  Stories,
+  useOf,
+} from '@storybook/addon-docs/blocks';
+
+function DialtoneDocumentationLink() {
+  const { preparedMeta } = useOf('meta', ['meta']);
+  const segments = preparedMeta.title.split('/');
+  const componentName = segments[segments.length - 1];
+  const slug = componentName.replace(/\s+/g, '-').toLowerCase();
+
+  return (
+    <p>
+      <a href={`https://dialtone.dialpad.com/components/${slug}.html`} target="_blank">
+        Dialtone documentation ↗
+      </a>
+    </p>
+  );
+}
+
+export function DialtoneDocsPage() {
+  return (
+    <>
+      <Title />
+      <Subtitle />
+      <Description />
+      <DialtoneDocumentationLink />
+      <Primary />
+      <Controls />
+      <Stories />
+    </>
+  );
+}

packages/dialtone-vue/.storybook/preview.jsx

@@ -14,6 +14,7 @@ import fixDefaultSlot from '../components/plugins/fixDefaultSlot';
 import { setEmojiAssetUrlSmall, setEmojiAssetUrlLarge, setCustomEmojiUrl, setCustomEmojiJson } from '@/common/emoji';
 import customEmojiJson from '@/common/custom-emoji.json';
 import { dialtoneDarkTheme, dialtoneLightTheme } from './dialtone-themes.js';
+import { DialtoneDocsPage } from './DialtoneDocsPage.jsx';
 import { DtTooltipDirective } from '@/directives/tooltip_directive';
 import { DtScrollbarDirective } from '@/directives/scrollbar_directive';
 import { DtStack } from '@/components/stack';
@@ -104,6 +105,7 @@ export default {
 
     backgrounds: { disabled: true },
     docs: {
+      page: DialtoneDocsPage,
       container: ({ children, ...props }) => {
         const [isDark, setDark] = useState(false);
         const channel = addons.getChannel();