chore: Configure new jsx transform (#414)

.eslintrc.json

@@ -9,6 +9,8 @@
   "plugins": ["react-hooks"],
   "rules": {
     "react/prop-types": "off",
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "error",
     "no-nested-ternary": "error",

__mocks__/react-beautiful-dnd.js

@@ -1,34 +1,36 @@
-import React from 'react'
+import { createRef } from 'react'
 
-function DragDropContext (props) {
+function DragDropContext(props) {
   callbacks.onDragEnd = props.onDragEnd
 
   return <>{props.children}</>
 }
 
 const droppableProvide = {
-  innerRef: React.createRef(),
+  innerRef: createRef(),
   droppableProps: {},
-  placeholder: <div id='placeholder' />
+  placeholder: <div id='placeholder' />,
 }
-function Droppable (props) {
+function Droppable(props) {
   return <>{props.children(droppableProvide)}</>
 }
 
 const draggableProvide = {
-  innerRef: React.createRef(),
+  innerRef: createRef(),
   draggableProps: {},
-  dragHandleProps: {}
+  dragHandleProps: {},
 }
 const draggableSnapshot = {
-  isDragging: false
+  isDragging: false,
 }
-function Draggable ({ children }) {
+function Draggable({ children }) {
   return <>{children(draggableProvide, draggableSnapshot)}</>
 }
 
 const callbacks = {
   onDragEnd: jest.fn(),
-  isDragging: isDragging => { draggableSnapshot.isDragging = isDragging }
+  isDragging: (isDragging) => {
+    draggableSnapshot.isDragging = isDragging
+  },
 }
 export { DragDropContext, Droppable, Draggable, callbacks }

assets/index.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render } from 'react-dom'
 import Board from '../src'
 import getUrlParams from './services/getUrlParams'
@@ -13,44 +12,44 @@ const board = {
         {
           id: '0206c8d7-4d48-4d97-b867-86fc2d21075d',
           title: 'Card title 1',
-          description: 'Card content'
+          description: 'Card content',
         },
         {
           id: 2,
           title: 'Card title 2',
-          description: 'Card content'
+          description: 'Card content',
         },
         {
           id: 3,
           title: 'Card title 3',
-          description: 'Card content'
+          description: 'Card content',
         },
         {
           id: 4,
           title: 'Card title 4',
-          description: 'Card content'
+          description: 'Card content',
         },
         {
           id: 5,
           title: 'Card title 5',
-          description: 'Card content'
+          description: 'Card content',
         },
         {
           id: 6,
           title: 'Card title 6',
-          description: 'Card content'
+          description: 'Card content',
         },
         {
           id: 7,
           title: 'Card title 7',
-          description: 'Card content'
+          description: 'Card content',
         },
         {
           id: 8,
           title: 'Card title 8',
-          description: 'Card content'
-        }
-      ]
+          description: 'Card content',
+        },
+      ],
     },
     {
       id: 2,
@@ -59,11 +58,11 @@ const board = {
         {
           id: 9,
           title: 'Card title 9',
-          description: 'Card content'
-        }
-      ]
-    }
-  ]
+          description: 'Card content',
+        },
+      ],
+    },
+  ],
 }
 
 render(

babel.config.js

@@ -1,23 +1,28 @@
 module.exports = {
   presets: [
-    '@babel/preset-react',
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+      },
+    ],
     [
       '@babel/preset-env',
       {
-        exclude: ['transform-regenerator']
-      }
-    ]
+        exclude: ['transform-regenerator'],
+      },
+    ],
   ],
   plugins: ['@babel/plugin-proposal-optional-chaining'],
   env: {
     // only include babel istanbul plugin when Cypress runs
     // because Jest preset already includes it, and you will
     // get duplicate plugin error
     cypress: {
-      plugins: ['istanbul']
+      plugins: ['istanbul'],
     },
     production: {
-      plugins: ['react-remove-properties']
-    }
-  }
+      plugins: ['react-remove-properties'],
+    },
+  },
 }

