@sendbird/uikit-react-native 1.0.0-rc.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Sendbird
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,410 @@
+# @sendbird/uikit-react-native
+
+[![Platform React-Native](https://img.shields.io/badge/Platform-React--Native-orange.svg)](https://reactnative.dev/)
+[![Language TypeScript](https://img.shields.io/badge/Language-TypeScript-orange.svg)](https://www.typescriptlang.org/)
+
+> React-Native based UI kit based on sendbird javascript SDK
+
+## Before getting started
+
+This section shows the prerequisites you need to check to use Sendbird UIKit for React-Native.
+
+### Requirements
+
+- Nodejs 14 or newer
+- Watchman
+- JDK 11 or newer
+- XCode
+- Android Studio
+
+More details, please see https://reactnative.dev/docs/environment-setup
+
+<br/>
+
+## Getting started
+
+This section gives you information you need to get started with Sendbird UIKit for React-Native.
+
+### Try the sample app
+
+Our [sample app](/sample) has all the core features of Sendbird UIKit for React-Native.
+Download the app from our GitHub repository to get an idea of what you can build with the actual UIKit before building your own project.
+
+### Create a project
+
+You can get started by creating a project. (highly recommended to use typescript)
+
+```sh
+npx react-native init ChatApp --template=react-native-template-typescript
+```
+
+### Install UIKit for React-Native
+
+UIKit for React-Native can be installed through either `yarn` or `npm`
+
+**Install dependencies**
+
+```sh
+npm i @sendbird/uikit-react-native \
+      sendbird \
+      date-fns \
+      react-native-safe-area-context \
+      @react-native-community/netinfo
+```
+
+**Linking native modules**
+
+```sh
+npx pod-install
+```
+
+### Getting permissions
+
+Client apps must acquire permission from users to get access to their media library and save files to their mobile storage.
+Once the permission is granted, users can send images and videos to other users and save media files.
+
+**Android**
+
+Add the following permissions to your `android/app/src/main/AndroidManifest.xml` file.
+
+```xml
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+          package="com.your.app">
+
+    <uses-permission android:name="android.permission.CAMERA" />
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32" />
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="28" />
+    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
+    <uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />
+    <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
+    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
+
+</manifest>
+```
+
+**iOS**
+
+Add the following permission usage descriptions to your `info.plist` file.
+
+| Key                                                 | Type   | Value                                                           |
+| --------------------------------------------------- | ------ | --------------------------------------------------------------- |
+| Privacy - Camera Usage Description                  | string | $(PRODUCT_NAME) would like to use your camera                   |
+| Privacy - Media Library Usage Description           | string | $(PRODUCT_NAME) would like access to your photo library         |
+| Privacy - Photo Library Usage Description           | string | $(PRODUCT_NAME) would like access to your photo library         |
+| Privacy - Photo Library Additions Usage Description | string | $(PRODUCT_NAME) would like to save photos to your photo library |
+
+> **NOTE**: If you use [react-native-permissions](https://github.com/zoontek/react-native-permissions#ios), you must update `Podfile` and run `pod install`
+>
+> ```ruby
+> permissions_path = '../node_modules/react-native-permissions/ios'
+> pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
+> pod 'Permission-PhotoLibrary', :path => "#{permissions_path}/PhotoLibrary"
+> pod 'Permission-MediaLibrary', :path => "#{permissions_path}/MediaLibrary"
+> pod 'Permission-PhotoLibraryAddOnly', :path => "#{permissions_path}/PhotoLibraryAddOnly"
+> ```
+
+<br/>
+
+## Implementation guide
+
+### Install a native modules
+
+In order to use the APIs and features of the native module in the UIKit for React Native, you need to implement the platform service interfaces that Sendbird provides.
+After implementing all the interfaces, you can set them as props of `SendbirdUIKitContainer` to use the native module features across Sendbird UIKit for React-Native.
+
+```tsx
+const App = () => {
+  return (
+    <SendbirdUIKitContainer
+      appId={'APP_ID'}
+      platformServices={{
+        file: FileService,
+        notification: NotificationService,
+        clipboard: ClipboardService,
+      }}
+    >
+      {/* ... */}
+    </SendbirdUIKitContainer>
+  );
+};
+```
+
+In order to implement the interfaces to your React Native app more easily, we provide various helper functions for each interface.
+
+> **NOTE**: Helper function is not required! You can implement it with native modules you're using.
+> More details about PlatformService interfaces, please see [here](https://sendbird.com/docs/uikit/v3/react-native/core-components/provider/platformserviceprovider)
+
+**Using React Native CLI**
+
+You can use `createNativeClipboardService`, `createNativeNotificationService` and `createNativeFileService` helper functions with below native modules.
+
+```sh
+npm install react-native-permissions \
+            react-native-image-picker \
+            react-native-document-picker \
+            @react-native-community/cameraroll \
+            react-native-file-access \
+            @react-native-clipboard/clipboard \
+            @react-native-firebase/app \
+            @react-native-firebase/messaging \
+
+npx pod-install
+```
+
+```ts
+import Clipboard from '@react-native-clipboard/clipboard';
+import CameraRoll from '@react-native-community/cameraroll';
+import RNFBMessaging from '@react-native-firebase/messaging';
+import * as DocumentPicker from 'react-native-document-picker';
+import * as FileAccess from 'react-native-file-access';
+import * as ImagePicker from 'react-native-image-picker';
+import * as Permissions from 'react-native-permissions';
+
+const ClipboardService = createNativeClipboardService(Clipboard);
+const NotificationService = createNativeNotificationService({
+  messagingModule: RNFBMessaging,
+  permissionModule: Permissions,
+});
+const FileService = createNativeFileService({
+  fsModule: FileAccess,
+  permissionModule: Permissions,
+  imagePickerModule: ImagePicker,
+  mediaLibraryModule: CameraRoll,
+  documentPickerModule: DocumentPicker,
+});
+```
+
+**Using Expo CLI**
+
+You can use `createExpoClipboardService`, `createExpoNotificationService` and `createExpoFileService` helper functions with below expo modules.
+
+```sh
+expo install expo-image-picker \
+             expo-document-picker \
+             expo-media-library \
+             expo-file-system \
+             expo-clipboard \
+             expo-notifications
+```
+
+```ts
+import ExpoClipboard from 'expo-clipboard';
+import ExpoDocumentPicker from 'expo-document-picker';
+import ExpoFS from 'expo-file-system';
+import ExpoImagePicker from 'expo-image-picker';
+import ExpoMediaLibrary from 'expo-media-library';
+import ExpoNotifications from 'expo-notifications';
+
+const NotificationService = createExpoNotificationService(ExpoNotifications);
+const ClipboardService = createExpoClipboardService(ExpoClipboard);
+const FileService = createExpoFileService({
+  fsModule: ExpoFS,
+  imagePickerModule: ExpoImagePicker,
+  mediaLibraryModule: ExpoMediaLibrary,
+  documentPickerModule: ExpoDocumentPicker,
+});
+```
+
+### Local caching (optional)
+
+You can implement Local caching easily.
+
+```shell
+npm i @react-native-async-storage/async-storage
+npx pod-isntall
+```
+
+```tsx
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+import { SendbirdUIKitContainer } from '@sendbird/uikit-react-native';
+
+const App = () => {
+  return <SendbirdUIKitContainer chatOptions={{ localCacheStorage: AsyncStorage }}>{/* ... */}</SendbirdUIKitContainer>;
+};
+```
+
+Or you can use storage you are using instead of `AsyncStorage` (e.g. [`react-native-mmkv`](https://github.com/mrousavy/react-native-mmkv))
+
+```tsx
+import { MMKV } from 'react-native-mmkv';
+
+import { LocalCacheStorage, SendbirdUIKitContainer } from '@sendbird/uikit-react-native';
+
+const mmkvStorage = new MMKV();
+const localCacheStorage: LocalCacheStorage = {
+  async getAllKeys() {
+    return mmkvStorage.getAllKeys();
+  },
+  async setItem(key: string, value: string) {
+    return mmkvStorage.set(key, value);
+  },
+  async getItem(key: string) {
+    return mmkvStorage.getString(key) ?? null;
+  },
+  async removeItem(key: string) {
+    return mmkvStorage.delete(key);
+  },
+};
+
+const App = () => {
+  return <SendbirdUIKitContainer chatOptions={{ localCacheStorage }}>{/* ... */}</SendbirdUIKitContainer>;
+};
+```
+
+### Integration with navigation library
+
+Now you can create a screen and integrate it with a navigation library like [`react-navigation`](https://reactnavigation.org/).
+See more details on [here](https://st.sendbird.com/docs/uikit/v3/react-native/introduction/screen-navigation)
+
+The example below shows how to integrate using `react-navigation`.
+
+**Create a fragments and screens**
+
+```tsx
+import { useNavigation, useRoute } from '@react-navigation/native';
+
+import {
+  createGroupChannelCreateFragment,
+  createGroupChannelFragment,
+  createGroupChannelListFragment,
+} from '@sendbird/uikit-react-native';
+
+const GroupChannelListFragment = createGroupChannelListFragment();
+const GroupChannelCreateFragment = createGroupChannelCreateFragment();
+const GroupChannelFragment = createGroupChannelFragment();
+
+const GroupChannelListScreen = () => {
+  const navigation = useNavigation<any>();
+  return (
+    <GroupChannelListFragment
+      onPressCreateChannel={(channelType) => {
+        // Navigate to GroupChannelCreate key function.
+        navigation.navigate('GroupChannelCreate', { channelType });
+      }}
+      onPressChannel={(channel) => {
+        // Navigate to GroupChannel key function.
+        navigation.navigate('GroupChannel', {
+          serializedChannel: channel.serialize(),
+        });
+      }}
+    />
+  );
+};
+
+const GroupChannelCreateScreen = () => {
+  const navigation = useNavigation<any>();
+
+  return (
+    <GroupChannelCreateFragment
+      onCreateChannel={async (channel) => {
+        // Navigate to GroupChannel key function.
+        navigation.replace('GroupChannel', {
+          serializedChannel: channel.serialize(),
+        });
+      }}
+      onPressHeaderLeft={() => {
+        // Go back to the previous screen.
+        navigation.goBack();
+      }}
+    />
+  );
+};
+
+const GroupChannelScreen = () => {
+  const navigation = useNavigation<any>();
+  const { params } = useRoute<any>();
+
+  const { sdk } = useSendbirdChat();
+  const channel = sdk.GroupChannel.buildFromSerializedData(params.serializedChannel);
+
+  return (
+    <GroupChannelFragment
+      channel={channel}
+      onChannelDeleted={() => {
+        // Navigate to GroupChannelList key function.
+        navigation.navigate('GroupChannelList');
+      }}
+      onPressHeaderLeft={() => {
+        // Go back to the previous screen.
+        navigation.goBack();
+      }}
+      onPressHeaderRight={() => {
+        // Navigate to GroupChannelSettings key function.
+        navigation.navigate('GroupChannelSettings', {
+          serializedChannel: params.serializedChannel,
+        });
+      }}
+    />
+  );
+};
+```
+
+**Register screens to navigator**
+
+```tsx
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+import { SendbirdUIKitContainer, useConnection, useSendbirdChat } from '@sendbird/uikit-react-native';
+
+const RootStack = createNativeStackNavigator();
+const SignInScreen = () => {
+  const { connect } = useConnection();
+
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Pressable
+        style={{
+          width: 120,
+          height: 30,
+          backgroundColor: '#742DDD',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+        onPress={() => connect('USER_ID', { nickname: 'NICK_NAME' })}
+      >
+        <Text>{'Sign in'}</Text>
+      </Pressable>
+    </View>
+  );
+};
+
+const Navigation = () => {
+  const { currentUser } = useSendbirdChat();
+
+  return (
+    <NavigationContainer>
+      <RootStack.Navigator screenOptions={{ headerShown: false }}>
+        {!currentUser ? (
+          <RootStack.Screen name={'SignIn'} component={SignInScreen} />
+        ) : (
+          <>
+            <RootStack.Screen name={'GroupChannelList'} component={GroupChannelListScreen} />
+            <RootStack.Screen name={'GroupChannelCreate'} component={GroupChannelCreateScreen} />
+            <RootStack.Screen name={'GroupChannel'} component={GroupChannelScreen} />
+          </>
+        )}
+      </RootStack.Navigator>
+    </NavigationContainer>
+  );
+};
+
+const App = () => {
+  return (
+    <SendbirdUIKitContainer
+      appId={APP_ID}
+      platformServices={{
+        file: FileService,
+        notification: NotificationService,
+        clipboard: ClipboardService,
+      }}
+    >
+      <Navigation />
+    </SendbirdUIKitContainer>
+  );
+};
+```
+
+> You can use sendbird sdk using `useSendbirdChat()` hook, and you can connect or disconnect using `useConnection()` hook.
+> for more details about hooks, please refer to our [docs](https://sendbird.com/docs/uikit/v3/react-native/core-components/hooks)

package/lib/commonjs/InternalErrorBoundary.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _TypedPlaceholder = _interopRequireDefault(require("./components/TypedPlaceholder"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const DefaultErrorBoundaryComponent = props => {
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_TypedPlaceholder.default, {
+    type: 'error-wrong',
+    onPressRetry: props.reset
+  }));
+};
+
+class InternalErrorBoundary extends _react.default.PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "state", {
+      error: null,
+      errorInfo: null
+    });
+
+    _defineProperty(this, "componentDidCatch", (error, errorInfo) => {
+      var _this$props$onError, _this$props;
+
+      this.setState({
+        error,
+        errorInfo
+      });
+      (_this$props$onError = (_this$props = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props, {
+        error,
+        errorInfo,
+        reset: this.reset
+      });
+    });
+
+    _defineProperty(this, "reset", () => {
+      this.setState({
+        error: null,
+        errorInfo: null
+      });
+    });
+
+    _defineProperty(this, "render", () => {
+      if (this.state.error && this.state.errorInfo) {
+        var _this$props$ErrorInfo, _this$props2;
+
+        return ((_this$props$ErrorInfo = (_this$props2 = this.props).ErrorInfoComponent) === null || _this$props$ErrorInfo === void 0 ? void 0 : _this$props$ErrorInfo.call(_this$props2, {
+          error: this.state.error,
+          errorInfo: this.state.errorInfo,
+          reset: this.reset
+        })) ?? null;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.props.children);
+    });
+  }
+
+}
+
+_defineProperty(InternalErrorBoundary, "defaultProps", {
+  ErrorInfoComponent: DefaultErrorBoundaryComponent
+});
+
+var _default = InternalErrorBoundary;
+exports.default = _default;
+//# sourceMappingURL=InternalErrorBoundary.js.map

package/lib/commonjs/InternalErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DefaultErrorBoundaryComponent","props","flex","justifyContent","alignItems","reset","InternalErrorBoundary","React","PureComponent","error","errorInfo","setState","onError","state","ErrorInfoComponent","children"],"sources":["InternalErrorBoundary.tsx"],"sourcesContent":["import React, { ErrorInfo } from 'react';\nimport { View } from 'react-native';\n\nimport TypedPlaceholder from './components/TypedPlaceholder';\nimport type { ErrorBoundaryProps } from './types';\n\nconst DefaultErrorBoundaryComponent = (props: ErrorBoundaryProps) => {\n  return (\n    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n      <TypedPlaceholder type={'error-wrong'} onPressRetry={props.reset} />\n    </View>\n  );\n};\n\nclass InternalErrorBoundary extends React.PureComponent<{\n  onError?: (props: ErrorBoundaryProps) => void;\n  ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;\n}> {\n  static defaultProps = {\n    ErrorInfoComponent: DefaultErrorBoundaryComponent,\n  };\n\n  state: { error: Error | null; errorInfo: ErrorInfo | null } = {\n    error: null,\n    errorInfo: null,\n  };\n\n  componentDidCatch = (error: Error, errorInfo: ErrorInfo) => {\n    this.setState({ error, errorInfo });\n    this.props.onError?.({ error, errorInfo, reset: this.reset });\n  };\n\n  reset = () => {\n    this.setState({ error: null, errorInfo: null });\n  };\n\n  render = () => {\n    if (this.state.error && this.state.errorInfo) {\n      return (\n        this.props.ErrorInfoComponent?.({\n          error: this.state.error,\n          errorInfo: this.state.errorInfo,\n          reset: this.reset,\n        }) ?? null\n      );\n    }\n\n    return <>{this.props.children}</>;\n  };\n}\n\nexport default InternalErrorBoundary;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;;AAGA,MAAMA,6BAA6B,GAAIC,KAAD,IAA+B;EACnE,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAE;MAAEC,IAAI,EAAE,CAAR;MAAWC,cAAc,EAAE,QAA3B;MAAqCC,UAAU,EAAE;IAAjD;EAAb,gBACE,6BAAC,yBAAD;IAAkB,IAAI,EAAE,aAAxB;IAAuC,YAAY,EAAEH,KAAK,CAACI;EAA3D,EADF,CADF;AAKD,CAND;;AAQA,MAAMC,qBAAN,SAAoCC,cAAA,CAAMC,aAA1C,CAGG;EAAA;IAAA;;IAAA,+BAK6D;MAC5DC,KAAK,EAAE,IADqD;MAE5DC,SAAS,EAAE;IAFiD,CAL7D;;IAAA,2CAUmB,CAACD,KAAD,EAAeC,SAAf,KAAwC;MAAA;;MAC1D,KAAKC,QAAL,CAAc;QAAEF,KAAF;QAASC;MAAT,CAAd;MACA,2CAAKT,KAAL,EAAWW,OAAX,8FAAqB;QAAEH,KAAF;QAASC,SAAT;QAAoBL,KAAK,EAAE,KAAKA;MAAhC,CAArB;IACD,CAbA;;IAAA,+BAeO,MAAM;MACZ,KAAKM,QAAL,CAAc;QAAEF,KAAK,EAAE,IAAT;QAAeC,SAAS,EAAE;MAA1B,CAAd;IACD,CAjBA;;IAAA,gCAmBQ,MAAM;MACb,IAAI,KAAKG,KAAL,CAAWJ,KAAX,IAAoB,KAAKI,KAAL,CAAWH,SAAnC,EAA8C;QAAA;;QAC5C,OACE,+CAAKT,KAAL,EAAWa,kBAAX,mGAAgC;UAC9BL,KAAK,EAAE,KAAKI,KAAL,CAAWJ,KADY;UAE9BC,SAAS,EAAE,KAAKG,KAAL,CAAWH,SAFQ;UAG9BL,KAAK,EAAE,KAAKA;QAHkB,CAAhC,MAIM,IALR;MAOD;;MAED,oBAAO,4DAAG,KAAKJ,KAAL,CAAWc,QAAd,CAAP;IACD,CA/BA;EAAA;;AAAA;;gBAHGT,qB,kBAIkB;EACpBQ,kBAAkB,EAAEd;AADA,C;;eAiCTM,qB"}

package/lib/commonjs/InternalLocalCacheStorage.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+class InternalLocalCacheStorage {
+  constructor(storage) {
+    this.storage = storage;
+  }
+
+  getAllKeys() {
+    return this.storage.getAllKeys();
+  }
+
+  getItem(key) {
+    return this.storage.getItem(key);
+  }
+
+  removeItem(key) {
+    return this.storage.removeItem(key);
+  }
+
+  setItem(key, value) {
+    return this.storage.setItem(key, value);
+  }
+
+  async multiGet(keys) {
+    if (this.storage.multiGet) {
+      return this.storage.multiGet(keys);
+    } else {
+      return Promise.all(keys.map(async key => [key, await this.getItem(key)]));
+    }
+  }
+
+  async multiRemove(keys) {
+    if (this.storage.multiRemove) {
+      await this.storage.multiRemove(keys);
+    } else {
+      await Promise.all(keys.map(async key => this.removeItem(key)));
+    }
+  }
+
+  async multiSet(keyValuePairs) {
+    if (this.storage.multiSet) {
+      await this.storage.multiSet(keyValuePairs);
+    } else {
+      await Promise.all(keyValuePairs.map(_ref => {
+        let [key, value] = _ref;
+        return this.storage.setItem(key, value);
+      }));
+    }
+  }
+
+}
+
+exports.default = InternalLocalCacheStorage;
+//# sourceMappingURL=InternalLocalCacheStorage.js.map

package/lib/commonjs/InternalLocalCacheStorage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["InternalLocalCacheStorage","constructor","storage","getAllKeys","getItem","key","removeItem","setItem","value","multiGet","keys","Promise","all","map","multiRemove","multiSet","keyValuePairs"],"sources":["InternalLocalCacheStorage.ts"],"sourcesContent":["import type { KeyValuePairGet, KeyValuePairSet, LocalCacheStorage } from './types';\n\nexport default class InternalLocalCacheStorage implements LocalCacheStorage {\n  constructor(private storage: LocalCacheStorage) {}\n\n  getAllKeys() {\n    return this.storage.getAllKeys();\n  }\n\n  getItem(key: string) {\n    return this.storage.getItem(key);\n  }\n\n  removeItem(key: string) {\n    return this.storage.removeItem(key);\n  }\n\n  setItem(key: string, value: string) {\n    return this.storage.setItem(key, value);\n  }\n\n  async multiGet(keys: string[]) {\n    if (this.storage.multiGet) {\n      return this.storage.multiGet(keys);\n    } else {\n      return Promise.all(keys.map(async (key) => [key, await this.getItem(key)] as KeyValuePairGet));\n    }\n  }\n\n  async multiRemove(keys: string[]) {\n    if (this.storage.multiRemove) {\n      await this.storage.multiRemove(keys);\n    } else {\n      await Promise.all(keys.map(async (key) => this.removeItem(key)));\n    }\n  }\n\n  async multiSet(keyValuePairs: Array<KeyValuePairSet>) {\n    if (this.storage.multiSet) {\n      await this.storage.multiSet(keyValuePairs);\n    } else {\n      await Promise.all(keyValuePairs.map(([key, value]) => this.storage.setItem(key, value)));\n    }\n  }\n}\n"],"mappings":";;;;;;;AAEe,MAAMA,yBAAN,CAA6D;EAC1EC,WAAW,CAASC,OAAT,EAAqC;IAAA,KAA5BA,OAA4B,GAA5BA,OAA4B;EAAE;;EAElDC,UAAU,GAAG;IACX,OAAO,KAAKD,OAAL,CAAaC,UAAb,EAAP;EACD;;EAEDC,OAAO,CAACC,GAAD,EAAc;IACnB,OAAO,KAAKH,OAAL,CAAaE,OAAb,CAAqBC,GAArB,CAAP;EACD;;EAEDC,UAAU,CAACD,GAAD,EAAc;IACtB,OAAO,KAAKH,OAAL,CAAaI,UAAb,CAAwBD,GAAxB,CAAP;EACD;;EAEDE,OAAO,CAACF,GAAD,EAAcG,KAAd,EAA6B;IAClC,OAAO,KAAKN,OAAL,CAAaK,OAAb,CAAqBF,GAArB,EAA0BG,KAA1B,CAAP;EACD;;EAEa,MAARC,QAAQ,CAACC,IAAD,EAAiB;IAC7B,IAAI,KAAKR,OAAL,CAAaO,QAAjB,EAA2B;MACzB,OAAO,KAAKP,OAAL,CAAaO,QAAb,CAAsBC,IAAtB,CAAP;IACD,CAFD,MAEO;MACL,OAAOC,OAAO,CAACC,GAAR,CAAYF,IAAI,CAACG,GAAL,CAAS,MAAOR,GAAP,IAAe,CAACA,GAAD,EAAM,MAAM,KAAKD,OAAL,CAAaC,GAAb,CAAZ,CAAxB,CAAZ,CAAP;IACD;EACF;;EAEgB,MAAXS,WAAW,CAACJ,IAAD,EAAiB;IAChC,IAAI,KAAKR,OAAL,CAAaY,WAAjB,EAA8B;MAC5B,MAAM,KAAKZ,OAAL,CAAaY,WAAb,CAAyBJ,IAAzB,CAAN;IACD,CAFD,MAEO;MACL,MAAMC,OAAO,CAACC,GAAR,CAAYF,IAAI,CAACG,GAAL,CAAS,MAAOR,GAAP,IAAe,KAAKC,UAAL,CAAgBD,GAAhB,CAAxB,CAAZ,CAAN;IACD;EACF;;EAEa,MAARU,QAAQ,CAACC,aAAD,EAAwC;IACpD,IAAI,KAAKd,OAAL,CAAaa,QAAjB,EAA2B;MACzB,MAAM,KAAKb,OAAL,CAAaa,QAAb,CAAsBC,aAAtB,CAAN;IACD,CAFD,MAEO;MACL,MAAML,OAAO,CAACC,GAAR,CAAYI,aAAa,CAACH,GAAd,CAAkB;QAAA,IAAC,CAACR,GAAD,EAAMG,KAAN,CAAD;QAAA,OAAkB,KAAKN,OAAL,CAAaK,OAAb,CAAqBF,GAArB,EAA0BG,KAA1B,CAAlB;MAAA,CAAlB,CAAZ,CAAN;IACD;EACF;;AAzCyE"}