migration: ui typescript (#815)

```sh
git rebase --onto main HEAD~16
```


[CLNP-1247](https://sendbird.atlassian.net/browse/CLNP-1247?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ)

Modules

- ./ui/Icon/index.jsx: index.jsx
- ./ui/Label/index.jsx: index.jsx
- ./ui/Label/stringSet.js: stringSet.js
- ./ui/Label/types.js: types.js
- ./ui/Label/utils.js: utils.js
- ./ui/LegacyChannelHeader/index.jsx: index.jsx
- ./ui/LinkLabel/index.jsx: index.jsx
- ./ui/MessageInput/index.jsx: index.jsx
- ./ui/MessageInput/utils.js: utils.js

[CLNP-1247]:
https://sendbird.atlassian.net/browse/CLNP-1247?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

---------

Co-authored-by: Liam Hongman Cho <[email protected]>

Author: bang9

.eslintrc.js

@@ -35,7 +35,6 @@ module.exports = {
         tsx: 'never',
       },
     ],
-    'react/forbid-prop-types': 0,
     // we don't want to force to define function component only
     'react/function-component-definition': 'off',
     'no-unused-expressions': 'off',

package.json

@@ -71,8 +71,7 @@
     "@sendbird/uikit-tools": "0.0.1-alpha.40",
     "css-vars-ponyfill": "^2.3.2",
     "date-fns": "^2.16.1",
-    "dompurify": "^3.0.1",
-    "prop-types": "^15.7.2"
+    "dompurify": "^3.0.1"
   },
   "bugs": {
     "url": "https://community.sendbird.com"

rollup.config.js

@@ -39,7 +39,6 @@ module.exports = ({
     '@sendbird/chat/openChannel',
     '@sendbird/chat/message',
     '@sendbird/uikit-tools',
-    'prop-types',
     'react',
     'react-dom',
     'css-vars-ponyfill',

rollup.module-exports.js

@@ -154,18 +154,18 @@ export default {
   'ui/EmojiReactions': 'src/ui/EmojiReactions/index.tsx',
   'ui/FileMessageItemBody': 'src/ui/FileMessageItemBody/index.tsx',
   'ui/FileViewer': 'src/ui/FileViewer/index.tsx',
-  'ui/Icon': 'src/ui/Icon/index.jsx',
+  'ui/Icon': 'src/ui/Icon/index.tsx',
   'ui/IconButton': 'src/ui/IconButton/index.tsx',
   'ui/ImageRenderer': 'src/ui/ImageRenderer/index.tsx',
   'ui/Input': 'src/ui/Input/index.tsx',
-  'ui/Label': 'src/ui/Label/index.jsx',
-  'ui/LinkLabel': 'src/ui/LinkLabel/index.jsx',
+  'ui/Label': 'src/ui/Label/index.tsx',
+  'ui/LinkLabel': 'src/ui/LinkLabel/index.tsx',
   'ui/Loader': 'src/ui/Loader/index.tsx',
   'ui/MentionUserLabel': 'src/ui/MentionUserLabel/index.tsx',
   'ui/MentionLabel': 'src/ui/MentionLabel/index.tsx',
   'ui/MessageContent': 'src/ui/MessageContent/index.tsx',
   // MessageInput is a special case - shouldbe turned into a module
-  'ui/MessageInput': 'src/ui/MessageInput/index.jsx',
+  'ui/MessageInput': 'src/ui/MessageInput/index.tsx',
   'ui/MessageInput/hooks/usePaste': 'src/ui/MessageInput/hooks/usePaste/index.ts',
   'ui/MessageItemMenu': 'src/ui/MessageItemMenu/index.tsx',
   'ui/MessageItemReactionMenu': 'src/ui/MessageItemReactionMenu/index.tsx',

src/lib/LocalizationContext.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import getStringSet from '../ui/Label/stringSet';
+import getStringSet, { StringSet } from '../ui/Label/stringSet';
 import type { Locale } from 'date-fns';
 import en from 'date-fns/locale/en-US';
 
@@ -10,7 +10,7 @@ const LocalizationContext = React.createContext({
 });
 
 interface LocalizationProviderProps {
-  stringSet: Record<string, string>;
+  stringSet: StringSet;
   dateLocale: Locale;
   children: React.ReactElement;
 }
@@ -25,8 +25,8 @@ const LocalizationProvider = (props: LocalizationProviderProps): React.ReactElem
 };
 
 export type UseLocalizationType = () => {
-  stringSet: Record<string, string>;
-  dateLocale: globalThis.Locale;
+  stringSet: StringSet;
+  dateLocale: Locale;
 };
 
 const useLocalization: UseLocalizationType = () => React.useContext(LocalizationContext);

src/modules/Channel/components/MessageInput/index.tsx

@@ -222,7 +222,7 @@ const MessageInputWrapper = (
                 setQuoteMessage(null);
                 channel?.endTyping?.();
               }}
-              onFileUpload={(fileList: FileList) => {
+              onFileUpload={(fileList) => {
                 handleUploadFiles(fileList);
                 setQuoteMessage(null);
               }}

src/modules/Channel/components/MessageInput/useHandleUploadFiles.tsx

@@ -25,7 +25,7 @@ interface useHandleUploadFilesDynamicProps {
 interface useHandleUploadFilesStaticProps {
   logger: Logger;
 }
-export type HandleUploadFunctionType = (files: FileList) => void;
+export type HandleUploadFunctionType = (files: File[]) => void;
 
 export const useHandleUploadFiles = ({
   sendFileMessage,
@@ -40,9 +40,7 @@ export const useHandleUploadFiles = ({
   const uikitMultipleFilesMessageLimit = config?.uikitMultipleFilesMessageLimit;
   const { openModal } = useGlobalModalContext();
 
-  const handleUploadFiles = useCallback((fileList: FileList) => {
-    const files: File[] = Array.from(fileList);
-
+  const handleUploadFiles = useCallback((files: File[]) => {
     // Validate Paremeters
     if (!sendFileMessage || !sendMultipleFilesMessage) {
       logger.warning('Channel|useHandleUploadFiles: required functions are undefined', { sendFileMessage, sendMultipleFilesMessage });

src/modules/OpenChannel/components/OpenChannelInput/index.tsx

@@ -7,14 +7,8 @@ export type MessageInputWrapperProps = {
   value?: string;
 };
 
-const MessageInputWrapper = (props: MessageInputWrapperProps, ref: React.RefObject<HTMLInputElement>): React.ReactNode => {
-  const {
-    currentOpenChannel,
-    disabled,
-    handleSendMessage,
-    handleFileUpload,
-    amIMuted,
-  } = useOpenChannelContext();
+export default React.forwardRef<HTMLInputElement, MessageInputWrapperProps>((props, ref) => {
+  const { currentOpenChannel, disabled, handleSendMessage, handleFileUpload, amIMuted } = useOpenChannelContext();
 
   const channel = currentOpenChannel;
 
@@ -48,6 +42,4 @@ const MessageInputWrapper = (props: MessageInputWrapperProps, ref: React.RefObje
       />
     </div>
   );
-};
-
-export default React.forwardRef(MessageInputWrapper);
+});

src/modules/OpenChannel/components/OpenChannelMessage/index.tsx

@@ -110,7 +110,6 @@ export default function MessagOpenChannelMessageeHoc(props: OpenChannelMessagePr
         disabled={editDisabled}
         ref={editMessageInputRef}
         message={message as UserMessage}
-        name={message?.messageId}
         onUpdateMessage={({ messageId, message }) => {
           updateMessage(messageId, message);
           setShowEdit(false);

src/modules/OpenChannelApp/assets/Icons.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React from 'react';
 
 import CollapseIcon from './ic-collapse.svg';