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

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

<Title>Select Permissions Input</Title>

<Description>
  Select de permissões dos aplicativos Eureca.
</Description>

<Preview>
  <Story name="Select Permissions Input">
    <SelectPermissionsInput />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| data | Dados de entrada do componente <br /> array | - |
| onChange | Função de onChange do componente <br /> func | - |
| 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>Formato de Dados</Subtitle>

> O formato de saída é um array, `data`, com um ou dois valores de acordo com as opções.
Podem ser: ['administrator'], ['editor'], ['reviewer'], ['observer'] ou ['reviewer', 'observer'].

```jsx
data = ['administrator']
```

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

```jsx
<SelectPermissions data={values} onChange={handleChange} />
```