frontend: remove duplicate imports of React

twenty-frontend/src/js/components/App.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
 import { ParamContext } from "/Context";
 

twenty-frontend/src/js/components/Group.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import type { Task } from "/types/schema";
 import classnames from "classnames";
 import { DateTime } from "luxon";

twenty-frontend/src/js/components/Icons.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 type Props = { name: IconName; onClick: (e: React.MouseEvent) => void };
 type IconName = "start-task" | "complete-task" | "destroy-task";
 type IconSet = Record<IconName, (props: Props) => JSX.Element>;

twenty-frontend/src/js/components/NavBar.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import { useContext } from "react";
 import { ParamContext } from "/Context";
 import { Maybe } from "/types/schema";
 import { ProjectSelect } from "/components/ProjectSelect";

twenty-frontend/src/js/components/ProjectSelect.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { useProjects } from "/hooks/queries/useProjects";
 import { Project, Maybe } from "/types/schema";
 import { Select, Option } from "/components/Select";

twenty-frontend/src/js/components/Projects.tsx

@@ -1,5 +1,5 @@
 import { useSetRandomProjectColor } from "/hooks/mutations/useSetRandomProjectColor";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { NavBar } from "/components/NavBar";
 import { useProjects } from "/hooks/queries/useProjects";
 import { Project } from "/types/schema";

twenty-frontend/src/js/components/Select.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useState, useEffect } from "react";
+import { ReactNode, useState, useEffect } from "react";
 
 const LI_CLASSNAME = [
   "flex",

twenty-frontend/src/js/components/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import classnames from "classnames";
 
 export type Tab = {

twenty-frontend/src/js/components/Task.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext } from "react";
+import { useEffect, useState, useContext } from "react";
 import { ParamContext } from "/Context";
 import { useForm } from "react-hook-form";
 import { useCreateTask } from "/hooks/mutations/useCreateTask";

twenty-frontend/src/js/components/TaskStatusSelect.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Task, TaskStatus } from "/types/schema";
 import { useUpdateTask } from "hooks/mutations/useUpdateTask";
 import { GET_TASKS } from "/hooks/queries/useTasks";

twenty-frontend/src/js/components/Tasks.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useContext } from "react";
+import { useEffect, useContext } from "react";
 import { ParamContext } from "/Context";
 import { NavBar } from "/components/NavBar";
 import { Group } from "/components/Group";

twenty-frontend/src/js/components/forms/Select.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 type Props = {
   children: JSX.Element[];
   className?: string;

twenty-frontend/src/js/main/projects.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
 import { App } from "/components/App";
 import { Projects } from "/components/Projects";

twenty-frontend/src/js/main/task/edit.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
 import { App } from "/components/App";
 import { Task } from "/components/Task";

twenty-frontend/src/js/main/task/new.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
 import { App } from "/components/App";
 import { Task } from "/components/Task";

twenty-frontend/src/js/main/tasks.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
 import { App } from "/components/App";
 import { Tasks } from "/components/Tasks";

twenty-frontend/tsconfig.json

@@ -10,7 +10,7 @@
     "jsx": "react",
     "allowJs": true,
     "lib": [ "ES2022", "DOM" ],
-
+    "allowUmdGlobalAccess": true,
     "baseUrl": "src/",
     "paths": { "*": ["js/*"] },
   }

twenty-frontend/webpack.config.js

@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const path = require('path');
 const process = require('process');
 
@@ -17,4 +18,9 @@ module.exports = {
       },
     ],
   },
+  plugins: [
+    new webpack.ProvidePlugin({
+      React: 'react',
+    }),
+  ]
 }