feat: Open prop breakpoint (#618)

`breakpoint?: boolean`  open on `@sendbird/uikit-react/App`
and `@sendbird/uikit-react/SendbirdProvider`

```
  const isMobile = true
  // or ---
  // const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
  // or ---
  // const isMobile = /^https?:\/\/m\./i.test(window.location.href)
  // ^^checks of url is like `m.sendbird.com`
  // or ---
  // const isMobile = "768px"
  // ^^ UIKit will behave like mobile under 768px browser width

<SendbirdProvider
	breakpoint={isMobile}
/>
```

fixes: https://sendbird.atlassian.net/browse/UIKIT-4107

Author: Sravan S

scripts/index_d_ts

@@ -51,7 +51,7 @@ declare module "SendbirdUIKitGlobal" {
     customApiHost?: string,
     customWebSocketHost?: string,
     // not-ready yet
-    // breakpoint?: string | boolean,
+    breakpoint?: string | boolean,
     theme?: 'light' | 'dark';
     userListQuery?(): UserListQuery;
     nickname?: string;
@@ -232,6 +232,7 @@ declare module "SendbirdUIKitGlobal" {
     configureSession?: (sdk: SendbirdChat | SendbirdGroupChat | SendbirdOpenChat) => SessionHandler;
     customApiHost?: string,
     customWebSocketHost?: string,
+    breakpoint?: string | boolean,
     children?: React.ReactElement;
     theme?: 'light' | 'dark';
     replyType?: ReplyType;

src/lib/MediaQueryContext.tsx

@@ -5,7 +5,12 @@ const DEFAULT_MOBILE = false;
 // const DEFAULT_MOBILE = '768px';
 const MOBILE_CLASSNAME = 'sendbird--mobile-mode';
 
-const MediaQueryContext = React.createContext({
+export type useMediaQueryContextType = () => ({
+  breakpoint: string | boolean;
+  isMobile: boolean;
+});
+
+const MediaQueryContext = React.createContext<ReturnType<useMediaQueryContextType>>({
   breakpoint: DEFAULT_MOBILE,
   isMobile: false,
 });
@@ -39,7 +44,7 @@ const MediaQueryProvider = (props: MediaQueryProviderProps): React.ReactElement
     children,
     logger,
   } = props;
-  const breakpoint = props?.breakpoint || DEFAULT_MOBILE;
+  const breakpoint = props?.breakpoint || false;
   const [isMobile, setIsMobile] = useState(false);
   useEffect(() => {
     const updateSize = () => {
@@ -81,11 +86,6 @@ const MediaQueryProvider = (props: MediaQueryProviderProps): React.ReactElement
   );
 };
 
-export type useMediaQueryContextType = () => ({
-  breakpoint: string | boolean;
-  isMobile: boolean;
-});
-
 const useMediaQueryContext: useMediaQueryContextType = () => React.useContext(MediaQueryContext);
 
 export { MediaQueryProvider, useMediaQueryContext };

src/lib/Sendbird.tsx

@@ -88,6 +88,7 @@ export interface SendbirdProviderProps extends CommonUIKitConfigProps {
   allowProfileEdit?: boolean;
   disableMarkAsDelivered?: boolean;
   showSearchIcon?: boolean;
+  breakpoint?: string | boolean;
   renderUserProfile?: () => React.ReactElement;
   onUserProfileMessage?: () => void;
 }
@@ -158,9 +159,8 @@ const SendbirdSDK = ({
   disableMarkAsDelivered = false,
   renderUserProfile = null,
   onUserProfileMessage = null,
+  breakpoint = false,
 }: SendbirdProviderProps): React.ReactElement => {
-  const breakpoint = false;
-
   const {
     logLevel = '',
     userMention = {},

src/modules/App/index.jsx

@@ -104,7 +104,10 @@ App.propTypes = {
   userListQuery: PropTypes.func,
   nickname: PropTypes.string,
   profileUrl: PropTypes.string,
-  breakpoint: PropTypes.string,
+  breakpoint: PropTypes.oneOf([
+    PropTypes.string,
+    PropTypes.bool,
+  ]),
   allowProfileEdit: PropTypes.bool,
   disableUserProfile: PropTypes.bool,
   disableMarkAsDelivered: PropTypes.bool,