movius-chats 1.0.0

package/lib/typescript/components/AudioPlayer/types.d.ts

@@ -0,0 +1,5 @@
+export interface AudioPlayerProps {
+    audioUrl: string;
+    audioId: string;
+    isVideoPlaying: boolean;
+}

package/lib/typescript/components/ChatBubble/ChatBubble.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ChatBubbleProps } from './types';
+declare const _default: React.NamedExoticComponent<ChatBubbleProps>;
+export default _default;

package/lib/typescript/components/ChatBubble/MessageContent.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MessageContentProps } from './types';
+declare const _default: React.NamedExoticComponent<MessageContentProps>;
+export default _default;

package/lib/typescript/components/ChatBubble/MessageStatus.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MessageStatusProps } from './types';
+declare const _default: React.NamedExoticComponent<MessageStatusProps>;
+export default _default;

package/lib/typescript/components/ChatBubble/types.d.ts

@@ -0,0 +1,18 @@
+import { Message } from "../../types";
+export interface ChatBubbleProps {
+    message: Message;
+    isCurrentUser: boolean;
+    isFirstInSequence: boolean;
+    onLongPress?: () => void;
+}
+export interface MessageContentProps extends ChatBubbleProps {
+    onMediaPress: (type: "image" | "video", url: string) => void;
+    isVideoPlaying?: boolean;
+}
+export interface MessageStatusProps {
+    time: string;
+    status?: "read" | "delivered" | "sent";
+    isCurrentUser: boolean;
+    hasText: boolean;
+    hasAudio: boolean;
+}

package/lib/typescript/components/ChatInput/ChatInput.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ChatInputProps } from "./types";
+declare const _default: React.NamedExoticComponent<ChatInputProps>;
+export default _default;

package/lib/typescript/components/ChatInput/types.d.ts

@@ -0,0 +1,20 @@
+import { Message } from "../../types";
+export interface ChatInputProps {
+    onSendMessage: (message: Omit<Message, "id" | "time" | "status">) => void;
+    onTypingStart?: () => void;
+    onTypingEnd?: () => void;
+    onAttachmentPress?: () => void;
+    onCameraPress?: () => void;
+    onAudioRecordStart?: () => void;
+    onAudioRecordEnd?: () => void;
+    placeholder?: string;
+    CustomEmojiIcon?: () => React.ReactNode;
+    CustomAttachmentIcon?: () => React.ReactNode;
+    CustomCameraIcon?: () => React.ReactNode;
+    CustomSendIcon?: () => React.ReactNode;
+    CustomMicrophoneIcon?: () => React.ReactNode;
+}
+export interface InputHeightState {
+    height: number;
+    isMultiline: boolean;
+}

package/lib/typescript/components/MediaViewer/MediaViewer.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MediaViewerProps } from './types';
+declare const _default: React.NamedExoticComponent<MediaViewerProps>;
+export default _default;

package/lib/typescript/components/MediaViewer/types.d.ts

@@ -0,0 +1,5 @@
+export interface MediaViewerProps {
+    imageUrl: string;
+    videoUrl: string;
+    onClose: () => void;
+}

package/lib/typescript/components/TypingComponent/TypingIndicator.d.ts

@@ -0,0 +1,11 @@
+export interface TypingUser {
+    id: string;
+    avatar: string;
+    name: string;
+}
+interface TypingIndicatorProps {
+    typingUsers: TypingUser[];
+    currentUserId: string;
+}
+export declare const TypingIndicator: ({ typingUsers, currentUserId, }: TypingIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/typescript/context/AudioContext.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface AudioContextType {
+    currentlyPlayingId: string | null;
+    setCurrentlyPlayingId: (id: string | null) => void;
+}
+export declare const AudioProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useAudio: () => AudioContextType;
+export {};

package/lib/typescript/context/ChatContext.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { ChatScreenProps } from "../types";
+interface ChatContextType extends ChatScreenProps {
+    mediaUrl: {
+        imageUrl: string;
+        videoUrl: string;
+    };
+    setMediaUrl: (url: {
+        imageUrl: string;
+        videoUrl: string;
+    }) => void;
+    isVideoPlaying: boolean;
+    setIsVideoPlaying: (playing: boolean) => void;
+}
+export declare const ChatProvider: React.FC<ChatScreenProps & {
+    children: React.ReactNode;
+}>;
+export declare const useChatContext: () => ChatContextType;
+export {};

package/lib/typescript/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ChatScreenProps } from './types';
+declare const ChatScreen: React.FC<ChatScreenProps>;
+export default ChatScreen;

