[core] Init new jsx transform

.eslintrc.cjs

@@ -9,6 +9,7 @@ module.exports = {
     'import/no-relative-packages': 'off',
     'no-spaced-func': 'off',
     'consistent-return': 'off',
+    'react/react-in-jsx-scope': 'off',
   },
   parserOptions: {
     project: './tsconfig.eslint.json',

.storybook/preview.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { addons } from '@storybook/preview-api';
 import { IconTextDirectionLtr, IconTextDirectionRtl } from '@tabler/icons-react';
 import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';

apps/help.mantine.dev/src/components/MdxElements/MdxElements.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import cx from 'clsx';
 import type { MDXComponents } from 'mdx/types';
 import { Anchor, Code, Image, Title } from '@mantine/core';

apps/help.mantine.dev/src/components/MdxElements/MdxErrorMessage/MdxErrorMessage.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Text } from '@mantine/core';
 import classes from './MdxErrorMessage.module.css';
 

apps/help.mantine.dev/src/components/MdxElements/MdxInfo/MdxInfo.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { IconInfoCircle } from '@tabler/icons-react';
 import cx from 'clsx';
 import { Blockquote, BlockquoteProps, rgba, useMantineTheme } from '@mantine/core';

apps/help.mantine.dev/src/components/MdxElements/MdxInstallScript/MdxInstallScript.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { MdxNpmScript } from '../MdxNpmScript/MdxNpmScript';
 
 interface MdxInstallScriptProps {

apps/help.mantine.dev/src/components/MdxElements/MdxNpmScript/MdxNpmScript.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useLocalStorage } from '@mantine/hooks';
 import { NpmIcon, YarnIcon } from '@mantinex/dev-icons';
 import { CodeHighlightTabs } from '@mantinex/shiki';

apps/help.mantine.dev/src/components/MdxLayout/MdxLayout.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
 import { IconArrowLeft, IconBug, IconPencil } from '@tabler/icons-react';

apps/help.mantine.dev/src/components/MdxLayout/PageHeaderLink/PageHeaderLink.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import classes from './PageHeaderLink.module.css';
 
 interface PageHeaderLinkProps {

apps/help.mantine.dev/src/components/QuestionsList/NothingFound/NothingFound.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { SimpleGrid, Text, Title } from '@mantine/core';
 import { SocialCard } from '@/components/SocialCard';
 import classes from './NothingFound.module.css';

apps/help.mantine.dev/src/components/QuestionsList/QuestionsListGroup/QuestionsListGroup.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Link from 'next/link';
 import { Divider, Highlight } from '@mantine/core';
 import { Frontmatter } from '@/types';

apps/help.mantine.dev/src/components/Shell/Shell.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Link from 'next/link';
 import cx from 'clsx';
 import {

apps/help.mantine.dev/src/components/SocialCard/SocialCard.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { IconArrowUpRight } from '@tabler/icons-react';
 import { DiscordIcon, GithubIcon } from '@mantinex/dev-icons';
 import { meta } from '@mantinex/mantine-meta';

apps/help.mantine.dev/src/demos/AlignInputButton.demo.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button, Group, TextInput } from '@mantine/core';
 import { MantineDemo } from '@mantinex/demo';
 import classes from './AlignInputButton.demo.module.css';

apps/help.mantine.dev/src/demos/AutocompleteCity.demo.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Autocomplete } from '@mantine/core';
 import { MantineDemo } from '@mantinex/demo';
 

apps/help.mantine.dev/src/demos/ColorSchemeColor.demo.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button, Group } from '@mantine/core';
 import { MantineDemo } from '@mantinex/demo';
 

apps/help.mantine.dev/src/demos/DropzoneForm.demo.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Center, CloseButton, Text } from '@mantine/core';
 import { Dropzone, MIME_TYPES } from '@mantine/dropzone';
 import { useForm } from '@mantine/form';

apps/help.mantine.dev/src/demos/FieldsetInputs.demo.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button, Fieldset, TextInput } from '@mantine/core';
 import { MantineDemo } from '@mantinex/demo';
 

apps/help.mantine.dev/src/demos/FloatingActionButton.demo.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { IconPhone } from '@tabler/icons-react';
 import { ActionIcon, Affix, Text } from '@mantine/core';
 import { MantineDemo } from '@mantinex/demo';

