refactor: SendbirdProvider Migration (#1260)

Author: HoonBaek

.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Preview } from '@storybook/react';
-import { SendbirdSdkContext } from '../src/lib/SendbirdSdkContext';
+import { SendbirdContext } from '../src/lib/Sendbird/context/SendbirdContext';
 
 import '../src/lib/index.scss';
 import './index.css';
@@ -28,9 +28,9 @@ const preview: Preview = {
   decorators: [
     (Story) => (
       <div className="sendbird-theme--light">
-        <SendbirdSdkContext.Provider value={{} as any}>
+        <SendbirdContext.Provider value={{} as any}>
           {Story()}
-        </SendbirdSdkContext.Provider>
+        </SendbirdContext.Provider>
       </div>
     ),
   ],

apps/testing/src/utils/paramsBuilder.ts

@@ -1,4 +1,4 @@
-import { UIKitOptions } from '../../../../src/lib/types.ts';
+import { UIKitOptions } from '../../../../src/lib/Sendbird/types';
 import { useSearchParams } from 'react-router-dom';
 
 export interface InitialParams {

rollup.module-exports.mjs

@@ -10,10 +10,11 @@ export default {
   App: 'src/modules/App/index.tsx',
 
   // SendbirdProvider
-  SendbirdProvider: 'src/lib/Sendbird.tsx',
+  SendbirdProvider: 'src/lib/Sendbird/index.tsx',
   sendbirdSelectors: 'src/lib/selectors.ts',
-  useSendbirdStateContext: 'src/hooks/useSendbirdStateContext.tsx',
-  withSendbird: 'src/lib/SendbirdSdkContext.tsx',
+  // TODO: Support below legacy exports
+  // useSendbirdStateContext: 'src/hooks/useSendbirdStateContext.tsx',
+  // withSendbird: 'src/lib/SendbirdSdkContext.tsx',
 
   // Voice message
   'VoiceRecorder/context': 'src/hooks/VoiceRecorder/index.tsx',

src/hooks/VoicePlayer/index.tsx

@@ -19,8 +19,8 @@ import {
   VOICE_PLAYER_AUDIO_ID,
   VOICE_PLAYER_ROOT_ID,
 } from '../../utils/consts';
-import useSendbirdStateContext from '../useSendbirdStateContext';
 import { getParsedVoiceAudioFileInfo } from './utils';
+import useSendbird from '../../lib/Sendbird/context/hooks/useSendbird';
 
 // VoicePlayerProvider interface
 export interface VoicePlayerProps {
@@ -64,7 +64,8 @@ export const VoicePlayerProvider = ({
     currentPlayer,
     audioStorage,
   } = voicePlayerStore;
-  const { config } = useSendbirdStateContext();
+  const { state } = useSendbird();
+  const { config } = state;
   const { logger } = config;
 
   const stop = (text = '') => {

src/hooks/VoiceRecorder/index.tsx

@@ -8,9 +8,9 @@ import {
   VOICE_MESSAGE_MIME_TYPE,
   VOICE_RECORDER_AUDIO_BIT_RATE,
 } from '../../utils/consts';
-import useSendbirdStateContext from '../useSendbirdStateContext';
 import { type WebAudioUtils } from './WebAudioUtils';
 import { noop } from '../../utils/utils';
+import useSendbird from '../../lib/Sendbird/context/hooks/useSendbird';
 
 // Input props of VoiceRecorder
 export interface VoiceRecorderProps {
@@ -37,7 +37,8 @@ const Context = createContext<VoiceRecorderContext>({
 
 export const VoiceRecorderProvider = (props: VoiceRecorderProps): React.ReactElement => {
   const { children } = props;
-  const { config } = useSendbirdStateContext();
+  const { state } = useSendbird();
+  const { config } = state;
   const { logger, groupChannel } = config;
   const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);
   const [isRecordable, setIsRecordable] = useState<boolean>(false);

src/hooks/VoiceRecorder/useVoiceRecorder.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { VoiceRecorderEventHandler, useVoiceRecorderContext } from '.';
-import useSendbirdStateContext from '../useSendbirdStateContext';
 import { noop } from '../../utils/utils';
+import useSendbird from '../../lib/Sendbird/context/hooks/useSendbird';
 
 // export interface UseVoiceRecorderProps extends VoiceRecorderEventHandler {
 //   /**
@@ -31,7 +31,8 @@ export const useVoiceRecorder = ({
   onRecordingStarted = noop,
   onRecordingEnded = noop,
 }: VoiceRecorderEventHandler): UseVoiceRecorderContext => {
-  const { config } = useSendbirdStateContext();
+  const { state } = useSendbird();
+  const { config } = state;
   const { voiceRecord } = config;
   const maxRecordingTime = voiceRecord.maxRecordingTime;
   const voiceRecorder = useVoiceRecorderContext();

src/hooks/useSendbirdStateContext.tsx

@@ -15,11 +15,11 @@ export { default as MessageSearch } from './modules/MessageSearch';
 
 // HOC for using ui-kit state
 // withBird(MyCustomComponent) will give the sendbird state as props to MyCustomComponent
-export { default as withSendBird } from './lib/SendbirdSdkContext';
+export { withSendBird } from './lib/Sendbird/index';
+export { useSendbirdStateContext } from './lib/Sendbird/context/hooks/useSendbirdStateContext';
 export { default as sendbirdSelectors } from './lib/selectors';
 // for legacy parity, slowly remove
 export { default as sendBirdSelectors } from './lib/selectors';
-export { default as useSendbirdStateContext } from './hooks/useSendbirdStateContext';
 
 // Public enum included in AppProps
 export { TypingIndicatorType } from './types';

src/index.ts

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import type { Logger } from './SendbirdState';
+import type { Logger } from './Sendbird/types';
 
 const DEFAULT_MOBILE = false;
 // const DEFAULT_MOBILE = '768px';