feat(native): seperate react native package

.changeset/config.json

@@ -8,7 +8,7 @@
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
   "ignore": [
-    "@oktaytest/native",
+    "@oktaytest/react-native-app",
     "@oktaytest/next",
     "@oktaytest/nuxt-app",
     "@oktaytest/rollup-react",

apps/native/App.tsx → apps/react-native-app/App.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { StyleSheet, View } from "react-native";
-import { Iconify } from "@oktaytest/ui";
+import { Iconify } from "@oktaytest/native";
 
 export default function App() {
   return (

apps/react-native-app/babel.config.js

@@ -0,0 +1,23 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+    plugins: [
+      [
+        "@oktaytest/babel-plugin",
+        {
+          icons: [
+            "mdi:home",
+            "mdi:account",
+            "mdi:account-badge-outline",
+            "feather:activity",
+            "feather:alert-circle",
+            "logos:active-campaign",
+            "logos:apache-superset-icon",
+          ],
+          outputFileName: "react-native-app",
+        },
+      ],
+    ],
+  };
+};

apps/native/metro.config.js → apps/react-native-app/metro.config.js

@@ -19,7 +19,7 @@ const configWithIconify = withIconify(config, {
     "logos:active-campaign",
     "logos:apache-superset-icon",
   ],
-  outputFileName: "native",
+  outputFileName: "react-native-app",
 });
 
 // 1. Watch all files within the monorepo

apps/native/package.json → apps/react-native-app/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@oktaytest/native",
+  "name": "@oktaytest/react-native-app",
   "version": "0.0.0",
   "private": true,
   "main": "index.js",
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@oktaytest/metro": "*",
-    "@oktaytest/ui": "*",
+    "@oktaytest/native": "*",
     "@oktaytest/webpack": "*",
     "@oktaytest/babel-plugin": "*",
     "expo": "^49.0.21",

apps/native/webpack.config.js → apps/react-native-app/webpack.config.js

@@ -15,7 +15,7 @@ module.exports = async function (env, argv) {
         "logos:active-campaign",
         "logos:apache-superset-icon",
       ],
-      outputFileName: "native-web",
+      outputFileName: "react-native-app",
     })
   );
 

package.json

@@ -1,4 +1,29 @@
 {
-  "name": "monicon",
-  "version": "0.0.0"
+  "name": "react-native-iconify",
+  "private": true,
+  "workspaces": [
+    "apps/*",
+    "packages/*"
+  ],
+  "files": [],
+  "scripts": {
+    "dev": "turbo run dev",
+    "build": "turbo run build",
+    "build:pkgs": "turbo run build --filter='./packages/*'",
+    "clean": "turbo run clean && rm -rf node_modules",
+    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\" --ignore-path .gitignore",
+    "changeset": "changeset",
+    "version": "changeset version",
+    "release": "yarn build:pkgs && changeset publish"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.27.9",
+    "prettier": "^3.1.1",
+    "turbo": "^2.1.3"
+  },
+  "packageManager": "[email protected]",
+  "engines": {
+    "node": ">=18"
+  },
+  "version": "0.0.119"
 }

packages/core/package.json

@@ -9,11 +9,13 @@
   "exports": {
     ".": {
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
     },
     "./constants": {
       "import": "./dist/constants.mjs",
-      "require": "./dist/constants.js"
+      "require": "./dist/constants.js",
+      "types": "./dist/constants.d.mts"
     }
   },
   "publishConfig": {

packages/native/.gitignore

@@ -0,0 +1,28 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+
+# misc
+.DS_Store
+*.pem
+
+# build
+dist
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# turbo
+.turbo

packages/native/CHANGELOG.md

@@ -0,0 +1,27 @@
+# @oktaytest/ui
+
+## 0.0.119
+
+### Patch Changes
+
+- add svelte support
+- Updated dependencies
+  - @oktaytest/core@0.0.119
+
+## 0.0.118
+
+### Patch Changes
+
+- add prepack scripts
+- 47ee90f: add prepack scripts
+- Updated dependencies
+- Updated dependencies [47ee90f]
+  - @oktaytest/core@0.0.118
+
+## 0.0.114
+
+### Patch Changes
+
+- add vite and nuxt support
+- Updated dependencies
+  - @oktaytest/core@0.0.114

packages/native/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@oktaytest/native",
+  "version": "0.0.119",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./iconify": {
+      "import": "./dist/iconify.mjs",
+      "require": "./dist/iconify.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "prepack": "yarn build"
+  },
+  "devDependencies": {
+    "@oktaytest/typescript-config": "*",
+    "@types/react": "^18.2.46",
+    "@types/react-native": "^0.73.0",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "html-react-parser": "^5.1.16",
+    "@oktaytest/core": "*"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-native": ">=0.63.0",
+    "react-native-svg": ">=13.2.0"
+  }
+}

