mr-chat-bird 1.0.0 → 1.0.2

package/package.json

@@ -1,24 +1,24 @@
 {
   "name": "mr-chat-bird",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "private": false,
-  "main": "index.js",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
+    "start": "next start",
+    "build": "next build",
     "build:npm": "tsup index.ts --format esm,cjs --dts",
     "dev": "next dev",
-    "build": "next build",
-    "analyze": "ANALYZE=true next build",
-    "start": "next start"
+    "analyze": "ANALYZE=true next build"
   },
   "dependencies": {
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
-    "@mantine/core": "^8.1.3",
-    "@mantine/hooks": "^8.1.3",
-    "@mantine/notifications": "^8.2.1",
-    "@mantine/tiptap": "^8.1.3",
-    "@next/bundle-analyzer": "^15.3.3",
-    "@reduxjs/toolkit": "^2.8.2",
     "@tabler/icons-react": "^3.34.0",
     "@tiptap/extension-highlight": "^3.0.7",
     "@tiptap/extension-link": "^3.0.7",
@@ -27,28 +27,43 @@
     "@tiptap/extension-superscript": "^3.0.7",
     "@tiptap/extension-text-align": "^3.0.7",
     "@tiptap/pm": "^3.0.7",
-    "@tiptap/react": "^3.0.7",
-    "@tiptap/starter-kit": "^3.0.7",
     "axios": "^1.10.0",
     "clsx": "^2.1.1",
     "dompurify": "^3.3.3",
     "emoji-mart": "^5.6.0",
     "emoji-picker-react": "^4.13.2",
-    "next": "15.3.3",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
     "react-dropzone": "^14.3.8",
-    "react-redux": "^9.2.0",
-    "react-virtuoso": "^4.18.3",
-    "socket.io-client": "^4.8.1",
-    "tsup": "^8.5.1"
+    "react-virtuoso": "^4.18.3"
+  },
+  "peerDependencies": {
+    "@mantine/core": "^7 || ^8",
+    "@mantine/hooks": "^7 || ^8",
+    "@mantine/notifications": "^7 || ^8",
+    "@mantine/tiptap": "^7 || ^8",
+    "@reduxjs/toolkit": "^1.9.0 || ^2",
+    "react-redux": "^8 || ^9",
+    "@tiptap/react": "^2 || ^3",
+    "@tiptap/starter-kit": "^2 || ^3",
+    "socket.io-client": "^4",
+    "next": "^13 || ^14 || ^15",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "devDependencies": {
     "@babel/core": "^7.27.4",
     "@eslint/js": "^9.29.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.4.2",
+    "@mantine/core": "^8.1.3",
+    "@mantine/hooks": "^8.1.3",
+    "@mantine/notifications": "^8.2.1",
+    "@mantine/tiptap": "^8.1.3",
+    "@next/bundle-analyzer": "^15.3.3",
+    "@reduxjs/toolkit": "^2.8.2",
+    "react-redux": "^9.2.0",
     "@svgr/webpack": "^8.1.0",
     "@swc/core": "^1.15.40",
+    "@tiptap/react": "^3.0.7",
+    "@tiptap/starter-kit": "^3.0.7",
     "@types/eslint-plugin-jsx-a11y": "^6",
     "@types/node": "^22.13.11",
     "@types/react": "19.1.8",
@@ -57,13 +72,18 @@
     "eslint-config-mantine": "^4.0.3",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
+    "next": "15.5.18",
     "postcss": "^8.5.5",
     "postcss-preset-mantine": "1.17.0",
     "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.5.3",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "socket.io-client": "^4.8.1",
     "stylelint": "^16.20.0",
     "stylelint-config-standard-scss": "^15.0.1",
+    "tsup": "^8.5.1",
     "typescript": "5.8.3",
     "typescript-eslint": "^8.34.0"
   }
-}
+}

package/app/layout.tsx

