feat(react): add components config options

packages/status-react/src/contexts/app-context.tsx

@@ -1,10 +1,12 @@
 import React, { createContext, useContext, useMemo, useReducer } from 'react'
 
+import type { Config } from '../types/config'
 import type { Dispatch, Reducer } from 'react'
 
 type Context = {
   state: State
   dispatch: Dispatch<Action>
+  options: NonNullable<Config['options']>
 }
 
 const AppContext = createContext<Context | undefined>(undefined)
@@ -31,13 +33,27 @@ const initialState: State = {
 
 interface Props {
   children: React.ReactNode
+  config: Config
 }
 
 export const AppProvider = (props: Props) => {
-  const { children } = props
+  const { children, config } = props
 
   const [state, dispatch] = useReducer(reducer, initialState)
-  const value = useMemo(() => ({ state, dispatch }), [state])
+
+  const value = useMemo(
+    () => ({
+      state,
+      dispatch,
+      options: {
+        enableSidebar: true,
+        enableMembers: true,
+        ...config.options,
+      },
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state]
+  )
 
   return <AppContext.Provider value={value}>{children}</AppContext.Provider>
 }

packages/status-react/src/modules/community/index.tsx

@@ -31,7 +31,7 @@ export const Community = (props: Props) => {
 
   return (
     <Router>
-      <AppProvider>
+      <AppProvider config={props}>
         <ThemeProvider theme={theme}>
           <NarrowProvider myRef={ref}>
             <ModalProvider>

packages/status-react/src/modules/community/messenger.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { Route, Routes } from 'react-router-dom'
 
 import { MainSidebar } from '~/src/components/main-sidebar'
+import { useAppState } from '~/src/contexts/app-context'
 import { Chat } from '~/src/routes/chat'
 import { NewChat } from '~/src/routes/new-chat'
 import { styled } from '~/src/styles/config'
@@ -42,9 +43,11 @@ import { styled } from '~/src/styles/config'
 // }
 
 export function Messenger() {
+  const { options } = useAppState()
+
   return (
     <Wrapper>
-      <MainSidebar />
+      {options.enableMembers && <MainSidebar />}
       <Routes>
         <Route path="/:id" element={<Chat />} />
         <Route path="/new" element={<NewChat />} />

packages/status-react/src/routes/chat/index.tsx

@@ -44,10 +44,10 @@ const Content = () => {
 }
 
 export const Chat = () => {
-  const { state } = useAppState()
+  const { state, options } = useAppState()
 
   // TODO: Update condition based on a chat type
-  const enableMembers = true
+  const enableMembers = options.enableMembers // && (chat.type === 'group' || chat.type === 'channel')
   const showMembers = enableMembers && state.showMembers
 
   return (

packages/status-react/src/types/config.tsx

@@ -8,4 +8,8 @@ export interface Config {
   environment?: Environment
   theme?: Theme
   router?: typeof BrowserRouter | typeof MemoryRouter | typeof HashRouter
+  options?: {
+    enableSidebar: boolean
+    enableMembers: boolean
+  }
 }