-
Notifications
You must be signed in to change notification settings - Fork 14
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Builded Storybook doesn't show propTypes #46
Comments
Can I get a minimal reproduction? They show up fine in my built storybook. |
Mine don't show up either -- using typescript and works fine in the addon-docs but not here. interface Props {
/** The react-router path to render on click */
to: string;
children: React.ReactNode;
/** Is the button currently disabled? */
disabled?: boolean;
/** Should the button use inline css or block? */
inline?: boolean;
/** The color preset to use with the button */
color?: Colors;
}
function ButtonRouterLink({
to,
children,
inline = false,
disabled = false,
color = 'blue',
}: Props) {
return (
<StyledLink
to={to}
isInline={inline}
isDisabled={disabled}
colorName={color}
>
{children}
</StyledLink>
);
}
export { ButtonRouterLink };
export default ButtonRouterLink; have tried in all the forms i can think of and that are shown. |
it's odd it works in the docs tab but not here. I think you just need to change it to interface Props {
/** The react-router path to render on click */
to: string;
children: React.ReactNode;
/** Is the button currently disabled? */
disabled?: boolean;
/** Should the button use inline css or block? */
inline?: boolean;
/** The color preset to use with the button */
color?: Colors;
}
export function ButtonRouterLink({
to,
children,
inline = false,
disabled = false,
color = 'blue',
}: Props) {
return (
<StyledLink
to={to}
isInline={inline}
isDisabled={disabled}
colorName={color}
>
{children}
</StyledLink>
);
}
export default ButtonRouterLink; The other thing that comes to mind is that the base docgen stuff could be overriding the typescript docgen? an easy way to test this is to log in your component, open dev tools, follow the link to the non sourcemapped code, and you see the docgen information that's injected. |
So looking at their docs it seems like react-docgen now does some typescript but it seems kind of limited. Are you sure you've added https://github.com/intuit/design-systems-cli/blob/master/plugins/storybook/.storybook/webpack.config.js#L63 to you project? |
I didn’t do anything. I just installed storybook and did no configuration changes or updates since I used create react app with typescript. |
I can take a look but the problem stems from this addon depending on the usage of Could you share the repo with me? I'm also interested to see how it documents complex props. I just spent a lot of time making |
Like how does it handle interface StackBaseProps<T> {
as: T;
hasWrap?: boolean;
}
interface StackJustifyProps {
/** The foo prop should not repeat the description */
foo?: 'blue';
/** You cannot use gap when using a "space" justify property */
gap?: never;
}
interface StackGapProps {
/** The foo prop should not repeat the description */
foo?: 'red';
/** The space between children */
gap?: number;
}
type StackProps<T> = StackBaseProps<T> & (StackGapProps | StackJustifyProps);
/** ComplexGenericUnionIntersection description */
export const ComplexGenericUnionIntersection = <T extends any>(
props: StackProps<T>
) => <div />; |
Well so far i know it only says I am using v5 since v6 isn't out and has no docs i have seen though. |
Your addon shows: addon-docs shows: |
The updates I made to react-docgen-typescript were just released so you might not have them. is |
Probably not since I have not installed that dependency :-) -- just let the native storybook CRA preset do it all for me. |
So would be good to ahve some docs around this since everything else I have read says "just use the preset" I made some changes and got the types -- but no difference for that type you had me try. My main.js needed to become const path = require('path');
module.exports = {
stories: ["../src/stories/**/*.stories.(ts|tsx|js|jsx)"],
addons: [
'@storybook/preset-create-react-app',
'@storybook/preset-typescript',
'@storybook/addon-actions',
'@storybook/addon-links',
'@storybook/addon-cssresources/register',
'@storybook/addon-knobs',
'@storybook/addon-viewport/register',
'@storybook/addon-backgrounds/register',
'@storybook/addon-storysource',
'storybook-addon-react-docgen/register',
{
name: "@storybook/addon-docs",
options: {
configureJSX: true,
},
},
],
webpackFinal: async config => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
use: [
// Optional
{
loader: require.resolve('react-docgen-typescript-loader'),
options: {
// Provide the path to your tsconfig.json so that your stories can
// display types from outside each individual story.
tsconfigPath: path.resolve(__dirname, "../tsconfig.json"),
propFilter(prop) {
if (prop.parent) {
return !prop.parent.fileName.includes('@types/react');
}
return true;
}
},
},
],
});
config.resolve.extensions.push('.ts', '.tsx');
return config;
},
}; and my import { addParameters, addDecorator } from '@storybook/react';
import { withPropsTable } from 'storybook-addon-react-docgen';
import { Fragment } from 'react';
import RouterDecorator from 'storybook-react-router';
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
import { withKnobs } from "@storybook/addon-knobs";
import { withInfo } from '@storybook/addon-info';
// import { withSmartKnobs } from 'storybook-addon-smart-knobs';
import styled from 'styled-components';
import 'style.css';
import './style.overrides.css';
addDecorator(withPropsTable({
propTablesExclude: [
styled.div``,
styled.div,
'styled.div',
'',
Fragment,
'StoryRouter'
]
}))
addDecorator(withInfo);
addParameters({
backgrounds: [
{ name: 'dark', value: 'black', default: true },
{ name: 'light', value: 'white' },
],
viewport: {
viewports: INITIAL_VIEWPORTS,
},
});
addDecorator(RouterDecorator());
// addDecorator(withSmartKnobs());
// addDecorator(withKnobs()) |
Yeah since I wrote that in the readme they actually changed how that preset works. We should probably ship our own preset until then. Would you mind adding what you have to the docs for now? |
By the way - i used yarn resolutions and forced 1.16.4 and i dont see anything different with that example you gave me
with
-- confirmed that it was indeed using the version i expected |
Hmm interesting. I'll have to dig deeper. At least your components work now! |
yessir - but def gonna run into that complex typing when I actually start using it instead of just playing with a fake component I made :-) thanks for the assist. will try to make a PR on the docs |
I am having some problem, I don't understand what is a solution? |
@JaLe29 if you provide a reproduction repo i'll happily debug |
When you start the storybook like a devtool, all propType are showed.
When you build the storybook in order to deploy it like a production app, propTypes are not available in the panel.
I think this is because prop-types package replace during the bundling all PropTypes validators by a noop function as you can see here : https://github.com/facebook/prop-types/blob/master/index.js
But the addon-info still works in production mode. So I think they are a tips to get this propTypes even during the build phase.
Doc pages about propTypes : https://reactjs.org/docs/typechecking-with-proptypes.html
The text was updated successfully, but these errors were encountered: