"Upgrades" tgui eslint

uses the current tgui eslint and upgrades react to 18.2. At least it will stop worrying about the line length

tgui/.eslintrc.yml

@@ -1,4 +1,5 @@
 root: true
+extends: prettier
 parser: '@typescript-eslint/parser'
 parserOptions:
   ecmaVersion: 2020
@@ -10,13 +11,14 @@ env:
   browser: true
   node: true
 plugins:
-  - radar
+  - sonarjs
   - react
+  - unused-imports
+  - simple-import-sort
 settings:
   react:
-    version: '16.10'
+    version: '18.2'
 rules:
-
   ## Possible Errors
   ## ----------------------------------------
   ## Enforce “for” loop update clause moving the counter in the right
@@ -307,13 +309,16 @@ rules:
   ## Enforce or disallow capitalization of the first letter of a comment
   # capitalized-comments: error
   ## Require or disallow trailing commas
-  comma-dangle: [error, {
-    arrays: always-multiline,
-    objects: always-multiline,
-    imports: always-multiline,
-    exports: always-multiline,
-    functions: only-multiline, ## Optional on functions
-  }]
+  comma-dangle: [
+      error,
+      {
+        arrays: always-multiline,
+        objects: always-multiline,
+        imports: always-multiline,
+        exports: always-multiline,
+        functions: only-multiline, ## Optional on functions
+      },
+    ]
   ## Enforce consistent spacing before and after commas
   comma-spacing: [error, { before: false, after: true }]
   ## Enforce consistent comma style
@@ -333,7 +338,7 @@ rules:
   ## Require or disallow named function expressions
   # func-names: error
   ## Enforce the consistent use of either function declarations or expressions
-  func-style: [error, expression]
+  # func-style: [error, expression]
   ## Enforce line breaks between arguments of a function call
   # function-call-argument-newline: error
   ## Enforce consistent line breaks inside function parentheses
@@ -348,15 +353,15 @@ rules:
   ## Enforce the location of arrow function bodies
   # implicit-arrow-linebreak: error
   ## Enforce consistent indentation
-  indent: [error, 2, { SwitchCase: 1 }]
+  # indent: [error, 2, { SwitchCase: 1 }]
   ## Enforce the consistent use of either double or single quotes in JSX
   ## attributes
-  jsx-quotes: [error, prefer-double]
+  # jsx-quotes: [error, prefer-double]
   ## Enforce consistent spacing between keys and values in object literal
   ## properties
-  key-spacing: [error, { beforeColon: false, afterColon: true }]
+  # key-spacing: [error, { beforeColon: false, afterColon: true }]
   ## Enforce consistent spacing before and after keywords
-  keyword-spacing: [error, { before: true, after: true }]
+  # keyword-spacing: [error, { before: true, after: true }]
   ## Enforce position of line comments
   # line-comment-position: error
   ## Enforce consistent linebreak style
@@ -368,14 +373,15 @@ rules:
   ## Enforce a maximum depth that blocks can be nested
   # max-depth: error
   ## Enforce a maximum line length
-  max-len: [error, {
-    code: 80,
-    ## Ignore imports
-    ignorePattern: '^(import\s.+\sfrom\s|.*require\()',
-    ignoreUrls: true,
-    ignoreRegExpLiterals: true,
-    ignoreStrings: true,
-  }]
+  # max-len: [error, {
+  #   code: 80,
+  #   ## Ignore imports
+  #   ignorePattern: '^(import\s.+\sfrom\s|.*require\()',
+  #   ignoreUrls: true,
+  #   ignoreRegExpLiterals: true,
+  #   ignoreStrings: true,
+  #   ignoreTemplateLiterals: true,
+  # }]
   ## Enforce a maximum number of lines per file
   # max-lines: error
   ## Enforce a maximum number of line of code in a function
@@ -412,7 +418,7 @@ rules:
   ## Disallow mixed binary operators
   # no-mixed-operators: error
   ## Disallow mixed spaces and tabs for indentation
-  no-mixed-spaces-and-tabs: error
+  # no-mixed-spaces-and-tabs: error
   ## Disallow use of chained assignment expressions
   # no-multi-assign: error
   ## Disallow multiple empty lines
@@ -438,7 +444,7 @@ rules:
   ## Disallow ternary operators when simpler alternatives exist
   # no-unneeded-ternary: error
   ## Disallow whitespace before properties
-  no-whitespace-before-property: error
+  # no-whitespace-before-property: error
   ## Enforce the location of single-line statements
   # nonblock-statement-body-position: error
   ## Enforce consistent line breaks inside braces
@@ -455,7 +461,7 @@ rules:
   ## Require or disallow assignment operator shorthand where possible
   # operator-assignment: error
   ## Enforce consistent linebreak style for operators
-  operator-linebreak: [error, before]
+  # operator-linebreak: [error, before]
   ## Require or disallow padding within blocks
   # padded-blocks: error
   ## Require or disallow padding lines between statements
@@ -480,11 +486,11 @@ rules:
   ## Enforce consistent spacing before blocks
   space-before-blocks: [error, always]
   ## Enforce consistent spacing before function definition opening parenthesis
-  space-before-function-paren: [error, {
-    anonymous: always,
-    named: never,
-    asyncArrow: always,
-  }]
+  # space-before-function-paren: [error, {
+  #   anonymous: always,
+  #   named: never,
+  #   asyncArrow: always,
+  # }]
   ## Enforce consistent spacing inside parentheses
   space-in-parens: [error, never]
   ## Require spacing around infix operators
@@ -646,7 +652,7 @@ rules:
   ## Enforce ES5 or ES6 class for React Components
   react/prefer-es6-class: error
   ## Enforce that props are read-only
-  react/prefer-read-only-props: error
+  react/prefer-read-only-props: off
   ## Enforce stateless React Components to be written as a pure function
   react/prefer-stateless-function: error
   ## Prevent missing props validation in a React component definition
