Merge pull request #146 from quiltt/quick-readme-fix-to-onboard-first…

…-customer

Quick README fix

ECMAScript/react-native/README.md

@@ -1,22 +1,53 @@
-# Quiltt Connector React Native SDK
+# @quiltt/react-native
+
+[![npm version](https://badge.fury.io/js/@quiltt%2Freact-native.svg)](https://badge.fury.io/js/@quiltt%2Freact-native)
+[![CI](https://github.com/quiltt/quiltt-public/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/quiltt/quiltt-public/actions/workflows/ci.yml)
+
+`@quiltt/react-native` provides React Native Components for integrating Quiltt Connector into React Native and Expo applications.
+
+## Installation
+
+```shell
+$ npm install @quiltt/react
+# or
+$ yarn add @quiltt/react
+# or
+# Please note that you will need to add `node-linker=hoisted` in `.npmrc` if you are using pnpm in expo app.`
+$ pnpm add @quiltt/react
+```
+
+### QuilttConnector
+
+Launch the [Quiltt Connector](https://www.quiltt.dev/guides/connector) in a webview.
+
+`@quiltt/react-native` does not include any navigation library, you might want to navigate to a new "page" when using QuilttConnector to get the best result.
+
+For simple usage of `react-navigation`, please see [App.tsx](ECMAScript/react-native/example/App.tsx) and [ConnectorScreen.tsx](ECMAScript/react-native/example/screens/ConnectorScreen.tsx).
+
+#### Example
 
 ```typescript
 import { useState } from 'react'
+import { QuilttProvider } from '@quiltt/react'
 import { QuilttConnector } from '@quiltt/react-native'
 
 export const App = () => {
+  // See: https://www.quiltt.dev/api-reference/rest/auth#/paths/~1v1~1users~1sessions/post
+  const token = 'GET_THIS_TOKEN_FROM_YOUR_SERVER'
   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}
-    />
+    <QuilttProvider token={token}>
+      <QuilttConnector
+        connectorId="<CONNECTOR_ID>"
+        oAuthRedirectUrl={oAuthRedirectUrl}
+        onExitSuccess={handleExitSuccess}
+      />
+    </QuilttProvider>
   )
 }
 

ECMAScript/react-native/example/App.tsx

@@ -17,7 +17,8 @@ export default function App() {
     console.log(url)
   }, [url])
 
-  const token = 'PUT_A_REAL_TOKEN_HERE'
+  // See: https://www.quiltt.dev/api-reference/rest/auth#/paths/~1v1~1users~1sessions/post
+  const token = 'GET_THIS_TOKEN_FROM_YOUR_SERVER'
 
   return (
     <QuilttProvider token={token}>

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

@@ -7,7 +7,8 @@
 const { resolve } = require('path')
 
 const siblings = {
-  '@quiltt/react-native': resolve(__dirname, '..', 'src'),
+  // Enable this to import local package
+  // '@quiltt/react-native': resolve(__dirname, '..', 'src'),
 }
 
 module.exports = {

ECMAScript/react-native/example/package.json

@@ -17,11 +17,9 @@
     "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": "3.1.3",
-    "@quiltt/react": "3.1.3",
-    "core-js": "3.33.2"
+    "@quiltt/core": "3.2.2",
+    "@quiltt/react": "3.2.2",
+    "@quiltt/react-native": "3.2.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

ECMAScript/react-native/example/yarn.lock

@@ -1672,23 +1672,33 @@
     mkdirp "^1.0.4"
     rimraf "^3.0.2"
 
-"@quiltt/core@3.1.3":
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/@quiltt/core/-/core-3.1.3.tgz#0a7687a0e5b474276605bc73d2cbbd5b5a5b8955"
-  integrity sha512-O5lAKcmyFkjtoPF3twIXxix/SEHQ0PJswS33r78iosO6nGDaGSsQM7hcf/Jbqwv21nQ7ChKJVK4VucPSAji6tw==
+"@quiltt/core@3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@quiltt/core/-/core-3.2.2.tgz#3e8cd678aa09d49de75e79de7c0bb77c889d6afc"
+  integrity sha512-UFVUPB/kLlc1QHd3YHc6Rq/3oIPNymzYvoAWOUOf72CutT5dSzIf4EYSEKG02TlBo+491h9nsGxOodABFBDF1Q==
   dependencies:
     "@apollo/client" "^3.7.16"
     axios "^1.4.0"
     cross-fetch "^3.1.8"
     graphql "^16.8.1"
     graphql-ruby-client "^1.11.8"
 
-"@quiltt/[email protected]":
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/@quiltt/react/-/react-3.1.3.tgz#b4ffbd88b09a2c5e48b53028915497e974008b47"
-  integrity sha512-P0KgaaziiNLWT7PsNcWwbFDDFpF7q5LPq9fBGsYkkXRB3MEljzwpkjakrzu66lKPKwN1KY7S7fR/w7VLHq+VPQ==
+"@quiltt/[email protected]":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@quiltt/react-native/-/react-native-3.2.2.tgz#a1846b15d17cd0764efd6d5a22c9f24c40da4e5f"
+  integrity sha512-wUD177WqF/tPhh97nNWHNkuqkbjxeLClvX7FV31XE6BnfUMCxOw0TYuAe3LYQVeCOdv+Y1EuE1qBHHy87u3wDQ==
+  dependencies:
+    "@quiltt/core" "3.2.2"
+    "@quiltt/react" "3.2.2"
+    core-js "3.33.2"
+    react-native-webview "13.6.2"
+
+"@quiltt/[email protected]":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@quiltt/react/-/react-3.2.2.tgz#9b9a7a146f3936c1a8749b164e9aa21b60573f72"
+  integrity sha512-rrBvYuoNv8Rd5c5NAJcWGtwdAccwDAaKJgxnn/thMnYDAIHtQaZkmqHnqgDU4utlFDeRDyTaHWvXrbhYlUbZkg==
   dependencies:
-    "@quiltt/core" "3.1.3"
+    "@quiltt/core" "3.2.2"
 
 "@react-native-community/[email protected]":
   version "11.3.7"
@@ -2541,7 +2551,7 @@ buffer-from@^1.0.0:
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
   integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
-buffer@^5.4.3, buffer@^5.5.0:
+buffer@^5.5.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
   integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
@@ -5401,11 +5411,6 @@ pump@^3.0.0:
     end-of-stream "^1.1.0"
     once "^1.3.1"
 
-punycode@^2.1.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
-  integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
-
 [email protected]:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/qrcode-terminal/-/qrcode-terminal-0.11.0.tgz#ffc6c28a2fc0bfb47052b47e23f4f446a5fbdb9e"
@@ -5518,17 +5523,10 @@ react-native-screens@~3.22.0:
     react-freeze "^1.0.0"
     warn-once "^0.1.0"
 
-react-native-url-polyfill@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/react-native-url-polyfill/-/react-native-url-polyfill-2.0.0.tgz#db714520a2985cff1d50ab2e66279b9f91ffd589"
-  integrity sha512-My330Do7/DvKnEvwQc0WdcBnFPploYKp9CYlefDXzIdEaA+PAhDYllkvGeEroEzvc4Kzzj2O4yVdz8v6fjRvhA==
-  dependencies:
-    whatwg-url-without-unicode "8.0.0-3"
-
-[email protected]:
-  version "13.2.2"
-  resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-13.2.2.tgz#06b04db8e1f4ed57a9dc92f4094aa0e41271b89b"
-  integrity sha512-uT70y2GUqQzaj2RwRb/QuKRdXeDjXM6oN3DdPqYQlOOMFTCT8r62fybyjVVRoik8io+KLa5KnmuSoS5B2O1BmA==
+[email protected]:
+  version "13.6.2"
+  resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-13.6.2.tgz#0a9b18793e915add5b5dbdbf32509d7751b49167"
+  integrity sha512-QzhQ5JCU+Nf2W285DtvCZOVQy/MkJXMwNDYPZvOWQbAOgxJMSSO+BtqXTMA1UPugDsko6PxJ0TxSlUwIwJijDg==
   dependencies:
     escape-string-regexp "2.0.0"
     invariant "2.2.4"
@@ -6630,25 +6628,11 @@ webidl-conversions@^3.0.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
   integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
 
-webidl-conversions@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
-  integrity sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==
-
 whatwg-fetch@^3.0.0:
   version "3.6.19"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.19.tgz#caefd92ae630b91c07345537e67f8354db470973"
   integrity sha512-d67JP4dHSbm2TrpFj8AbO8DnL1JXL5J9u0Kq2xW6d0TFDbCA3Muhdt8orXC22utleTVj7Prqt82baN6RBvnEgw==
 
-[email protected]:
-  version "8.0.0-3"
-  resolved "https://registry.yarnpkg.com/whatwg-url-without-unicode/-/whatwg-url-without-unicode-8.0.0-3.tgz#ab6df4bf6caaa6c85a59f6e82c026151d4bb376b"
-  integrity sha512-HoKuzZrUlgpz35YO27XgD28uh/WJH4B0+3ttFqRo//lmq+9T/mIOJ6kqmINI9HpUpz1imRC/nR/lxKpJiv0uig==
-  dependencies:
-    buffer "^5.4.3"
-    punycode "^2.1.1"
-    webidl-conversions "^5.0.0"
-
 whatwg-url@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"

README.md

@@ -20,6 +20,11 @@ The Core package provides essential functionality for building Javascript-based
 [![npm version](https://badge.fury.io/js/%40quiltt%2Freact.svg)](https://badge.fury.io/js/%40quiltt%2Freact)
 The React package provides React Components and Hooks for integrating Quiltt into React-based applications.
 
+### [@quiltt/react-native](ECMAScript/react-native#readme)
+
+[![npm version](https://badge.fury.io/js/%40quiltt%2Freact-native.svg)](https://badge.fury.io/js/%40quiltt%2Freact-native)
+The React Native package provides React Native Components for integrating Quiltt Connector into React Native and Expo applications.
+
 ## License
 
 This repository and published packages are licensed under the terms of the MIT license. See the [LICENSE](LICENSE.md) file for more information.