apps/help.mantine.dev/src/demos/HideShowColorScheme.demo.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button } from '@mantine/core';
 import { MantineDemo } from '@mantinex/demo';
 

apps/help.mantine.dev/src/demos/InputFocusStyles.demo.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { TextInput } from '@mantine/core';
 import { MantineDemo } from '@mantinex/demo';
 import classes from './InputFocusStyles.demo.module.css';

apps/help.mantine.dev/src/demos/InputMask.demo.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { IMaskInput } from 'react-imask';
 import { InputBase } from '@mantine/core';
 import { MantineDemo } from '@mantinex/demo';

apps/help.mantine.dev/src/demos/InputPlaceholderColor.demo.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { TextInput } from '@mantine/core';
 import { DatePickerInput } from '@mantine/dates';
 import { MantineDemo } from '@mantinex/demo';

apps/help.mantine.dev/src/demos/InputThemeFocusStyles.demo.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { createTheme, Input, MantineThemeProvider, NativeSelect, TextInput } from '@mantine/core';
 import { MantineDemo } from '@mantinex/demo';
 import classes from './InputThemeFocusStyles.demo.module.css';

apps/help.mantine.dev/src/demos/SelectCountry.demo.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Select } from '@mantine/core';
 import { MantineDemo } from '@mantinex/demo';
 

apps/help.mantine.dev/src/demos/TabsBorderColor.demo.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Tabs } from '@mantine/core';
 import { MantineDemo } from '@mantinex/demo';
 import classes from './TabsBorderColor.demo.module.css';

apps/help.mantine.dev/src/pages/_app.tsx

@@ -7,7 +7,6 @@ import '@mantinex/mantine-logo/styles.css';
 import '@mantinex/mantine-header/styles.css';
 import '../fonts/GreycliffCF/styles.css';
 
-import React from 'react';
 import Head from 'next/head';
 import { MantineProvider } from '@mantine/core';
 import { ShikiProvider } from '@mantinex/shiki';

apps/help.mantine.dev/src/pages/_document.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Head, Html, Main, NextScript } from 'next/document';
 import { ColorSchemeScript } from '@mantine/core';
 

apps/help.mantine.dev/src/pages/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { QuestionsList } from '@/components/QuestionsList';
 import { MDX_DATA } from '@/mdx';
 

apps/help.mantine.dev/tsconfig.json

