feat(foundation): added Prompt and Input component

packages/chat-react-hooks/src/types.ts

@@ -2,12 +2,6 @@ import type Sendbird from 'sendbird';
 
 import type { SendbirdMessage } from '@sendbird/uikit-utils';
 
-declare module 'sendbird' {
- interface SendBirdInstance {
- get isCacheEnabled(): boolean;
- }
-}
-
 export interface CustomQueryInterface<Data> {
  isLoading: boolean;
  next: () => Promise<Data[]>;

packages/uikit-react-native-core/src/domain/groupChannelList/component/GroupChannelListChannelMenu.tsx

@@ -27,7 +27,7 @@ const GroupChannelListChannelMenu: React.FC<GroupChannelListProps['ChannelMenu']
  channelMenu.selectedChannel &&
  LABEL.GROUP_CHANNEL_LIST.CHANNEL_MENU.TITLE(currentUser?.userId ?? '', channelMenu.selectedChannel)
  }
- items={[
+ menuItems={[
  {
  title: LABEL.GROUP_CHANNEL_LIST.CHANNEL_MENU.MENU_NOTIFICATIONS(channelMenu.selectedChannel),
  onPress: async () => {

packages/uikit-react-native-foundation/src/index.tsx

@@ -14,7 +14,7 @@ export { default as Button } from './ui/Button';
 export { default as Header } from './ui/Header';
 export { default as Avatar } from './ui/Avatar';
 export { default as ActionMenu } from './ui/ActionMenu';
-export { DialogProvider, useDialog, useAlert, useActionMenu } from './ui/Dialog';
+export { DialogProvider, useActionMenu, useAlert, usePrompt } from './ui/Dialog';
 
 /** Styles **/
 export { default as useHeaderStyle } from './styles/useHeaderStyle';

packages/uikit-react-native-foundation/src/theme/DarkUIKitTheme.ts

@@ -74,16 +74,37 @@ const DarkUIKitTheme: UIKitTheme = {
  },
  },
  },
- // input: {
- // typeDefault: {
- // text: Palette.onBackgroundDark01,
- // background: Palette.background400,
- // placeholder: {
- // active: Palette.onBackgroundDark03,
- // disabled: Palette.onBackgroundDark04,
- // },
- // },
- // },
+
+ input: {
+ default: {
+ active: {
+ text: Palette.onBackgroundDark01,
+ placeholder: Palette.onBackgroundDark03,
+ background: Palette.background400,
+ highlight: Palette.transparent,
+ },
+ disabled: {
+ text: Palette.onBackgroundDark04,
+ placeholder: Palette.onBackgroundDark04,
+ background: Palette.background400,
+ highlight: Palette.transparent,
+ },
+ },
+ underline: {
+ active: {
+ text: Palette.onBackgroundDark01,
+ placeholder: Palette.onBackgroundDark03,
+ background: Palette.transparent,
+ highlight: Palette.primary200,
+ },
+ disabled: {
+ text: Palette.onBackgroundDark04,
+ placeholder: Palette.onBackgroundDark04,
+ background: Palette.transparent,
+ highlight: Palette.onBackgroundDark04,
+ },
+ },
+ },
  },
  },
 };

packages/uikit-react-native-foundation/src/theme/LightUIKitTheme.ts

@@ -74,17 +74,37 @@ const LightUIKitTheme: UIKitTheme = {
  },
  },
  },
+ input: {
+ default: {
+ active: {
+ text: Palette.onBackgroundLight01,
+ placeholder: Palette.onBackgroundLight03,
+ background: Palette.background100,
+ highlight: Palette.transparent,
+ },
+ disabled: {
+ text: Palette.onBackgroundLight04,
+ placeholder: Palette.onBackgroundLight04,
+ background: Palette.background100,
+ highlight: Palette.transparent,
+ },
+ },
+ underline: {
+ active: {
+ text: Palette.onBackgroundLight01,
+ placeholder: Palette.onBackgroundLight03,
+ background: Palette.transparent,
+ highlight: Palette.primary300,
+ },
+ disabled: {
+ text: Palette.onBackgroundLight04,
+ placeholder: Palette.onBackgroundLight04,
+ background: Palette.transparent,
+ highlight: Palette.onBackgroundLight04,
+ },
+ },
+ },
  },
- // input: {
- // typeDefault: {
- // text: Palette.onBackgroundLight01,
- // background: Palette.background100,
- // placeholder: {
- // active: Palette.onBackgroundLight03,
- // disabled: Palette.onBackgroundLight04,
- // },
- // },
- // },
  },
 };
 

packages/uikit-react-native-foundation/src/types.ts

@@ -28,7 +28,7 @@ export interface UIKitTheme extends AppearanceHelper {
  typography: Typography;
 }
 
-type Component = 'Header' | 'Button' | 'Dialog';
+type Component = 'Header' | 'Button' | 'Dialog' | 'Input';
 type GetColorTree<
  Tree extends {
  Variant: {
@@ -48,7 +48,7 @@ export type ComponentColorTree = GetColorTree<{
  Header: 'nav';
  Button: 'contained' | 'text';
  Dialog: 'default';
- Input: 'default';
+ Input: 'default' | 'underline';
  };
  State: {
  Header: 'none';
@@ -60,7 +60,7 @@ export type ComponentColorTree = GetColorTree<{
  Header: 'background' | 'borderBottom';
  Button: 'background' | 'content';
  Dialog: 'background' | 'text' | 'message' | 'highlight' | 'destructive';
- Input: 'text' | 'background' | 'placeholder';
+ Input: 'text' | 'placeholder' | 'background' | 'highlight';
  };
 }>;
 type ComponentColors<T extends Component> = {
@@ -99,7 +99,7 @@ export type UIKitColors = {
  header: ComponentColors<'Header'>;
  button: ComponentColors<'Button'>;
  dialog: ComponentColors<'Dialog'>;
- // input: ComponentColors<'Input'>;
+ input: ComponentColors<'Input'>;
  };
 };
 

packages/uikit-react-native-foundation/src/ui/ActionMenu/index.tsx

@@ -9,19 +9,20 @@ import Modal from '../Modal';
 import Text from '../Text';
 
 export type ActionMenuItem = {
- title: string;
- onPress?: () => void;
+ title?: string;
+ menuItems: { title: string; onPress?: () => void }[];
 };
+
 type Props = {
  visible: boolean;
  onHide: () => void;
  onError?: (error: unknown) => void;
  onDismiss?: () => void;
 
- title?: string;
- items: ActionMenuItem[];
+ title?: ActionMenuItem['title'];
+ menuItems: ActionMenuItem['menuItems'];
 };
-const ActionMenu: React.FC<Props> = ({ visible, onHide, onError, onDismiss, title, items }) => {
+const ActionMenu: React.FC<Props> = ({ visible, onHide, onError, onDismiss, title, menuItems }) => {
  const { statusBarTranslucent } = useHeaderStyle();
  const { colors } = useUIKitTheme();
  // const [pending, setPending] = useState(false);
@@ -57,7 +58,7 @@ const ActionMenu: React.FC<Props> = ({ visible, onHide, onError, onDismiss, titl
  )}*/}
  </View>
  <View style={styles.buttonContainer}>
- {items.map(({ title, onPress }, index) => {
+ {menuItems.map(({ title, onPress }, index) => {
  return (
  <Pressable
  key={title + index}

packages/uikit-react-native-foundation/src/ui/Alert/index.tsx

@@ -19,10 +19,7 @@ type Props = {
  visible: boolean;
  onHide: () => void;
  onDismiss?: () => void;
- title: AlertItem['title'];
- message: AlertItem['message'];
- buttons: AlertItem['buttons'];
-};
+} & AlertItem;
 const Alert: React.FC<Props> = ({
  onDismiss,
  visible,

packages/uikit-react-native-foundation/src/ui/Dialog/index.tsx

@@ -6,38 +6,45 @@ import type { ActionMenuItem } from '../ActionMenu';
 import ActionMenu from '../ActionMenu';
 import type { AlertItem } from '../Alert';
 import Alert from '../Alert';
+import type { PromptItem } from '../Prompt';
+import Prompt from '../Prompt';
 
-type JobInterface =
+type DialogJob =
  | {
  type: 'ActionMenu';
- props: {
- title?: string;
- items: ActionMenuItem[];
- };
+ props: ActionMenuItem;
  }
  | {
  type: 'Alert';
  props: AlertItem;
+ }
+ | {
+ type: 'Prompt';
+ props: PromptItem;
  };
 
-type SelectJobProps<T extends JobInterface['type'], U extends JobInterface = JobInterface> = U extends { type: T }
+type DialogPropsBy<T extends DialogJob['type'], U extends DialogJob = DialogJob> = U extends { type: T }
  ? U['props']
  : never;
 
 type DialogContextType = {
- alert: (props: SelectJobProps<'Alert'>) => void;
- openMenu: (props: SelectJobProps<'ActionMenu'>) => void;
+ openMenu: (props: DialogPropsBy<'ActionMenu'>) => void;
+ alert: (props: DialogPropsBy<'Alert'>) => void;
+ prompt: (props: DialogPropsBy<'Prompt'>) => void;
 };
-const DialogContext = React.createContext<DialogContextType | null>(null);
+
+const ActionMenuContext = React.createContext<Pick<DialogContextType, 'openMenu'> | null>(null);
+const AlertContext = React.createContext<Pick<DialogContextType, 'alert'> | null>(null);
+const PromptContext = React.createContext<Pick<DialogContextType, 'prompt'> | null>(null);
 
 export const DialogProvider: React.FC = ({ children }) => {
  const render = useForceUpdate();
 
- const queue = useRef<JobInterface[]>([]);
- const workingJob = useRef<JobInterface>();
+ const dialogQueue = useRef<DialogJob[]>([]);
+ const workingDialogJob = useRef<DialogJob>();
  const visibleState = useRef(false);
 
- const isProcessing = () => Boolean(workingJob.current);
+ const isProcessing = () => Boolean(workingDialogJob.current);
  const updateToShow = useCallback(() => {
  visibleState.current = true;
  render();
@@ -48,64 +55,83 @@ export const DialogProvider: React.FC = ({ children }) => {
  }, []);
 
  const consumeQueue = useCallback(() => {
- const job = queue.current.shift();
+ const job = dialogQueue.current.shift();
  if (job) {
- workingJob.current = job;
+ workingDialogJob.current = job;
  updateToShow();
  } else {
- workingJob.current = undefined;
+ workingDialogJob.current = undefined;
  }
  }, []);
 
  const createJob =
- <T extends JobInterface['type']>(type: T) =>
- (props: SelectJobProps<T>) => {
- const jobItem = { type, props } as JobInterface;
- if (isProcessing()) queue.current.push(jobItem);
+ <T extends DialogJob['type']>(type: T) =>
+ (props: DialogPropsBy<T>) => {
+ const jobItem = { type, props } as DialogJob;
+ if (isProcessing()) dialogQueue.current.push(jobItem);
  else {
- workingJob.current = jobItem;
+ workingDialogJob.current = jobItem;
  updateToShow();
  }
  };
 
- const alert = useCallback(createJob('Alert'), []);
  const openMenu = useCallback(createJob('ActionMenu'), []);
+ const alert = useCallback(createJob('Alert'), []);
+ const prompt = useCallback(createJob('Prompt'), []);
 
  return (
- <DialogContext.Provider value={{ alert, openMenu }}>
- {children}
- {workingJob.current?.type === 'ActionMenu' && (
- <ActionMenu
- onDismiss={consumeQueue}
- visible={visibleState.current}
- onHide={updateToHide}
- title={workingJob.current.props.title}
- items={workingJob.current.props.items}
- />
- )}
- {workingJob.current?.type === 'Alert' && (
- <Alert
- onDismiss={consumeQueue}
- visible={visibleState.current}
- onHide={updateToHide}
- title={workingJob.current.props.title}
- message={workingJob.current.props.message}
- buttons={workingJob.current.props.buttons}
- />
- )}
- </DialogContext.Provider>
+ <AlertContext.Provider value={{ alert }}>
+ <ActionMenuContext.Provider value={{ openMenu }}>
+ <PromptContext.Provider value={{ prompt }}>
+ {children}
+ {workingDialogJob.current?.type === 'ActionMenu' && (
+ <ActionMenu
+ onDismiss={consumeQueue}
+ visible={visibleState.current}
+ onHide={updateToHide}
+ title={workingDialogJob.current.props.title}
+ menuItems={workingDialogJob.current.props.menuItems}
+ />
+ )}
+ {workingDialogJob.current?.type === 'Alert' && (
+ <Alert
+ onDismiss={consumeQueue}
+ visible={visibleState.current}
+ onHide={updateToHide}
+ title={workingDialogJob.current.props.title}
+ message={workingDialogJob.current.props.message}
+ buttons={workingDialogJob.current.props.buttons}
+ />
+ )}
+ {workingDialogJob.current?.type === 'Prompt' && (
+ <Prompt
+ onDismiss={consumeQueue}
+ visible={visibleState.current}
+ onHide={updateToHide}
+ title={workingDialogJob.current.props.title}
+ onSubmit={workingDialogJob.current.props.onSubmit}
+ submitLabel={workingDialogJob.current.props.submitLabel}
+ cancelLabel={workingDialogJob.current.props.cancelLabel}
+ />
+ )}
+ </PromptContext.Provider>
+ </ActionMenuContext.Provider>
+ </AlertContext.Provider>
  );
 };
-export const useDialog = () => {
- const context = useContext(DialogContext);
- if (!context) throw new Error('DialogProvider is not provided');
+
+export const useActionMenu = () => {
+ const context = useContext(ActionMenuContext);
+ if (!context) throw new Error('ActionMenuContext is not provided');
  return context;
 };
 export const useAlert = () => {
- const { alert } = useDialog();
- return { alert };
+ const context = useContext(AlertContext);
+ if (!context) throw new Error('AlertContext is not provided');
+ return context;
 };
-export const useActionMenu = () => {
- const { openMenu } = useDialog();
- return { show: openMenu };
+export const usePrompt = () => {
+ const context = useContext(PromptContext);
+ if (!context) throw new Error('PromptContext is not provided');
+ return context;
 };