@storybook/react#storiesOf TypeScript Examples

The following examples show how to use @storybook/react#storiesOf. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Ballot.stories.tsx    From panvala with Apache License 2.0 6 votes vote down vote up 
storiesOf('Ballot', module)
  .add('Both categories', () => {
    return (
      <Wrapper slates={slates} ballot={openBallot}>
        <Vote />
      </Wrapper>
    );
  })
  .add('Grants only', () => {
    return (
      <Wrapper slates={grantSlates} ballot={openBallot}>
        <Vote />
      </Wrapper>
    );
  })
  .add('Governance only', () => {
    return (
      <Wrapper slates={governanceSlates} ballot={openBallot}>
        <Vote />
      </Wrapper>
    );
  })
  .add('Index page', () => {
    return (
      <Wrapper slates={slates} ballot={openBallot}>
        <Ballots />
      </Wrapper>
    );
  });
Example #2
Source File: ExpandableText.stories.tsx    From ui with MIT License 6 votes vote down vote up 
storiesOf("ExpandableText", module)
  .add("Default", () => (
    <div style={{ width: divWidth }}>
      <ExpandableText text={fourLinetext} />
    </div>
  ))
  .add("2 lines", () => (
    <div style={{ width: divWidth }}>
      <ExpandableText text={fourLinetext} maxLine={2} />
    </div>
  ))
  .add("Text does not exceed lines", () => (
    <div style={{ width: divWidth }}>
      <ExpandableText text={fourLinetext} maxLine={5} />
    </div>
  ));
Example #3
Source File: CompareApiBreadcrumbs.stories.tsx    From substrate-api-explorer with Apache License 2.0 6 votes vote down vote up 
storiesOf('COMPONENTS|CompareApiBreadcrumbs', module)
  .addDecorator(story => (
    <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
  ))
  .add('default', () => {
    const apiNameKnob = text(
      'apiName',
      'wss://kusama-rpc.polkadot.io/',
      'props'
    )
    const urlKnob = text(
      'apiexplorer.polkalert.com/compare-api/',
      'query/staking',
      'other'
    )

    return (
      <div style={{ padding: '24px' }}>
        <CompareApiBreadcrumbs
          apiName={apiNameKnob}
          match={{ url: `/compare-api/${urlKnob}` }}
        />
      </div>
    )
  })
Example #4
Source File: CustomOrbit.stories.tsx    From react-planet with MIT License 6 votes vote down vote up 
storiesOf('Planet', module).add('custom orbit', () => {
	const classes = useStyles();

	return withTheme(
		<div className={classes.root}>
			<Planet
				orbitStyle={(defaultStyle) => ({
					...defaultStyle,
					borderWidth: 4,
					borderStyle: 'dashed',
					borderColor: '#6f03fc',
				})}
				centerContent={<div className={classes.planetSmall} />}
				open
				orbitRadius={200}
				autoClose
			>
				{generateSatellites(3)}
			</Planet>
		</div>
	);
});
Example #5
Source File: Avatar.stories.tsx    From chroma-react with MIT License 6 votes vote down vote up 
storiesOf('Components/Avatar', module)
  .add('Letters', () => <AvatarTextStory />, {
    readme: { content: defaultMd },
  })
  .add('Images', () => <AvatarImageStory />, {
    readme: { content: defaultMd },
  })
  .add('Badges', () => <AvatarsWithBadges />, {
    readme: { content: badgesMd },
  });
Example #6
Source File: ActionIcon.story.tsx    From mantine with MIT License 6 votes vote down vote up 
storiesOf('ActionIcon', module)
  .add('Styles API', () => (
    <StylesAPIStory name="ActionIcon" component={ActionIcon} props={{ children: '$' }} />
  ))
  .add('Default radius on theme', () => (
    <MantineProvider theme={{ defaultRadius: 0 }}>
      <ActionIcon variant="filled" m={40} size="xl">
        $
      </ActionIcon>
    </MantineProvider>
  ))
  .add('Default props on MantineProvider', () => (
    <MantineProvider defaultProps={{ ActionIcon: { color: 'blue', radius: 'xl' } }}>
      <ActionIcon variant="filled" m={40} size="xl">
        $
      </ActionIcon>
    </MantineProvider>
  ));