package/lib/typescript/types/index.d.ts

@@ -0,0 +1,85 @@
+import { ImageStyle, TextStyle, ViewStyle } from "react-native";
+export interface Message {
+    id: string;
+    text?: string;
+    image?: string;
+    video?: string;
+    audio?: string;
+    senderId: string;
+    time: string;
+    status: "read" | "delivered" | "sent";
+    senderName?: string;
+    senderAvatar?: string;
+}
+export interface ChatScreenProps {
+    messages: Message[];
+    currentUserId: string;
+    onSendMessage: (message: Omit<Message, "id" | "time" | "status">) => void;
+    onMessageLongPress?: (message: Message) => void;
+    onAttachmentPress?: () => void;
+    onAudioRecordEnd?: () => void;
+    onAudioRecordStart?: () => void;
+    onCameraPress?: () => void;
+    typingUsers?: Array<{
+        id: string;
+        avatar: string;
+        name: string;
+    }>;
+    onTypingStart?: () => void;
+    onTypingEnd?: () => void;
+    placeholder?: string;
+    theme?: {
+        colors?: {
+            sentMessageTailColor?: string;
+            receivedMessageTailColor?: string;
+            timestamp?: string;
+            inputsIconsColor?: string;
+            sendIconsColor?: string;
+            placeholderTextColor?: string;
+            audioPlayIconColor?: string;
+            audioPauseIconColor?: string;
+            videoPlayIconColor?: string;
+        };
+        bubbleStyle?: {
+            sent?: ViewStyle;
+            received?: ViewStyle;
+            avatarTextStyle?: TextStyle;
+            userNameStyle?: TextStyle;
+            avatarImageStyle?: ImageStyle;
+            typingContainerStyle?: ViewStyle;
+            additionalTypingUsersContainerStyle?: ViewStyle;
+            additionalTypingUsersTextStyle?: TextStyle;
+        };
+        messageStyle?: {
+            textStyle?: TextStyle;
+            audioPlayButtonStyle?: ViewStyle;
+            audioKnobStyle?: ViewStyle;
+            progressBarStyle?: ViewStyle;
+            activeProgressBarStyle?: ViewStyle;
+            audioDurationStyle?: TextStyle;
+        };
+        inputStyles?: {
+            inputSectionContainerStyle?: ViewStyle;
+            inputContainerStyle?: ViewStyle;
+            sendButtonStyle?: ViewStyle;
+        };
+    };
+    showAvatars?: boolean;
+    showUserNames?: boolean;
+    showEmojiButton?: boolean;
+    showAttachmentsButton?: boolean;
+    showCameraButton?: boolean;
+    showVoiceRecordButton?: boolean;
+    showBubbleTail?: boolean;
+    showMessageStatus?: boolean;
+    renderCustomInput?: () => React.ReactNode;
+    renderCustomVideoBubbleError?: () => React.ReactNode;
+    renderCustomTyping?: () => React.ReactNode;
+    CustomEmojiIcon?: () => React.ReactNode;
+    CustomAttachmentIcon?: () => React.ReactNode;
+    CustomCameraIcon?: () => React.ReactNode;
+    CustomSendIcon?: () => React.ReactNode;
+    CustomMicrophoneIcon?: () => React.ReactNode;
+    CustomPlayIcon?: () => React.ReactNode;
+    CustomPauseIcon?: () => React.ReactNode;
+}

package/lib/typescript/utils/datefunc.d.ts

