revert(jsx): ⏪ revert jsx with type syntax

adaptui · Aug 5, 2021 · 5642397 · 5642397
1 parent 4c79755
commit 5642397
Show file tree

Hide file tree

Showing 127 changed files with 111 additions and 198 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -2,6 +2,8 @@
   "extends": ["react-app", "react-app/jest", "plugin:prettier/recommended"],
   "rules": {
     "no-console": "off",
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
     "testing-library/prefer-explicit-assert": ["error"],
     "testing-library/consistent-data-testid": [
       2,

diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx
@@ -1,5 +1,4 @@
 import "focus-visible";
-import * as React from "react";
 
 import "./tailwind.css";
 import theme from "../renderlesskit.config.ts";

diff --git a/babel.config.js b/babel.config.js
@@ -16,7 +16,12 @@ module.exports = function (api) {
         },
       },
     ],
-    "@babel/preset-react",
+    [
+      "@babel/preset-react",
+      {
+        runtime: "automatic",
+      },
+    ],
     "@babel/preset-typescript",
   ];
 

diff --git a/src/alert/AlertActionButton.tsx b/src/alert/AlertActionButton.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { cx } from "@renderlesskit/react";
 
 import { useTheme } from "../index";

diff --git a/src/alert/AlertActions.tsx b/src/alert/AlertActions.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { cx } from "@renderlesskit/react";
 
 import { useTheme } from "../index";

diff --git a/src/alert/AlertBody.tsx b/src/alert/AlertBody.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { cx } from "@renderlesskit/react";
 
 import { useTheme } from "../index";

diff --git a/src/alert/AlertCloseButton.tsx b/src/alert/AlertCloseButton.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { cx } from "@renderlesskit/react";
 
 import { useTheme } from "../index";

diff --git a/src/alert/AlertDescription.tsx b/src/alert/AlertDescription.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { cx } from "@renderlesskit/react";
 
 import { useTheme } from "../index";

diff --git a/src/alert/AlertIcon.tsx b/src/alert/AlertIcon.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { cx } from "@renderlesskit/react";
 
 import {

diff --git a/src/alert/AlertTitle.tsx b/src/alert/AlertTitle.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { cx } from "@renderlesskit/react";
 
 import { useTheme } from "../index";

diff --git a/src/alert/stories/Alert.stories.tsx b/src/alert/stories/Alert.stories.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta } from "@storybook/react";
 
 import {

diff --git a/src/avatar/AvatarGroup.tsx b/src/avatar/AvatarGroup.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import { useMemo } from "react";
 import { cx } from "@renderlesskit/react";
 
 import { useTheme } from "../theme";
@@ -39,7 +39,7 @@ export const AvatarGroup = forwardRefWithAs<
     ...rest
   } = props;
   const theme = useTheme();
