storybook-nuxt icon indicating copy to clipboard operation
storybook-nuxt copied to clipboard

Low Priority: Scan stories from Nuxt layers

Open peteromano opened this issue 1 year ago • 1 comments

With Nuxt's layer/extends mechanism, my idea is that folks could extend from abstract layers or apps, and the only "main" app could use Storybook to compile all components from the hierarchy into a only single SB instance.

I have a separate Nuxt module writing out the layer paths (i.e., on nuxt prepare), then use it in SB main.

Feels like storybook-vue/nuxt could easily include these paths by default instead of the user defining it, although its debatable if it should.. maybe it would be good to just write out the layers template for users to use:

// some-module/src/module.ts

    addTemplate({
      filename: 'layers.mjs',
      write: true,
      getContents () {
        // @ts-ignore
        return `export default [${nuxt.options._layers.map(({ cwd }) =>
  `
  '${cwd}'`).join(',')}\n]`
      }
    })
// .storybook/main.ts

import layers from '../.nuxt/layers'     <---- Ugly

const config: StorybookConfig = {
  stories: layers.map(layer => [
    `${layer}/**/*.mdx`,
    `${layer}/**/*.stories.@(js|jsx|ts|tsx)`
  ]).flat()),
  ...
}

peteromano avatar Aug 16 '23 14:08 peteromano