@@ -668,7 +674,7 @@ rules:
   # react/sort-prop-types: error
   ## Enforce the state initialization style to be either in a constructor or
   ## with a class property
-  react/state-in-constructor: error
+  # react/state-in-constructor: error
   ## Enforces where React component static properties should be positioned.
   # react/static-property-placement: error
   ## Enforce style prop value being an object
@@ -693,7 +699,7 @@ rules:
   react/jsx-closing-tag-location: error
   ## Enforce or disallow newlines inside of curly braces in JSX attributes and
   ## expressions (fixable)
-  react/jsx-curly-newline: error
+  # react/jsx-curly-newline: error
   ## Enforce or disallow spaces inside of curly braces in JSX attributes and
   ## expressions (fixable)
   react/jsx-curly-spacing: error
@@ -706,11 +712,11 @@ rules:
   ## Enforce event handler naming conventions in JSX
   react/jsx-handler-names: error
   ## Validate JSX indentation (fixable)
-  react/jsx-indent: [error, 2, {
-    checkAttributes: true,
-  }]
+  # react/jsx-indent: [error, 2, {
+  #   checkAttributes: true,
+  # }]
   ## Validate props indentation in JSX (fixable)
-  react/jsx-indent-props: [error, 2]
+  # react/jsx-indent-props: [error, 2]
   ## Validate JSX has key prop when in array or iterator
   react/jsx-key: error
   ## Validate JSX maximum depth
@@ -756,3 +762,9 @@ rules:
   react/jsx-uses-vars: error
   ## Prevent missing parentheses around multilines JSX (fixable)
   react/jsx-wrap-multilines: error
+  ## Prevents the use of unused imports.
+  ## This could be done by enabling no-unused-vars, but we're doing this for now
+  unused-imports/no-unused-imports: error
+  ## https://github.com/lydell/eslint-plugin-simple-import-sort/
+  simple-import-sort/imports: error
+  simple-import-sort/exports: error

tgui/package.json

@@ -51,6 +51,8 @@
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-radar": "^0.2.1",
     "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-simple-import-sort": "latest",
+    "eslint-plugin-sonarjs": "latest",
     "eslint-plugin-unused-imports": "^3.0.0",
     "globals": "^13.23.0",
     "inferno": "^8.2.2",
@@ -60,6 +62,8 @@
     "jsdom": "^22.1.0",
     "katex": "^0.15.6",
     "mini-css-extract-plugin": "^2.7.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
     "style-loader": "^3.3.3",

tgui/packages/tgui-dev-server/dreamseeker.js

@@ -6,6 +6,7 @@
 
 import { exec } from 'child_process';
 import { promisify } from 'util';
+
 import { createLogger } from './logging.js';
 import { require } from './require.js';
 

tgui/packages/tgui-dev-server/index.js

@@ -4,8 +4,8 @@
  * @license MIT
  */
 
-import { createCompiler } from './webpack.js';
 import { reloadByondCache } from './reloader.js';
+import { createCompiler } from './webpack.js';
 
 const noHot = process.argv.includes('--no-hot');
 const noTmp = process.argv.includes('--no-tmp');

tgui/packages/tgui-dev-server/link/retrace.js

@@ -6,6 +6,7 @@
 
 import fs from 'fs';
 import { basename } from 'path';
+
 import { createLogger } from '../logging.js';
 import { require } from '../require.js';
 import { resolveGlob } from '../util.js';

tgui/packages/tgui-dev-server/link/server.js

@@ -6,6 +6,7 @@
 
 import http from 'http';
 import { inspect } from 'util';
+
 import { createLogger, directLog } from '../logging.js';
 import { require } from '../require.js';
 import { loadSourceMaps, retrace } from './retrace.js';

tgui/packages/tgui-dev-server/reloader.js

@@ -7,6 +7,7 @@
 import fs from 'fs';
 import os from 'os';
 import { basename } from 'path';
+
 import { DreamSeeker } from './dreamseeker.js';
 import { createLogger } from './logging.js';
 import { resolveGlob, resolvePath } from './util.js';

tgui/packages/tgui-dev-server/util.js

@@ -6,6 +6,7 @@
 
 import fs from 'fs';
 import path from 'path';
+
 import { require } from './require.js';
 
 const globPkg = require('glob');

tgui/packages/tgui-dev-server/webpack.js

@@ -7,6 +7,7 @@
 import fs from 'fs';
 import { createRequire } from 'module';
 import { dirname } from 'path';
+
 import { loadSourceMaps, setupLink } from './link/server.js';
 import { createLogger } from './logging.js';
 import { reloadByondCache } from './reloader.js';

tgui/packages/tgui-dev-server/winreg.js

@@ -8,6 +8,7 @@
 
 import { exec } from 'child_process';
 import { promisify } from 'util';
+
 import { createLogger } from './logging.js';
 
 const logger = createLogger('winreg');

tgui/packages/tgui-panel/Panel.js

@@ -6,6 +6,7 @@
 
 import { Button, Section, Stack } from 'tgui/components';
 import { Pane } from 'tgui/layouts';
+
 import { NowPlayingWidget, useAudio } from './audio';
 import { ChatPanel, ChatTabs } from './chat';
 import { useGame } from './game';

tgui/packages/tgui-panel/audio/NowPlayingWidget.js

@@ -7,6 +7,7 @@
 import { toFixed } from 'common/math';
 import { useDispatch, useSelector } from 'common/redux';
 import { Button, Flex, Knob } from 'tgui/components';
+
 import { useSettings } from '../settings';
 import { selectAudio } from './selectors';
 

tgui/packages/tgui-panel/audio/hooks.js

@@ -4,7 +4,8 @@
  * @license MIT
  */
 
