From 366f6464c24bfa0ec1db83d161926c5d1216c34d Mon Sep 17 00:00:00 2001 From: riiniii Date: Fri, 15 Jan 2021 18:27:55 +0800 Subject: [PATCH 1/4] feat(package.json): upgrade components library to react 17.0.x fix #664 --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 78da955d..1968cf1d 100644 --- a/package.json +++ b/package.json @@ -115,11 +115,11 @@ "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", From 6224ed5b3cf239bd9ce25567064622d6f5793df9 Mon Sep 17 00:00:00 2001 From: riiniii Date: Fri, 15 Jan 2021 18:52:19 +0800 Subject: [PATCH 2/4] feat(package.json): update to react v17 fix #664 --- package.json | 2 +- tsconfig.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 1968cf1d..b6d1aaf0 100644 --- a/package.json +++ b/package.json @@ -127,7 +127,7 @@ "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", diff --git a/tsconfig.json b/tsconfig.json index 0ce1e239..9a15aa27 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -29,7 +29,7 @@ "noFallthroughCasesInSwitch": true, "forceConsistentCasingInFileNames": true, "importHelpers": true, - "jsx": "react", + "jsx": "react-jsx", "baseUrl": "./", "paths": { "@hospitalrun/components": [ From 648566a1f8df6c4fb371b30d75560f3a9bd1254f Mon Sep 17 00:00:00 2001 From: riiniii Date: Fri, 15 Jan 2021 19:40:21 +0800 Subject: [PATCH 3/4] feat: update jsx imports and eslint to support react v17 fix #664 --- .eslintrc.js | 2 ++ src/components/Alert/Alert.tsx | 2 +- src/components/Badge/Badge.tsx | 3 ++- src/components/Breadcrumb/Breadcrumb.tsx | 3 ++- src/components/Breadcrumb/BreadcrumbItem.tsx | 3 ++- src/components/Button/Button.tsx | 3 ++- src/components/Calendar/Calendar.tsx | 4 ++-- src/components/Callout/Callout.tsx | 3 ++- src/components/Checkbox/Checkbox.tsx | 3 ++- src/components/DateTimePicker/DateTimePicker.tsx | 3 ++- src/components/Dropdown/Dropdown.tsx | 1 - src/components/Graph/BarGraph.tsx | 2 +- src/components/Graph/LineGraph.tsx | 2 +- src/components/Graph/PieGraph.tsx | 2 +- src/components/Icon/Icon.tsx | 3 ++- src/components/Image/Image.tsx | 2 +- src/components/Label/Label.tsx | 4 ++-- src/components/List/List.tsx | 3 ++- src/components/List/ListItem.tsx | 3 ++- src/components/Modal/Modal.tsx | 2 +- src/components/Navbar/Navbar.tsx | 2 +- src/components/Panel/Panel.tsx | 3 ++- src/components/Pill/Pill.tsx | 3 ++- src/components/Radio/Radio.tsx | 3 ++- src/components/RichText/RichText.tsx | 2 +- src/components/Select/Select.tsx | 1 - src/components/Spinner/Spinner.tsx | 1 - src/components/Switch/Switch.tsx | 3 ++- src/components/Tab/Tab.tsx | 2 +- src/components/Tab/TabsHeader.tsx | 2 +- src/components/Table/Table.tsx | 2 +- src/components/TextField/TextField.tsx | 3 ++- src/components/TextInput/TextInput.tsx | 3 ++- src/components/Toaster/components.tsx | 2 -- src/components/Toaster/index.tsx | 1 - src/components/Typeahead/Typeahead.tsx | 3 ++- src/components/Typography/Typography.tsx | 2 +- src/components/VideoPlayer/VideoPlayer.tsx | 2 +- stories/.eslintrc.js | 4 +++- stories/alerts.stories.tsx | 1 - stories/badges.stories.tsx | 1 - stories/breadcrumbs.stories.tsx | 1 - stories/buttons.stories.tsx | 1 - stories/calendar.stories.tsx | 1 - stories/callout.stories.tsx | 1 - stories/checkbox.stories.tsx | 1 - stories/datetimepicker.stories.tsx | 2 +- stories/dropdown.stories.tsx | 1 - stories/graphs.stories.tsx | 1 - stories/icons.stories.tsx | 1 - stories/image.stories.tsx | 1 - stories/label.stories.tsx | 1 - stories/layout.stories.tsx | 1 - stories/lists.stories.tsx | 1 - stories/modal.stories.tsx | 2 +- stories/navbar.stories.tsx | 1 - stories/panel.stories.tsx | 1 - stories/pills.stories.tsx | 1 - stories/radio.stories.tsx | 1 - stories/richtext.stories.tsx | 1 - stories/select.stories.tsx | 1 - stories/spinner.stories.tsx | 1 - stories/switch.stories.tsx | 1 - stories/tab.stories.tsx | 2 +- stories/table.stories.tsx | 1 - stories/textfield.stories.tsx | 1 - stories/textinput.stories.tsx | 1 - stories/toaster.stories.tsx | 1 - stories/typeahead.stories.tsx | 2 +- stories/typography.stories.tsx | 1 - stories/videoplayer.stories.tsx | 2 +- test/alert.test.tsx | 1 - test/badge.test.tsx | 1 - test/bargraph.test.tsx | 1 - test/breadcrumb.test.tsx | 1 - test/button.test.tsx | 1 - test/calendar.test.tsx | 1 - test/callout.test.tsx | 1 - test/checkbox.test.tsx | 1 - test/datetimepicker.test.tsx | 1 - test/dropdown.test.tsx | 1 - test/icon.test.tsx | 1 - test/image.test.tsx | 1 - test/label.test.tsx | 1 - test/layout.test.tsx | 1 - test/linegraph.test.tsx | 1 - test/list.test.tsx | 1 - test/listitem.test.tsx | 1 - test/modal.test.tsx | 1 - test/navbar.test.tsx | 1 - test/panel.test.tsx | 1 - test/piegraph.test.tsx | 1 - test/pill.test.tsx | 1 - test/radio.test.tsx | 1 - test/richtext.test.tsx | 1 - test/select.test.tsx | 1 - test/spinner.test.tsx | 1 - test/switch.test.tsx | 1 - test/tab.test.tsx | 1 - test/table.test.tsx | 1 - test/textfield.test.tsx | 1 - test/textinput.test.tsx | 1 - test/toaster.test.tsx | 1 - test/typeahead.test.tsx | 1 - test/typography.test.tsx | 1 - test/videoplayer.test.tsx | 1 - 106 files changed, 61 insertions(+), 108 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 407b2b41..556eabda 100644 --- a/.eslintrc.js +++ b/.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', diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx index 17c68b18..53ba2ec3 100644 --- a/src/components/Alert/Alert.tsx +++ b/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' diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx index 4c0c8317..99782ba5 100644 --- a/src/components/Badge/Badge.tsx +++ b/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' diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx index b8a3c0c3..6f0cf02e 100644 --- a/src/components/Breadcrumb/Breadcrumb.tsx +++ b/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 { diff --git a/src/components/Breadcrumb/BreadcrumbItem.tsx b/src/components/Breadcrumb/BreadcrumbItem.tsx index f5250d86..197bebfd 100644 --- a/src/components/Breadcrumb/BreadcrumbItem.tsx +++ b/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 { diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 3425e30f..b8eb9dd6 100644 --- a/src/components/Button/Button.tsx +++ b/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' diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx index 60d941eb..762b74a4 100644 --- a/src/components/Calendar/Calendar.tsx +++ b/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() + const fullCalendarRef = createRef() const onNavClick = (to: 'prev' | 'next' | 'today') => { const calendar = fullCalendarRef?.current?.getApi() diff --git a/src/components/Callout/Callout.tsx b/src/components/Callout/Callout.tsx index d0b31bcb..5d8f98b0 100644 --- a/src/components/Callout/Callout.tsx +++ b/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' diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 8799eb3a..a7edc1bc 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/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 { diff --git a/src/components/DateTimePicker/DateTimePicker.tsx b/src/components/DateTimePicker/DateTimePicker.tsx index 089c62ba..d003298a 100644 --- a/src/components/DateTimePicker/DateTimePicker.tsx +++ b/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' diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index 914131f8..ca0f00bd 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/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' diff --git a/src/components/Graph/BarGraph.tsx b/src/components/Graph/BarGraph.tsx index a27e96ee..4651bbba 100644 --- a/src/components/Graph/BarGraph.tsx +++ b/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' diff --git a/src/components/Graph/LineGraph.tsx b/src/components/Graph/LineGraph.tsx index de612c83..237cc9fa 100644 --- a/src/components/Graph/LineGraph.tsx +++ b/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' diff --git a/src/components/Graph/PieGraph.tsx b/src/components/Graph/PieGraph.tsx index ad57b836..17e8cdce 100644 --- a/src/components/Graph/PieGraph.tsx +++ b/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' diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 3f19d931..c37fc54d 100644 --- a/src/components/Icon/Icon.tsx +++ b/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' diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx index ebc62ae6..0e021a01 100644 --- a/src/components/Image/Image.tsx +++ b/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 { diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx index 8058bce3..3b248bf0 100644 --- a/src/components/Label/Label.tsx +++ b/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' } }, [ ( diff --git a/src/components/Toaster/index.tsx b/src/components/Toaster/index.tsx index f9418b61..ea9f6764 100644 --- a/src/components/Toaster/index.tsx +++ b/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' diff --git a/src/components/Typeahead/Typeahead.tsx b/src/components/Typeahead/Typeahead.tsx index 047ec773..2c3d04ee 100644 --- a/src/components/Typeahead/Typeahead.tsx +++ b/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 { diff --git a/src/components/Typography/Typography.tsx b/src/components/Typography/Typography.tsx index 6da93ac7..fe64926a 100644 --- a/src/components/Typography/Typography.tsx +++ b/src/components/Typography/Typography.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' interface Props { /** diff --git a/src/components/VideoPlayer/VideoPlayer.tsx b/src/components/VideoPlayer/VideoPlayer.tsx index 68fa6d9b..57331448 100644 --- a/src/components/VideoPlayer/VideoPlayer.tsx +++ b/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' diff --git a/stories/.eslintrc.js b/stories/.eslintrc.js index 3553bc1e..8e1337e8 100644 --- a/stories/.eslintrc.js +++ b/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" }, } diff --git a/stories/alerts.stories.tsx b/stories/alerts.stories.tsx index 5167ebb5..f512048c 100644 --- a/stories/alerts.stories.tsx +++ b/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' diff --git a/stories/badges.stories.tsx b/stories/badges.stories.tsx index 64b05a4e..20867490 100644 --- a/stories/badges.stories.tsx +++ b/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' diff --git a/stories/breadcrumbs.stories.tsx b/stories/breadcrumbs.stories.tsx index 64312fe3..ad8c9230 100644 --- a/stories/breadcrumbs.stories.tsx +++ b/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' diff --git a/stories/buttons.stories.tsx b/stories/buttons.stories.tsx index eba5de91..ab637bd5 100644 --- a/stories/buttons.stories.tsx +++ b/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' diff --git a/stories/calendar.stories.tsx b/stories/calendar.stories.tsx index 7aea439c..41150821 100644 --- a/stories/calendar.stories.tsx +++ b/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' diff --git a/stories/callout.stories.tsx b/stories/callout.stories.tsx index a4ef4c1c..388f4766 100644 --- a/stories/callout.stories.tsx +++ b/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' diff --git a/stories/checkbox.stories.tsx b/stories/checkbox.stories.tsx index 55ed0646..84cd5de9 100644 --- a/stories/checkbox.stories.tsx +++ b/stories/checkbox.stories.tsx @@ -1,5 +1,4 @@ import { storiesOf } from '@storybook/react' -import React from 'react' import { Checkbox } from '../src' diff --git a/stories/datetimepicker.stories.tsx b/stories/datetimepicker.stories.tsx index 3debd3c2..82f98161 100644 --- a/stories/datetimepicker.stories.tsx +++ b/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' diff --git a/stories/dropdown.stories.tsx b/stories/dropdown.stories.tsx index 84bb48a6..0a1ff4be 100644 --- a/stories/dropdown.stories.tsx +++ b/stories/dropdown.stories.tsx @@ -1,5 +1,4 @@ import { storiesOf } from '@storybook/react' -import React from 'react' import ButtonToolbar from 'react-bootstrap/ButtonToolbar' import { Dropdown } from '../src' diff --git a/stories/graphs.stories.tsx b/stories/graphs.stories.tsx index 2cc5d275..111d1383 100644 --- a/stories/graphs.stories.tsx +++ b/stories/graphs.stories.tsx @@ -1,5 +1,4 @@ import { storiesOf } from '@storybook/react' -import React from 'react' import { LineGraph, PieGraph, BarGraph } from '../src' diff --git a/stories/icons.stories.tsx b/stories/icons.stories.tsx index 1816f0aa..63ba3c56 100644 --- a/stories/icons.stories.tsx +++ b/stories/icons.stories.tsx @@ -1,5 +1,4 @@ import { storiesOf } from '@storybook/react' -import React from 'react' import { Icon } from '../src' diff --git a/stories/image.stories.tsx b/stories/image.stories.tsx index 01e9eede..6a797920 100644 --- a/stories/image.stories.tsx +++ b/stories/image.stories.tsx @@ -1,5 +1,4 @@ import { storiesOf } from '@storybook/react' -import React from 'react' import { Image } from '../src' diff --git a/stories/label.stories.tsx b/stories/label.stories.tsx index 7165e691..9e22e177 100644 --- a/stories/label.stories.tsx +++ b/stories/label.stories.tsx @@ -1,5 +1,4 @@ import { storiesOf } from '@storybook/react' -import React from 'react' import { Label, TextInput } from '../src' diff --git a/stories/layout.stories.tsx b/stories/layout.stories.tsx index dd3f49dc..bc2a479f 100644 --- a/stories/layout.stories.tsx +++ b/stories/layout.stories.tsx @@ -1,5 +1,4 @@ import { storiesOf } from '@storybook/react' -import React from 'react' import { Container, Row, Column } from '../src/components/Layout' import './layout.stories.css' diff --git a/stories/lists.stories.tsx b/stories/lists.stories.tsx index 79d1c644..886c1d97 100644 --- a/stories/lists.stories.tsx +++ b/stories/lists.stories.tsx @@ -1,5 +1,4 @@ import { storiesOf } from '@storybook/react' -import React from 'react' import { List, ListItem } from '../src' diff --git a/stories/modal.stories.tsx b/stories/modal.stories.tsx index a9f4c606..97953565 100644 --- a/stories/modal.stories.tsx +++ b/stories/modal.stories.tsx @@ -1,5 +1,5 @@ import { storiesOf } from '@storybook/react' -import React, { useState } from 'react' +import { useState } from 'react' import { Modal, Button } from '../src' diff --git a/stories/navbar.stories.tsx b/stories/navbar.stories.tsx index 220d776f..0a6b8f22 100644 --- a/stories/navbar.stories.tsx +++ b/stories/navbar.stories.tsx @@ -1,5 +1,4 @@ import { storiesOf } from '@storybook/react' -import React from 'react' import { Navbar, Toaster, Toast } from '../src' diff --git a/stories/panel.stories.tsx b/stories/panel.stories.tsx index 369cee9c..0601d2cb 100644 --- a/stories/panel.stories.tsx +++ b/stories/panel.stories.tsx @@ -1,5 +1,4 @@ import { storiesOf } from '@storybook/react' -import React from 'react' import { Panel } from '../src/components/Panel' diff --git a/stories/pills.stories.tsx b/stories/pills.stories.tsx index 464f084a..baa50cdb 100644 --- a/stories/pills.stories.tsx +++ b/stories/pills.stories.tsx @@ -1,5 +1,4 @@ import { storiesOf } from '@storybook/react' -import React from 'react' import { Pill } from '../src' diff --git a/stories/radio.stories.tsx b/stories/radio.stories.tsx index 1b199850..5ee68951 100644 --- a/stories/radio.stories.tsx +++ b/stories/radio.stories.tsx @@ -1,5 +1,4 @@ import { storiesOf } from '@storybook/react' -import React from 'react' import { Radio } from '../src' diff --git a/stories/richtext.stories.tsx b/stories/richtext.stories.tsx index 806a1b68..f638c920 100644 --- a/stories/richtext.stories.tsx +++ b/stories/richtext.stories.tsx @@ -1,5 +1,4 @@ import { storiesOf } from '@storybook/react' -import React from 'react' import { RichText } from '../src' diff --git a/stories/select.stories.tsx b/stories/select.stories.tsx index 97a0101b..664709e8 100644 --- a/stories/select.stories.tsx +++ b/stories/select.stories.tsx @@ -1,5 +1,4 @@ import { storiesOf } from '@storybook/react' -import React from 'react' import { Select, Toast, Toaster } from '../src' diff --git a/stories/spinner.stories.tsx b/stories/spinner.stories.tsx index db6f2816..4f66047c 100644 --- a/stories/spinner.stories.tsx +++ b/stories/spinner.stories.tsx @@ -1,5 +1,4 @@ import { storiesOf } from '@storybook/react' -import React from 'react' import { Spinner } from '../src' diff --git a/stories/switch.stories.tsx b/stories/switch.stories.tsx index 635718b4..27546021 100644 --- a/stories/switch.stories.tsx +++ b/stories/switch.stories.tsx @@ -1,5 +1,4 @@ import { storiesOf } from '@storybook/react' -import React from 'react' import { Switch } from '../src' diff --git a/stories/tab.stories.tsx b/stories/tab.stories.tsx index a321d6d1..079cb9e8 100644 --- a/stories/tab.stories.tsx +++ b/stories/tab.stories.tsx @@ -1,5 +1,5 @@ import { storiesOf } from '@storybook/react' -import React, { useState } from 'react' +import { useState } from 'react' import { Tab, TabsHeader } from '../src' diff --git a/stories/table.stories.tsx b/stories/table.stories.tsx index 5e1149c6..a300ae2d 100644 --- a/stories/table.stories.tsx +++ b/stories/table.stories.tsx @@ -1,5 +1,4 @@ import { storiesOf } from '@storybook/react' -import React from 'react' import { Table, Toast, Toaster } from '../src' import { ButtonVariant } from '../src/interfaces' diff --git a/stories/textfield.stories.tsx b/stories/textfield.stories.tsx index eb59297a..eace7406 100644 --- a/stories/textfield.stories.tsx +++ b/stories/textfield.stories.tsx @@ -1,5 +1,4 @@ import { storiesOf } from '@storybook/react' -import React from 'react' import { TextField } from '../src' diff --git a/stories/textinput.stories.tsx b/stories/textinput.stories.tsx index 9fd018e5..5fad8ba1 100644 --- a/stories/textinput.stories.tsx +++ b/stories/textinput.stories.tsx @@ -1,5 +1,4 @@ import { storiesOf } from '@storybook/react' -import React from 'react' import { TextInput } from '../src' diff --git a/stories/toaster.stories.tsx b/stories/toaster.stories.tsx index 186e20b1..745f9810 100644 --- a/stories/toaster.stories.tsx +++ b/stories/toaster.stories.tsx @@ -1,5 +1,4 @@ import { storiesOf } from '@storybook/react' -import React from 'react' import Button from 'react-bootstrap/Button' import { Toast, Toaster } from '../src' diff --git a/stories/typeahead.stories.tsx b/stories/typeahead.stories.tsx index dfa10783..61573ddb 100644 --- a/stories/typeahead.stories.tsx +++ b/stories/typeahead.stories.tsx @@ -1,5 +1,5 @@ import { storiesOf } from '@storybook/react' -import React from 'react' +import * as React from 'react' import { Typeahead } from '../src' diff --git a/stories/typography.stories.tsx b/stories/typography.stories.tsx index 6719cc52..452fab3c 100644 --- a/stories/typography.stories.tsx +++ b/stories/typography.stories.tsx @@ -1,5 +1,4 @@ import { storiesOf } from '@storybook/react' -import React from 'react' import { Typography } from '../src' diff --git a/stories/videoplayer.stories.tsx b/stories/videoplayer.stories.tsx index a64dbde6..f998d31c 100644 --- a/stories/videoplayer.stories.tsx +++ b/stories/videoplayer.stories.tsx @@ -1,5 +1,5 @@ import { storiesOf } from '@storybook/react' -import React from 'react' +import * as React from 'react' import { BigPlayButton, Shortcut, diff --git a/test/alert.test.tsx b/test/alert.test.tsx index d76d7ef1..fbfe5e36 100644 --- a/test/alert.test.tsx +++ b/test/alert.test.tsx @@ -1,5 +1,4 @@ import { shallow } from 'enzyme' -import * as React from 'react' import BootstrapAlert from 'react-bootstrap/Alert' import { Alert, Button } from '../src' diff --git a/test/badge.test.tsx b/test/badge.test.tsx index 37e13b7d..31fd7ea5 100644 --- a/test/badge.test.tsx +++ b/test/badge.test.tsx @@ -1,5 +1,4 @@ import { shallow } from 'enzyme' -import * as React from 'react' import { Badge as BootstrapBadge } from 'react-bootstrap' import { Badge } from '../src' diff --git a/test/bargraph.test.tsx b/test/bargraph.test.tsx index 6cc54b2a..008973a2 100644 --- a/test/bargraph.test.tsx +++ b/test/bargraph.test.tsx @@ -1,5 +1,4 @@ import { mount } from 'enzyme' -import * as React from 'react' import { BarGraph } from '../src' diff --git a/test/breadcrumb.test.tsx b/test/breadcrumb.test.tsx index b53d03b7..e2bdee7a 100644 --- a/test/breadcrumb.test.tsx +++ b/test/breadcrumb.test.tsx @@ -1,5 +1,4 @@ import { shallow } from 'enzyme' -import * as React from 'react' import BootstrapBreadcrumb from 'react-bootstrap/Breadcrumb' import BootstrapBreadcrumbItem from 'react-bootstrap/BreadcrumbItem' import sinon from 'sinon' diff --git a/test/button.test.tsx b/test/button.test.tsx index 85619837..6216bc11 100644 --- a/test/button.test.tsx +++ b/test/button.test.tsx @@ -1,5 +1,4 @@ import { shallow } from 'enzyme' -import * as React from 'react' import { Button as BootstrapButton } from 'react-bootstrap' import * as sinon from 'sinon' diff --git a/test/calendar.test.tsx b/test/calendar.test.tsx index a2e5196e..899fa560 100644 --- a/test/calendar.test.tsx +++ b/test/calendar.test.tsx @@ -2,7 +2,6 @@ import FullCalendar from '@fullcalendar/react' import { TimeGridView } from '@fullcalendar/timegrid' import { mount, shallow } from 'enzyme' import moment from 'moment' -import React from 'react' import { act } from 'react-dom/test-utils' import { Calendar } from '../src' diff --git a/test/callout.test.tsx b/test/callout.test.tsx index 3e512be8..393a76fc 100644 --- a/test/callout.test.tsx +++ b/test/callout.test.tsx @@ -1,5 +1,4 @@ import { shallow } from 'enzyme' -import * as React from 'react' import { Callout } from '../src' diff --git a/test/checkbox.test.tsx b/test/checkbox.test.tsx index 1f4f90de..a856b758 100644 --- a/test/checkbox.test.tsx +++ b/test/checkbox.test.tsx @@ -1,5 +1,4 @@ import { mount, shallow } from 'enzyme' -import * as React from 'react' import FormCheck from 'react-bootstrap/FormCheck' import * as sinon from 'sinon' diff --git a/test/datetimepicker.test.tsx b/test/datetimepicker.test.tsx index 8288acd2..6c9c4340 100644 --- a/test/datetimepicker.test.tsx +++ b/test/datetimepicker.test.tsx @@ -1,5 +1,4 @@ import { shallow, mount } from 'enzyme' -import React from 'react' import DatePicker from 'react-datepicker' import * as sinon from 'sinon' diff --git a/test/dropdown.test.tsx b/test/dropdown.test.tsx index c4153d4f..bd949721 100644 --- a/test/dropdown.test.tsx +++ b/test/dropdown.test.tsx @@ -1,5 +1,4 @@ import { shallow } from 'enzyme' -import * as React from 'react' import DropdownButton from 'react-bootstrap/DropdownButton' import { Dropdown } from '../src' diff --git a/test/icon.test.tsx b/test/icon.test.tsx index 03fb7888..6d87d3a7 100644 --- a/test/icon.test.tsx +++ b/test/icon.test.tsx @@ -1,6 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { shallow, mount } from 'enzyme' -import * as React from 'react' import sinon from 'sinon' import { Icon } from '../src' diff --git a/test/image.test.tsx b/test/image.test.tsx index 662e276e..cdacbe87 100644 --- a/test/image.test.tsx +++ b/test/image.test.tsx @@ -1,5 +1,4 @@ import { shallow } from 'enzyme' -import * as React from 'react' import BootstrapImage from 'react-bootstrap/Image' import { Image } from '../src' diff --git a/test/label.test.tsx b/test/label.test.tsx index 72c5dade..6eb2c5b7 100644 --- a/test/label.test.tsx +++ b/test/label.test.tsx @@ -1,6 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { shallow } from 'enzyme' -import * as React from 'react' import { FormLabel } from 'react-bootstrap' import { Label } from '../src' diff --git a/test/layout.test.tsx b/test/layout.test.tsx index 2e3b4b96..4fc42201 100644 --- a/test/layout.test.tsx +++ b/test/layout.test.tsx @@ -1,5 +1,4 @@ import { shallow } from 'enzyme' -import React from 'react' import bootstrapColumn from 'react-bootstrap/Col' import bootstrapContainer from 'react-bootstrap/Container' import bootstrapRow from 'react-bootstrap/Row' diff --git a/test/linegraph.test.tsx b/test/linegraph.test.tsx index b1c3aa1c..e1795212 100644 --- a/test/linegraph.test.tsx +++ b/test/linegraph.test.tsx @@ -1,5 +1,4 @@ import { mount } from 'enzyme' -import * as React from 'react' import { LineGraph } from '../src' diff --git a/test/list.test.tsx b/test/list.test.tsx index aa7a15bf..132f0083 100644 --- a/test/list.test.tsx +++ b/test/list.test.tsx @@ -1,5 +1,4 @@ import { shallow } from 'enzyme' -import * as React from 'react' import { ListGroup } from 'react-bootstrap' import { List } from '../src' diff --git a/test/listitem.test.tsx b/test/listitem.test.tsx index b70ec1d4..4e1fb538 100644 --- a/test/listitem.test.tsx +++ b/test/listitem.test.tsx @@ -1,5 +1,4 @@ import { shallow } from 'enzyme' -import * as React from 'react' import { ListGroupItem } from 'react-bootstrap' import * as sinon from 'sinon' diff --git a/test/modal.test.tsx b/test/modal.test.tsx index 8dd0e3f3..203a1598 100644 --- a/test/modal.test.tsx +++ b/test/modal.test.tsx @@ -1,5 +1,4 @@ import { shallow, mount } from 'enzyme' -import * as React from 'react' import BootstrapModal from 'react-bootstrap/Modal' import BootstrapModalHeader from 'react-bootstrap/ModalHeader' diff --git a/test/navbar.test.tsx b/test/navbar.test.tsx index 2467cfa7..d3b9265e 100644 --- a/test/navbar.test.tsx +++ b/test/navbar.test.tsx @@ -1,5 +1,4 @@ import { shallow } from 'enzyme' -import * as React from 'react' import { Nav, Navbar as NavBarRB, NavDropdown, FormControl } from 'react-bootstrap' import * as sinon from 'sinon' diff --git a/test/panel.test.tsx b/test/panel.test.tsx index dcb03453..a5ed6005 100644 --- a/test/panel.test.tsx +++ b/test/panel.test.tsx @@ -1,5 +1,4 @@ import { shallow, mount } from 'enzyme' -import * as React from 'react' import { Card, Collapse } from 'react-bootstrap' import { Panel, Icon } from '../src' diff --git a/test/piegraph.test.tsx b/test/piegraph.test.tsx index 1d165479..d3805906 100644 --- a/test/piegraph.test.tsx +++ b/test/piegraph.test.tsx @@ -1,5 +1,4 @@ import { mount } from 'enzyme' -import * as React from 'react' import { PieGraph } from '../src' diff --git a/test/pill.test.tsx b/test/pill.test.tsx index 10325a69..1d7d61d1 100644 --- a/test/pill.test.tsx +++ b/test/pill.test.tsx @@ -1,5 +1,4 @@ import { shallow } from 'enzyme' -import * as React from 'react' import { Badge } from 'react-bootstrap' import { Pill } from '../src' diff --git a/test/radio.test.tsx b/test/radio.test.tsx index 264ccd6d..88994984 100644 --- a/test/radio.test.tsx +++ b/test/radio.test.tsx @@ -1,5 +1,4 @@ import { shallow } from 'enzyme' -import * as React from 'react' import { FormCheck } from 'react-bootstrap' import * as sinon from 'sinon' diff --git a/test/richtext.test.tsx b/test/richtext.test.tsx index 08a9f382..dd376d63 100644 --- a/test/richtext.test.tsx +++ b/test/richtext.test.tsx @@ -1,6 +1,5 @@ import { Editor } from '@tinymce/tinymce-react' import { shallow } from 'enzyme' -import * as React from 'react' import { act } from 'react-dom/test-utils' import { RichText } from '../src' diff --git a/test/select.test.tsx b/test/select.test.tsx index b753ebb8..143a1cb0 100644 --- a/test/select.test.tsx +++ b/test/select.test.tsx @@ -1,5 +1,4 @@ import { shallow, mount } from 'enzyme' -import * as React from 'react' import { Typeahead as BootstrapTypeahead } from 'react-bootstrap-typeahead' import { Select } from '../src' diff --git a/test/spinner.test.tsx b/test/spinner.test.tsx index e87ba368..6b190f4c 100644 --- a/test/spinner.test.tsx +++ b/test/spinner.test.tsx @@ -1,5 +1,4 @@ import { shallow } from 'enzyme' -import * as React from 'react' import * as Spinners from 'react-spinners' import { Spinner } from '../src' diff --git a/test/switch.test.tsx b/test/switch.test.tsx index 39498446..edd98e9c 100644 --- a/test/switch.test.tsx +++ b/test/switch.test.tsx @@ -1,5 +1,4 @@ import { mount } from 'enzyme' -import * as React from 'react' import FormCheck from 'react-bootstrap/FormCheck' import * as sinon from 'sinon' diff --git a/test/tab.test.tsx b/test/tab.test.tsx index 8b48be0f..5bf7a45c 100644 --- a/test/tab.test.tsx +++ b/test/tab.test.tsx @@ -1,5 +1,4 @@ import { shallow, mount } from 'enzyme' -import * as React from 'react' import * as sinon from 'sinon' import { Tab, TabsHeader, Icon } from '../src' diff --git a/test/table.test.tsx b/test/table.test.tsx index 03ab355c..1cc044a3 100644 --- a/test/table.test.tsx +++ b/test/table.test.tsx @@ -1,5 +1,4 @@ import { mount } from 'enzyme' -import * as React from 'react' import { Button } from 'react-bootstrap' import { Table } from '../src' diff --git a/test/textfield.test.tsx b/test/textfield.test.tsx index 64741ded..dcbed499 100644 --- a/test/textfield.test.tsx +++ b/test/textfield.test.tsx @@ -1,5 +1,4 @@ import { mount } from 'enzyme' -import * as React from 'react' import * as sinon from 'sinon' import { TextField } from '../src' diff --git a/test/textinput.test.tsx b/test/textinput.test.tsx index d61116a0..a2aceb91 100644 --- a/test/textinput.test.tsx +++ b/test/textinput.test.tsx @@ -1,5 +1,4 @@ import { mount } from 'enzyme' -import * as React from 'react' import Form from 'react-bootstrap/Form' import * as sinon from 'sinon' diff --git a/test/toaster.test.tsx b/test/toaster.test.tsx index 81d29476..7ef287ca 100644 --- a/test/toaster.test.tsx +++ b/test/toaster.test.tsx @@ -1,5 +1,4 @@ import { mount } from 'enzyme' -import * as React from 'react' import { Toaster, Toast } from '../src' diff --git a/test/typeahead.test.tsx b/test/typeahead.test.tsx index d27dd0ac..bcdc2c3b 100644 --- a/test/typeahead.test.tsx +++ b/test/typeahead.test.tsx @@ -1,5 +1,4 @@ import { shallow, mount } from 'enzyme' -import React from 'react' import { AsyncTypeahead } from 'react-bootstrap-typeahead' import { act } from 'react-dom/test-utils' diff --git a/test/typography.test.tsx b/test/typography.test.tsx index 611c6f3e..f9795f5d 100644 --- a/test/typography.test.tsx +++ b/test/typography.test.tsx @@ -1,5 +1,4 @@ import { shallow } from 'enzyme' -import * as React from 'react' import { Typography } from '../src' diff --git a/test/videoplayer.test.tsx b/test/videoplayer.test.tsx index f8de14a8..623fd362 100644 --- a/test/videoplayer.test.tsx +++ b/test/videoplayer.test.tsx @@ -1,5 +1,4 @@ import { shallow } from 'enzyme' -import React from 'react' import { Player, ControlBar, ReplayControl } from 'video-react' import { VideoPlayer } from '../src' From 7515b904e729207236040c9d3624147a59d89f49 Mon Sep 17 00:00:00 2001 From: riiniii Date: Fri, 15 Jan 2021 20:36:29 +0800 Subject: [PATCH 4/4] feat: fix typescript typing, and add in an import fix #664 --- src/components/Layout/Column.tsx | 2 +- src/components/Layout/Container.tsx | 2 +- src/components/Layout/Row.tsx | 5 +++-- stories/typography.stories.tsx | 1 + 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/Layout/Column.tsx b/src/components/Layout/Column.tsx index 8169e817..6b5df531 100644 --- a/src/components/Layout/Column.tsx +++ b/src/components/Layout/Column.tsx @@ -6,7 +6,7 @@ interface Props { * HTML element to be used for the component * @default
*/ - as?: React.ElementType + as?: keyof JSX.IntrinsicElements /** * The number of columns to span on extra large devices (≥ 1200px) */ diff --git a/src/components/Layout/Container.tsx b/src/components/Layout/Container.tsx index b8a2237a..f9c9e09c 100644 --- a/src/components/Layout/Container.tsx +++ b/src/components/Layout/Container.tsx @@ -6,7 +6,7 @@ interface Props { * A custom element to be used for the component * @default
*/ - 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 diff --git a/src/components/Layout/Row.tsx b/src/components/Layout/Row.tsx index 386e8eb4..d30db668 100644 --- a/src/components/Layout/Row.tsx +++ b/src/components/Layout/Row.tsx @@ -1,4 +1,5 @@ -import React, { CSSProperties } from 'react' +import { CSSProperties } from 'react' +import * as React from 'react' import BootstrapRow from 'react-bootstrap/Row' interface Props { @@ -6,7 +7,7 @@ interface Props { * HTML element to be used for the component * @default
*/ - as?: React.ElementType + as?: keyof JSX.IntrinsicElements // React.ElementType /** * Removes the gutter spacing between `Columns` as well as any added negative margins. * @default false diff --git a/stories/typography.stories.tsx b/stories/typography.stories.tsx index 452fab3c..2db10d52 100644 --- a/stories/typography.stories.tsx +++ b/stories/typography.stories.tsx @@ -1,4 +1,5 @@ import { storiesOf } from '@storybook/react' +import * as React from 'react' import { Typography } from '../src'