@@ -0,0 +1 @@
+export declare const formatDuration: (time: number) => string;

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "movius-chats",
+  "version": "1.0.0",
+  "description": "A highly customizable, feature-rich chat interface component for React Native applications",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src",
+  "source": "src",
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typescript": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "prepare": "yarn build",
+    "build": "yarn clean && yarn build:js && yarn build:types",
+    "build:types": "tsc --project tsconfig.types.json",
+    "build:js": "rollup -c rollup.config.cjs",
+    "clean": "rimraf lib",
+    "release": "release-it",
+    "example": "yarn --cwd example"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/David-Atueyi/Movius-Chats.git"
+  },
+  "keywords": [
+    "react-native",
+    "chat",
+    "messaging",
+    "ui-component"
+  ],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "bugs": {
+    "url": "https://github.com/David-Atueyi/Movius-Chats/issues"
+  },
+  "homepage": "https://github.com/David-Atueyi/Movius-Chats#readme",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": "*",
+    "react-native-reanimated": "*"
+  },
+  "dependencies": {
+    "react-native-image-zoom-viewer": "^3.0.1",
+    "react-native-sound": "^0.11.2",
+    "react-native-svg": "15.2.0",
+    "react-native-video": "^6.9.1",
+    "twrnc": "^4.6.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.3",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@babel/plugin-transform-class-properties": "^7.23.3",
+    "@babel/plugin-transform-private-methods": "^7.23.3",
+    "@babel/plugin-transform-private-property-in-object": "^7.23.3",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@types/jest": "^29.5.11",
+    "@types/react": "18.3.18",
+    "@types/react-native": "^0.73.0",
+    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@typescript-eslint/parser": "^6.19.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "jest": "^29.7.0",
+    "metro-react-native-babel-preset": "^0.77.0",
+    "prettier": "^3.2.0",
+    "react-native-reanimated": "^3.0.0",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.34.9",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "@rollup/plugin-terser": "^0.4.4",
+    "typescript": "^5.3.3"
+  },
+  "prettier": {
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5"
+  }
+}

package/src/assets/Icons/ArrowBack2RoundedIcon.tsx

@@ -0,0 +1,25 @@
+
+import { ViewStyle } from "react-native";
+import Svg, { Path } from "react-native-svg";
+
+export const ArrowBack2RoundedIcon = ({
+  style,
+  color,
+}: {
+  style?: ViewStyle;
+  color?: string;
+}) => {
+  return (
+    <Svg style={style} fill={color} viewBox="0 0 48 48">
+      <Path
+        fillRule="evenodd"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="4"
+        d="M8 9.115c0-1.82 2.235-2.694 3.47-1.356l29.432 31.884c1.182 1.282.273 3.357-1.47 3.357H10a2 2 0 0 1-2-2z"
+        clipRule="evenodd"
+      ></Path>
+    </Svg>
+  );
+};

package/src/assets/Icons/CameraIcon.tsx

@@ -0,0 +1,20 @@
+import { ViewStyle } from "react-native";
+import { Circle, G, Path, Svg } from "react-native-svg";
+
+export const CameraIcon = ({
+  style,
+  color
+}: {
+  style?: ViewStyle;
+  color?: string;
+}) => {
+  return (
+    <Svg style={style} viewBox="0 0 24 24">
+      <G fill="none" strokeWidth="1.5" stroke={color}>
+        <Circle cx="12" cy="13" r="3"></Circle>
+        <Path d="M9.778 21h4.444c3.121 0 4.682 0 5.803-.735a4.4 4.4 0 0 0 1.226-1.204c.749-1.1.749-2.633.749-5.697s0-4.597-.749-5.697a4.4 4.4 0 0 0-1.226-1.204c-.72-.473-1.622-.642-3.003-.702c-.659 0-1.226-.49-1.355-1.125A2.064 2.064 0 0 0 13.634 3h-3.268c-.988 0-1.839.685-2.033 1.636c-.129.635-.696 1.125-1.355 1.125c-1.38.06-2.282.23-3.003.702A4.4 4.4 0 0 0 2.75 7.667C2 8.767 2 10.299 2 13.364s0 4.596.749 5.697c.324.476.74.885 1.226 1.204C5.096 21 6.657 21 9.778 21Z"></Path>
+        <Path strokeLinecap="round" d="M19 10h-1"></Path>
+      </G>
+    </Svg>
+  );
+};

package/src/assets/Icons/CheckAllIcon.tsx

@@ -0,0 +1,13 @@
+
+import { ViewStyle } from "react-native";
+import Svg, { Path } from "react-native-svg";
+
+export const CheckAllIcon = ({ style }: { style?: ViewStyle }) => {
+  return (
+    <Svg style={style} viewBox="0 0 24 24">
+      <Path
+        d="M.41 13.41L6 19l1.41-1.42L1.83 12m20.41-6.42L11.66 16.17L7.5 12l-1.43 1.41L11.66 19l12-12M18 7l-1.41-1.42l-6.35 6.35l1.42 1.41z"
+      ></Path>
+    </Svg>
+  );
+};

package/src/assets/Icons/CheckIcon.tsx

