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'

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { Modal } from 'antd'
 import api from 'lib/api'
 import { dayjs } from 'lib/dayjs'

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

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

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

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

frontend/src/lib/components/CompactList/CompactList.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import './CompactList.scss'
 import { LemonDivider } from '../LemonDivider'
 import { LemonButton } from '../LemonButton'

frontend/src/lib/components/CompareFilter/CompareFilter.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { useValues, useActions } from 'kea'
 import { compareFilterLogic } from './compareFilterLogic'
 import { insightLogic } from 'scenes/insights/insightLogic'

frontend/src/lib/components/CopyToClipboard.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLProps } from 'react'
+import { HTMLProps } from 'react'
 import { copyToClipboard } from 'lib/utils'
 import { Tooltip } from 'lib/components/Tooltip'
 import { IconCopy } from './icons'

frontend/src/lib/components/DateDisplay/index.tsx

@@ -1,5 +1,4 @@
 import { dayjs } from 'lib/dayjs'
-import React from 'react'
 import { IntervalType } from '~/types'
 import './DateDisplay.scss'
 

frontend/src/lib/components/DateFilter/DateFilter.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import { useRef } from 'react'
 import { dateMapping, dateFilterToText, uuid } from 'lib/utils'
 import { DateMappingOption } from '~/types'
 import { dayjs } from 'lib/dayjs'

frontend/src/lib/components/DateFilter/RollingDateRangeFilter.tsx

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

frontend/src/lib/components/DebugNotice.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { IconClose } from './icons'
 import { LemonButton } from './LemonButton'
 

