@eureca/eureca-ui/src/components/Evaluation/stories/celi-evaluation.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 { CeliEvaluation } from '../';
import { EvaluationStory } from './celi-evaluation.stories.js';

<Meta title='Originals/Evaluation' component={CeliEvaluation} decorators={[withKnobs]}/>

<Title>Celi Evaluation</Title>

<Description>
  Celi Evaluation dos aplicativos Eureca.
</Description>

<Preview>
  <Story name="Celi Evaluation">
    <EvaluationStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| onChange | Retorna dos scores e questions <br /> 'object' | Date() |
| questions | Questões de entrada do componente <br /> 'string' | '' |

<Subtitle>Formato das questões</Subtitle>

> As questões são um array de objetos com as seguintes chaves:

- `id`: 'string \| 'number'
- `type`: 'string'
- `questions`: 'array' [ { id: 'string' \| 'number', text: 'string'} ]

```jsx
[
  {
    id: 1,
    type: 'Comunicação',
    questions: [
      { id: 1, text: 'Transmitiu as ideias de forma clara?' },
      { id: 2, text: 'Traz uma argumentação clara?' },
      { id: 3, text: 'Teve algum diferencial na comunicação?' },
      { id: 4, text: 'Criou uma linha de raciocínio lógica?' },
    ],
  },
  {
    id: 2,
    type: 'Execução',
    questions: [
      { id: 5, text: 'Transmitiu as ideias de forma clara?' },
      { id: 6, text: 'Traz uma argumentação clara?' },
      { id: 7, text: 'Teve algum diferencial na comunicação?' },
      { id: 8, text: 'Criou uma linha de raciocínio lógica?' },
    ],
  },
  {
    id: 3,
    type: 'Inovação',
    questions: [
      { id: 9, text: 'Transmitiu as ideias de forma clara?' },
      { id: 10, text: 'Traz uma argumentação clara?' },
      { id: 11, text: 'Teve algum diferencial na comunicação?' },
      { id: 12, text: 'Criou uma linha de raciocínio lógica?' },
    ],
  },
  {
    id: 4,
    type: 'Liderança',
    questions: [
      { id: 13, text: 'Transmitiu as ideias de forma clara?' },
      { id: 14, text: 'Traz uma argumentação clara?' },
      { id: 15, text: 'Teve algum diferencial na comunicação?' },
      { id: 16, text: 'Criou uma linha de raciocínio lógica?' },
    ],
  },
]
```

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

```jsx
<CeliEvaluation questions={questions} onChange={handleChange} />
```