@eureca/eureca-ui/src/components/Board/stories/board.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 { Board } from '../';
import { SimpleBoard } from './board.stories.js';

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

<Title>Board</Title>

<Description>
  Board dos aplicativos Eureca.
</Description>

<Preview>
  <Story name="Board">
    <SimpleBoard />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| values | Dados de entrada do board, se existirem <br /> 'string' \| 'node' | '' |
| cardsOptions | Tipos de cards disponíveis no board <br /> 'func' | () => { } |
| columnMenu | Itens presentes no menu das fases <br /> Recebe todos os valores do **editor** 'func' | () => { } |
| onChange | Função disparada em mudanças no board. Retorna os novos dados do Board <br /> Recebe todos os valores do **editor** 'func' | () => { } |
| onAddCard | Função disparada ao se adicionar um card. Retorna card e column <br /> 'string' | '' |
| onClickCard | Função disparada ao se clicar em um card. Retorna id e title <br /> | - |
| onClickColumnMenu | Função disparada ao se escolher uma opção do menu das colunas. Retorna o id da coluna e a opção <br /> | - |
| onClickCardAction | Função disparada ao se escolher uma opção de edição de um card. Retorna id, columnId, action <br /> | - |

<Subtitle>Exemplo de Arquivos de Entrada</Subtitle>

É um objeto com as seguintes chaves:

- `tasks`: Uma task por ser de um dos tipos presentes no `cardsOptions`. O conjunto
de tasks é o conteúdo de cada coluna.

- `columns`: Objeto com as colunas presentes no Board.

- `columnOrder`: Ordem em que as colunas serão exibidas no Board.

```jsx
{
  tasks: [
    {
      id: '0',
      type: 'form',
      title: 'Exemplo de Task 0',
      subtitle: 'Formulário',
    },
    {
      id: '1',
      type: 'fit-cultural',
      title: 'Exemplo de Task com texto muito grande',
      subtitle: 'Fit Cultural',
    },
    {
      id: '2',
      type: 'form',
      title: 'Exemplo de Task 2',
      subtitle: 'Formulário',
    },
    {
      id: '3',
      type: 'fit-cultural',
      title: 'Exemplo de Task 3',
      subtitle: 'Fit Cultural',
    },
  ],
  columns: {
    0: {
      id: `0`,
      title: 'Inscritos',
      icon: <FiUserCheck />,
      points: '1000',
      taskIds: ['0', '1'],
    },
    1: {
      id: `1`,
      title: 'Resultados',
      icon: <FiAward />,
      taskIds: ['2', '3'],
    },
  },
  columnOrder: ['0', '1'],
};
```

> Card Options

Esse array de objetos define as opções de cards possíveis no Board.

```jsx
[
  {
    id: 'form',
    name: 'Formulário',
    icon: <FiEdit />,
  },
  {
    id: 'fit-cultural',
    name: 'Fit Cultural',
    icon: <FiMinimize2 />,
  },
];
```

> Column Menu

Esse array de objetos defne os itens presentes no menu das colunas.

```jsx
[
  {
    id: 'config',
    name: 'Configurar fase',
    icon: <FiSettings />,
  },
  {
    id: 'duplicate',
    name: 'Duplicar fase',
    icon: <FiCopy />,
  },
  {
    id: 'delete',
    name: 'Excluir fase',
    icon: <FiTrash2 />,
  },
];
```

> Phase Options

Defne as opções de colunas que poderão ser adicionadas

```jsx
[
  {
    id: 0,
    value: 'online',
    label: 'Online',
    icon: <FiLayers />,
  },
  {
    id: 1,
    value: 'presencial',
    label: 'Presencial',
    icon: <FiTarget />,
  },
  {
    id: 2,
    value: 'entrevista',
    label: 'Entrevista',
    icon: <FiMic />,
  },
];
```

<Subtitle>Utilização com SSR</Subtitle>

Para que o componente funcione corretamente é necessário importar e executar no root do app (no caso do Next dentro do `getInitialProps` do `_document.js`)
a função `resetServerContext` exportada por essa biblioteca. Essa função sincroniza o estado da biblioteca `react-beautiful-dnd`, utilizada pelo componente,
no servidor e cliente.

Segue abaixo um exemplo de configuração do `_document.js` com a função. Repare no uso da função logo no início do `getInitialProps`.

```jsx
import React from 'react';
import Document, {
  Html, Head, Main, NextScript,
} from 'next/document';
import { ServerStyleSheets } from '@material-ui/core/styles';
import { resetServerContext } from '@eureca/eureca-ui';

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <link
            rel="stylesheet"
            type="text/css"
            charSet="UTF-8"
            href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
          />
          <link
            rel="stylesheet"
            type="text/css"
            href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

MyDocument.getInitialProps = async (ctx) => {
  resetServerContext(); // Função que habilita uso com SSR

  // Render app and page and get the context of the page with collected side effects.
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () => originalRenderPage({
    // eslint-disable-next-line react/jsx-props-no-spreading
    enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
  });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
  };
};

export default MyDocument;
```

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

```jsx
<Board
  values={data}
  cardsOptions={cardsOptions}
  onAddCard={handleAddCard}
  onClickCard={handleClickCard}
  onChange={handleChange}
  columnMenu={columnMenu}
  onClickColumnMenu={handleColumnMenu}
  phaseOptions={phaseOptions}
  onClickCardAction={handleCardAction}
/>
```