@codewithvincent/react-native-love-chat 0.1.0

package/dist/types.d.ts

@@ -0,0 +1,71 @@
+import { PartialTheme } from './utils/theme';
+export interface IUser {
+    _id: string | number;
+    name?: string;
+    avatar?: string | number;
+}
+export interface IMessage {
+    _id: string | number;
+    text: string;
+    createdAt: Date | number;
+    user: IUser;
+    image?: string;
+    video?: string;
+    audio?: string;
+    system?: boolean;
+    sent?: boolean;
+    received?: boolean;
+    pending?: boolean;
+    quickReplies?: any;
+    caption?: string;
+    fileName?: string;
+    fileType?: string;
+    fileUrl?: string;
+    replyTo?: IMessage;
+    reactions?: any[];
+    status?: 'pending' | 'sent' | 'delivered' | 'read';
+    isMine?: boolean;
+}
+export interface ChatProps {
+    messages: IMessage[];
+    user: IUser;
+    onSend: (messages: IMessage[]) => void;
+    placeholder?: string;
+    text?: string;
+    onInputTextChanged?: (text: string) => void;
+    dateFormat?: string;
+    timeFormat?: string;
+    renderBubble?: (props: any) => React.ReactNode;
+    renderInputToolbar?: (props: any) => React.ReactNode;
+    renderComposer?: (props: any) => React.ReactNode;
+    renderSend?: (props: any) => React.ReactNode;
+    renderAvatar?: (props: any) => React.ReactNode;
+    renderMessage?: (props: any) => React.ReactNode;
+    renderMessageText?: (props: any) => React.ReactNode;
+    renderMessageImage?: (props: any) => React.ReactNode;
+    renderMessageVideo?: (props: any) => React.ReactNode;
+    renderMessageAudio?: (props: any) => React.ReactNode;
+    renderFooter?: () => React.ReactNode;
+    renderChatFooter?: () => React.ReactNode;
+    renderUploadFooter?: (props: any) => React.ReactNode;
+    loadEarlier?: boolean;
+    onLoadEarlier?: () => void;
+    isLoadingEarlier?: boolean;
+    inverted?: boolean;
+    listViewProps?: any;
+    onPressActionButton?: () => void;
+    renderActions?: (props: any) => React.ReactNode;
+    textInputProps?: any;
+    minInputToolbarHeight?: number;
+    onPressAttachment?: (type: string) => void;
+    onReply?: (message: IMessage) => void;
+    onClearReply?: () => void;
+    onReaction?: (message: IMessage, reaction: string) => void;
+    onDeleteMessage?: (message: IMessage) => void;
+    onDownloadFile?: (message: IMessage) => void;
+    keyboardShouldPersistTaps?: 'always' | 'never' | 'handled';
+    isTyping?: boolean;
+    theme?: PartialTheme;
+    containerStyle?: any;
+    messagesContainerStyle?: any;
+}

package/dist/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/utils/index.d.ts

@@ -0,0 +1,14 @@
+export declare const appSize: {
+    width: (percent: number) => number;
+    height: (percent: number) => number;
+    font: (size: number) => number;
+    SCREEN_WIDTH: number;
+    SCREEN_HEIGHT: number;
+};
+export declare const Logger: {
+    info: (...args: any[]) => void;
+    error: (...args: any[]) => void;
+    debug: (...args: any[]) => void;
+};
+export declare const isSameUser: (currentMessage: any, diffMessage: any) => boolean;
+export declare const isSameDay: (currentMessage: any, diffMessage: any) => boolean;

package/dist/utils/index.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isSameDay = exports.isSameUser = exports.Logger = exports.appSize = void 0;
+const react_native_1 = require("react-native");
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = react_native_1.Dimensions.get('window');
+const widthPercentageToDP = (widthPercent) => {
+    const elemWidth = typeof widthPercent === "number" ? widthPercent : parseFloat(widthPercent);
+    return react_native_1.PixelRatio.roundToNearestPixel((SCREEN_WIDTH * elemWidth) / 100);
+};
+const heightPercentageToDP = (heightPercent) => {
+    const elemHeight = typeof heightPercent === "number" ? heightPercent : parseFloat(heightPercent);
+    return react_native_1.PixelRatio.roundToNearestPixel((SCREEN_HEIGHT * elemHeight) / 100);
+};
+// Layout utility similar to the original appSize
+exports.appSize = {
+    width: (percent) => widthPercentageToDP(percent),
+    height: (percent) => heightPercentageToDP(percent),
+    font: (size) => size * (SCREEN_WIDTH / 375), // approximate scaling
+    SCREEN_WIDTH,
+    SCREEN_HEIGHT,
+};
+exports.Logger = {
+    info: (...args) => console.log('[Chat]', ...args),
+    error: (...args) => console.error('[Chat Error]', ...args),
+    debug: (...args) => console.debug('[Chat Debug]', ...args),
+};
+const isSameUser = (currentMessage, diffMessage) => {
+    return !!(diffMessage &&
+        diffMessage.user &&
+        currentMessage.user &&
+        diffMessage.user._id === currentMessage.user._id);
+};
+exports.isSameUser = isSameUser;
+const isSameDay = (currentMessage, diffMessage) => {
+    if (!diffMessage || !diffMessage.createdAt) {
+        return false;
+    }
+    const currentCreatedAt = new Date(currentMessage.createdAt);
+    const diffCreatedAt = new Date(diffMessage.createdAt);
+    return (currentCreatedAt.getDate() === diffCreatedAt.getDate() &&
+        currentCreatedAt.getMonth() === diffCreatedAt.getMonth() &&
+        currentCreatedAt.getFullYear() === diffCreatedAt.getFullYear());
+};
+exports.isSameDay = isSameDay;

