Merge pull request #239 from Hexastack/238-issue-widget-imports-order

fix(widget): eslint imports order

widget/.eslintrc.json

@@ -24,7 +24,8 @@
           "unknown", // <- unknown
           "index", // <- index imports
           "internal", // <- Absolute imports
-          ["sibling", "parent"] // <- Relative imports, the sibling and parent types they can be mingled together
+          "parent", // <- Relative imports, the sibling and parent types they can be mingled together
+          "sibling"
         ],
         "newlines-between": "always",
         "alphabetize": {

widget/src/components/ChatHeader.tsx

@@ -8,10 +8,11 @@
 
 import { FC, PropsWithChildren } from 'react';
 
-import CloseIcon from './icons/CloseIcon';
 import { useColors } from '../providers/ColorProvider';
 import { useSettings } from '../providers/SettingsProvider';
 import { useWidget } from '../providers/WidgetProvider';
+
+import CloseIcon from './icons/CloseIcon';
 import './ChatHeader.scss';
 
 type ChatHeaderProps = PropsWithChildren;

widget/src/components/ChatWindow.tsx

@@ -8,13 +8,14 @@
 
 import React, { PropsWithChildren } from 'react';
 
+import { useChat } from '../providers/ChatProvider';
+import { useWidget } from '../providers/WidgetProvider';
+
 import ChatHeader from './ChatHeader';
 import ConnectionLost from './ConnectionLost';
 import Messages from './Messages';
 import UserInput from './UserInput';
 import Webview from './Webview';
-import { useChat } from '../providers/ChatProvider';
-import { useWidget } from '../providers/WidgetProvider';
 import './ChatWindow.scss';
 
 type ChatWindowProps = PropsWithChildren<{

widget/src/components/ConnectionLost.tsx

@@ -8,11 +8,12 @@
 
 import React from 'react';
 
-import ConnectionIcon from './icons/ConnectionIcon';
-import LoadingIcon from './icons/LoadingIcon';
 import { useTranslation } from '../hooks/useTranslation';
 import { useChat } from '../providers/ChatProvider';
 import { useColors } from '../providers/ColorProvider';
+
+import ConnectionIcon from './icons/ConnectionIcon';
+import LoadingIcon from './icons/LoadingIcon';
 import './ConnectionLost.scss';
 
 const ConnectionLost: React.FC = () => {

widget/src/components/Launcher.tsx

@@ -8,13 +8,14 @@
 
 import React, { PropsWithChildren } from 'react';
 
-import ChatWindow from './ChatWindow';
-import CloseIcon from './icons/CloseIcon';
-import OpenIcon from './icons/OpenIcon';
 import { useChat } from '../providers/ChatProvider';
 import { useColors } from '../providers/ColorProvider';
 import { useSocketLifecycle } from '../providers/SocketProvider';
 import { useWidget, WidgetContextType } from '../providers/WidgetProvider';
+
+import ChatWindow from './ChatWindow';
+import CloseIcon from './icons/CloseIcon';
+import OpenIcon from './icons/OpenIcon';
 import './Launcher.scss';
 
 type LauncherProps = PropsWithChildren<{

widget/src/components/Message.tsx

@@ -12,6 +12,10 @@ import 'dayjs/locale/fr';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import React, { PropsWithChildren, useState } from 'react';
 
+import { useChat } from '../providers/ChatProvider';
+import { useColors } from '../providers/ColorProvider';
+import { TMessage } from '../types/message.types';
+
 import ChatIcon from './icons/ChatIcon';
 import ButtonsMessage from './messages/ButtonMessage';
 import CarouselMessage from './messages/CarouselMessage';
@@ -20,9 +24,6 @@ import GeolocationMessage from './messages/GeolocationMessage';
 import ListMessage from './messages/ListMessage';
 import TextMessage from './messages/TextMessage';
 import MessageStatus from './MessageStatus';
-import { useChat } from '../providers/ChatProvider';
-import { useColors } from '../providers/ColorProvider';
-import { TMessage } from '../types/message.types';
 import './Message.scss';
 
 dayjs.extend(relativeTime);

widget/src/components/MessageStatus.tsx

@@ -8,9 +8,10 @@
 
 import React from 'react';
 
-import CheckIcon from './icons/CheckIcon';
 import { useColors } from '../providers/ColorProvider';
 import { TMessage } from '../types/message.types';
+
+import CheckIcon from './icons/CheckIcon';
 import './MessageStatus.scss';
 
 interface MessageStatusProps {

widget/src/components/Messages.tsx

@@ -8,14 +8,15 @@
 
 import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
 
-import Message from "./Message";
-import TypingMessage from "./messages/TypingMessage";
 import { useChat } from "../providers/ChatProvider";
 import { useColors } from "../providers/ColorProvider";
 import { useWidget } from "../providers/WidgetProvider";
-import "./Messages.scss";
 import { TMessage } from "../types/message.types";
 
+import Message from "./Message";
+import "./Messages.scss";
+import TypingMessage from "./messages/TypingMessage";
+
 type MessagesProps = PropsWithChildren<{
   Avatar?: () => JSX.Element;
 }>;

widget/src/components/UserInput.tsx

@@ -8,6 +8,13 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 
+import { useTranslation } from '../hooks/useTranslation';
+import { useChat } from '../providers/ChatProvider';
+import { useColors } from '../providers/ColorProvider';
+import { useSettings } from '../providers/SettingsProvider';
+import { TOutgoingMessageType } from '../types/message.types';
+import { OutgoingMessageState } from '../types/state.types';
+
 import EmojiButton from './buttons/EmojiButton';
 import FileButton from './buttons/FileButton';
 import LocationButton from './buttons/LocationButton';
@@ -16,12 +23,6 @@ import SendButton from './buttons/SendButton';
 import CloseIcon from './icons/CloseIcon';
 import FileInputIcon from './icons/FileInputIcon';
 import Suggestions from './Suggestions';
-import { useTranslation } from '../hooks/useTranslation';
-import { useChat } from '../providers/ChatProvider';
-import { useColors } from '../providers/ColorProvider';
-import { useSettings } from '../providers/SettingsProvider';
-import { TOutgoingMessageType } from '../types/message.types';
-import { OutgoingMessageState } from '../types/state.types';
 
 import './UserInput.scss';
 

widget/src/components/Webview.tsx

@@ -8,10 +8,11 @@
 
 import React, { useEffect, useState } from 'react';
 
-import BackIcon from './icons/BackIcon';
 import { useTranslation } from '../hooks/useTranslation';
 import { useChat } from '../providers/ChatProvider';
 import { useColors } from '../providers/ColorProvider';
+
+import BackIcon from './icons/BackIcon';
 import './Webview.scss';
 
 const Webview: React.FC = () => {

widget/src/components/messages/CarouselMessage.tsx

@@ -6,13 +6,14 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
-import ButtonsMessage from './ButtonMessage';
-import { useColors } from '../../providers/ColorProvider';
-import { TButton, Direction, TMessage } from '../../types/message.types';
-import './CarouselMessage.scss';
-import { processContent } from '../../utils/text';
+import { useColors } from "../../providers/ColorProvider";
+import { Direction, TButton, TMessage } from "../../types/message.types";
+import { processContent } from "../../utils/text";
+
+import ButtonsMessage from "./ButtonMessage";
+import "./CarouselMessage.scss";
 
 interface Element {
   title: string;
@@ -73,13 +74,13 @@ const CarouselMessage: React.FC<CarouselMessageProps> = ({
   const items = messageCarousel.data.elements;
   const goToPrevious = () => {
     setActiveIndex(
-      (prevIndex) => (prevIndex + items.length - 1) % items.length,
+      (prevIndex) => (prevIndex + items.length - 1) % items.length
     );
   };
   const goToNext = () => {
     setActiveIndex((prevIndex) => (prevIndex + 1) % items.length);
   };
-  const colors = allColors[messageCarousel.direction || 'received'];
+  const colors = allColors[messageCarousel.direction || "received"];
 
   return (
     <div

widget/src/components/messages/ListMessage.tsx

@@ -8,10 +8,11 @@
 
 import React from 'react';
 
-import ButtonsMessage from './ButtonMessage';
 import { useColors } from '../../providers/ColorProvider';
 import { TMessage } from '../../types/message.types';
 
+import ButtonsMessage from './ButtonMessage';
+
 import './ListMessage.scss';
 
 interface ListMessageProps {

widget/src/providers/ChatProvider.tsx

@@ -16,10 +16,6 @@ import React, {
   useState,
 } from 'react';
 
-import { useConfig } from './ConfigProvider';
-import { useSettings } from './SettingsProvider';
-import { useSocket, useSubscribe } from './SocketProvider';
-import { useWidget } from './WidgetProvider';
 import { StdEventType } from '../types/chat-io-messages.types';
 import {
   Direction,
@@ -33,6 +29,11 @@ import {
 } from '../types/message.types';
 import { ConnectionState, OutgoingMessageState } from '../types/state.types';
 
+import { useConfig } from './ConfigProvider';
+import { useSettings } from './SettingsProvider';
+import { useSocket, useSubscribe } from './SocketProvider';
+import { useWidget } from './WidgetProvider';
+
 interface Participant {
   id: string;
   name: string;

widget/src/providers/ColorProvider.tsx

@@ -8,10 +8,11 @@
 
 import React, { createContext, ReactNode, useContext } from 'react';
 
-import { useSettings } from './SettingsProvider';
 import colors from '../constants/colors';
 import { ColorState } from '../types/colors.types';
 
+import { useSettings } from './SettingsProvider';
+
 const initialState: ColorState = colors['orange'];
 const ColorContext = createContext<{
   colors: ColorState;

widget/src/providers/SettingsProvider.tsx

@@ -14,11 +14,12 @@ import React, {
   useState,
 } from 'react';
 
-import { useSubscribe } from './SocketProvider';
 import { useTranslation } from '../hooks/useTranslation';
 import { IMenuNode } from '../types/menu.type';
 import { SessionStorage } from '../utils/sessionStorage';
 
+import { useSubscribe } from './SocketProvider';
+
 type ChannelSettings = {
   menu: IMenuNode[];
   secret: string;

widget/src/providers/SocketProvider.tsx

@@ -14,9 +14,10 @@ import {
   useRef,
 } from 'react';
 
-import { useConfig } from './ConfigProvider';
 import { getSocketIoClient, SocketIoClient } from '../utils/SocketIoClient';
 
+import { useConfig } from './ConfigProvider';
+
 interface socketContext {
   socket: SocketIoClient;
 }

widget/src/providers/TranslationProvider.tsx

@@ -8,9 +8,10 @@
 
 import React, { createContext, useContext, useState, ReactNode } from 'react';
 
-import { useConfig } from './ConfigProvider';
 import { translations } from '../translations';
 
+import { useConfig } from './ConfigProvider';
+
 type Language = keyof typeof translations;
 
 interface TranslationContextProps {