@@ -1,69 +0,0 @@
-"use client";
-
-import "@mantine/core/styles.css";
-import "@mantine/tiptap/styles.css";
-import "@mantine/notifications/styles.css";
-
-import { useState } from "react";
-import { ColorSchemeScript, MantineProvider } from "@mantine/core";
-import { Notifications } from "@mantine/notifications";
-import { createAppTheme } from "../src/theme";
-import { ReduxProvider } from "@/src/store/provider";
-import { SocketProvider } from "@/src/store/socket";
-
-// export const metadata = {
-//   title: 'MrChatBird',
-//   description: 'Easy to integrate with your app the way you want.',
-// };
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const [primaryColor, setPrimaryColor] = useState<
-    "customBrand" | "emerald" | "ruby" | "sunset" | "ocean"
-  >("customBrand");
-
-  const theme = createAppTheme(primaryColor);
-
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <head>
-        <ColorSchemeScript defaultColorScheme="light" />
-        <link rel="shortcut icon" href="/favicon.svg" />
-        <link
-          href="https://fonts.googleapis.com/icon?family=Material+Icons+Round"
-          rel="stylesheet"
-        />
-        <meta
-          name="viewport"
-          content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
-        />
-      </head>
-      <body>
-        <ReduxProvider>
-          <SocketProvider>
-            <MantineProvider defaultColorScheme="light" theme={theme}>
-              <Notifications />
-              {/* <div style={{ padding: 16 }}>
-            <select
-              value={primaryColor}
-              onChange={(e) => setPrimaryColor(e.target.value as any)}
-            >
-              <option value="customBrand">Blue (customBrand)</option>
-              <option value="emerald">Green (emerald)</option>
-              <option value="ruby">Red (ruby)</option>
-              <option value="sunset">Orange (sunset)</option>
-              <option value="ocean">Cyan (ocean)</option>
-            </select>
-            <ColorSchemeToggle />
-          </div> */}
-              {children}
-            </MantineProvider>
-          </SocketProvider>
-        </ReduxProvider>
-      </body>
-    </html>
-  );
-}

package/app/page.tsx

@@ -1,9 +0,0 @@
-import { ChatUserList } from '../src/components/ChatUserList/ChatUserList';
-
-export default function HomePage() {
-  return (
-    <>
-      <ChatUserList />
-    </>
-  );
-}

package/eslint.config.mjs

@@ -1,11 +0,0 @@
-import mantine from 'eslint-config-mantine';
-import tseslint from 'typescript-eslint';
-
-export default tseslint.config(
-  ...mantine,
-  { ignores: ['**/*.{mjs,cjs,js,d.ts,d.mts}'] },
-  {
-    files: ['**/*.story.tsx'],
-    rules: { 'no-console': 'off' },
-  }
-);

package/index.ts

@@ -1 +0,0 @@
-export { default as MrChat } from "./src/components/MrChat";

package/next-env.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/next.config.mjs

@@ -1,30 +0,0 @@
-import bundleAnalyzer from '@next/bundle-analyzer';
-
-const withBundleAnalyzer = bundleAnalyzer({
-  enabled: process.env.ANALYZE === 'true',
-});
-
-export default withBundleAnalyzer({
-  reactStrictMode: false,
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
-  experimental: {
-    optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
-  },
-  webpack(config) {
-    config.module.rules.push({
-      test: /\.svg$/,
-      issuer: /\.[jt]sx?$/,
-      use: [
-        {
-          loader: '@svgr/webpack',
-          options: {
-            exportType: 'default',
-          },
-        },
-      ],
-    });
-    return config;
-  },
-});

package/postcss.config.cjs

@@ -1,14 +0,0 @@
-module.exports = {
-  plugins: {
-    'postcss-preset-mantine': {},
-    'postcss-simple-vars': {
-      variables: {
-        'mantine-breakpoint-xs': '36em',
-        'mantine-breakpoint-sm': '48em',
-        'mantine-breakpoint-md': '62em',
-        'mantine-breakpoint-lg': '75em',
-        'mantine-breakpoint-xl': '88em',
-      },
-    },
-  },
-};

package/public/favicon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><g fill="none" fill-rule="evenodd"><rect width="500" height="500" fill="#339AF0" rx="250"/><g fill="#FFF"><path fill-rule="nonzero" d="M202.055 135.706c-6.26 8.373-4.494 20.208 3.944 26.42 29.122 21.45 45.824 54.253 45.824 90.005 0 35.752-16.702 68.559-45.824 90.005-8.436 6.215-10.206 18.043-3.944 26.42 6.26 8.378 18.173 10.13 26.611 3.916a153.835 153.835 0 0024.509-22.54h53.93c10.506 0 19.023-8.455 19.023-18.885 0-10.43-8.517-18.886-19.023-18.886h-29.79c8.196-18.594 12.553-38.923 12.553-60.03s-4.357-41.436-12.552-60.03h29.79c10.505 0 19.022-8.455 19.022-18.885 0-10.43-8.517-18.886-19.023-18.886h-53.93a153.835 153.835 0 00-24.509-22.54c-8.438-6.215-20.351-4.46-26.61 3.916z"/><path d="M171.992 246.492c0-15.572 12.624-28.195 28.196-28.195 15.572 0 28.195 12.623 28.195 28.195 0 15.572-12.623 28.196-28.195 28.196-15.572 0-28.196-12.624-28.196-28.196z"/></g></g></svg>

