@eureca/eureca-ui/src/components/Pickers/stories/time-picker.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 } from '@material-ui/core';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';
import DateFnsUtils from '@date-io/date-fns';
import { ptBR } from 'date-fns/locale';

import { TimePicker } from '../';
import { TimePickerStory } from './time-picker.stories.js';

<Meta title='Material/Pickers' component={TimePicker} decorators={[withKnobs]}/>

<Title>Time Picker</Title>

<Description>
  Time picker básico dos aplicativos Eureca, extendido do time picker padrão do `Material-UI Pickers`.
</Description>
<Description>
  Contém todas as props definidas no [Material-UI Pickers](https://material-ui-pickers.dev/) e tem estilo definido pelo tema desta biblioteca.
</Description>

<Preview>
  <Story name="Time Picker">
    <TimePickerStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| inputVariant | Variante de estilo do input <br /> 'standard' \| 'outlined' \| 'filled' | 'outlined' |
| autoOk | Controla o fechamento automático do picker ao se escolher um horário <br /> bool | 'true' |
| format | Formato de hora utilizado <br /> string | 'HH:mm' |
| okLabel | Label do botão de confirmação <br /> string | 'Ok' |
| cancelLabel | Label do botão de cancelamento <br /> string | 'Cancelar' |
| clearLabel | Label do botão que reseta a hora <br /> string | 'Limpar' |
| todayLabel | Label do botão que escolhe a hora atual <br /> string | 'Hoje' |
| invalidDateMessage | Mensagem de hora inválida <br /> string | 'Horário inválido' |
| ampm | Troca horário entre 12h (true) e 24h (false) <br /> bool | 'false' |
| 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>Variações</Subtitle>

<Preview>
  <MuiPickersUtilsProvider utils={DateFnsUtils} locale={ptBR}>
    <TimePicker inputVariant='standard'/>
    <Box my={3}>
      <TimePicker inputVariant='outlined'/>
    </Box>
    <TimePicker inputVariant='filled'/>
  </MuiPickersUtilsProvider>
</Preview>

<Subtitle>Providers</Subtitle>

> O `TimePicker` deve ser usado em conjunto com o provider `MuiPickersUtilsProvider`.
É necessário passar o utils de uma biblioteca de manipulação de datas escolhida além
do locale da biblioteca de tempo sendo utilizada.

O provider deve ser adicionado ao root do app.
No caso do Next.JS podem ser incluídos no _app.js.

No exemplo abaixo podemos ver seu uso com o utils do DateFn, importado de `@date-io/date-fns`, e a localização de português do Brasil.

```jsx
<MuiPickersUtilsProvider utils={DateFnsUtils} locale={ptBR}>
  <TimePicker {...props}/>
</MuiPickersUtilsProvider>
```

No exemplo abaixo podemos ver seu uso com o utils do Moment, importado de `@date-io/moment`, e a localização inglês .

```jsx
<MuiPickersUtilsProvider utils={MomentUtils} locale={en}>
  <TimePicker {...props}/>
</MuiPickersUtilsProvider>
```

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

> A função `onChange` retorna o novo horário escolhido

```jsx
<TimePicker
  name="component-name"
  label={label}
  value={date}
  onChange={handleChange}
/>
```