Skip to content
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

Open
Clebiez opened this issue Sep 9, 2019 · 19 comments
Open

Builded Storybook doesn't show propTypes #46

Clebiez opened this issue Sep 9, 2019 · 19 comments

Comments

@Clebiez
Copy link

Clebiez commented Sep 9, 2019

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

@Clebiez Clebiez changed the title Builded Storybook doesn't show propType Builded Storybook doesn't show propTypes Sep 9, 2019
@hipstersmoothie
Copy link
Owner

Can I get a minimal reproduction? They show up fine in my built storybook.

@bradennapier
Copy link

bradennapier commented Apr 25, 2020

Mine don't show up either -- using typescript and works fine in the addon-docs but not here.

image

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.

@hipstersmoothie
Copy link
Owner

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.

@hipstersmoothie
Copy link
Owner

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?

@bradennapier
Copy link

I didn’t do anything. I just installed storybook and did no configuration changes or updates since I used create react app with typescript.

@bradennapier
Copy link

For reference, here is what the addon-docs renders:

image

@hipstersmoothie
Copy link
Owner

I can take a look but the problem stems from this addon depending on the usage of react-docgen-typescript-loader. which it seems has changed in storybook 6.0 (the typescript preset used to include this.

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 react-docgen-typescript handle some pretty hard cases.

@hipstersmoothie
Copy link
Owner

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 />;

@bradennapier
Copy link

Well so far i know it only says union for the addon-docs when its a union of scripts which is a huge problem for me - that is pretty useless.

I am using v5 since v6 isn't out and has no docs i have seen though.

@bradennapier
Copy link

@hipstersmoothie

Your addon shows:

image

addon-docs shows:

image

@hipstersmoothie
Copy link
Owner

The updates I made to react-docgen-typescript were just released so you might not have them. is 1.16.4 installed?

@bradennapier
Copy link

bradennapier commented Apr 26, 2020

Probably not since I have not installed that dependency :-) -- just let the native storybook CRA preset do it all for me.

@bradennapier
Copy link

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.

image

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 preview.ts

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())

@hipstersmoothie
Copy link
Owner

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?

@bradennapier
Copy link

bradennapier commented Apr 26, 2020

By the way - i used yarn resolutions and forced 1.16.4 and i dont see anything different with that example you gave me

"react-docgen-typescript": "^1.16.4",
"react-docgen-typescript-loader": "^3.7.2",

with

"resolutions": {
    "react-docgen-typescript": "^1.16.4",
    "react-docgen-typescript-loader/**/react-docgen-typescript": "^1.16.4"
  },

-- confirmed that it was indeed using the version i expected

image

@hipstersmoothie
Copy link
Owner

Hmm interesting. I'll have to dig deeper. At least your components work now!

@bradennapier
Copy link

bradennapier commented Apr 26, 2020

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

@JaLe29
Copy link

JaLe29 commented Oct 26, 2020

I am having some problem, I don't understand what is a solution?

@hipstersmoothie
Copy link
Owner

@JaLe29 if you provide a reproduction repo i'll happily debug

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants