Run npx react-codemod update-react-imports

Since React 17 we no longer need to import React for JSX transforms. Running this codemod: * Removes all unused React imports as a result of upgrading to the new JSX transform. * Changes all default React imports (i.e. import React from "react") to destructured named imports (ex. import { useState } from "react") which is the preferred style going into the future. These cannot be separated, even though we now only needed to remove the unused imports.
owid · Dec 26, 2024 · 05dee10 · 05dee10
1 parent a808921
commit 05dee10
Show file tree

Hide file tree

Showing 372 changed files with 392 additions and 558 deletions.
diff --git a/adminShared/search.tsx b/adminShared/search.tsx
@@ -1,5 +1,5 @@
 import { drop, escapeRegExp, sortBy } from "@ourworldindata/utils"
-import React from "react"
+import * as React from "react"
 
 export interface SearchWord {
     regex: RegExp

diff --git a/adminSiteClient/Admin.tsx b/adminSiteClient/Admin.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import ReactDOM from "react-dom"
 import * as lodash from "lodash"
 import { observable, computed, action } from "mobx"

diff --git a/adminSiteClient/AdminApp.tsx b/adminSiteClient/AdminApp.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { Admin } from "./Admin.js"
 import { ChartEditorPage } from "./ChartEditorPage.js"
 import { action } from "mobx"

diff --git a/adminSiteClient/AdminAppContext.ts b/adminSiteClient/AdminAppContext.ts
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { Admin } from "./Admin.js"
 
 export interface AdminAppContextType {

diff --git a/adminSiteClient/AdminLayout.tsx b/adminSiteClient/AdminLayout.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observable, action, computed } from "mobx"
 import { observer } from "mobx-react"
 

diff --git a/adminSiteClient/AdminSidebar.tsx b/adminSiteClient/AdminSidebar.tsx
@@ -1,5 +1,5 @@
 import { Link } from "./Link.js"
-import React from "react"
+import * as React from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import {
     faChartBar,

diff --git a/adminSiteClient/BulkDownloadPage.tsx b/adminSiteClient/BulkDownloadPage.tsx
@@ -1,10 +1,10 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import { AdminLayout } from "./AdminLayout.js"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
 
 @observer
-export class BulkDownloadPage extends React.Component {
+export class BulkDownloadPage extends Component {
     static contextType = AdminAppContext
     context!: AdminAppContextType
 
@@ -20,7 +20,7 @@ export class BulkDownloadPage extends React.Component {
     }
 }
 
-export class DownloadChartsSection extends React.Component {
+export class DownloadChartsSection extends Component {
     render() {
         return (
             <section>

diff --git a/adminSiteClient/BulkGrapherConfigEditor.tsx b/adminSiteClient/BulkGrapherConfigEditor.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import {
     chartBulkUpdateAllowedColumnNamesAndTypes,
     WHITELISTED_SQL_COLUMN_NAMES,
@@ -130,7 +130,7 @@ const config: GrapherConfigGridEditorConfig = {
     finalVariableLayerModificationFn: () => ({}),
 }
 
-export class BulkGrapherConfigEditorPage extends React.Component {
+export class BulkGrapherConfigEditorPage extends Component {
     render() {
         return (
             <AdminLayout title="Bulk chart editor">

diff --git a/adminSiteClient/ChartEditorView.tsx b/adminSiteClient/ChartEditorView.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observer } from "mobx-react"
 import {
     observable,

diff --git a/adminSiteClient/ChartIndexPage.tsx b/adminSiteClient/ChartIndexPage.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import { observable, computed, action, runInAction } from "mobx"
 
@@ -15,7 +15,7 @@ import {
 import { sortNumeric, SortOrder } from "@ourworldindata/utils"
 
 @observer
-export class ChartIndexPage extends React.Component {
+export class ChartIndexPage extends Component {
     static contextType = AdminAppContext
     context!: AdminAppContextType
 

diff --git a/adminSiteClient/ChartList.tsx b/adminSiteClient/ChartList.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observer } from "mobx-react"
 import { runInAction, observable } from "mobx"
 import { bind } from "decko"

diff --git a/adminSiteClient/ChartRow.tsx b/adminSiteClient/ChartRow.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observer } from "mobx-react"
 import { action, runInAction } from "mobx"
 import * as lodash from "lodash"

diff --git a/adminSiteClient/ChartViewIndexPage.tsx b/adminSiteClient/ChartViewIndexPage.tsx
@@ -1,4 +1,5 @@
-import React, { useContext, useEffect, useMemo, useState } from "react"
+import { useContext, useEffect, useMemo, useState } from "react"
+import * as React from "react"
 import { Button, Flex, Input, Space, Table } from "antd"
 
 import { AdminLayout } from "./AdminLayout.js"

diff --git a/adminSiteClient/ColorSchemeDropdown.tsx b/adminSiteClient/ColorSchemeDropdown.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { computed, action } from "mobx"
 import Select from "react-select"
 import { GrapherChartOrMapType } from "@ourworldindata/types"
@@ -27,7 +27,7 @@ interface ColorSchemeDropdownProps {
 }
 
 @observer
-export class ColorSchemeDropdown extends React.Component<ColorSchemeDropdownProps> {
+export class ColorSchemeDropdown extends Component<ColorSchemeDropdownProps> {
     static defaultProps = {
         additionalOptions: [],
         gradientColorCount: 6,

diff --git a/adminSiteClient/Colorpicker.tsx b/adminSiteClient/Colorpicker.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component, Fragment } from "react"
 import { action } from "mobx"
 import { observer } from "mobx-react"
 import { SketchPicker } from "react-color"
@@ -16,7 +16,7 @@ interface ColorpickerProps {
 }
 
 @observer
-export class Colorpicker extends React.Component<ColorpickerProps> {
+export class Colorpicker extends Component<ColorpickerProps> {
     @action.bound onColor(color: string) {
         if (color === "") {
             this.props.onColor(undefined)
@@ -39,7 +39,7 @@ export class Colorpicker extends React.Component<ColorpickerProps> {
         }
 
         return (
-            <React.Fragment>
+            <Fragment>
                 <SketchPicker
                     disableAlpha
                     presetColors={availableColors.map((color) => ({
@@ -49,7 +49,7 @@ export class Colorpicker extends React.Component<ColorpickerProps> {
                     color={this.props.color}
                     onChange={(color) => this.onColor(color.hex)}
                 />
-            </React.Fragment>
+            </Fragment>
         )
     }
 }
diff --git a/adminSiteClient/DatasetEditPage.tsx b/adminSiteClient/DatasetEditPage.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import { observable, computed, runInAction, action } from "mobx"
 import * as lodash from "lodash"
@@ -79,7 +79,7 @@ class DatasetEditable {
 }
 
 @observer
-class DatasetTagEditor extends React.Component<{
+class DatasetTagEditor extends Component<{
     newDataset: DatasetEditable
     availableTags: { id: number; name: string; parentName: string }[]
 }> {
@@ -104,7 +104,7 @@ class DatasetTagEditor extends React.Component<{
 }
 
 @observer
-class DatasetEditor extends React.Component<{ dataset: DatasetPageData }> {
+class DatasetEditor extends Component<{ dataset: DatasetPageData }> {
     static contextType = AdminAppContext
     context!: AdminAppContextType
     @observable newDataset!: DatasetEditable
@@ -405,7 +405,7 @@ class DatasetEditor extends React.Component<{ dataset: DatasetPageData }> {
 }
 
 @observer
-export class DatasetEditPage extends React.Component<{ datasetId: number }> {
+export class DatasetEditPage extends Component<{ datasetId: number }> {
     static contextType = AdminAppContext
     context!: AdminAppContextType
     @observable dataset?: DatasetPageData

diff --git a/adminSiteClient/DatasetList.tsx b/adminSiteClient/DatasetList.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observable, action } from "mobx"
 import { observer } from "mobx-react"
 import * as lodash from "lodash"

diff --git a/adminSiteClient/DatasetsIndexPage.tsx b/adminSiteClient/DatasetsIndexPage.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import { observable, computed, action, runInAction } from "mobx"
 import * as lodash from "lodash"
@@ -15,7 +15,7 @@ import {
 } from "../adminShared/search.js"
 
 @observer
-export class DatasetsIndexPage extends React.Component {
+export class DatasetsIndexPage extends Component {
     static contextType = AdminAppContext
     context!: AdminAppContextType
 

diff --git a/adminSiteClient/DeployStatusPage.tsx b/adminSiteClient/DeployStatusPage.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import { action, observable, runInAction } from "mobx"
 
@@ -16,7 +16,7 @@ const statusLabel: Record<DeployStatus, string> = {
 }
 
 @observer
-export class DeployStatusPage extends React.Component {
+export class DeployStatusPage extends Component {
     static contextType = AdminAppContext
     context!: AdminAppContextType
 

diff --git a/adminSiteClient/DimensionCard.tsx b/adminSiteClient/DimensionCard.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component, Fragment } from "react"
 import { observable, computed, action } from "mobx"
 import { observer } from "mobx-react"
 import { ChartDimension } from "@ourworldindata/grapher"
@@ -27,7 +27,7 @@ import { AbstractChartEditor } from "./AbstractChartEditor.js"
 @observer
 export class DimensionCard<
     Editor extends AbstractChartEditor,
-> extends React.Component<{
+> extends Component<{
     dimension: ChartDimension
     editor: Editor
     isDndEnabled?: boolean
@@ -70,7 +70,7 @@ export class DimensionCard<
     private get tableDisplaySettings() {
         const { tableDisplay = {} } = this.props.dimension.display
         return (
-            <React.Fragment>
+            <Fragment>
                 <hr className="ui divider" />
                 Table:
                 <Toggle
@@ -96,7 +96,7 @@ export class DimensionCard<
                     }}
                 />
                 <hr className="ui divider" />
-            </React.Fragment>
+            </Fragment>
         )
     }
 

diff --git a/adminSiteClient/EditTags.tsx b/adminSiteClient/EditTags.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { createRef, Component } from "react"
 import { action } from "mobx"
 import { observer } from "mobx-react"
 import { DbChartTagJoin } from "@ourworldindata/utils"
@@ -9,15 +9,15 @@ import {
 } from "react-tag-autocomplete"
 
 @observer
-export class EditTags extends React.Component<{
+export class EditTags extends Component<{
     tags: DbChartTagJoin[]
     suggestions: DbChartTagJoin[]
     onDelete: (index: number) => void
     onAdd: (tag: DbChartTagJoin) => void
     onSave: () => void
 }> {
     dismissable: boolean = true
-    reactTagsApi = React.createRef<ReactTagsAPI>()
+    reactTagsApi = createRef<ReactTagsAPI>()
 
     @action.bound onClickSomewhere() {
         if (this.dismissable) this.props.onSave()

diff --git a/adminSiteClient/EditableTags.tsx b/adminSiteClient/EditableTags.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import * as lodash from "lodash"
 import { observable, action } from "mobx"
 import { observer } from "mobx-react"

diff --git a/adminSiteClient/EditorBasicTab.tsx b/adminSiteClient/EditorBasicTab.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import {
     observable,
     action,

diff --git a/adminSiteClient/EditorColorScaleSection.tsx b/adminSiteClient/EditorColorScaleSection.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component, Fragment } from "react"
 import { action, computed, runInAction } from "mobx"
 import { observer } from "mobx-react"
 import Select from "react-select"
@@ -41,7 +41,7 @@ interface EditorColorScaleSectionFeatures {
 }
 
 @observer
-export class EditorColorScaleSection extends React.Component<{
+export class EditorColorScaleSection extends Component<{
     scale: ColorScale
     chartType: GrapherChartOrMapType
     features: EditorColorScaleSectionFeatures
@@ -50,7 +50,7 @@ export class EditorColorScaleSection extends React.Component<{
 }> {
     render() {
         return (
-            <React.Fragment>
+            <Fragment>
                 <ColorsSection
                     scale={this.props.scale}
                     onChange={this.props.onChange}
@@ -62,13 +62,13 @@ export class EditorColorScaleSection extends React.Component<{
                     features={this.props.features}
                     onChange={this.props.onChange}
                 />
-            </React.Fragment>
+            </Fragment>
         )
     }
 }
 
 @observer
-class ColorLegendSection extends React.Component<{
+class ColorLegendSection extends Component<{
     scale: ColorScale
     features: EditorColorScaleSectionFeatures
     onChange?: () => void
@@ -130,7 +130,7 @@ class ColorLegendSection extends React.Component<{
 }
 
 @observer
-class ColorsSection extends React.Component<{
+class ColorsSection extends Component<{
     scale: ColorScale
     chartType: GrapherChartOrMapType
     showLineChartColors: boolean
@@ -275,7 +275,7 @@ class ColorsSection extends React.Component<{
 }
 
 @observer
-class ColorSchemeEditor extends React.Component<{
+class ColorSchemeEditor extends Component<{
     scale: ColorScale
     showLineChartColors: boolean
     onChange?: () => void
@@ -319,7 +319,7 @@ class ColorSchemeEditor extends React.Component<{
 }
 
 @observer
-class BinLabelView extends React.Component<{
+class BinLabelView extends Component<{
     scale: ColorScale
     bin: ColorScaleBin
     index: number
@@ -385,7 +385,7 @@ function populateManualBinValuesIfAutomatic(scale: ColorScale) {
 }
 
 @observer
-class NumericBinView extends React.Component<{
+class NumericBinView extends Component<{
     scale: ColorScale
     bin: NumericBin
     index: number
@@ -492,7 +492,7 @@ class NumericBinView extends React.Component<{
 }
 
 @observer
-class CategoricalBinView extends React.Component<{
+class CategoricalBinView extends Component<{
     scale: ColorScale
     bin: CategoricalBin
     showLineChartColors: boolean

diff --git a/adminSiteClient/EditorCustomizeTab.tsx b/adminSiteClient/EditorCustomizeTab.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observable, computed, action } from "mobx"
 import { observer } from "mobx-react"
 import {

diff --git a/adminSiteClient/EditorDataTab.tsx b/adminSiteClient/EditorDataTab.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import {
     differenceOfSets,
     moveArrayItemToIndex,