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,22 @@
+import { StatusBar } from 'expo-status-bar'
+import { StyleSheet, Text, View } from 'react-native'
+import { QuilttConnector } from '@quiltt/react-native'
+
+export default function App() {
+  return (
+    <View style={styles.container}>
+      <Text>Open up App.tsx to start working on your app!</Text>
+      <StatusBar style="auto" />
+      <QuilttConnector connectorId="yldluevd9q" oauthRedirectUrl="https://www.example.com" />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    // backgroundColor: '#fff',
+    // alignItems: 'center',
+    // justifyContent: 'center',
+  },
+})

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,31 @@
+// 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'),
+}
+
+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,24 @@
+{
+  "name": "example",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "expo": "~49.0.15",
+    "expo-status-bar": "~1.6.0",
+    "react": "18.2.0",
+    "react-native": "0.72.6",
+    "react-native-webview": "13.2.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@types/react": "~18.2.14",
+    "typescript": "^5.1.3"
+  },
+  "private": true
+}

ECMAScript/react-native/example/tsconfig.json

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