feat: typescript typings

.editorconfig

@@ -3,6 +3,6 @@ root = true
 [*]
 end_of_line = lf
 
-[*.{js,json,ts,html,jsx,mdx}]
+[*.{js,json,ts,tsx,d.ts,html,jsx,mdx}]
 indent_style = space
 indent_size = 2

.eslintrc.js

@@ -0,0 +1,52 @@
+module.exports = {
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+    node: true,
+  },
+  plugins: ["react", "jsx-a11y", "@typescript-eslint"],
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    ecmaVersion: 6,
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+    project: ["./tsconfig.json"],
+  },
+  ignorePatterns: [".eslintrc.js", "perfect-scrollbar.esm.js"],
+  overrides: [
+    {
+      files: ["*.js", "*.jsx"],
+      rules: {
+        "@typescript-eslint/no-unsafe-assignment": 0,
+        "@typescript-eslint/no-unsafe-member-access": 0,
+        "@typescript-eslint/no-unsafe-argument": 0,
+        "@typescript-eslint/no-unsafe-return": 0,
+        "@typescript-eslint/restrict-template-expressions": 0,
+        "@typescript-eslint/no-unsafe-call": 0,
+      },
+    },
+  ],
+  rules: {
+    "linebreak-style": ["error", "unix"],
+    semi: ["error", "always"],
+    "no-console": ["warn"],
+    "prefer-template": ["error"],
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+};

package.json

