update react JSX runtime to modern react-jsx

configs/biome/README.md

@@ -16,37 +16,3 @@ Create `biome.json` in your project
   "extends": ["@canonical/biome-config"]
 }
 ```
-
-## JSX Runtime
-
-This configuration sets the [JSX Runtime](https://biomejs.dev/reference/configuration/#javascriptjsxruntime) option to `"reactClassic"`. 
-This is done to align with the `@canonical/typescript-config-react` package, which uses `"react"` for the `"jsx"` field. 
-
-If this is not enabled, Biome will try to use type imports to import `React`, even though `.tsx` files need `React` imported.
-
-```tsx
-import React from 'react';
-```
-throws this Biome error:
-```
- All these imports are only used as types.
-  
-  > 1 │ import React from "react";
-      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^
-    2 │ 
-    3 │ import "./button.css";
-  
-  Importing the types with import type ensures that they are removed by the transpilers and avoids loading unnecessary modules.
-```
-with `--write` enabled, this is adjusted to:
-```tsx
-import type React from 'react';
-```
-This will then throw Typescript build errors like this:
-```
-src/ui/Button/Button.tsx(30,6): error TS1361: 'React' cannot be used as a value because it was imported using 'import type'.
-```
-
-To fix this, we use `"jsxRuntime": "reactClassic"` in `biome.json`, and `"jsx": "react"` in `tsconfig.json`.
-
-If you are using `"jsx": "react-jsx"` in `tsconfig.json`, you should instead use `"jsxRuntime": "transparent"`.

configs/biome/biome.json

@@ -26,7 +26,6 @@
   "javascript": {
     "formatter": {
       "quoteStyle": "double"
-    },
-    "jsxRuntime": "reactClassic"
+    }
   }
 }

configs/typescript-react/tsconfig.json

@@ -2,6 +2,6 @@
 	"extends": "@canonical/typescript-config-base",
 	"compilerOptions": {
 		"lib": ["ES2023", "dom"],
-		"jsx": "react"
+		"jsx": "react-jsx"
 	}
 }

packages/ds/src/ui/Button/Button.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
 
 import "./button.css";
 

packages/ds/src/ui/Header/Header.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
 
 import { Button } from "../Button/index.js";
 import "./header.css";