refactor: add public API to each slice

eslint.config.js

@@ -3,26 +3,38 @@ import globals from "globals";
 import reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
 import tseslint from "typescript-eslint";
+import importPlugin from "eslint-plugin-import";
+import simpleImportSort from "eslint-plugin-simple-import-sort";
 
 export default tseslint.config({
   extends: [js.configs.recommended, ...tseslint.configs.recommended],
   files: ["**/*.{ts,tsx}"],
   ignores: ["dist"],
   languageOptions: {
     ecmaVersion: 2020,
-    globals: globals.browser
+    globals: globals.browser,
   },
   plugins: {
     "react-hooks": reactHooks,
-    "react-refresh": reactRefresh
+    "react-refresh": reactRefresh,
+    import: importPlugin,
+    "simple-import-sort": simpleImportSort,
   },
   rules: {
     ...reactHooks.configs.recommended.rules,
-    "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+    "react-refresh/only-export-components": [
+      "warn",
+      { allowConstantExport: true },
+    ],
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-unused-vars": "off",
     "no-unused-vars": "off",
     "react-hooks/exhaustive-deps": "off",
-    "react-refresh/only-export-components": "off"
-  }
+    "react-refresh/only-export-components": "off",
+
+    // Import rules
+    "import/no-duplicates": "error",
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
+  },
 });

package.json

@@ -83,6 +83,7 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "globals": "^15.9.0",
     "postcss": "^8.4.41",
     "prettier": "^3.4.1",

src/app/App.tsx

@@ -1,21 +1,22 @@
-import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { Toaster } from "@/shared/ui/Toaster";
 import "./main.css";
