Add more formatter requirements

.eslintrc

@@ -9,6 +9,13 @@
     "plugin:react/recommended",
     "prettier"
   ],
+  "plugins": [
+    "@typescript-eslint",
+    "react",
+    "react-hooks",
+    "prettier",
+    "simple-import-sort"
+  ],
   "overrides": [
     {
       "env": {
@@ -32,12 +39,6 @@
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
-  "plugins": [
-    "@typescript-eslint",
-    "react",
-    "react-hooks",
-    "prettier"
-  ],
   "rules": {
     "@typescript-eslint/no-unused-vars": "warn",
     "react/react-in-jsx-scope": "off",
@@ -74,5 +75,17 @@
       "error",
       "always"
     ],
+    "react/no-array-index-key": [
+      1
+    ],
+    "arrow-parens": [
+      "error",
+      "always"
+    ],
+    "prefer-template": "error",
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn" 
   }
 }

package.json

@@ -61,10 +61,14 @@
     "@vitejs/plugin-react": "^4.0.4",
     "autoprefixer": "^10.4.15",
     "eslint": "^8.52.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.4.31",
+    "prettier": "^3.2.5",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -77,13 +81,10 @@
     "ts-jest": "^29.1.1",
     "vite": "^4.5.2",
     "vite-plugin-css-injected-by-js": "^3.3.0",
-    "vite-plugin-node-polyfills": "^0.14.1",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "prettier": "^3.2.5"
+    "vite-plugin-node-polyfills": "^0.14.1"
   },
   "dependencies": {
+    "eslint-plugin-simple-import-sort": "^12.0.0",
     "typescript": "^5.3.3"
   }
 }

src/chatMocks.js

@@ -1,4 +1,5 @@
 import { faker } from '@faker-js/faker';
+
 import { chat, Roles } from './config';
 
 export { paymentData } from './config';

src/components/AppBase/index.tsx

@@ -1,10 +1,8 @@
-import { AppProps } from '../../interfaces/component';
 import { useAppDispatch } from '../../hooks';
-
+import { AppProps } from '../../interfaces/component';
 import { setConfig } from '../../store/slices/config';
 import { setMeta } from '../../store/slices/meta';
