From 52b85db3f393ad4a41d42143bc3abb5e256b5202 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Tue, 20 Aug 2024 14:13:08 +0200 Subject: [PATCH 1/3] feat: react native platform --- package.json | 2 +- pnpm-lock.yaml | 14 +-- .../overview/platforms/+page.svelte | 13 ++- .../platforms/createReactNative.svelte | 47 ++++++++ .../platforms/wizard/flutter/step1.svelte | 66 ++--------- .../wizard/react-native/step1.svelte | 106 ++++++++++++++++++ .../wizard/react-native/step2.svelte | 13 +++ .../wizard/react-native/step3.svelte | 54 +++++++++ 8 files changed, 250 insertions(+), 65 deletions(-) create mode 100644 src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte create mode 100644 src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step1.svelte create mode 100644 src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step2.svelte create mode 100644 src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step3.svelte diff --git a/package.json b/package.json index 345bed3796..fa91320608 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "e2e:ui": "playwright test tests/e2e --ui" }, "dependencies": { - "@appwrite.io/console": "npm:matej-appwrite-console@0.6.13", + "@appwrite.io/console": "0.7.0-rc.2", "@appwrite.io/pink": "0.25.0", "@appwrite.io/pink-icons": "0.25.0", "@popperjs/core": "^2.11.8", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d89979a2d3..c8e21af9a1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,8 +9,8 @@ importers: .: dependencies: '@appwrite.io/console': - specifier: npm:matej-appwrite-console@0.6.13 - version: matej-appwrite-console@0.6.13 + specifier: 0.7.0-rc.2 + version: 0.7.0-rc.2 '@appwrite.io/pink': specifier: 0.25.0 version: 0.25.0 @@ -190,6 +190,9 @@ packages: '@analytics/type-utils@0.6.2': resolution: {integrity: sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg==} + '@appwrite.io/console@0.7.0-rc.2': + resolution: {integrity: sha512-V5Fx/ur1VboKbSgRJIoCxqMp/V3h3XQcsnE50IPaICOZ+rXoIt0IlfBNFKMnUGMBTyLVYbFfAYGkEMHlWv7v7w==} + '@appwrite.io/pink-icons@0.25.0': resolution: {integrity: sha512-0O3i2oEuh5mWvjO80i+X6rbzrWLJ1m5wmv2/M3a1p2PyBJsFxN8xQMTEmTn3Wl/D26SsM7SpzbdW6gmfgoVU9Q==} @@ -2164,9 +2167,6 @@ packages: makeerror@1.0.12: resolution: {integrity: sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==} - matej-appwrite-console@0.6.13: - resolution: {integrity: sha512-F15YP98n9Um809SN3wbyZun8ZFY/m5MEU2uWUUU+4ej+PI0af3YGhwnkYC1nmciKpDbILf8O4hQ1+ORXKho8hg==} - mdn-data@2.0.30: resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==} @@ -3232,6 +3232,8 @@ snapshots: '@analytics/type-utils@0.6.2': {} + '@appwrite.io/console@0.7.0-rc.2': {} + '@appwrite.io/pink-icons@0.25.0': {} '@appwrite.io/pink@0.25.0': @@ -5602,8 +5604,6 @@ snapshots: dependencies: tmpl: 1.0.5 - matej-appwrite-console@0.6.13: {} - mdn-data@2.0.30: {} merge-stream@2.0.0: {} diff --git a/src/routes/(console)/project-[project]/overview/platforms/+page.svelte b/src/routes/(console)/project-[project]/overview/platforms/+page.svelte index a39c404822..d263f96732 100644 --- a/src/routes/(console)/project-[project]/overview/platforms/+page.svelte +++ b/src/routes/(console)/project-[project]/overview/platforms/+page.svelte @@ -6,13 +6,15 @@ import CreateApple from './createApple.svelte'; import CreateFlutter from './createFlutter.svelte'; import CreateWeb from './createWeb.svelte'; + import CreateReactNative from './createReactNative.svelte'; import { versions } from './wizard/store'; export enum Platform { Web, Flutter, Android, - Apple + Apple, + ReactNative } export async function addPlatform(type: Platform) { @@ -24,7 +26,8 @@ [Platform.Web]: CreateWeb, [Platform.Flutter]: CreateFlutter, [Platform.Android]: CreateAndroid, - [Platform.Apple]: CreateApple + [Platform.Apple]: CreateApple, + [Platform.ReactNative]: CreateReactNative }; @@ -52,7 +55,9 @@ 'flutter-macos' = 'macOS', 'flutter-windows' = 'Windows', 'flutter-web' = 'Web', - 'web' = 'Web' + 'web' = 'Web', + 'react-native-android' = 'Android', + 'react-native-ios' = 'iOS' } let showDropdown = false; let showDropdownEmpty = false; @@ -89,6 +94,8 @@ addPlatform(Platform.Flutter)}>Flutter app addPlatform(Platform.Android)}>Android app addPlatform(Platform.Apple)}>Apple app + addPlatform(Platform.ReactNative)} + >React Native app diff --git a/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte b/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte new file mode 100644 index 0000000000..a1478420ac --- /dev/null +++ b/src/routes/(console)/project-[project]/overview/platforms/createReactNative.svelte @@ -0,0 +1,47 @@ + + + diff --git a/src/routes/(console)/project-[project]/overview/platforms/wizard/flutter/step1.svelte b/src/routes/(console)/project-[project]/overview/platforms/wizard/flutter/step1.svelte index c64b948e65..e9bb561654 100644 --- a/src/routes/(console)/project-[project]/overview/platforms/wizard/flutter/step1.svelte +++ b/src/routes/(console)/project-[project]/overview/platforms/wizard/flutter/step1.svelte @@ -28,13 +28,15 @@ const projectId = $page.params.project; const suggestions = ['*.vercel.app', '*.netlify.app', '*.gitpod.io']; - const placeholder: Record< - PlatformType, - { - name: string; - hostname: string; - tooltip: string; - } + const placeholder: Partial< + Record< + PlatformType, + { + name: string; + hostname: string; + tooltip: string; + } + > > = { [PlatformType.Flutterandroid]: { name: 'My Android App', @@ -69,60 +71,16 @@ name: 'My Windows App', hostname: 'appname', tooltip: 'Your application name' - }, - // The following are not used, but added to avoid TS errors - [PlatformType.Web]: { - name: '', - hostname: '', - tooltip: '' - }, - [PlatformType.Appleios]: { - name: '', - hostname: '', - tooltip: '' - }, - [PlatformType.Applemacos]: { - name: '', - hostname: '', - tooltip: '' - }, - [PlatformType.Applewatchos]: { - name: '', - hostname: '', - tooltip: '' - }, - [PlatformType.Appletvos]: { - name: '', - hostname: '', - tooltip: '' - }, - [PlatformType.Android]: { - name: '', - hostname: '', - tooltip: '' - }, - [PlatformType.Unity]: { - name: '', - hostname: '', - tooltip: '' } }; - const hostname: Record = { + const hostname: Partial> = { [PlatformType.Flutterandroid]: 'Package Name', [PlatformType.Flutterios]: 'Bundle ID', [PlatformType.Flutterlinux]: 'Package Name', [PlatformType.Fluttermacos]: 'Bundle ID', [PlatformType.Flutterweb]: 'Hostname', - [PlatformType.Flutterwindows]: 'Package Name', - // The following are not used, but added to avoid TS errors - [PlatformType.Web]: '', - [PlatformType.Appleios]: '', - [PlatformType.Applemacos]: '', - [PlatformType.Applewatchos]: '', - [PlatformType.Appletvos]: '', - [PlatformType.Android]: '', - [PlatformType.Unity]: '' + [PlatformType.Flutterwindows]: 'Package Name' }; async function beforeSubmit() { @@ -148,7 +106,7 @@ } $: registee = { - [PlatformType.Flutterandroid]: 'package name', + [PlatformType.Flutterandroid]: 'Package name', [PlatformType.Flutterios]: 'Bundle ID', [PlatformType.Flutterlinux]: 'Package name', [PlatformType.Fluttermacos]: 'Bundle ID', diff --git a/src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step1.svelte b/src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step1.svelte new file mode 100644 index 0000000000..77b2daf346 --- /dev/null +++ b/src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step1.svelte @@ -0,0 +1,106 @@ + + + + {registee} registration + +
+ (platform = PlatformType.Reactnativeandroid)} + selected={platform === PlatformType.Reactnativeandroid}> + Android + + (platform = PlatformType.Reactnativeios)} + selected={platform === PlatformType.Reactnativeios}> + iOS + +
+ + + + + + + diff --git a/src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step2.svelte b/src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step2.svelte new file mode 100644 index 0000000000..76b2bdb3cd --- /dev/null +++ b/src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step2.svelte @@ -0,0 +1,13 @@ + + + + Install + +

