Open petermikitsh opened 4 years ago
Closing this as a duplicate to #12007
Was this a duplicate? String unions are different to string enums and it appears that string unions are still rendered as text fields in storybook 6.1.17.
Was this a duplicate? String unions are different to string enums and it appears that string unions are still rendered as text fields in storybook 6.1.17.
I confim having the bug with storybook 6.2.9 && react-docgen-typecript-loader 3.7.2
Try upgrading to the latest prerelease:
npx sb@next upgrade --prerelease
Does that fix it?
I confirm having the bug after running npx sb@next upgrade --prerelease version 6.3.0-rc.2
I don't get it. I have one project with sb 6.2.9 where it doesn't work (union type props are shown in "controls" as strings) and one project with sb 6.2.9 where it works (shown as radio buttons).
I don't see any difference. Only the working project is built on create-react-app and uses '@storybook/preset-create-react-app',
- but I don't think that's missing puzzle peace...
@tobiaskraus this is a bug in React-docgen-typescript which is an indirect dependency of storybook. Check the version of that in each project and that's probably your answer
thank you @shilman for the quick answer
but both times I could see in yarn.lock (and in node_modules/) that the resolved versions where exactly the same:
react-docgen-typescript-plugin@0.6.3
react-docgen-typescript@1.22.0
@tobiaskraus are the two use cases exactly the same? can you give an example from each project?
Modal.tsx
type Size = "lg" | "md" | "sm";
export interface ModalProps {
size: Size;
// ...
}
const ModalOpened: FunctionComponent<ModalProps> = (props: ModalProps) => {
// ...
}
Modal.stories.tsx:
export default {
component: Modal,
title: "Components/modals/Modal",
} as Meta;
export const SmallEmpty: Story<ModalProps> = (args) => <Modal {...args} />;
SmallEmpty.args = {
isOpen: false,
size: "sm",
};
index.tsx
type Application = "draw" | "docu" | "other";
export interface LockBookHeaderProps {
application: Application;
// ...
}
export const LockBookHeader: React.ComponentType<LockBookHeaderProps> = (props: LockBookHeaderProps) => (
// ...
)
Header.stories.tsx
export default {
title: "LockBookHeader/LockBookHeader",
component: LockBookHeader,
} as Meta;
const Template: Story<LockBookHeaderProps> = (args) => <LockBookHeader {...args} />;
export const Default: Story<LockBookHeaderProps> = Template.bind({});
Default.args = {
application: "other",
};
I saw this issue when using storybook. when i was at work the string literal union types rendered a radio as expected. When I got home i refactored my component and was able to reproduce the issue. it seems to be determined where you put the ':Props' identifier on the react component
React.FC
import React from 'react';
export type Props = {
label: string;
type?: 'button' | 'submit' | 'reset';
className?: string;
};
const Button: React.FC<Props> = ({ type = 'button', className, label }) => (
<button type={type} className={className}>
{label}
</button>
);
export default Button;
{ type = 'button', className, label }: Props generates the correct radio args
/* eslint-disable react/button-has-type */
import React from 'react';
export interface Props {
label: string;
type?: 'button' | 'submit' | 'reset';
className?: string;
}
const Button = ({ type = 'button', className, label }: Props) => (
<button type={type} className={className}>
{label}
</button>
);
export default Button;
methinks the typescript docgen is looking at the function argument types, when the type is applied to the function name storybook does not pickup the prop types.
this was all tested using the default CSF template.
Was anyone able to solve this somehow? I am running storybook version 6.4.19 and still have this issue. Actually, I am having this issue if my type looks like this:
import type { IconType } from 'common-types';
export type IconProps = {
name: IconType; // (storybook control panel shows input field with value that was passed as prop)
...other fields
}
But it is working if I define name property directly there as string literal union type:
export type IconProps = {
name: 'add' | 'address' | 'clock'; // (storybook control panel shows select field with all the options and option passed as component prop is preselected)
...other fields
}
@Lazzaro83 can confirm that I'm seeing the exact issue you are. 6.4.19 as well.
On 6.5.8 I still can see it
Same on 6.5.9
Can confirm the issue on 6.5.9 too.
On 6.5.10, still an issue
Encountering on 6.5.15 @storybook/builder-vite & @storybook/preact
Hey, I also have this issue on storybook 6.5.16. I would like to add when it happen: type/interface must be imported from external dependency (in my case we have some common packages where the type is). I found also when I change something in component code (like add space), SB rebuild and I refresh SB page it works fine...
For me, it only works correctly when I use a named export of the component, even if I import it from the default import in the story:
export const Button =...;
export default Button;
Seems somewhat related to @tobiaskraus' case: export const LockBookHeader
vs const ModalOpened
We have the same problem with compound components in storybook 7:
export type Size = "small" | "medium" | "large";
export type ListColor = "yellow" | "orange" | "green";
export interface RootProps {
size: Size;
decorationColor: ListColor;
}
const Root: React.FC<RootProps> = (props) => {
...
};
export const List = { Root, Body, Description };
When i use List.Root in the stories, the union types are not shown in storybook.
If i add an export to Root on top of the compound component export, it works.
export type Size = "small" | "medium" | "large";
export type ListColor = "yellow" | "orange" | "green";
export interface RootProps {
size: Size;
decorationColor: ListColor;
}
export const Root: React.FC<RootProps> = (props) => {
...
};
export const List = { Root, Body, Description };
Same on 7.0.22 except it doesn't work even with named exports.
Seeing union
in the description for ^7.5.3`
I was getting this issue and I managed to fix it. The types are inferred by Typescript with react-docgen-typecript so, in case you are building a Wrapper component inside the stories.tsx the type will not be infered.
If you make a component file and then import it to stories.tsx then the infered typing will work.
Still see union in the description for ^8.0.0and ^8.0.4
and not inferred size type
I solved a similar issue by adding the following typescript configuration in the main.ts file inside the .stroybook folder
"Configures which library, if any, Storybook uses to parse React components, react-docgen or react-docgen-typescript. Set to false to disable parsing React components. react-docgen-typescript invokes the TypeScript compiler, which makes it slow but generally accurate. react-docgen performs its own analysis, which is much faster but incomplete."
I solved a similar issue by adding the following typescript configuration in the main.ts file inside the .stroybook folder
"Configures which library, if any, Storybook uses to parse React components, react-docgen or react-docgen-typescript. Set to false to disable parsing React components. react-docgen-typescript invokes the TypeScript compiler, which makes it slow but generally accurate. react-docgen performs its own analysis, which is much faster but incomplete."
Hey, This worked for me.
I solved a similar issue by adding the following typescript configuration in the main.ts file inside the .stroybook folder
"Configures which library, if any, Storybook uses to parse React components, react-docgen or react-docgen-typescript. Set to false to disable parsing React components. react-docgen-typescript invokes the TypeScript compiler, which makes it slow but generally accurate. react-docgen performs its own analysis, which is much faster but incomplete."
Worked for me too, thanks!
Describe the bug
For string literal union types, text fields should render as select dropdowns when args are supplied.
To Reproduce Steps to reproduce the behavior:
'foo' | 'bar' | 'baz'
).<Story>.args
Expected behavior
In 3, I expect to see a dropdown instead of a text field (which is the behavior when args is not supplied)
Screenshots
Here I have a story with a component that has a string literal union type repeated for props
icon
,startIcon
, andendIcon
. Onlyicon
is supplied via args (see code snippet below).Code snippets