@@ -13,7 +13,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "paths": {
       "@/*": ["./src/*"],

apps/mantine.dev/src/app-shell-examples/AppShellPage/ExamplesDrawer/ExamplesDrawer.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { IconArrowLeft, IconCode, IconLayoutBoard, IconMenu2 } from '@tabler/icons-react';

apps/mantine.dev/src/app-shell-examples/examples/AltLayout/AltLayout.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { AppShell, Burger, Group, Skeleton, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { MantineLogo } from '@mantinex/mantine-logo';

apps/mantine.dev/src/app-shell-examples/examples/BasicAppShell/BasicAppShell.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { AppShell, Burger, Group, Skeleton } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { MantineLogo } from '@mantinex/mantine-logo';

apps/mantine.dev/src/app-shell-examples/examples/CollapseDesktop/CollapseDesktop.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { AppShell, Burger, Group, Skeleton } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { MantineLogo } from '@mantinex/mantine-logo';

apps/mantine.dev/src/app-shell-examples/examples/Disabled/Disabled.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { AppShell, Burger, Button, Group, Skeleton } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { MantineLogo } from '@mantinex/mantine-logo';

apps/mantine.dev/src/app-shell-examples/examples/FullLayout/FullLayout.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { AppShell, Burger, Group, Skeleton } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { MantineLogo } from '@mantinex/mantine-logo';

apps/mantine.dev/src/app-shell-examples/examples/Headroom/Headroom.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { AppShell, Group, rem, Text } from '@mantine/core';
 import { useHeadroom } from '@mantine/hooks';
 import { MantineLogo } from '@mantinex/mantine-logo';

apps/mantine.dev/src/app-shell-examples/examples/MobileNavbar/MobileNavbar.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { AppShell, Burger, Group, UnstyledButton } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { MantineLogo } from '@mantinex/mantine-logo';

apps/mantine.dev/src/app-shell-examples/examples/NavbarSection/NavbarSection.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { AppShell, Burger, Group, ScrollArea, Skeleton } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { MantineLogo } from '@mantinex/mantine-logo';

apps/mantine.dev/src/app-shell-examples/examples/NoTransitions/NoTransitions.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { AppShell, Burger, Group, Skeleton } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { MantineLogo } from '@mantinex/mantine-logo';

apps/mantine.dev/src/app-shell-examples/examples/ResponsiveSizes/ResponsiveSizes.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { AppShell, Burger, Group, Skeleton } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { MantineLogo } from '@mantinex/mantine-logo';

apps/mantine.dev/src/combobox-examples/ComboboxDemo/ComboboxDemo.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useRouter } from 'next/router';
 import cx from 'clsx';
 import { Badge, RemoveScroll, Text } from '@mantine/core';

apps/mantine.dev/src/combobox-examples/ComboboxPage/ComboboxPage.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { PageHead } from '@/components/PageHead';
 import { ComboboxDemo } from '../ComboboxDemo/ComboboxDemo';
 import { ComboboxShell } from '../ComboboxShell/ComboboxShell';

apps/mantine.dev/src/combobox-examples/examples/MultiSelectValueRenderer/CountryPill.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { CloseButton } from '@mantine/core';
 import { countriesData, flags } from './countries-data';
 import classes from './CountryPill.module.css';

apps/mantine.dev/src/combobox-examples/examples/MultiSelectValueRenderer/countries-data.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { rem } from '@mantine/core';
 
 const flagProps = {

apps/mantine.dev/src/components/ColorsGenerator/ColorsList/ColorsList.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import chroma from 'chroma-js';
 import { ColorSwatch, Group, isLightColor } from '@mantine/core';
 import classes from './ColorsList.module.css';

apps/mantine.dev/src/components/ColorsGenerator/ColorsOutput/ColorsOutput.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Input } from '@mantine/core';
 import { MdxCodeHighlight } from '@/components/MdxProvider';
 

apps/mantine.dev/src/components/ColorsGenerator/ComponentsPreview/ComponentsPreview.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button, Input, MantineColorsTuple, MantineProvider, Table } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
 

apps/mantine.dev/src/components/ContentPageBase/ContentPageBase.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Head from 'next/head';
 import { PageBase } from '@/components/PageBase';
 import { PageContentContainer } from '../PageContentContainer';

apps/mantine.dev/src/components/CssFilesList/CssFilesList.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { IconCheck, IconCopy } from '@tabler/icons-react';
 import { ActionIcon, Code, CopyButton, Group } from '@mantine/core';
 import CSS_FILES_LIST from '@/.docgen/css-exports.json';

apps/mantine.dev/src/components/CssVariablesGroup/CssVariablesGroup.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Code, Table, Text } from '@mantine/core';
 import classes from './CssVariablesGroup.module.css';
 

apps/mantine.dev/src/components/CssVariablesList/CssVariableColorSwatch/CssVariableColorSwatch.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ColorSwatch } from '@mantine/core';
 
 const colorVariableRegex = /^(var\(--mantine-color[\w-]+\)|#\w+|rgba?\([\w,. ]+\))$/gm;

apps/mantine.dev/src/components/CssVariablesList/CssVariablesList.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Code, DEFAULT_THEME, defaultCssVariablesResolver, keys } from '@mantine/core';
 import { MdxDataTable, MdxTitle } from '../MdxProvider';
 import { CssVariableColorSwatch } from './CssVariableColorSwatch/CssVariableColorSwatch';

apps/mantine.dev/src/components/CssVariablesTable/CssVariablesTable.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Code, DEFAULT_THEME, defaultCssVariablesResolver } from '@mantine/core';
 import { MdxDataTable } from '../MdxProvider';
 

apps/mantine.dev/src/components/DefaultThemeData/DefaultThemeData.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { DEFAULT_THEME } from '@mantine/core';
 import { MdxCodeHighlight } from '../MdxProvider';
 

apps/mantine.dev/src/components/DocsSection/DocsSection.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import cx from 'clsx';
 import classes from './DocsSection.module.css';
 

apps/mantine.dev/src/components/Footer/Footer.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import cx from 'clsx';
 import { Box, Container, Group, RemoveScroll, Text } from '@mantine/core';
 import { Logo } from '../Logo/Logo';

