chore(#693): reimplement storybook

druxt · Aug 30, 2024 · 7fa1ef9 · 7fa1ef9
1 parent d8b8ca6
commit 7fa1ef9
Show file tree

Hide file tree

Showing 14 changed files with 2,226 additions and 2,298 deletions.
diff --git a/examples/druxt-site/package.json b/examples/druxt-site/package.json
@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "@nuxt/postcss8": "latest",
-    "@nuxtjs/storybook": "latest",
+    "@nuxtjs/storybook": "4",
     "postcss": "latest"
   },
   "resolutions": {

diff --git a/examples/druxt-site/yarn.lock b/examples/druxt-site/yarn.lock
diff --git a/packages/blocks/src/nuxt/index.js b/packages/blocks/src/nuxt/index.js
@@ -1,6 +1,6 @@
 import { defineNuxtModule, installModule } from '@nuxt/kit'
 import { join } from 'path'
-// import DruxtBlocksStorybook from './storybook'
+import DruxtBlocksStorybook from './storybook'
 
 /**
  * The Nuxt.js module function.
@@ -63,9 +63,9 @@ const DruxtBlocksNuxtModule = defineNuxtModule({
 
     // Nuxt Storybook.
     // @TODO - @nuxt/kit and @nuxt/storybook aren't compatible.
-    // nuxt.hook('storybook:config', async ({ stories }) => {
-    //   await DruxtBlocksStorybook.call(nuxt, { stories })
-    // })
+    nuxt.hook('storybook:config', async ({ stories }) => {
+      await DruxtBlocksStorybook.call(nuxt, { stories })
+    })
   }
 })
 

diff --git a/packages/breadcrumb/src/nuxt/index.js b/packages/breadcrumb/src/nuxt/index.js
@@ -1,5 +1,5 @@
-import { defineNuxtModule, installModule } from '@nuxt/kit'
-import { join } from 'path'
+import { addTemplate, defineNuxtModule, installModule } from '@nuxt/kit'
+import { join, resolve } from 'path'
 
 /**
  * The Nuxt.js module function.
@@ -54,13 +54,13 @@ const DruxtBreadcrumbModule = defineNuxtModule({
 
     // Nuxt Storybook.
     // @TODO - @nuxt/kit and @nuxt/storybook aren't compatible.
-    // nuxt.hook('storybook:config', ({ stories }) => {
-    //   addTemplate({
-    //     src: resolve(__dirname, '../templates/druxt-breadcrumb.stories.js'),
-    //     fileName: 'stories/druxt-breadcrumb.stories.js',
-    //   })
-    //   stories.push(resolve(nuxt.options.buildDir, './stories/druxt-breadcrumb.stories.js'))
-    // })
+    nuxt.hook('storybook:config', ({ stories }) => {
+      addTemplate({
+        src: resolve(__dirname, '../templates/druxt-breadcrumb.stories.js'),
+        fileName: 'stories/druxt-breadcrumb.stories.js',
+      })
+      stories.push(resolve(nuxt.options.buildDir, './stories/druxt-breadcrumb.stories.js'))
+    })
   }
 })
 

diff --git a/packages/druxt/src/nuxt/index.js b/packages/druxt/src/nuxt/index.js
@@ -1,4 +1,4 @@
-import { addPluginTemplate, defineNuxtModule, installModule } from '@nuxt/kit'
+import { addPluginTemplate, addTemplate, defineNuxtModule, installModule } from '@nuxt/kit'
 import chalk from 'chalk'
 import { DrupalJsonApiParams } from 'drupal-jsonapi-params'
 import { join, normalize, resolve } from 'path'
@@ -204,28 +204,28 @@ const DruxtNuxtModule = defineNuxtModule({
 
     // Nuxt Storybook.
     // @TODO - @nuxt/kit and @nuxt/storybook aren't compatible.
-    // nuxt.hook('storybook:config', async ({ stories }) => {
-    //   // Druxt README story.
-    //   addTemplate({
-    //     src: resolve(__dirname, '../templates/stories/README.stories.mdx'),
-    //     fileName: 'stories/druxt-README.stories.mdx',
-    //   })
-    //   stories.push(resolve(nuxt.options.buildDir, './stories/druxt-README.stories.mdx'))
-
-    //   // Druxt custom module story.
-    //   addTemplate({
-    //     src: resolve(__dirname, '../templates/stories/druxt-module.stories.mdx'),
-    //     fileName: 'stories/druxt-module.stories.mdx',
-    //   })
-    //   stories.push(resolve(nuxt.options.buildDir, './stories/druxt-module.stories.mdx'))
-
-    //   // DruxtDebug component story.
-    //   addTemplate({
-    //     src: resolve(__dirname, '../templates/stories/druxt-debug.stories.js'),
-    //     fileName: 'stories/druxt-debug.stories.js',
-    //   })
-    //   stories.push(resolve(nuxt.options.buildDir, './stories/druxt-debug.stories.js'))
-    // })
+    nuxt.hook('storybook:config', async ({ stories }) => {
+      // Druxt README story.
+      addTemplate({
+        src: resolve(__dirname, '../templates/stories/README.stories.mdx'),
+        fileName: 'stories/druxt-README.stories.mdx',
+      })
+      stories.push(resolve(nuxt.options.buildDir, './stories/druxt-README.stories.mdx'))
+
+      // Druxt custom module story.
+      addTemplate({
+        src: resolve(__dirname, '../templates/stories/druxt-module.stories.mdx'),
+        fileName: 'stories/druxt-module.stories.mdx',
+      })
+      stories.push(resolve(nuxt.options.buildDir, './stories/druxt-module.stories.mdx'))
+
+      // DruxtDebug component story.
+      addTemplate({
+        src: resolve(__dirname, '../templates/stories/druxt-debug.stories.js'),
+        fileName: 'stories/druxt-debug.stories.js',
+      })
+      stories.push(resolve(nuxt.options.buildDir, './stories/druxt-debug.stories.js'))
+    })
   }
 })
 

diff --git a/packages/entity/src/nuxt/index.js b/packages/entity/src/nuxt/index.js
@@ -1,6 +1,6 @@
 import { defineNuxtModule, installModule } from '@nuxt/kit'
 import { join } from 'path'
-// import DruxtEntityStorybook from '../nuxtStorybook'
+import DruxtEntityStorybook from './storybook'
 
 /**
  * The Nuxt.js module function.
@@ -72,9 +72,9 @@ const DruxtEntityNuxtModule = defineNuxtModule({
 
     // Nuxt Storybook.
     // @TODO - @nuxt/kit and @nuxt/storybook aren't compatible.
-    // this.nuxt.hook('storybook:config', async ({ stories }) => {
-    //   await DruxtEntityStorybook.call(this, { stories })
-    // })
+    nuxt.hook('storybook:config', async ({ stories }) => {
+      await DruxtEntityStorybook.call(nuxt, { stories })
+    })
   }
 })
 

diff --git a/packages/entity/src/nuxt/storybook.js b/packages/entity/src/nuxt/storybook.js
@@ -1,3 +1,4 @@
+import { addTemplate } from '@nuxt/kit'
 import { resolve } from 'path'
 import { DrupalJsonApiParams } from 'drupal-jsonapi-params'
 import { DruxtClient } from 'druxt'
@@ -9,7 +10,7 @@ const titleFn = (parts) =>
   ).join('/')
 
 export default async function ({ stories }) {
-  const { addTemplate, options } = this
+  const { options } = this
 
   // Setup DruxtClient instance.
   const druxt = new DruxtClient(options.druxt.baseUrl, { ...options.druxt, proxy: { api: false } })

diff --git a/packages/menu/src/nuxt/index.js b/packages/menu/src/nuxt/index.js
@@ -1,6 +1,6 @@
 import { addPluginTemplate, defineNuxtModule, installModule } from '@nuxt/kit'
 import { join, resolve } from 'path'
-// import DruxtMenuStorybook from './storybook'
+import DruxtMenuStorybook from './storybook'
 
 /**
  * The Nuxt.js module function.
@@ -72,9 +72,9 @@ const DruxtMenuNuxtModule = defineNuxtModule({
 
     // Nuxt Storybook.
     // @TODO - @nuxt/kit and @nuxt/storybook aren't compatible.
-    // this.nuxt.hook('storybook:config', async ({ stories }) => {
-    //   await DruxtMenuStorybook.call(this, { stories })
-    // })
+    nuxt.hook('storybook:config', async ({ stories }) => {
+      await DruxtMenuStorybook.call(nuxt, { stories })
+    })
   }
 })
 

diff --git a/packages/menu/src/nuxt/storybook.js b/packages/menu/src/nuxt/storybook.js
@@ -1,3 +1,4 @@
+import { addTemplate } from '@nuxt/kit'
 import { resolve } from 'path'
 import { DrupalJsonApiParams } from 'drupal-jsonapi-params'
 import { DruxtClient } from 'druxt'
@@ -12,7 +13,7 @@ parts
   .join('/')
 
 export default async function ({ stories }) {
-  const { addTemplate, options } = this
+  const { options } = this
 
   // Setup DruxtClient instance.
   const druxt = new DruxtClient(options.druxt.baseUrl, { ...options.druxt, proxy: { api: false } })

diff --git a/packages/router/src/nuxt/index.js b/packages/router/src/nuxt/index.js
@@ -135,14 +135,14 @@ const DruxtRouterNuxtModule = defineNuxtModule({
 
     // Nuxt Storybook.
     // @TODO - @nuxt/kit and @nuxt/storybook aren't compatible.
-    // nuxt.hook('storybook:config', async ({ stories }) => {
-    //   addTemplate({
-    //     src: resolve(__dirname, '../templates/druxt-router.stories.js'),
-    //     fileName: 'stories/druxt-router.stories.js',
-    //     options: {}
-    //   })
-    //   stories.push(resolve(options.buildDir, './stories/druxt-router.stories.js'))
-    // })
+    nuxt.hook('storybook:config', async ({ stories }) => {
+      addTemplate({
+        src: resolve(__dirname, '../templates/druxt-router.stories.js'),
+        fileName: 'stories/druxt-router.stories.js',
+        options: {}
+      })
+      stories.push(resolve(nuxt.options.buildDir, './stories/druxt-router.stories.js'))
+    })
   }
 })
 

diff --git a/packages/site/src/nuxt/index.js b/packages/site/src/nuxt/index.js
@@ -1,7 +1,7 @@
 import { addLayout, defineNuxtModule, installModule } from '@nuxt/kit'
 import { existsSync } from 'fs'
 import { resolve } from 'path'
-// import DruxtSiteStorybook from '../nuxtStorybook'
+import DruxtSiteStorybook from './storybook'
 
 /**
  * Nuxt module function to install Druxt Site.
@@ -74,9 +74,9 @@ const DruxtSiteNuxtModule = defineNuxtModule({
 
     // Nuxt Storybook.
     // @TODO - @nuxt/kit and @nuxt/storybook aren't compatible.
-    // this.nuxt.hook('storybook:config', async ({ stories }) => {
-    //   await DruxtSiteStorybook.call(this, { options, stories })
-    // })
+    nuxt.hook('storybook:config', async ({ stories }) => {
+      await DruxtSiteStorybook.call(nuxt, { options, stories })
+    })
   }
 })
 

diff --git a/packages/site/src/nuxt/storybook.js b/packages/site/src/nuxt/storybook.js
@@ -1,3 +1,4 @@
+import { addTemplate } from '@nuxt/kit'
 import { resolve } from 'path'
 import { DrupalJsonApiParams } from 'drupal-jsonapi-params'
 import { DruxtClient } from 'druxt'
@@ -8,8 +9,6 @@ const titleFn = (parts) =>
   ).join('/')
 
 export default async function ({ options, stories }) {
-  const { addTemplate } = this
-
   // Setup DruxtClient instance.
   const druxt = new DruxtClient(options.baseUrl, { ...options, proxy: { api: false } })
 

diff --git a/packages/views/src/nuxt/index.js b/packages/views/src/nuxt/index.js
@@ -1,6 +1,6 @@
 import { addPluginTemplate, defineNuxtModule, installModule } from '@nuxt/kit'
 import { join, resolve } from 'path'
-// import DruxtViewsStorybook from './storybook'
+import DruxtViewsStorybook from './storybook'
 
 /**
  * The Nuxt.js module function.
@@ -67,13 +67,13 @@ const DruxtViewsNuxtModule = defineNuxtModule({
 
     // Enable Vuex Store.
     nuxt.options.store = true
-  }
 
-  // Nuxt Storybook.
-  // @TODO - @nuxt/kit and @nuxt/storybook aren't compatible.
-  // this.nuxt.hook('storybook:config', async ({ stories }) => {
-  //   await DruxtViewsStorybook.call(this, { stories })
-  // })
+    // Nuxt Storybook.
+    // @TODO - @nuxt/kit and @nuxt/storybook aren't compatible.
+    nuxt.hook('storybook:config', async ({ stories }) => {
+      await DruxtViewsStorybook.call(nuxt, { stories })
+    })
+  }
 })
 
 export default DruxtViewsNuxtModule
diff --git a/packages/views/src/nuxt/storybook.js b/packages/views/src/nuxt/storybook.js
@@ -1,10 +1,11 @@
+import { addTemplate } from '@nuxt/kit'
 import merge from 'deepmerge'
 import { DrupalJsonApiParams } from 'drupal-jsonapi-params'
 import { DruxtClient } from 'druxt'
 import { resolve } from 'path'
 
 export default async function ({ stories }) {
-  const { addTemplate, options } = this
+  const { options } = this
 
   // Setup DruxtClient instance.
   const druxt = new DruxtClient(options.druxt.baseUrl, { ...options.druxt, proxy: { api: false } })