@@ -29,6 +29,7 @@
   },
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
+  "types": "src/types/index.d.ts",
   "peerDependencies": {
     "prop-types": "^15.7.2",
     "react": "^16.12.0 || ^17.0.0",
@@ -48,12 +49,15 @@
     "@semantic-release/changelog": "5.0.1",
     "@semantic-release/git": "9.0.0",
     "@semantic-release/github": "7.1.1",
+    "@typescript-eslint/eslint-plugin": "^5.9.1",
+    "@typescript-eslint/parser": "^5.9.1",
     "babel-eslint": "10.1.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "chokidar-cli": "2.1.0",
-    "eslint": "6.8.0",
-    "eslint-plugin-jsx-a11y": "6.3.1",
-    "eslint-plugin-react": "7.20.6",
+    "eslint": "8.6.0",
+    "eslint-plugin-jsx-a11y": "6.5.1",
+    "eslint-plugin-react": "7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "husky": "4.3.0",
     "lint-staged": "10.4.0",
     "prettier": "2.1.2",
@@ -62,7 +66,8 @@
     "rollup": "2.26.5",
     "rollup-plugin-peer-deps-external": "2.2.3",
     "rollup-plugin-terser": "5.3.0",
-    "semantic-release": "17.2.4"
+    "semantic-release": "17.2.4",
+    "typescript": "^4.5.4"
   },
   "scripts": {
     "build:clean": "rm -Rf dist",

src/components/Avatar/Avatar.d.ts

@@ -0,0 +1,14 @@
+import type {Size, UserStatus, ChatComponentPropsChildrenRef} from "../../types";
+import type {ReactElement} from "react";
+
+export interface AvatarProps {
+    name?:string;
+    src?:string;
+    size?: Size;
+    status?: UserStatus;
+    active?: boolean;
+}
+
+export declare const Avatar: (props:ChatComponentPropsChildrenRef<AvatarProps,"div">) => ReactElement;
+
+export default Avatar;

src/components/AvatarGroup/AvatarGroup.d.ts

@@ -0,0 +1,13 @@
+import type {ReactElement} from "react";
+import type {ChatComponentPropsChildren, Size} from "../../types";
+
+export interface AvatarGroupProps {
+    max?:number;
+    size?:Size;
+    activeIndex?:number;
+    hoverToFront?:boolean;
+}
+
+export declare const AvatarGroup: (props:ChatComponentPropsChildren<AvatarGroupProps,"div">) => ReactElement;
+
+export default AvatarGroup;

src/components/Buttons/Buttons.d.ts

@@ -0,0 +1,50 @@
+import type {ReactElement, ReactNode} from "react";
+import type {ChatComponentPropsChildren} from "../../types";
+
+export interface ButtonProps {
+  icon?:ReactNode;
+  labelPosition?: "left" | "right";
+  border?: boolean; 
+}
+
+export declare const Button: (props:ChatComponentPropsChildren<ButtonProps, "button">) => ReactElement;
+
+export type AddUserButtonProps = Omit<ButtonProps,"icon">;
+
+export declare const AddUserButton: (props:ChatComponentPropsChildren<AddUserButtonProps, "button">) => ReactElement;
+
+export interface ArrowButtonProps extends Omit<ButtonProps,"icon"> {
+  direction?: "up" | "right" | "down" | "left"
+} 
+
+export declare const ArrowButton: (props:ChatComponentPropsChildren<ArrowButtonProps, "button">) => ReactElement;
+
+export type AttachmentButtonProps = Omit<ButtonProps,"icon">;
+
+export declare const AttachmentButton: (props:ChatComponentPropsChildren<AttachmentButtonProps, "button">) => ReactElement;
+
+export interface EllipsisButtonProps extends Omit<ButtonProps,"icon"> {
+  orientation?: "horizontal" | "vertical"
+}
+
+export declare const EllipsisButton: (props:ChatComponentPropsChildren<EllipsisButtonProps, "button">) => ReactElement;
+
+export type InfoButtonProps = Omit<ButtonProps,"icon">;
+
+export declare const InfoButton: (props:ChatComponentPropsChildren<InfoButtonProps, "button">) => ReactElement;
+
+export type SendButtonProps = Omit<ButtonProps,"icon">;
+
+export declare const SendButton: (props:ChatComponentPropsChildren<SendButtonProps, "button">) => ReactElement;
+
+export type StarButtonProps = Omit<ButtonProps,"icon">;
+
+export declare const StarButton: (props:ChatComponentPropsChildren<StarButtonProps, "button">) => ReactElement;
+
+export type VideoCallButtonProps = Omit<ButtonProps,"icon">;
+
+export declare const VideoCallButton: (props:ChatComponentPropsChildren<VideoCallButtonProps, "button">) => ReactElement;
+
+export type VoiceCallButtonProps = Omit<ButtonProps,"icon">;
+
+export declare const VoiceCallButton: (props:ChatComponentPropsChildren<VoiceCallButtonProps, "button">) => ReactElement;

src/components/ChatContainer/ChatContainer.d.ts

@@ -0,0 +1,12 @@
+import type {ReactElement} from "react";
+import type {
+  ChatComponentPropsChildren,
+} from "../../types/index";
+import {EmptyProps} from "../../types/index";
+
+export type ChatContainerOwnProps = EmptyProps;
+export type ChatContainerProps = ChatComponentPropsChildren<ChatContainerOwnProps,"div">;
+
+export declare const ChatContainer: (props:ChatComponentPropsChildren<ChatContainerProps,"div">) => ReactElement;
+
+export default ChatContainer;

src/components/Conversation/Conversation.d.ts

@@ -0,0 +1,39 @@
+import type {ReactElement, ReactNode} from "react";
+import type {ChatComponentPropsChildren} from "../../types";
+
+export interface ConversationOperationsProps {
+    visible?:boolean;
+}
+
+declare const ConversationOperations: (props:ChatComponentPropsChildren<ConversationOperationsProps,"div">) => ReactElement;
+
+export interface ConversationContentProps {
+    name?:ReactNode;
+    lastSenderName?: ReactNode;
+    info?:ReactNode;
+}
+
+declare const ConversationContent: (props:ChatComponentPropsChildren<ConversationContentProps,"div">) => ReactElement;
+
+export interface ConversationProps {
+    name?:ReactNode;
+    unreadCnt?:number;
+    unreadDot?:boolean;
+    lastSenderName?:ReactNode;
+    info?:ReactNode;
+    lastActivityTime?:ReactNode;
+    active?:boolean;
+}
+
+export declare const Conversation: {
+    (props:ChatComponentPropsChildren<ConversationProps,"div">):ReactElement,
+    Operations: typeof ConversationOperations;
+    Content: typeof ConversationContent;
+};
+
+export default Conversation;
+
+
+
+
+

src/components/Conversation/Conversation.jsx

@@ -4,7 +4,7 @@ import { allowedChildren, getChildren } from "../utils";
 import classNames from "classnames";
 import cName from "./cName";
 import ConversationOperations from "./ConversationOperations";
-import ConversationContent from "./ConversationConent";
+import ConversationContent from "./ConversationContent";
 import Avatar from "../Avatar";
 import AvatarGroup from "../AvatarGroup";
 

src/components/ConversationHeader/ConversationHeader.d.ts

@@ -0,0 +1,29 @@
+import type {ReactElement, ReactNode} from "react";
+import type {ChatComponentPropsChildren, EmptyProps} from "../../types";
+
+export type ConversationHeaderActionsProps = EmptyProps;
+
+declare const ConversationHeaderActions: (props:ChatComponentPropsChildren<ConversationHeaderActionsProps,HTMLElement>) => ReactElement;
+
+export type ConversationHeaderBackProps = EmptyProps;
+
+declare const ConversationHeaderBack: (props:ChatComponentPropsChildren<ConversationHeaderBackProps,"div">) => ReactElement;
+
+export interface ConversationHeaderContentProps {
+    userName?:ReactNode;
+    info?:ReactNode;
+}
+
+declare const ConversationHeaderContent: (props:ChatComponentPropsChildren<ConversationHeaderContentProps,"div">) => ReactElement;
+
+export type ConversationHeaderOwnProps = EmptyProps;
+export type ConversationHeaderProps = ChatComponentPropsChildren<ConversationHeaderOwnProps,"div">; 
+
+export declare const ConversationHeader: {
+    (props:ConversationHeaderProps):ReactElement<ConversationHeaderProps,"ConversationHeader">;
+    Back: typeof ConversationHeaderBack;
+    Actions: typeof ConversationHeaderActions;
+    Content: typeof ConversationHeaderContent;
+};
+
+export default ConversationHeader;

src/components/ConversationList/ConversationList.d.ts

@@ -0,0 +1,15 @@
+import {ChatComponentPropsChildren} from "../../types";
+import type {ReactElement} from "react";
+
+export interface ConversationListOwnProps {
+    scrollable?:boolean;
+    loading?:boolean;
+    loadingMore?:boolean;
+    onYReachEnd?:(container:HTMLDivElement) => void;
+}
+
+export type ConversationListProps = ChatComponentPropsChildren<ConversationListOwnProps, "div">;
+
+export declare const ConversationList: (props:ConversationListProps) => ReactElement<ConversationListProps>;
+
+export default ConversationList;

src/components/ExpansionPanel/ExpansionPanel.d.ts

@@ -0,0 +1,11 @@
+import type {ReactElement} from "react";
+import type {ChatComponentProps} from "../../types";
+
+export interface ExpansionPanelProps {
+    title?:string;
+    open?:boolean;
+}
+
+export declare const ExpansionPanel: (props:ChatComponentProps<ExpansionPanelProps,"div">) => ReactElement;
+
+export default ExpansionPanel;

src/components/InputToolbox/InputToolbox.d.ts

@@ -0,0 +1,9 @@
+import type {ChatComponentPropsChildren, EmptyProps} from "../../types";
+import {ReactElement} from "react";
+
+export type InputToolboxOwnProps = EmptyProps;
+export type InputToolboxProps = ChatComponentPropsChildren<InputToolboxOwnProps, "div">
+
+export declare const InputToolbox: (props:InputToolboxProps) => ReactElement;
+
+export default InputToolbox;

src/components/Loader/Loader.d.ts

@@ -0,0 +1,11 @@
+import type {ReactElement} from "react";
+import type {ChatComponentPropsChildren} from "../../types";
+import type {LoaderVariant} from "../../types/unions";
+
+export interface LoaderProps {
+    variant?:LoaderVariant;
+}
+
+export declare const Loader: (props:ChatComponentPropsChildren<LoaderProps,"div">) => ReactElement;
+
+export default Loader;

src/components/MainContainer/MainContainer.d.ts

@@ -0,0 +1,10 @@
+import type {ReactElement} from "react";
+import type {ChatComponentPropsChildren} from "../../types";
+
+export interface MainContainerProps {
+    responsive?:boolean;
+}
+
+export declare const MainContainer: (props:ChatComponentPropsChildren<MainContainerProps, "div">) => ReactElement;
+
+export default MainContainer;