docs: update core components

sendbird · Oct 7, 2022 · 040dbb4 · 040dbb4
1 parent f3a94e2
commit 040dbb4
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 78 deletions.
diff --git a/docs-validation/3_core-components/Hooks.tsx b/docs-validation/3_core-components/Hooks.tsx
@@ -2,126 +2,162 @@
  * useSendbirdChat
  * {@link https://sendbird.com/docs/uikit/v3/react-native/core-components/hooks#-3-usesendbirdchat-}
  * */
-// TODO: import useSendbirdChat, wrap with component
-const { sdk, currentUser, updateCurrentUserInfo } = useSendbirdChat();
+import { useSendbirdChat } from '@sendbird/uikit-react-native';
 
-const updatedUser = await updateCurrentUserInfo('NICKNAME', 'PROFILE_URL');
+const Component = () => {
+  const { sdk, currentUser, updateCurrentUserInfo } = useSendbirdChat();
+
+  const onPress = async () => {
+    const updatedUser = await updateCurrentUserInfo('NICKNAME', 'PROFILE_URL');
+  }
+}
 /** ------------------ **/
 
 /**
  * useConnection
  * {@link https://sendbird.com/docs/uikit/v3/react-native/core-components/hooks#-3-useconnection-}
  * */
-// TODO: import useConnection, wrap with component
-const { connect, disconnect } = useConnection();
+import { useConnection, SendbirdUIKitContainer } from '@sendbird/uikit-react-native';
+
+const Component2 = () => {
+  const { connect, disconnect } = useConnection();
 
-connect('USER_ID', { nickname: 'NICKNAME', accessToken: 'ACCESS_TOKEN' });
-disconnect();
+  const onPress = async () => {
+    await connect('USER_ID', { nickname: 'NICKNAME', accessToken: 'ACCESS_TOKEN' });
+    await disconnect();
+  }
+}
 
 // ------------
 
-// TODO: import SendbirdUIKitContainer, wrap with component
-<SendbirdUIKitContainer chatOptions={{ enableAutoPushTokenRegistration: false }} />;
+const App = () => {
+  // @ts-ignore
+  return <SendbirdUIKitContainer chatOptions={{ enableAutoPushTokenRegistration: false }} />;
+}
 /** ------------------ **/
 
 /**
  * useUIKitTheme
  * {@link https://sendbird.com/docs/uikit/v3/react-native/core-components/hooks#-3-useuikittheme-}
  * */
-// TODO: import useUIKitTheme, wrap with component
-const { colors, _palette, _colorScheme, _typography, select } = useUIKitTheme();
+import { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 
-const backgroundColor = select({ dark: 'black', light: 'white' });
-const textColor = colors.text;
+const Component3 = () => {
+  const { colors, palette, colorScheme, typography, select } = useUIKitTheme();
+
+  const backgroundColor = select({ dark: 'black', light: 'white' });
+  const textColor = colors.text;
+}
 /** ------------------ **/
 
 /**
  * usePlatformService
  * {@link https://sendbird.com/docs/uikit/v3/react-native/core-components/hooks#-3-useplatformservice-}
  * */
-// TODO: import usePlatformService, Alert, wrap with component
-const { fileService, notificationService, clipboardService } = usePlatformService();
-
-const photo = await fileService.openCamera({
-  mediaType: 'photo',
-  onOpenFailure: () => Alert.alert("Couldn't open camera"),
-});
+import { usePlatformService } from '@sendbird/uikit-react-native';
+
+const Component4 = () => {
+  const { fileService, notificationService, clipboardService } = usePlatformService();
+
+  const onPress = async () => {
+    const photo = await fileService.openCamera({
+      mediaType: 'photo',
+      onOpenFailure: () => console.log("Couldn't open camera"),
+    });
+  }
+}
 /** ------------------ **/
 
 /**
  * useLocalization
  * {@link https://sendbird.com/docs/uikit/v3/react-native/core-components/hooks#-3-uselocalization-}
  * */
-// TODO: import useLocalization
-const { STRINGS } = useLocalization();
+import { useLocalization } from '@sendbird/uikit-react-native';
+
+const Component5 = () => {
+  const { STRINGS } = useLocalization();
+}
 /** ------------------ **/
 
 /**
  * useToast
  * {@link https://sendbird.com/docs/uikit/v3/react-native/core-components/hooks#-3-usetoast-}
  * */
-// TODO: import useToast
-const toast = useToast();
+import { useToast } from '@sendbird/uikit-react-native-foundation';
 
-toast.show('Show message', 'success');
+const Component6 = () => {
+  const toast = useToast();
+  toast.show('Show message', 'success');
+}
 /** ------------------ **/
 
 /**
  * usePrompt
  * {@link https://sendbird.com/docs/uikit/v3/react-native/core-components/hooks#-3-useprompt-}
  * */
-// TODO: import usePrompt
-const { openPrompt } = usePrompt();
-
-openPrompt({
-  title: 'Prompt',
-  submitLabel: 'Submit',
-  onSubmit: (text) => console.log(text),
-});
+import { usePrompt } from '@sendbird/uikit-react-native-foundation';
+
+const Component7 = () => {
+  const { openPrompt } = usePrompt();
+  openPrompt({
+    title: 'Prompt',
+    submitLabel: 'Submit',
+    onSubmit: (text) => console.log(text),
+  });
+}
 /** ------------------ **/
 
 /**
  * useBottomSheet
  * {@link https://sendbird.com/docs/uikit/v3/react-native/core-components/hooks#-3-usebottomsheet-}
  * */
-// TODO: import useBottomSheet
-const { openSheet } = useBottomSheet();
-
-openSheet({
-  sheetItems: [
-    { title: 'Camera', icon: 'camera', onPress: () => alert({ title: 'Camera selected' }) },
-    { title: 'Photo', icon: 'photo', onPress: () => alert({ title: 'Photo selected' }) },
-    { title: 'Document', icon: 'file-document', onPress: () => alert({ title: 'Document selected' }) },
-  ],
-});
+import { useBottomSheet } from '@sendbird/uikit-react-native-foundation';
+
+const Component8 = () => {
+  const { openSheet } = useBottomSheet();
+
+  openSheet({
+    sheetItems: [
+      { title: 'Camera', icon: 'camera', onPress: () => console.log('Camera selected') },
+      { title: 'Photo', icon: 'photo', onPress: () => console.log('Photo selected') },
+      { title: 'Document', icon: 'file-document', onPress: () => console.log('Document selected') },
+    ],
+  });
+}
 /** ------------------ **/
 
 /**
  * useActionMenu
  * {@link https://sendbird.com/docs/uikit/v3/react-native/core-components/hooks#-3-useactionmenu-}
  * */
-// TODO: import useActionMenu
-const { openMenu } = useActionMenu();
-
-openMenu({
-  title: 'Action Menu',
-  menuItems: [
-    { title: 'Title', onPress: () => null },
-    { title: 'Close', onPress: () => null },
-  ],
-});
+import { useActionMenu } from '@sendbird/uikit-react-native-foundation';
+
+const Component9 = () => {
+  const { openMenu } = useActionMenu();
+
+  openMenu({
+    title: 'Action Menu',
+    menuItems: [
+      { title: 'Title', onPress: () => null },
+      { title: 'Close', onPress: () => null },
+    ],
+  });
+}
 /** ------------------ **/
 
 /**
  * useAlert
  * {@link https://sendbird.com/docs/uikit/v3/react-native/core-components/hooks#-3-usealert-}
  * */
-// TODO: import useAlert
-const { alert } = useAlert();
-
-alert({
-  title: 'Title',
-  message: 'Message',
-  buttons: [{ text: 'Edit' }, { text: 'Send' }, { text: 'Cancel', style: 'destructive' }],
-});
+import { useAlert } from '@sendbird/uikit-react-native-foundation';
+
+const Component10 = () => {
+  const { alert } = useAlert();
+
+  alert({
+    title: 'Title',
+    message: 'Message',
+    buttons: [{ text: 'Edit' }, { text: 'Send' }, { text: 'Cancel', style: 'destructive' }],
+  });
+}
 /** ------------------ **/
diff --git a/docs-validation/3_core-components/Provider/PlatformServiceProvider.tsx b/docs-validation/3_core-components/Provider/PlatformServiceProvider.tsx
@@ -1,10 +1,7 @@
-import type { FileServiceInterface } from '@sendbird/uikit-react-native';
-import { usePlatformService } from '@sendbird/uikit-react-native';
-import type SBUError from '@sendbird/uikit-react-native/src/libs/SBUError';
 import type { MediaServiceInterface } from '@sendbird/uikit-react-native/src/platform/types';
 
 const isMediaFile = (_: string) => 0;
-const documentPickerModule = {
+const MyDocumentPickerModule = {
   getDocumentAsync: async (_: object) => ({ type: '', mimeType: '', uri: '', size: 0, name: '' }),
 };
 const MyMediaLibraryModule = { requestPermission: async () => 0, saveToLibrary: async (_: string) => 0 };
@@ -18,7 +15,7 @@ type GetFileRes = null | FileCompat;
  * FileServiceInterface
  * {@link https://sendbird.com/docs/uikit/v3/react-native/core-components/provider/platformserviceprovider#2-fileserviceinterface}
  * */
-async function _fileServiceInterface(service: FileServiceInterface) {
+async function fileServiceInterface(service: FileServiceInterface) {
   const mediaType = '' as 'photo' | 'video' | 'all' | undefined;
   const onOpenFailure = (() => 0) as (error?: SBUError, originError?: unknown) => void;
   const cameraType = '' as 'front' | 'back' | undefined;
@@ -36,7 +33,7 @@ async function _fileServiceInterface(service: FileServiceInterface) {
  * MediaServiceInterface
  * {@link }
  * */
-async function _mediaServiceInterface(service: MediaServiceInterface) {
+async function mediaServiceInterface(service: MediaServiceInterface) {
   const jsx: JSX.Element = service.VideoComponent({
     source: 0 as number | { uri: string },
     resizeMode: '' as 'cover' | 'stretch' | 'contain' | undefined,
@@ -54,22 +51,36 @@ async function _mediaServiceInterface(service: MediaServiceInterface) {
  * Usage
  * {@link https://sendbird.com/docs/uikit/v3/react-native/core-components/provider/platformserviceprovider#2-usage}
  * */
-// TODO: import usePlatformService
-const { clipboardService } = usePlatformService();
+import { usePlatformService } from '@sendbird/uikit-react-native';
+
+const Component = () => {
+  const { clipboardService } = usePlatformService();
+};
 /** ------------------ **/
 
 /**
  * Direct implementation
  * {@link https://sendbird.com/docs/uikit/v3/react-native/core-components/provider/platformserviceprovider#2-direct-implementation}
  * */
-// TODO: import OpenCameraOptions, OpenMediaLibraryOptions, OpenDocumentOptions, SaveOptions, FilePickerResponse
+import {
+  FilePickerResponse,
+  FileServiceInterface,
+  OpenCameraOptions,
+  OpenDocumentOptions,
+  OpenMediaLibraryOptions,
+  SaveOptions,
+  SBUError,
+} from '@sendbird/uikit-react-native';
+
 class MyFileService implements FileServiceInterface {
+  // @ts-ignore
   async openCamera(_options?: OpenCameraOptions): Promise<FilePickerResponse> {
     // Check camera permission.
     // Request media file with camera.
     // Returns media file info.
   }
 
+  // @ts-ignore
   async openMediaLibrary(_options: OpenMediaLibraryOptions): Promise<null | FilePickerResponse[]> {
     // Check media library permission.
     // Request media file from media library.
@@ -78,15 +89,14 @@ class MyFileService implements FileServiceInterface {
 
   async openDocument(options?: OpenDocumentOptions): Promise<FilePickerResponse> {
     try {
-      const response = await documentPickerModule.getDocumentAsync({
+      const response = await MyDocumentPickerModule.getDocumentAsync({
         type: '*/*',
       });
       if (response.type === 'cancel') return null;
       const { mimeType, uri, size, name } = response;
       return { uri, size, name, type: mimeType };
     } catch {
-      // TODO: Provide SBUError.UNKNOWN as params
-      options?.onOpenFailure?.();
+      options?.onOpenFailure?.(SBUError.UNKNOWN);
       return null;
     }
   }

diff --git a/docs-validation/3_core-components/Provider/SendbirdChatProvider.tsx b/docs-validation/3_core-components/Provider/SendbirdChatProvider.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 
-import { Button, Text } from '@sendbird/uikit-react-native-foundation';
 
 /**
  * SendbirdChatProvider
  * {@link https://sendbird.com/docs/uikit/v3/react-native/core-components/provider/sendbirdchatprovider#1-sendbirdchatprovider}
  * */
-// TODO: import useSendbirdChat, useConnection, React
-// TODO: remove sdk
+import { useConnection, useSendbirdChat } from '@sendbird/uikit-react-native';
+import { Button, Text } from '@sendbird/uikit-react-native-foundation';
+
 const Component = () => {
-  const { sdk, currentUser, updateCurrentUserInfo } = useSendbirdChat();
+  const { currentUser, updateCurrentUserInfo } = useSendbirdChat();
   const { connect, disconnect } = useConnection();
 
   if (!currentUser) {

diff --git a/docs-validation/3_core-components/SendbirdUIKitContainer.tsx b/docs-validation/3_core-components/SendbirdUIKitContainer.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 
-import { SendbirdUIKitContainer } from '@sendbird/uikit-react-native';
 
 /**
  * SendbirdUIKitContainer
  * {@link https://sendbird.com/docs/uikit/v3/react-native/core-components/sendbirduikitcontainer#1-sendbirduikitcontainer}
  * */
+import { SendbirdUIKitContainer } from '@sendbird/uikit-react-native';
+
 const App = () => {
   // @ts-ignore
   return <SendbirdUIKitContainer>{/* ... */}</SendbirdUIKitContainer>;

diff --git a/packages/uikit-react-native/src/index.ts b/packages/uikit-react-native/src/index.ts
@@ -101,6 +101,7 @@ export {
   SendbirdUIKit,
   SendbirdUIKitContainerProps,
 } from './containers/SendbirdUIKitContainer';
+export { default as SBUError } from './libs/SBUError';
 
 export * from './types';