I have a react component like so
type SearchBoxProps = {
/** Optional, value used for input if making it a controlled component */
value?: string,
/** Optional, value used for input if making it a controlled component */
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
[restOfProps: string]: any,
}
/** Used for searching for users */
const SearchBox = React.forwardRef<HTMLInputElement, SearchBoxProps>((props, ref) => {
return (
....
)
})
export default SearchBox
The jsdoc I generated for the component /** Used for searching for users */
is updated in the storybook but the docs I generated for the props aren’t.
And its not even being captured by VSCode intellisense.
This is my searchbox story
import type {Meta, StoryObj} from '@storybook/react';
import SearchBox from "./SearchBox";
const meta = {
title: 'Search Box',
component: SearchBox,
parameters: {
backgrounds: {
default: 'dark'
},
layout: 'centered',
},
tags: ['autodocs'],
} satisfies Meta<typeof SearchBox>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Search: Story = {
args: {
value: 'hello',
onChange: () => {},
},
}
So it turns out, storybook and vscode aren’t able to tell the type of props defined if it is not explicitly stated right in front the prop.
FIxed it by writing it like this
const SearchBox = React.forwardRef<HTMLInputElement, SearchBoxProps>((props: SearchBoxProps, ref) => {
....
}