chore: cleanup

apps/nativescript-hello-world/App_Resources/iOS/Podfile

@@ -0,0 +1 @@
+pod 'FLEX', :configurations => ['Debug']

apps/nativescript-hello-world/src/app.css

@@ -1,3 +1,44 @@
+/* Resets */
+* {
+    @apply font-normal;
+    horizontal-alignment: 'left';
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  Label {
+    @apply align-top;
+  }
+
+  /**
+  *   1. set a default size for the ActivityIndicator to be similar on ios/android
+  */
+  ActivityIndicator {
+    @apply h-6 w-6; /* 1 */
+  }
+
+  Button {
+    @apply rounded-none border-0 bg-transparent normal-case;
+    min-width: 0;
+    min-height: 0;
+    android-elevation: 0;
+    android-dynamic-elevation-offset: 0;
+  }
+
+  TextField,
+  TextView,
+  NumericKeyboard {
+    @apply bg-transparent text-base;
+    placeholder-color: theme('colors.gray.400');
+  }
+  /* END Resets */
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

apps/nativescript-hello-world/src/routes/home.tsx

@@ -7,13 +7,15 @@ export const Home = () => {
 
   return (
     <>
-      <actionbar title="Home" />
-      <gridlayout rows="*,auto,auto,auto,auto,*">
-        <stacklayout row="1">
-          <Counter />
-        </stacklayout>
+      <actionbar title="Home" className="bg-sky-800 text-white" />
+      <stacklayout className="p-4 h-full">
+        <label
+          className={`text-5xl font-thin uppercase my-16 text-center ${global.isVisionOS ? 'text-white' : 'text-sky-700'}`}
+        >
+          Hello World!
+        </label>
+        <Counter />
         <button
-          row="2"
           className="rounded-full bg-blue-500 text-white w-[300] p-3 text-2xl font-bold text-center capitalize mt-10"
           iosOverflowSafeArea="false"
           text="Navigate to About"
@@ -39,30 +41,37 @@ export const Home = () => {
 
         {global.isVisionOS && (
           <swiftui
-            row="3"
             swiftId="toggle3D"
             data={{ type: 'solid', title: 'Solid 3D', typeId: 'Solid' }}
-            className="h-center h-[50] mt-10"
+            className="h-center h-[50] mt-4"
           />
         )}
         {global.isVisionOS && (
           <swiftui
-            row="4"
             swiftId="toggle3D"
             data={{ type: 'globe', title: 'View Globe', typeId: 'Globe' }}
-            className="h-center h-[50] mt-10"
+            className="h-center h-[50] mt-4"
           />
         )}
 
-        <image
-          rowSpan="6"
-          src="~/assets/solid.png"
-          width="100"
-          height="100"
-          className="align-bottom mb-8"
-          sharedTransitionTag="logo"
-        />
-      </gridlayout>
+        <gridlayout rows="*,auto" className="align-bottom">
+          <image
+            src="~/assets/solid.png"
+            width="70"
+            height="70"
+            row={1}
+            className="align-bottom mb-8"
+            sharedTransitionTag="logo"
+            on:tap={() => {
+              if (global.isIOS) {
+                FLEXManager.sharedManager.showExplorer();
+              }
+            }}
+          />
+        </gridlayout>
+      </stacklayout>
     </>
   );
 };
+
+declare var FLEXManager;

apps/nativescript-hello-world/src/routes/settings.tsx

@@ -1,29 +1,36 @@
-import { useRouter } from "../router";
+import { useRouter } from '../router';
 
 export const Settings = () => {
   const router = useRouter();
   return (
     <>
-      <actionbar title="About" />
-      <gridlayout rows="*,auto,auto,*">
-
+      <actionbar title="About" className="bg-sky-800 text-white" />
+      {/* rows="*,auto,auto,*" */}
+      <stacklayout className="h-full">
+        <label
+          className={`text-5xl font-thin uppercase my-16 text-center ${global.isVisionOS ? 'text-white' : 'text-sky-700'}`}
+        >
+          About Page
+        </label>
         <button
-        row="1"
+          row="1"
           text="Go to Home"
           on:tap={() => {
             router.goBack();
           }}
           className="rounded-full bg-blue-500 text-white w-[300] p-3 text-2xl font-bold text-center capitalize"
         />
-        <image
-          rowSpan="4"
-          src="~/assets/solid.png"
-          width="200"
-          height="200"
-          className="align-bottom mb-8"
-          sharedTransitionTag="logo"
-        />
-      </gridlayout>
+        <gridlayout rows="*,auto" className="align-bottom">
+          <image
+            src="~/assets/solid.png"
+            width="300"
+            height="300"
+            row={1}
+            className="align-bottom mb-8"
+            sharedTransitionTag="logo"
+          />
+        </gridlayout>
+      </stacklayout>
     </>
   );
 };

apps/nativescript-hello-world/tsconfig.json

@@ -13,7 +13,8 @@
     "paths": {
       "~/*": ["src/*"],
       "@/*": ["src/*"],
-      "@solid-x-platforms/components": ["../../packages/components/src/index.ts"]
+      "@solid-x-platforms/components": ["../../packages/components/src/index.ts"],
+      "@solid-x-platforms/utils": ["../../packages/utils/src/index.ts"]
     },
     "allowJs": true,
     "types": [

apps/nativescript-hello-world/webpack.config.js

@@ -10,6 +10,10 @@ module.exports = (env) => {
       '@solid-x-platforms/components',
       resolve(__dirname, '../../packages/components/src/')
     );
+    config.resolve.alias.set(
+      '@solid-x-platforms/utils',
+      resolve(__dirname, '../../packages/utils/src/')
+    );
   });
   return webpack.resolveConfig();
 };

