chore: Add debug info to JSX output (#12295)

* chore: Add debug info to JSX output

* Pin React to `^16.14.0` instead of `^16.13.0`

* Remove redundant `React`s

* Add `@babel/preset-react` for Storybook

* Update babel.config.js

.eslintrc.js

@@ -34,6 +34,7 @@ module.exports = {
     rules: {
         'no-only-tests/no-only-tests': 'error',
         'react/prop-types': [0],
+        'react/react-in-jsx-scope': [0],
         'react/no-unescaped-entities': [0],
         'react/jsx-no-target-blank': [0],
         'react/self-closing-comp': [

.storybook/kea-story.tsx

@@ -2,7 +2,7 @@ import { createMemoryHistory } from 'history'
 import { initKea } from '~/initKea'
 import { router } from 'kea-router'
 import { getContext } from 'kea'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { App } from 'scenes/App'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { worker } from '~/mocks/browser'

.storybook/preview.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import '~/styles'
 import './storybook.scss'
 import { worker } from '~/mocks/browser'

babel.config.js

@@ -2,7 +2,6 @@
 module.exports = {
     plugins: [
         '@babel/plugin-transform-runtime',
-        '@babel/plugin-transform-react-jsx',
         '@babel/plugin-proposal-class-properties',
         '@babel/plugin-proposal-private-property-in-object',
     ],
@@ -14,6 +13,12 @@ module.exports = {
                 corejs: 3,
             },
         ],
+        [
+            '@babel/preset-react',
+            {
+                runtime: 'automatic',
+            },
+        ],
         '@babel/typescript',
     ],
 }

frontend/src/exporter/ExportedInsight/ExportedInsight.tsx

@@ -1,5 +1,4 @@
 import { ChartDisplayType, InsightLogicProps, InsightModel, InsightType } from '~/types'
-import React from 'react'
 import { BindLogic } from 'kea'
 import { insightLogic } from 'scenes/insights/insightLogic'
 import { InsightViz } from 'lib/components/Cards/InsightCard/InsightCard'

frontend/src/exporter/Exporter.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
 import { Exporter } from './Exporter'
 import { insight, dashboard } from '~/exporter/__mocks__/Exporter.mocks'

frontend/src/exporter/Exporter.tsx

@@ -1,6 +1,6 @@
 import '~/styles'
 import './Exporter.scss'
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import { ExportedData, ExportType } from '~/exporter/types'
 import { DashboardPlacement } from '~/types'
 import { ExportedInsight } from '~/exporter/ExportedInsight/ExportedInsight'

frontend/src/exporter/index.tsx

@@ -1,6 +1,5 @@
 import '~/styles'
 import './Exporter.scss'
-import React from 'react'
 import ReactDOM from 'react-dom'
 import { loadPostHogJS } from '~/loadPostHogJS'
 import { initKea } from '~/initKea'

frontend/src/index.tsx

@@ -1,6 +1,5 @@
 import '~/styles'
 
-import React from 'react'
 import ReactDOM from 'react-dom'
 import { getContext } from 'kea'
 

frontend/src/layout/Error404.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { NotFound } from 'lib/components/NotFound'
 
 export function Error404(): JSX.Element {

frontend/src/layout/ErrorBoundary/ErrorBoundary.tsx

@@ -2,7 +2,6 @@ import { ErrorBoundary as SentryErrorBoundary } from '@sentry/react'
 import { HelpButton } from 'lib/components/HelpButton/HelpButton'
 import { IconArrowDropDown } from 'lib/components/icons'
 import { LemonButton } from 'lib/components/LemonButton'
-import React from 'react'
 import './ErrorBoundary.scss'
 
 export function ErrorBoundary({ children }: { children: React.ReactElement }): JSX.Element {

frontend/src/layout/ErrorNetwork.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Button } from 'antd'
 import { ReloadOutlined } from '@ant-design/icons'
 

frontend/src/layout/ErrorProjectUnavailable.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { PageHeader } from 'lib/components/PageHeader'
 import { useValues } from 'kea'
 import { organizationLogic } from '../scenes/organizationLogic'

frontend/src/layout/navigation/Breadcrumbs/breadcrumbsLogic.tsx

@@ -7,7 +7,6 @@ import { sceneLogic } from 'scenes/sceneLogic'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { identifierToHuman, objectsEqual, stripHTTP } from 'lib/utils'
 import { userLogic } from 'scenes/userLogic'
-import React from 'react'
 import { Lettermark } from 'lib/components/Lettermark/Lettermark'
 import { ProfilePicture } from 'lib/components/ProfilePicture'
 import { ProjectSwitcherOverlay } from '~/layout/navigation/ProjectSwitcher'

frontend/src/layout/navigation/Navigation.stories.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
 import { Meta } from '@storybook/react'
 import { Layout } from 'antd'
 import { TopBar } from './TopBar/TopBar'
 import { SideBar } from './SideBar/SideBar'
+import React from 'react'
 
 export default {
     title: 'Layout/Navigation',

frontend/src/layout/navigation/Navigation.tsx

@@ -1,6 +1,5 @@
 import { Layout } from 'antd'
 import { useValues } from 'kea'
-import React from 'react'
 import { sceneLogic } from 'scenes/sceneLogic'
 import { Scene } from 'scenes/sceneTypes'
 import { Breadcrumbs } from './Breadcrumbs/Breadcrumbs'

frontend/src/layout/navigation/OrganizationSwitcher.tsx

@@ -5,7 +5,6 @@ import { LemonDivider } from 'lib/components/LemonDivider'
 import { LemonTag } from 'lib/components/LemonTag/LemonTag'
 import { Lettermark } from 'lib/components/Lettermark/Lettermark'
 import { membershipLevelToName } from 'lib/utils/permissioning'
-import React from 'react'
 import { organizationLogic } from 'scenes/organizationLogic'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { sceneLogic } from 'scenes/sceneLogic'

frontend/src/layout/navigation/ProjectNotice.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { useActions, useValues } from 'kea'
 import { Link } from 'lib/components/Link'
 import { navigationLogic } from './navigationLogic'

frontend/src/layout/navigation/ProjectSwitcher.tsx

@@ -3,7 +3,6 @@ import { router } from 'kea-router'
 import { IconPlus, IconSettings } from 'lib/components/icons'
 import { LemonButton, LemonButtonWithSideAction } from 'lib/components/LemonButton'
 import { LemonDivider } from 'lib/components/LemonDivider'
-import React from 'react'
 import { organizationLogic } from 'scenes/organizationLogic'
 import { sceneLogic } from 'scenes/sceneLogic'
 import { teamLogic } from 'scenes/teamLogic'

frontend/src/layout/navigation/SideBar/PageButton.tsx

@@ -6,7 +6,6 @@ import { Scene } from 'scenes/sceneTypes'
 import { LemonButton, LemonButtonProps, LemonButtonWithSideAction, SideAction } from 'lib/components/LemonButton'
 import { sceneConfigurations } from 'scenes/scenes'
 import { LemonTag } from 'lib/components/LemonTag/LemonTag'
-import React from 'react'
 
 export interface PageButtonProps extends Pick<LemonButtonProps, 'icon' | 'onClick' | 'to'> {
     /** Used for highlighting the active scene. `identifier` of type number means dashboard ID instead of scene. */

frontend/src/layout/navigation/SideBar/SideBar.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { Link } from 'lib/components/Link'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { ProjectSwitcherOverlay } from '~/layout/navigation/ProjectSwitcher'
 import {
     IconApps,

frontend/src/layout/navigation/SideBar/SideBarApps.tsx

@@ -4,7 +4,6 @@ import { Scene } from 'scenes/sceneTypes'
 import { canInstallPlugins } from 'scenes/plugins/access'
 import { LemonButton } from 'lib/components/LemonButton'
 import { PluginSource } from 'scenes/plugins/source/PluginSource'
-import React from 'react'
 import { useActions, useValues } from 'kea'
 import { organizationLogic } from 'scenes/organizationLogic'
 import { navigationLogic } from '~/layout/navigation/navigationLogic'

frontend/src/layout/navigation/TopBar/Announcement.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import ReactMarkdown from 'react-markdown'
 import clsx from 'clsx'
 import { CloseOutlined } from '@ant-design/icons'

frontend/src/layout/navigation/TopBar/NotificationBell.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { IconArrowDropDown, IconInfo, IconNotification, IconWithCount } from 'lib/components/icons'
 import { notificationsLogic } from '~/layout/navigation/TopBar/notificationsLogic'
 import { useActions, useValues } from 'kea'

frontend/src/layout/navigation/TopBar/SitePopover.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { useActions, useMountedLogic, useValues } from 'kea'
 import { userLogic } from '../../../scenes/userLogic'
 import { ProfilePicture } from '../../../lib/components/ProfilePicture'

frontend/src/layout/navigation/TopBar/TopBar.tsx

@@ -1,5 +1,4 @@
 import { useActions, useValues } from 'kea'
-import React from 'react'
 import { FriendlyLogo } from '~/toolbar/assets/FriendlyLogo'
 import { SitePopover } from './SitePopover'
 import { Announcement } from './Announcement'

frontend/src/lib/components/ActivityLog/ActivityLog.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {
     featureFlagsActivityResponseJson,
     insightsActivityResponseJson,

frontend/src/lib/components/ActivityLog/ActivityLog.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { ProfilePicture } from 'lib/components/ProfilePicture'
 import { TZLabel } from 'lib/components/TimezoneAware'
 import { useValues } from 'kea'

frontend/src/lib/components/ActivityLog/SentenceList.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
 import { SentenceList, SentenceListProps } from './SentenceList'
 

frontend/src/lib/components/ActivityLog/SentenceList.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import './SentenceList.scss'
 
 export interface SentenceListProps {

frontend/src/lib/components/ActivityLog/activityLogLogic.feature-flag.test.tsx

@@ -1,7 +1,6 @@
 import { ActivityScope } from 'lib/components/ActivityLog/humanizeActivity'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import React from 'react'
 import { MOCK_TEAM_ID } from 'lib/api.mock'
 import { makeTestSetup } from './activityLogLogic.test.setup'
 

frontend/src/lib/components/ActivityLog/activityLogLogic.insight.test.tsx

@@ -1,7 +1,6 @@
 import { ActivityScope } from 'lib/components/ActivityLog/humanizeActivity'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import React from 'react'
 import { MOCK_TEAM_ID } from 'lib/api.mock'
 import { makeTestSetup } from 'lib/components/ActivityLog/activityLogLogic.test.setup'
 

frontend/src/lib/components/ActivityLog/activityLogLogic.person.test.tsx

@@ -1,7 +1,6 @@
 import { ActivityScope } from 'lib/components/ActivityLog/humanizeActivity'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import React from 'react'
 import { makeTestSetup } from 'lib/components/ActivityLog/activityLogLogic.test.setup'
 import { MOCK_TEAM_ID } from 'lib/api.mock'
 

frontend/src/lib/components/ActivityLog/activityLogLogic.plugin.test.tsx

@@ -1,7 +1,6 @@
 import { ActivityScope } from 'lib/components/ActivityLog/humanizeActivity'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import React from 'react'
 import { makeTestSetup } from 'lib/components/ActivityLog/activityLogLogic.test.setup'
 
 describe('the activity log logic', () => {

frontend/src/lib/components/AdHocInsight/AdHocInsight.tsx

@@ -1,5 +1,5 @@
 import { FilterType, InsightLogicProps } from '~/types'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import { BindLogic } from 'kea'
 import { insightLogic } from 'scenes/insights/insightLogic'
 import { useValues } from 'kea'

frontend/src/lib/components/AddToDashboard/AddToDashboard.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { AddToDashboardModal } from './AddToDashboardModal'
 import { InsightModel } from '~/types'
 import { dashboardsModel } from '~/models/dashboardsModel'

frontend/src/lib/components/AddToDashboard/AddToDashboardModal.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Tooltip } from 'lib/components/Tooltip'
 import { useActions, useValues } from 'kea'
 import { addToDashboardModalLogic } from 'lib/components/AddToDashboard/addToDashboardModalLogic'

frontend/src/lib/components/AlertMessage/AlertMessage.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
 import { AlertMessage, AlertMessageProps } from './AlertMessage'
 

frontend/src/lib/components/AlertMessage/AlertMessage.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import './AlertMessage.scss'
 import { IconClose, IconInfo, IconWarning } from '../icons'
 import clsx from 'clsx'

frontend/src/lib/components/AnimatedCollapsible.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 export function AnimatedCollapsible({
     collapsed,

frontend/src/lib/components/Animation/Animation.stories.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { AnimationType } from 'lib/animations/animations'
 import { ComponentStory, Meta } from '@storybook/react'
 import { Animation } from 'lib/components/Animation/Animation'

frontend/src/lib/components/Animation/Animation.tsx

@@ -1,6 +1,6 @@
 import './Animation.scss'
 import { Player } from '@lottiefiles/react-lottie-player'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import clsx from 'clsx'
 import { AnimationType, getAnimationSource, animations } from 'lib/animations/animations'
 import { Spinner } from 'lib/components/Spinner/Spinner'

frontend/src/lib/components/AppEditorLink/AppEditorLink.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { useValues } from 'kea'
 import { teamLogic } from 'scenes/teamLogic'
 import { Modal, Button } from 'antd'

frontend/src/lib/components/AuthorizedUrlList/AuthorizedUrlList.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { LemonTag } from 'lib/components/LemonTag/LemonTag'

frontend/src/lib/components/BillingAlerts.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { ComponentMeta } from '@storybook/react'
 import { BillingType, Realm } from '~/types'
 import preflightJson from '~/mocks/fixtures/_preflight.json'

frontend/src/lib/components/BillingAlerts.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { useValues } from 'kea'
 import { billingLogic, BillingAlertType } from 'scenes/billing/billingLogic'
 import { Link } from 'lib/components/Link'

frontend/src/lib/components/BridgePage/BridgePage.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { WelcomeLogo } from 'scenes/authentication/WelcomeLogo'
 import { CSSTransition } from 'react-transition-group'
 import './BridgePage.scss'

frontend/src/lib/components/Cards/InsightCard/InsightCard.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/react'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { ChartDisplayType, FunnelVizType, InsightColor, InsightModel, InsightShortId, InsightType } from '~/types'
 import { InsightCard as InsightCardComponent } from './index'
 import { DashboardPrivilegeLevel, DashboardRestrictionLevel } from 'lib/constants'

frontend/src/lib/components/Cards/InsightCard/InsightDetails.tsx

@@ -2,7 +2,6 @@ import { useValues } from 'kea'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { allOperatorsMapping, alphabet, convertPropertyGroupToProperties, formatPropertyLabel } from 'lib/utils'
-import React from 'react'
 import { LocalFilter, toLocalFilters } from 'scenes/insights/filters/ActionFilter/entityFilterLogic'
 import { BreakdownFilter } from 'scenes/insights/filters/BreakdownFilter'
 import { humanizePathsEventTypes } from 'scenes/insights/utils'
@@ -19,6 +18,7 @@ import { keyMapping, PropertyKeyInfo } from '../../PropertyKeyInfo'
 import { TZLabel } from '../../TimezoneAware'
 import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
 import { cohortsModel } from '~/models/cohortsModel'
+import React from 'react'
 
 function CompactPropertyFiltersDisplay({
     properties,

frontend/src/lib/components/Cards/InsightCard/handles.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import clsx from 'clsx'
 
 /** A one-dimensional (either horizontal or vertical) resize handle. */

frontend/src/lib/components/Cards/TextCard/TextCard.stories.tsx

@@ -1,5 +1,4 @@
 import { Meta, Story } from '@storybook/react'
-import React from 'react'
 import { DashboardTile, InsightColor } from '~/types'
 import { TextCard } from './TextCard'
 

frontend/src/lib/components/Cards/TextCard/TextCard.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Resizeable } from 'lib/components/Cards/InsightCard/InsightCard'
 import './TextCard.scss'
 import { Textfit } from 'react-textfit'
@@ -13,6 +12,7 @@ import { urls } from 'scenes/urls'
 import ReactMarkdown from 'react-markdown'
 import { UserActivityIndicator } from 'lib/components/UserActivityIndicator/UserActivityIndicator'
 import { dashboardsModel } from '~/models/dashboardsModel'
+import React from 'react'
 
 interface TextCardProps extends React.HTMLAttributes<HTMLDivElement>, Resizeable {
     dashboardId?: string | number

frontend/src/lib/components/Cards/TextCard/TextCardModal.tsx

@@ -5,7 +5,6 @@ import { LemonModal } from 'lib/components/LemonModal'
 import { LemonButton } from 'lib/components/LemonButton'
 import { Field, Form } from 'kea-forms'
 import { LemonTextMarkdown } from 'lib/components/LemonTextArea/LemonTextArea'
-import React from 'react'
 
 export function TextCardModal({
     isOpen,

frontend/src/lib/components/ChartFilter/ChartFilter.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { useActions, useValues } from 'kea'
 import { chartFilterLogic } from './chartFilterLogic'
 import {

frontend/src/lib/components/CloseButton.tsx

@@ -1,5 +1,4 @@
 import { CloseOutlined } from '@ant-design/icons'
-import React from 'react'
 
 export function CloseButton(props: Record<string, any>): JSX.Element {
     return (

frontend/src/lib/components/CommandPalette/CommandInput.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { SearchOutlined, EditOutlined } from '@ant-design/icons'
 import { useValues, useActions } from 'kea'
 import { commandPaletteLogic } from './commandPaletteLogic'

frontend/src/lib/components/CommandPalette/CommandResults.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { CommandResultDisplayable } from './commandPaletteLogic'
 import { useEventListener } from 'lib/hooks/useEventListener'
 import { useActions, useMountedLogic, useValues } from 'kea'