-import { useSelector, useDispatch } from 'common/redux';
+import { useDispatch, useSelector } from 'common/redux';
+
 import { selectAudio } from './selectors';
 
 export const useAudio = context => {

tgui/packages/tgui-panel/chat/ChatPageSettings.js

@@ -6,6 +6,7 @@
 
 import { useDispatch, useSelector } from 'common/redux';
 import { Button, Collapsible, Divider, Input, Section, Stack } from 'tgui/components';
+
 import { removeChatPage, toggleAcceptedType, updateChatPage } from './actions';
 import { MESSAGE_TYPES } from './constants';
 import { selectCurrentChatPage } from './selectors';

tgui/packages/tgui-panel/chat/ChatPanel.js

@@ -7,6 +7,7 @@
 import { shallowDiffers } from 'common/react';
 import { Component, createRef } from 'inferno';
 import { Button } from 'tgui/components';
+
 import { chatRenderer } from './renderer';
 
 export class ChatPanel extends Component {

tgui/packages/tgui-panel/chat/ChatTabs.js

@@ -5,10 +5,11 @@
  */
 
 import { useDispatch, useSelector } from 'common/redux';
-import { Box, Tabs, Flex, Button } from 'tgui/components';
-import { changeChatPage, addChatPage } from './actions';
-import { selectChatPages, selectCurrentChatPage } from './selectors';
+import { Box, Button, Flex, Tabs } from 'tgui/components';
+
 import { openChatSettings } from '../settings/actions';
+import { addChatPage, changeChatPage } from './actions';
+import { selectChatPages, selectCurrentChatPage } from './selectors';
 
 const UnreadCountWidget = ({ value }) => (
   <Box

tgui/packages/tgui-panel/chat/actions.js

@@ -5,6 +5,7 @@
  */
 
 import { createAction } from 'common/redux';
+
 import { createPage } from './model';
 
 export const loadChat = createAction('chat/load');

tgui/packages/tgui-panel/chat/middleware.js

@@ -4,8 +4,9 @@
  * @license MIT
  */
 
-import DOMPurify from 'dompurify';
 import { storage } from 'common/storage';
+import DOMPurify from 'dompurify';
+
 import { loadSettings, updateSettings } from '../settings/actions';
 import { selectSettings } from '../settings/selectors';
 import { addChatPage, changeChatPage, changeScrollTracking, loadChat, rebuildChat, removeChatPage, saveChatToDisk, toggleAcceptedType, updateMessageCount } from './actions';

tgui/packages/tgui-panel/chat/model.js

@@ -5,7 +5,8 @@
  */
 
 import { createUuid } from 'common/uuid';
-import { MESSAGE_TYPES, MESSAGE_TYPE_INTERNAL } from './constants';
+
+import { MESSAGE_TYPE_INTERNAL, MESSAGE_TYPES } from './constants';
 
 export const canPageAcceptType = (page, type) => (
   type.startsWith(MESSAGE_TYPE_INTERNAL) || page.acceptedTypes[type]

tgui/packages/tgui-panel/chat/reducer.js

@@ -4,7 +4,7 @@
  * @license MIT
  */
 
-import { addChatPage, changeChatPage, loadChat, removeChatPage, toggleAcceptedType, updateChatPage, updateMessageCount, changeScrollTracking } from './actions';
+import { addChatPage, changeChatPage, changeScrollTracking, loadChat, removeChatPage, toggleAcceptedType, updateChatPage, updateMessageCount } from './actions';
 import { canPageAcceptType, createMainPage } from './model';
 
 const mainPage = createMainPage();

tgui/packages/tgui-panel/chat/renderer.js

@@ -7,7 +7,8 @@
 import { EventEmitter } from 'common/events';
 import { classes } from 'common/react';
 import { createLogger } from 'tgui/logging';
-import { COMBINE_MAX_MESSAGES, COMBINE_MAX_TIME_WINDOW, IMAGE_RETRY_DELAY, IMAGE_RETRY_LIMIT, IMAGE_RETRY_MESSAGE_AGE, MAX_PERSISTED_MESSAGES, MAX_VISIBLE_MESSAGES, MESSAGE_PRUNE_INTERVAL, MESSAGE_TYPES, MESSAGE_TYPE_INTERNAL, MESSAGE_TYPE_UNKNOWN } from './constants';
+
+import { COMBINE_MAX_MESSAGES, COMBINE_MAX_TIME_WINDOW, IMAGE_RETRY_DELAY, IMAGE_RETRY_LIMIT, IMAGE_RETRY_MESSAGE_AGE, MAX_PERSISTED_MESSAGES, MAX_VISIBLE_MESSAGES, MESSAGE_PRUNE_INTERVAL, MESSAGE_TYPE_INTERNAL, MESSAGE_TYPE_UNKNOWN, MESSAGE_TYPES } from './constants';
 import { canPageAcceptType, createMessage, isSameMessage } from './model';
 import { highlightNode, linkifyNode } from './replaceInTextNode';
 

tgui/packages/tgui-panel/game/hooks.js

@@ -5,6 +5,7 @@
  */
 
 import { useSelector } from 'common/redux';
+
 import { selectGame } from './selectors';
 
 export const useGame = context => {

tgui/packages/tgui-panel/game/middleware.js

@@ -6,8 +6,8 @@
 
 import { pingSuccess } from '../ping/actions';
 import { connectionLost, connectionRestored, roundRestarted } from './actions';
-import { selectGame } from './selectors';
 import { CONNECTION_LOST_AFTER } from './constants';
+import { selectGame } from './selectors';
 
 const withTimestamp = action => ({
   ...action,

tgui/packages/tgui-panel/index.js

@@ -10,11 +10,12 @@ import './styles/themes/light.scss';
 
 import { perf } from 'common/perf';
 import { combineReducers } from 'common/redux';
-import { setupHotReloading } from 'tgui-dev-server/link/client.cjs';
 import { setupGlobalEvents } from 'tgui/events';
 import { captureExternalLinks } from 'tgui/links';
 import { createRenderer } from 'tgui/renderer';
 import { configureStore, StoreProvider } from 'tgui/store';
+import { setupHotReloading } from 'tgui-dev-server/link/client.cjs';
+
 import { audioMiddleware, audioReducer } from './audio';
 import { chatMiddleware, chatReducer } from './chat';
 import { gameMiddleware, gameReducer } from './game';

tgui/packages/tgui-panel/ping/PingIndicator.js

@@ -8,6 +8,7 @@ import { Color } from 'common/color';
 import { toFixed } from 'common/math';
 import { useSelector } from 'common/redux';
 import { Box } from 'tgui/components';
+
 import { selectPing } from './selectors';
 
 export const PingIndicator = (props, context) => {

tgui/packages/tgui-panel/ping/middleware.js

@@ -5,6 +5,7 @@
  */
 
 import { sendMessage } from 'tgui/backend';
+
 import { pingFail, pingSuccess } from './actions';
 import { PING_INTERVAL, PING_QUEUE_SIZE, PING_TIMEOUT } from './constants';
 

tgui/packages/tgui-panel/ping/reducer.js

@@ -5,6 +5,7 @@
  */
 
 import { clamp01, scale } from 'common/math';
+
 import { pingFail, pingSuccess } from './actions';
 import { PING_MAX_FAILS, PING_ROUNDTRIP_BEST, PING_ROUNDTRIP_WORST } from './constants';
 

tgui/packages/tgui-panel/settings/SettingsPanel.js

@@ -5,9 +5,10 @@
  */
 
 import { toFixed } from 'common/math';
-import { useLocalState } from 'tgui/backend';
 import { useDispatch, useSelector } from 'common/redux';
+import { useLocalState } from 'tgui/backend';
 import { Box, Button, ColorBox, Divider, Dropdown, Flex, Input, LabeledList, NumberInput, Section, Stack, Tabs, TextArea } from 'tgui/components';
+
 import { ChatPageSettings } from '../chat';
 import { rebuildChat, saveChatToDisk } from '../chat/actions';
 import { THEMES } from '../themes';

tgui/packages/tgui-panel/settings/hooks.js

@@ -5,7 +5,8 @@
  */
 
 import { useDispatch, useSelector } from 'common/redux';
-import { updateSettings, toggleSettings } from './actions';
+
+import { toggleSettings, updateSettings } from './actions';
 import { selectSettings } from './selectors';
 
 export const useSettings = context => {

tgui/packages/tgui-panel/settings/middleware.js

@@ -5,10 +5,11 @@
  */
 
 import { storage } from 'common/storage';
+
 import { setClientTheme } from '../themes';
 import { loadSettings, updateSettings } from './actions';
-import { selectSettings } from './selectors';
 import { FONTS_DISABLED } from './constants';
+import { selectSettings } from './selectors';
 
 const setGlobalFontSize = fontSize => {
   document.documentElement.style

tgui/packages/tgui-panel/telemetry.js

@@ -4,8 +4,8 @@
  * @license MIT
  */
 
-import { sendMessage } from 'tgui/backend';
 import { storage } from 'common/storage';
+import { sendMessage } from 'tgui/backend';
 import { createLogger } from 'tgui/logging';
 
 const logger = createLogger('telemetry');

tgui/packages/tgui/backend.ts

@@ -13,6 +13,7 @@
 
 import { perf } from 'common/perf';
 import { createAction } from 'common/redux';
+
 import { setupDrag } from './drag';
 import { focusMap } from './focus';
 import { createLogger } from './logging';

tgui/packages/tgui/components/BlockQuote.js

@@ -5,6 +5,7 @@
  */
 
 import { classes } from 'common/react';
+
 import { Box } from './Box';
 
 export const BlockQuote = props => {

tgui/packages/tgui/components/Box.tsx

@@ -7,6 +7,7 @@
 import { BooleanLike, classes, pureComponentHooks } from 'common/react';
 import { createVNode, InfernoNode } from 'inferno';
 import { ChildFlags, VNodeFlags } from 'inferno-vnode-flags';
+
 import { CSS_COLORS } from '../constants';
 
 export interface BoxProps {

tgui/packages/tgui/components/Button.js

@@ -7,6 +7,7 @@
 import { KEY_ENTER, KEY_ESCAPE, KEY_SPACE } from 'common/keycodes';
 import { classes, pureComponentHooks } from 'common/react';
 import { Component, createRef } from 'inferno';
+
 import { createLogger } from '../logging';
 import { Box } from './Box';
 import { Icon } from './Icon';

tgui/packages/tgui/components/ByondUi.js

@@ -7,6 +7,7 @@
 import { shallowDiffers } from 'common/react';
 import { debounce } from 'common/timer';
 import { Component, createRef } from 'inferno';
+
 import { createLogger } from '../logging';
 import { computeBoxProps } from './Box';
 

tgui/packages/tgui/components/Chart.js

@@ -7,6 +7,7 @@
 import { map, zipWith } from 'common/collections';
 import { pureComponentHooks } from 'common/react';
 import { Component, createRef } from 'inferno';
+
 import { Box } from './Box';
 
 const normalizeData = (data, scale, rangeX, rangeY) => {

tgui/packages/tgui/components/Collapsible.js

@@ -5,6 +5,7 @@
  */
 
 import { Component } from 'inferno';
+
 import { Box } from './Box';
 import { Button } from './Button';
 

tgui/packages/tgui/components/ColorBox.js

@@ -5,6 +5,7 @@
  */
 
 import { classes, pureComponentHooks } from 'common/react';
+
 import { computeBoxClassName, computeBoxProps } from './Box';
 
 export const ColorBox = props => {

tgui/packages/tgui/components/Dimmer.js

@@ -5,6 +5,7 @@
  */
 
 import { classes } from 'common/react';
+
 import { Box } from './Box';
 
 export const Dimmer = props => {

tgui/packages/tgui/components/DraggableControl.js

@@ -7,6 +7,7 @@
 import { clamp } from 'common/math';
 import { pureComponentHooks } from 'common/react';
 import { Component, createRef } from 'inferno';
+
 import { AnimatedNumber } from './AnimatedNumber';
 
 const DEFAULT_UPDATE_RATE = 400;

tgui/packages/tgui/components/Dropdown.js

@@ -6,6 +6,7 @@
 
 import { classes } from 'common/react';
 import { Component } from 'inferno';
+
 import { Box } from './Box';
 import { Icon } from './Icon';
 

tgui/packages/tgui/components/Flex.tsx

@@ -5,6 +5,7 @@
  */
 
 import { BooleanLike, classes, pureComponentHooks } from 'common/react';
+
 import { Box, BoxProps, unit } from './Box';
 
 export interface FlexProps extends BoxProps {

tgui/packages/tgui/components/Grid.js

@@ -4,9 +4,10 @@
  * @license MIT
  */
 
-import { Table } from './Table';
 import { pureComponentHooks } from 'common/react';
 
+import { Table } from './Table';
+
 /** @deprecated */
 export const Grid = props => {
   const { children, ...rest } = props;

tgui/packages/tgui/components/Icon.js

@@ -7,6 +7,7 @@
  */
 
 import { classes, pureComponentHooks } from 'common/react';
+
 import { Box } from './Box';
 
 const FA_OUTLINE_REGEX = /-o$/;

tgui/packages/tgui/components/InfinitePlane.js

@@ -1,9 +1,10 @@
-import { computeBoxProps } from "./Box";
-import { Stack } from "./Stack";
-import { ProgressBar } from "./ProgressBar";
-import { Button } from "./Button";
 import { Component } from 'inferno';
 
+import { computeBoxProps } from "./Box";
+import { Button } from "./Button";
+import { ProgressBar } from "./ProgressBar";
+import { Stack } from "./Stack";
+
 const ZOOM_MIN_VAL = 0.5;
 const ZOOM_MAX_VAL = 1.5;
 

tgui/packages/tgui/components/Input.js

@@ -4,10 +4,11 @@
  * @license MIT
  */
 
+import { KEY_ENTER, KEY_ESCAPE } from 'common/keycodes';
 import { classes } from 'common/react';
 import { Component, createRef } from 'inferno';
+
 import { Box } from './Box';
-import { KEY_ESCAPE, KEY_ENTER } from 'common/keycodes';
 
 export const toInputValue = value => (
   typeof value !== 'number' && typeof value !== 'string'

tgui/packages/tgui/components/Knob.js

@@ -6,6 +6,7 @@
 
 import { keyOfMatchingRange, scale } from 'common/math';
 import { classes } from 'common/react';
+
 import { computeBoxClassName, computeBoxProps } from './Box';
 import { DraggableControl } from './DraggableControl';
 import { NumberInput } from './NumberInput';

tgui/packages/tgui/components/LabeledList.tsx

@@ -6,6 +6,7 @@
 
 import { BooleanLike, classes, pureComponentHooks } from 'common/react';
 import { InfernoNode } from 'inferno';
+
 import { Box, unit } from './Box';
 import { Divider } from './Divider';
 

tgui/packages/tgui/components/Modal.js

@@ -5,6 +5,7 @@
  */
 
 import { classes } from 'common/react';
+
 import { computeBoxClassName, computeBoxProps } from './Box';
 import { Dimmer } from './Dimmer';
 

tgui/packages/tgui/components/NoticeBox.js

@@ -5,6 +5,7 @@
  */
 
 import { classes, pureComponentHooks } from 'common/react';
+
 import { Box } from './Box';
 
 export const NoticeBox = props => {

tgui/packages/tgui/components/NumberInput.js

@@ -7,6 +7,7 @@
 import { clamp } from 'common/math';
 import { classes, pureComponentHooks } from 'common/react';
 import { Component, createRef } from 'inferno';
+
 import { AnimatedNumber } from './AnimatedNumber';
 import { Box } from './Box';
 

tgui/packages/tgui/components/ProgressBar.js

@@ -4,8 +4,9 @@
  * @license MIT
  */
 
-import { clamp01, scale, keyOfMatchingRange, toFixed } from 'common/math';
+import { clamp01, keyOfMatchingRange, scale, toFixed } from 'common/math';
 import { classes, pureComponentHooks } from 'common/react';
+
 import { computeBoxClassName, computeBoxProps } from './Box';
 
 export const ProgressBar = props => {

tgui/packages/tgui/components/RestrictedInput.js

@@ -1,8 +1,9 @@
-import { classes } from 'common/react';
+import { KEY_ENTER, KEY_ESCAPE } from 'common/keycodes';
 import { clamp } from 'common/math';
+import { classes } from 'common/react';
 import { Component, createRef } from 'inferno';
+
 import { Box } from './Box';
-import { KEY_ESCAPE, KEY_ENTER } from 'common/keycodes';
 
 const DEFAULT_MIN = 0;
 const DEFAULT_MAX = 10000;

tgui/packages/tgui/components/RoundGauge.js

@@ -6,6 +6,7 @@
 
 import { clamp01, keyOfMatchingRange, scale } from 'common/math';
 import { classes } from 'common/react';
+
 import { AnimatedNumber } from './AnimatedNumber';
 import { Box, computeBoxClassName, computeBoxProps } from './Box';
 

tgui/packages/tgui/components/Section.tsx

@@ -6,6 +6,7 @@
 
 import { canRender, classes } from 'common/react';
 import { Component, createRef, InfernoNode, RefObject } from 'inferno';
+
 import { addScrollableNode, removeScrollableNode } from '../events';
 import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
 

tgui/packages/tgui/components/Slider.js

@@ -6,6 +6,7 @@
 
 import { clamp01, keyOfMatchingRange, scale } from 'common/math';
 import { classes } from 'common/react';
+
 import { computeBoxClassName, computeBoxProps } from './Box';
 import { DraggableControl } from './DraggableControl';
 import { NumberInput } from './NumberInput';

tgui/packages/tgui/components/Stack.tsx

@@ -5,6 +5,7 @@
  */
 
 import { classes } from 'common/react';
+
 import { Flex, FlexItemProps, FlexProps } from './Flex';
 
 interface StackProps extends FlexProps {

tgui/packages/tgui/components/Table.js

@@ -5,6 +5,7 @@
  */
 
 import { classes, pureComponentHooks } from 'common/react';
+
 import { computeBoxClassName, computeBoxProps } from './Box';
 
 export const Table = props => {

tgui/packages/tgui/components/Tabs.js

@@ -5,6 +5,7 @@
  */
 
 import { canRender, classes } from 'common/react';
+
 import { computeBoxClassName, computeBoxProps } from './Box';
 import { Icon } from './Icon';
 

tgui/packages/tgui/components/TextArea.js

@@ -5,11 +5,12 @@
  * @license MIT
  */
 
+import { KEY_ESCAPE } from 'common/keycodes';
 import { classes } from 'common/react';
 import { Component, createRef } from 'inferno';
+
 import { Box } from './Box';
 import { toInputValue } from './Input';
-import { KEY_ESCAPE } from 'common/keycodes';
 
 export class TextArea extends Component {
   constructor(props, context) {

tgui/packages/tgui/components/TimeDisplay.js

@@ -1,6 +1,7 @@
-import { formatTime } from '../format';
 import { Component } from 'inferno';
 
+import { formatTime } from '../format';
+
 // AnimatedNumber Copypaste
 const isSafeNumber = value => {
   return typeof value === 'number'

tgui/packages/tgui/components/index.js

@@ -29,8 +29,8 @@ export { LabeledList } from './LabeledList';
 export { Modal } from './Modal';
 export { NoticeBox } from './NoticeBox';
 export { NumberInput } from './NumberInput';
-export { ProgressBar } from './ProgressBar';
 export { Popper } from './Popper';
+export { ProgressBar } from './ProgressBar';
 export { RestrictedInput } from './RestrictedInput';
 export { RoundGauge } from './RoundGauge';
 export { Section } from './Section';

tgui/packages/tgui/debug/hooks.js

@@ -5,6 +5,7 @@
  */
 
 import { useSelector } from 'common/redux';
+
 import { selectDebug } from './selectors';
 
 export const useDebug = context => useSelector(context, selectDebug);

tgui/packages/tgui/debug/middleware.js

@@ -5,6 +5,7 @@
  */
 
 import { KEY_BACKSPACE, KEY_F10, KEY_F11, KEY_F12 } from 'common/keycodes';
+
 import { globalEvents } from '../events';
 import { acquireHotKey } from '../hotkeys';
 import { openExternalBrowser, toggleDebugLayout, toggleKitchenSink } from './actions';

tgui/packages/tgui/drag.js

@@ -6,6 +6,7 @@
 
 import { storage } from 'common/storage';
 import { vecAdd, vecInverse, vecMultiply, vecScale } from 'common/vector';
+
 import { createLogger } from './logging';
 
 const logger = createLogger('drag');

tgui/packages/tgui/hotkeys.ts

@@ -5,6 +5,7 @@
  */
 
 import * as keycodes from 'common/keycodes';
+
 import { globalEvents, KeyEvent } from './events';
 import { createLogger } from './logging';
 

tgui/packages/tgui/index.js

@@ -21,11 +21,12 @@ import './styles/themes/clockcult.scss';
 
 import { perf } from 'common/perf';
 import { setupHotReloading } from 'tgui-dev-server/link/client.cjs';
+
+import { setupGlobalEvents } from './events';
 import { setupHotKeys } from './hotkeys';
 import { captureExternalLinks } from './links';
 import { createRenderer } from './renderer';
 import { configureStore, StoreProvider } from './store';
-import { setupGlobalEvents } from './events';
 
 perf.mark('inception', window.performance?.timing?.navigationStart);
 perf.mark('init');

tgui/packages/tgui/interfaces/AdventureBrowser.tsx

@@ -1,8 +1,8 @@
 import { useBackend, useLocalState } from '../backend';
-import { Button, LabeledList, Section, Box, NoticeBox, Table } from '../components';
+import { Box, Button, LabeledList, NoticeBox, Section, Table } from '../components';
+import { formatTime } from '../format';
 import { Window } from '../layouts';
 import { AdventureDataProvider, AdventureScreen } from './ExodroneConsole';
-import { formatTime } from '../format';
 
 type Adventure = {
   ref: string;

tgui/packages/tgui/interfaces/AirAlarm.js

@@ -1,5 +1,6 @@
 import { toFixed } from 'common/math';
 import { Fragment } from 'inferno';
+
 import { useBackend, useLocalState } from '../backend';
 import { Box, Button, LabeledList, Section } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/AlertModal.tsx

@@ -1,8 +1,8 @@
-import { Loader } from './common/Loader';
-import { useBackend, useLocalState } from '../backend';
 import { KEY_ENTER, KEY_ESCAPE, KEY_LEFT, KEY_RIGHT, KEY_SPACE, KEY_TAB } from '../../common/keycodes';
+import { useBackend, useLocalState } from '../backend';
 import { Autofocus, Box, Button, Flex, Section, Stack } from '../components';
 import { Window } from '../layouts';
+import { Loader } from './common/Loader';
 
 type AlertModalData = {
   autofocus: boolean;

tgui/packages/tgui/interfaces/AntagInfoBrainwashed.tsx

@@ -1,6 +1,7 @@
-import { useBackend, useLocalState } from '../backend';
-import { Blink, BlockQuote, Box, Dimmer, Icon, Section, Stack } from '../components';
 import { BooleanLike } from 'common/react';
+
+import { useBackend } from '../backend';
+import { Icon, Section, Stack } from '../components';
 import { Window } from '../layouts';
 
 type Objective = {

tgui/packages/tgui/interfaces/AntagInfoClockwork.tsx

@@ -1,4 +1,5 @@
 import { BooleanLike } from 'common/react';
+
 import { useBackend } from '../backend';
 import { Section, Stack } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/AntagInfoTraitor.tsx

@@ -1,7 +1,8 @@
-import { useBackend, useLocalState } from '../backend';
-import { multiline } from 'common/string';
-import { BlockQuote, Button, Dimmer, Section, Stack } from '../components';
 import { BooleanLike } from 'common/react';
+import { multiline } from 'common/string';
+
+import { useBackend } from '../backend';
+import { BlockQuote, Button, Dimmer, Section, Stack } from '../components';
 import { Window } from '../layouts';
 
 const allystyle = {

tgui/packages/tgui/interfaces/AntagInfoWizard.tsx

@@ -1,6 +1,7 @@
-import { useBackend, useLocalState } from '../backend';
-import { Blink, BlockQuote, Box, Dimmer, Icon, Section, Stack } from '../components';
 import { BooleanLike } from 'common/react';
+
+import { useBackend } from '../backend';
+import { Section, Stack } from '../components';
 import { Window } from '../layouts';
 
 const teleportstyle = {

tgui/packages/tgui/interfaces/ApcControl.js

@@ -1,8 +1,9 @@
 import { map, sortBy } from 'common/collections';
 import { flow } from 'common/fp';
 import { pureComponentHooks } from 'common/react';
+
 import { useBackend, useLocalState } from '../backend';
-import { Box, Button, Dimmer, Icon, Table, Tabs, Stack, Section } from '../components';
+import { Box, Button, Dimmer, Icon, Section, Stack, Table, Tabs } from '../components';
 import { Window } from '../layouts';
 import { AreaCharge, powerRank } from './PowerMonitor';
 

tgui/packages/tgui/interfaces/Aquarium.js

@@ -1,5 +1,5 @@
 import { useBackend } from '../backend';
-import { Button, Dropdown, Flex, Knob, LabeledControls, Section } from '../components';
+import { Button, Flex, Knob, LabeledControls, Section } from '../components';
 import { Window } from '../layouts';
 
 export const Aquarium = (props, context) => {

tgui/packages/tgui/interfaces/AtmosControlConsole.js

@@ -1,5 +1,6 @@
 import { map } from 'common/collections';
 import { toFixed } from 'common/math';
+
 import { useBackend } from '../backend';
 import { Button, LabeledList, NumberInput, Section } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/AtmosControlPanel.js

@@ -1,5 +1,6 @@
 import { map, sortBy } from 'common/collections';
 import { flow } from 'common/fp';
+
 import { useBackend } from '../backend';
 import { Box, Button, Flex, Section, Table } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/Autolathe.js

@@ -1,8 +1,9 @@
-import { useBackend, useLocalState } from '../backend';
-import { Button, LabeledList, Section, ProgressBar, Flex, Box, Table, Collapsible, Input, Dimmer, Icon } from '../components';
-import { Window } from '../layouts';
 import { capitalize } from "common/string";
 
+import { useBackend, useLocalState } from '../backend';
+import { Box, Button, Collapsible, Dimmer, Flex, Icon, Input, LabeledList, ProgressBar, Section, Table } from '../components';
+import { Window } from '../layouts';
+
 export const Autolathe = (props, context) => {
   const { act, data } = useBackend(context);
   // Extract `health` and `color` variables from the `data` object.

tgui/packages/tgui/interfaces/AutomatedAnnouncement.js

@@ -1,4 +1,5 @@
 import { multiline } from 'common/string';
+
 import { useBackend } from '../backend';
 import { Button, Input, LabeledList, Section } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/Biogenerator.js

@@ -1,5 +1,6 @@
 import { classes } from 'common/react';
 import { createSearch } from 'common/string';
+
 import { useBackend, useLocalState } from '../backend';
 import { Box, Button, Dimmer, Flex, Icon, Input, NoticeBox, NumberInput, Section, Table, Tabs } from '../components';
 import { formatMoney } from '../format';

tgui/packages/tgui/interfaces/BluespaceSender.js

@@ -1,8 +1,9 @@
 import { filter, sortBy } from 'common/collections';
 import { flow } from 'common/fp';
 import { toFixed } from 'common/math';
+
 import { useBackend } from '../backend';
-import { Button, Divider, LabeledList, NumberInput, ProgressBar, Section, Stack, Box, AnimatedNumber } from '../components';
+import { Box, Button, Divider, LabeledList, NumberInput, ProgressBar, Section, Stack } from '../components';
 import { getGasColor, getGasLabel } from '../constants';
 import { Window } from '../layouts';
 

tgui/packages/tgui/interfaces/BluespaceVendor.js

@@ -2,8 +2,9 @@ import { filter, sortBy } from 'common/collections';
 import { flow } from 'common/fp';
 import { toFixed } from 'common/math';
 import { multiline } from 'common/string';
+
 import { useBackend } from '../backend';
-import { Button, Divider, LabeledList, NumberInput, ProgressBar, Section, Stack, Box } from '../components';
+import { Button, Divider, LabeledList, NumberInput, ProgressBar, Section, Stack } from '../components';
 import { getGasColor, getGasLabel } from '../constants';
 import { Window } from '../layouts';
 

tgui/packages/tgui/interfaces/CameraConsole.js

@@ -2,6 +2,7 @@ import { filter, sortBy } from 'common/collections';
 import { flow } from 'common/fp';
 import { classes } from 'common/react';
 import { createSearch } from 'common/string';
+
 import { useBackend, useLocalState } from '../backend';
 import { Button, ByondUi, Flex, Input, Section } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/Canister.js

@@ -1,4 +1,5 @@
 import { toFixed } from 'common/math';
+
 import { useBackend } from '../backend';
 import { Box, Button, Flex, Icon, Knob, LabeledControls, LabeledList, RoundGauge, Section, Tooltip } from '../components';
 import { formatSiUnit } from '../format';

tgui/packages/tgui/interfaces/Canvas.js

@@ -1,4 +1,5 @@
 import { Component, createRef } from 'inferno';
+
 import { useBackend } from '../backend';
 import { Box, Button } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/Cargo.js

@@ -1,5 +1,6 @@
 import { toArray } from 'common/collections';
 import { Fragment } from 'inferno';
+
 import { useBackend, useSharedState } from '../backend';
 import { AnimatedNumber, Box, Button, Flex, LabeledList, Section, Table, Tabs } from '../components';
 import { formatMoney } from '../format';

tgui/packages/tgui/interfaces/CellularEmporium.tsx

@@ -1,5 +1,5 @@
 import { useBackend } from '../backend';
-import { Button, Section, Icon, Stack, LabeledList, Box, NoticeBox } from '../components';
+import { Box, Button, Icon, LabeledList, NoticeBox, Section, Stack } from '../components';
 import { Window } from '../layouts';
 
 type CellularEmporiumContext = {

tgui/packages/tgui/interfaces/CentcomPodLauncher.js

@@ -4,6 +4,7 @@ import { storage } from 'common/storage';
 import { multiline } from 'common/string';
 import { createUuid } from 'common/uuid';
 import { Component, Fragment } from 'inferno';
+
 import { useBackend, useLocalState } from '../backend';
 import { Box, Button, ByondUi, Divider, Input, Knob, LabeledControls, NumberInput, Section, Stack } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/ChameleonCard.js

@@ -1,6 +1,6 @@
 import { useBackend } from '../backend';
-import { AccessList } from './common/AccessList';
 import { Window } from '../layouts';
+import { AccessList } from './common/AccessList';
 
 export const ChameleonCard = (props, context) => {
   const { act, data } = useBackend(context);

tgui/packages/tgui/interfaces/Changelog.js

@@ -1,6 +1,10 @@
 import { classes } from 'common/react';
-import { useBackend } from '../backend';
+import dateformat from 'dateformat';
 import { Component, Fragment } from 'inferno';
+import yaml from 'js-yaml';
+
+import { resolveAsset } from '../assets';
+import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -11,9 +15,6 @@ import {
   Table,
 } from '../components';
 import { Window } from '../layouts';
-import { resolveAsset } from '../assets';
-import dateformat from 'dateformat';
-import yaml from 'js-yaml';
 
 const icons = {
   bugfix: { icon: 'bug', color: 'green' },

tgui/packages/tgui/interfaces/CharacterDirectory.js

@@ -1,4 +1,5 @@
 import { Fragment } from 'inferno';
+
 import { useBackend, useLocalState } from '../backend';
 import { Box, Button, Icon, LabeledList, Section, Table } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/ChemDebugSynthesizer.js

@@ -1,4 +1,5 @@
 import { Fragment } from 'inferno';
+
 import { useBackend } from '../backend';
 import { AnimatedNumber, Box, Button, LabeledList, NumberInput, Section } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/ChemDispenser.js

@@ -1,8 +1,9 @@
 import { toFixed } from 'common/math';
 import { toTitleCase } from 'common/string';
 import { Fragment } from 'inferno';
+
 import { useBackend, useLocalState } from '../backend';
-import { AnimatedNumber, Box, Button, Icon, LabeledList, ProgressBar, Section, Table, NumberInput } from '../components';
+import { AnimatedNumber, Box, Button, Icon, LabeledList, NumberInput, ProgressBar, Section, Table } from '../components';
 import { Window } from '../layouts';
 
 export const ChemDispenser = (props, context) => {

tgui/packages/tgui/interfaces/ChemFilter.js

@@ -1,4 +1,5 @@
 import { Fragment } from 'inferno';
+
 import { useBackend, useLocalState } from '../backend';
 import { Button, Flex, Input, Section } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/ChemHeater.js

@@ -1,5 +1,6 @@
 import { round, toFixed } from 'common/math';
 import { Fragment } from 'inferno';
+
 import { useBackend } from '../backend';
 import { AnimatedNumber, Box, Button, LabeledList, NumberInput, Section } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/ChemMaster.js

@@ -1,4 +1,5 @@
 import { Fragment } from 'inferno';
+
 import { useBackend, useSharedState } from '../backend';
 import { AnimatedNumber, Box, Button, ColorBox, LabeledList, NumberInput, Section, Table } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/ChemReactionChamber.js

@@ -1,5 +1,6 @@
 import { map } from 'common/collections';
 import { classes } from 'common/react';
+
 import { useBackend, useLocalState } from '../backend';
 import { Box, Button, Input, LabeledList, NumberInput, Section } from '../components';
 import { Window } from '../layouts';

tgui/packages/tgui/interfaces/ChemRecipeDebug.js

@@ -1,4 +1,5 @@
 import { round } from 'common/math';
+
 import { useBackend } from '../backend';
 import { AnimatedNumber, Box, Button, Flex, LabeledList, NumberInput, ProgressBar, RoundGauge, Section, Table } from '../components';
 import { Window } from '../layouts';