apps/mantine.dev/src/components/Footer/LinksGroup/LinksGroup.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Link from 'next/link';
 import { Text } from '@mantine/core';
 import classes from './LinksGroup.module.css';

apps/mantine.dev/src/components/FrameworksGuides/FrameworkLink/FrameworkLink.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Link from 'next/link';
 import { frameworkIcons } from '@/components/icons';
 import type { FrameworkData } from '../data';

apps/mantine.dev/src/components/FrameworksGuides/FrameworksGuides.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FRAMEWORKS_GUIDES_DATA } from './data';
 import { FrameworkLink } from './FrameworkLink/FrameworkLink';
 import classes from './FrameworksGuides.module.css';

apps/mantine.dev/src/components/GaScript/GaScript.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Script from 'next/script';
 
 const gaScript = `

apps/mantine.dev/src/components/HomePage/Banner/Banner.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button, Container, Overlay, Text, Title } from '@mantine/core';
 import { GithubIcon } from '@mantinex/dev-icons';
 import banner from './banner.webp';

apps/mantine.dev/src/components/HomePage/Components/Components.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   IconBold,
   IconCalendar,

apps/mantine.dev/src/components/HomePage/Components/demos/Content.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Box, Text } from '@mantine/core';
 import { AccordionDemo, TimelineBase } from '@docs/demos';
 

apps/mantine.dev/src/components/HomePage/Components/demos/Dates.tsx

@@ -1,5 +1,4 @@
 import dayjs from 'dayjs';
-import React from 'react';
 import { Input, Paper, SimpleGrid } from '@mantine/core';
 import { DatePicker, DatePickerInput, DateTimePicker, TimeInput } from '@mantine/dates';
 import classes from './Demos.module.css';

apps/mantine.dev/src/components/HomePage/Components/demos/Inputs.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   Autocomplete,
   ColorInput,

apps/mantine.dev/src/components/HomePage/Components/demos/RichText.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { TipTapDemos } from '@docs/demos';
 import classes from './Demos.module.css';
 

apps/mantine.dev/src/components/HomePage/CustomizeStyles/CustomizeSlider.demo.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Slider } from '@mantine/core';
 import classes from './CustomizeSlider.demo.module.css';
 

apps/mantine.dev/src/components/HomePage/CustomizeStyles/CustomizeStyles.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Link from 'next/link';
 import { IconArrowRight } from '@tabler/icons-react';
 import { Button, rem, SimpleGrid, Slider, Text } from '@mantine/core';

apps/mantine.dev/src/components/HomePage/CustomizeWithProps/CustomizeWithProps.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Box } from '@mantine/core';
 import { Demo } from '@mantinex/demo';
 import { TimelineDemos } from '@docs/demos';

apps/mantine.dev/src/components/HomePage/DarkTheme/DarkTheme.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { IconMoonStars, IconSun } from '@tabler/icons-react';
 import { Button, Group, Image, SimpleGrid, Text, useMantineColorScheme } from '@mantine/core';
 import { CodeHighlight } from '@mantinex/shiki';

apps/mantine.dev/src/components/HomePage/HomePage.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Head from 'next/head';
 import { Footer } from '../Footer';
 import { Shell } from '../Shell';

apps/mantine.dev/src/components/HomePage/Hooks/Hooks.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   IconArrowsMaximize,
   IconClock,

apps/mantine.dev/src/components/HomePage/JoinCommunity/JoinCommunity.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Space } from '@mantine/core';
 import { SocialCards } from '../../SocialCards';
 import { PageSection } from '../PageSection/PageSection';

apps/mantine.dev/src/components/HomePage/Jumbotron/Hero.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useMantineTheme } from '@mantine/core';
 import classes from './Jumbotron.module.css';
 

apps/mantine.dev/src/components/HomePage/Jumbotron/Jumbotron.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Link from 'next/link';
 import { Button, Container, Group, rem, SimpleGrid, Text } from '@mantine/core';
 import { GithubIcon } from '@mantinex/dev-icons';

apps/mantine.dev/src/components/HomePage/PageSection/PageSection.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Box, BoxProps, Container, ElementProps, Text } from '@mantine/core';
 import { SectionTitle } from '../SectionTitle/SectionTitle';
 import classes from './PageSection.module.css';