src/components/Board/components/Column/components/Card/index.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Draggable } from 'react-beautiful-dnd'
 
 function Card({ children, index, renderCard, disableCardDrag }) {

src/components/Board/components/Column/components/Card/index.spec.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render } from '@testing-library/react'
 import Card from './'
 import { callbacks } from 'react-beautiful-dnd'

src/components/Board/components/Column/components/CardAdder/components/CardForm/index.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import { useRef } from 'react'
 import { when } from '@services/utils'
 
 function CardForm({ onConfirm, onCancel }) {

src/components/Board/components/Column/components/CardAdder/components/CardForm/index.spec.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import CardForm from './'
 

src/components/Board/components/Column/components/CardAdder/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import CardForm from './components/CardForm'
 
 export default function CardAdder({ column, onConfirm }) {

src/components/Board/components/Column/components/CardAdder/index.spec.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import CardAdder from './'
 

src/components/Board/components/Column/index.js

@@ -1,11 +1,11 @@
-import React from 'react'
+import { forwardRef } from 'react'
 import { Draggable } from 'react-beautiful-dnd'
 import Card from './components/Card'
 import withDroppable from '../../../withDroppable'
 import CardAdder from './components/CardAdder'
 import { pickPropOut } from '@services/utils'
 
-const ColumnEmptyPlaceholder = React.forwardRef((props, ref) => (
+const ColumnEmptyPlaceholder = forwardRef((props, ref) => (
   <div ref={ref} style={{ minHeight: 'inherit', height: 'inherit' }} {...props} />
 ))
 

src/components/Board/components/Column/index.spec.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import Column from './'
 

src/components/Board/components/ColumnAdder/components/ColumnForm/index.js

@@ -1,9 +1,9 @@
-import React from 'react'
+import { createRef } from 'react'
 import { when } from '@services/utils'
 
 function ColumnForm({ onConfirm, onCancel }) {
   // FIXME use hook
-  const inputColumnTitle = React.createRef()
+  const inputColumnTitle = createRef()
 
   function addColumn(event) {
     event.preventDefault()

src/components/Board/components/ColumnAdder/components/ColumnForm/index.spec.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import ColumnForm from './'
 

src/components/Board/components/ColumnAdder/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import ColumnForm from './components/ColumnForm'
 
 function ColumnAdder({ onConfirm }) {

src/components/Board/components/ColumnAdder/index.spec.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import ColumnAdder from './'
 

src/components/Board/components/DefaultCard/index.js

@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default function ({ children: card, dragging, allowRemoveCard, onCardRemove }) {
   return (
     <div className={`react-kanban-card ${dragging ? 'react-kanban-card--dragging' : ''}`}>

src/components/Board/components/DefaultCard/index.spec.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import DefaultCard from './'
 

src/components/Board/components/DefaultColumnHeader/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 function ColumnTitle({ allowRenameColumn, onClick, children: title }) {
   return allowRenameColumn ? (

src/components/Board/components/DefaultColumnHeader/index.spec.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import DefaultColumnHeader from './'
 

src/components/Board/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { forwardRef, useState } from 'react'
 import { DragDropContext } from 'react-beautiful-dnd'
 import Column from './components/Column'
 import ColumnAdder from './components/ColumnAdder'
@@ -15,7 +15,7 @@ import {
 } from './services'
 import { moveCard, moveColumn, addColumn, removeColumn, changeColumn, addCard, removeCard } from '@services/helpers'
 
-const Columns = React.forwardRef((props, ref) => <div ref={ref} style={{ whiteSpace: 'nowrap' }} {...props} />)
+const Columns = forwardRef((props, ref) => <div ref={ref} style={{ whiteSpace: 'nowrap' }} {...props} />)
 
 const DroppableBoard = withDroppable(Columns)
 

src/components/Board/index.spec.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { render, within, act, fireEvent, screen } from '@testing-library/react'
 import Board from './'
 import { callbacks } from 'react-beautiful-dnd'

src/components/withDroppable/index.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Droppable } from 'react-beautiful-dnd'
 
 function withDroppable(Component) {

src/components/withDroppable/index.spec.js

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render } from '@testing-library/react'
 import withDroppable from './'