Storybook autodocs doesn't work with PrimeReact
Posted: 01 May 2023, 08:36
I just bought the Apollo template last night, and I managed to get Storybook mostly working with it.
I had to follow the directions below to get the styles to work:
https://prateeksurana.me/blog/react-com ... orybook-6/
Then I added the following to my .storybook/preview.ts file:
The remaining issue is that I am using the Storybook autodocs feature, which finds the prop types of the component (e.g., for PrimeReact Button, it should find ButtonProps like badge, badgeClassName, children, disabled, icon, etc.) and show them in the Storybook docs on the page, but it does not do that. Instead, it only shows help for whatever properties you declared in the `args` on the first story in the file.
Has anyone found a way to make all the props come through correctly?
This is my Button.stories.tsx file:
FWIW, it would be great if the template came with Storybook already configured and a few PrimeReact examples (even though not everyone would want it).
I had to follow the directions below to get the styles to work:
https://prateeksurana.me/blog/react-com ... orybook-6/
Then I added the following to my .storybook/preview.ts file:
Code: Select all
import 'primeflex/primeflex.css'
import 'primeicons/primeicons.css'
import 'primereact/resources/primereact.css'
// Load theme here!
import 'primereact/resources/themes/lara-light-blue/theme.css'
Has anyone found a way to make all the props come through correctly?
This is my Button.stories.tsx file:
Code: Select all
import type { Meta, StoryObj } from '@storybook/react'
import { Button } from 'primereact/button'
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
const meta: Meta<typeof Button> = {
title: 'Example/Button',
component: Button,
tags: ['autodocs']
}
export default meta
type Story = StoryObj<typeof Button>
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
export const Primary: Story = {
args: {
label: 'Button',
size: 'small'
}
}
export const Secondary: Story = {
args: {
severity: 'secondary',
label: 'Secondary'
}
}
export const Sizes: Story = {
render: () => (
<>
<Button label="Small" size="small" />
<Button label="Medium" size="medium" />
<Button label="Large" size="large" />
</>
)
}