@storybook/react#Story TypeScript Examples

The following examples show how to use @storybook/react#Story. 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: TextField.stories.tsx    From atlas with GNU General Public License v3.0 7 votes vote down vote up 
TemplateWithUncontrolledInput: Story<TextFieldProps> = (args) => {
  const ref = useRef<HTMLInputElement | null>(null)
  return (
    <>
      <TextField {...args} ref={ref} />
      <Button onClick={() => alert(ref.current?.value)}>Show input value</Button>
    </>
  )
}
Example #2
Source File: QrReader.stories.tsx    From react-qr-reader with MIT License 6 votes vote down vote up 
Template: Story<QrReaderProps> = (args) => {
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);

  return (
    <div style={styles.container}>
      <QrReader
        {...args}
        onResult={(result, error) => {
          if (result) {
            setData(result);
          }

          if (error) {
            setError(error.message);
          }
        }}
      />
      <p>The value is: {JSON.stringify(data, null, 2)}</p>
      <p>The error is: {error}</p>
    </div>
  );
}
Example #3
Source File: Banner.stories.tsx    From atlas with GNU General Public License v3.0 6 votes vote down vote up 
Template: Story<BannerProps> = (args) => {
  const updateDismissedMessages = usePersonalDataStore((state) => state.actions.updateDismissedMessages)
  return (
    <>
      <Banner {...args} />
      <div style={{ marginTop: 16 }}>
        <Button
          onClick={() => {
            updateDismissedMessages(args.id, false)
          }}
        >
          Reset
        </Button>
      </div>
    </>
  )
}
Example #4
Source File: SQFormButton.stories.tsx    From SQForm with MIT License 6 votes vote down vote up 
Default: Story<SQFormButtonProps> = (args) => {
  return (
    <SQFormStoryWrapper
      initialValues={{}}
      showSubmit={false}
      validationSchema={undefined}
      muiGridProps={{}}
    >
      <SQFormButtonComponent onClick={handleClick} {...args} />
    </SQFormStoryWrapper>
  );
}
Example #5
Source File: Button.stories.tsx    From design-system with Apache License 2.0 6 votes vote down vote up 
Loading = {
	render: (props: Story) => {
		// eslint-disable-next-line react-hooks/rules-of-hooks
		const [loading, isLoading] = React.useState(false);
		return (
			<Tooltip title="Relevant description of the basic button">
				<Button.Primary
					icon="talend-check"
					loading={loading}
					onClick={() => {
						isLoading(true);
						setTimeout(() => isLoading(false), 3000);
					}}
					{...props}
				>
					Async call to action
				</Button.Primary>
			</Tooltip>
		);
	},
}
Example #6
Source File: CallDisplay.stories.tsx    From useDApp with MIT License 6 votes vote down vote up 
Template: Story<ComponentProps<typeof CallDisplay>> = (args) => (
  <NameTagsContext.Provider
    value={{
      nameTags: [],
      setNameTags: () => undefined,
      getNameTag: (a) => (a === ADDRESS_3 ? 'Uncle Joe' : undefined),
    }}
  >
    <GlobalStyle />
    <CallDisplay {...args} />
  </NameTagsContext.Provider>
)
Example #7
Source File: Hero.stories.tsx    From storefront with MIT License 6 votes vote down vote up 
Base: Story = (args) => (
  <Hero
    {...args}
    image={{
      sourceUrl: '/home.png',
      srcSet: '/[email protected] 2x',
    }}
  />
)
Example #8
Source File: Input.stories.tsx    From frontend with BSD 3-Clause "New" or "Revised" License 6 votes vote down vote up 
Template: Story<InputProps> = ({ placeholder, type, prefix, suffix, wrapperClass, wrapperStyle }) => {
  return (
    <Input
      placeholder={placeholder}
      type={type}
      prefix={prefix}
      suffix={suffix}
      wrapperClass={wrapperClass}
      wrapperStyle={wrapperStyle}
    />
  )
}
Example #9
Source File: Importer.stories.tsx    From react-csv-importer with MIT License 6 votes vote down vote up 
Timesheet: Story<SampleImporterProps> = (
  args: SampleImporterProps
) => {
  return (
    <Importer {...args}>
      <ImporterField name="date" label="Date" />
      <ImporterField name="clientName" label="Client" />
      <ImporterField name="projectName" label="Project" />
      <ImporterField name="projectCode" label="Project Code" optional />
      <ImporterField name="taskName" label="Task" />
      <ImporterField name="notes" label="Notes" optional />
    </Importer>
  );
}
Example #10
Source File: ErrorModal.stories.tsx    From polkabtc-ui with Apache License 2.0 6 votes vote down vote up 
Template: Story<Props> = args => {
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <>
      <button onClick={handleOpen}>
        Open
      </button>
      <ErrorModal
        {...args}
        open={open}
        onClose={handleClose} />
    </>
  );
}
Example #11
Source File: Xarrow.stories.tsx    From react-xarrows with MIT License 5 votes vote down vote up 
TriggerTemplateStory: Story<xarrowPropsType> = (args) => <TriggerTemplate {...args} />
Example #12
Source File: FilePicker.stories.tsx    From useFilePicker with MIT License 5 votes vote down vote up 
Template: Story<any> = args => <FilePickerComponent {...args} />
Example #13
Source File: ActionBar.stories.tsx    From atlas with GNU General Public License v3.0 5 votes vote down vote up 
Template: Story<ActionBarProps> = (args) => <ActionBar {...args} />