frontend/src/lib/components/DefinitionPopup/ActionPopupInfo.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { ActionType } from '~/types'
 import { DefinitionPopup } from 'lib/components/DefinitionPopup/DefinitionPopup'
 import {

frontend/src/lib/components/DefinitionPopup/CohortPopupInfo.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { AnyCohortCriteriaType, CohortType, FilterLogicalOperator } from '~/types'
 import { DefinitionPopup } from 'lib/components/DefinitionPopup/DefinitionPopup'
 import {

frontend/src/lib/components/DefinitionPopup/DefinitionPopup.tsx

@@ -1,5 +1,4 @@
 import './DefinitionPopup.scss'
-import React from 'react'
 import clsx from 'clsx'
 import { definitionPopupLogic, DefinitionPopupState } from 'lib/components/DefinitionPopup/definitionPopupLogic'
 import { useActions, useValues } from 'kea'

frontend/src/lib/components/DefinitionPopup/DefinitionPopupContents.tsx

@@ -6,7 +6,7 @@ import {
 } from 'lib/components/TaxonomicFilter/types'
 import { useActions, useValues } from 'kea'
 import { definitionPopupLogic, DefinitionPopupState } from 'lib/components/DefinitionPopup/definitionPopupLogic'
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import { isPostHogProp, keyMapping, PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
 import { DefinitionPopup } from 'lib/components/DefinitionPopup/DefinitionPopup'
 import { InfoCircleOutlined, LockOutlined } from '@ant-design/icons'

frontend/src/lib/components/Drawer.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react'
+import { PropsWithChildren } from 'react'
 import { Drawer as AntDrawer } from 'antd'
 import { DrawerProps } from 'antd/lib/drawer'
 import { styles } from '~/styles/vars'

frontend/src/lib/components/DropdownSelector/DropdownSelector.tsx

@@ -1,7 +1,6 @@
 /* Custom dropdown selector with an icon a help caption  */
 import { Dropdown, Menu } from 'antd'
 import clsx from 'clsx'
-import React from 'react'
 import { IconArrowDropDown } from '../icons'
 import './DropdownSelector.scss'
 

frontend/src/lib/components/DurationPicker/DurationPicker.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Duration, SmallTimeUnit } from '~/types'
 import { LemonSelect, LemonInput } from '@posthog/lemon-ui'
 

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

@@ -1,8 +1,8 @@
-import React from 'react'
 import { ComponentMeta } from '@storybook/react'
 
 import { EditableField as EditableFieldComponent } from './EditableField'
 import { PageHeader } from '../PageHeader'
+import { useState } from 'react'
 
 export default {
     title: 'Components/Editable Field',
@@ -10,8 +10,8 @@ export default {
 } as ComponentMeta<typeof EditableFieldComponent>
 
 export function EditableField_(): JSX.Element {
-    const [savedTitle, setSavedTitle] = React.useState('Foo')
+    const [savedTitle, setSavedTitle] = useState('Foo')
-    const [savedDescription, setSavedDescription] = React.useState('Lorem ipsum dolor sit amet.')
+    const [savedDescription, setSavedDescription] = useState('Lorem ipsum dolor sit amet.')
 
     return (
         <PageHeader

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

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

frontend/src/lib/components/EmptyMessage/EmptyMessage.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import './EmptyMessage.scss'
 import { LemonButton } from '../LemonButton'
 

frontend/src/lib/components/EntityFilterInfo.tsx

@@ -1,6 +1,5 @@
 import { ActionFilter, EntityFilter, EntityTypes } from '~/types'
 import { Typography } from 'antd'
-import React from 'react'
 import { TextProps } from 'antd/lib/typography/Text'
 import { getKeyMapping } from 'lib/components/PropertyKeyInfo'
 import { getDisplayNameFromEntityFilter } from 'scenes/insights/utils'

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

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react'
-import React from 'react'
+import { useState } from 'react'
 import { mswDecorator } from '~/mocks/browser'
 import { EventSelect } from './EventSelect'
 
@@ -45,7 +45,7 @@ export default {
 } as Meta
 
 export function EventSelect_(): JSX.Element {
-    const [selectedEvents, setSelectedEvents] = React.useState<string[]>([])
+    const [selectedEvents, setSelectedEvents] = useState<string[]>([])
 
     return (
         <EventSelect

frontend/src/lib/components/EventSelect/EventSelect.tsx

@@ -1,9 +1,8 @@
-import React from 'react'
-
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { TaxonomicFilter } from 'lib/components/TaxonomicFilter/TaxonomicFilter'
 import { Popup } from 'lib/components/Popup/Popup'
 import { LemonSnack } from '../LemonSnack/LemonSnack'
+import React, { useState } from 'react'
 
 interface EventSelectProps {
     onChange: (names: string[]) => void
@@ -12,7 +11,7 @@ interface EventSelectProps {
 }
 
 export const EventSelect = ({ onChange, selectedEvents, addElement }: EventSelectProps): JSX.Element => {
-    const [open, setOpen] = React.useState<boolean>(false)
+    const [open, setOpen] = useState<boolean>(false)
 
     const handleChange = (name: string): void => {
         onChange(Array.from(new Set(selectedEvents.concat([name]))))

frontend/src/lib/components/ExpandIcon.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import clsx from 'clsx'
 
 // Imitates how Antd renders the expand icon

frontend/src/lib/components/ExportButton/ExportButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { ExporterFormat } from '~/types'
 import { LemonButton, LemonButtonProps, LemonButtonWithPopup } from '../LemonButton'
 import { LemonDivider } from '../LemonDivider'

frontend/src/lib/components/ExportButton/exporter.tsx

@@ -4,7 +4,6 @@ import posthog from 'posthog-js'
 import { ExportedAssetType, ExporterFormat } from '~/types'
 import { lemonToast } from '../lemonToast'
 import { useEffect, useState } from 'react'
-import React from 'react'
 import { AnimationType } from 'lib/animations/animations'
 import { Animation } from 'lib/components/Animation/Animation'
 import { Spinner } from 'lib/components/Spinner/Spinner'

frontend/src/lib/components/Fade/Fade.tsx

@@ -1,5 +1,5 @@
 import './Fade.scss'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 export function Fade({
     visible,

frontend/src/lib/components/FilterPropertyLink.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { combineUrl } from 'kea-router'
 
 import { Property } from 'lib/components/Property'

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

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

frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import hhFall from 'public/hedgehog/sprites/fall.png'
 import hhJump from 'public/hedgehog/sprites/jump.png'

frontend/src/lib/components/HelpButton/HelpButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import './HelpButton.scss'
 import { kea, useActions, useValues } from 'kea'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'

frontend/src/lib/components/InlineMessage/InlineMessage.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import './InlineMessage.scss'
 import { ExclamationCircleFilled, CloseOutlined } from '@ant-design/icons'
 import clsx from 'clsx'

frontend/src/lib/components/InsightLabel/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Col, Row, Space, Tag, Typography } from 'antd'
 import { ActionFilter, BreakdownKeyType } from '~/types'
 import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'

frontend/src/lib/components/InsightLegend/InsightLegend.tsx

@@ -1,5 +1,4 @@
 import './InsightLegend.scss'
-import React from 'react'
 import { Button } from 'antd'
 import { useActions, useValues } from 'kea'
 import { IconLegend } from 'lib/components/icons'

frontend/src/lib/components/IntervalFilter/IntervalFilter.tsx

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

frontend/src/lib/components/JSBookmarklet.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { TeamBasicType } from '~/types'
 import { useActions } from 'kea'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'

frontend/src/lib/components/JSSnippet.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { CodeSnippet, Language } from 'scenes/ingestion/frameworks/CodeSnippet'
 import { useValues } from 'kea'
 import { teamLogic } from 'scenes/teamLogic'

frontend/src/lib/components/LemonActionableTooltip/LemonActionableTooltip.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Placement } from '@floating-ui/react-dom-interactions'
 import { Popup } from 'lib/components/Popup/Popup'
 import { IconOpenInNew } from 'lib/components/icons'

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
 import { LemonBadge, LemonBadgeProps } from './LemonBadge'
 import { LemonButton } from '../LemonButton'

frontend/src/lib/components/LemonBadge/LemonBadge.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx'
-import React from 'react'
 import { CSSTransition } from 'react-transition-group'
 import './LemonBadge.scss'
 

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

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

frontend/src/lib/components/LemonButton/More.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { LemonButtonWithPopup } from '.'
 import { IconEllipsis } from '../icons'
 import { PopupProps } from '../Popup/Popup'

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

@@ -1,4 +1,3 @@
-import React from 'react'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
 import { LemonCalendar, LemonCalendarProps } from './LemonCalendar'
 import { dayjs } from 'lib/dayjs'