package/src/components/ChatUserList/ChatUserList.module.css

@@ -1,253 +0,0 @@
-.chatWrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 100vh;
-  background: #f1f3f5;
-}
-
-.chatContainer {
-  display: flex;
-  width: 100%;
-  max-width: 1260px;
-  background: white;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.sidebar {
-  width: 280px;
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  border-right: 1px solid #eee;
-  background-color: #fff;
-  padding-top: 12px;
-}
-
-@media (max-width: 760px) {
-  .sidebar {
-    width: 180px;
-  }
-}
-
-.sidebarTop {
-  padding: 0 12px;
-}
-
-.topBar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  /* padding-bottom: 12px; */
-}
-
-.topActions {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.scrollWrapper {
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.scrollArea {
-  flex: 1;
-  height: 100%;
-  overflow-y: auto;
-}
-
-.scrollArea :global(.mantine-ScrollArea-content) {
-  padding-bottom: 60px;
-}
-
-.avatar {
-  width: 34px;
-  height: 34px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-.mainArea {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.messageArea {
-  flex: 1;
-  padding: 16px;
-  overflow-y: auto;
-  padding-bottom: 10px;
-}
-
-.messageBubble {
-  max-width: fit-content;
-  padding: 8px 45px 8px 16px;
-  margin-bottom: 8px;
-  position: relative;
-}
-
-.outgoing {
-  color: white;
-  background-color: #366ca4;
-  margin-left: auto;
-}
-
-.incoming {
-  background-color: #eeeeee;
-  margin-right: auto;
-}
-
-.inputBar {
-  display: flex;
-  align-items: end;
-  gap: 8px;
-  padding: 0px 16px 16px;
-}
-
-/* @media (max-width: 760px) {
-  .mainArea {
-    display: none;
-  }
-} */
-
-.chatItem {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 12px;
-  cursor: pointer;
-  transition: background 0.2s;
-  margin: 2px 4px;
-  border-radius: 6px;
-}
-
-.chatItem:hover {
-  background-color: #f6f6f6;
-}
-
-.chatLabelItem {
-  font-size: 15px;
-}
-
-.chatHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  border-bottom: 1px solid #eee;
-  background-color: #f8f9fa;
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  min-height: 63px;
-}
-
-.receiverInfo {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  cursor: pointer;
-}
-
-.emptyState {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.encryptionMinimal {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 10px;
-  border-radius: 12px;
-  background: rgba(0, 0, 0, 0.04);
-  color: #666;
-  font-size: 12px;
-}
-
-.encryptionText {
-  font-size: 16px;
-  color: #666;
-  margin-left: 3px;
-}
-
-.messageContent {
-  max-width: 370px;
-  word-wrap: break-word;
-  font-size: 14px;
-}
-
-.messagePreviewContent p,
-.messageContent p {
-  margin: 0;
-  padding: 0;
-}
-
-.activeChatItem {
-  background-color: #eee;
-}
-
-.chatItem:hover {
-  background-color: #eee;
-}
-
-.messageTime {
-  font-size: 11px;
-  opacity: 0.6;
-  text-align: right;
-  margin-top: 4px;
-  position: absolute;
-  bottom: 4px;
-  right: 8px;
-  z-index: 1;
-}
-
-.dateSeparator {
-  text-align: center;
-  font-size: 13px;
-  margin: 12px 0;
-  color: #888;
-}
-
-.chatInfo {
-  width: 100%;
-  position: relative;
-}
-
-.messagePreview {
-  display: flex;
-  justify-content: space-between;
-  align-items: end;
-  margin-top: 1px;
-}
-
-.messagePreviewTime {
-  position: relative;
-  top: 1px;
-  right: 0;
-}
-
-.unreadBadge {
-  background: #366ca4;
-  color: white;
-  font-size: 10px;
-  border-radius: 50%;
-  padding: 3px 5px;
-  min-width: 18px;
-  text-align: center;
-  position: absolute;
-  top: 1px;
-  right: 0px;
-}
-
-.messagePreviewContent {
-  font-size: 14px;
-}