-import IndexPage from "@/pages/index/ui/IndexPage";
-import Header from "@/widgets/header/ui/Header";
-import Loader from "@/shared/ui/Loader";
-import NotFound from "@/pages/not-found/ui/NotFound";
-import ChatPage from "@/pages/chat/ui/ChatPage";
+
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { useContextSelector } from "use-context-selector";
-import { JoinedRoomsContext } from "@/entities/Room/lib/providers/JoinedRoomsProvider";
-import { MessagesProvider } from "@/entities/Message/lib/providers/MessagesProvider";
-import { AuthContext } from "@/features/authorize/lib/providers/AuthProvider";
-import { LoadingContext } from "@/shared/lib/providers/LoadingProvider";
-import { VoiceChatConnectionsProvider } from "@/widgets/voice-chat-section/lib/providers/VoiceChatConnectionsProvider";
-import { VoiceChatControlsProvider } from "@/features/manage-voice-controls/lib/providers/VoiceChatControlsProvider";
-import SettingsPage from "@/pages/settings/ui/SettingsPage";
-import FaqPage from "@/pages/faq/ui/FaqPage";
-import { FaqControlProvider } from "@/features/control-faq/libs/providers/FaqControlProvider";
+
+import { MessagesProvider } from "@/entities/Message";
+import { JoinedRoomsContext } from "@/entities/Room";
+import { AuthContext } from "@/features/authorize";
+import { FaqControlProvider } from "@/features/control-faq";
+import { VoiceChatControlsProvider } from "@/features/manage-voice-controls";
+import { ChatPage } from "@/pages/chat";
+import { FaqPage } from "@/pages/faq";
+import { IndexPage } from "@/pages/index";
+import { NotFound } from "@/pages/not-found";
+import { SettingsPage } from "@/pages/settings";
+import { LoadingContext } from "@/shared/lib";
+import { Loader, Toaster } from "@/shared/ui";
+import { Header } from "@/widgets/header";
+import { VoiceChatConnectionsProvider } from "@/widgets/voice-chat-section";
 
 function App() {
   const isLoading = useContextSelector(LoadingContext, (c) => c.isLoading);

src/app/main.tsx

@@ -1,22 +1,17 @@
-import { createRoot } from "react-dom/client";
 import "./main.css";
-import { ThemeProvider } from "@/shared/lib/providers/ThemeProvider";
+
+import { createRoot } from "react-dom/client";
+
+import { JoinedRoomsProvider, SelectedRoomProvider } from "@/entities/Room";
+import { CurrentUserProvider, UsersProvider } from "@/entities/User";
+import { AuthProvider } from "@/features/authorize";
+import { UsersVolumeProvider } from "@/features/control-user-volume";
+import { SettingsOpenCloseProvider } from "@/features/open-close-settings";
+import { EncryptionKeysProvider, LanguageSettingsProvider, LoadingProvider, NotificationsSettingsProvider, ThemeProvider, TranslationProvider, VoiceSettingsProvider } from "@/shared/lib";
+import { TooltipProvider } from "@/shared/ui";
+import { ChatConnectionsProvider } from "@/widgets/chat-section";
+
 import App from "./App";
-import LoadingProvider from "@/shared/lib/providers/LoadingProvider";
-import CurrentUserProvider from "@/entities/User/lib/providers/CurrentUserProvider";
-import AuthProvider from "@/features/authorize/lib/providers/AuthProvider";
-import { TooltipProvider } from "@/shared/ui/Tooltip";
-import JoinedRoomsProvider from "@/entities/Room/lib/providers/JoinedRoomsProvider";
-import { UsersProvider } from "@/entities/User/lib/providers/UsersProvider";
-import SelectedRoomProvider from "@/entities/Room/lib/providers/SelectedRoomProvider";
-import { ChatConnectionsProvider } from "@/widgets/chat-section/lib/providers/ChatConnectionsProvider";
-import { EncryptionKeysProvider } from "@/shared/lib/providers/EncryptionKeysProvider";
-import { UsersVolumeProvider } from "@/features/control-user-volume/lib/providers/UsersVolumeProvider";
-import { SettingsOpenCloseProvider } from "@/features/open-close-settings/lib/providers/SettingsOpenCloseProvider";
-import VoiceSettingsProvider from "@/shared/lib/providers/VoiceSettingsProvider";
-import NotificationsSettingsProvider from "@/shared/lib/providers/NotificationsSettingsProvider";
-import LanguageSettingsProvider from "@/shared/lib/providers/LanguageSettingsProvider";
-import TranslationProvider from "@/shared/lib/providers/TranslationProvider";
 
 createRoot(document.getElementById("root")!).render(
   <ThemeProvider defaultTheme="dark" storageKey="colir-ui-theme">

src/entities/Attachment/api/UploadService.ts

@@ -1,8 +1,10 @@
-import $api, { API_URL } from "@/shared/api";
-import { UploadAttachmentsModel } from "../model/request/UploadAttachmentModel";
 import { AxiosResponse } from "axios";
 
-export default class UploadService {
+import { $api, API_URL } from "@/shared/api";
+
+import { UploadAttachmentsModel } from "../model/request";
+
+export class UploadService {
   static async UploadAttachments(model: UploadAttachmentsModel): Promise<AxiosResponse<number[]>> {
     const formData: FormData = new FormData();
     formData.append("roomGuid", model.roomGuid);

src/entities/Attachment/api/index.ts

@@ -0,0 +1 @@
+export { UploadService } from "./UploadService";

src/entities/Attachment/index.ts

@@ -0,0 +1,4 @@
+export { UploadService } from "./api";
+export type { AttachmentModel } from "./model";
+export type { UploadAttachmentsModel } from "./model";
+export { AttachmentsSection } from "./ui";

src/entities/Attachment/model/index.ts

@@ -0,0 +1,2 @@
+export type { AttachmentModel } from "./AttachmentModel";
+export type { UploadAttachmentsModel } from "./request";

src/entities/Attachment/model/request/index.ts

@@ -0,0 +1 @@
+export type { UploadAttachmentsModel } from "./UploadAttachmentsModel";

src/entities/Attachment/ui/Attachment.tsx

@@ -1,17 +1,13 @@
-import { useEffect, useRef, useState } from "react";
-import { AttachmentModel } from "../model/AttachmentModel";
-import { SERVER_URL } from "@/shared/api";
-import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@/shared/ui/ContextMenu";
-import { CopyIcon, DownloadIcon, FileIcon } from "lucide-react";
 import FileSaver from "file-saver";
-import { Button } from "@/shared/ui/Button";
+import { CopyIcon, DownloadIcon, FileIcon } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
 import { isFirefox } from "react-device-detect";
-import { cn, decryptFile, decryptString } from "@/shared/lib/utils";
-import EncryptedVideoPlayer from "@/shared/ui/EncryptedVideoPlayer";
-import EncryptedImageViewer from "@/shared/ui/EncryptedImageViewer";
-import EncryptedAudioPlayer from "@/shared/ui/EncryptedAudioPlayer";
-import { useTranslation } from "@/shared/lib/hooks/useTranslation";
-import { useInfoToast } from "@/shared/lib/hooks/useInfoToast";
+
+import { SERVER_URL } from "@/shared/api";
+import { cn, decryptFile, decryptString, useInfoToast, useTranslation } from "@/shared/lib";
+import { Button, ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger, EncryptedAudioPlayer, EncryptedImageViewer, EncryptedVideoPlayer } from "@/shared/ui";
+
+import { AttachmentModel } from "../model/AttachmentModel";
 
 interface AttachmentProps {
   attachment: AttachmentModel;
@@ -39,7 +35,7 @@ const extensionToAttachmentTypeMap = {
   wav: AttachmentType.AUDIO
 };
 
-function Attachment({ attachment, className, decryptionKey }: AttachmentProps) {
+export function Attachment({ attachment, className, decryptionKey }: AttachmentProps) {
   const t = useTranslation();
   const showInfoToast = useInfoToast();
   const [attachmentType, setAttachmentType] = useState<AttachmentType>(AttachmentType.DOCUMENT);
@@ -187,5 +183,3 @@ function Attachment({ attachment, className, decryptionKey }: AttachmentProps) {
     </div>
   );
 }
-
-export default Attachment;

src/entities/Attachment/ui/AttachmentsSection.tsx

@@ -1,14 +1,15 @@
-import { AttachmentModel } from "@/entities/Attachment/model/AttachmentModel";
-import Attachment from "./Attachment";
-import { cn } from "@/shared/lib/utils";
+import { cn } from "@/shared/lib";
+
+import { AttachmentModel } from "../model";
+import { Attachment } from "./Attachment";
 
 interface AttachmentsSectionProps {
   attachments: AttachmentModel[];
   className?: string;
   decryptionKey: string;
 }
 
-function AttachmentsSection(props: AttachmentsSectionProps) {
+export function AttachmentsSection(props: AttachmentsSectionProps) {
   return (
     <div className={cn("flex flex-wrap w-fit gap-2 pt-1", props.className)}>
       {props.attachments.map((attachment, index) => (
@@ -17,5 +18,3 @@ function AttachmentsSection(props: AttachmentsSectionProps) {
     </div>
   );
 }
-
-export default AttachmentsSection;

src/entities/Attachment/ui/index.ts

@@ -0,0 +1 @@
+export { AttachmentsSection } from "./AttachmentsSection";

src/entities/Message/index.ts

@@ -0,0 +1,11 @@
+export { MessagesContext, MessagesProvider } from "./lib";
+export { distinctMessages } from "./lib";
+export type { AddReactionOnMessageModel } from "./model";
+export type { DeleteMessageModel } from "./model";
+export type { EditMessageModel } from "./model";
+export type { GetLastMessagesModel } from "./model";
+export type { GetMessageByIdModel } from "./model";
+export type { RemoveReactionFromMessageModel } from "./model";
+export type { SendMessageModel } from "./model";
+export type { MessageModel } from "./model";
+export { MessagesList } from "./ui";

src/entities/Message/lib/formatText.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { vs as lightTheme } from "react-syntax-highlighter/dist/esm/styles/prism";
-import { vscDarkPlus as darkTheme } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { vs as lightTheme, vscDarkPlus as darkTheme } from "react-syntax-highlighter/dist/esm/styles/prism";
 
 export function formatText(text: string, theme: string): JSX.Element {
   const codeBlockParts = extractCodeBlocks(text);

src/entities/Message/lib/index.ts

@@ -0,0 +1,2 @@
+export { distinctMessages } from "./distinctMessages";
+export { MessagesContext, MessagesProvider } from "./providers";

src/entities/Message/lib/providers/MessagesProvider.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
-import { MessageModel } from "../../model/MessageModel";
 import { createContext } from "use-context-selector";
 
+import { MessageModel } from "../../model/MessageModel";
+
 export const MessagesContext = createContext<{
   messages: MessageModel[];
   setMessages: React.Dispatch<React.SetStateAction<MessageModel[]>>;

src/entities/Message/lib/providers/index.ts

@@ -0,0 +1 @@
+export { MessagesContext, MessagesProvider } from "./MessagesProvider";

src/entities/Message/model/MessageModel.ts

@@ -1,5 +1,5 @@
-import { AttachmentModel } from "@/entities/Attachment/model/AttachmentModel";
-import { ReactionModel } from "@/entities/Reaction/model/ReactionModel";
+import { AttachmentModel } from "@/entities/Attachment";
+import { ReactionModel } from "@/entities/Reaction";
 
 export interface MessageModel {
   id: number;

src/entities/Message/model/index.ts

@@ -0,0 +1,8 @@
+export type { MessageModel } from "./MessageModel";
+export type { AddReactionOnMessageModel } from "./request/AddReactionOnMessageModel";
+export type { DeleteMessageModel } from "./request/DeleteMessageModel";
+export type { EditMessageModel } from "./request/EditMessageModel";
+export type { GetLastMessagesModel } from "./request/GetLastMessagesModel";
+export type { GetMessageByIdModel } from "./request/GetMessageByIdModel";
+export type { RemoveReactionFromMessageModel } from "./request/RemoveReactionFromMessageModel";
+export type { SendMessageModel } from "./request/SendMessageModel";

src/entities/Message/model/request/index.ts

@@ -0,0 +1,7 @@
+export type { AddReactionOnMessageModel } from "./AddReactionOnMessageModel";
+export type { DeleteMessageModel } from "./DeleteMessageModel";
+export type { EditMessageModel } from "./EditMessageModel";
+export type { GetLastMessagesModel } from "./GetLastMessagesModel";
+export type { GetMessageByIdModel } from "./GetMessageByIdModel";
+export type { RemoveReactionFromMessageModel } from "./RemoveReactionFromMessageModel";
+export type { SendMessageModel } from "./SendMessageModel";

src/entities/Message/ui/DeleteConfirmationDialog.tsx

@@ -1,8 +1,7 @@
-import { Button } from "@/shared/ui/Button";
-import { Dialog, DialogContent, DialogTitle } from "@/shared/ui/Dialog";
-import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/shared/ui/Card";
 import { DialogDescription } from "@radix-ui/react-dialog";
-import { useTranslation } from "@/shared/lib/hooks/useTranslation";
+
+import { useTranslation } from "@/shared/lib";
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Dialog, DialogContent, DialogTitle } from "@/shared/ui";
 
 interface DeleteConfirmationDialogProps {
   isShown: boolean;

src/entities/Message/ui/EditArea.tsx

@@ -1,10 +1,10 @@
 import "moment/min/locales";
-import { Button } from "@/shared/ui/Button";
+
 import { CheckIcon, PencilOffIcon } from "lucide-react";
-import { AutosizeTextarea } from "@/shared/ui/AutosizeTextarea";
 import React from "react";
-import { useTranslation } from "@/shared/lib/hooks/useTranslation";
-import { EmojiPicker } from "@/shared/ui/EmojiPicker";
+
+import { useTranslation } from "@/shared/lib";
+import { AutosizeTextarea, Button, EmojiPicker } from "@/shared/ui";
 
 interface EditAreaProps {
   textAreaRef: React.MutableRefObject<any>;

src/entities/Message/ui/Message.tsx

@@ -1,29 +1,21 @@
-import { Separator } from "@/shared/ui/Separator";
-import { MessageModel } from "../model/MessageModel";
-import { UserModel } from "@/entities/User/model/UserModel";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/Tooltip";
-import Moment from "moment/min/moment-with-locales";
 import "moment/min/locales";
-import { Button } from "@/shared/ui/Button";
+
 import { CodeIcon, CopyIcon, CornerUpRightIcon, PencilIcon, ReplyIcon, SkullIcon, Trash2Icon } from "lucide-react";
-import classes from "./Message.module.css";
-import { forwardRef, useEffect, useRef, useState } from "react";
-import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@/shared/ui/ContextMenu";
-import ReactionBar from "@/entities/Reaction/ui/ReactionBar";
-import { EmojiPicker } from "@/shared/ui/EmojiPicker";
-import Username from "@/entities/User/ui/Username";
-import AttachmentsSection from "../../Attachment/ui/AttachmentsSection";
+import Moment from "moment/min/moment-with-locales";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
+import { useContextSelector } from "use-context-selector";
+
+import { AttachmentsSection } from "@/entities/Attachment";
+import { ReactionBar } from "@/entities/Reaction";
+import { CurrentUserContext, UserModel, Username } from "@/entities/User";
+import { cn, decryptString, encryptString, LanguageSettingsContext, replaceEmojis, useInfoToast, useTheme, useTranslation } from "@/shared/lib";
+import { Button, ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger, EmojiPicker, Separator, Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui";
+
 import { formatText } from "../lib/formatText";
+import { MessageModel } from "../model/MessageModel";
 import DeleteConfirmationDialog from "./DeleteConfirmationDialog";
-import React from "react";
-import { CurrentUserContext } from "@/entities/User/lib/providers/CurrentUserProvider";
-import { useContextSelector } from "use-context-selector";
-import { cn, decryptString, encryptString, replaceEmojis } from "@/shared/lib/utils";
-import { useTranslation } from "@/shared/lib/hooks/useTranslation";
-import { LanguageSettingsContext } from "@/shared/lib/providers/LanguageSettingsProvider";
-import { useInfoToast } from "@/shared/lib/hooks/useInfoToast";
-import { useTheme } from "@/shared/lib/providers/ThemeProvider";
 import EditArea from "./EditArea";
+import classes from "./Message.module.css";
 
 interface MessageProps {
   message: MessageModel;

src/entities/Message/ui/MessageListItem.tsx

@@ -1,8 +1,10 @@
+import isEqual from "fast-deep-equal";
 import React from "react";
-import Message from "./Message";
+
+import { UserModel } from "@/entities/User";
+
 import { MessageModel } from "../model/MessageModel";
-import { UserModel } from "@/entities/User/model/UserModel";
-import isEqual from "fast-deep-equal";
+import Message from "./Message";
 
 interface MessageListItemProps {
   setMessagesRef: (messageId: number) => (el: HTMLDivElement | null) => void;