chore(react): seperate react library

apps/next/app/page.tsx

@@ -1,4 +1,4 @@
-import { Iconify } from "@oktaytest/ui";
+import { Iconify } from "@oktaytest/react";
 
 import styles from "../styles/index.module.css";
 

apps/next/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@oktaytest/ui": "*",
+    "@oktaytest/react": "*",
     "next": "^14.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

apps/rollup-react/package.json

@@ -9,7 +9,7 @@
     "dev": "rollup -c --watch"
   },
   "dependencies": {
-    "@oktaytest/ui": "*",
+    "@oktaytest/react": "*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

apps/rollup-react/src/App.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Iconify } from "@oktaytest/ui";
+import { Iconify } from "@oktaytest/react";
 
 const App = () => {
   return (

apps/rspack-react/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@oktaytest/ui": "*"
+    "@oktaytest/react": "*"
   },
   "devDependencies": {
     "@rspack/plugin-react-refresh": "1.0.0",

apps/rspack-react/src/App.jsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { Iconify } from "@oktaytest/ui";
+import { Iconify } from "@oktaytest/react";
+
 import "./App.css";
 
 function App() {

apps/vite-react/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@oktaytest/ui": "*",
+    "@oktaytest/react": "*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

apps/vite-react/src/App.tsx

@@ -1,6 +1,6 @@
 import "./App.css";
 
-import { Iconify } from "@oktaytest/ui";
+import { Iconify } from "@oktaytest/react";
 
 function App() {
   return (

packages/native/src/iconify.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, ReactNode } from "react";
+import React from "react";
 
 import { IconifyProps, RuntimeIcon, RuntimeIconifyProps } from "./types";
 import { setAttributes } from "./utils";
@@ -72,7 +72,9 @@ const getComponent = async (props: RuntimeIconifyProps) => {
 };
 
 export const Iconify = (props: IconifyProps) => {
-  const [Component, setComponent] = useState<ReactNode | null>(null);
+  const [Component, setComponent] = React.useState<React.ReactNode | null>(
+    null
+  );
 
   const renderIcon = async () => {
     const icon = await getIcon(props.name);
@@ -85,7 +87,7 @@ export const Iconify = (props: IconifyProps) => {
     setComponent(component);
   };
 
-  useEffect(() => {
+  React.useEffect(() => {
     renderIcon();
   }, [props]);
 

packages/ui/package.json → packages/react/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@oktaytest/ui",
+  "name": "@oktaytest/react",
   "version": "0.0.119",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -29,7 +29,6 @@
   "devDependencies": {
     "@oktaytest/typescript-config": "*",
     "@types/react": "^18.2.46",
-    "@types/react-native": "^0.73.0",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3"
   },
@@ -38,8 +37,6 @@
     "@oktaytest/core": "*"
   },
   "peerDependencies": {
-    "react": ">=18.2.0",
-    "react-native": ">=0.63.0",
-    "react-native-svg": ">=13.2.0"
+    "react": ">=18.2.0"
   }
 }

packages/ui/src/iconify.tsx → packages/react/src/iconify.tsx

@@ -1,19 +1,8 @@
-import React, { useState, useEffect, ReactNode } from "react";
+import React from "react";
+
 import { IconifyProps, RuntimeIcon, RuntimeIconifyProps } from "./types";
 import { setAttributes } from "./utils";
 
-const isReactNative = async () => {
-  try {
-    if (typeof navigator === "undefined") return true;
-
-    require("react-native");
-
-    return true;
-  } catch (error) {
-    return false;
-  }
-};
-
 const getIcon = (iconName: string) =>
   new Promise<RuntimeIcon>(async (resolve, reject) => {
     try {
@@ -46,19 +35,6 @@ const getIcon = (iconName: string) =>
     }
   });
 
-const nativeIcon = async (props: RuntimeIconifyProps) => {
-  const { SvgXml } = require("react-native-svg");
-
-  return (
-    <SvgXml
-      {...props}
-      xml={props.icon.svg}
-      width={props.icon.width}
-      height={props.icon.height}
-    />
-  );
-};
-
 const webIcon = async (props: RuntimeIconifyProps) => {
   // @ts-ignore
   const parse = await import("html-react-parser");
@@ -69,15 +45,13 @@ const webIcon = async (props: RuntimeIconifyProps) => {
 const getComponent = async (props: RuntimeIconifyProps) => {
   const formatted = setAttributes(props);
 
-  const isNative = await isReactNative();
-
-  if (isNative) return nativeIcon(formatted);
-
   return webIcon(formatted);
 };
 
 export const Iconify = (props: IconifyProps) => {
-  const [Component, setComponent] = useState<ReactNode | null>(null);
+  const [Component, setComponent] = React.useState<React.ReactNode | null>(
+    null
+  );
 
   const renderIcon = async () => {
     const icon = await getIcon(props.name);
@@ -90,7 +64,7 @@ export const Iconify = (props: IconifyProps) => {
     setComponent(component);
   };
 
-  useEffect(() => {
+  React.useEffect(() => {
     renderIcon();
   }, [props]);
 

turbo.json

@@ -8,7 +8,7 @@
       "dependsOn": ["^build"]
     },
 
-    "ui#build": {
+    "react#build": {
       "dependsOn": ["core#build"]
     },
     "native#build": {
@@ -55,16 +55,16 @@
       ]
     },
     "next#build": {
-      "dependsOn": ["webpack#build", "ui#build"]
+      "dependsOn": ["webpack#build", "react#build"]
     },
     "vite-react#build": {
-      "dependsOn": ["vite#build", "ui#build"]
+      "dependsOn": ["vite#build", "react#build"]
     },
     "rspack-react#build": {
-      "dependsOn": ["rspack#build", "ui#build"]
+      "dependsOn": ["rspack#build", "react#build"]
     },
     "rollup-react#build": {
-      "dependsOn": ["rollup#build", "ui#build"]
+      "dependsOn": ["rollup#build", "react#build"]
     },
     "vite-vue#build": {
       "dependsOn": ["vite#build", "vue#build"]