@eureca/eureca-ui/src/components/Inputs/stories/select-multi.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 { SelectMulti } from '../';
import { SelectMultiInput } from './select-multi.stories.js';

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

<Title>Select Multi</Title>

<Description>
  Select multi dos aplicativos Eureca
</Description>

<Preview>
  <Story name="Select Multi">
    <SelectMultiInput />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| items | Array com as opções <br /> [{ id: 'string' \| 'number', name: 'string', subItems: [{ id: 'string' \| 'number', name: 'string' }]}] | - |
| data | Dados de entrada do componente, mesmo formato de 'items' <br /> string | - |
| onChange | Função de onChange do componente <br /> string | - |
| helperText | Texto localizado na parte inferior do input do Material-UI <br /> string | - |
| error | Variável que controla estado de erro do componente <br /> bool | - |

<Subtitle>Tamanhos</Subtitle>

<Preview>
  <ThemeProvider theme={MuiTheme}>
    <Box width={300}>
      <SelectMulti 
        label='Largura definida'
        items={[]}
        onChange={() => {}}
        data={[]}
      />
    </Box>
  </ThemeProvider>
</Preview>

<Subtitle>Formato dos Dados</Subtitle>

> Formato de `items`

```jsx
{
  id: 0,
  name: 'Item 1',
  subItems: [
    {
      id: '10',
      name: 'Sub Item 1',
    },
    {
      id: '11',
      name: 'Sub Item 2',
    },
  ],
},
```

> Formato de `data`. De acordo com os dados abaixo apenas o sub item de id `10` do item de id `0` está marcado.

```jsx
{
  id: 0,
  subItems: [10],
},
```

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

```jsx
<SelectMulti
  items={itemsArray}
  label="Select"
  data={dataArray}
  onChange={handleChange}
/>
```