@hbsis.uikit/react/src/components/input/input.story.js

Biblioteca ReactJS

import React, { Component } from 'react'
import { storiesOf } from '@storybook/react'
import { withReadme } from 'storybook-readme';
import { Input, InputGroup, SelectBox } from 'src'

import documentation from './input-group/README.md'

const style = {
  margin: '10px',
};

const stories = storiesOf('Input', module)

stories.add('Input - Default', () => (
  <div style={style}>
    <h3>Vertical</h3>
    <Input
      label='Input com label'
      name='Input'
      onChange={(e) => {
        console.log(e.target.name, e.target.value)
      }}
    />
    <Input
      label='Input com label'
      name='Input'
      message='asd'
      type='error'
    />

    <Input
      label='Input com label'
      name='Input'
      type='alert'
      orientation='horizontal'
    />

    <Input
      label='Input com label'
      name='Input'
      type='success'
      orientation='horizontal'
    />
  </div>
))

stories.add('Input - Masked', () => (
  <div style={style}>
    <Input
      label='Input com label'
      name='Input'
      type='success'
      mask='999-9999-99'
      message='Observação muito curta'
      onChange={e => console.log(e)}
    />
  </div>
))

stories.add('Input - Types', () => (
  <div style={style}>
    <Input
      label='Input com label'
      name='Input'
      type='success'
      value='type=`success`'
      message='Observação muito curta'
    />

    <Input
      label='Input com label'
      name='Input'
      type='error'
      value='type=`error`'
      message='Observação muito curta'
    />

    <Input
      label='Input com label'
      name='Input'
      type='alert'
      value='type=`alert`'
      message='Observação muito curta'
    />
  </div>
))

stories.add('Input - Complement', withReadme(documentation, () => (
  <div style={style}>
    <InputGroup
      label='Input suffix com label'
      name='Input'
      type='success'
      message='mensagem de sucesso'
      position={'suffix'}
      selectWidthInPx={75}
      onChange={function (selectValue, inputValue) {
        console.log(selectValue, inputValue)
      }}
      onInputChange={function (inputValue) {
        console.log(inputValue)
      }}
      onSelectChange={function (selectValue) {
        console.log(selectValue)
      }}
      options={[
        { value: 1, label: 'Quilograma', shortLabel: 'kg' },
        { value: 2, label: 'Tonelada', shortLabel: 'ton' },
      ]}
    />
    <div style={style} />
    <InputGroup
      label='Input prefix com label'
      type='error'
      message='mensagem de erro'
      name='Input'
      position='prefix'
      placeholder='Digite algum texto'
      selectWidthInPx={75}
      onChange={function (selectValue, inputValue) {
        console.log(selectValue, inputValue)
      }}
      onInputChange={function (inputValue) {
        console.log(inputValue)
      }}
      onSelectChange={function (selectValue) {
        console.log(selectValue)
      }}
      options={[
        { value: 1, label: 'Real', shortLabel: 'BRL' },
        { value: 2, label: 'Dolar', shortLabel: 'USD' },
        { value: 3, label: 'Euro', shortLabel: 'EUR' },
      ]}
    />
  </div>
)));