@sendbird/uikit-react-native 2.3.0 → 2.4.0

package/src/domain/openChannelList/types.ts

@@ -0,0 +1,63 @@
+import type React from 'react';
+import type { FlatListProps } from 'react-native';
+
+import type { UseOpenChannelListOptions } from '@sendbird/uikit-chat-hooks';
+import type { SendbirdOpenChannel } from '@sendbird/uikit-utils';
+
+import type { CommonComponent } from '../../types';
+
+export type OpenChannelListProps = {
+  Fragment: {
+    /** Handler for navigating to OpenChannelFragment **/
+    onPressChannel: (channel: SendbirdOpenChannel) => void;
+    /** Handler for navigating to OpenChannelCreateFragment **/
+    onPressCreateChannel: () => void;
+    /** Method for rendering open channel preview **/
+    renderOpenChannelPreview?: OpenChannelListProps['List']['renderOpenChannelPreview'];
+    /** Method for creating a custom query of open channel list **/
+    queryCreator?: UseOpenChannelListOptions['queryCreator'];
+    /** Props for FlatList component, it passed to OpenChannelList.List **/
+    flatListProps?: OpenChannelListProps['List']['flatListProps'];
+  };
+  Header: {
+    onPressHeaderRight: () => void;
+  };
+  List: {
+    /** OpenChannels from SendbirdChat SDK **/
+    openChannels: SendbirdOpenChannel[];
+    /** Method for rendering a preview of each open channel **/
+    renderOpenChannelPreview: (props: { channel: SendbirdOpenChannel }) => React.ReactElement | null;
+    /** Handler for loading the next batch of open channels **/
+    onLoadNext: () => Promise<void>;
+    /** Props for the FlatList component, passed to the OpenChannelList.List **/
+    flatListProps?: Omit<FlatListProps<SendbirdOpenChannel>, 'data' | 'renderItem'>;
+    /** Props for the indicates if the FlatList is currently being refreshed  **/
+    refreshing: boolean;
+    /** Handler for refreshing the list of open channels **/
+    onRefresh: () => void;
+  };
+  StatusError: {
+    onPressRetry: () => void;
+  };
+};
+
+/**
+ * Internal context for OpenChannelList
+ * For example, the developer can create a custom header
+ * with getting data from the domain context
+ * */
+export type OpenChannelListContextsType = {
+  Fragment: React.Context<{
+    headerTitle: string;
+  }>;
+};
+export interface OpenChannelListModule {
+  Provider: CommonComponent;
+  Header: CommonComponent<OpenChannelListProps['Header']>;
+  List: CommonComponent<OpenChannelListProps['List']>;
+  StatusEmpty: CommonComponent;
+  StatusLoading: CommonComponent;
+  StatusError: CommonComponent<OpenChannelListProps['StatusError']>;
+}
+
+export type OpenChannelListFragment = CommonComponent<OpenChannelListProps['Fragment']>;

package/src/domain/openChannelModeration/component/OpenChannelModerationHeader.tsx

@@ -0,0 +1,15 @@
+import React, { useContext } from 'react';
+
+import { Icon, useHeaderStyle } from '@sendbird/uikit-react-native-foundation';
+
+import { OpenChannelModerationContexts } from '../module/moduleContext';
+import type { OpenChannelModerationProps } from '../types';
+
+const OpenChannelModerationHeader = ({ onPressHeaderLeft }: OpenChannelModerationProps['Header']) => {
+  const { headerTitle } = useContext(OpenChannelModerationContexts.Fragment);
+  const { HeaderComponent } = useHeaderStyle();
+
+  return <HeaderComponent title={headerTitle} left={<Icon icon={'arrow-left'} />} onPressLeft={onPressHeaderLeft} />;
+};
+
+export default OpenChannelModerationHeader;

