@storybook/react#ComponentStory TypeScript Examples

The following examples show how to use @storybook/react#ComponentStory. 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: Collaper.stories.tsx    From frontend.ro with MIT License 6 votes vote down vote up 
Template: ComponentStory<typeof CollapserComponent> = (args) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <CollapserComponent isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)} {...args}>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </CollapserComponent>
  );
}
Example #2
Source File: PayCard.stories.tsx    From posthog-foss with MIT License 6 votes vote down vote up 
Template: ComponentStory<typeof PayCard> = (args) => {
    initKea()
    preflightLogic.mount()
    eventUsageLogic.mount()
    return (
        <Provider>
            <div style={{ maxWidth: 600 }}>
                <PayCard {...args} />
            </div>
        </Provider>
    )
}
Example #3
Source File: Divider.stories.tsx    From frontend with BSD 3-Clause "New" or "Revised" License 6 votes vote down vote up 
Template: ComponentStory<typeof Divider> = (args) => {
  const isListItem = args.isListItem
  const orientation = args.orientation

  if (isListItem) {
    return (
      <ul style={{
        listStyle: 'none',
        display: 'flex',
        flexDirection: orientation === 'vertical' ? 'row' : 'column'
      }}
      >
        <li>想看</li>
        <Divider {...args} />
        <li>看过</li>
      </ul>
    )
  } else {
    return (
      <div style={{ display: orientation === 'vertical' ? 'flex' : undefined }}>
        <span>标题</span>
        <Divider {...args} />
        <span>文本</span>
      </div>
    )
  }
}
Example #4
Source File: CheckBoxGroup.stories.tsx    From ke with MIT License 6 votes vote down vote up 
Template: ComponentStory<typeof CheckBoxGroup> = (args) => {
  const getKey = (v: ObjWithLabelAndValue): string => v?.value
  const getValue = (v: ObjWithLabelAndValue): string => v?.value
  const getLabel = (v: ObjWithLabelAndValue): string => v?.label
  return (
    <ThemeProvider>
      {/* Это обёртка */}
      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
      <CheckBoxGroup {...args} value={value} getKey={getKey} getValue={getValue} getLabel={getLabel} />
    </ThemeProvider>
  )
}
Example #5
Source File: DatePickerElement.stories.tsx    From react-hook-form-mui with MIT License 6 votes vote down vote up 
Template: ComponentStory<typeof DatePickerElement> = (args) => (
  <DateFnsProvider>
    <FormContainer defaultValues={{}} onSuccess={action('submit')}>
      <DatePickerElement {...args} />
      <br />
      <SubmitButton />
    </FormContainer>
  </DateFnsProvider>
)
Example #6
Source File: index.stories.tsx    From website with MIT License 6 votes vote down vote up 
Template: ComponentStory<typeof HeroComponent> = (args) => (
  <>
    <div className="w-full min-h-screen bg-zinc-900">
      <div id="container" className="container relative pt-12 mx-auto">
        <HeroComponent {...args} />
      </div>
    </div>
  </>
)
Example #7
Source File: AILabImage1SSD.stories.tsx    From ai-lab with MIT License 6 votes vote down vote up 
imageStory: ComponentStory<typeof AILabImage> = (args, { loaded }) => {
  // @ts-ignore
  const theImage = gimmeImage(args.imageSource);
  return (
    <AILabImage
      //@ts-ignore
      ObjectDetectionUI={args.objectDectionUI}
      //@ts-ignore
      onInference={action('onInference', args.onInference)}
      //@ts-ignore
      perfCallback={action('perfCallback', args.perfCallback)}
      model={loaded.SSDModel}
      modelConfig={{
        modelType: 'ssd',
      }}
      src={theImage}
      style={{ height: '100%' }}
      visual={args.visual}
    />
  );
}
Example #8
Source File: fade-wrapper.stories.tsx    From admin with MIT License 6 votes vote down vote up 
Template: ComponentStory<typeof Fade> = (args) => {
  const [open, setOpen] = useState(false)
  return (
    <div>
      <Button size="small" variant="primary" onClick={() => setOpen(!open)}>
        Fade
      </Button>
      <Fade
        start={args.start}
        end={args.end}
        isVisible={open}
        isFullScreen={!!args.isFullScreen}
      >
        {args.children}
      </Fade>
    </div>
  )
}
Example #9
Source File: index.stories.tsx    From tailchat with GNU General Public License v3.0 6 votes vote down vote up 
Template: ComponentStory<typeof Image> = (args) => (
  <>
    <Image
      src={'https://source.unsplash.com/collection/94734566/1920x1080'}
      {...args}
    />
    <div>一个简单的图片, 自带Fallback机制</div>
  </>
)
Example #10
Source File: bottom-sheet-title.stories.tsx    From persian-mobile-datepicker with MIT License 6 votes vote down vote up 
BasePickerTemplate: ComponentStory<typeof Picker> = (args) => {
  const [selectedDateValue, setSelectedDateValue] = React.useState<string>();
  const [selectedDateEvents, setSelectedDateEvents] = React.useState<
    Array<Event>
  >([]);

  function handleOnChange(data: WheelPickerSelectEvent) {
    setSelectedDateValue(format(data.date!, 'd MMMM yyyy'));
    setSelectedDateEvents(data.events);
    action('onClick')(data);
  }

  return (
    <BaseTemplate value={selectedDateValue!} events={selectedDateEvents!}>
      <Picker {...args} onChange={handleOnChange} onSubmit={handleOnChange} />
    </BaseTemplate>
  );
}
Example #11
Source File: Badge.stories.tsx    From web3uikit with MIT License 6 votes vote down vote up 
All: ComponentStory<typeof Badge> = () => {
    return (
        <div>
            <div style={{ display: 'flex', gap: '5px' }}>
                <Badge text="Badge1" textVariant="h1" />
                <Badge text="Badge1" textVariant="h1" state="success" />
                <Badge text="Badge1" textVariant="h1" state="warning" />
                <Badge text="Badge1" textVariant="h1" state="danger" />
            </div>
            <br />
            <Badge text="Badge2" textVariant="h2" />
            <br />
            <Badge text="Badge3" textVariant="h3" />
            <br />
            <Badge text="Badge4" textVariant="h4" />
            <br />
            <Badge text="Badge_sub1" textVariant="subtitle1" />
            <br />
            <Badge text="Badge_sub2" textVariant="subtitle2" />
            <br />
            <Badge text="Badge_body18" textVariant="body18" />
            <br />
            <Badge text="Badge_body16" textVariant="body16" />
            <br />
            <Badge text="Badge_cap14" textVariant="caption14" />
            <br />
            <Badge text="Badge_cap12" textVariant="caption12" />
            <br />
        </div>
    );
}
Example #12
Source File: ChipCarousel.stories.tsx    From frontend.ro with MIT License 5 votes vote down vote up 
Template: ComponentStory<typeof ChipCarouselComponent> = (args) => (
  <ChipCarouselComponent {...args} />
)
Example #13
Source File: NotFound.stories.tsx    From posthog-foss with MIT License 5 votes vote down vote up 
Template: ComponentStory<typeof NotFound> = (args) => <NotFound {...args} />
Example #14
Source File: Avatar.stories.tsx    From frontend with BSD 3-Clause "New" or "Revised" License 5 votes vote down vote up 
Template: ComponentStory<typeof Avatar> = (args) => <Avatar {...args} />