PR-227028: update dependencies, migrate to TypeScript 6 and ESLint flat config

- Bump all dependencies to latest (React 19.2.7, Storybook 10.4.3, Webpack
  5.107.2 + webpack-cli 7, Jest 30.4.2, Cypress 15.17.0, Babel 7.29.7,
  sass-loader 17, css-minimizer-webpack-plugin 8, eslint-webpack-plugin 6).
- Migrate TypeScript 5.9 -> 6.0.3: set tsconfig rootDir, add
  ignoreDeprecations "6.0", scope include to src/components + src/@types, and
  declare *.scss/*.sass/*.css modules for stricter side-effect imports.
- Switch @babel/preset-react to the automatic JSX runtime and drop redundant
  React imports in stories and tests.
- Migrate ESLint from the deprecated .eslintrc.js to flat config
  (eslint.config.mjs) using typescript-eslint, @eslint/js, globals and the
  React/Storybook plugins. Keep ESLint at v9 because eslint-plugin-react does
  not support v10 yet. This fixes the previously broken lint (missing
  @typescript-eslint parser/plugin) and normalizes formatting.
- Fix a latent bug in .storybook/main.js (comma instead of semicolon joining
  two assignments via the comma operator).
- npm audit fix: 0 vulnerabilities.
- Bump package version to 1.4.0.

src/@types/custom.d.ts

@@ -1,8 +1,13 @@
-declare module "*.svg" {
+declare module '*.svg' {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const content: any;
     export default content;
 }
 
-declare module "@storybook/react" {
-    export * from "@storybook/react/dist/index";
+declare module '*.scss';
+declare module '*.sass';
+declare module '*.css';
+
+declare module '@storybook/react' {
+    export * from '@storybook/react/dist/index';
 }

src/__mocks__/fileMock.ts

@@ -1 +1 @@
-module.exports = ''; 
+module.exports = ''; 

src/components/Card/Card.stories.tsx

@@ -1,28 +1,27 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Card } from '@components';
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta: Meta<typeof Card> = {
-  title: 'Example/Card',
-  component: Card,
-  parameters: {
-    docs: {
-      description: {
-        component: 'A reusable Card component for displaying content with an optional title.',
-      },
-    },
-  },
-  argTypes: {
-    title: {
-      control: 'text',
-      description: 'The title of the card',
-    },
-    children: {
-      control: false,
-      description: 'The content to display inside the card',
-    },
-  },
+	title: 'Example/Card',
+	component: Card,
+	parameters: {
+		docs: {
+			description: {
+				component: 'A reusable Card component for displaying content with an optional title.',
+			},
+		},
+	},
+	argTypes: {
+		title: {
+			control: 'text',
+			description: 'The title of the card',
+		},
+		children: {
+			control: false,
+			description: 'The content to display inside the card',
+		},
+	},
 };
 
 export default meta;
@@ -30,8 +29,8 @@ type Story = StoryObj<typeof meta>;
 
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 export const Basic: Story = {
-  args: {
-    title: 'Test Title',
-    children: <p>Test Content</p>,
-  },
+	args: {
+		title: 'Test Title',
+		children: <p>Test Content</p>,
+	},
 };

src/components/Card/index.tsx

@@ -1,5 +1,5 @@
-import React, { FC } from "react";
-import "./style.scss";
+import React, { FC } from 'react';
+import './style.scss';
 
 type TCardProps = {
   /**
@@ -13,13 +13,13 @@ type TCardProps = {
 };
 
 const Card: FC<TCardProps> = ({ title, children}) => {
-  return (
-    <div className="Card">
-      <div className="Title">{title}</div>
+	return (
+		<div className="Card">
+			<div className="Title">{title}</div>
 
-      <div className="Content">{children}</div>
-    </div>
-  );
+			<div className="Content">{children}</div>
+		</div>
+	);
 };
 
-export { Card, TCardProps }
+export { Card, TCardProps };

src/components/__tests__/Card.test.cy.tsx

@@ -1,14 +1,13 @@
-import React from 'react';
 import { Card } from '@components';
 
 describe('Testing Card Component', () => {
-  beforeEach(() => {
-    cy.mount(<Card title='Test Title'><p>Test Content</p></Card>);
-  })
-  it('Show Title', () => {
-    cy.get('div').contains('Test Title');
-  })
-  it('Show Child Component', () => {
-    cy.get('p').contains('Test Content');
-  })
-})
+	beforeEach(() => {
+		cy.mount(<Card title='Test Title'><p>Test Content</p></Card>);
+	});
+	it('Show Title', () => {
+		cy.get('div').contains('Test Title');
+	});
+	it('Show Child Component', () => {
+		cy.get('p').contains('Test Content');
+	});
+});

src/components/__tests__/Card.test.tsx

@@ -1,24 +1,23 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Card } from '@components';
 
 describe('<Card/> Component', () => {
-    beforeEach(() => {
-        // fetchMock.resetMocks();
-        render(<Card title='Test Title'><p>Test Content</p></Card>)
-    });
-    it('Show Title', async () => {
-        /* fetchMock.mockResponseOnce(JSON.stringify({
+	beforeEach(() => {
+		// fetchMock.resetMocks();
+		render(<Card title='Test Title'><p>Test Content</p></Card>);
+	});
+	it('Show Title', async () => {
+		/* fetchMock.mockResponseOnce(JSON.stringify({
             //First Data Fetch
             data: 'data'
         })); */
-        expect(screen.getByText('Test Title')).toBeInTheDocument();
-    })
-    it('Show Child Component', async () => {
-        /* fetchMock.mockResponseOnce(JSON.stringify({
+		expect(screen.getByText('Test Title')).toBeInTheDocument();
+	});
+	it('Show Child Component', async () => {
+		/* fetchMock.mockResponseOnce(JSON.stringify({
             //First Data Fetch
             data: 'data'
         })); */
-        expect(screen.getByText('Test Content')).toBeInTheDocument();
-    })
-})
+		expect(screen.getByText('Test Content')).toBeInTheDocument();
+	});
+});

src/components/index.tsx

@@ -1 +1 @@
-export * from './Card';
+export * from './Card';