packages/native/src/constants.ts

@@ -0,0 +1,5 @@
+export const fallbackIcon = {
+  svg: '<svg width="32" height="32" viewBox="0 0 24 24" > <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m0-2a8 8 0 1 0 0-16a8 8 0 0 0 0 16m-1-5h2v2h-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1a1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355" /> </svg>',
+  width: 32,
+  height: 32,
+};

packages/native/src/iconify.tsx

@@ -0,0 +1,95 @@
+import React, { useState, useEffect, ReactNode } from "react";
+
+import { IconifyProps, RuntimeIcon, RuntimeIconifyProps } from "./types";
+import { setAttributes } from "./utils";
+import { fallbackIcon } from "./constants";
+
+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 {
+      // todo: add error handling
+      // @ts-ignore
+      const iconsImport = await import("oktay");
+
+      const icons = iconsImport.default ?? iconsImport;
+
+      let icon = icons[iconName];
+
+      if (!icon) {
+        console.warn(
+          `[Iconify] The icon "${iconName}" is missing from the configuration. To resolve this, ensure it is added to the 'icons' array within the Iconify plugin's configuration.`
+        );
+
+        icon = fallbackIcon;
+      }
+
+      resolve(icon);
+    } catch (error) {
+      reject(error);
+    }
+  });
+
+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");
+
+  return parse.default(props.icon.svg);
+};
+
+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 renderIcon = async () => {
+    const icon = await getIcon(props.name);
+
+    const component = await getComponent({
+      ...props,
+      icon,
+    });
+
+    setComponent(component);
+  };
+
+  useEffect(() => {
+    renderIcon();
+  }, [props]);
+
+  return Component;
+};
+
+export default Iconify;

packages/native/src/index.tsx

@@ -0,0 +1,2 @@
+export { Iconify } from "./iconify";
+export { type IconifyProps } from "./types";

packages/native/src/types.ts

@@ -0,0 +1,15 @@
+export interface IconifyProps {
+  name: string;
+  size?: number;
+  color?: string;
+}
+
+export interface RuntimeIcon {
+  svg: string;
+  width: number;
+  height: number;
+}
+
+export interface RuntimeIconifyProps extends IconifyProps {
+  icon: RuntimeIcon;
+}

packages/native/src/utils.ts

@@ -0,0 +1,30 @@
+import { RuntimeIconifyProps } from "./types";
+
+export const setAttributes = (
+  props: RuntimeIconifyProps
+): RuntimeIconifyProps => {
+  const ratio = props.icon.width / props.icon.height;
+
+  let svg = props.icon.svg;
+
+  const height = props.size ? props.size : props.icon.height;
+  const width = props.size ? props.size * ratio : props.icon.width;
+
+  svg = svg
+    .replace(/width="([^"]+)"/, `width="${width}"`)
+    .replace(/height="([^"]+)"/, `height="${height}"`);
+
+  if (props.color) {
+    svg = svg.replace(/fill="([^"]+)"/, `fill="${props.color}"`);
+  }
+
+  return {
+    ...props,
+    icon: {
+      ...props.icon,
+      svg,
+      height,
+      width,
+    },
+  };
+};

packages/native/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@oktaytest/typescript-config/react-native-library",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"],
+  "compilerOptions": {
+    "strict": true
+  }
+}