migrated js components to jsx (#5307)

# About the pull request

First round of refactors for TGUI-5 migration. Here all TGUI interfaces
and components have been changed from .js to .jsx. This is to closer
align us to the standards of tgstation. Within the components themselves
there are no functional changes.

Files of interest:

- tgui/webpack.config.js
- tgui/packages/tgui/routes.jsx
- tgui/packages/tgui/interfaces/Filteriffic.jsx
- tgui/packages/tgui/debug/KitchenSink.jsx

The rest of the file changes should just be .js -> .jsx

<!-- Remove this text and explain what the purpose of your PR is.

Mention if you have tested your changes. If you changed a map, make sure
you used the mapmerge tool.
If this is an Issue Correction, you can type "Fixes Issue #169420" to
link the PR to the corresponding Issue number #169420.

Remember: something that is self-evident to you might not be to others.
Explain your rationale fully, even if you feel it goes without saying.
-->

# Explain why it's good for the game

Groundwork prep for TGUI 5
# Testing Photographs and Procedure
<details>
<summary>Screenshots & Videos</summary>

Put screenshots and videos here with an empty line between the
screenshots and the `<details>` tags.

</details>


# Changelog
:cl:
refactor: tgui js components now jsx
/:cl:

tgui/packages/tgui/debug/KitchenSink.js → tgui/packages/tgui/debug/KitchenSink.jsx

@@ -8,7 +8,7 @@ import { useLocalState } from '../backend';
 import { Flex, Section, Tabs } from '../components';
 import { Pane, Window } from '../layouts';
 
-const r = require.context('../stories', false, /\.stories\.js$/);
+const r = require.context('../stories', false, /\.stories\.jsx$/);
 
 /**
  * @returns {{

tgui/packages/tgui/interfaces/Filteriffic.js → tgui/packages/tgui/interfaces/Filteriffic.jsx

@@ -1,6 +1,6 @@
 import { map } from 'common/collections';
 import { toFixed } from 'common/math';
-import { numberOfDecimalDigits } from '../../common/math';
+import { numberOfDecimalDigits } from 'common/math';
 import { useBackend, useLocalState } from '../backend';
 import { Box, Button, Collapsible, ColorBox, Dropdown, Input, LabeledList, NoticeBox, NumberInput, Section } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/routes.js → tgui/packages/tgui/routes.jsx

@@ -74,6 +74,7 @@ export const getRoutedComponent = (store) => {
   const name = config?.interface;
   const interfacePathBuilders = [
     (name) => `./${name}.tsx`,
+    (name) => `./${name}.jsx`,
     (name) => `./${name}.js`,
     (name) => `./${name}/index.tsx`,
     (name) => `./${name}/index.js`,

tgui/webpack.config.js

@@ -55,13 +55,13 @@ module.exports = (env = {}, argv) => {
       chunkLoadTimeout: 15000,
     },
     resolve: {
-      extensions: ['.tsx', '.ts', '.js'],
+      extensions: ['.jsx', '.tsx', '.ts', '.js'],
       alias: {},
     },
     module: {
       rules: [
         {
-          test: /\.(js|cjs|ts|tsx)$/,
+          test: /\.(js|jsx|cjs|ts|tsx)$/,
           use: [
             {
               loader: require.resolve('babel-loader'),