From 98de03064742f05e3d00667183b9ee956092d0d3 Mon Sep 17 00:00:00 2001 From: Tom Lee Date: Fri, 3 Nov 2023 11:42:26 -0700 Subject: [PATCH 1/2] Use released version in example app --- ECMAScript/react-native/README.md | 15 +++-- ECMAScript/react-native/example/App.tsx | 3 +- .../react-native/example/metro.config.js | 3 +- ECMAScript/react-native/example/package.json | 8 +-- ECMAScript/react-native/example/yarn.lock | 64 +++++++------------ 5 files changed, 41 insertions(+), 52 deletions(-) diff --git a/ECMAScript/react-native/README.md b/ECMAScript/react-native/README.md index a7747da1..458e2d69 100644 --- a/ECMAScript/react-native/README.md +++ b/ECMAScript/react-native/README.md @@ -2,9 +2,12 @@ ```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() const oAuthRedirectUrl = "quilttexample://open.reactnative.app" const handleExitSuccess = (metadata) => { @@ -12,11 +15,13 @@ export const App = () => { } return ( - + + + ) } diff --git a/ECMAScript/react-native/example/App.tsx b/ECMAScript/react-native/example/App.tsx index 3f80d504..e92fb6db 100644 --- a/ECMAScript/react-native/example/App.tsx +++ b/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 ( diff --git a/ECMAScript/react-native/example/metro.config.js b/ECMAScript/react-native/example/metro.config.js index ca95ac9e..29984225 100644 --- a/ECMAScript/react-native/example/metro.config.js +++ b/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 = { diff --git a/ECMAScript/react-native/example/package.json b/ECMAScript/react-native/example/package.json index 907a746a..688b055d 100644 --- a/ECMAScript/react-native/example/package.json +++ b/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", diff --git a/ECMAScript/react-native/example/yarn.lock b/ECMAScript/react-native/example/yarn.lock index 3dec2414..92870651 100644 --- a/ECMAScript/react-native/example/yarn.lock +++ b/ECMAScript/react-native/example/yarn.lock @@ -1672,10 +1672,10 @@ 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" @@ -1683,12 +1683,22 @@ graphql "^16.8.1" graphql-ruby-client "^1.11.8" -"@quiltt/react@3.1.3": - version "3.1.3" - resolved "https://registry.yarnpkg.com/@quiltt/react/-/react-3.1.3.tgz#b4ffbd88b09a2c5e48b53028915497e974008b47" - integrity sha512-P0KgaaziiNLWT7PsNcWwbFDDFpF7q5LPq9fBGsYkkXRB3MEljzwpkjakrzu66lKPKwN1KY7S7fR/w7VLHq+VPQ== +"@quiltt/react-native@3.2.2": + 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/react@3.2.2": + 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/cli-clean@11.3.7": 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== - qrcode-terminal@0.11.0: 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" - -react-native-webview@13.2.2: - 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== +react-native-webview@13.6.2: + 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== -whatwg-url-without-unicode@8.0.0-3: - 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" From 3743fe7ff79f259fb94b37361ac7baeeae1e5b1c Mon Sep 17 00:00:00 2001 From: Tom Lee Date: Fri, 3 Nov 2023 11:59:16 -0700 Subject: [PATCH 2/2] Quick readme to onboard customer --- ECMAScript/react-native/README.md | 28 +++++++++++++++++++++++++++- README.md | 5 +++++ 2 files changed, 32 insertions(+), 1 deletion(-) diff --git a/ECMAScript/react-native/README.md b/ECMAScript/react-native/README.md index 458e2d69..b62b432e 100644 --- a/ECMAScript/react-native/README.md +++ b/ECMAScript/react-native/README.md @@ -1,4 +1,30 @@ -# 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' diff --git a/README.md b/README.md index fe4fad52..655eb00e 100644 --- a/README.md +++ b/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.