@@ -0,0 +1,11 @@
+
+import { ViewStyle } from "react-native";
+import Svg, { Path } from "react-native-svg";
+
+export const CheckIcon = ({ style }: { style?: ViewStyle }) => {
+  return (
+    <Svg style={style} viewBox="0 0 24 24">
+      <Path d="m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"></Path>
+    </Svg>
+  );
+};

package/src/assets/Icons/EmojiFunnySquareIcon.tsx

@@ -0,0 +1,41 @@
+
+import { ViewStyle } from "react-native";
+import Svg, { Ellipse, G, Path } from "react-native-svg";
+
+export const EmojiFunnySquareIcon = ({ style ,color}: { style?: ViewStyle,color?: string }) => {
+  return (
+    <Svg style={style} viewBox="0 0 24 24">
+      <G fill="none" stroke={color}>
+        <Path
+          strokeLinecap="round"
+          strokeWidth="1.5"
+          d="M8.913 15.934c1.258.315 2.685.315 4.122-.07s2.673-1.099 3.605-2.001"
+        ></Path>
+        <Ellipse
+          cx="14.509"
+          cy="9.774"
+          fill="currentColor"
+          rx="1"
+          ry="1.5"
+          transform="rotate(-15 14.51 9.774)"
+        ></Ellipse>
+        <Ellipse
+          cx="8.714"
+          cy="11.328"
+          fill="currentColor"
+          rx="1"
+          ry="1.5"
+          transform="rotate(-15 8.714 11.328)"
+        ></Ellipse>
+        <Path
+          strokeWidth="1.5"
+          d="M3.204 14.357c-1.112-4.147-1.667-6.22-.724-7.853s3.016-2.19 7.163-3.3c4.147-1.112 6.22-1.667 7.853-.724s2.19 3.016 3.3 7.163c1.111 4.147 1.667 6.22.724 7.853s-3.016 2.19-7.163 3.3c-4.147 1.111-6.22 1.667-7.853.724s-2.19-3.016-3.3-7.163Z"
+        ></Path>
+        <Path
+          strokeWidth="1.5"
+          d="m13 16l.478.974a1.5 1.5 0 1 0 2.693-1.322l-.46-.935"
+        ></Path>
+      </G>
+    </Svg>
+  );
+};

package/src/assets/Icons/LoadingIcon.tsx

@@ -0,0 +1,15 @@
+import { ViewStyle } from "react-native";
+import Svg, { Path } from "react-native-svg";
+
+export const LoadingIcon = ({ style }: { style?: ViewStyle }) => {
+  return (
+    <Svg
+     style={style}
+      viewBox="0 0 1024 1024"
+    >
+      <Path
+        d="M988 548c-19.9 0-36-16.1-36-36c0-59.4-11.6-117-34.6-171.3a440.5 440.5 0 0 0-94.3-139.9a437.7 437.7 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150s83.9 101.8 109.7 162.7c26.7 63.1 40.2 130.2 40.2 199.3c.1 19.9-16 36-35.9 36"
+      ></Path>
+    </Svg>
+  );
+};

package/src/assets/Icons/MicrophoneIcon.tsx

@@ -0,0 +1,24 @@
+
+import { ViewStyle } from "react-native";
+import Svg, { G, Path } from "react-native-svg";
+
+export const MicrophoneIcon = ({
+  style,
+  color,
+}: {
+  style?: ViewStyle;
+  color?: string;
+}) => {
+  return (
+    <Svg style={style} viewBox="0 0 24 24">
+      <G fill="none" strokeWidth="1.5" stroke={color}>
+        <Path d="M7 8a5 5 0 0 1 10 0v3a5 5 0 0 1-10 0z"></Path>
+        <Path
+          strokeLinecap="round"
+          d="M13.5 8H17m-3.5 3H17M7 8h2m-2 3h2m11-1v1a8 8 0 0 1-8 8m-8-9v1a8 8 0 0 0 8 8m0 0v3"
+          opacity=".5"
+        ></Path>
+      </G>
+    </Svg>
+  );
+};

package/src/assets/Icons/PaperClipIcon.tsx

