Open chrisahardie opened 4 years ago
I think this is the same issue I ran into with low-level styled components:
$ fgrep -e @storybook -e styled -e '"react"' package.json
"@storybook/addon-essentials": "^6.0.16",
"@storybook/react": "6.0.16",
"react": "16.13.1",
"styled-components": "5.1.1",
Example/index.js:
import PropTypes from 'prop-types';
import styled from 'styled-components';
export const Example = styled.p`
background-color: ${props => props.color};
height: 100px;
width: 100px;
`;
Example.propTypes = {
/** background color */
color: PropTypes.string.isRequired,
};
Example/index.stories.js:
import React from 'react';
import {Example} from '.';
export default {
component: Example,
title: 'Example',
};
export const Default = args => <Example {...args} />;
Default.args = {
color: 'red',
};
If I wrap the component in a dummy wrapper...
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
const _Example = styled.p`
background-color: ${props => props.color};
height: 100px;
width: 100px;
`;
export const Example = args => <_Example {...args} />
Example.propTypes = {
/** background color */
color: PropTypes.string.isRequired,
};
...then the documentation and the auto-generated controls work:
But of course I don't want to do that, because it adds another level in the React component browser every time I use the component. Dumping the component to the browser console could hint at the root cause: it is an object and not a function that returns react components:
I've encountered the same in trying to migrate a Design System to Storybook 6.
@sdalonzo an upvote on the original issue is the best way to help get this fixed (aside from contributing a fix)
@stefanb2 if you want a function that returns react components, you could do it this way:
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
const _Example = styled.p`
background-color: ${props => props.color};
height: 100px;
width: 100px;
`;
export function Example({ children, ...props}) {
return <_Example {...props}>{children}</_Example>
}
Example.propTypes = {
/** background color */
color: PropTypes.string.isRequired,
};
and in the file example.stories.js you use it this way:
import React from "react"
import { Example } from "../components/Example"
import { action } from "@storybook/addon-actions"
export default {
title: "Example",
component: Example,
}
export const BackgroundColor = (args) => (
<Example {...args} onClick={action("Clicked!")}>
This is a button
</Example>
)
BackgroundColor.args = {
color: "#aaff33",
}
Still not working =(
I tried a lot of work arounds and nothing.
I don't want to write these props on docs manually.
I'm using MDX with Styled components here.
@ebellumat This is the workaround I used without touching the original component:
// Button.stories.tsx
import React from 'react'
import { Meta, Story } from '@storybook/react'
import { Button, ButtonProps } from './Button'
// This wrapper is needed to be able to generate the props table/controls automatically
export const ButtonWrapper = (props: ButtonProps) => (
<Button {...props} />
)
ButtonWrapper.storyName = 'Button'
export default {
title: 'Components/Button',
component: ButtonWrapper,
} as Meta
@marciobarrios I just tested your suggestion and unfortunately it doesn't solve the issue for low-level styled components :-(
@stefanb2 if you prepare a Codesandbox I can take a look, in my case it solved the styled-component issue auto generating props table and controls.
@marciobarrios see my full example code in comment https://github.com/storybookjs/storybook/issues/11933#issuecomment-678291197 above.
My current setup is:
$ fgrep -e @storybook -e styled -e '"react"' package.json
"@storybook/addon-essentials": "^6.0.21",
"@storybook/react": "6.0.21",
"react": "16.13.1",
"styled-components": "5.2.0",
There seems to be at least one improvement: any prop listed in story args
is now shown, but without documentation.
I was actually able to fix this issue simply by renaming my component file names to use .tsx
instead of .ts
. I was using the .ts
extension as there was no JSX used in the file (only using Styled Components).
After this fix, all my props showed up with the component description populated with the JSDoc as well. However, the theme
, as
and forwardedAs
props from Styled Components were shown as well. To remove them, I added this configuration in my .storybook/main.js
file:
typescript: {
reactDocgenTypescriptOptions: {
propFilter: prop =>
(prop.parent ? !/node_modules/.test(prop.parent.fileName) : true) &&
excludedProps.indexOf(prop.name) < 0,
},
}
I hope this helps someone!
Come from https://github.com/storybookjs/storybook/issues/12387 .
Is there any workaround for styled-components in JavaScript?
// Button.jsx
function BaseButton({title, onClick, className}) {
return (
<div className={className}>
<h1>{ title }</h1>
<button onClick={onClick}>Click me!</button>
</div>
);
}
const Button = styled(Button)`/* ... */`
Button.propTypes = {
title: PropTypes.string,
};
Button.defaultProps = {
title: 'default title',
};
export default Button;
I want to document the Button.jsx
(which is a styled component) with Button.propTypes
. And I can't wrap it with another React component. Because I need to use the Button
as a selector like this:
import styled from 'styled-components'
import Button from './Button.jsx'
const App = styled.div`
${Button} {
color: 'red';
}
`
Is there any way to auto-create args table for Button.jsx
?
@YuCJ you could do a workaround like:
export const BaseButton = ({ ... }) => ...;
BaseButton.propTypes = { ... };
BaseButton.defaultProps = { ... };
export const Button = styled(BaseButton)...;
Button.propTypes = ...
Button.defaultProps = ...
Then in your stories file:
import { Button, BaseButton } from './Button';
export default {
title: ...
component: BaseButton,
...
}
export const Story1 = () => <Button {...} />;
What worked for me, was removing Story<Props>
, so I replaced this:
export const MyStory: Story<Props> = args => <MyComponent {...args} />
With this:
export const MyStory = (args: Props) => <MyComponent {...args} />
I now get the full props table. And MyComponent
is a pure styled-component, no need for React wrappers.
@shilman I've opened a repo which demonstrates that none of the above workarounds work for this very simple typescript + styled components wrapper:
export const StyledButton = styled(Button)`
background: red;
`;
Workaround 1: https://github.com/storybookjs/storybook/issues/11933#issuecomment-827540992 Workaround 2: https://github.com/storybookjs/storybook/issues/11933#issuecomment-829475230
Workaround 3: https://github.com/storybookjs/storybook/issues/11933#issuecomment-867868396
It's one issue that the types are not automatically deduced when there is a styled components wrapper.
But it is a totally different issue that even when manually specifying types like this that it doesn't display them:
export default {
title: "Example/ButtonWorkAroundOne",
component: StyledButton,
} as Meta<ButtonProps>;
export const StyledButtonWrapper = (args: ButtonProps) => (
<StyledButton {...args} label="button" />
);
And one more issue to top it off, is that the component src is shown with the styled wrapper rather than the src of the story:
@rdotg I was able to resolve the <Styled(Button) .../>
naming issue by adding babel-plugin-styled-components
to my babel config (not sure if you've tried that yet). However, I'm still experiencing the other issues you mentioned even after trying all of the work arounds.[Edit] I was able to get the "wrapped component" workaround by moving it into the component file (as opposed to the story file) 🤦♂️
Any news on a solution from Storybook?
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!
Ping to maintain the issue
This is still an issue in "@storybook/react": "^6.4.17"
any solution for .mdx
files?
Ref
thanks, helped me a lot, easy to customize
The best work arounds I've found for this are...
CSF + Typescript:
// MyComponent.tsx
interface MyComponentProps { ... }
export const MyComponent = (props: MyComponentProps) => { ... }
/**
* Docs for MyComponent go here in order to show up in Storybook.
* It's a bummer because it breaks my IDE docs.
*/
export const MyComponentStorybook = (props: MyComponentProps) => <MyComponent {...props} />
// MyComponent.stories.tsx
import { MyComponentStorybook as MyComponent, MyComponentProps } from './MyComponent'
export default {
component: MyComponent,
// ArgTypes can be customized
argTypes: { ... }
...
}
export const Template = (props: MyComponentProps) => <MyComponent {...props} />
MDX + Typescript:
// MyComponent.tsx
interface MyComponentProps { ... }
/**
* Docs for MyComponent go here.
* This fixes my IDE docs but it breaks ArgType customizations :'(
*/
export const MyComponent = (props: MyComponentProps) => { ... }
export const MyComponentStorybook = (props: MyComponentProps) => <MyComponent {...props} />
// MyComponent.stories.mdx
import { MyComponentStorybook, MyComponent, MyComponentProps } from './MyComponent'
<Meta
title={meta.title}
component={MyComponent}
// ArgType customizations don't work
/>
# MyComponent
<Description of={MyComponent} />
<Canvas>
<Story name="MyComponent">
<MyComponent />
</Story>
</Canvas>
<ArgsTable of={MyComponentStorybook} />
👋 Hello there! I've written a blog post that references this issue! You can view the applicable excerpt here: Styled Components: If using JS and PropTypes, ArgsTable won’t pull props
GitHub discussion: https://github.com/storybookjs/storybook/discussions/18915
✌️
I have tried all of the above, work arounds an none of them work, I have styled components and also am pulling types from a third party lib and my props come through but the third party ones dont? any reason for this?
I have the same issue with storybook 7.0.6.
My workaround is the following:
import { CSSProp, DefaultTheme } from "styled-components";
export interface StyledComponentsBaseProps {
as?: keyof JSX.IntrinsicElements;
css?: CSSProp<DefaultTheme>;
}
export interface Props
extends StyledComponentsBaseProps,
HTMLAttributes<HTMLDivElement> {
color?: "bright" | "dark";
}
export const Component: React.FC<Props> = styled.div<Props>`
${({ color = "black" }) => css`
color: ${color === "bright"
? 'white'
: 'black'};
`}}
`;
The downside are:
Found a (TSX) way that suits my use case.
Import base and styled versions, and use the base version in the Meta and the styled version in the Story.
One caveat that threw me for a loop: only picks up comments in /** something */
format.
import React from 'react';
import {StoryFn, Meta} from '@storybook/react';
import StyledComponent, {Component} from './Component';
import type {ComponentType} from './Component';
export default {
component: Component
} as Meta
const Template: StoryFn<ComponentType> = (args) => <StyledComponent {...args} />;
export const Default = Template.bind({});
Describe the bug
Please note this is for the pre-release version as styled-components were not able to be documented until this issue was resolved.
When documenting a styled-component, not all props are rendered out into the props table.
To Reproduce Steps to reproduce the behavior:
npx sb@next upgrade --prerelease
yarn add babel-loader --dev
../src/**/*.stories.(ts|tsx|js|jsx|mdx)
to../src/**/*.stories.@(ts|tsx|js|jsx|mdx)
disabled
andtype
propsExpected behavior
The props table should include all props.
Screenshots
Code snippets
System: