feat: add button component implementation

package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx

@@ -1,11 +1,11 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
 
 import Animated from 'react-native-reanimated';
 
 import dayjs from 'dayjs';
 
-import { IconButton } from '../../../../components/ui';
+import { Button } from '../../../../components/ui';
 import {
   MessageInputContextValue,
   useMessageInputContext,
@@ -19,6 +19,7 @@ import { NewMic } from '../../../../icons/NewMic';
 import { NewStop } from '../../../../icons/NewStop';
 import { NewTick } from '../../../../icons/NewTick';
 import { NewTrash } from '../../../../icons/NewTrash';
+import { IconProps } from '../../../../icons/utils/base';
 import { NativeHandlers } from '../../../../native';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
@@ -46,20 +47,24 @@ const StopRecording = ({
   const {
     theme: { semantics },
   } = useTheme();
-
   const onStopVoiceRecording = () => {
     NativeHandlers.triggerHaptic('impactMedium');
     stopVoiceRecordingHandler();
   };
 
+  const StopIcon = useCallback(
+    (props: IconProps) => <NewStop {...props} fill={semantics.buttonDestructiveBg} />,
+    [semantics.buttonDestructiveBg],
+  );
+
   return (
-    <IconButton
-      onPress={onStopVoiceRecording}
-      Icon={NewStop}
-      iconColor={semantics.accentError}
-      type='destructive'
+    <Button
+      variant='destructive'
+      type='outline'
       size='sm'
-      category='outline'
+      onPress={onStopVoiceRecording}
+      LeadingIcon={StopIcon}
+      iconOnly
     />
   );
 };
@@ -77,11 +82,12 @@ const UploadRecording = ({
   };
 
   return (
-    <IconButton
+    <Button
+      variant='primary'
+      type='solid'
       onPress={onUploadVoiceRecording}
-      Icon={NewTick}
-      iconColor='white'
-      type='primary'
+      LeadingIcon={NewTick}
+      iconOnly
       size='sm'
     />
   );
@@ -97,12 +103,13 @@ const DeleteRecording = ({
     deleteVoiceRecordingHandler();
   };
   return (
-    <IconButton
-      onPress={onDeleteVoiceRecording}
-      Icon={NewTrash}
-      type='secondary'
-      category='outline'
+    <Button
+      variant='secondary'
+      type='outline'
       size='sm'
+      iconOnly
+      onPress={onDeleteVoiceRecording}
+      LeadingIcon={NewTrash}
     />
   );
 };

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx

@@ -11,7 +11,6 @@ import Animated, {
   withSpring,
 } from 'react-native-reanimated';
 
-import { IconButton } from '../../../../components/ui/IconButton';
 import { useActiveAudioPlayer } from '../../../../contexts/audioPlayerContext/AudioPlayerContext';
 import {
   MessageInputContextValue,
@@ -24,6 +23,7 @@ import { useStateStore } from '../../../../hooks/useStateStore';
 import { NewMic } from '../../../../icons/NewMic';
 import { NativeHandlers } from '../../../../native';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
+import { Button } from '../../../ui';
 
 export type AudioRecordingButtonPropsWithContext = Pick<
   MessageInputContextValue,
@@ -228,13 +228,17 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
   return (
     <GestureDetector gesture={Gesture.Simultaneous(panGesture, tapGesture)}>
       <Animated.View style={[styles.container, animatedStyle, micButtonContainer]}>
-        <IconButton
-          disabled={true}
+        <Button
           accessibilityLabel='Start recording'
-          category='ghost'
-          Icon={NewMic}
+          variant='secondary'
+          type='ghost'
+          delayLongPress={asyncMessagesMinimumPressDuration}
+          LeadingIcon={NewMic}
+          onLongPress={onLongPressHandler}
+          onPress={onPressHandler}
           size='sm'
-          type='secondary'
+          iconOnly
+          disabled={true}
         />
       </Animated.View>
     </GestureDetector>

package/src/components/MessageInput/components/InputButtons/AttachButton.tsx

@@ -9,9 +9,8 @@ import {
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
-import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { NewPlus } from '../../../../icons/NewPlus';
-import { IconButton } from '../../../ui/IconButton';
+import { Button } from '../../../ui/';
 import { NativeAttachmentPicker } from '../NativeAttachmentPicker';
 
 type AttachButtonPropsWithContext = Pick<
@@ -35,11 +34,6 @@ const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
     selectedPicker,
     toggleAttachmentPicker,
   } = props;
-  const {
-    theme: {
-      messageInput: { attachButton },
-    },
-  } = useTheme();
 
   const onAttachButtonLayout = (event: LayoutChangeEvent) => {
     const layout = event.nativeEvent.layout;
@@ -82,15 +76,17 @@ const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
 
   return (
     <>
-      <IconButton
-        Icon={NewPlus}
+      <Button
+        variant='secondary'
+        type='outline'
+        size='lg'
+        iconOnly
+        LeadingIcon={NewPlus}
         onLayout={onAttachButtonLayout}
         onPress={onPressHandler}
-        size='lg'
-        status={selectedPicker === 'images' ? 'selected' : disabled ? 'disabled' : 'enabled'}
-        style={attachButton}
+        selected={selectedPicker === 'images'}
+        disabled={disabled}
         testID='attach-button'
-        type='secondary'
       />
       {showAttachButtonPicker ? (
         <NativeAttachmentPicker

package/src/components/MessageInput/components/OutputButtons/CooldownTimer.tsx

@@ -1,59 +1,22 @@
-import React, { useCallback, useMemo } from 'react';
-import { StyleSheet, Text } from 'react-native';
+import React from 'react';
 
-import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
-import { primitives } from '../../../../theme';
-import { IconButton } from '../../../ui/IconButton';
+import { Button } from '../../../../components/ui';
 import { useCooldownRemaining } from '../../hooks/useCooldownRemaining';
 
 /**
  * Renders an amount of seconds left for a cooldown to finish.
  **/
 export const CooldownTimer = () => {
   const seconds = useCooldownRemaining();
-  const styles = useStyles();
-  const {
-    theme: {
-      messageInput: {
-        cooldownTimer: { text },
-      },
-    },
-  } = useTheme();
-
-  const icon = useCallback(() => {
-    return (
-      <Text style={[styles.text, text]} testID='cooldown-seconds'>
-        {seconds}
-      </Text>
-    );
-  }, [seconds, text, styles]);
 
   return (
-    <IconButton
+    <Button
+      variant='primary'
+      type='solid'
       disabled={true}
-      Icon={icon}
-      iconColor='white'
       size='sm'
-      status='disabled'
+      label={seconds.toString()}
       testID='cooldown-timer'
     />
   );
 };
-
-const useStyles = () => {
-  const {
-    theme: { semantics },
-  } = useTheme();
-  return useMemo(
-    () =>
-      StyleSheet.create({
-        text: {
-          color: semantics.textDisabled,
-          fontSize: primitives.typographyFontSizeMd,
-          fontWeight: primitives.typographyFontWeightSemiBold,
-          lineHeight: primitives.typographyLineHeightNormal,
-        },
-      }),
-    [semantics.textDisabled],
-  );
-};

package/src/components/MessageInput/components/OutputButtons/EditButton.tsx

@@ -4,9 +4,8 @@ import {
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
-import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { NewTick } from '../../../../icons/NewTick';
-import { IconButton } from '../../../ui/IconButton';
+import { Button } from '../../../ui';
 
 export type EditButtonProps = Partial<Pick<MessageInputContextValue, 'sendMessage'>> & {
   /** Disables the button */
@@ -18,12 +17,6 @@ export const EditButton = (props: EditButtonProps) => {
   const { sendMessage: sendMessageFromContext } = useMessageInputContext();
   const sendMessage = propsSendMessage || sendMessageFromContext;
 
-  const {
-    theme: {
-      messageInput: { editButton },
-    },
-  } = useTheme();
-
   const onPressHandler = useCallback(() => {
     if (disabled) {
       return;
@@ -32,13 +25,14 @@ export const EditButton = (props: EditButtonProps) => {
   }, [disabled, sendMessage]);
 
   return (
-    <IconButton
-      Icon={NewTick}
-      iconColor='white'
+    <Button
+      variant='primary'
+      type='solid'
+      LeadingIcon={NewTick}
+      iconOnly
       onPress={onPressHandler}
       size='sm'
-      status={disabled ? 'disabled' : 'enabled'}
-      style={editButton}
+      disabled={disabled}
       testID='send-button'
     />
   );

package/src/components/MessageInput/components/OutputButtons/SendButton.tsx

@@ -4,9 +4,8 @@ import {
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
-import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { SendRight } from '../../../../icons/SendRight';
-import { IconButton } from '../../../ui/IconButton';
+import { Button } from '../../../ui';
 
 export type SendButtonProps = Partial<Pick<MessageInputContextValue, 'sendMessage'>> & {
   /** Disables the button */
@@ -18,12 +17,6 @@ export const SendButton = (props: SendButtonProps) => {
   const { sendMessage: sendMessageFromContext } = useMessageInputContext();
   const sendMessage = propsSendMessage || sendMessageFromContext;
 
-  const {
-    theme: {
-      messageInput: { sendButton },
-    },
-  } = useTheme();
-
   const onPressHandler = useCallback(() => {
     if (disabled) {
       return;
@@ -32,14 +25,15 @@ export const SendButton = (props: SendButtonProps) => {
   }, [disabled, sendMessage]);
 
   return (
-    <IconButton
+    <Button
+      variant='primary'
+      type='solid'
       disabled={disabled}
-      Icon={SendRight}
-      iconColor='white'
+      LeadingIcon={SendRight}
       onPress={onPressHandler}
       size='sm'
-      style={sendButton}
       testID='send-button'
+      iconOnly
     />
   );
 };