@eureca/eureca-ui/src/components/Inputs/stories/select.stories.mdx

UI component library of Eureca's user and admin apps

import {
  Meta,
  Story,
  Preview,
  Title,
  Subtitle,
  Description,
  Props,
} from '@storybook/addon-docs/blocks';
import { withKnobs } from '@storybook/addon-knobs';
import { Box, ThemeProvider } from '@material-ui/core';

import MuiTheme from '../../../theme/mui';

import { Flex } from '../../Flex';
import { Select } from '../';
import { SelectInput } from './select.stories.js';

<Meta title='Material/Inputs' component={Select} decorators={[withKnobs]}/>

<Title>Select Input</Title>

<Description>
  Input básico dos aplicativos Eureca, extendido do `TextField` do `Material-UI`.
</Description>
<Description>
  Contém todas as props definidas no [Material-UI](https://material-ui.com/components/text-fields/#text-field) e tem estilo definido pelo tema desta biblioteca.
</Description>

<Preview>
  <Story name="Select Input">
    <SelectInput />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| name | Nome do input do Material-UI <br /> string | - |
| label | Label input do Material-UI <br /> string | - |
| options | Array de opções do select <br /> [{id: 'string' \| 'number', name: 'string' }] | - |
| helperText | Texto localizado na parte inferior do input do Material-UI <br /> string | - |
| value | Valor do input do Material-UI <br /> string \| number | - |
| onChange | Função de onChange do input do Material-UI <br /> func| - |
| props | Todas as props aceitas pelo TextField do Material-UI <br /> | - |

<Subtitle>Tamanhos</Subtitle>

<Preview>
  <ThemeProvider theme={MuiTheme}>
    <Select 
      label='Small'
      size='small'
      options={[{id: 0, name: 'Option 1'}, {id: 1, name: 'Option 2'}]}
      onChange={() => {}}
      value={''}
      name='select-example'
    />
    <Box width={300} mt={3}>
      <Select 
        label='Largura definida'
        size='small'
        options={[{id: 0, name: 'Option 1'}, {id: 1, name: 'Option 2'}]}
        onChange={() => {}}
      value={''}
      name='select-example'
      />
    </Box>
  </ThemeProvider>
</Preview>

<Subtitle>Variações</Subtitle>

<Preview>
  <ThemeProvider theme={MuiTheme}>
    <Select 
      label='Filled'
      variant='filled'
      options={[{id: 0, name: 'Option 1'}, {id: 1, name: 'Option 2'}]}
      onChange={() => {}}
      value={''}
      name='select-example'
    />
    <Box my={2}>
      <Select 
        label='Outlined'
        variant='outlined'
        options={[{id: 0, name: 'Option 1'}, {id: 1, name: 'Option 2'}]}
        onChange={() => {}}
      value={''}
      name='select-example'
      />
    </Box>
    <Select 
      label='Standard'
      variant='standard'
      options={[{id: 0, name: 'Option 1'}, {id: 1, name: 'Option 2'}]}
      onChange={() => {}}
      value={''}
      name='select-example'
    />
  </ThemeProvider>
</Preview>

<Subtitle>Exemplo de Aplicação</Subtitle>

```jsx
<Select
  name="select-input"
  label="Select"
  options={options}
  value={value}
  onChange={handleChange}
  disabled={isDisabled}
  helperText='Helper Text'
/>
```