Storybook autodocs doesn't work with PrimeReact

UI Components for React
Post Reply
PromptWizard
Posts: 1
Joined: 30 Apr 2023, 07:26

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:

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'
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:

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" />
            &nbsp;
            <Button label="Medium" size="medium" />
            &nbsp;
            <Button label="Large" size="large" />
        </>
    )
}
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).

Selamudder
Posts: 3
Joined: 12 Apr 2023, 12:06

17 May 2023, 11:48

Yes it's some little error try after some time, i got same error found but after few day my work done.


KanTime Medicare Login

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests