Writing documentation for plain JS class in storybook

user_8023580 0
Viewed 1186

I have just started using Storybook for a UI component lib I am working on. I wanted to extract JSDoc written for JS class methods and properties into Storybook and create a Doc. Storybook does support creating doc for React components by reading its propTypes. Is there addon or someway to do the same for a JS class.

I am using the latest storybook 6.

Thanks in advance

storybook jsdoc documentation javascript
1 Answers

You can do it like a normal component:

form-validators.stories.ts

import { FormValidators } from './path';

export default {
  title: 'Components/Form Validators',
  component: FormValidators,
  parameters: {
    previewTabs: { canvas: { hidden: true } },
    docsOnly: true,
  },
} as Meta;

export const Default: Story = () => ({
  template: '<div>Test</div>',
});

Or I prefer an MDX file.

form-validators.stories.mdx

import { ArgsTable } from '@storybook/addon-docs/blocks';
import { Meta } from '@storybook/addon-docs/blocks';
import { FormValidators } from './path';

<Meta
  title="Components/Form Validators"
  parameters={{ previewTabs: { canvas: { hidden: true } } }}
/>

<ArgsTable of={FormValidators} />
user_18896070
Related