packages/components/src/lib/button.tsx

@@ -1,3 +1,33 @@
-export function Button({ onTap, ...props }: { onTap: () => void }) {
-  return <button onClick={onTap} on:tap={onTap} {...props} />;
+/**
+ * Option B
+ */
+// export function Button({ onTap, ...props }: { onTap: () => void }) {
+//   return <button onClick={onTap} on:tap={onTap} {...props} />;
+// }
+
+/**
+ * Option A
+ */
+import { isNativeScript } from '@solid-x-platforms/utils';
+export function Button({
+  onTap,
+  children,
+  ...extraProps
+}: {
+  onTap: () => void;
+  children: any;
+}) {
+  if (isNativeScript()) {
+    return (
+      <button on:tap={onTap} {...extraProps}>
+        {...children}
+      </button>
+    );
+  } else {
+    return (
+      <button onClick={onTap} {...extraProps}>
+        {...children}
+      </button>
+    );
+  }
 }

packages/components/src/lib/counter.tsx

@@ -1,13 +1,13 @@
-import { createSignal } from "solid-js";
+import { createSignal } from 'solid-js';
 import { Button } from './button';
 
 export function Counter() {
   const [count, setCount] = createSignal(0);
   return (
-    // @ts-ignore
     <Button
+      // @ts-ignore
       className="w-[200] rounded-full bg-gray-100 border-2 border-gray-300 focus:border-gray-400 active:border-gray-400 px-[2rem] py-[1rem] text-black"
-      onTap={() => setCount(count() + 1)} 
+      onTap={() => setCount(count() + 1)}
     >
       Clicks: {count()}
     </Button>

packages/utils/.eslintrc.json

@@ -0,0 +1,30 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": [
+          "error",
+          {
+            "ignoredFiles": ["{projectRoot}/vite.config.{js,ts,mjs,mts}"]
+          }
+        ]
+      }
+    }
+  ]
+}

packages/utils/README.md

@@ -0,0 +1,11 @@
+# packages/utils
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build packages/utils` to build the library.
+
+## Running unit tests
+
+Run `nx test packages/utils` to execute the unit tests via [Jest](https://jestjs.io).

packages/utils/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@solid-x-platforms/utils",
+  "version": "0.0.1",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "type": "commonjs",
+  "main": "./src/index.js",
+  "typings": "./src/index.d.ts"
+}

packages/utils/project.json

@@ -0,0 +1,37 @@
+{
+  "name": "utils",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/utils/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/packages/utils",
+        "main": "packages/utils/src/index.ts",
+        "tsConfig": "packages/utils/tsconfig.lib.json",
+        "assets": ["packages/utils/*.md"]
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "packages/utils/**/*.ts",
+          "packages/utils/package.json"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nx/vite:test",
+      "outputs": ["{options.reportsDirectory}"],
+      "options": {
+        "passWithNoTests": true,
+        "reportsDirectory": "../../coverage/packages/utils"
+      }
+    }
+  },
+  "tags": []
+}

packages/utils/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/utils';

packages/utils/src/lib/utils.spec.ts

@@ -0,0 +1,13 @@
+import { isAndroid, isIOS, isNativeScript } from './utils';
+
+describe('NativeScript Utilities', () => {
+  it('standard web: isAndroid', () => {
+    expect(isAndroid()).toBe(false);
+  });
+  it('standard web: isIOS', () => {
+    expect(isIOS()).toBe(false);
+  });
+  it('standard web: isNativeScript', () => {
+    expect(isNativeScript()).toBe(false);
+  });
+});

packages/utils/src/lib/utils.ts

@@ -0,0 +1,26 @@
+/**
+ * NativeScript helpers
+ */
+
+/**
+ * Determine if running on native iOS mobile app
+ */
+export function isIOS() {
+  return typeof NSObject !== 'undefined' && typeof NSString !== 'undefined';
+}
+
+/**
+ * Determine if running on native Android mobile app
+ */
+export function isAndroid() {
+  return typeof android !== 'undefined' && typeof java !== 'undefined';
+}
+
+/**
+ * Determine if running on native iOS or Android mobile app
+ */
+export function isNativeScript() {
+  return isIOS() || isAndroid();
+}
+
+declare var NSObject: any, NSString: any, android: any, java: any;