doc: update all examples to V4 + StackBlitz (#661)

* Update all sample code to V4
* Convert CodeSandbox to StackBlitz
* Render all examples with Vite

Author: tylerhammer

SAMPLES.md

@@ -23,7 +23,7 @@ Find out more about Sendbird UIKit for React at [UIKit for React doc](https://se
 
 ## UIKit components and ways to customize
 
-These samples are here to help you better understand UIKit for React by going over the core components and ways to customize. On each core component sample, there is an attached CodeSandbox link in which you can see the sample codes and alter them to see how the changes are rendered.
+These samples are here to help you better understand UIKit for React by going over the core components and ways to customize. On each core component sample, there is an attached [StackBlitz](https://stackblitz.com/) link in which you can see the sample codes and alter them to see how the changes are rendered.
 
 <br />
 
@@ -43,7 +43,7 @@ The minimum requirements for UIKit for React are:
 
 ### Implement Chat with App component
 
-The `App` component is a collection of all UIKit components you need to implement chat. This is included in all core component samples, so be sure to set your own APP_ID, USER_ID, and NICKNAME in `const.js` in each to customize your sample. On the [CodeSandbox](https://codesandbox.io/s/1-1-using-sendbird-app-9l4d4b) link, you will see that the props of the `App` component refer to use the values of the correspondings of `const.js` for initialization.
+The `App` component is a collection of all UIKit components you need to implement chat. This is included in all core component samples, so be sure to set your own APP_ID, USER_ID, and NICKNAME in `const.js` in each to customize your sample. On the [StackBlitz](https://stackblitz.com/edit/sendbird-react-uikit-base-app) link, you will see that the props of the `App` component refer to use the values of the correspondings of `const.js` for initialization.
 
 Try setting your own by downloading the Sendbird sample.
 
@@ -55,7 +55,7 @@ import SendbirdApp from '@sendbird/uikit-react/App';
 
 Here is a list of the essential components that you need to import before you start customizing chat. Note that the names of the components are changed as shown in the code below.
 
-Try [importing components on CodeSandbox](https://codesandbox.io/s/1-2-customization-basic-format-9skqq3).
+Try [importing components on StackBlitz](https://stackblitz.com/edit/sendbird-react-uikit-customized-app).
 
 ```javascript
 import SBConversation from '@sendbird/uikit-react/Channel';
@@ -64,11 +64,11 @@ import SBChannelSettings from '@sendbird/uikit-react/ChannelSettings';
 import withSendBird from '@sendbird/uikit-react/withSendbird';
 ```
 
-### Referring to CodeSandbox
+### Referring to StackBlitz
 
-Each CodeSandbox sample has `App.js` and `CustomizedApp.js` which operate based on the imported `const.js`. CodeSandbox is a code editor that provides an instant live preview. The preview has two buttons placed at the top center. If you click the left button, you will see unaltered `App.js`. If you click the right button, you will see the customized component from `CustomizedApp.js`, and any changes you make on them applied and rendered on the live preview.
+Each StackBlitz sample has `App.js` and `CustomizedApp.js` which operate based on the imported `const.js`. StackBlitz is a code editor that provides an instant live preview. The preview has two buttons placed at the top center. If you click the left button, you will see unaltered `App.js`. If you click the right button, you will see the customized component from `CustomizedApp.js`, and any changes you make on them applied and rendered on the live preview.
 
-If you would like to get a deeper understanding of how CodeSandbox works, refer to **CustomizedMessageItems**, **CustomizedHeader**, **CustomizedMessageInput**, and **CustomizedChannelPreviewItem** which you can find on corresponding CodeSandbox samples.
+If you would like to get a deeper understanding of how StackBlitz works, refer to **CustomizedMessageItems**, **CustomizedHeader**, **CustomizedMessageInput**, and **CustomizedChannelPreviewItem** which you can find on corresponding StackBlitz samples.
 
 <br />
 
@@ -80,7 +80,7 @@ This section explains what you need to know before testing the sample app.
 
 The **renderChatItem** is a `ReactElement` prop in the Channel component which you can use to customize `message` by setting a function. This prop provides three arguments: **message**, **onUpdateMessage**, and **onDeleteMessage**. The **message** represents an already sent or received message of an `BaseMessage` object; **onUpdateMessage** and **onDeleteMessage** are callback functions which you can implement with custom code for events related to the corresponding user actions.
 
-Try your [message item on CodeSandbox](https://codesandbox.io/s/2-1-customizing-messageitem-q38cg5).
+Try your [message item on StackBlitz](https://stackblitz.com/edit/sendbird-uikit-react-custom-message-item).
 
 ```javascript
 <Channel
@@ -96,29 +96,29 @@ Try your [message item on CodeSandbox](https://codesandbox.io/s/2-1-customizing-
 >
 ```
 
-> Note: You can try making your own customized message item by using `<CustomizedMessageItem />` on the CodeSandbox sample.
+> Note: You can try making your own customized message item by using `<CustomizedMessageItem />` on the StackBlitz sample.
 
 ### Message list params
 
 The **queries.messageListParams** is an `instance` prop in the **channel** component which you can use to retrieve a list of messages by specifying the properties of `MessageListParams`.
 
-Try your [message list params on CodeSandbox](https://codesandbox.io/s/2-2-customizing-messagelistparams-3ipi0g).
+Try your [message list params on StackBlitz](https://stackblitz.com/edit/sendbird-uikit-react-custom-message-list-params).
 
-> Note: On CodeSandbox’s preview, only the messages you sent will be displayed.
+> Note: On StackBlitz preview, only the messages you sent will be displayed.
 
 ```javascript
 // Pass arguments in JSON data input format to the query instance.
-const [queries] = useState({
+const queries = useMemo(() => ({
   // use object json type input, don't create sendbird query instance
-  // https://sendbird.github.io/core-sdk-javascript/module-model_params_messageListParams-MessageListParams.html
-  // https://github.com/sendbird/SendBird-SDK-JavaScript/blob/master/SendBird.d.ts#L488
+  // https://sendbird.com/docs/chat/v4/javascript/ref/interfaces/_sendbird_chat_message.MessageListParams.html
+  // https://github.com/sendbird/sendbird-chat-sdk-javascript/blob/main/lib/__definition.d.ts#L764
   messageListParams: {
-    senderUserIds: [USER_ID],
+    senderUserIdsFilter: [USER_ID],
     prevResultSize: 30,
     includeReplies: false,
     includeReactions: false,
   },
-});
+}));
 
 <Channel queries={queries} />;
 ```
@@ -127,9 +127,9 @@ const [queries] = useState({
 
 The **onBeforeSendUserMessage**, **onBeforeSendFileMessage**, and **onBeforeUpdateUserMessage** are `callback function` props in the **channel** component. The first two execute additional operations for a user message and a file message respectively; the corresponding modified messages are returned through the **text** and the **file** arguments respectively. The **onBeforeUpdateUserMessage** executes additional operations for a user message before updating it.
 
-Try your [message params on CodeSandbox](https://codesandbox.io/s/2-3-customizing-messageparams-606156)
+Try your [message params on StackBlitz](https://stackblitz.com/edit/sendbird-uikit-react-custom-message-params)
 
-> Note: On the CodeSandbox’s preview, you can send or update a message in highlight.
+> Note: On the StackBlitz preview, you can send or update a message in highlight.
 
 ```javascript
 <Channel
@@ -139,7 +139,7 @@ Try your [message params on CodeSandbox](https://codesandbox.io/s/2-3-customizin
 >
 ```
 
-In order to complete an operation you intend to carry out with each function, you should return `UserMessageParams` and `FileMessageParams` objects.
+In order to complete an operation you intend to carry out with each function, you should return `UserMessageCreateParams`, `UserMessageUpdateParams` and `FileMessageCreateParams` objects.
 
 ```javascript
 const handleUpdateUserMessage = (text) => {
@@ -149,13 +149,13 @@ const handleUpdateUserMessage = (text) => {
 };
 ```
 
-Find out more about `UserMessageParams` and `FileMessageParams` on the [API reference of Sendbird Chat SDK for JavaScript](https://sendbird.com/docs/chat/v4/javascript/ref/interfaces/_sendbird_chat_message.UserMessageCreateParams.html).
+Find out more about `UserMessageCreateParams`, `UserMessageUpdateParams` and `FileMessageCreateParams` on the [API reference of Sendbird Chat SDK for JavaScript](https://sendbird.com/docs/chat/v4/javascript/ref/modules/_sendbird_chat_message.html).
 
 ### Chat header
 
 The **renderChatHeader** is a `ReactElement` prop in the **channel** component which you can use to customize the header of `channel` by setting a function. This prop provides two arguments: **channel** and **user**. The channel refers to a `GroupChannel` object which is a collection of properties necessary to render the current channel view. The **user** refers to a `User` object which represents the current user.
 
-Try your [chat header on CodeSandbox](https://codesandbox.io/s/2-4-customizing-chatheader-mi5ijz)
+Try your [chat header on StackBlitz](https://stackblitz.com/edit/sendbird-uikit-react-custom-chat-header)
 
 ```javascript
 <Channel
@@ -165,13 +165,13 @@ Try your [chat header on CodeSandbox](https://codesandbox.io/s/2-4-customizing-c
 >
 ```
 
-> Note: You can try making your own customized chat header item by using `<CustomizedHeader />` on the CodeSandbox sample.
+> Note: You can try making your own customized chat header item by using `<CustomizedHeader />` on the StackBlitz sample.
 
 ### Message input
 
 The **renderMessageInput** is a `ReactElement` prop in the **Channel** component which allows you to customize the message input by setting a function. This prop provides three arguments: **channel**, **user**, and **disabled**. The **channel** refers to a `GroupChannel` object which is a collection of properties necessary to render the current channel view. The **user** refers to a `User` object which represents the current user. The **disabled** refers to whether to enable the message input box or not.
 
-Try your [message input on CodeSandbox](https://codesandbox.io/s/2-5-customizing-messageinput-forked-or4lm8)
+Try your [message input on StackBlitz](https://stackblitz.com/edit/sendbird-uikit-react-custom-message-input)
 
 ```javascript
 <Channel
@@ -181,13 +181,13 @@ Try your [message input on CodeSandbox](https://codesandbox.io/s/2-5-customizing
 >
 ```
 
-> Note: You can try making your own customized message input item by using `<CustomizedMessageInput />` on the CodeSandbox sample.
+> Note: You can try making your own customized message input item by using `<CustomizedMessageInput />` on the StackBlitz sample.
 
 ### Channel preview item
 
 The **renderChannelPreview** is a `ReactElement` prop in the **ChannelList** component which allows you to customize channel preview by setting a function. This prop provides two arguments: **channel** and **onLeaveChannel**. The **channel** refers to a `GroupChannel` object which is a collection of properties necessary to render the current channel view. The **onLeaveChannel** has a callback function as an argument which can be implemented with custom code for events related to the corresponding user action.
 
-Try your [channel preview item on CodeSandbox](https://codesandbox.io/s/3-1-customizing-channelpreviewitem-7c9xz6)
+Try your [channel preview item on StackBlitz](https://stackblitz.com/edit/sendbird-uikit-react-custom-channel-preview)
 
 ```javascript
 <ChannelList
@@ -214,40 +214,39 @@ const CustomizedChannelPreviewItem = (props) => {
 
 The **queries.channelListQuery** is an `instance` prop in the **ChannelList** component which filters channels by using its options.
 
-Try your [channel list query item on CodeSandbox](https://codesandbox.io/s/3-2-customizing-channellistquery-d0t2l8)
+Try your [channel list query item on StackBlitz](https://stackblitz.com/edit/sendbird-uikit-react-custom-channel-list-queries)
 
-> Note: On the CodeSandbox’s preview, the empty channels that you see means that the channels are successfully created and there are no messages sent by users.
+> Note: On the StackBlitz’s preview, the empty channels that you see means that the channels are successfully created and there are no messages sent by users.
 
 ```javascript
 // Pass arguments in JSON data input format to the query instance.
-  const [queries] = useState({
+  const queries = useMemo(() => ({
     channelListQuery: {
+      // Should be an instance of GroupChannelListQueryParams
+      // https://sendbird.com/docs/chat/v4/javascript/ref/interfaces/_sendbird_chat_groupChannel.GroupChannelListQueryParams.html
       includeEmpty: true,
       limit: 50,
-      order: "chronological"
-      // channelListQuery
-      // https://sendbird.github.io/core-sdk-javascript/module-model_query_groupChannelListQuery-GroupChannelListQuery.html
+      order: 'chronological',
     },
     applicationUserListQuery: {
-      limit: 50
-      // ex) userIdsFilter: ["sendbirdian", ...]
-      // applicationUserListQuery
-      // https://sendbird.github.io/core-sdk-javascript/module-model_query_applicationUserListQuery-ApplicationUserListQuery.html
-    }
-  });
+      // Should be an instance of ApplicaitonUserListQuery
+      // https://sendbird.com/docs/chat/v4/javascript/ref/interfaces/_sendbird_chat.ApplicationUserListQueryParams.html
+      nicknameStartsWithFilter: 'Jackson',
+    },
+  }));
 
 <ChannelList
     queries={queries}
 >
 ```
 
-Find out more about `ChannelListQuery` and `ApplicationUserListQuery` on the [API reference of Sendbird Chat SDK for JavaScript](https://sendbird.com/docs/chat/v4/javascript/ref/classes/_sendbird_chat_groupChannel.GroupChannelListQuery.html).
+Find out more about `ChannelListQuery` and `ApplicationUserListQuery` on the [API reference of Sendbird Chat SDK for JavaScript](https://sendbird.com/docs/chat/v4/javascript/ref/modules/_sendbird_chat_groupChannel.html).
 
 ### Channel params
 
 The **onBeforeCreateChannel** is a prop of the **ChannelList** component which can be implemented with custom code for events related to the corresponding user actions.
 
-Try your [channel param on CodeSandbox](https://codesandbox.io/s/3-3-customizing-channelparams-vgcgtj)
+Try your [channel param on StackBlitz](https://stackblitz.com/edit/sendbird-uikit-react-custom-channel-params)
 
 > Note: you can create a channel using `GroupChannelParams`.