Example #7
Source File: LinkPreview.stories.tsx    From react-link-preview with MIT License 5 votes vote down vote up 
storiesOf('LinkPreview', module)
  .add('Default', () => <LinkPreview url='https://barcauniversal.com' />)
  .add('Article', () => (
    <LinkPreview url='https://barcauniversal.com/predicted-barcelona-lineup-against-eibar/' />
  ))
  .add('Text align right', () => (
    <LinkPreview
      url='https://barcauniversal.com/predicted-barcelona-lineup-against-eibar/'
      textAlign='right'
    />
  ))
  .add('Custom image height', () => (
    <LinkPreview
      url='https://barcauniversal.com/predicted-barcelona-lineup-against-eibar/'
      imageHeight='50vh'
    />
  ))
  .add('YouTube link', () => (
    <LinkPreview url='https://www.youtube.com/watch?v=JKJdGNHW1xk' width='30vw' />
  ))
  .add('Twitter link', () => (
    <LinkPreview url='https://twitter.com/BarcaUniversal/status/1396232440314830856' width='20vw' />
  ))
  .add('Reddit link', () => (
    <LinkPreview
      url='https://www.reddit.com/r/LifeProTips/comments/nivqb3/lpt_if_your_your_largest_hex_key_is_to_small_you/'
      width='20vw'
      descriptionLength={100}
    />
  ))
  .add('Fallback', () => <LinkPreview url='https://webzy.dev' fallback={<div>Fallback</div>} />)
  .add('Colors', () => (
    <LinkPreview
      url='https://www.youtube.com/watch?v=dQw4w9WgXcQ'
      backgroundColor='black'
      primaryTextColor='white'
      secondaryTextColor='#ccc'
      borderColor='red'
      width='30vw'
      margin='30px auto'
    />
  ))
  .add('Fallback image', () => (
    <LinkPreview
      url='https://google.com'
      width='30vw'
      fallbackImageSrc='https://www.aljazeera.com/wp-content/uploads/2021/08/2019-12-07T000000Z_879038429_RC2LQD9L67FQ_RTRMADP_3_SOCCER-SPAIN-FCB-RCD-REPORT.jpg?resize=770%2C513'
    />
  ))
  .add('Using custom fetcher', () => (
    <LinkPreview url='stripe.com' fetcher={customFetcher} fallback={<div>Fallback</div>} />
  ))
  .add('Image onError', () => (
    <LinkPreview url='https://www.brianfriel.xyz/learning-how-to-build-on-solana/' width='30vw' />
  ))
  .add('Explicit image', () => (
    <LinkPreview
      url='https://barcauniversal.com/predicted-barcelona-lineup-against-eibar/'
      width='30vw'
      explicitImageSrc='https://barcauniversal.com/wp-content/uploads/2021/05/1002622558-2048x1365.jpg'
    />
  ))
  .add('Explicit no image in case of no image in metadata', () => (
    <LinkPreview url='https://barcauniversal.com' width='30vw' showPlaceholderIfNoImage={false} />
  ));
Example #8
Source File: AccordionMenu.stories.tsx    From nhsuk-react-components-extensions with MIT License 5 votes vote down vote up 
stories = storiesOf('Accordion Menu', module)
Example #9
Source File: CreateProposal.stories.tsx    From panvala with Apache License 2.0 5 votes vote down vote up 
storiesOf('Create a Proposal', module).add('ProposalForm', () => {
  return (
    <StoryWrapper>
      <CreateProposal />
    </StoryWrapper>
  );
});
Example #10
Source File: sample-list.tsx    From plugin-vscode with Apache License 2.0 5 votes vote down vote up 
storiesOf("Ballerina By Example", module)
  .add("Example List Page", () => (
    <SamplesList getSamples={getBBEs} openSample={openSample} />
  ));
Example #11
Source File: welcome.stories.tsx    From react-component-library with BSD 3-Clause "New" or "Revised" License 5 votes vote down vote up 
stories = storiesOf('Intro/Overview', module)