@@ -0,0 +1,17 @@
+
+import { ViewStyle } from "react-native";
+import Svg, { Path } from "react-native-svg";
+
+export const PaperClipIcon = ({
+  style,
+  color,
+}: {
+  style?: ViewStyle;
+  color?: string;
+}) => {
+  return (
+    <Svg style={style} fill={color} viewBox="0 0 24 24">
+      <Path d="M17.346 15.539q0 2.271-1.565 3.866T11.952 21t-3.838-1.595t-1.576-3.867v-8.73q0-1.587 1.092-2.697Q8.72 3 10.308 3t2.678 1.11t1.091 2.698v8.269q0 .88-.615 1.517q-.614.637-1.498.637t-1.52-.627t-.636-1.527V6.769h1v8.308q0 .479.327.816q.328.338.807.338t.807-.338t.328-.816V6.789q-.006-1.166-.802-1.977Q11.48 4 10.308 4q-1.163 0-1.966.821q-.804.821-.804 1.987v8.73q-.005 1.853 1.283 3.157Q10.11 20 11.96 20q1.823 0 3.1-1.305t1.287-3.156v-8.77h1z"></Path>
+    </Svg>
+  );
+};

package/src/assets/Icons/PaperPlaneIcon.tsx

@@ -0,0 +1,24 @@
+import { ViewStyle } from "react-native";
+
+import Svg, { G, Path } from "react-native-svg";
+
+export const PaperPlaneIcon = ({
+  style,
+  color,
+}: {
+  style?: ViewStyle;
+  color?: string;
+}) => {
+  return (
+    <Svg style={style} viewBox="0 0 24 24">
+      <G fill="none" strokeWidth="1.5" stroke={color}>
+        <Path d="m18.636 15.67l1.716-5.15c1.5-4.498 2.25-6.747 1.062-7.934s-3.436-.438-7.935 1.062L8.33 5.364C4.7 6.574 2.885 7.18 2.37 8.067a2.72 2.72 0 0 0 0 2.73c.515.888 2.33 1.493 5.96 2.704c.584.194.875.291 1.119.454c.236.158.439.361.597.597c.163.244.26.535.454 1.118c1.21 3.63 1.816 5.446 2.703 5.962a2.72 2.72 0 0 0 2.731 0c.887-.516 1.492-2.331 2.703-5.962Z"></Path>
+        <Path
+          strokeLinecap="round"
+          d="m17.79 6.21l-4.211 4.165"
+          opacity=".5"
+        ></Path>
+      </G>
+    </Svg>
+  );
+};

package/src/assets/Icons/PauseIcon.tsx

@@ -0,0 +1,21 @@
+import { ViewStyle } from "react-native";
+import Svg, { Path } from "react-native-svg";
+
+export const PauseIcon = ({
+  style,
+  color,
+}: {
+  style?: ViewStyle;
+  color?: string;
+}) => {
+  return (
+    <Svg style={style} viewBox="0 0 15 15">
+      <Path
+        fill={color}
+        fillRule="evenodd"
+        d="M6.05 2.75a.55.55 0 0 0-1.1 0v9.5a.55.55 0 0 0 1.1 0zm4 0a.55.55 0 0 0-1.1 0v9.5a.55.55 0 0 0 1.1 0z"
+        clipRule="evenodd"
+      ></Path>
+    </Svg>
+  );
+};

package/src/assets/Icons/PlayIcon.tsx

@@ -0,0 +1,20 @@
+import { ViewStyle } from "react-native";
+
+import Svg, { Path } from "react-native-svg";
+
+export const PlayIcon = ({
+  style,
+  color,
+}: {
+  style?: ViewStyle;
+  color?: string;
+}) => {
+  return (
+    <Svg style={style} viewBox="0 0 24 24">
+      <Path
+        fill={color}
+        d="M8 17.175V6.825q0-.425.3-.713t.7-.287q.125 0 .263.037t.262.113l8.15 5.175q.225.15.338.375t.112.475t-.112.475t-.338.375l-8.15 5.175q-.125.075-.262.113T9 18.175q-.4 0-.7-.288t-.3-.712"
+      ></Path>
+    </Svg>
+  );
+};

package/src/assets/Icons/XIcon.tsx

@@ -0,0 +1,20 @@
+import { ViewStyle } from "react-native";
+import { Line, Svg } from "react-native-svg";
+import tw from "twrnc"; // assuming you're using twrnc for styling
+
+export function XIcon({ style }: { style?: ViewStyle }) {
+  return (
+    <Svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={tw.style("feather feather-x", style)} 
+    >
+      <Line x1="18" y1="6" x2="6" y2="18"></Line>
+      <Line x1="6" y1="6" x2="18" y2="18"></Line>
+    </Svg>
+  );
+}