wip - react native sdk

ECMAScript/react-native/.eslintrc.cjs

@@ -0,0 +1,81 @@
+const prettierConfig = require('./prettier.config.cjs')
+
+const reactPatterns = {
+  files: ['*.{jsx,tsx}'],
+}
+
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es6: true,
+    node: true,
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: 'tsconfig.json',
+    tsconfigRootDir: __dirname,
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'prettier',
+  ],
+  plugins: ['@typescript-eslint', 'prettier'],
+  rules: {
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/naming-convention': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
+      {
+        ignoreRestSiblings: true,
+        argsIgnorePattern: 'res|response|resolve|reject|done|next|err|error|^_',
+        varsIgnorePattern: '^_',
+      },
+    ],
+    'prettier/prettier': ['error', prettierConfig],
+  },
+  overrides: [
+    {
+      files: reactPatterns.files,
+      extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:react/recommended',
+        'plugin:jsx-a11y/recommended',
+        'plugin:react-hooks/recommended',
+        'prettier',
+      ],
+      rules: {
+        'sort-imports': 'off',
+        // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unescaped-entities.md
+        'react/no-unescaped-entities': ['error', { forbid: ['>'] }],
+        'react/prop-types': 'off',
+        'react/react-in-jsx-scope': 'off',
+        // Fine-tune naming convention react typescript jsx (function components)
+        // https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/naming-convention.md
+        'prettier/prettier': ['error', prettierConfig],
+      },
+    },
+    {
+      files: ['*.cjs'],
+      env: {
+        node: true,
+      },
+      rules: {
+        '@typescript-eslint/no-var-requires': 'off',
+      },
+    },
+  ],
+}

ECMAScript/react-native/README.md

@@ -0,0 +1,24 @@
+# Quiltt Connector React Native SDK
+
+```typescript
+import { useState } from 'react'
+import { QuilttConnector } from '@quiltt/react-native'
+
+export const App = () => {
+  const [connectionId, setConnectionId] = useState<string>()
+  const oAuthRedirectUrl = "quilttexample://open.reactnative.app"
+  const handleExitSuccess = (metadata) => {
+    setConnectionId(metadata?.connectionId)
+  }
+
+  return (
+    <QuilttConnector
+      connectorId="<CONNECTOR_ID>"
+      oAuthRedirectUrl={oAuthRedirectUrl}
+      onExitSuccess={handleExitSuccess}
+    />
+  )
+}
+
+export default App
+```

ECMAScript/react-native/example/.gitignore

@@ -0,0 +1,35 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

ECMAScript/react-native/example/App.tsx

@@ -0,0 +1,32 @@
+import { useEffect } from 'react'
+import { NavigationContainer } from '@react-navigation/native'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import { StatusBar } from 'expo-status-bar'
+import * as Linking from 'expo-linking'
+import { HomeScreen } from './screens/HomeScreen'
+import { ConnectorScreen } from './screens/ConnectorScreen'
+
+const Stack = createNativeStackNavigator()
+
+export default function App() {
+  const url = Linking.useURL()
+
+  useEffect(() => {
+    // log this url and set it to QuilttConnector.oauthRedirectUrl
+    console.log(url)
+  }, [url])
+
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen
+          options={{ headerShown: false }}
+          name="Connector"
+          component={ConnectorScreen}
+        />
+      </Stack.Navigator>
+      <StatusBar style="auto" />
+    </NavigationContainer>
+  )
+}

ECMAScript/react-native/example/README.md

@@ -0,0 +1,27 @@
+# Quiltt Connector React Native  example
+Demonstrates how to use the Quiltt's React Native packge.
+
+## Getting Started
+
+## Setup
+
+Install dependencies locally.
+```
+yarn
+```
+
+Run the project, then the QR code with your device.
+```
+yarn start
+```
+
+Or if you'd like to run on an simulator.
+```
+yarn run ios
+```
+```
+yarn run android
+```
+
+### Note:
+This project uses [react-native-webview](https://www.npmjs.com/package/react-native-webview) and it might be crashing in iOS simulator, however, it works on real device.

ECMAScript/react-native/example/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "example",
+    "slug": "example",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

ECMAScript/react-native/example/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

ECMAScript/react-native/example/metro.config.js

@@ -0,0 +1,32 @@
+// Link local packages in React Native, metro doesn't like symlink
+// https://medium.com/@alielmajdaoui/linking-local-packages-in-react-native-the-right-way-2ac6587dcfa2
+
+// Learn more https://docs.expo.io/guides/customizing-metro
+
+const { resolve } = require('path')
+
+const siblings = {
+  '@quiltt/react-native': resolve(__dirname, '..', 'src'),
+  '@quiltt/core': resolve(__dirname, '..', 'src'),
+}
+
+module.exports = {
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: false,
+      },
+    }),
+  },
+  resolver: {
+    extraNodeModules: new Proxy(
+      {},
+      {
+        get: (target, name) =>
+          name in siblings ? siblings[name] : resolve(process.cwd(), 'node_modules', name),
+      }
+    ),
+  },
+  watchFolders: [...Object.values(siblings)],
+}

ECMAScript/react-native/example/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "example",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios"
+  },
+  "dependencies": {
+    "@react-navigation/native": "^6.1.9",
+    "@react-navigation/native-stack": "^6.9.16",
+    "expo": "~49.0.15",
+    "expo-linking": "~5.0.2",
+    "expo-status-bar": "~1.6.0",
+    "react": "18.2.0",
+    "react-native": "0.72.6",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-screens": "~3.22.0",
+    "react-native-url-polyfill": "^2.0.0",
+    "react-native-webview": "13.2.2",
+    "@quiltt/core": "workspace:*"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@types/react": "~18.2.14",
+    "typescript": "^5.1.3"
+  },
+  "private": true
+}

ECMAScript/react-native/example/screens/ConnectorScreen.tsx

@@ -0,0 +1,18 @@
+import { QuilttConnector } from '@quiltt/react-native'
+import { NavigationProp } from '@react-navigation/native'
+
+type ConnectorScreenProps = {
+  navigation: NavigationProp<any, any>
+}
+
+// Crashing in simulator, but works fine with physicla device, not sure why.
+// https://github.com/react-native-webview/react-native-webview/issues/1767#issuecomment-783094277
+export const ConnectorScreen = ({ navigation }: ConnectorScreenProps) => {
+  return (
+    <QuilttConnector
+      connectorId="yldluevd9q"
+      oauthRedirectUrl="exp://10.0.0.112:8081"
+      onExit={() => navigation.navigate('Home')}
+    />
+  )
+}

ECMAScript/react-native/example/screens/HomeScreen.tsx

@@ -0,0 +1,34 @@
+import { Button, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { NavigationProp } from '@react-navigation/native'
+
+type HomeScreenProps = {
+  navigation: NavigationProp<any, any>
+}
+
+export const HomeScreen = ({ navigation }: HomeScreenProps) => (
+  <View style={styles.container}>
+    <View style={styles.buttonContainer}>
+      <TouchableOpacity onPress={() => navigation.navigate('Connector')}>
+        <Text style={styles.customBtnText}>Launch Connector</Text>
+      </TouchableOpacity>
+    </View>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonContainer: {
+    elevation: 8,
+    backgroundColor: '#800082',
+    borderRadius: 10,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+  },
+  customBtnText: {
+    color: '#FFFFFF',
+  },
+})

ECMAScript/react-native/example/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true
+  }
+}