@storybook/react#ComponentStory TypeScript Examples

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>
  );
}

Template: ComponentStory<typeof PayCard> = (args) => {
    initKea()
    preflightLogic.mount()
    eventUsageLogic.mount()
    return (
        <Provider>
            <div style={{ maxWidth: 600 }}>
                <PayCard {...args} />
            </div>
        </Provider>
    )
}

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

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

Template: ComponentStory<typeof DatePickerElement> = (args) => (
  <DateFnsProvider>
    <FormContainer defaultValues={{}} onSuccess={action('submit')}>
      <DatePickerElement {...args} />
      <br />
      <SubmitButton />
    </FormContainer>
  </DateFnsProvider>
)

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

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

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

Template: ComponentStory<typeof Image> = (args) => (
  <>
    <Image
      src={'https://source.unsplash.com/collection/94734566/1920x1080'}
      {...args}
    />
    <div>一个简单的图片, 自带Fallback机制</div>
  </>
)

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>
  );
}

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>
    );
}

Template: ComponentStory<typeof ChipCarouselComponent> = (args) => (
  <ChipCarouselComponent {...args} />
)

Template: ComponentStory<typeof NotFound> = (args) => <NotFound {...args} />

Template: ComponentStory<typeof Avatar> = (args) => <Avatar {...args} />