Install the Appwrite SDK for React Native and required dependencies.

+ + diff --git a/src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step3.svelte b/src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step3.svelte new file mode 100644 index 0000000000..0be05d43c5 --- /dev/null +++ b/src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step3.svelte @@ -0,0 +1,54 @@ + + + + Initialize + +

Initialize your SDK

+

+ Initialize your SDK by pointing the client to your Appwrite project using your Project ID +

+
+ +
+

+ Before sending any API calls to your new Appwrite project, make sure your device or emulator + has network access to your Appwrite project's hostname or IP address. +

+ {#if showAlert && isSelfHosted} +
+ (showAlert = false)}> + For self-hosted solutions + When connecting to a locally hosted Appwrite project from an emulator or a mobile device, + you should use the private IP of the device running your Appwrite project as the hostname + of the endpoint instead of localhost. You can also use a service like ngrok to proxy + the Appwrite server. + +
+ {/if} + From 28b54d82e81df5dcbcddeae4bb1eadf357cfc770 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Tue, 20 Aug 2024 14:26:48 +0200 Subject: [PATCH 2/3] fix: return type --- src/routes/(console)/account/mfa.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/(console)/account/mfa.svelte b/src/routes/(console)/account/mfa.svelte index 5fa0c8d4af..ec1c4921cc 100644 --- a/src/routes/(console)/account/mfa.svelte +++ b/src/routes/(console)/account/mfa.svelte @@ -16,7 +16,7 @@ let step = 1; let error = ''; - async function addAuthenticator(): Promise { + async function addAuthenticator(): Promise { type = await sdk.forConsole.account.createMfaAuthenticator(AuthenticatorType.Totp); trackEvent(Submit.AccountAuthenticatorCreate); From 02b5da174f82234d750a7c83203a3fe4e2bbcea6 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Wed, 21 Aug 2024 13:05:01 +0200 Subject: [PATCH 3/3] fix: react native flow --- .../project-[project]/overview/onboard.svelte | 5 +++++ .../project-[project]/overview/platforms/+page.svelte | 2 ++ .../platforms/wizard/react-native/step3.svelte | 10 +++++----- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/routes/(console)/project-[project]/overview/onboard.svelte b/src/routes/(console)/project-[project]/overview/onboard.svelte index 490c3e9df0..995606d828 100644 --- a/src/routes/(console)/project-[project]/overview/onboard.svelte +++ b/src/routes/(console)/project-[project]/overview/onboard.svelte @@ -35,6 +35,11 @@ title: 'Android', icon: 'color/android', platform: Platform.Android + }, + { + title: 'React Native', + icon: 'color/react', + platform: Platform.ReactNative } ]; diff --git a/src/routes/(console)/project-[project]/overview/platforms/+page.svelte b/src/routes/(console)/project-[project]/overview/platforms/+page.svelte index d263f96732..144503b1d0 100644 --- a/src/routes/(console)/project-[project]/overview/platforms/+page.svelte +++ b/src/routes/(console)/project-[project]/overview/platforms/+page.svelte @@ -66,6 +66,8 @@ const getPlatformInfo = (platform: string) => { if (platform.includes('flutter')) { return 'color/flutter'; + } else if (platform.includes('react-native')) { + return 'color/react'; } else if (platform.includes('apple')) { return 'color/apple'; } else if (platform.includes('android')) { diff --git a/src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step3.svelte b/src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step3.svelte index 0be05d43c5..8b2357c64e 100644 --- a/src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step3.svelte +++ b/src/routes/(console)/project-[project]/overview/platforms/wizard/react-native/step3.svelte @@ -9,11 +9,11 @@ const { endpoint, project } = sdk.forProject.client.config; const code = `import { Client, Account, ID } from 'react-native-appwrite'; - const client = new Client(); - const client - .setEndpoint('${endpoint}') - .setProject('${project}') - .setPlatform('${$createPlatform.key}');`; +const client = new Client(); +const client + .setEndpoint('${endpoint}') + .setProject('${project}') + .setPlatform('${$createPlatform.key}');`; let showAlert = true;