@storybook/addons#StoryFn TypeScript Examples

The following examples show how to use @storybook/addons#StoryFn. 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: utils.tsx    From disco-cube-admin with MIT License 6 votes vote down vote up 
commonDecorator = (fn: StoryFn<StoryFnReactReturnType>) => (
  <RootStyles>{fn()}</RootStyles>
)
Example #2
Source File: Divider.stories.tsx    From natds-rn with ISC License 6 votes vote down vote up 
Default: StoryFn<ReactNode> = () => (
  <StoryContainer title="Standard">
    <View
      style={{
        height: 50,
        width: '100%',
        justifyContent: 'center'
      }}
    >
      <Divider />
    </View>
  </StoryContainer>
)
Example #3
Source File: Divider.stories.tsx    From natds-rn with ISC License 6 votes vote down vote up 
Variants: StoryFn<ReactNode> = () => (
  <StoryWrapper title="Variants">
    <StoryContainer title="FullBleed">
      <View
        style={{
          height: 50,
          width: '100%',
          justifyContent: 'center'
        }}
      >
        <Divider />
      </View>
    </StoryContainer>
    <StoryContainer title="Inset">
      <View
        style={{
          height: 50,
          width: '100%',
          justifyContent: 'center'
        }}
      >
        <Divider type="inset" />
      </View>
    </StoryContainer>
    <StoryContainer title="Middle">
      <View
        style={{
          height: 50,
          width: '100%',
          justifyContent: 'center'
        }}
      >
        <Divider type="middle" />
      </View>
    </StoryContainer>
  </StoryWrapper>
)
Example #4
Source File: Tag.stories.tsx    From natds-rn with ISC License 6 votes vote down vote up 
description: StoryFn<ReactNode> = () => `
- - -

  ### NOTE:
  This component is available in the following variants:

  - ✅ Standard

With the following attribute status:

  - **Attributes:**
    - **Size:**
      - ✅ \`Standard\`
      - ✅ \`Small\`
    - **Color:**
      - ✅ \`Primary\`
      - ✅ \`Secondary\`
      - ✅ \`Alert\`
      - ✅ \`Success\`
      - ✅ \`Link\`
      - ✅ \`Warining\`
    - **Position:**
      - ✅ \`Center\`
      - ✅ \`Left\`
      - ✅ \`Right\`

- - -
`
Example #5
Source File: Tag.stories.tsx    From natds-rn with ISC License 6 votes vote down vote up 
Variants: StoryFn<ReactNode> = () => (
  <StoryWrapper title="Variants">
    <StoryContainer title="Default">
      <Tag text="Design System" borderPosition="default" />
    </StoryContainer>
    <StoryContainer title="Right">
      <Tag text="Design System" borderPosition="right" />
    </StoryContainer>
    <StoryContainer title="Left">
      <Tag text="Design System" borderPosition="left" />
    </StoryContainer>
  </StoryWrapper>
)
Example #6
Source File: Tag.stories.tsx    From natds-rn with ISC License 6 votes vote down vote up 
Sizes: StoryFn<ReactNode> = () => (
  <>
    <StoryContainer title="Standard">
      <Tag text="Design System" size="standard" />
    </StoryContainer>
    <StoryContainer title="Small">
      <Tag text="Design System" size="small" />
    </StoryContainer>
  </>
)
Example #7
Source File: Tag.stories.tsx    From natds-rn with ISC License 6 votes vote down vote up 
Colors: StoryFn<ReactNode> = () => (
  <>
    <StoryContainer title="Primary">
      <Tag text="Design System" color="primary" />
    </StoryContainer>
    <StoryContainer title="Secondary">
      <Tag text="Design System" color="secondary" />
    </StoryContainer>
    <StoryContainer title="Alert">
      <Tag text="Design System" color="alert" />
    </StoryContainer>
    <StoryContainer title="Warning">
      <Tag text="Design System" color="warning" />
    </StoryContainer>
    <StoryContainer title="Success">
      <Tag text="Design System" color="success" />
    </StoryContainer>
    <StoryContainer title="Link">
      <Tag text="Design System" color="link" />
    </StoryContainer>
  </>
)
Example #8
Source File: Tag.stories.tsx    From natds-rn with ISC License 6 votes vote down vote up 
Interactive: StoryFn<ReactNode> = () => (
  <StoryContainer title="Interactive">
    <Tag
      text={text('Text', 'Design System')}
      size={select('Size', ['small', 'standard'], 'small') as TagSizes}
      color={select('Color', tagColors, 'primary') as TagColors}
      borderPosition={select('Border Position', ['default', 'left', 'right'], 'default') as TagPositions}
    />
  </StoryContainer>
)
Example #9
Source File: Tag.stories.tsx    From natds-rn with ISC License 5 votes vote down vote up 
Default: StoryFn<ReactNode> = () => (
  <StoryContainer title="Standard">
    <Tag text="Design System" />
  </StoryContainer>
)
Example #10
Source File: withTheme.tsx    From docs-components with MIT License 5 votes vote down vote up 
export default function withTheme(story: StoryFn) {
    const theme = getThemeSelector();
    document.body.classList.add('yc-root');
    document.body.classList.toggle('yc-root_theme_light', theme === 'light');
    document.body.classList.toggle('yc-root_theme_dark', theme === 'dark');

    return story();
}