OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Applying global autodocs in Storybook not working

  • Thread starter Thread starter MacGregor
  • Start date Start date
M

MacGregor

Guest
I have a Storybook design system and I would like to generate autodocs. From the documentation it should by done like this in preview.ts :

Code:
const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    viewport: {
      viewports: { ...customViewports }
    },
    docs: {
      theme: create({
        base: 'light',
        fontBase: '"Open Sans", sans-serif'
      })
    }
  },
  tags: ['autodocs']
}

However, it is not working for me, No docs file is generated for each of my stories. The interesting thing is, when I apply it to a specific component in the Meta part, it works for this specific component:

Code:
const meta: Meta = {
  title: 'CustomComponent',
  component: 'CustomComponent',
  argTypes: {
    label: { control: 'text' },
    color: { control: 'color' },
    size: { control: 'number' },
    empty: { control: 'boolean' },
  },
  tags: ['autodocs']
}

But I would like to apply it globally, to all stories, not to add it manually for each of them.

My package.json devDependencies:

Code:
{
  "devDependecies":{
    "@storybook/addon-docs": "^8.0.6",
    "@storybook/addon-essentials": "^8.0.6",
  }
...,
}

Does anyone have any suggestions how to fix it?

Thanks in advance!

<p>I have a Storybook design system and I would like to generate <code>autodocs</code>. From the <a href="https://storybook.js.org/docs/writing-docs/autodocs" rel="nofollow noreferrer">documentation</a> it should by done like this in <code>preview.ts</code> :</p>
<pre class="lang-js prettyprint-override"><code>const preview: Preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
viewport: {
viewports: { ...customViewports }
},
docs: {
theme: create({
base: 'light',
fontBase: '"Open Sans", sans-serif'
})
}
},
tags: ['autodocs']
}
</code></pre>
<p>However, it is not working for me, No docs file is generated for each of my stories. The interesting thing is, when I apply it to a specific component in the <code>Meta</code> part, it works for this specific component:</p>
<pre><code>const meta: Meta = {
title: 'CustomComponent',
component: 'CustomComponent',
argTypes: {
label: { control: 'text' },
color: { control: 'color' },
size: { control: 'number' },
empty: { control: 'boolean' },
},
tags: ['autodocs']
}
</code></pre>
<p>But I would like to apply it globally, to all stories, not to add it manually for each of them.</p>
<p>My <code>package.json</code> devDependencies:</p>
<pre class="lang-json prettyprint-override"><code>{
"devDependecies":{
"@storybook/addon-docs": "^8.0.6",
"@storybook/addon-essentials": "^8.0.6",
}
...,
}
</code></pre>
<p>Does anyone have any suggestions how to fix it?</p>
<p>Thanks in advance!</p>
 

Latest posts

Top