RI-7861: Fix ESLint issues (#5343)

* fix(config): include stories in tsconfig for ESLint type-aware linting
The stories/playground/*.tsx files were not included in any tsconfig,
causing ESLint parsing errors during type-aware linting.

- Fix import order in Gallery.tsx and PlaygroundPage.tsx
- Fix variable shadowing in Colors.tsx by reusing outer scope regex
- Fix no-use-before-define in Theme.tsx by moving component definitions
  before the main Theme component that uses them

Author: pawelangelow

redisinsight/api/src/modules/rdi/exceptions/rdi-pipeline.error.handler.ts

@@ -7,7 +7,7 @@ import {
   RdiPipelineValidationException,
 } from 'src/modules/rdi/exceptions';
 import { RdiPipelineForbiddenException } from './rdi-pipeline.forbidden.exception';
-import { RdiPipelineBadRequestException } from "src/modules/rdi/exceptions/rdi-pipeline.bad-request.exception";
+import { RdiPipelineBadRequestException } from 'src/modules/rdi/exceptions/rdi-pipeline.bad-request.exception';
 
 export const parseErrorMessage = (error: AxiosError<any>): string => {
   const data = error.response?.data;

redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.stories.tsx

@@ -1,13 +1,13 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@storybook/react-vite'
 
-import BottomGroupMinimized from './BottomGroupMinimized';
+import BottomGroupMinimized from './BottomGroupMinimized'
 
 const meta = {
   component: BottomGroupMinimized,
-} satisfies Meta<typeof BottomGroupMinimized>;
+} satisfies Meta<typeof BottomGroupMinimized>
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof meta>
 
-export const Default: Story = {};
+export const Default: Story = {}

stories/playground/Colors.tsx

@@ -109,7 +109,8 @@ export const Colors = () => {
 
   const filteredSemanticColors = Object.keys(semanticColors).reduce(
     (acc, colorSection) => {
-      const tempColors = semanticColors[colorSection as keyof typeof semanticColors]
+      const tempColors =
+        semanticColors[colorSection as keyof typeof semanticColors]
       Object.entries(tempColors).forEach(([colorName, color]) => {
         if (!search || regex.test(colorName)) {
           semanticCount++
@@ -123,18 +124,8 @@ export const Colors = () => {
     },
     {} as Record<string, Record<string, string>>,
   )
-  const filteredRootColors = Object.entries(rootColors).filter(
-    ([colorName]) => {
-      if (!search) {
-        return true
-      }
-      // Create regex pattern: each character from search with .* in between
-      // Escape special regex characters
-      const escapedSearch = search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-      const pattern = escapedSearch.split('').join('.*')
-      const regex = new RegExp(pattern, 'i')
-      return regex.test(colorName)
-    },
+  const filteredRootColors = Object.entries(rootColors).filter(([colorName]) =>
+    !search ? true : regex.test(colorName),
   )
 
   return (

stories/playground/Gallery.tsx

@@ -1,13 +1,11 @@
 import React, { useState } from 'react'
-import { FlexItem, Grid } from 'uiSrc/components/base/layout/flex'
+import styled from 'styled-components'
+import { Col, FlexItem, Grid, Row } from 'uiSrc/components/base/layout/flex'
 import { AllIconsType, RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import * as Icons from 'uiSrc/components/base/icons/iconRegistry'
-import styled from 'styled-components'
-import { Text } from 'uiSrc/components/base/text'
+import { ColorText, Text } from 'uiSrc/components/base/text'
 import { type Theme as ThemeType } from 'uiSrc/components/base/theme/types'
-import { Col, Row } from 'uiSrc/components/base/layout/flex'
 import { SearchInput } from 'uiSrc/components/base/inputs'
-import { ColorText } from '../../redisinsight/ui/src/components/base/text'
 
 const skip = [
   'IconProps',

stories/playground/PlaygroundPage.tsx

@@ -1,13 +1,13 @@
 import React, { useState } from 'react'
-import { Col, Row } from 'uiSrc/components/base/layout/flex'
-import { Title } from 'uiSrc/components/base/text/Title'
-import { Theme } from './Theme'
-import { Gallery } from './Gallery'
-import { Colors } from './Colors'
 import styled, { ThemeProvider } from 'styled-components'
 import { themeDark, themeLight, themeOld } from '@redis-ui/styles'
-import { type Theme as ThemeType } from 'uiSrc/components/base/theme/types'
+import { Col, Row } from 'uiSrc/components/base/layout/flex'
 import { Text } from 'uiSrc/components/base/text'
+import { Title } from 'uiSrc/components/base/text/Title'
+import { type Theme as ThemeType } from 'uiSrc/components/base/theme/types'
+import { Colors } from './Colors'
+import { Gallery } from './Gallery'
+import { Theme } from './Theme'
 
 export const Container = styled(Row).attrs({ gap: 'm' })`
   padding: 2rem;