-
-import { LayoutBase, LayoutHead, LayoutFoot } from '../Layout';
+import { LayoutBase, LayoutFoot,LayoutHead } from '../Layout';
 import { StreamBase } from '../Stream';
 
 export const AppBase = ({ config }: AppProps) => {

src/components/Button/basic.tsx

@@ -1,5 +1,5 @@
-import { ButtonProps } from '../../interfaces/component';
 import { useAppSelector } from '../../hooks';
+import { ButtonProps } from '../../interfaces/component';
 import { getConfig } from '../../store/slices/config';
 import { basic as variant } from './variants';
 

src/components/Button/icon.tsx

@@ -1,8 +1,7 @@
 import { useAppSelector } from '../../hooks';
+import { IconProps } from '../../interfaces/component';
 import { getConfig } from '../../store/slices/config';
-
 import { icon as variant } from './variants';
-import { IconProps } from '../../interfaces/component';
 
 export const IconBtn = ({ children, outlined = false, onClick, e2e = null, disabled = false }: IconProps) => {
   const { themeId: theme } = useAppSelector(getConfig);

src/components/Form/email.tsx

@@ -1,17 +1,18 @@
 import { useEffect, useRef, useState } from 'react';
+
+import { AllEvents } from '../../config/enums';
+import { useAppDispatch, useAppSelector } from '../../hooks';
 import { intent } from '../../services/intentions';
-import { getEmailIntentions, setEmail, setIsEmailLoading } from '../../store/slices/intentions';
+import { track } from '../../services/tracking';
 import { getConfig } from '../../store/slices/config';
-import { useAppDispatch, useAppSelector } from '../../hooks';
-import { Input } from '../Input/basic';
+import { getEmailIntentions, setEmail, setIsEmailLoading } from '../../store/slices/intentions';
 import { IconBtn } from '../Button';
+import { Input } from '../Input/basic';
 import { layoutFoot as variant } from '../Layout/variants';
-import { track } from '../../services/tracking';
-import { AllEvents } from '../../config/enums';
 
 export const EmailForm = () => {
   const dispatch = useAppDispatch();
-  const meta = useAppSelector(state => state.meta);
+  const meta = useAppSelector((state) => state.meta);
   const { themeId: theme, translations } = useAppSelector(getConfig);
   const { isLoading } = useAppSelector(getEmailIntentions);
   const { base, input, button } = variant({ theme });

src/components/Form/index.ts

@@ -1,2 +1,2 @@
-export { ResponseForm } from './response';
 export { EmailForm } from './email';
+export { ResponseForm } from './response';

src/components/Form/response.tsx

@@ -1,13 +1,14 @@
 import { useEffect, useRef, useState } from 'react';
-import { fillUserHistoryData, getChat, setLastGroupPointer, setTypingTimeoutExpired } from '../../store/slices/chat';
-import { getResponseIntentions } from '../../store/slices/intentions';
-import { getConfig } from '../../store/slices/config';
-import { useAppDispatch, useAppSelector } from '../../hooks';
-import { Input } from '../../components/Input';
+
 import { IconBtn } from '../../components/Button';
-import { layoutFoot as variant } from '../Layout/variants';
+import { Input } from '../../components/Input';
 import { Roles } from '../../config/enums';
+import { useAppDispatch, useAppSelector } from '../../hooks';
+import { fillUserHistoryData, getChat, setLastGroupPointer, setTypingTimeoutExpired } from '../../store/slices/chat';
+import { getConfig } from '../../store/slices/config';
+import { getResponseIntentions } from '../../store/slices/intentions';
 import { uuidV4 } from '../../utils';
+import { layoutFoot as variant } from '../Layout/variants';
 
 export const ResponseForm = () => {
   const dispatch = useAppDispatch();
@@ -17,7 +18,7 @@ export const ResponseForm = () => {
   const { base, input, button } = variant({ theme });
   const [response, setCurrentResponse] = useState<string | ''>('');
   const [timerId, setTimerId] = useState<NodeJS.Timeout | null>(null);
-  const groupId = useAppSelector(state => state.chat.lastGroupId);
+  const groupId = useAppSelector((state) => state.chat.lastGroupId);
   const inputElement = useRef<HTMLInputElement | null>(null);
 
   useEffect(() => {

src/components/Input/basic.tsx

@@ -1,8 +1,9 @@
 import { forwardRef } from 'react';
+
 import { useAppSelector } from '../../hooks';
+import { BasicInputProps } from '../../interfaces/component';
 import { getConfig } from '../../store/slices/config';
 import { basic as variant } from './variants';
-import { BasicInputProps } from '../../interfaces/component';
 
 export const Input = forwardRef<HTMLInputElement, BasicInputProps>((props, ref) => {
   const {

src/components/Layout/base.tsx

@@ -1,6 +1,5 @@
-import { LayoutBaseProps } from '../../interfaces/component';
 import { useAppSelector, useWindowSize } from '../../hooks';
-
+import { LayoutBaseProps } from '../../interfaces/component';
 import { getConfig } from '../../store/slices/config';
 import { layoutBase as variant } from './variants';
 

src/components/Layout/foot.tsx

@@ -1,15 +1,16 @@
 import { useRef, useState } from 'react';
-import intent from '../../services/intentions';
-import { useAppDispatch, useFootControls } from '../../hooks';
-import { ResponseForm, EmailForm } from '../Form/';
-import { setIsPaymentButtonVisible, setIsPaymentSuccessful, setLink, setPaymentFormVisibility, setPaymentIntentError } from '../../store/slices/intentions';
-import { PaymentButton, Link } from '../Payment';
-import { addPredefinedAssistantMessage, setClosed } from '../../store/slices/chat';
+
 import { PaymentScene } from '../../components/Scenes/payment';
-import { track } from '../../services/tracking';
 import { Ellipsis } from '../../components/Stream/ellipsis';
-import { LINK_CLICKED_KEY } from '../../config/env';
 import { AllEvents } from '../../config/enums';
+import { LINK_CLICKED_KEY } from '../../config/env';
+import { useAppDispatch, useFootControls } from '../../hooks';
+import intent from '../../services/intentions';
+import { track } from '../../services/tracking';
+import { addPredefinedAssistantMessage, setClosed } from '../../store/slices/chat';
+import { setIsPaymentButtonVisible, setIsPaymentSuccessful, setLink, setPaymentFormVisibility, setPaymentIntentError } from '../../store/slices/intentions';
+import { EmailForm,ResponseForm } from '../Form/';
+import { Link,PaymentButton } from '../Payment';
 
 export const LayoutFoot = () => {
   const dispatch = useAppDispatch();

src/components/Layout/head.tsx

@@ -1,12 +1,12 @@
 import { MouseEvent } from 'react';
-import { useAppDispatch, useHeadControls } from '../../hooks';
 
-import { Profile } from '../Profile';
-import { IconBtn } from '../Button';
+import { AllEvents } from '../../config/enums';
+import { useAppDispatch, useHeadControls } from '../../hooks';
 import {  track } from '../../services/tracking';
 import { setClosed } from '../../store/slices/chat';
+import { IconBtn } from '../Button';
+import { Profile } from '../Profile';
 import { layoutHead as variant } from './variants';
-import { AllEvents } from '../../config/enums';
 
 export const LayoutHead = () => {
   const dispatch = useAppDispatch();

src/components/Layout/index.ts

@@ -1,3 +1,3 @@
 export { LayoutBase } from './base';
-export { LayoutHead } from './head';
 export { LayoutFoot } from './foot';
+export { LayoutHead } from './head';

src/components/Link/basic.tsx

@@ -1,5 +1,5 @@
-import { LinkProps } from '../../interfaces/component';
 import { useAppSelector } from '../../hooks';
+import { LinkProps } from '../../interfaces/component';
 import { getConfig } from '../../store/slices/config';
 import { basic as variant } from './variants';
 

src/components/Markdown/link.tsx

@@ -1,14 +1,15 @@
-import { useEffect,MouseEvent } from 'react';
-import { useAppDispatch, useAppSelector } from '../../hooks';
-import formatting from '../../utils/formatting';
+import { MouseEvent,useEffect } from 'react';
+
+import { AllEvents } from '../../config/enums';
 import { LINK_CLICKED_KEY } from '../../config/env';
+import { useAppDispatch, useAppSelector } from '../../hooks';
+import { MarkdownLinkProps } from '../../interfaces/component';
 import { track } from '../../services/tracking';
 import { setClosed } from '../../store/slices/chat';
-import { getMeta } from '../../store/slices/meta';
-import { setLink } from '../../store/slices/intentions';
 import { getConfig } from '../../store/slices/config';
-import { AllEvents } from '../../config/enums';
-import { MarkdownLinkProps } from '../../interfaces/component';
+import { setLink } from '../../store/slices/intentions';
+import { getMeta } from '../../store/slices/meta';
+import formatting from '../../utils/formatting';
 
 export const MarkdownLink = ({ properties }: MarkdownLinkProps) => {
   const { translations } = useAppSelector(getConfig);

src/components/Overlay/index.tsx

@@ -1,5 +1,5 @@
-import { OverlayProps } from '../../interfaces/component';
 import { useAppSelector } from '../../hooks';
+import { OverlayProps } from '../../interfaces/component';
 import { getConfig } from '../../store/slices/config';
 import overlay from './variants';
 

src/components/Payment/btn.tsx

@@ -1,15 +1,16 @@
 import { useEffect } from 'react';
-import { PaymentButtonProps } from '../../interfaces/component';
+
+import { AllEvents } from '../../config/enums';
 import { useAppSelector } from '../../hooks';
+import { PaymentButtonProps } from '../../interfaces/component';
+import { track } from '../../services/tracking';
 import { getConfig } from '../../store/slices/config';
 import { payment as variant } from './variants';
-import { track } from '../../services/tracking';
-import { AllEvents } from '../../config/enums';
 
 export const PaymentButton = ({ text, onClick, e2e, disabled = false }: PaymentButtonProps) => {
   const { themeId: theme } = useAppSelector(getConfig);
-  const meta = useAppSelector(state => state.meta);
-  const currentEmail = useAppSelector(state => state.intentions.email.current);
+  const meta = useAppSelector((state) => state.meta);
+  const currentEmail = useAppSelector((state) => state.intentions.email.current);
   const { btn } = variant({ theme });
 
   useEffect(() => {

src/components/Payment/head.tsx

@@ -8,7 +8,7 @@ interface PaymentHeadProps {
 }
 
 export const PaymentHead = ({ config }: PaymentHeadProps) => {
-  const { translations } = useAppSelector(state => state.config);
+  const { translations } = useAppSelector((state) => state.config);
   const { wrapper, left, leftTop, icon, text, bottom, right, price, info } = variants();
 
   return (

src/components/Payment/index.ts

@@ -1,6 +1,6 @@
-export { PaymentHead } from './head';
 export { PaymentButton } from './btn';
 export { CloseButton } from './close';
 export { PaymentFooter } from './foot';
-export { PaymentLoader } from './loader';
+export { PaymentHead } from './head';
 export { Link } from './link';
+export { PaymentLoader } from './loader';

src/components/Payment/link.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
-import payment from './variants';
+
 import { LinkProps } from '../../interfaces/component';
+import payment from './variants';
 
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
   const { link } = payment();

src/components/Profile/index.tsx

@@ -1,6 +1,6 @@
-import { ProfileProps } from '../../interfaces/component';
 import { ScreenOrientation } from '../../config/enums';
 import { useAppSelector } from '../../hooks';
+import { ProfileProps } from '../../interfaces/component';
 import { getConfig } from '../../store/slices/config';
 import { profile as variant } from './variants';
 

src/components/Scenes/payment.tsx

@@ -1,12 +1,13 @@
 import { MouseEvent } from 'react';
-import { Overlay } from '../Overlay';
-import { PaymentHead, CloseButton, PaymentFooter, PaymentLoader, } from '../Payment';
+
 import { useAppSelector } from '../../hooks';
+import { Overlay } from '../Overlay';
+import { CloseButton, PaymentFooter, PaymentHead, PaymentLoader, } from '../Payment';
 import { wrapper } from '../Payment/variants';
 
 export const PaymentScene = ({ onClose }: { onClose: (e: MouseEvent<HTMLButtonElement>) => void }) => {
-  const { displayPlanPrice, billingFrequencyTmsg } = useAppSelector(state => state.meta.pd);
-  const { translations, themeId: theme } = useAppSelector(state => state.config);
+  const { displayPlanPrice, billingFrequencyTmsg } = useAppSelector((state) => state.meta.pd);
+  const { translations, themeId: theme } = useAppSelector((state) => state.config);
   const { base } = wrapper({ theme });
 
   return (

src/components/Stream/assistant.tsx

@@ -1,28 +1,29 @@
-import Markdown from 'react-markdown';
 import React from 'react';
+import Markdown from 'react-markdown';
+
+import { Definition } from '../../config/enums';
 import { useAppSelector } from '../../hooks';
-import { getConfig } from '../../store/slices/config';
+import { AssistantProps } from '../../interfaces/component';
 import { getChat, sortBySequence } from '../../store/slices/chat';
+import { getConfig } from '../../store/slices/config';
 import { getMeta } from '../../store/slices/meta';
-import { flickerEffect } from './variants';
-import OptionList from './options';
-import MarkdownLink from '../Markdown/link';
-import { Definition } from '../../config/enums';
 import { uuidV4 } from '../../utils';
-import { AssistantProps } from '../../interfaces/component';
+import MarkdownLink from '../Markdown/link';
 import { Iframe } from '../Video';
+import OptionList from './options';
+import { flickerEffect } from './variants';
 
 const Assistant = ({ message, itemId }: AssistantProps) => {
   const { themeId: theme } = useAppSelector(getConfig);
   const { isStreaming } = useAppSelector(getChat);
   const { pd } = useAppSelector(getMeta);
-  const isLast = useAppSelector(state => state.chat.historyIds.length - 1 === state.chat.historyIds.indexOf(itemId));
+  const isLast = useAppSelector((state) => state.chat.historyIds.length - 1 === state.chat.historyIds.indexOf(itemId));
   const { base: baseFlicker } = flickerEffect({ isTyping: isStreaming && isLast, theme });
   const sortedContent = [...message.content].sort(sortBySequence);
 
   return (
     <>
-      {sortedContent.map(it => {
+      {sortedContent.map((it) => {
         if (it.type === Definition.text) {
           return (
             <div