@eureca/eureca-ui/src/components/Board/stories/board.stories.js

UI component library of Eureca's user and admin apps

import React, { useCallback } from 'react';

import {
  FiSettings,
  FiCopy,
  FiTrash2,
  FiEdit,
  FiMinimize2,
  FiUserCheck,
  FiAward,
  FiLayers,
  FiTarget,
  FiMic,
} from 'react-icons/fi';

import { Board } from '../';

export default { title: 'Originals/Board', includeStories: [] };

const data = {
  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'],
};

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

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

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

export function SimpleBoard() {
  function handleAddCard(card, column) {
    console.log('Add Card: ', card, column);
  }

  function handleClickCard(id, title) {
    console.log('ID: ', id, ' Title: ', title);
  }

  function handleColumnMenu(column, option) {
    console.log('Column Menu Option: ', column, option);
  }

  function handleCardAction(id, columnId, action) {
    console.log('Clicked Card Action: ', id, columnId, action);
  }

  const handleChange = useCallback(value => {
    console.log('Board Data: ', value);
  }, []);

  return (
    <Board
      values={data}
      cardsOptions={cardsOptions}
      onAddCard={handleAddCard}
      onClickCard={handleClickCard}
      onChange={handleChange}
      columnMenu={columnMenu}
      onClickColumnMenu={handleColumnMenu}
      phaseOptions={phaseOptions}
      onClickCardAction={handleCardAction}
    />
  );
}