{"id":13810014,"url":"https://github.com/asseinfo/react-kanban","last_synced_at":"2025-05-14T10:31:35.359Z","repository":{"id":44764589,"uuid":"178279755","full_name":"asseinfo/react-kanban","owner":"asseinfo","description":"Yet another Kanban/Trello board lib for React.","archived":true,"fork":false,"pushed_at":"2022-10-08T12:19:24.000Z","size":531,"stargazers_count":650,"open_issues_count":0,"forks_count":166,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-04-19T20:44:54.739Z","etag":null,"topics":["hacktoberfest","javascript","js","kanban","kanban-board","react","reactjs","trello"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/asseinfo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-28T20:46:28.000Z","updated_at":"2025-04-18T18:32:44.000Z","dependencies_parsed_at":"2022-08-19T18:21:03.042Z","dependency_job_id":null,"html_url":"https://github.com/asseinfo/react-kanban","commit_stats":null,"previous_names":["lourenci/react-kanban"],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asseinfo%2Freact-kanban","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asseinfo%2Freact-kanban/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asseinfo%2Freact-kanban/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asseinfo%2Freact-kanban/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asseinfo","download_url":"https://codeload.github.com/asseinfo/react-kanban/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254120624,"owners_count":22018024,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","javascript","js","kanban","kanban-board","react","reactjs","trello"],"created_at":"2024-08-04T02:00:42.618Z","updated_at":"2025-05-14T10:31:34.827Z","avatar_url":"https://github.com/asseinfo.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"## 🔴🔴🔴 THIS PROJECT IS DEPRECATED 🔴🔴🔴\n\nUnfortunately this project is deprecated and it is not maintained anymore.\n\nIn the past, our core product was using `react-kanban` and indirectly we were improving this project. But nowadays we replaced it for another internal simplier version.\n\nAs a small dev team, it's impossible for us to continue improving both sources without an external help.\n\nThis source is going to continue available here, but, unfortunately, none effort is going to be done to improve the project.\n\n## react-kanban\n\n[![Test Coverage](https://codecov.io/gh/lourenci/react-kanban/branch/main/graph/badge.svg)](https://codecov.io/gh/lourenci/react-kanban)\n[![Build Status](https://github.com/lourenci/react-kanban/workflows/Test/badge.svg?branch=main)](https://github.com/lourenci/react-kanban/actions?query=branch%3Amain+workflow%3ATest)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nYet another Kanban/Trello board lib for React.\n\n![Kanban Demo](https://i.imgur.com/yceKUEp.gif)\n\n### ▶️ Demo\n\n[Usage](https://nvjp3.csb.app/)\n\n[![Edit react-kanban-demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-kanban-demo-nvjp3)\n\n## ❓ Why?\n\n- 👊 Reliable: 100% tested on CI; 100% coverage; 100% SemVer.\n- 🎮 Having fun: Play with Hooks 🎣 and ~~Styled Components~~.\n- ♿️ Accessible: Keyboard and mobile friendly.\n- 🔌 Pluggable: For use in projects.\n\n## 🛠 Install and usage\n\nSince this project use Hooks, you have to install them:\n\n- `react\u003e=16.8.5`\n\nAfter, Install the lib on your project:\n\n```bash\nyarn add @asseinfo/react-kanban\n```\n\nImport the lib and use it on your project:\n\n```js\nimport Board from '@asseinfo/react-kanban'\nimport '@asseinfo/react-kanban/dist/styles.css'\n\nconst board = {\n  columns: [\n    {\n      id: 1,\n      title: 'Backlog',\n      cards: [\n        {\n          id: 1,\n          title: 'Add card',\n          description: 'Add capability to add a card in a column'\n        },\n      ]\n    },\n    {\n      id: 2,\n      title: 'Doing',\n      cards: [\n        {\n          id: 2,\n          title: 'Drag-n-drop support',\n          description: 'Move a card between the columns'\n        },\n      ]\n    }\n  ]\n}\n\n\u003cBoard initialBoard={board} /\u003e\n```\n\n## 🔥 API\n\n### 🕹 Controlled and Uncontrolled\n\nWhen you need a better control over the board, you should stick with the controlled board.\nA controlled board means you need to deal with the board state yourself, you need to keep the state in your hands (component) and pass this state to the `\u003cBoard /\u003e`, we just reflect this state.\nThis also means a little more of complexity, although we make available some helpers to deal with the board shape.\nYou can read more in the React docs, [here](https://reactjs.org/docs/forms.html#controlled-components) and [here](https://reactjs.org/docs/uncontrolled-components.html).\n\nIf you go with the controlled one, you need to pass your board through the `children` prop, otherwise you need to pass it through the `initialBoard` prop.\n\n#### Helpers to work with the controlled board\n\nWe expose some APIs that you can import to help you to work with the controlled state. Those are the same APIs we use internally to manage the uncontrolled board. We really recommend you to use them, they are 100% unit tested and they don't do any side effect to your board state.\n\nTo use them, you just need to import them together with your board:\n\n```js\nimport Board, { addCard, addColumn, ... } from '@asseinfo/react-kanban'\n```\n\n**All the helpers you need to pass your board and they will return a new board to pass to your state:**\n\n```js\nimport Board, { addColumn } from '@asseinfo/react-kanban'\n...\nconst [board, setBoard] = useState(initialBoard)\n...\nconst newBoard = addColumn(board, newColumn)\nsetBoard(newBoard)\n...\n\u003cBoard\u003e{board}\u003c/Board\u003e\n```\n\n[You can see the list of helpers in the end of the props documentation.](#-helpers-to-be-used-with-an-controlled-board)\n\n### 🔷 Shape of a board\n\n```js\n{\n  columns: [{\n    id: ${unique-required-columnId},\n    title: {$required-columnTitle**},\n    cards: [{\n      id: ${unique-required-cardId},\n      title: ${required-cardTitle*}\n      description: ${required-description*}\n    }]\n  }]\n}\n```\n\n\\* The `title` and the `description` are required if you are using the card's default template. You can render your own card template through the [`renderCard`](#rendercard) prop.\n\n\\*\\* The `title` is required if you are using the column's default template. You can render your own column template through the [`renderColumnHeader`](#rendercolumnheader) prop.\n\n### ⚙️ Props\n\n| Prop                                                                                                                          | Description                                                                                                       | Controlled | Uncontrolled |\n| ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------- | ------------ |\n| [`children`](#children) (required if controlled)                                                                              | The board to render                                                                                               | ✅         | 🚫           |\n| [`initialBoard`](#initialboard) (required if uncontrolled)                                                                    | The board to render                                                                                               | 🚫         | ✅           |\n| [`onCardDragEnd`](#oncarddragend)                                                                                             | Callback that will be called when the card move ends                                                              | ✅         | ✅           |\n| [`onColumnDragEnd`](#oncolumndragend)                                                                                         | Callback that will be called when the column move ends                                                            | ✅         | ✅           |\n| [`renderCard`](#rendercard)                                                                                                   | A card to be rendered instead of the default card                                                                 | ✅         | ✅           |\n| [`renderColumnHeader`](#rendercolumnheader)                                                                                   | A column header to be rendered instead of the default column header                                               | ✅         | ✅           |\n| [`allowAddColumn`](#allowaddcolumn)                                                                                           | Allow a new column be added by the user                                                                           | ✅         | ✅           |\n| [`onNewColumnConfirm`](#onnewcolumnconfirm) (required if use the default column adder template)                               | Callback that will be called when a new column is confirmed by the user through the default column adder template | ✅         | ✅           |\n| [`onColumnNew`](#oncolumnnew) (required if `allowAddColumn` or when [`addColumn`](#rendercolumnadder) is called)              | Callback that will be called when a new column is added through the default column adder template                 | 🚫         | ✅           |\n| [`renderColumnAdder`](#rendercolumnadder)                                                                                     | A column adder to be rendered instead of the default column adder template                                        | ✅         | ✅           |\n| [`disableColumnDrag`](#disablecolumndrag)                                                                                     | Disable the column move                                                                                           | ✅         | ✅           |\n| [`disableCardDrag`](#disablecarddrag)                                                                                         | Disable the card move                                                                                             | ✅         | ✅           |\n| [`allowRemoveColumn`](#allowremovecolumn)                                                                                     | Allow to remove a column in default column header                                                                 | ✅         | ✅           |\n| [`onColumnRemove`](#oncolumnremove) (required if `allowRemoveColumn` or when [`removeColumn`](#rendercolumnheader) is called) | Callback that will be called when a column is removed                                                             | ✅         | ✅           |\n| [`allowRenameColumn`](#allowrenamecolumn)                                                                                     | Allow to rename a column in default column header                                                                 | ✅         | ✅           |\n| [`onColumnRename`](#oncolumnrename) (required if `allowRenameColumn` or when [`renameColumn`](#rendercolumnheader) is called) | Callback that will be called when a column is renamed                                                             | ✅         | ✅           |\n| [`allowRemoveCard`](#allowremovecard)                                                                                         | Allow to remove a card in default card template                                                                   | ✅         | ✅           |\n| [`onCardRemove`](#oncardremove) (required if `allowRemoveCard`)                                                               | Callback that will be called when a card is removed                                                               | ✅         | ✅           |\n| [`allowAddCard`](#allowaddcard)                                                                                               | Allow to add a card. Expect an object with the position to add the card in the column.                            | 🚫         | ✅           |\n| [`onCardNew`](#oncardnew) (required if `allowAddCard` or when [`addCard`](#rendercolumnheader) is called)                     | Callback that will be called when a new card is added through the default card adder template                     | 🚫         | ✅           |\n| [`onNewCardConfirm`](#onnewcardconfirm) (required if `allowAddCard`)                                                          | Callback that will be called when a new card is confirmed by the user through the default card adder template     | 🚫         | ✅           |\n\n#### `children`\n\nThe board. Use this prop if you want to control the board's state.\n\n#### `initialBoard`\n\nThe board. Use this prop if you don't want to control the board's state.\n\n#### `onCardDragEnd`\n\nWhen the user moves a card, this callback will be called passing these parameters:\n\n| Arg           | Description                                                      |\n| ------------- | ---------------------------------------------------------------- |\n| `board`       | The modified board                                               |\n| `card`        | The moved card                                                   |\n| `source`      | An object with the card source `{ fromColumnId, fromPosition }`  |\n| `destination` | An object with the card destination `{ toColumnId, toPosition }` |\n\n##### Source and destination\n\n| Prop           | Description                                 |\n| -------------- | ------------------------------------------- |\n| `fromColumnId` | Column source id.                           |\n| `toColumnId`   | Column destination id.                      |\n| `fromPosition` | Card's index in column source's array.      |\n| `toPosition`   | Card's index in column destination's array. |\n\n#### `onColumnDragEnd`\n\nWhen the user moves a column, this callback will be called passing these parameters:\n\n| Arg           | Description                                            |\n| ------------- | ------------------------------------------------------ |\n| `board`       | The modified board                                     |\n| `column`      | The moved column                                       |\n| `source`      | An object with the column source `{ fromPosition }`    |\n| `destination` | An object with the column destination `{ toPosition }` |\n\n##### Source and destination\n\n| Prop           | Description                     |\n| -------------- | ------------------------------- |\n| `fromPosition` | Column index before the moving. |\n| `toPosition`   | Column index after the moving.  |\n\n#### `renderCard`\n\nUse this if you want to render your own card. You have to pass a function and return your card component.\nThe function will receive these parameters:\n\n| Arg       | Description                                                      |\n| --------- | ---------------------------------------------------------------- |\n| `card`    | The card props                                                   |\n| `cardBag` | A bag with some helper functions and state to work with the card |\n\n##### `cardBag`\n\n| function      | Description                                           |\n| ------------- | ----------------------------------------------------- |\n| `removeCard*` | Call this function to remove the card from the column |\n| `dragging`    | Whether the card is being dragged or not              |\n\n\\* It's unavailable when the board is controlled.\n\nEx.:\n\n```js\nconst board = {\n  columns: [{\n    id: ${unique-required-columnId},\n    title: ${columnTitle},\n    cards: [{\n      id: ${unique-required-cardId},\n      dueDate: ${cardDueDate},\n      content: ${cardContent}\n    }]\n  }]\n}\n\n\u003cBoard\n  renderCard={({ content }, { removeCard, dragging }) =\u003e (\n    \u003cYourCard dragging={dragging}\u003e\n      {content}\n      \u003cbutton type=\"button\" onClick={removeCard}\u003eRemove Card\u003c/button\u003e\n    \u003c/YourCard\u003e\n  )}\n\u003e\n{board}\n\u003c/Board\u003e\n```\n\n#### `renderColumnHeader`\n\nUse this if you want to render your own column header. You have to pass a function and return your column header component.\nThe function will receive these parameters:\n\n| Arg         | Description                                              |\n| ----------- | -------------------------------------------------------- |\n| `column`    | The column props                                         |\n| `columnBag` | A bag with some helper functions to work with the column |\n\n##### `columnBag`\n\n| function        | Description                                                |\n| --------------- | ---------------------------------------------------------- |\n| `removeColumn*` | Call this function to remove the column from the board     |\n| `renameColumn*` | Call this function with a title to rename the column       |\n| `addCard*`      | Call this function with a new card to add it in the column |\n\n**`addCard`**: As a second argument you can pass an option to define where in the column you want to add the card:\n\n- `{ on: 'top' }`: to add on the top of the column.\n- `{ on: 'bottom' }`: to add on the bottom of the column (default).\n\n\\* It's unavailable when the board is controlled.\n\nEx.:\n\n```js\nconst board = {\n  columns: [{\n    id: ${unique-required-columnId},\n    title: ${columnTitle},\n    wip: ${wip},\n    cards: [{\n      id: ${unique-required-cardId},\n      title: ${required-cardTitle},\n      description: ${required-cardDescription}\n    }]\n  }]\n}\n\n\u003cBoard\n  renderColumnHeader={({ title }, { removeColumn, renameColumn, addCard }) =\u003e (\n    \u003cYourColumnHeader\u003e\n      {title}\n      \u003cbutton type='button' onClick={removeColumn}\u003eRemove Column\u003c/button\u003e\n      \u003cbutton type='button' onClick={() =\u003e renameColumn('New title')}\u003eRename Column\u003c/button\u003e\n      \u003cbutton type='button' onClick={() =\u003e addCard({ id: 99, title: 'New Card' })}\u003eAdd Card\u003c/button\u003e\n    \u003c/YourColumnHeader\n  )}\n\u003e\n  {board}\n\u003c/Board\u003e\n```\n\n#### `allowAddColumn`\n\nAllow the user to add a new column directly by the board.\n\n#### `onNewColumnConfirm`\n\nWhen the user confirms a new column through the default column adder template, this callback will be called with a draft of a column with the title typed by the user.\n\nIf your board is uncontrolled you **must** return the new column with its new id in this callback.\n\nIf your board is controlled use this to get the new column title.\n\nEx.:\n\n```js\nfunction onColumnNew (newColumn) {\n  const newColumn = { id: ${required-new-unique-columnId}, ...newColumn }\n  return newColumn\n}\n\n\u003cBoard initialBoard={board} allowAddColumn onColumnNew={onColumnNew} /\u003e\n```\n\n#### `onColumnNew`\n\nWhen the user adds a new column through the default column adder template, this callback will be called passing the updated board and the new column.\n\nThis callback will not be called in an uncontrolled board.\n\n#### `renderColumnAdder`\n\nUse this if you want to render your own column adder. You have to pass a function and return your column adder component.\nThe function will receive these parameters:\n\n| Arg         | Description                      |\n| ----------- | -------------------------------- |\n| `columnBag` | A bag with some helper functions |\n\n##### `columnBag`\n\n| function     | Description                                                |\n| ------------ | ---------------------------------------------------------- |\n| `addColumn*` | Call this function with a new column to add the new column |\n\n\\* It's unavailable when the board is controlled.\n\nEx.:\n\n```js\nconst ColumnAdder = ({ addColumn }) {\n  return (\n    \u003cdiv onClick={()=\u003e addColumn({id: ${required-new-unique-columnId}, title: 'Title', cards:[]})}\u003e\n      Add column\n    \u003c/div\u003e\n  )\n}\n\n\u003cBoard\n  allowAddColumn\n  renderColumnAdder={({ addColumn }) =\u003e \u003cColumnAdder addColumn={addColumn} /\u003e}\n  {board}\n\u003c/Board\u003e\n```\n\n#### `disableColumnDrag`\n\nDisallow the user from move a column.\n\n#### `disableCardDrag`\n\nDisallow the user from move a card.\n\n#### `allowRemoveColumn`\n\nWhen using the default header template, when you don't pass a template through the `renderColumnHeader`, it will allow the user to remove a column.\n\n#### `onColumnRemove`\n\nWhen the user removes a column, this callback will be called passing these parameters:\n\n| Arg      | Description                          |\n| -------- | ------------------------------------ |\n| `board`  | The board without the removed column |\n| `column` | The removed column                   |\n\n#### `allowRenameColumn`\n\nWhen using the default header template, when you don't pass a template through the `renderColumnHeader`, it will allow the user to rename a column.\n\n#### `onColumnRename`\n\nWhen the user renames a column, this callback will be called passing these parameters:\n\n| Arg      | Description                       |\n| -------- | --------------------------------- |\n| `board`  | The board with the renamed column |\n| `column` | The renamed column                |\n\n#### `allowRemoveCard`\n\nWhen using the default card template, when you don't pass a template through the `renderCard`, it will allow the user to remove a card.\n\n#### `onCardRemove`\n\nWhen the user removes a card, this callback will be called passing these parameters:\n\n| Arg      | Description                          |\n| -------- | ------------------------------------ |\n| `board`  | The board without the removed column |\n| `column` | The column without the removed card  |\n| `card`   | The removed card                     |\n\n#### `allowAddCard`\n\nAllow the user to add a card in the column directly by the board. By default, it adds the card on the bottom of the column, but you can specify whether you want to add at the top or at the bottom of the board by passing an object with 'on' prop.\n\nE.g.:\n\u003cBoard allowAddCard /\u003e // at the bottom by default\n\u003cBoard allowAddCard={{ on: 'bottom' }}  /\u003e // in the bottom of the column\n\u003cBoard allowAddCard={{ on: 'top' }}  /\u003e // at the top of the column\n\n### 🔩 Helpers to be used with an controlled board\n\n#### `moveColumn`\n\n| Arg                | Description                             |\n| ------------------ | --------------------------------------- |\n| `board`            | Your board                              |\n| `{ fromPosition }` | Index of column to be moved             |\n| `{ toPosition }`   | Index destination of column to be moved |\n\n#### `moveCard`\n\nUse this on a controlled board, the \"from\" and \"to\" are the same ones passed to onCardDragEnd callback. You can used this within your onCardDragEnd call back to actually update your board as it will return a new board which you can save down into state.\n\n| Arg                              | Description                                |\n| -------------------------------- | ------------------------------------------ |\n| `board`                          | Your board                                 |\n| `{ fromPosition, fromColumnId }` |An object with the card source `{ fromColumnId, fromPosition }` which are the indexes of the cards current position  |\n| `{ toPosition, toColumnId }`   | An object with the card destination `{ fromColumnId, fromPosition }` which are the indexes of the cards new position |\n\n#### `addColumn`\n\n| Arg      | Description        |\n| -------- | ------------------ |\n| `board`  | Your board         |\n| `column` | Column to be added |\n\n#### `removeColumn`\n\n| Arg      | Description          |\n| -------- | -------------------- |\n| `board`  | Your board           |\n| `column` | Column to be removed |\n\n#### `changeColumn`\n\n| Arg      | Description                                                                                       |\n| -------- | ------------------------------------------------------------------------------------------------- |\n| `board`  | Your board                                                                                        |\n| `column` | Column to be renamed                                                                              |\n| `object` | Pass a object to be merged with the column. You can add new props and/or change the existing ones |\n\n#### `addCard`\n\n| Arg                    | Description                                                                         |\n| ---------------------- | ----------------------------------------------------------------------------------- |\n| `board`                | Your board                                                                          |\n| `inColumn`             | Column to add the card be added                                                     |\n| `card`                 | Card to be added                                                                    |\n| `{ on: 'bottom|top' }` | Whether the card will be added on top or bottom of the column (`bottom` is default) |\n\n#### `changeCard`\n\n| Arg      | Description                                                                                       |\n| -------- | ------------------------------------------------------------------------------------------------- |\n| `board`  | Your board                                                                                        |\n| `cardId` | Card's id to be changed\n| `object` | Pass a object to be merged with the card. You can add new props and/or change the existing ones   |\n\n#### `onCardNew`\n\nWhen the user adds a new card through the default card adder template, this callback will be called passing the updated board and the new card.\n\n#### `onNewCardConfirm`\n\nWhen the user confirms a new card through the default card adder template, this callback will be called with a draft of a card with the title and the description typed by the user.\n\nYou **must** return the new card with its new id in this callback.\n\nEx.:\n\n```js\nfunction onCardNew (newCard) {\n  const newCard = { id: ${required-new-unique-cardId}, ...newCard }\n  return newCard\n}\n\n\u003cBoard initialBoard={board} allowAddCard onNewCardConfirm={onCardNew} onCardNew={console.log} /\u003e\n```\n\n#### `removeCard`\n\n| Arg          | Description              |\n| ------------ | ------------------------ |\n| `board`      | Your board               |\n| `fromColumn` | Column where the card is |\n| `card`       | Card to be removed       |\n\n## 💅🏻 Styling\n\nYou can either style all the board or import our style and override it with the styles you want:\n\n| Class |\n| ----- |\n| `react-kanban-board` |\n| `react-kanban-card` |\n| `react-kanban-card-skeleton` |\n| `react-kanban-card--dragging` |\n| `react-kanban-card__description` |\n| `react-kanban-card__title` |\n| `react-kanban-column` |\n| `react-kanban-card-adder-form` |\n| `react-kanban-card-adder-button` |\n| `react-kanban-card-adder-form__title` |\n| `react-kanban-card-adder-form__description` |\n| `react-kanban-card-adder-form__button` |\n| `react-kanban-column-header` |\n| `react-kanban-column-header__button` |\n| `react-kanban-column-adder-button` |\n\n## 🧪 Tests\n\n### Unit\n\n```shell\nyarn test\n```\n\nCode coverage is saved in `coverage` folder. Open HTML report for example with\n\n```shell\nopen coverage/lcov-report/index.html\n```\n\n### End-to-end\n\nUsing [Cypress](https://www.cypress.io) test runner. Start dev server and open Cypress using\n\n```shell\nyarn dev\n```\n\nAll tests are in the [cypress/integration](cypress/integration) folder. These tests also collect code coverage and save in several formats in the `coverage` folder. Open HTML report\n\n```shell\nopen coverage/lcov-report/index.html\n```\n\nRead [Cypress code coverage guide](https://on.cypress.io/code-coverage)\n\nNote: to avoid inserting `babel-plugin-istanbul` twice during Jest tests, E2E tests run with `NODE_ENV=cypress` environment variable. The `babel-plugin-istanbul` plugin is included in [.babelrc](.babelrc) file only in the `cypress` Node environment, leaving the default Jest configuration during `NODE_ENV=test` the same.\n\n## 🚴‍♀️ Roadmap\n\nYou can view the next features [here](https://github.com/lourenci/react-kanban/milestone/1).\nFeel welcome to help us with some PRs.\n\n## 🤝 Contributing\n\nPRs are welcome:\n\n- Fork this project.\n- Setup it:\n  ```\n  yarn\n  yarn start\n  ```\n- Make your change.\n- Please add yourself to the contributors table (we use [all contributors](https://allcontributors.org/docs/en/cli/installation) for that, we you will need that installed first):\n  ```\n  yarn contributors:add\n  ```\n- Open the PR.\n\n### ✍️ Guidelines for contributing\n\n- You need to test your change.\n- Try to be clean on your change. CodeClimate will keep an eye on you.\n- It has to pass on CI.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasseinfo%2Freact-kanban","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasseinfo%2Freact-kanban","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasseinfo%2Freact-kanban/lists"}