package/src/domain/openChannelModeration/component/OpenChannelModerationMenu.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import type { MenuBarProps } from '@sendbird/uikit-react-native-foundation';
+import { Icon, MenuBar, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+
+import { useLocalization } from '../../../hooks/useContext';
+import type { OpenChannelModerationProps } from '../types';
+
+const OpenChannelModerationMenu = ({
+  onPressMenuBannedUsers,
+  onPressMenuMutedParticipants,
+  onPressMenuOperators,
+  menuItemsCreator = (menu) => menu,
+}: OpenChannelModerationProps['Menu']) => {
+  const { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
+
+  const menuItems: MenuBarProps[] = menuItemsCreator([
+    {
+      icon: 'operator',
+      name: STRINGS.OPEN_CHANNEL_MODERATION.MENU_OPERATORS,
+      onPress: () => onPressMenuOperators(),
+      actionItem: <Icon icon={'chevron-right'} color={colors.onBackground01} />,
+    },
+    {
+      icon: 'mute',
+      name: STRINGS.OPEN_CHANNEL_MODERATION.MENU_MUTED_PARTICIPANTS,
+      onPress: () => onPressMenuMutedParticipants(),
+      actionItem: <Icon icon={'chevron-right'} color={colors.onBackground01} />,
+    },
+    {
+      icon: 'ban',
+      name: STRINGS.OPEN_CHANNEL_MODERATION.MENU_BANNED_USERS,
+      onPress: () => onPressMenuBannedUsers(),
+      actionItem: <Icon icon={'chevron-right'} color={colors.onBackground01} />,
+    },
+  ]);
+
+  return (
+    <View>
+      {menuItems.map((menu) => {
+        return (
+          <MenuBar
+            key={menu.name}
+            onPress={menu.onPress}
+            name={menu.name}
+            disabled={menu.disabled}
+            visible={menu.visible}
+            icon={menu.icon}
+            iconColor={menu.iconColor}
+            iconBackgroundColor={menu.iconBackgroundColor}
+            actionLabel={menu.actionLabel}
+            actionItem={menu.actionItem}
+          />
+        );
+      })}
+    </View>
+  );
+};
+
+export default OpenChannelModerationMenu;

package/src/domain/openChannelModeration/index.ts

@@ -0,0 +1,4 @@
+export { default as OpenChannelModerationHeader } from './component/OpenChannelModerationHeader';
+export { default as OpenChannelModerationMenu } from './component/OpenChannelModerationMenu';
+export { default as createOpenChannelModerationModule } from './module/createOpenChannelModerationModule';
+export { OpenChannelModerationContextsProvider, OpenChannelModerationContexts } from './module/moduleContext';

package/src/domain/openChannelModeration/module/createOpenChannelModerationModule.tsx

@@ -0,0 +1,15 @@
+import OpenChannelModerationHeader from '../component/OpenChannelModerationHeader';
+import OpenChannelModerationMenu from '../component/OpenChannelModerationMenu';
+import type { OpenChannelModerationModule } from '../types';
+import { OpenChannelModerationContextsProvider } from './moduleContext';
+
+const createOpenChannelModerationModule = ({
+  Header = OpenChannelModerationHeader,
+  Menu = OpenChannelModerationMenu,
+  Provider = OpenChannelModerationContextsProvider,
+  ...module
+}: Partial<OpenChannelModerationModule> = {}): OpenChannelModerationModule => {
+  return { Header, Menu, Provider, ...module };
+};
+
+export default createOpenChannelModerationModule;

package/src/domain/openChannelModeration/module/moduleContext.tsx

@@ -0,0 +1,33 @@
+import React, { createContext } from 'react';
+
+import type { SendbirdOpenChannel } from '@sendbird/uikit-utils';
+
+import ProviderLayout from '../../../components/ProviderLayout';
+import { useLocalization } from '../../../hooks/useContext';
+import type { OpenChannelModerationContextsType, OpenChannelModerationModule } from '../types';
+
+export const OpenChannelModerationContexts: OpenChannelModerationContextsType = {
+  Fragment: createContext({
+    headerTitle: '',
+    channel: {} as SendbirdOpenChannel,
+  }),
+};
+
+export const OpenChannelModerationContextsProvider: OpenChannelModerationModule['Provider'] = ({
+  children,
+  channel,
+}) => {
+  const { STRINGS } = useLocalization();
+  return (
+    <ProviderLayout>
+      <OpenChannelModerationContexts.Fragment.Provider
+        value={{
+          headerTitle: STRINGS.OPEN_CHANNEL_MODERATION.HEADER_TITLE,
+          channel,
+        }}
+      >
+        {children}
+      </OpenChannelModerationContexts.Fragment.Provider>
+    </ProviderLayout>
+  );
+};

package/src/domain/openChannelModeration/types.ts

@@ -0,0 +1,48 @@
+import type React from 'react';
+
+import type { MenuBarProps } from '@sendbird/uikit-react-native-foundation';
+import type { SendbirdOpenChannel } from '@sendbird/uikit-utils';
+
+import type { CommonComponent } from '../../types';
+
+export type OpenChannelModerationProps = {
+  Fragment: {
+    channel: SendbirdOpenChannel;
+    onPressHeaderLeft: OpenChannelModerationProps['Header']['onPressHeaderLeft'];
+    onPressMenuOperators: OpenChannelModerationProps['Menu']['onPressMenuOperators'];
+    onPressMenuMutedParticipants: OpenChannelModerationProps['Menu']['onPressMenuMutedParticipants'];
+    onPressMenuBannedUsers: OpenChannelModerationProps['Menu']['onPressMenuBannedUsers'];
+    menuItemsCreator?: OpenChannelModerationProps['Menu']['menuItemsCreator'];
+  };
+  Header: {
+    onPressHeaderLeft: () => void;
+  };
+  Menu: {
+    onPressMenuOperators: () => void;
+    onPressMenuMutedParticipants: () => void;
+    onPressMenuBannedUsers: () => void;
+    menuItemsCreator?: (defaultMenuItems: MenuBarProps[]) => MenuBarProps[];
+  };
+  Provider: {
+    channel: SendbirdOpenChannel;
+  };
+};
+
+/**
+ * Internal context for OpenChannelModeration
+ * For example, the developer can create a custom header
+ * with getting data from the domain context
+ * */
+export type OpenChannelModerationContextsType = {
+  Fragment: React.Context<{
+    headerTitle: string;
+    channel: SendbirdOpenChannel;
+  }>;
+};
+export interface OpenChannelModerationModule {
+  Provider: CommonComponent<OpenChannelModerationProps['Provider']>;
+  Header: CommonComponent<OpenChannelModerationProps['Header']>;
+  Menu: CommonComponent<OpenChannelModerationProps['Menu']>;
+}
+
+export type OpenChannelModerationFragment = CommonComponent<OpenChannelModerationProps['Fragment']>;

package/src/domain/openChannelMutedParticipants/component/OpenChannelMutedParticipantsHeader.tsx

@@ -0,0 +1,14 @@
+import React, { useContext } from 'react';
+
+import { Icon, useHeaderStyle } from '@sendbird/uikit-react-native-foundation';
+
+import { OpenChannelMutedParticipantsContexts } from '../module/moduleContext';
+import type { OpenChannelMutedParticipantsProps } from '../types';
+
+const OpenChannelMutedParticipantsHeader = ({ onPressHeaderLeft }: OpenChannelMutedParticipantsProps['Header']) => {
+  const { headerTitle } = useContext(OpenChannelMutedParticipantsContexts.Fragment);
+  const { HeaderComponent } = useHeaderStyle();
+  return <HeaderComponent title={headerTitle} left={<Icon icon={'arrow-left'} />} onPressLeft={onPressHeaderLeft} />;
+};
+
+export default OpenChannelMutedParticipantsHeader;

package/src/domain/openChannelMutedParticipants/component/OpenChannelMutedParticipantsList.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { FlatList, ListRenderItem } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { SendbirdRestrictedUser, getUserUniqId, useFreshCallback } from '@sendbird/uikit-utils';
+
+import type { OpenChannelMutedParticipantsProps } from '../types';
+
+const OpenChannelMutedParticipantsList = ({
+  renderUser,
+  mutedParticipants,
+  ListEmptyComponent,
+  onLoadNext,
+}: OpenChannelMutedParticipantsProps['List']) => {
+  const renderItem: ListRenderItem<SendbirdRestrictedUser> = useFreshCallback(({ item }) =>
+    renderUser?.({ user: item }),
+  );
+  const { left, right } = useSafeAreaInsets();
+
+  return (
+    <FlatList
+      data={mutedParticipants}
+      renderItem={renderItem}
+      contentContainerStyle={{ paddingLeft: left, paddingRight: right, flexGrow: 1 }}
+      ListEmptyComponent={ListEmptyComponent}
+      bounces={false}
+      keyExtractor={getUserUniqId}
+      onEndReached={onLoadNext}
+    />
+  );
+};
+
+export default OpenChannelMutedParticipantsList;

package/src/domain/openChannelMutedParticipants/component/OpenChannelMutedParticipantsStatusEmpty.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { Box } from '@sendbird/uikit-react-native-foundation';
+
+import TypedPlaceholder from '../../../components/TypedPlaceholder';
+
+const OpenChannelMutedParticipantsStatusEmpty = () => {
+  return (
+    <Box flex={1} alignItems={'center'} justifyContent={'center'}>
+      <TypedPlaceholder type={'no-muted-participants'} />
+    </Box>
+  );
+};
+
+export default OpenChannelMutedParticipantsStatusEmpty;

package/src/domain/openChannelMutedParticipants/component/OpenChannelMutedParticipantsStatusError.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { Box } from '@sendbird/uikit-react-native-foundation';
+
+import TypedPlaceholder from '../../../components/TypedPlaceholder';
+import type { OpenChannelMutedParticipantsModule } from '../types';
+
+const OpenChannelMutedParticipantsStatusError: OpenChannelMutedParticipantsModule['StatusError'] = ({
+  onPressRetry,
+}) => {
+  return (
+    <Box flex={1} alignItems={'center'} justifyContent={'center'}>
+      <TypedPlaceholder type={'error-wrong'} onPressRetry={onPressRetry} />
+    </Box>
+  );
+};
+
+export default OpenChannelMutedParticipantsStatusError;

package/src/domain/openChannelMutedParticipants/component/OpenChannelMutedParticipantsStatusLoading.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { Box } from '@sendbird/uikit-react-native-foundation';
+
+import TypedPlaceholder from '../../../components/TypedPlaceholder';
+
+const OpenChannelMutedParticipantsStatusLoading = () => {
+  return (
+    <Box flex={1} alignItems={'center'} justifyContent={'center'}>
+      <TypedPlaceholder type={'loading'} />
+    </Box>
+  );
+};
+
+export default OpenChannelMutedParticipantsStatusLoading;

package/src/domain/openChannelMutedParticipants/index.ts

@@ -0,0 +1,9 @@
+export { default as OpenChannelMutedParticipantsHeader } from './component/OpenChannelMutedParticipantsHeader';
+export { default as OpenChannelMutedParticipantsList } from './component/OpenChannelMutedParticipantsList';
+export { default as OpenChannelMutedParticipantsStatusLoading } from './component/OpenChannelMutedParticipantsStatusLoading';
+export { default as OpenChannelMutedParticipantsStatusEmpty } from './component/OpenChannelMutedParticipantsStatusEmpty';
+export { default as createOpenChannelMutedParticipantsModule } from './module/createOpenChannelMutedParticipantsModule';
+export {
+  OpenChannelMutedParticipantsContextsProvider,
+  OpenChannelMutedParticipantsContexts,
+} from './module/moduleContext';

package/src/domain/openChannelMutedParticipants/module/createOpenChannelMutedParticipantsModule.tsx

@@ -0,0 +1,21 @@
+import OpenChannelMutedParticipantsHeader from '../component/OpenChannelMutedParticipantsHeader';
+import OpenChannelMutedParticipantsList from '../component/OpenChannelMutedParticipantsList';
+import OpenChannelMutedParticipantsStatusEmpty from '../component/OpenChannelMutedParticipantsStatusEmpty';
+import OpenChannelMutedParticipantsStatusError from '../component/OpenChannelMutedParticipantsStatusError';
+import OpenChannelMutedParticipantsStatusLoading from '../component/OpenChannelMutedParticipantsStatusLoading';
+import type { OpenChannelMutedParticipantsModule } from '../types';
+import { OpenChannelMutedParticipantsContextsProvider } from './moduleContext';
+
+const createOpenChannelMutedParticipantsModule = ({
+  Header = OpenChannelMutedParticipantsHeader,
+  List = OpenChannelMutedParticipantsList,
+  StatusLoading = OpenChannelMutedParticipantsStatusLoading,
+  StatusEmpty = OpenChannelMutedParticipantsStatusEmpty,
+  StatusError = OpenChannelMutedParticipantsStatusError,
+  Provider = OpenChannelMutedParticipantsContextsProvider,
+  ...module
+}: Partial<OpenChannelMutedParticipantsModule> = {}): OpenChannelMutedParticipantsModule => {
+  return { Header, List, Provider, StatusEmpty, StatusLoading, StatusError, ...module };
+};
+
+export default createOpenChannelMutedParticipantsModule;

package/src/domain/openChannelMutedParticipants/module/moduleContext.tsx

@@ -0,0 +1,30 @@
+import React, { createContext } from 'react';
+
+import type { SendbirdOpenChannel } from '@sendbird/uikit-utils';
+
+import ProviderLayout from '../../../components/ProviderLayout';
+import { useLocalization } from '../../../hooks/useContext';
+import type { OpenChannelMutedParticipantsContextsType, OpenChannelMutedParticipantsModule } from '../types';
+
+export const OpenChannelMutedParticipantsContexts: OpenChannelMutedParticipantsContextsType = {
+  Fragment: createContext({
+    headerTitle: '',
+    channel: {} as SendbirdOpenChannel,
+  }),
+};
+
+export const OpenChannelMutedParticipantsContextsProvider: OpenChannelMutedParticipantsModule['Provider'] = ({
+  children,
+  channel,
+}) => {
+  const { STRINGS } = useLocalization();
+  return (
+    <ProviderLayout>
+      <OpenChannelMutedParticipantsContexts.Fragment.Provider
+        value={{ channel, headerTitle: STRINGS.OPEN_CHANNEL_MUTED_PARTICIPANTS.HEADER_TITLE }}
+      >
+        {children}
+      </OpenChannelMutedParticipantsContexts.Fragment.Provider>
+    </ProviderLayout>
+  );
+};

package/src/domain/openChannelMutedParticipants/types.ts

@@ -0,0 +1,50 @@
+import type React from 'react';
+
+import type { SendbirdOpenChannel, SendbirdRestrictedUser } from '@sendbird/uikit-utils';
+
+import type { CommonComponent } from '../../types';
+
+export type OpenChannelMutedParticipantsProps = {
+  Fragment: {
+    channel: SendbirdOpenChannel;
+    onPressHeaderLeft: OpenChannelMutedParticipantsProps['Header']['onPressHeaderLeft'];
+    renderUser?: OpenChannelMutedParticipantsProps['List']['renderUser'];
+  };
+  Header: {
+    onPressHeaderLeft: () => void;
+  };
+  List: {
+    renderUser: (props: { user: SendbirdRestrictedUser }) => React.ReactElement | null;
+    onLoadNext: () => void;
+    mutedParticipants: SendbirdRestrictedUser[];
+    ListEmptyComponent?: React.ReactElement;
+  };
+  StatusError: {
+    onPressRetry: () => void;
+  };
+  Provider: {
+    channel: SendbirdOpenChannel;
+  };
+};
+
+/**
+ * Internal context for OpenChannelMutedParticipants
+ * For example, the developer can create a custom header
+ * with getting data from the domain context
+ * */
+export type OpenChannelMutedParticipantsContextsType = {
+  Fragment: React.Context<{
+    headerTitle: string;
+    channel: SendbirdOpenChannel;
+  }>;
+};
+export interface OpenChannelMutedParticipantsModule {
+  Provider: CommonComponent<OpenChannelMutedParticipantsProps['Provider']>;
+  Header: CommonComponent<OpenChannelMutedParticipantsProps['Header']>;
+  List: CommonComponent<OpenChannelMutedParticipantsProps['List']>;
+  StatusEmpty: CommonComponent;
+  StatusLoading: CommonComponent;
+  StatusError: CommonComponent<OpenChannelMutedParticipantsProps['StatusError']>;
+}
+
+export type OpenChannelMutedParticipantsFragment = CommonComponent<OpenChannelMutedParticipantsProps['Fragment']>;

package/src/domain/openChannelOperators/component/OpenChannelOperatorsHeader.tsx

@@ -0,0 +1,22 @@
+import React, { useContext } from 'react';
+
+import { Icon, useHeaderStyle } from '@sendbird/uikit-react-native-foundation';
+
+import { OpenChannelOperatorsContexts } from '../module/moduleContext';
+import type { OpenChannelOperatorsProps } from '../types';
+
+const OpenChannelOperatorsHeader = ({ onPressHeaderLeft, onPressHeaderRight }: OpenChannelOperatorsProps['Header']) => {
+  const { headerTitle } = useContext(OpenChannelOperatorsContexts.Fragment);
+  const { HeaderComponent } = useHeaderStyle();
+  return (
+    <HeaderComponent
+      title={headerTitle}
+      left={<Icon icon={'arrow-left'} />}
+      onPressLeft={onPressHeaderLeft}
+      right={<Icon icon={'plus'} />}
+      onPressRight={onPressHeaderRight}
+    />
+  );
+};
+
+export default OpenChannelOperatorsHeader;

package/src/domain/openChannelOperators/component/OpenChannelOperatorsList.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { FlatList, ListRenderItem } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { SendbirdUser, getUserUniqId, useFreshCallback } from '@sendbird/uikit-utils';
+
+import type { OpenChannelOperatorsProps } from '../types';
+
+const OpenChannelOperatorsList = ({
+  renderUser,
+  operators,
+  ListEmptyComponent,
+  onLoadNext,
+}: OpenChannelOperatorsProps['List']) => {
+  const renderItem: ListRenderItem<SendbirdUser> = useFreshCallback(({ item }) => renderUser?.({ user: item }));
+  const { left, right } = useSafeAreaInsets();
+
+  return (
+    <FlatList
+      data={operators}
+      renderItem={renderItem}
+      contentContainerStyle={{ paddingLeft: left, paddingRight: right, flexGrow: 1 }}
+      ListEmptyComponent={ListEmptyComponent}
+      bounces={false}
+      keyExtractor={getUserUniqId}
+      onEndReached={onLoadNext}
+    />
+  );
+};
+
+export default OpenChannelOperatorsList;

package/src/domain/openChannelOperators/component/OpenChannelOperatorsStatusEmpty.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { Box } from '@sendbird/uikit-react-native-foundation';
+
+import TypedPlaceholder from '../../../components/TypedPlaceholder';
+
+const OpenChannelOperatorsStatusEmpty = () => {
+  return (
+    <Box flex={1} alignItems={'center'} justifyContent={'center'}>
+      <TypedPlaceholder type={'no-users'} />
+    </Box>
+  );
+};
+
+export default OpenChannelOperatorsStatusEmpty;

package/src/domain/openChannelOperators/component/OpenChannelOperatorsStatusError.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Box } from '@sendbird/uikit-react-native-foundation';
+
+import TypedPlaceholder from '../../../components/TypedPlaceholder';
+import type { OpenChannelOperatorsModule } from '../types';
+
+const OpenChannelOperatorsStatusError: OpenChannelOperatorsModule['StatusError'] = ({ onPressRetry }) => {
+  return (
+    <Box flex={1} alignItems={'center'} justifyContent={'center'}>
+      <TypedPlaceholder type={'error-wrong'} onPressRetry={onPressRetry} />
+    </Box>
+  );
+};
+
+export default OpenChannelOperatorsStatusError;

package/src/domain/openChannelOperators/component/OpenChannelOperatorsStatusLoading.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { Box } from '@sendbird/uikit-react-native-foundation';
+
+import TypedPlaceholder from '../../../components/TypedPlaceholder';
+
+const OpenChannelOperatorsStatusLoading = () => {
+  return (
+    <Box flex={1} alignItems={'center'} justifyContent={'center'}>
+      <TypedPlaceholder type={'loading'} />
+    </Box>
+  );
+};
+
+export default OpenChannelOperatorsStatusLoading;

package/src/domain/openChannelOperators/index.ts

@@ -0,0 +1,6 @@
+export { default as OpenChannelOperatorsHeader } from './component/OpenChannelOperatorsHeader';
+export { default as OpenChannelOperatorsList } from './component/OpenChannelOperatorsList';
+export { default as OpenChannelOperatorsStatusLoading } from './component/OpenChannelOperatorsStatusLoading';
+export { default as OpenChannelOperatorsStatusEmpty } from './component/OpenChannelOperatorsStatusEmpty';
+export { default as createOpenChannelOperatorsModule } from './module/createOpenChannelOperatorsModule';
+export { OpenChannelOperatorsContextsProvider, OpenChannelOperatorsContexts } from './module/moduleContext';

package/src/domain/openChannelOperators/module/createOpenChannelOperatorsModule.tsx

@@ -0,0 +1,21 @@
+import OpenChannelOperatorsHeader from '../component/OpenChannelOperatorsHeader';
+import OpenChannelOperatorsList from '../component/OpenChannelOperatorsList';
+import OpenChannelOperatorsStatusEmpty from '../component/OpenChannelOperatorsStatusEmpty';
+import OpenChannelOperatorsStatusError from '../component/OpenChannelOperatorsStatusError';
+import OpenChannelOperatorsStatusLoading from '../component/OpenChannelOperatorsStatusLoading';
+import type { OpenChannelOperatorsModule } from '../types';
+import { OpenChannelOperatorsContextsProvider } from './moduleContext';
+
+const createOpenChannelOperatorsModule = ({
+  Header = OpenChannelOperatorsHeader,
+  List = OpenChannelOperatorsList,
+  StatusLoading = OpenChannelOperatorsStatusLoading,
+  StatusEmpty = OpenChannelOperatorsStatusEmpty,
+  StatusError = OpenChannelOperatorsStatusError,
+  Provider = OpenChannelOperatorsContextsProvider,
+  ...module
+}: Partial<OpenChannelOperatorsModule> = {}): OpenChannelOperatorsModule => {
+  return { Header, List, Provider, StatusEmpty, StatusLoading, StatusError, ...module };
+};
+
+export default createOpenChannelOperatorsModule;

package/src/domain/openChannelOperators/module/moduleContext.tsx

@@ -0,0 +1,27 @@
+import React, { createContext } from 'react';
+
+import type { SendbirdOpenChannel } from '@sendbird/uikit-utils';
+
+import ProviderLayout from '../../../components/ProviderLayout';
+import { useLocalization } from '../../../hooks/useContext';
+import type { OpenChannelOperatorsContextsType, OpenChannelOperatorsModule } from '../types';
+
+export const OpenChannelOperatorsContexts: OpenChannelOperatorsContextsType = {
+  Fragment: createContext({
+    headerTitle: '',
+    channel: {} as SendbirdOpenChannel,
+  }),
+};
+
+export const OpenChannelOperatorsContextsProvider: OpenChannelOperatorsModule['Provider'] = ({ children, channel }) => {
+  const { STRINGS } = useLocalization();
+  return (
+    <ProviderLayout>
+      <OpenChannelOperatorsContexts.Fragment.Provider
+        value={{ headerTitle: STRINGS.OPEN_CHANNEL_OPERATORS.HEADER_TITLE, channel }}
+      >
+        {children}
+      </OpenChannelOperatorsContexts.Fragment.Provider>
+    </ProviderLayout>
+  );
+};