feat(#664): update react to v17, and typescript to match

.eslintrc.js

@@ -43,6 +43,8 @@ module.exports = {
     'react/jsx-one-expression-per-line': 'off',
     'react/jsx-wrap-multilines': 'off',
     'react/jsx-props-no-spreading': 'off',
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
     'arrow-body-style': ['warn', 'as-needed'],
     'no-param-reassign': ['error', { props: false }],
     'import/prefer-default-export': 'off',

package.json

@@ -115,19 +115,19 @@
     "lint-staged": "~10.5.0",
     "node-sass": "~4.14.1",
     "prettier": "~2.2.0",
-    "react": "~16.14.0",
+    "react": "~17.0.0",
     "react-bootstrap": "~1.0.0-beta.16",
     "react-docgen": "~5.3.0",
     "react-docgen-typescript-loader": "~3.7.0",
-    "react-dom": "~16.14.0",
+    "react-dom": "~17.0.0",
     "react-is": "~17.0.1",
     "rollup-plugin-postcss": "~3.1.1",
     "sass-loader": "~10.1.0",
     "semantic-release": "~17.3.0",
     "sinon": "~9.2.0",
     "tsdx": "~0.14.0",
     "tslib": "~2.1.0",
-    "typescript": "~3.8.2"
+    "typescript": "~4.1.3"
   },
   "dependencies": {
     "@fortawesome/fontawesome-common-types": "~0.2.28",

src/components/Alert/Alert.tsx

@@ -1,4 +1,4 @@
-import React, { Component, ReactNode, CSSProperties } from 'react'
+import { Component, ReactNode, CSSProperties } from 'react'
 import BootstrapAlert from 'react-bootstrap/Alert'
 
 import { ColorVariant } from '../../interfaces'

src/components/Badge/Badge.tsx

@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 import BootstrapBadge from 'react-bootstrap/Badge'
 
 import { ColorVariant } from '../../interfaces'

src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 import BootstrapBreadcrumb from 'react-bootstrap/Breadcrumb'
 
 export interface BreadcrumbProps {

src/components/Breadcrumb/BreadcrumbItem.tsx

@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 import BootstrapBreadcrumbItem from 'react-bootstrap/BreadcrumbItem'
 
 interface Props {

src/components/Button/Button.tsx

@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 import BootstrapButton from 'react-bootstrap/Button'
 
 import { ButtonVariant } from '../../interfaces'

src/components/Calendar/Calendar.tsx

@@ -3,7 +3,7 @@ import dayGridPlugin from '@fullcalendar/daygrid'
 import interactionPlugin from '@fullcalendar/interaction'
 import FullCalendar from '@fullcalendar/react'
 import timeGridPlugin from '@fullcalendar/timegrid'
-import React from 'react'
+import { createRef } from 'react'
 
 import Event from './interfaces'
 
@@ -64,7 +64,7 @@ const Calendar = (props: CalendarProps) => {
     onNextClick,
     onTodayClick,
   } = props
-  const fullCalendarRef = React.createRef<FullCalendar>()
+  const fullCalendarRef = createRef<FullCalendar>()
 
   const onNavClick = (to: 'prev' | 'next' | 'today') => {
     const calendar = fullCalendarRef?.current?.getApi()

src/components/Callout/Callout.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames'
-import React, { CSSProperties, ReactElement } from 'react'
+import { CSSProperties, ReactElement } from 'react'
+import * as React from 'react'
 
 import { ColorVariant } from '../../interfaces'
 

src/components/Checkbox/Checkbox.tsx

@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 import FormCheck from 'react-bootstrap/FormCheck'
 
 interface Props {

src/components/DateTimePicker/DateTimePicker.tsx

@@ -1,5 +1,6 @@
 import * as locales from 'date-fns/locale'
-import React, { ReactNode, CSSProperties } from 'react'
+import { ReactNode, CSSProperties } from 'react'
+import * as React from 'react'
 import InputGroup from 'react-bootstrap/InputGroup'
 import DatePicker, { registerLocale, setDefaultLocale } from 'react-datepicker'
 

src/components/Dropdown/Dropdown.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import DropdownRB from 'react-bootstrap/Dropdown'
 import DropdownButton from 'react-bootstrap/DropdownButton'
 

src/components/Graph/BarGraph.tsx

@@ -1,5 +1,5 @@
 import ChartJs from 'chart.js'
-import React, { Component } from 'react'
+import { Component } from 'react'
 
 import { Axis, Dataset } from './interfaces'
 import * as util from './util'

src/components/Graph/LineGraph.tsx

@@ -1,5 +1,5 @@
 import ChartJs from 'chart.js'
-import React, { Component } from 'react'
+import { Component } from 'react'
 
 import { Axis, Dataset } from './interfaces'
 import * as util from './util'

src/components/Graph/PieGraph.tsx

@@ -1,5 +1,5 @@
 import ChartJs from 'chart.js'
-import React, { Component } from 'react'
+import { Component } from 'react'
 
 import { Dataset } from './interfaces'
 import * as util from './util'

src/components/Icon/Icon.tsx

@@ -1,6 +1,7 @@
 import { IconPrefix, IconName, SizeProp } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 
 import { IconType } from './interfaces'
 

src/components/Image/Image.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import BootstrapImage from 'react-bootstrap/Image'
 
 interface Props extends React.ImgHTMLAttributes<HTMLImageElement> {

src/components/Label/Label.tsx

@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import React, { CSSProperties } from 'react'
+import { createElement, CSSProperties } from 'react'
 import FormLabel from 'react-bootstrap/FormLabel'
 
 interface Props {
@@ -25,7 +25,7 @@ interface Props {
  *  hidden text to be read explaing the input is required incase the title attribute
  *  is not supported by the screen reader
  */
-const asterisk = React.createElement('i', { style: { color: 'red' } }, [
+const asterisk = createElement('i', { style: { color: 'red' } }, [
   <FontAwesomeIcon
     icon="asterisk"
     key="asterisk"

src/components/Layout/Column.tsx

@@ -6,7 +6,7 @@ interface Props {
    * HTML element to be used for the component
    * @default <div>
    */
-  as?: React.ElementType
+  as?: keyof JSX.IntrinsicElements
   /**
    * The number of columns to span on extra large devices (≥ 1200px)
    */

src/components/Layout/Container.tsx

@@ -6,7 +6,7 @@ interface Props {
    * A custom element to be used for the component
    * @default <div>
    */
-  as?: React.ElementType
+  as?: keyof JSX.IntrinsicElements // As extends React.ElementType // '"symbol" | undefined'
   /**
    * Allow the Container to fill all of its available horizontal space
    * @default false

src/components/Layout/Row.tsx

@@ -1,12 +1,13 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 import BootstrapRow from 'react-bootstrap/Row'
 
 interface Props {
   /**
    * HTML element to be used for the component
    * @default <div>
    */
-  as?: React.ElementType
+  as?: keyof JSX.IntrinsicElements // React.ElementType
   /**
    * Removes the gutter spacing between `Columns` as well as any added negative margins.
    * @default false

src/components/List/List.tsx

@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 import ListGroup from 'react-bootstrap/ListGroup'
 
 interface Props {

src/components/List/ListItem.tsx

@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 import ListGroupItem from 'react-bootstrap/ListGroupItem'
 
 import { ColorVariant } from '../../interfaces'

src/components/Modal/Modal.tsx

@@ -1,5 +1,5 @@
 /* eslint react/prop-types: 0 */
-import React, { ReactNode, CSSProperties } from 'react'
+import { ReactNode, CSSProperties } from 'react'
 import BootstrapModal from 'react-bootstrap/Modal'
 
 import { Button, ButtonProps } from '../Button'

src/components/Navbar/Navbar.tsx

@@ -1,5 +1,5 @@
 import { SizeProp } from '@fortawesome/fontawesome-svg-core'
-import React from 'react'
+import * as React from 'react'
 import Form from 'react-bootstrap/Form'
 import FormControl from 'react-bootstrap/FormControl'
 import Nav from 'react-bootstrap/Nav'

src/components/Panel/Panel.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
+import * as React from 'react'
 import { Card, Collapse } from 'react-bootstrap'
 
 import { ColorVariant } from '../../interfaces'

src/components/Pill/Pill.tsx

@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 import Badge from 'react-bootstrap/Badge'
 
 import { ColorVariant } from '../../interfaces'

src/components/Radio/Radio.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode, CSSProperties } from 'react'
+import { ReactNode, CSSProperties } from 'react'
+import * as React from 'react'
 import Form from 'react-bootstrap/Form'
 
 interface Props {

src/components/RichText/RichText.tsx

@@ -1,5 +1,5 @@
 import { Editor } from '@tinymce/tinymce-react'
-import React from 'react'
+import * as React from 'react'
 
 import 'tinymce/tinymce'
 

src/components/Select/Select.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Typeahead } from 'react-bootstrap-typeahead'
 import 'react-bootstrap-typeahead/css/Typeahead.css'
 

src/components/Spinner/Spinner.tsx

@@ -1,5 +1,4 @@
 /* eslint react/jsx-props-no-spreading: "off" */
-import React from 'react'
 import * as Spinners from 'react-spinners'
 
 import { SpinnerType, SpinnerSizeUnit } from './interfaces'

src/components/Switch/Switch.tsx

@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 import FormCheck from 'react-bootstrap/FormCheck'
 
 interface Props {

src/components/Tab/Tab.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import { Button } from '../Button'
 import { IconType } from '../Icon/interfaces'

src/components/Tab/TabsHeader.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 interface Props {
   /** The children to render */

src/components/Table/Table.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { ButtonVariant } from 'src/interfaces'
 
 import { Button } from '../Button'

src/components/TextField/TextField.tsx

@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 import Form from 'react-bootstrap/Form'
 
 import { getControlSize } from '../../helpers/controlSize'

src/components/TextInput/TextInput.tsx

@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
+import * as React from 'react'
 import Form from 'react-bootstrap/Form'
 
 interface Props {

src/components/Toaster/components.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 import { ToastProps } from './interfaces'
 
 export const titleWithMessage = (title: ToastProps['title'], message: ToastProps['message']) => (

src/components/Toaster/index.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { ToastContainer, toast, Slide } from 'react-toastify'
 
 import { titleWithMessage, titleWithoutMessage } from './components'

src/components/Typeahead/Typeahead.tsx

@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
+import * as React from 'react'
 import { AsyncTypeahead } from 'react-bootstrap-typeahead'
 
 interface Props {

src/components/Typography/Typography.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 interface Props {
   /**

src/components/VideoPlayer/VideoPlayer.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Player } from 'video-react'
 import 'video-react/dist/video-react.css'
 

stories/.eslintrc.js

@@ -1,6 +1,8 @@
 module.exports = {
   rules: {
     'import/no-extraneous-dependencies': 0,
-    'no-alert': 'off'
+    'no-alert': 'off',
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off"
   },
 }

stories/alerts.stories.tsx

@@ -1,5 +1,4 @@
 import { Story, Meta } from '@storybook/react/types-6-0'
-import React from 'react'
 
 import { Alert, AlertProps } from '../src'
 

stories/badges.stories.tsx

@@ -1,5 +1,4 @@
 import { Story, Meta } from '@storybook/react/types-6-0'
-import React from 'react'
 
 import { Badge, BadgeProps } from '../src'
 

stories/breadcrumbs.stories.tsx

@@ -1,5 +1,4 @@
 import { Story, Meta } from '@storybook/react/types-6-0'
-import React from 'react'
 
 import { Breadcrumb, BreadcrumbItem, BreadcrumbProps } from '../src'
 

stories/buttons.stories.tsx

@@ -1,5 +1,4 @@
 import { Story, Meta } from '@storybook/react/types-6-0'
-import React from 'react'
 
 import { Button, ButtonProps } from '../src'
 

stories/calendar.stories.tsx

@@ -1,6 +1,5 @@
 import { Story, Meta } from '@storybook/react/types-6-0'
 import moment from 'moment'
-import React from 'react'
 
 import { Calendar, CalendarProps, Toast, Toaster } from '../src'
 

stories/callout.stories.tsx

@@ -1,5 +1,4 @@
 import { Story, Meta } from '@storybook/react/types-6-0'
-import React from 'react'
 
 import { Callout, CalloutProps } from '../src'
 

stories/checkbox.stories.tsx

@@ -1,5 +1,4 @@
 import { storiesOf } from '@storybook/react'
-import React from 'react'
 
 import { Checkbox } from '../src'
 

stories/datetimepicker.stories.tsx

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/react'
 import * as locales from 'date-fns/locale'
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 import { DateTimePicker, Dropdown } from '../src'