strothj / react-docgen-typescript-loader

Webpack loader to generate docgen information from Typescript React components.
Other
360 stars 47 forks source link

Working even though the story name doesn't match #6

Closed thupi closed 6 years ago

thupi commented 6 years ago

Hi,

As i was testing i had a hard time debugging why some of my stories wont populate the prop table.

After trying severel ways of defining stories i discovered that the main thing one have to do in order to get the docgen working is to have a named export :-)

This code below works for my setup at least with have a story name that matches :-)

LanguageTerm.stories.tsx

import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { LanguageTerm } from './LanguageTerm';

//
storiesOf('Components/Localisation', module).add(
  'LanguageTerm - simple',
  withInfo({ inline: true })(() => (
    <LanguageTerm term="LTerm">Term</LanguageTerm>
  ))
);

LanguageTerm.tsx

import * as React from 'react';
import { inject, observer } from 'mobx-react';

// Constants
import { ENV } from 'constants/environment';

//
interface IProps {
  term: string;
}
export const LanguageTerm: React.SFC<IProps> = props => {
  return <span>{ENV.DEVELOPMENT ? props.children : props.term}</span>;
};

export default inject('store')(observer(LanguageTerm));

The docs says one have to use "storiesOf("...", module).add("ColorButton", ...)" in order to get the docgen detecting the component. That might not be the case :-) ?

Maybe it's my build config that is unsual but at least i think it's worth knowing :-)

strothj commented 6 years ago

I've updated the README to address this, thank you.