chore: storybook wrap with provider (#1050)

Author: bang9

src/ui/MentionLabel/stories/MentionLabel.stories.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import MentionLabel from '../index.tsx';
+import SendbirdProvider from '../../../lib/Sendbird';
 
 const description = `
   \`import MentionLabel from "@sendbird/uikit-react/ui/MentionLabel";\`
@@ -17,4 +18,4 @@ export default {
   },
 };
 
-export const WithControl = (arg) => <MentionLabel {...arg} />;
+export const WithControl = (arg) => <SendbirdProvider><MentionLabel {...arg} /></SendbirdProvider>;

src/ui/MessageContent/index.tsx

@@ -127,7 +127,7 @@ export default function MessageContent(props: MessageContentProps): ReactElement
   } = deleteNullish(props);
 
   const { dateLocale } = useLocalization();
-  const { config, eventHandlers } = useSendbirdStateContext?.() || {};
+  const { config, eventHandlers } = useSendbirdStateContext();
   const { logger } = config;
   const onPressUserProfileHandler = eventHandlers?.reaction?.onPressUserProfile;
   const contentRef = useRef(null);

src/ui/MessageContent/stories/MessageContent.stories.js

@@ -2,6 +2,7 @@ import React from 'react';
 import MessageContent from '../index.tsx';
 
 import { MenuRoot, EmojiReactionListRoot } from '../../ContextMenu';
+import SendbirdProvider from '../../../lib/Sendbird';
 
 const description = `
   \`import MessageContent from "@sendbird/uikit-react/ui/MessageContent";\`
@@ -20,46 +21,48 @@ export default {
 };
 
 export const WithControl = (arg) => (
-  <MessageContent
-    userId="hoon-lord-01"
-    channel={{
-      isGroupChannel: () => true,
-      getUnreadMemberCount: (_) => 10,
-      getUndeliveredMemberCount: (_) => 0,
-    }}
-    message={{
-      message: 'i am message',
-      messageType: 'user',
-      sender: {
-        profileUrl: '',
-        nickname: 'Sendorous',
-        userId: 'hoon-army-001',
-        friendName: '',
-      },
-      createdAt: 0,
-      updatedAt: 0,
-      sendingStatus: 'succeeded',
-      ogMetaData: null,
-      reactions: [
-        {
-          key: 'emoji1',
-          userIds: [ 'hoon-army-001', 'hoon-army-002', 'hoon-army-004' ],
-        },
-      ],
-      // ogMetaData: { defaultImage: { url: '', alt: '' }, title: '', description: '', url: '' },
-      // name: '',
-      // url: '',
-      // type: '',
-      // thumbnails: [ { url: '' } ],
-      isAdminMessage: () => false,
-      isResendable: () => false,
-    }}
-    {...arg}
-  />
+    <SendbirdProvider>
+      <MessageContent
+        userId="hoon-lord-01"
+        channel={{
+          isGroupChannel: () => true,
+          getUnreadMemberCount: (_) => 10,
+          getUndeliveredMemberCount: (_) => 0,
+        }}
+        message={{
+          message: 'i am message',
+          messageType: 'user',
+          sender: {
+            profileUrl: '',
+            nickname: 'Sendorous',
+            userId: 'hoon-army-001',
+            friendName: '',
+          },
+          createdAt: 0,
+          updatedAt: 0,
+          sendingStatus: 'succeeded',
+          ogMetaData: null,
+          reactions: [
+            {
+              key: 'emoji1',
+              userIds: [ 'hoon-army-001', 'hoon-army-002', 'hoon-army-004' ],
+            },
+          ],
+          // ogMetaData: { defaultImage: { url: '', alt: '' }, title: '', description: '', url: '' },
+          // name: '',
+          // url: '',
+          // type: '',
+          // thumbnails: [ { url: '' } ],
+          isAdminMessage: () => false,
+          isResendable: () => false,
+        }}
+        {...arg}
+      />
+    </SendbirdProvider>
 );
 
 export const withText = () => (
-  <div>
+  <SendbirdProvider>
     <MessageContent
       userId="hoon-lord-01"
       channel={{
@@ -153,5 +156,5 @@ export const withText = () => (
     </div>
     <MenuRoot />
     <EmojiReactionListRoot />
-  </div>
+  </SendbirdProvider>
 );

src/ui/MessageInput/stories/index.stories.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import MessageInput from '../index';
+import SendbirdProvider from '../../../lib/Sendbird';
 
 const description = `
   \`import MessageInput from "@sendbird/uikit-react/ui/MessageInput";\`
@@ -21,20 +22,26 @@ export default {
 export const WithControl = (arg) => {
   const ref = React.useRef();
   return (
-    <MessageInput {...arg} ref={ref} />
+    <SendbirdProvider>
+      <MessageInput {...arg} ref={ref} />
+    </SendbirdProvider>
   )
 };
 
 export const messageInputEdit = () => {
   const ref = React.useRef();
   return (
-    <MessageInput isEdit name="example" ref={ref} />
+    <SendbirdProvider>
+      <MessageInput isEdit name="example" ref={ref} />
+    </SendbirdProvider>
   )
 };
 
 export const disabledMessageInput = () => {
   const ref = React.useRef();
   return (
-    <MessageInput disabled name="example" ref={ref} />
+    <SendbirdProvider>
+      <MessageInput disabled name="example" ref={ref} />
+    </SendbirdProvider>
   )
 };

src/ui/VoiceMessageItemBody/stories/VoiceMessageItemBody.stories.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { VoicePlayerProvider } from '../../../hooks/VoicePlayer';
 import VoiceMessageItemBody from '../index';
+import SendbirdProvider from '../../../lib/Sendbird';
 
 const description = `
   \`import VoiceMessageItemBody from "@sendbird/uikit-react/ui/VoiceMessageItemBody";\`
@@ -20,26 +21,30 @@ export default {
 
 export const Basic = () => {
   return (
-    <div style={{
-      width: '100%',
-      height: '500px',
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '100px',
-    }}>
-      <VoicePlayerProvider>
-        <VoiceMessageItemBody
-          message={{
-            url: 'https://file-ap-1.sendbird.com/5ed2eac62e9b41609ac34340b6b3aa75.mp3',
-          }}
-        />
-        <VoiceMessageItemBody
-          message={{
-            url: 'https://file-ap-1.sendbird.com/5ed2eac62e9b41609ac34340b6b3aa75.mp3',
-          }}
-          isByMe
-        />
-      </VoicePlayerProvider>
+    <div
+      style={{
+        width: '100%',
+        height: '500px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '100px',
+      }}
+    >
+      <SendbirdProvider>
+        <VoicePlayerProvider>
+          <VoiceMessageItemBody
+            message={{
+              url: 'https://file-ap-1.sendbird.com/5ed2eac62e9b41609ac34340b6b3aa75.mp3',
+            }}
+          />
+          <VoiceMessageItemBody
+            message={{
+              url: 'https://file-ap-1.sendbird.com/5ed2eac62e9b41609ac34340b6b3aa75.mp3',
+            }}
+            isByMe
+          />
+        </VoicePlayerProvider>
+      </SendbirdProvider>
     </div>
-  )
+  );
 };