package/dist/utils/theme.d.ts

@@ -0,0 +1,77 @@
+import React from 'react';
+export declare const defaultTheme: {
+    colors: {
+        primary: string;
+        darkPrimary: string;
+        lightRed: string;
+        darkRed: string;
+        black: string;
+        lightBlack: string;
+        gray: string;
+        white: string;
+        darkBrown: string;
+        lightGrey: string;
+        softGray: string;
+        borderGray: string;
+        textGray: string;
+        softRed: string;
+        verySoftGray: string;
+        timestamp: string;
+        ownMessageBubble: string;
+        otherMessageBubble: string;
+        ownMessageText: string;
+        otherMessageText: string;
+        ownFileBg: string;
+        otherFileBg: string;
+    };
+    fonts: {
+        light: string;
+        regular: string;
+        medium: string;
+        semiBold: string;
+        bold: string;
+        extraBold: string;
+    };
+};
+export type Theme = typeof defaultTheme;
+export type PartialTheme = {
+    [K in keyof Theme]?: Partial<Theme[K]>;
+};
+export declare const useTheme: () => {
+    colors: {
+        primary: string;
+        darkPrimary: string;
+        lightRed: string;
+        darkRed: string;
+        black: string;
+        lightBlack: string;
+        gray: string;
+        white: string;
+        darkBrown: string;
+        lightGrey: string;
+        softGray: string;
+        borderGray: string;
+        textGray: string;
+        softRed: string;
+        verySoftGray: string;
+        timestamp: string;
+        ownMessageBubble: string;
+        otherMessageBubble: string;
+        ownMessageText: string;
+        otherMessageText: string;
+        ownFileBg: string;
+        otherFileBg: string;
+    };
+    fonts: {
+        light: string;
+        regular: string;
+        medium: string;
+        semiBold: string;
+        bold: string;
+        extraBold: string;
+    };
+};
+export declare const ThemeProvider: ({ theme, children, }: {
+    theme?: PartialTheme;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/utils/theme.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeProvider = exports.useTheme = exports.defaultTheme = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.defaultTheme = {
+    colors: {
+        primary: '#e6e1e1',
+        darkPrimary: '#e3e3e4ff',
+        lightRed: '#EB5757',
+        darkRed: '#ef4136',
+        black: '#000',
+        lightBlack: '#605e5eff',
+        gray: '#999',
+        white: '#fff',
+        darkBrown: '#54392A',
+        lightGrey: '#f8f8f8',
+        softGray: '#fafafa',
+        borderGray: '#eee',
+        textGray: '#eee',
+        softRed: '#fff7f7',
+        verySoftGray: '#f9f9f9',
+        timestamp: '#8b8b8b',
+        ownMessageBubble: '#EB5757',
+        otherMessageBubble: '#f9f9f9',
+        ownMessageText: '#fff',
+        otherMessageText: '#000',
+        ownFileBg: 'rgba(0, 0, 0, 0.1)',
+        otherFileBg: 'rgba(0, 0, 0, 0.05)',
+    },
+    fonts: {
+        light: 'System',
+        regular: 'System',
+        medium: 'System',
+        semiBold: 'System',
+        bold: 'System',
+        extraBold: 'System',
+    },
+};
+const ThemeContext = (0, react_1.createContext)(exports.defaultTheme);
+const useTheme = () => (0, react_1.useContext)(ThemeContext);
+exports.useTheme = useTheme;
+const ThemeProvider = ({ theme, children, }) => {
+    const mergedTheme = (0, react_1.useMemo)(() => {
+        if (!theme)
+            return exports.defaultTheme;
+        return {
+            ...exports.defaultTheme,
+            colors: { ...exports.defaultTheme.colors, ...theme.colors },
+            fonts: { ...exports.defaultTheme.fonts, ...theme.fonts },
+        };
+    }, [theme]);
+    return ((0, jsx_runtime_1.jsx)(ThemeContext.Provider, { value: mergedTheme, children: children }));
+};
+exports.ThemeProvider = ThemeProvider;

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@codewithvincent/react-native-love-chat",
+  "version": "0.1.0",
+  "description": "A fully featured React Native chat UI component with replies, reactions, media, and theming.",
+  "license": "MIT",
+  "private": false,
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "prepare": "npm run build",
+    "test": "jest",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "lint": "echo \"No lint configured\""
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.73.0",
+    "react-native-gesture-handler": ">=2.12.0",
+    "react-native-reanimated": ">=3.6.0",
+    "react-native-safe-area-context": ">=4.10.0",
+    "react-native-root-siblings": ">=4.2.1",
+    "@shopify/flash-list": ">=1.6.3",
+    "react-native-svg": ">=15.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@react-native-community/blur": {
+      "optional": true
+    },
+    "expo-blur": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "typescript": "^5.3.3",
+    "jest": "^29.7.0",
+    "@types/jest": "^29.5.11",
+    "ts-jest": "^29.2.4",
+    "jest-environment-jsdom": "^29.7.0",
+    "babel-jest": "^29.7.0",
+    "@babel/core": "^7.23.9",
+    "metro-react-native-babel-preset": "^0.76.8",
+    "@testing-library/react-native": "^12.4.3",
+    "react-test-renderer": "18.2.0",
+    "react-native": "0.73.6",
+    "react": "18.2.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-org/react-native-standalone-chat.git"
+  },
+  "keywords": [
+    "react-native",
+    "chat",
+    "ui",
+    "messages",
+    "reactions",
+    "reply",
+    "components"
+  ]
+}