interface exports

package.json

@@ -1,11 +1,11 @@
 {
   "name": "react-chat-elements",
-  "version": "11.0.1",
+  "version": "12.0.0",
   "description": "Reactjs chat components",
   "author": "Avare Kodcu <abdurrahmaneker58@gmail.com>",
   "main": "dist/index.js",
   "types": "dist/type.d.ts",
-  "module": "dist/indes.es.js",
+  "module": "dist/index.es.js",
   "devDependencies": {
     "@babel/core": "^7.18.5",
     "@babel/preset-react": "^7.17.12",

src/AudioMessage/AudioMessage.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { IAudioMessageProps } from '../type'
 import './AudioMessage.css'
 
 const AudioMessage: React.FC<IAudioMessageProps> = props => {

src/Avatar/Avatar.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react'
 import './Avatar.css'
 import classNames from 'classnames'
+import { IAvatarProps } from '../type'
 
 const Avatar: React.FC<IAvatarProps> = props => {
   let loadedAvatars: string[] = []

src/Button/Button.tsx

@@ -1,5 +1,6 @@
 import './Button.css'
 import classNames from 'classnames'
+import { IButtonProps } from '../type'
 
 const Button: React.FC<IButtonProps> = props => {
   return (

src/ChatItem/ChatItem.tsx

@@ -8,6 +8,7 @@ import { format } from 'timeago.js'
 import classNames from 'classnames'
 
 import { MdVideoCall, MdVolumeOff, MdVolumeUp } from 'react-icons/md'
+import { IChatItemProps } from '../type'
 
 const ChatItem: React.FC<IChatItemProps> = props => {
   const [onHoverTool, setOnHoverTool] = useState(false)

src/ChatList/ChatList.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames'
 import './ChatList.css'
 
 import ChatItem from '../ChatItem/ChatItem'
+import { IChatListProps, ChatListEvent } from '../type'
 
 const ChatList: React.FC<IChatListProps> = props => {
   const onClick: ChatListEvent = (item, index, event) => {

src/Circle/Circle.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useCallback } from 'react'
 import { Circle } from 'progressbar.js'
+import { ICircleProps } from '../type'
 
 let wrapper: HTMLDivElement
 const ProgressCircle: React.FC<ICircleProps> = ({ animate, progressOptions, className }) => {

src/Dropdown/Dropdown.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import './Dropdown.css'
 import classNames from 'classnames'
 import Button from '../Button/Button'
+import { IDropdownProps, IDropdownItemType } from '../type'
 
 const Dropdown: React.FC<IDropdownProps> = props => {
   const [show, setShow] = useState<boolean>(false)

src/FileMessage/FileMessage.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { FaFile, FaCloudDownloadAlt, FaExclamationTriangle } from 'react-icons/fa'
 import ProgressCircle from '../Circle/Circle'
+import { IFileMessageProps } from '../type'
 import './FileMessage.css'
 
 const FileMessage: React.FC<IFileMessageProps> = props => {

src/Input/Input.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react'
 import './Input.css'
 import classNames from 'classnames'
+import { IInputProps } from '../type'
 
 const Input: React.FC<IInputProps> = props => {
   useEffect(() => {

src/LocationMessage/LocationMessage.tsx

@@ -1,5 +1,6 @@
 import './LocationMessage.css'
 import classNames from 'classnames'
+import { ILocationMessageProps } from '../type'
 
 const STATIC_URL =
   'https://maps.googleapis.com/maps/api/staticmap?markers=color:MARKER_COLOR|LATITUDE,LONGITUDE&zoom=ZOOM&size=270x200&scale=2&key=KEY'

src/MeetingItem/MeetingItem.tsx

@@ -8,6 +8,7 @@ import Avatar from '../Avatar/Avatar'
 import { format } from 'timeago.js'
 
 import classNames from 'classnames'
+import { IMeetingItemProps } from '../type'
 
 const MeetingItem: FC<IMeetingItemProps> = props => {
   const statusColorType = props.statusColorType

src/MeetingLink/MeetingLink.tsx

@@ -2,6 +2,7 @@ import { FC } from 'react'
 import './MeetingLink.css'
 
 import { MdOutlineVideoCall } from 'react-icons/md'
+import { IMeetingLinkMessageProps } from '../type'
 
 const MeetingLink: FC<IMeetingLinkMessageProps> = ({ message, onMeetingMoreSelect }) => {
   const onHandleClick = (): void => {

src/MeetingList/MeetingList.tsx

@@ -3,6 +3,7 @@ import './MeetingList.css'
 
 import MeetingItem from '../MeetingItem/MeetingItem'
 import classNames from 'classnames'
+import { IMeetingListProps, MeetingListEvent } from '../type'
 
 const MeetingList: FC<IMeetingListProps> = props => {
   const onClick: MeetingListEvent = (item, index, event) => {

src/MeetingMessage/MeetingMessage.tsx

@@ -2,16 +2,17 @@ import React, { FC, useState } from 'react'
 import './MeetingMessage.css'
 
 import { FaCalendar, FaCaretDown, FaCaretRight } from 'react-icons/fa'
-import { MdMoreHoriz } from 'react-icons/md'
-import { IoMdChatboxes } from 'react-icons/io'
 import { HiOutlineVideoCamera } from 'react-icons/hi'
+import { IoMdChatboxes } from 'react-icons/io'
+import { MdMoreHoriz } from 'react-icons/md'
 
 import { format } from 'timeago.js'
 
 import Avatar from '../Avatar/Avatar'
 import Dropdown from '../Dropdown/Dropdown'
 
 import classNames from 'classnames'
+import { IMeetingMessageProps, MeetingMessageEvent } from '../type'
 
 const MeetingMessage: FC<IMeetingMessageProps> = ({
   date,

src/MessageBox/MessageBox.tsx

@@ -21,6 +21,7 @@ import { MdAccessTime, MdCheck, MdMessage, MdDelete, MdBlock } from 'react-icons
 import { format } from 'timeago.js'
 
 import classNames from 'classnames'
+import { IMessageBoxProps } from '../type'
 
 const MessageBox: React.FC<IMessageBoxProps> = props => {
   const prevProps = useRef(props.data)

src/MessageList/MessageList.tsx

@@ -1,10 +1,11 @@
-import React, { useState, useEffect, useRef, FC, Key } from 'react'
+import React, { FC, Key, useEffect, useRef, useState } from 'react'
 import './MessageList.css'
 
 import MessageBox from '../MessageBox/MessageBox'
 
-import { FaChevronDown } from 'react-icons/fa'
 import classNames from 'classnames'
+import { FaChevronDown } from 'react-icons/fa'
+import { IMessageListProps, MessageListEvent } from '../type'
 
 const MessageList: FC<IMessageListProps> = props => {
   const [scrollBottom, setScrollBottom] = useState(0)

src/Navbar/Navbar.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import './Navbar.css'
 import classNames from 'classnames'
+import { INavbarProps } from '../type'
 
 const Navbar: React.FC<INavbarProps> = props => {
   return (

src/PhotoMessage/PhotoMessage.tsx

@@ -4,6 +4,7 @@ import './PhotoMessage.css'
 
 import { FaCloudDownloadAlt, FaExclamationTriangle } from 'react-icons/fa'
 import ProgressCircle from '../Circle/Circle'
+import { IPhotoMessageProps, IProgressOptions } from '../type'
 
 const PhotoMessage: React.FC<IPhotoMessageProps> = props => {
   var progressOptions = {

src/Popup/Popup.tsx

@@ -4,6 +4,7 @@ import './Popup.css'
 import Button from '../Button/Button'
 
 import classNames from 'classnames'
+import { IPopupProps } from '../type'
 
 const Popup: React.FC<IPopupProps> = props => {
   if (props.popup?.show === true)

src/ReplyMessage/ReplyMessage.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import './ReplyMessage.css'
 
 import classNames from 'classnames'
+import { IReplyMessageProps } from '../type'
 
 const ReplyMessage: React.FC<IReplyMessageProps> = props => {
   return (

src/SideBar/SideBar.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import './SideBar.css'
 
 import classNames from 'classnames'
+import { ISideBarProps } from '../type'
 
 const SideBar: React.FC<ISideBarProps> = props => {
   return (

src/SpotifyMessage/SpotifyMessage.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { ISpotifyMessageProps } from '../type'
 import './SpotifyMessage.css'
 
 const SpotifyMessage: React.FC<ISpotifyMessageProps> = props => {

src/SystemMessage/SystemMessage.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import './SystemMessage.css'
 
 import classNames from 'classnames'
+import { ISystemMessageProps } from '../type'
 
 const SystemMessage: React.FC<ISystemMessageProps> = props => {
   return (

src/VideoMessage/VideoMessage.tsx

@@ -6,6 +6,7 @@ import { FaCloudDownloadAlt, FaExclamationTriangle } from 'react-icons/fa'
 
 import classNames from 'classnames'
 import ProgressCircle from '../Circle/Circle'
+import { IProgressOptions, IVideoMessageProps } from '../type'
 
 const VideoMessage: React.FC<IVideoMessageProps> = props => {
   var progressOptions = {

src/index.ts

@@ -1,37 +1,51 @@
 import MessageBox from './MessageBox/MessageBox'
 import ChatItem from './ChatItem/ChatItem'
-import SystemMessage from './SystemMessage/SystemMessage'
 import ChatList from './ChatList/ChatList'
 import MessageList from './MessageList/MessageList'
+import MeetingItem from './MeetingItem/MeetingItem'
+import MeetingList from './MeetingList/MeetingList'
+import SystemMessage from './SystemMessage/SystemMessage'
+import ReplyMessage from './ReplyMessage/ReplyMessage'
+import MeetingMessage from './MeetingMessage/MeetingMessage'
+import AudioMessage from './AudioMessage/AudioMessage'
+import FileMessage from './FileMessage/FileMessage'
+import LocationMessage from './LocationMessage/LocationMessage'
+import SpotifyMessage from './SpotifyMessage/SpotifyMessage'
+import VideoMessage from './VideoMessage/VideoMessage'
+import PhotoMessage from './PhotoMessage/PhotoMessage'
+import MeetingLink from './MeetingLink/MeetingLink'
 import Input from './Input/Input'
 import Button from './Button/Button'
 import Avatar from './Avatar/Avatar'
 import Navbar from './Navbar/Navbar'
 import Dropdown from './Dropdown/Dropdown'
 import SideBar from './SideBar/SideBar'
 import Popup from './Popup/Popup'
-import ReplyMessage from './ReplyMessage/ReplyMessage'
-import MeetingItem from './MeetingItem/MeetingItem'
-import MeetingList from './MeetingList/MeetingList'
-import MeetingMessage from './MeetingMessage/MeetingMessage'
-import AudioMessage from './AudioMessage/AudioMessage'
+import Circle from './Circle/Circle'
 
 export {
   MessageBox,
   ChatItem,
-  SystemMessage,
   ChatList,
   MessageList,
+  MeetingItem,
+  MeetingList,
+  SystemMessage,
+  ReplyMessage,
+  MeetingMessage,
+  AudioMessage,
+  FileMessage,
+  LocationMessage,
+  SpotifyMessage,
+  VideoMessage,
+  PhotoMessage,
+  MeetingLink,
   Input,
   Button,
   Avatar,
   Navbar,
   Dropdown,
   SideBar,
   Popup,
-  ReplyMessage,
-  MeetingItem,
-  MeetingList,
-  MeetingMessage,
-  AudioMessage,
+  Circle,
 }