fix: fix tailwindcss lint plugin (epam#60)

.eslintrc.json

@@ -10,6 +10,12 @@
   "parser": "@typescript-eslint/parser",
   "plugins": ["@typescript-eslint", "tailwindcss"],
   "root": true,
+  "settings": {
+    "tailwindcss": {
+      "config": "./tailwind.config.js",
+      "callees": ["classnames", "classNames"]
+    }
+  },
   "rules": {
     "no-empty": "warn",
     "@typescript-eslint/no-explicit-any": "warn",

package.json

@@ -87,8 +87,8 @@
     "gpt-3-encoder": "^1.1.4",
     "jsdom": "^21.1.1",
     "postcss": "^8.4.21",
-    "prettier": "^2.8.7",
-    "prettier-plugin-tailwindcss": "^0.2.5",
+    "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.7",
     "tailwindcss": "^3.3.5",
     "typescript": "^5.2.2",
     "vitest": "^0.29.7"

prettier.config.js

@@ -5,6 +5,7 @@ module.exports = {
     '@trivago/prettier-plugin-sort-imports',
     'prettier-plugin-tailwindcss',
   ],
+  tailwindFunctions: ['classnames', 'classNames'],
   importOrder: [
     'react', // React
     '^react-.*$', // React-related imports
@@ -29,5 +30,4 @@ module.exports = {
   ],
   importOrderSeparation: true,
   importOrderSortSpecifiers: true,
-  pluginSearchDirs: false,
 };

src/components/Chat/ChatInput.tsx

@@ -367,7 +367,7 @@ export const ChatInput = ({
 
           {showScrollDownButton && (
             <ScrollDownButton
-              containerClassNames="2xl:right-[-60px] xl:right-2 2xl:bottom-0  2xl:top-auto -top-14 right-0"
+              className="-top-14 right-0 xl:right-2 2xl:bottom-0 2xl:right-[-60px] 2xl:top-auto"
               onScrollDownClick={onScrollDownClick}
             />
           )}

src/components/Chat/PlaybackControls.tsx

@@ -205,7 +205,7 @@ export const PlaybackControls = ({
 
       {showScrollDownButton && (
         <ScrollDownButton
-          containerClassNames="bottom-16 right-2 md:right-5 md:bottom-20 xl:right-2 xl:bottom-6"
+          className="bottom-16 right-2 md:bottom-20 md:right-5 xl:bottom-6 xl:right-2"
           onScrollDownClick={onScrollDownClick}
         />
       )}

src/components/Chat/ScrollDownButton.tsx

@@ -4,19 +4,11 @@ import classNames from 'classnames';
 
 interface Props {
   onScrollDownClick: () => void;
-  containerClassNames?: string;
+  className?: string;
 }
-export const ScrollDownButton = ({
-  onScrollDownClick,
-  containerClassNames,
-}: Props) => {
+export const ScrollDownButton = ({ onScrollDownClick, className }: Props) => {
   return (
-    <div
-      className={classNames(
-        'absolute  aspect-square h-11',
-        containerClassNames,
-      )}
-    >
+    <div className={classNames('absolute  aspect-square h-11', className)}>
       <button
         className="flex h-full w-full items-center justify-center rounded-full bg-gray-100 p-2 hover:bg-gray-400 dark:bg-gray-700 hover:dark:bg-gray-600"
         onClick={onScrollDownClick}

src/components/Common/DropdownMenu.tsx

@@ -42,8 +42,9 @@ import {
 
 import classNames from 'classnames';
 
-const menuItemClassNames =
-  'flex focus-visible:border-none focus-visible:outline-none gap-3 cursor-pointer px-3 items-center max-w-[300px]';
+const menuItemClassNames = classNames(
+  'flex max-w-[300px] cursor-pointer items-center gap-3 px-3 focus-visible:border-none focus-visible:outline-none',
+);
 
 const MenuContext = createContext<{
   getItemProps: (userProps?: HTMLProps<HTMLElement>) => Record<string, unknown>;

src/components/Sidebar/Sidebar.tsx

@@ -74,7 +74,7 @@ const Sidebar = <T,>({
     <div
       className={classNames(
         `group/sidebar fixed top-12 z-40 flex h-[calc(100%-48px)] w-[260px] flex-none shrink-0 flex-col divide-y divide-gray-300 border-r border-gray-300 bg-gray-100 transition-all dark:divide-gray-900 dark:border-gray-900 dark:bg-gray-700  xl:relative xl:top-0 xl:h-full`,
-        `${side}-0`,
+        side === 'left' ? `left-0` : 'right-0',
       )}
       data-qa="sidebar"
     >

src/utils/app/merge-streams.ts

@@ -10,11 +10,14 @@ export const parseStreamMessages = (message: string): Partial<Message>[] => {
 };
 
 const mergeStages = (sourceStages: Stage[], newStages: Stage[]) => {
-  const sourceStagesReducer = sourceStages.reduce((acc, curr) => {
-    acc[curr.index] = curr;
-
-    return acc;
-  }, {} as Record<number, Stage>);
+  const sourceStagesReducer = sourceStages.reduce(
+    (acc, curr) => {
+      acc[curr.index] = curr;
+
+      return acc;
+    },
+    {} as Record<number, Stage>,
+  );
 
   newStages.forEach((stage) => {
     if (sourceStagesReducer[stage.index]) {

src/utils/data/throttle.ts

@@ -11,12 +11,15 @@ export function throttle<T extends (...args: any[]) => any>(
       lastRan = Date.now();
     } else {
       clearTimeout(lastFunc);
-      lastFunc = setTimeout(() => {
-        if (Date.now() - lastRan >= limit) {
-          func(...args);
-          lastRan = Date.now();
-        }
-      }, limit - (Date.now() - lastRan));
+      lastFunc = setTimeout(
+        () => {
+          if (Date.now() - lastRan >= limit) {
+            func(...args);
+            lastRan = Date.now();
+          }
+        },
+        limit - (Date.now() - lastRan),
+      );
     }
   }) as T;
 }