-  const context = React.useMemo(
+  const context = useMemo(
     () => ({ size, showBorder, borderColor }),
     [size, showBorder, borderColor],
   );

diff --git a/src/avatar/AvatarIcon.tsx b/src/avatar/AvatarIcon.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import { isValidElement, cloneElement } from "react";
 import { Box, BoxProps } from "reakit";
 import { cx } from "@renderlesskit/react";
 
@@ -16,8 +16,8 @@ export const AvatarIcon = forwardRefWithAs<
   const { className, children, ...rest } = props;
   const theme = useTheme();
   const { size = "md" } = useAvatarContext();
-  const _children = React.isValidElement(children)
-    ? React.cloneElement(children, {
+  const _children = isValidElement(children)
+    ? cloneElement(children, {
         role: "img",
         focusable: false,
         "aria-hidden": true,

diff --git a/src/avatar/AvatarImage.tsx b/src/avatar/AvatarImage.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { cx } from "@renderlesskit/react";
 
 import { useTheme } from "../theme";

diff --git a/src/avatar/AvatarName.tsx b/src/avatar/AvatarName.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import { cx } from "@renderlesskit/react";
 
 import { useTheme } from "../theme";

diff --git a/src/avatar/__tests__/Avatar.test.tsx b/src/avatar/__tests__/Avatar.test.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import { screen } from "@testing-library/react";
 
 import { Avatar } from "../index";

diff --git a/src/avatar/__tests__/AvatarGroup.test.tsx b/src/avatar/__tests__/AvatarGroup.test.tsx
@@ -1,5 +1,3 @@
-import * as React from "react";
-
 import { Avatar } from "../Avatar";
 import { AvatarGroup } from "../AvatarGroup";
 import { screen } from "@testing-library/react";

diff --git a/src/avatar/stories/Avatar.stories.tsx b/src/avatar/stories/Avatar.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { useState } from "react";
 import { Meta } from "@storybook/react";
 
 import {
@@ -72,7 +72,7 @@ export const TypingBadge = base({
 
 export const BadgeExample = storyTemplate<AvatarProps>(
   args => {
-    const [isTyping, setTyping] = React.useState(false);
+    const [isTyping, setTyping] = useState(false);
 
     return (
       <>

diff --git a/src/badge/Badge.tsx b/src/badge/Badge.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { cx } from "@renderlesskit/react";
 
 import { useTheme } from "../theme";

diff --git a/src/badge/__tests__/Badge.test.tsx b/src/badge/__tests__/Badge.test.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Badge } from "../Badge";
 
 import { render } from "../../utils/testUtils";

diff --git a/src/box/Box.tsx b/src/box/Box.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import { Role, RoleProps } from "reakit";
 
 import { forwardRefWithAs } from "../utils/types";

diff --git a/src/box/stories/Box.stories.tsx b/src/box/stories/Box.stories.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Story, Meta } from "@storybook/react";
 
 import { Box, BoxProps } from "../index";

diff --git a/src/button/__tests__/Button.test.tsx b/src/button/__tests__/Button.test.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import { Button } from "../Button";
 
 import { screen } from "@testing-library/react";

diff --git a/src/button/stories/Button.stories.tsx b/src/button/stories/Button.stories.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import { useState, useEffect } from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 // @ts-ignore
 import { withPseudoState } from "storybook-addon-pseudo-states/dist/withPseudoState";
@@ -250,9 +250,9 @@ export const CustomSpinner: ComponentStory<typeof Button> = {
 };
 
 export const LoadingAlly = () => {
-  const [state, setState] = React.useState(false);
+  const [state, setState] = useState(false);
 
-  React.useEffect(() => {
+  useEffect(() => {
     let timeout: number;
     if (state) {
       timeout = window.setTimeout(() => setState(prev => !prev), 3000);

diff --git a/src/calendar/Icons.tsx b/src/calendar/Icons.tsx
@@ -1,5 +1,3 @@
-import * as React from "react";
-
 export const CalendarIcon = () => (
   <svg
     style={{ width: 16 }}

diff --git a/src/calendar/stories/Calendar.stories.tsx b/src/calendar/stories/Calendar.stories.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Story, Meta } from "@storybook/react";
 
 import {

diff --git a/src/checkbox/CheckboxDescription.tsx b/src/checkbox/CheckboxDescription.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import { cx } from "@renderlesskit/react";
 
 import { useTheme } from "../theme";

diff --git a/src/checkbox/CheckboxIcon.tsx b/src/checkbox/CheckboxIcon.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import { cx } from "@renderlesskit/react";
 
 import { useTheme } from "../theme";

diff --git a/src/checkbox/CheckboxInput.tsx b/src/checkbox/CheckboxInput.tsx
@@ -2,7 +2,6 @@ import {
   Checkbox as ReakitCheckbox,
   CheckboxProps as ReakitCheckboxProps,
 } from "reakit";
-import * as React from "react";
 import { cx } from "@renderlesskit/react";
 
 import { useTheme } from "../theme";

diff --git a/src/checkbox/CheckboxLabel.tsx b/src/checkbox/CheckboxLabel.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import { cx } from "@renderlesskit/react";
 
 import { useTheme } from "../theme";

diff --git a/src/checkbox/CheckboxText.tsx b/src/checkbox/CheckboxText.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import { cx } from "@renderlesskit/react";
 
 import { useTheme } from "../theme";

diff --git a/src/checkbox/__tests__/Checkbox.test.tsx b/src/checkbox/__tests__/Checkbox.test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import { useState } from "react";
 import { press } from "reakit-test-utils";
 
 import {
@@ -15,7 +15,7 @@ import { cleanup, fireEvent, render, screen } from "../../utils/testUtils";
 afterEach(cleanup);
 
 const CheckboxCustom = (props: CheckboxProps) => {
-  const [state, onStateChange] = React.useState<CheckboxStatus>(true);
+  const [state, onStateChange] = useState<CheckboxStatus>(true);
 
   return (
     <Checkbox state={state} onStateChange={onStateChange} {...props}>
@@ -137,7 +137,7 @@ describe("<Checkbox />", () => {
 
   it("should support controlled state", () => {
     const Controlled = () => {
-      const [state, setState] = React.useState(false);
+      const [state, setState] = useState(false);
 
       return (
         <Checkbox state={state} onStateChange={() => setState(!state)}>
@@ -154,7 +154,7 @@ describe("<Checkbox />", () => {
 
   it("should support custom checkbox", () => {
     const Custom = () => {
-      const [state, setState] = React.useState(false);
+      const [state, setState] = useState(false);
 
       return (
         <CheckboxCustom state={state} onStateChange={() => setState(!state)}>
@@ -171,7 +171,7 @@ describe("<Checkbox />", () => {
 
   it("should support group checkboxes", () => {
     const Group = () => {
-      const [state, onStateChange] = React.useState<CheckboxStatus>([]);
+      const [state, onStateChange] = useState<CheckboxStatus>([]);
 
       return (
         <>

diff --git a/src/checkbox/stories/Checkbox.stories.tsx b/src/checkbox/stories/Checkbox.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { useState, useMemo, useEffect } from "react";
 import { cx } from "@renderlesskit/react";
 import { Meta } from "@storybook/react";
 
@@ -162,7 +162,7 @@ export const Invalid = storyTemplate<CheckboxProps>(args => {
 })({ size: "md" });
 
 export const Controlled = storyTemplate<CheckboxProps>(args => {
-  const [state, onStateChange] = React.useState<CheckboxStatus>(false);
+  const [state, onStateChange] = useState<CheckboxStatus>(false);
 
   return (
     <>
@@ -175,7 +175,7 @@ export const Controlled = storyTemplate<CheckboxProps>(args => {
 })({ size: "md" });
 
 export const Group = storyTemplate<CheckboxProps>(args => {
-  const [state, onStateChange] = React.useState<CheckboxStatus>([]);
+  const [state, onStateChange] = useState<CheckboxStatus>([]);
 
   return (
     <>
@@ -211,7 +211,7 @@ export const Group = storyTemplate<CheckboxProps>(args => {
 })({ size: "md" });
 
 export const GroupIndeterminateSimple = storyTemplate<CheckboxProps>(args => {
-  const [checkedItems, setCheckedItems] = React.useState<CheckboxStatus[]>([
+  const [checkedItems, setCheckedItems] = useState<CheckboxStatus[]>([
     false,
     false,
   ]);
@@ -248,12 +248,12 @@ export const GroupIndeterminateSimple = storyTemplate<CheckboxProps>(args => {
 })({ size: "md" });
 
 export const GroupIndeterminateComplex = storyTemplate<CheckboxProps>(args => {
-  const values = React.useMemo(() => ["Apple", "Orange", "Watermelon"], []);
-  const [itemState, setItemState] = React.useState<CheckboxStatus>([]);
-  const [groupState, setGroupState] = React.useState<CheckboxStatus>(false);
+  const values = useMemo(() => ["Apple", "Orange", "Watermelon"], []);
+  const [itemState, setItemState] = useState<CheckboxStatus>([]);
+  const [groupState, setGroupState] = useState<CheckboxStatus>(false);
 
   // updates items when group is toggled
-  React.useEffect(() => {
+  useEffect(() => {
     if (groupState === true) {
       setItemState(values);
     } else if (groupState === false) {
@@ -262,7 +262,7 @@ export const GroupIndeterminateComplex = storyTemplate<CheckboxProps>(args => {
   }, [groupState, values]);
 
   // updates group when items is toggled
-  React.useEffect(() => {
+  useEffect(() => {
     if (!Array.isArray(itemState)) return;
 
     if (itemState.length === values.length) {
@@ -299,7 +299,7 @@ export const GroupIndeterminateComplex = storyTemplate<CheckboxProps>(args => {
 })({ size: "md" });
 
 const CheckboxCustom = (props: CheckboxProps) => {
-  const [state, onStateChange] = React.useState<CheckboxStatus>(true);
+  const [state, onStateChange] = useState<CheckboxStatus>(true);
 
   return (
     <Checkbox state={state} onStateChange={onStateChange} {...props}>
@@ -353,7 +353,7 @@ const CheckboxCustomComplete = (props: CheckboxProps) => {
 };
 
 export const CompleteCustomCheckbox = storyTemplate<CheckboxProps>(args => {
-  const [state, onStateChange] = React.useState<CheckboxStatus>([]);
+  const [state, onStateChange] = useState<CheckboxStatus>([]);
 
   return (
     <>

diff --git a/src/circular-progress/CircularProgress.tsx b/src/circular-progress/CircularProgress.tsx
@@ -3,7 +3,7 @@ import {
   ProgressInitialState,
   ProgressStateReturn,
 } from "@renderlesskit/react";
-import * as React from "react";
+import { useMemo } from "react";
 
 import { BoxProps } from "../box";
 import { createContext, runIfFn } from "../utils";
@@ -42,7 +42,7 @@ export const CircularProgress = forwardRefWithAs<
 >((props, ref) => {
   const { value, min, max, size = "md", children, ...rest } = props;
   const state = useProgressState({ value, min, max });
-  const context = React.useMemo(() => ({ state, size }), [state, size]);
+  const context = useMemo(() => ({ state, size }), [state, size]);
 
   return (
     <CircularProgressProvider value={context}>

diff --git a/src/circular-progress/CircularProgressBar.tsx b/src/circular-progress/CircularProgressBar.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import { cx } from "@renderlesskit/react";
 
 import { useTheme } from "../theme";

diff --git a/src/circular-progress/CircularProgressWrapper.tsx b/src/circular-progress/CircularProgressWrapper.tsx
@@ -3,7 +3,6 @@ import {
   ProgressProps,
   Progress as RenderlesskitProgress,
 } from "@renderlesskit/react";
-import * as React from "react";
 
 import { useTheme } from "../theme";
 import { forwardRefWithAs } from "../utils/types";

diff --git a/src/circular-progress/stories/CircularProgress.stories.tsx b/src/circular-progress/stories/CircularProgress.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { isNull } from "@renderlesskit/react";
 import { Meta } from "@storybook/react";
 

diff --git a/src/datepicker/stories/DatePicker.stories.tsx b/src/datepicker/stories/DatePicker.stories.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Story, Meta } from "@storybook/react";
 
 import {

diff --git a/src/form-field/FormErrorText.tsx b/src/form-field/FormErrorText.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { cx } from "@renderlesskit/react";
 
 import { useTheme } from "../theme";

diff --git a/src/form-field/FormField.tsx b/src/form-field/FormField.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { cx } from "@renderlesskit/react";
 
 import { useTheme } from "../theme";

diff --git a/src/form-field/FormHelperText.tsx b/src/form-field/FormHelperText.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { cx } from "@renderlesskit/react";
 
 import { useTheme } from "../theme";