diff --git a/tgui-next/.eslintrc.yml b/tgui-next/.eslintrc.yml
deleted file mode 100644
index 4bff333295..0000000000
--- a/tgui-next/.eslintrc.yml
+++ /dev/null
@@ -1,749 +0,0 @@
-parser: babel-eslint
-parserOptions:
- ecmaVersion: 2019
- sourceType: module
- ecmaFeatures:
- jsx: true
-env:
- es6: true
- browser: true
- node: true
-plugins:
- - react
-settings:
- react:
- version: '16.10'
-rules:
-
- ## Possible Errors
- ## ----------------------------------------
-
- ## Enforce “for” loop update clause moving the counter in the right
- ## direction.
- # for-direction: error
- ## Enforce return statements in getters
- # getter-return: error
- ## Disallow using an async function as a Promise executor
- no-async-promise-executor: error
- ## Disallow await inside of loops
- # no-await-in-loop: error
- ## Disallow comparing against -0
- # no-compare-neg-zero: error
- ## Disallow assignment operators in conditional expressions
- no-cond-assign: error
- ## Disallow the use of console
- # no-console: error
- ## Disallow constant expressions in conditions
- # no-constant-condition: error
- ## Disallow control characters in regular expressions
- # no-control-regex: error
- ## Disallow the use of debugger
- no-debugger: error
- ## Disallow duplicate arguments in function definitions
- no-dupe-args: error
- ## Disallow duplicate keys in object literals
- no-dupe-keys: error
- ## Disallow duplicate case labels
- no-duplicate-case: error
- ## Disallow empty block statements
- # no-empty: error
- ## Disallow empty character classes in regular expressions
- no-empty-character-class: error
- ## Disallow reassigning exceptions in catch clauses
- no-ex-assign: error
- ## Disallow unnecessary boolean casts
- no-extra-boolean-cast: error
- ## Disallow unnecessary parentheses
- # no-extra-parens: warn
- ## Disallow unnecessary semicolons
- no-extra-semi: error
- ## Disallow reassigning function declarations
- no-func-assign: error
- ## Disallow assigning to imported bindings
- no-import-assign: error
- ## Disallow variable or function declarations in nested blocks
- no-inner-declarations: error
- ## Disallow invalid regular expression strings in RegExp constructors
- no-invalid-regexp: error
- ## Disallow irregular whitespace
- no-irregular-whitespace: error
- ## Disallow characters which are made with multiple code points in character
- ## class syntax
- no-misleading-character-class: error
- ## Disallow calling global object properties as functions
- no-obj-calls: error
- ## Disallow calling some Object.prototype methods directly on objects
- no-prototype-builtins: error
- ## Disallow multiple spaces in regular expressions
- no-regex-spaces: error
- ## Disallow sparse arrays
- no-sparse-arrays: error
- ## Disallow template literal placeholder syntax in regular strings
- no-template-curly-in-string: error
- ## Disallow confusing multiline expressions
- no-unexpected-multiline: error
- ## Disallow unreachable code after return, throw, continue, and break
- ## statements
- # no-unreachable: warn
- ## Disallow control flow statements in finally blocks
- no-unsafe-finally: error
- ## Disallow negating the left operand of relational operators
- no-unsafe-negation: error
- ## Disallow assignments that can lead to race conditions due to usage of
- ## await or yield
- # require-atomic-updates: error
- ## Require calls to isNaN() when checking for NaN
- use-isnan: error
- ## Enforce comparing typeof expressions against valid strings
- valid-typeof: error
-
- ## Best practices
- ## ----------------------------------------
- ## Enforce getter and setter pairs in objects and classes
- # accessor-pairs: error
- ## Enforce return statements in callbacks of array methods
- # array-callback-return: error
- ## Enforce the use of variables within the scope they are defined
- # block-scoped-var: error
- ## Enforce that class methods utilize this
- # class-methods-use-this: error
- ## Enforce a maximum cyclomatic complexity allowed in a program
- complexity: [error, { max: 50 }]
- ## Require return statements to either always or never specify values
- # consistent-return: error
- ## Enforce consistent brace style for all control statements
- curly: [error, all]
- ## Require default cases in switch statements
- # default-case: error
- ## Enforce default parameters to be last
- # default-param-last: error
- ## Enforce consistent newlines before and after dots
- dot-location: [error, property]
- ## Enforce dot notation whenever possible
- # dot-notation: error
- ## Require the use of === and !==
- eqeqeq: [error, always]
- ## Require for-in loops to include an if statement
- # guard-for-in: error
- ## Enforce a maximum number of classes per file
- # max-classes-per-file: error
- ## Disallow the use of alert, confirm, and prompt
- # no-alert: error
- ## Disallow the use of arguments.caller or arguments.callee
- # no-caller: error
- ## Disallow lexical declarations in case clauses
- no-case-declarations: error
- ## Disallow division operators explicitly at the beginning of regular
- ## expressions
- # no-div-regex: error
- ## Disallow else blocks after return statements in if statements
- # no-else-return: error
- ## Disallow empty functions
- # no-empty-function: error
- ## Disallow empty destructuring patterns
- no-empty-pattern: error
- ## Disallow null comparisons without type-checking operators
- # no-eq-null: error
- ## Disallow the use of eval()
- # no-eval: error
- ## Disallow extending native types
- # no-extend-native: error
- ## Disallow unnecessary calls to .bind()
- # no-extra-bind: error
- ## Disallow unnecessary labels
- # no-extra-label: error
- ## Disallow fallthrough of case statements
- no-fallthrough: error
- ## Disallow leading or trailing decimal points in numeric literals
- # no-floating-decimal: error
- ## Disallow assignments to native objects or read-only global variables
- no-global-assign: error
- ## Disallow shorthand type conversions
- # no-implicit-coercion: error
- ## Disallow variable and function declarations in the global scope
- # no-implicit-globals: error
- ## Disallow the use of eval()-like methods
- # no-implied-eval: error
- ## Disallow this keywords outside of classes or class-like objects
- # no-invalid-this: error
- ## Disallow the use of the __iterator__ property
- # no-iterator: error
- ## Disallow labeled statements
- # no-labels: error
- ## Disallow unnecessary nested blocks
- # no-lone-blocks: error
- ## Disallow function declarations that contain unsafe references inside
- ## loop statements
- # no-loop-func: error
- ## Disallow magic numbers
- # no-magic-numbers: error
- ## Disallow multiple spaces
- no-multi-spaces: warn
- ## Disallow multiline strings
- # no-multi-str: error
- ## Disallow new operators outside of assignments or comparisons
- # no-new: error
- ## Disallow new operators with the Function object
- # no-new-func: error
- ## Disallow new operators with the String, Number, and Boolean objects
- # no-new-wrappers: error
- ## Disallow octal literals
- no-octal: error
- ## Disallow octal escape sequences in string literals
- no-octal-escape: error
- ## Disallow reassigning function parameters
- # no-param-reassign: error
- ## Disallow the use of the __proto__ property
- # no-proto: error
- ## Disallow variable redeclaration
- no-redeclare: error
- ## Disallow certain properties on certain objects
- # no-restricted-properties: error
- ## Disallow assignment operators in return statements
- no-return-assign: error
- ## Disallow unnecessary return await
- # no-return-await: error
- ## Disallow javascript: urls
- # no-script-url: error
- ## Disallow assignments where both sides are exactly the same
- no-self-assign: error
- ## Disallow comparisons where both sides are exactly the same
- # no-self-compare: error
- ## Disallow comma operators
- no-sequences: error
- ## Disallow throwing literals as exceptions
- # no-throw-literal: error
- ## Disallow unmodified loop conditions
- # no-unmodified-loop-condition: error
- ## Disallow unused expressions
- # no-unused-expressions: error
- ## Disallow unused labels
- no-unused-labels: warn
- ## Disallow unnecessary calls to .call() and .apply()
- # no-useless-call: error
- ## Disallow unnecessary catch clauses
- # no-useless-catch: error
- ## Disallow unnecessary concatenation of literals or template literals
- # no-useless-concat: error
- ## Disallow unnecessary escape characters
- no-useless-escape: warn
- ## Disallow redundant return statements
- # no-useless-return: error
- ## Disallow void operators
- # no-void: error
- ## Disallow specified warning terms in comments
- # no-warning-comments: error
- ## Disallow with statements
- no-with: error
- ## Enforce using named capture group in regular expression
- # prefer-named-capture-group: error
- ## Require using Error objects as Promise rejection reasons
- # prefer-promise-reject-errors: error
- ## Disallow use of the RegExp constructor in favor of regular expression
- ## literals
- # prefer-regex-literals: error
- ## Enforce the consistent use of the radix argument when using parseInt()
- radix: error
- ## Disallow async functions which have no await expression
- # require-await: error
- ## Enforce the use of u flag on RegExp
- # require-unicode-regexp: error
- ## Require var declarations be placed at the top of their containing scope
- # vars-on-top: error
- ## Require parentheses around immediate function invocations
- # wrap-iife: error
- ## Require or disallow “Yoda” conditions
- # yoda: error
-
- ## Strict mode
- ## ----------------------------------------
- ## Require or disallow strict mode directives
- strict: error
-
- ## Variables
- ## ----------------------------------------
- ## Require or disallow initialization in variable declarations
- # init-declarations: error
- ## Disallow deleting variables
- no-delete-var: error
- ## Disallow labels that share a name with a variable
- # no-label-var: error
- ## Disallow specified global variables
- # no-restricted-globals: error
- ## Disallow variable declarations from shadowing variables declared in
- ## the outer scope
- # no-shadow: error
- ## Disallow identifiers from shadowing restricted names
- no-shadow-restricted-names: error
- ## Disallow the use of undeclared variables unless mentioned
- ## in /*global*/ comments
- no-undef: error
- ## Disallow initializing variables to undefined
- no-undef-init: error
- ## Disallow the use of undefined as an identifier
- # no-undefined: error
- ## Disallow unused variables
- # no-unused-vars: error
- ## Disallow the use of variables before they are defined
- # no-use-before-define: error
-
- ## Code style
- ## ----------------------------------------
- ## Enforce linebreaks after opening and before closing array brackets
- array-bracket-newline: [error, consistent]
- ## Enforce consistent spacing inside array brackets
- array-bracket-spacing: [error, never]
- ## Enforce line breaks after each array element
- # array-element-newline: error
- ## Disallow or enforce spaces inside of blocks after opening block and
- ## before closing block
- block-spacing: [error, always]
- ## Enforce consistent brace style for blocks
- # brace-style: [error, stroustrup, { allowSingleLine: false }]
- ## Enforce camelcase naming convention
- # camelcase: error
- ## Enforce or disallow capitalization of the first letter of a comment
- # capitalized-comments: error
- ## Require or disallow trailing commas
- comma-dangle: [error, always-multiline]
- ## Enforce consistent spacing before and after commas
- comma-spacing: [error, { before: false, after: true }]
- ## Enforce consistent comma style
- comma-style: [error, last]
- ## Enforce consistent spacing inside computed property brackets
- computed-property-spacing: [error, never]
- ## Enforce consistent naming when capturing the current execution context
- # consistent-this: error
- ## Require or disallow newline at the end of files
- # eol-last: error
- ## Require or disallow spacing between function identifiers and their
- ## invocations
- func-call-spacing: [error, never]
- ## Require function names to match the name of the variable or property
- ## to which they are assigned
- # func-name-matching: error
- ## Require or disallow named function expressions
- # func-names: error
- ## Enforce the consistent use of either function declarations or expressions
- 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
- ## NOTE: This rule does not honor a newline on opening paren.
- # function-paren-newline: [error, never]
- ## Disallow specified identifiers
- # id-blacklist: error
- ## Enforce minimum and maximum identifier lengths
- # id-length: error
- ## Require identifiers to match a specified regular expression
- # id-match: error
- ## Enforce the location of arrow function bodies
- # implicit-arrow-linebreak: error
- ## Enforce consistent indentation
- indent: [error, 2, { SwitchCase: 1 }]
- ## Enforce the consistent use of either double or single quotes in JSX
- ## attributes
- jsx-quotes: [error, prefer-double]
- ## Enforce consistent spacing between keys and values in object literal
- ## properties
- key-spacing: [error, { beforeColon: false, afterColon: true }]
- ## Enforce consistent spacing before and after keywords
- keyword-spacing: [error, { before: true, after: true }]
- ## Enforce position of line comments
- # line-comment-position: error
- ## Enforce consistent linebreak style
- # linebreak-style: error
- ## Require empty lines around comments
- # lines-around-comment: error
- ## Require or disallow an empty line between class members
- # lines-between-class-members: error
- ## 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,
- }]
- ## Enforce a maximum number of lines per file
- # max-lines: error
- ## Enforce a maximum number of line of code in a function
- # max-lines-per-function: error
- ## Enforce a maximum depth that callbacks can be nested
- # max-nested-callbacks: error
- ## Enforce a maximum number of parameters in function definitions
- # max-params: error
- ## Enforce a maximum number of statements allowed in function blocks
- # max-statements: error
- ## Enforce a maximum number of statements allowed per line
- # max-statements-per-line: error
- ## Enforce a particular style for multiline comments
- # multiline-comment-style: error
- ## Enforce newlines between operands of ternary expressions
- multiline-ternary: [error, always-multiline]
- ## Require constructor names to begin with a capital letter
- # new-cap: error
- ## Enforce or disallow parentheses when invoking a constructor with no
- ## arguments
- # new-parens: error
- ## Require a newline after each call in a method chain
- # newline-per-chained-call: error
- ## Disallow Array constructors
- # no-array-constructor: error
- ## Disallow bitwise operators
- # no-bitwise: error
- ## Disallow continue statements
- # no-continue: error
- ## Disallow inline comments after code
- # no-inline-comments: error
- ## Disallow if statements as the only statement in else blocks
- # no-lonely-if: error
- ## Disallow mixed binary operators
- # no-mixed-operators: error
- ## Disallow mixed spaces and tabs for indentation
- no-mixed-spaces-and-tabs: error
- ## Disallow use of chained assignment expressions
- # no-multi-assign: error
- ## Disallow multiple empty lines
- # no-multiple-empty-lines: error
- ## Disallow negated conditions
- # no-negated-condition: error
- ## Disallow nested ternary expressions
- # no-nested-ternary: error
- ## Disallow Object constructors
- # no-new-object: error
- ## Disallow the unary operators ++ and --
- # no-plusplus: error
- ## Disallow specified syntax
- # no-restricted-syntax: error
- ## Disallow all tabs
- # no-tabs: error
- ## Disallow ternary operators
- # no-ternary: error
- ## Disallow trailing whitespace at the end of lines
- # no-trailing-spaces: error
- ## Disallow dangling underscores in identifiers
- # no-underscore-dangle: error
- ## Disallow ternary operators when simpler alternatives exist
- # no-unneeded-ternary: error
- ## Disallow whitespace before properties
- no-whitespace-before-property: error
- ## Enforce the location of single-line statements
- # nonblock-statement-body-position: error
- ## Enforce consistent line breaks inside braces
- # object-curly-newline: [error, { multiline: true }]
- ## Enforce consistent spacing inside braces
- object-curly-spacing: [error, always]
- ## Enforce placing object properties on separate lines
- # object-property-newline: error
- ## Enforce variables to be declared either together or separately in
- ## functions
- # one-var: error
- ## Require or disallow newlines around variable declarations
- # one-var-declaration-per-line: error
- ## Require or disallow assignment operator shorthand where possible
- # operator-assignment: error
- ## Enforce consistent linebreak style for operators
- operator-linebreak: [error, before]
- ## Require or disallow padding within blocks
- # padded-blocks: error
- ## Require or disallow padding lines between statements
- # padding-line-between-statements: error
- ## Disallow using Object.assign with an object literal as the first
- ## argument and prefer the use of object spread instead.
- # prefer-object-spread: error
- ## Require quotes around object literal property names
- # quote-props: error
- ## Enforce the consistent use of either backticks, double, or single quotes
- # quotes: [error, single]
- ## Require or disallow semicolons instead of ASI
- semi: error
- ## Enforce consistent spacing before and after semicolons
- semi-spacing: [error, { before: false, after: true }]
- ## Enforce location of semicolons
- semi-style: [error, last]
- ## Require object keys to be sorted
- # sort-keys: error
- ## Require variables within the same declaration block to be sorted
- # sort-vars: error
- ## 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,
- }]
- ## Enforce consistent spacing inside parentheses
- space-in-parens: [error, never]
- ## Require spacing around infix operators
- # space-infix-ops: error
- ## Enforce consistent spacing before or after unary operators
- # space-unary-ops: error
- ## Enforce consistent spacing after the // or /* in a comment
- spaced-comment: [error, always]
- ## Enforce spacing around colons of switch statements
- switch-colon-spacing: [error, { before: false, after: true }]
- ## Require or disallow spacing between template tags and their literals
- template-tag-spacing: [error, never]
- ## Require or disallow Unicode byte order mark (BOM)
- # unicode-bom: [error, never]
- ## Require parenthesis around regex literals
- # wrap-regex: error
-
- ## ES6
- ## ----------------------------------------
- ## Require braces around arrow function bodies
- # arrow-body-style: error
- ## Require parentheses around arrow function arguments
- arrow-parens: [error, as-needed]
- ## Enforce consistent spacing before and after the arrow in arrow functions
- arrow-spacing: [error, { before: true, after: true }]
- ## Require super() calls in constructors
- # constructor-super: error
- ## Enforce consistent spacing around * operators in generator functions
- generator-star-spacing: [error, { before: false, after: true }]
- ## Disallow reassigning class members
- no-class-assign: error
- ## Disallow arrow functions where they could be confused with comparisons
- # no-confusing-arrow: error
- ## Disallow reassigning const variables
- no-const-assign: error
- ## Disallow duplicate class members
- no-dupe-class-members: error
- ## Disallow duplicate module imports
- # no-duplicate-imports: error
- ## Disallow new operators with the Symbol object
- no-new-symbol: error
- ## Disallow specified modules when loaded by import
- # no-restricted-imports: error
- ## Disallow this/super before calling super() in constructors
- no-this-before-super: error
- ## Disallow unnecessary computed property keys in object literals
- # no-useless-computed-key: error
- ## Disallow unnecessary constructors
- # no-useless-constructor: error
- ## Disallow renaming import, export, and destructured assignments to the
- ## same name
- # no-useless-rename: error
- ## Require let or const instead of var
- no-var: error
- ## Require or disallow method and property shorthand syntax for object
- ## literals
- # object-shorthand: error
- ## Require using arrow functions for callbacks
- prefer-arrow-callback: error
- ## Require const declarations for variables that are never reassigned after
- ## declared
- # prefer-const: error
- ## Require destructuring from arrays and/or objects
- # prefer-destructuring: error
- ## Disallow parseInt() and Number.parseInt() in favor of binary, octal, and
- ## hexadecimal literals
- # prefer-numeric-literals: error
- ## Require rest parameters instead of arguments
- # prefer-rest-params: error
- ## Require spread operators instead of .apply()
- # prefer-spread: error
- ## Require template literals instead of string concatenation
- # prefer-template: error
- ## Require generator functions to contain yield
- # require-yield: error
- ## Enforce spacing between rest and spread operators and their expressions
- # rest-spread-spacing: error
- ## Enforce sorted import declarations within modules
- # sort-imports: error
- ## Require symbol descriptions
- # symbol-description: error
- ## Require or disallow spacing around embedded expressions of template
- ## strings
- # template-curly-spacing: error
- ## Require or disallow spacing around the * in yield* expressions
- yield-star-spacing: [error, { before: false, after: true }]
-
- ## React
- ## ----------------------------------------
- ## Enforces consistent naming for boolean props
- react/boolean-prop-naming: error
- ## Forbid "button" element without an explicit "type" attribute
- react/button-has-type: error
- ## Prevent extraneous defaultProps on components
- react/default-props-match-prop-types: error
- ## Rule enforces consistent usage of destructuring assignment in component
- # react/destructuring-assignment: [error, always, { ignoreClassFields: true }]
- ## Prevent missing displayName in a React component definition
- react/display-name: error
- ## Forbid certain props on Components
- # react/forbid-component-props: error
- ## Forbid certain props on DOM Nodes
- # react/forbid-dom-props: error
- ## Forbid certain elements
- # react/forbid-elements: error
- ## Forbid certain propTypes
- # react/forbid-prop-types: error
- ## Forbid foreign propTypes
- # react/forbid-foreign-prop-types: error
- ## Prevent using this.state inside this.setState
- react/no-access-state-in-setstate: error
- ## Prevent using Array index in key props
- # react/no-array-index-key: error
- ## Prevent passing children as props
- react/no-children-prop: error
- ## Prevent usage of dangerous JSX properties
- react/no-danger: error
- ## Prevent problem with children and props.dangerouslySetInnerHTML
- react/no-danger-with-children: error
- ## Prevent usage of deprecated methods, including component lifecycle
- ## methods
- react/no-deprecated: error
- ## Prevent usage of setState in componentDidMount
- react/no-did-mount-set-state: error
- ## Prevent usage of setState in componentDidUpdate
- react/no-did-update-set-state: error
- ## Prevent direct mutation of this.state
- react/no-direct-mutation-state: error
- ## Prevent usage of findDOMNode
- react/no-find-dom-node: error
- ## Prevent usage of isMounted
- react/no-is-mounted: error
- ## Prevent multiple component definition per file
- # react/no-multi-comp: error
- ## Prevent usage of shouldComponentUpdate when extending React.PureComponent
- react/no-redundant-should-component-update: error
- ## Prevent usage of the return value of React.render
- react/no-render-return-value: error
- ## Prevent usage of setState
- # react/no-set-state: error
- ## Prevent common casing typos
- react/no-typos: error
- ## Prevent using string references in ref attribute.
- react/no-string-refs: error
- ## Prevent using this in stateless functional components
- react/no-this-in-sfc: error
- ## Prevent invalid characters from appearing in markup
- react/no-unescaped-entities: error
- ## Prevent usage of unknown DOM property (fixable)
- react/no-unknown-property: error
- ## Prevent usage of unsafe lifecycle methods
- react/no-unsafe: error
- ## Prevent definitions of unused prop types
- react/no-unused-prop-types: error
- ## Prevent definitions of unused state properties
- react/no-unused-state: error
- ## Prevent usage of setState in componentWillUpdate
- react/no-will-update-set-state: error
- ## 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
- ## 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
- # react/prop-types: error
- ## Prevent missing React when using JSX
- # react/react-in-jsx-scope: error
- ## Enforce a defaultProps definition for every prop that is not a required
- ## prop
- # react/require-default-props: error
- ## Enforce React components to have a shouldComponentUpdate method
- # react/require-optimization: error
- ## Enforce ES5 or ES6 class for returning value in render function
- react/require-render-return: error
- ## Prevent extra closing tags for components without children (fixable)
- react/self-closing-comp: error
- ## Enforce component methods order (fixable)
- # react/sort-comp: error
- ## Enforce propTypes declarations alphabetical sorting
- # 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
- ## Enforces where React component static properties should be positioned.
- # react/static-property-placement: error
- ## Enforce style prop value being an object
- react/style-prop-object: error
- ## Prevent void DOM elements (e.g. , ) from receiving children
- react/void-dom-elements-no-children: error
-
- ## JSX-specific rules
- ## ----------------------------------------
- ## Enforce boolean attributes notation in JSX (fixable)
- react/jsx-boolean-value: error
- ## Enforce or disallow spaces inside of curly braces in JSX attributes and
- ## expressions.
- # react/jsx-child-element-spacing: error
- ## Validate closing bracket location in JSX (fixable)
- react/jsx-closing-bracket-location: [error, {
- ## NOTE: Not really sure about enforcing this one
- selfClosing: false,
- nonEmpty: after-props,
- }]
- ## Validate closing tag location in JSX (fixable)
- 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
- ## Enforce or disallow spaces inside of curly braces in JSX attributes and
- ## expressions (fixable)
- react/jsx-curly-spacing: error
- ## Enforce or disallow spaces around equal signs in JSX attributes (fixable)
- react/jsx-equals-spacing: error
- ## Restrict file extensions that may contain JSX
- # react/jsx-filename-extension: error
- ## Enforce position of the first prop in JSX (fixable)
- # react/jsx-first-prop-new-line: error
- ## Enforce event handler naming conventions in JSX
- react/jsx-handler-names: error
- ## Validate JSX indentation (fixable)
- react/jsx-indent: [error, 2, {
- checkAttributes: true,
- }]
- ## Validate props indentation in JSX (fixable)
- react/jsx-indent-props: [error, 2]
- ## Validate JSX has key prop when in array or iterator
- react/jsx-key: error
- ## Validate JSX maximum depth
- react/jsx-max-depth: [error, { max: 6 }] ## Generous
- ## Limit maximum of props on a single line in JSX (fixable)
- # react/jsx-max-props-per-line: error
- ## Prevent usage of .bind() and arrow functions in JSX props
- # react/jsx-no-bind: error
- ## Prevent comments from being inserted as text nodes
- react/jsx-no-comment-textnodes: error
- ## Prevent duplicate props in JSX
- react/jsx-no-duplicate-props: error
- ## Prevent usage of unwrapped JSX strings
- # react/jsx-no-literals: error
- ## Prevent usage of unsafe target='_blank'
- react/jsx-no-target-blank: error
- ## Disallow undeclared variables in JSX
- react/jsx-no-undef: error
- ## Disallow unnecessary fragments (fixable)
- react/jsx-no-useless-fragment: error
- ## Limit to one expression per line in JSX
- # react/jsx-one-expression-per-line: error
- ## Enforce curly braces or disallow unnecessary curly braces in JSX
- # react/jsx-curly-brace-presence: error
- ## Enforce shorthand or standard form for React fragments
- react/jsx-fragments: error
- ## Enforce PascalCase for user-defined JSX components
- react/jsx-pascal-case: error
- ## Disallow multiple spaces between inline JSX props (fixable)
- react/jsx-props-no-multi-spaces: error
- ## Disallow JSX props spreading
- # react/jsx-props-no-spreading: error
- ## Enforce default props alphabetical sorting
- # react/jsx-sort-default-props: error
- ## Enforce props alphabetical sorting (fixable)
- # react/jsx-sort-props: error
- ## Validate whitespace in and around the JSX opening and closing brackets
- ## (fixable)
- react/jsx-tag-spacing: error
- ## Prevent React to be incorrectly marked as unused
- react/jsx-uses-react: error
- ## Prevent variables used in JSX to be incorrectly marked as unused
- react/jsx-uses-vars: error
- ## Prevent missing parentheses around multilines JSX (fixable)
- react/jsx-wrap-multilines: error
diff --git a/tgui-next/.gitattributes b/tgui-next/.gitattributes
deleted file mode 100644
index 0016cc3bf6..0000000000
--- a/tgui-next/.gitattributes
+++ /dev/null
@@ -1,10 +0,0 @@
-* text=auto
-
-## Enforce text mode and LF line breaks
-*.js text eol=lf
-*.css text eol=lf
-*.html text eol=lf
-*.json text eol=lf
-
-## Treat bundles as binary and ignore them during conflicts
-*.bundle.* binary merge=tgui-merge-bundle
diff --git a/tgui-next/.gitignore b/tgui-next/.gitignore
deleted file mode 100644
index 416ca3768d..0000000000
--- a/tgui-next/.gitignore
+++ /dev/null
@@ -1,7 +0,0 @@
-node_modules
-*.log
-package-lock.json
-
-/packages/tgui/public/.tmp/**/*
-/packages/tgui/public/**/*.hot-update.*
-/packages/tgui/public/**/*.map
diff --git a/tgui-next/README.md b/tgui-next/README.md
deleted file mode 100644
index beb7aaff80..0000000000
--- a/tgui-next/README.md
+++ /dev/null
@@ -1,855 +0,0 @@
-# tgui
-
-## Introduction
-
-tgui is a robust user interface framework of /tg/station.
-
-tgui is very different from most UIs you will encounter in BYOND programming.
-It is heavily reliant on Javascript and web technologies as opposed to DM.
-If you are familiar with NanoUI (a library which can be found on almost
-every other SS13 codebase), tgui should be fairly easy to pick up.
-
-## Learn tgui
-
-People come to tgui from different backgrounds and with different
-learning styles. Whether you prefer a more theoretical or a practical
-approach, we hope you’ll find this section helpful.
-
-### Practical tutorial
-
-If you are completely new to frontend and prefer to **learn by doing**,
-start with our [practical tutorial](docs/tutorial-and-examples.md).
-
-### Guides
-
-This project uses **Inferno** - a very fast UI rendering engine with a similar
-API to React. Take your time to read these guides:
-
-- [React guide](https://reactjs.org/docs/hello-world.html)
-- [Inferno documentation](https://infernojs.org/docs/guides/components) -
-highlights differences with React.
-
-If you were already familiar with an older, Ractive-based tgui, and want
-to translate concepts between old and new tgui, read this
-[interface conversion guide](docs/converting-old-tgui-interfaces.md).
-
-## Pre-requisites
-
-You will need these programs to start developing in tgui:
-
-- [Node v12.13+](https://nodejs.org/en/download/)
-- [Yarn v1.19+](https://yarnpkg.com/en/docs/install)
-- [MSys2](https://www.msys2.org/) (optional)
-
-> MSys2 closely replicates a unix-like environment which is necessary for
-> the `bin/tgui` script to run. It comes with a robust "mintty" terminal
-> emulator which is better than any standard Windows shell, it supports
-> "git" out of the box (almost like Git for Windows, but better), has
-> a "pacman" package manager, and you can install a text editor like "vim"
-> for a full boomer experience.
-
-## Usage
-
-**For MSys2, Git Bash, WSL, Linux or macOS users:**
-
-First and foremost, change your directory to `tgui-next`.
-
-Run `bin/tgui --install-git-hooks` (optional) to install merge drivers
-which will assist you in conflict resolution when rebasing your branches.
-
-Run one of the following:
-
-- `bin/tgui` - build the project in production mode.
-- `bin/tgui --dev` - launch a development server.
- - tgui development server provides you with incremental compilation,
- hot module replacement and logging facilities in all running instances
- of tgui. In short, this means that you will instantly see changes in the
- game as you code it. Very useful, highly recommended.
- In order to use, you should start the game server first, connect to it so dreamseeker is
- open, then start the dev server. You'll know if it's hooked correctly if data gets dumped
- to the log when tgui windows are opened.
-- `bin/tgui --dev --reload` - reload byond cache once.
-- `bin/tgui --dev --debug` - run server with debug logging enabled.
-- `bin/tgui --dev --no-hot` - disable hot module replacement (helps when
-doing development on IE8).
-- `bin/tgui --lint` - show problems with the code.
-- `bin/tgui --lint --fix` - auto-fix problems with the code.
-- `bin/tgui --analyze` - run a bundle analyzer.
-- `bin/tgui --clean` - clean up project repo.
-- `bin/tgui [webpack options]` - build the project with custom webpack
-options.
-
-**For everyone else:**
-
-If you haven't opened the console already, you can do that by holding
-Shift and right clicking on the `tgui-next` folder, then pressing
-either `Open command window here` or `Open PowerShell window here`.
-
-Run `yarn install` to install npm dependencies, then one of the following:
-
-- `yarn run build` - build the project in production mode.
-- `yarn run watch` - launch a development server.
-- `yarn run lint` - show problems with the code.
-- `yarn run lint --fix` - auto-fix problems with the code.
-- `yarn run analyze` - run a bundle analyzer.
-
-We also got some batch files in store, for those who don't like fiddling
-with the console:
-
-- `bin/tgui-build.bat` - build the project in production mode.
-- `bin/tgui-dev-server.bat` - launch a development server.
-
-> Remember to always run a full build before submitting a PR. It creates
-> a compressed javascript bundle which is then referenced from DM code.
-> We prefer to keep it version controlled, so that people could build the
-> game just by using Dream Maker.
-
-## Project structure
-
-- `/packages` - Each folder here represents a self-contained Node module.
-- `/packages/common` - Helper functions
-- `/packages/tgui/index.js` - Application entry point.
-- `/packages/tgui/components` - Basic UI building blocks.
-- `/packages/tgui/interfaces` - Actual in-game interfaces.
-Interface takes data via the `state` prop and outputs an html-like stucture,
-which you can build using existing UI components.
-- `/packages/tgui/routes.js` - This is where you want to register new
-interfaces, otherwise they simply won't load.
-- `/packages/tgui/layout.js` - A root-level component, holding the
-window elements, like the titlebar, buttons, resize handlers. Calls
-`routes.js` to decide which component to render.
-- `/packages/tgui/styles/main.scss` - CSS entry point.
-- `/packages/tgui/styles/atomic.scss` - Atomic CSS classes.
-These are very simple, tiny, reusable CSS classes which you can use and
-combine to change appearance of your elements. Keep them small.
-- `/packages/tgui/styles/components.scss` - CSS classes which are used
-in UI components, and most of the stylesheets referenced here are located
-in `/packages/tgui/components`. These stylesheets closely follow the
-[BEM](https://en.bem.info/methodology/) methodology.
-- `/packages/tgui/styles/functions.scss` - Useful SASS functions.
-Stuff like `lighten`, `darken`, `luminance` are defined here.
-
-## Component reference
-
-> Notice: This documentation might be out of date, so always check the source
-> code to see the most up-to-date information.
-
-These are the components which you can use for interface construction.
-If you have trouble finding the exact prop you need on a component,
-please note, that most of these components inherit from other basic
-components, such as `Box`. This component in particular provides a lot
-of styling options for all components, e.g. `color` and `opacity`, thus
-it is used a lot in this framework.
-
-There are a few important semantics you need to know about:
-
-- `content` prop is a synonym to a `children` prop.
- - `content` is better used when your element is a self-closing tag
- (like ``), and when content is small and simple
- enough to fit in a prop. Keep in mind, that this prop is **not** native
- to React, and is a feature of this component system.
- - `children` is better used when your element is a full tag (like
- ``), and when content is long and complex. This is
- a native React prop (unlike `content`), and contains all elements you
- defined between the opening and the closing tag of an element.
- - You should never use both on a same element.
- - You should never use `children` explicitly as a prop on an element.
-- Inferno supports both camelcase (`onClick`) and lowercase (`onclick`)
-event names.
- - Camel case names are what's called "synthetic" events, and are the
- *preferred way* of handling events in React, for efficiency and
- performance reasons. Please read
- [Inferno Event Handling](https://infernojs.org/docs/guides/event-handling)
- to understand what this is about.
- - Lower case names are native browser events and should be used sparingly,
- for example when you need an explicit IE8 support. **DO NOT** use
- lowercase event handlers unless you really know what you are doing.
- - [Button](#button) component straight up does not support lowercase event
- handlers. Use the camel case `onClick` instead.
-
-### `AnimatedNumber`
-
-This component provides animations for numeric values.
-
-Props:
-
-- `value: number` - Value to animate.
-- `initial: number` - Initial value to use in animation when element
-first appears. If you set initial to `0` for example, number will always
-animate starting from `0`, and if omitted, it will not play an initial
-animation.
-- `format: value => value` - Output formatter.
- - Example: `value => Math.round(value)`.
-- `children: (formattedValue, rawValue) => any` - Pull the animated number to
-animate more complex things deeper in the DOM tree.
- - Example: `(_, value) => `
-
-### `BlockQuote`
-
-Just a block quote, just like this example in markdown:
-
-> Here's an example of a block quote.
-
-Props:
-
-- See inherited props: [Box](#box)
-
-### `Box`
-
-The Box component serves as a wrapper component for most of the CSS utility
-needs. It creates a new DOM element, a `
` by default that can be changed
-with the `as` property. Let's say you want to use a `` instead:
-
-```jsx
-
-
-
-```
-
-This works great when the changes can be isolated to a new DOM element.
-For instance, you can change the margin this way.
-
-However, sometimes you have to target the underlying DOM element.
-For instance, you want to change the text color of the button. The Button
-component defines its own color. CSS inheritance doesn't help.
-
-To workaround this problem, the Box children accept a render props function.
-This way, `Button` can pull out the `className` generated by the `Box`.
-
-```jsx
-
- {props => }
-
-```
-
-`Box` units, like width, height and margins can be defined in two ways:
-- By plain numbers (1 unit equals `0.5em`);
-- In absolute measures, by providing a full unit string (e.g. `100px`).
-
-Units which are used in `Box` are `0.5em`, which are half font-size.
-Default font size is `12px`, so each unit is effectively `6px` in size.
-If you need more precision, you can always use fractional numbers.
-
-Props:
-
-- `as: string` - The component used for the root node.
-- `color: string` - Applies an atomic `color-` class to the element.
- - See `styles/atomic/color.scss`.
-- `width: number` - Box width.
-- `minWidth: number` - Box minimum width.
-- `maxWidth: number` - Box maximum width.
-- `height: number` - Box height.
-- `minHeight: number` - Box minimum height.
-- `maxHeight: number` - Box maximum height.
-- `fontSize: number` - Font size.
-- `fontFamily: string` - Font family.
-- `lineHeight: number` - Directly affects the height of text lines.
-Useful for adjusting button height.
-- `inline: boolean` - Forces the `Box` to appear as an `inline-block`,
-or in other words, makes the `Box` flow with the text instead of taking
-all available horizontal space.
-- `m: number` - Margin on all sides.
-- `mx: number` - Horizontal margin.
-- `my: number` - Vertical margin.
-- `mt: number` - Top margin.
-- `mb: number` - Bottom margin.
-- `ml: number` - Left margin.
-- `mr: number` - Right margin.
-- `opacity: number` - Opacity, from 0 to 1.
-- `bold: boolean` - Make text bold.
-- `italic: boolean` - Make text italic.
-- `nowrap: boolean` - Stops text from wrapping.
-- `textAlign: string` - Align text inside the box.
- - `left` (default)
- - `center`
- - `right`
-- `position: string` - A direct mapping to `position` CSS property.
- - `relative` - Relative positioning.
- - `absolute` - Absolute positioning.
- - `fixed` - Fixed positioning.
-- `color: string` - An alias to `textColor`.
-- `textColor: string` - Sets text color.
- - `#ffffff` - Hex format
- - `rgba(255, 255, 255, 1)` - RGB format
- - `purple` - Applies an atomic `color-` class to the element.
- See `styles/color-map.scss`.
-- `backgroundColor: string` - Sets background color.
- - `#ffffff` - Hex format
- - `rgba(255, 255, 255, 1)` - RGB format
-
-### `Button`
-
-Buttons allow users to take actions, and make choices, with a single click.
-
-Props:
-
-- See inherited props: [Box](#box)
-- `fluid: boolean` - Fill all available horizontal space.
-- `icon: string` - Adds an icon to the button.
-- `color: string` - Button color, as defined in `variables.scss`.
- - There is also a special color `transparent` - makes the button
- transparent and slightly dim when inactive.
-- `disabled: boolean` - Disables and greys out the button.
-- `selected: boolean` - Activates the button (gives it a green color).
-- `tooltip: string` - A fancy, boxy tooltip, which appears when hovering
-over the button.
-- `tooltipPosition: string` - Position of the tooltip.
- - `top` - Show tooltip above the button.
- - `bottom` (default) - Show tooltip below the button.
- - `left` - Show tooltip on the left of the button.
- - `right` - Show tooltip on the right of the button.
-- `ellipsis: boolean` - If button width is constrained, button text will
-be truncated with an ellipsis. Be careful however, because this prop breaks
-the baseline alignment.
-- `title: string` - A native browser tooltip, which appears when hovering
-over the button.
-- `content/children: any` - Content to render inside the button.
-- `onClick: function` - Called when element is clicked.
-
-### `Button.Checkbox`
-
-A ghetto checkbox, made entirely using existing Button API.
-
-Props:
-
-- See inherited props: [Button](#button)
-- `checked: boolean` - Boolean value, which marks the checkbox as checked.
-
-### `Button.Confirm`
-
-A button with a an extra confirmation step, using native button component.
-
-Props:
-
-- See inherited props: [Button](#button)
-- `confirmMessage: string` - Text to display after first click; defaults to "Confirm?"
-- `confirmColor: string` - Color to display after first click; default to "bad"
-
-### `Button.Input`
-
-A button that turns into an input box after the first click. Turns back into a button after the user hits enter, defocuses, or hits escape. Enter and defocus commit, while escape cancels.
-
-Props:
- - See inherited props: [Box](#box)
- - `fluid`: fill availible horizontal space
- - `onCommit: (e, value) => void`: function that is called after the user defocuses the input or presses enter
- - `currentValue: string`: default string to display when the input is shown
- - `defaultValue: string`: default value emitted if the user leaves the box blank when hitting enter or defocusing. If left undefined, will cancel the change on a blank defocus/enter
-
-### `Collapsible`
-
-Displays contents when open, acts as a fluid button when closed. Click to toggle, closed by default.
-
-Props:
- - See inherited props: [Box](#box)
- - `children: any` - What is collapsed when closed
- - `title: string` - Text to display on the button for collapsing
- - `color: string` - Color of the button; see [Button](#button)
- - `buttons: any` - Buttons or other content to render inline with the button
-
-### `ColorBox`
-
-Displays a 1-character wide colored square. Can be used as a status indicator,
-or for visually representing a color.
-
-If you want to set a background color on an element, use a plain
-[Box](#box) instead.
-
-Props:
-
-- See inherited props: [Box](#box)
-- `color: string` - Color of the box.
-
-### `Dimmer`
-
-Dims surrounding area to emphasize content placed inside.
-
-Props:
-
-- See inherited props: [Box](#box)
-
-### `Dropdown`
-
-A simple dropdown box component. Lets the user select from a list of options and displays selected entry.
-
-Props:
-
- - See inherited props: [Box](#box)
- - `options: string[]` - An array of strings which will be displayed in the dropdown when open
- - `selected: string` - Currently selected entry
- - `width: number` - Width of dropdown button and resulting menu
- - `over: boolean` - dropdown renders over instead of below
- - `color: string` - color of dropdown button
- - `onClick: (e) => void` - Called when dropdown button is clicked
- - `onSelected: (value) => void` - Called when a value is picked from the list, `value` is the value that was picked
-
-### `Flex`
-
-Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.
-
-If you are new to or unfamiliar with flexbox, we encourage you to read this
-[CSS-Tricks flexbox guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
-
-Consists of two elements: `` and ``. Both of them provide
-the most straight-forward mapping to flex CSS properties as possible.
-
-One of the most basic usage of flex, is to align certain elements
-to the left, and certain elements to the right:
-
-```jsx
-
-
- Button description
-
-
-
-
-
-
-```
-
-Flex item with `grow` property serves as a "filler", to separate the other
-two flex items as far as possible from each other.
-
-Props:
-
-- See inherited props: [Box](#box)
-- `spacing: number` - Spacing between flex items, in integer units
-(1 unit - 0.5em). Does not directly relate to a flex css property
-(adds a modifier class under the hood), and only integer numbers are
-supported.
-- `direction: string` - This establishes the main-axis, thus defining the
-direction flex items are placed in the flex container.
- - `row` (default) - left to right.
- - `row-reverse` - right to left.
- - `column` - top to bottom.
- - `column-reverse` - bottom to top.
-- `wrap: string` - By default, flex items will all try to fit onto one line.
-You can change that and allow the items to wrap as needed with this property.
- - `nowrap` (default) - all flex items will be on one line
- - `wrap` - flex items will wrap onto multiple lines, from top to bottom.
- - `wrap-reverse` - flex items will wrap onto multiple lines from bottom to top.
-- `align: string` - Default alignment of all children.
- - `stretch` (default) - stretch to fill the container.
- - `start` - items are placed at the start of the cross axis.
- - `end` - items are placed at the end of the cross axis.
- - `center` - items are centered on the cross axis.
- - `baseline` - items are aligned such as their baselines align.
-- `justify: string` - This defines the alignment along the main axis.
-It helps distribute extra free space leftover when either all the flex
-items on a line are inflexible, or are flexible but have reached their
-maximum size. It also exerts some control over the alignment of items
-when they overflow the line.
- - `flex-start` (default) - items are packed toward the start of the
- flex-direction.
- - `flex-end` - items are packed toward the end of the flex-direction.
- - `space-between` - items are evenly distributed in the line; first item is
- on the start line, last item on the end line
- - `space-around` - items are evenly distributed in the line with equal space
- around them. Note that visually the spaces aren't equal, since all the items
- have equal space on both sides. The first item will have one unit of space
- against the container edge, but two units of space between the next item
- because that next item has its own spacing that applies.
- - `space-evenly` - items are distributed so that the spacing between any two
- items (and the space to the edges) is equal.
- - TBD (not all properties are supported in IE11).
-
-### `Flex.Item`
-
-Props:
-
-- See inherited props: [Box](#box)
-- `order: number` - By default, flex items are laid out in the source order.
-However, the order property controls the order in which they appear in the
-flex container.
-- `grow: number` - This defines the ability for a flex item to grow if
-necessary. It accepts a unitless value that serves as a proportion. It
-dictates what amount of the available space inside the flex container the
-item should take up. This number is unit-less and is relative to other
-siblings.
-- `shrink: number` - This defines the ability for a flex item to shrink
-if necessary. Inverse of `grow`.
-- `basis: string` - This defines the default size of an element before the
-remaining space is distributed. It can be a length (e.g. `20%`, `5rem`, etc.),
-an `auto` or `content` keyword.
-- `align: string` - This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. See: [Flex](#flex).
-
-
-### `Grid`
-
-Helps you to divide horizontal space into two or more equal sections.
-It is essentially a single-row `Table`, but with some extra features.
-
-Example:
-
-```jsx
-
-
-
-
-
-
-
-
-```
-
-Props:
-
-- See inherited props: [Table](#table)
-
-### `Grid.Column`
-
-Props:
-
-- See inherited props: [Table.Cell](#tablecell)
-- `size: number` (default: 1) - Size of the column relative to other columns.
-
-### `Icon`
-
-Renders one of the FontAwesome icons of your choice.
-
-```jsx
-
-```
-
-To smoothen the transition from v4 to v5, we have added a v4 semantic to
-transform names with `-o` suffixes to FA Regular icons. For example:
-- `square` will get transformed to `fas square`
-- `square-o` will get transformed to `far square`
-
-Props:
-
-- See inherited props: [Box](#box)
-- `name: string` - Icon name.
-- `size: number` - Icon size. `1` is normal size, `2` is two times bigger.
-Fractional numbers are supported.
-- `rotation: number` - Icon rotation, in degrees.
-- `spin: boolean` - Whether an icon should be spinning. Good for load
-indicators.
-
-### `Input`
-
-A basic text input, which allow users to enter text into a UI.
-
-> Input does not support custom font size and height due to the way
-> it's implemented in CSS. Eventually, this needs to be fixed.
-
-Props:
-
-- See inherited props: [Box](#box)
-- `value: string` - Value of an input.
-- `placeholder: string` - Text placed into Input box when value is otherwise nothing. Clears automatically when focused.
-- `fluid: boolean` - Fill all available horizontal space.
-- `selfClear: boolean` - Clear after hitting enter, as well as remain focused when this happens. Useful for things like chat inputs
-- `onChange: (e, value) => void` - An event, which fires when you commit
-the text by either unfocusing the input box, or by pressing the Enter key.
-- `onInput: (e, value) => void` - An event, which fires on every keypress.
-
-### `LabeledList`
-
-LabeledList is a continuous, vertical list of text and other content, where
-every item is labeled. It works just like a two column table, where first
-column is labels, and second column is content.
-
-```jsx
-
-
- Content
-
-
-```
-
-If you want to have a button on the right side of an item (for example,
-to perform some sort of action), there is a way to do that:
-
-```jsx
-
-
- )}>
- Content
-
-
-```
-
-Props:
-
-- `children: LabeledList.Item` - Items to render.
-
-### `LabeledList.Item`
-
-Props:
-
-- `label: string` - Item label.
-- `color: string` - Sets the color of the text.
-- `buttons: any` - Buttons to render aside the content.
-- `content/children: any` - Content of this labeled item.
-
-### `LabeledList.Divider`
-
-Adds some empty space between LabeledList items.
-
-Example:
-
-```jsx
-
-
- Content
-
-
-
-```
-
-Props:
-
-- `size: number` - Size of the divider.
-
-### `NoticeBox`
-
-A notice box, which warns you about something very important.
-
-Props:
-
-- See inherited props: [Box](#box)
-
-### `NumberInput`
-
-A fancy, interactive number input, which you can either drag up and down
-to fine tune the value, or single click it to manually type a number.
-
-Props:
-
-- `animated: boolean` - Animates the value if it was changed externally.
-- `fluid: boolean` - Fill all available horizontal space.
-- `value: number` - Value itself.
-- `unit: string` - Unit to display to the right of value.
-- `minValue: number` - Lowest possible value.
-- `maxValue: number` - Highest possible value.
-- `step: number` (default: 1) - Adjust value by this amount when
-dragging the input.
-- `stepPixelSize: number` (default: 1) - Screen distance mouse needs
-to travel to adjust value by one `step`.
-- `width: string|number` - Width of the element, in `Box` units or pixels.
-- `height: string|numer` - Height of the element, in `Box` units or pixels.
-- `lineHeight: string|number` - lineHeight of the element, in `Box` units or pixels.
-- `fontSize: string|number` - fontSize of the element, in `Box` units or pixels.
-- `format: value => value` - Format value using this function before
-displaying it.
-- `suppressFlicker: number` - A number in milliseconds, for which the input
-will hold off from updating while events propagate through the backend.
-Default is about 250ms, increase it if you still see flickering.
-- `onChange: (e, value) => void` - An event, which fires when you release
-the input, or successfully enter a number.
-- `onDrag: (e, value) => void` - An event, which fires about every 500ms
-when you drag the input up and down, on release and on manual editing.
-
-### `ProgressBar`
-
-Progress indicators inform users about the status of ongoing processes.
-
-```jsx
-
-```
-
-Usage of `ranges` prop:
-
-```jsx
-
-```
-
-Props:
-
-- `value: number` - Current progress as a floating point number between
-`minValue` (default: 0) and `maxValue` (default: 1). Determines the
-percentage and how filled the bar is.
-- `minValue: number` - Lowest possible value.
-- `maxValue: number` - Highest possible value.
-- `ranges: { color: [from, to] }` - Applies a `color` to the progress bar
-based on whether the value lands in the range between `from` and `to`.
-- `color: string` - Color of the progress bar.
-- `content/children: any` - Content to render inside the progress bar.
-
-### `Section`
-
-Section is a surface that displays content and actions on a single topic.
-
-They should be easy to scan for relevant and actionable information.
-Elements, like text and images, should be placed in them in a way that
-clearly indicates hierarchy.
-
-Section can also be titled to clearly define its purpose.
-
-```jsx
-
- Here you can order supply crates.
-
-```
-
-If you want to have a button on the right side of an section title
-(for example, to perform some sort of action), there is a way to do that:
-
-```jsx
-
- )}>
- Here you can order supply crates.
-
-```
-
-- See inherited props: [Box](#box)
-- `title: string` - Title of the section.
-- `level: number` - Section level in hierarchy. Default is 1, higher number
-means deeper level of nesting. Must be an integer number.
-- `buttons: any` - Buttons to render aside the section title.
-- `content/children: any` - Content of this section.
-
-### `Table`
-
-A straight forward mapping to a standard html table, which is slightly
-simplified (does not need a `` tag) and with sane default styles
-(e.g. table width is 100% by default).
-
-Example:
-
-```jsx
-
-
-
- Hello world!
-
-
- Label
-
-
-
-```
-
-Props:
-
-- See inherited props: [Box](#box)
-- `collapsing: boolean` - Collapses table to the smallest possible size.
-
-### `Table.Row`
-
-A straight forward mapping to `
` element.
-
-Props:
-
-- See inherited props: [Box](#box)
-
-### `Table.Cell`
-
-A straight forward mapping to `
` element.
-
-Props:
-
-- See inherited props: [Box](#box)
-- `collapsing: boolean` - Collapses table cell to the smallest possible size,
-and stops any text inside from wrapping.
-
-### `Tabs`
-
-Tabs make it easy to explore and switch between different views.
-
-Here is an example of how you would construct a simple tabbed view:
-
-```jsx
-
-
- Content for Item one.
-
-
- Content for Item two.
-
-
-```
-
-This is a rather simple example. In the real world, you might be
-constructing very complex tabbed views which can tax UI performance.
-This is because your tabs are being rendered regardless of their
-visibility status!
-
-There is a simple fix however. Tabs accept functions as children, which
-will be called to retrieve content only when the tab is visible:
-
-```jsx
-
-
- {() => (
-
- Content for Item one.
-
- )}
-
-
- {() => (
-
- Content for Item two.
-
- )}
-
-
-```
-
-You might not always need this, but it is highly recommended to always
-use this method. Notice the `key` prop on tabs - it uniquely identifies
-the tab and is used for determining which tab is currently active. It can
-be either explicitly provided as a `key` prop, or if omitted, it will be
-implicitly derived from the tab's `label` prop.
-
-Props:
-
-- `vertical: boolean` - Use a vertical configuration, where tabs will appear
-stacked on the left side of the container.
-- `altSelection` - Whether the tab buttons select via standard select (color change) or by adding a white indicator to the selected tab.
- Intended for usage on interfaces where tab color has relevance.
-- `children: Tab[]` - This component only accepts tabs as its children.
-
-### `Tabs.Tab`
-
-An individual tab element. Tabs function like buttons, so they inherit
-a lot of `Button` props.
-
-Props:
-
-- See inherited props: [Button](#button)
-- `key: string` - A unique identifier for the tab.
-- `label: string` - Tab label.
-- `icon: string` - Tab icon.
-- `content/children: any` - Content to render inside the tab.
-- `onClick: function` - Called when element is clicked.
-
-### `Tooltip`
-
-A boxy tooltip from tgui 1. It is very hacky in its current state, and
-requires setting `position: relative` on the container.
-
-Please note, that [Button](#button) component has a `tooltip` prop, and
-it is recommended to use that prop instead.
-
-Usage:
-
-```jsx
-
- Sample text.
-
-
-```
-
-Props:
-
-- `position: string` - Tooltip position.
-- `content/children: string` - Content of the tooltip. Must be a plain string.
-Fragments or other elements are **not** supported.
diff --git a/tgui-next/docs/tutorial-and-examples.md b/tgui-next/docs/tutorial-and-examples.md
deleted file mode 100644
index d038c1de61..0000000000
--- a/tgui-next/docs/tutorial-and-examples.md
+++ /dev/null
@@ -1,245 +0,0 @@
-# Tutorial and Examples
-
-## Main concepts
-
-Basic tgui backend code consists of the following vars and procs:
-
-```
-ui_interact(mob/user, ui_key, datum/tgui/ui, force_open,
- datum/tgui/master_ui, datum/ui_state/state)
-ui_data(mob/user)
-ui_act(action, params)
-```
-
-- `src_object` - The atom, which UI corresponds to in the game world.
-- `ui_interact` - The proc where you will handle a request to open an
-interface. Typically, you would update an existing UI (if it exists),
-or set up a new instance of UI by calling the `SStgui` subsystem.
-- `ui_data` - In this proc you munges whatever complex data your `src_object`
-has into an associative list, which will then be sent to UI as a JSON string.
-- `ui_act` - This proc receives user actions and reacts to them by changing
-the state of the game.
-- `ui_state` (set in `ui_interact`) - This var dictates under what conditions
-a UI may be interacted with. This may be the standard checks that check if
-you are in range and conscious, or more.
-
-Once backend is complete, you create an new interface component on the
-frontend, which will receive this JSON data and render it on screen.
-
-States are easy to write and extend, and what make tgui interactions so
-powerful. Because states can be overridden from other procs, you can build
-powerful interactions for embedded objects or remote access.
-
-## Using It
-
-### Backend
-
-Let's start with a very basic hello world.
-
-```dm
-/obj/machinery/my_machine/ui_interact(mob/user, ui_key = "main", datum/tgui/ui = null, force_open = 0, datum/tgui/master_ui = null, datum/ui_state/state = default_state)
- ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
- if(!ui)
- ui = new(user, src, ui_key, "my_machine", name, 300, 300, master_ui, state)
- ui.open()
-```
-
-This is the proc that defines our interface. There's a bit going on here, so
-let's break it down. First, we override the ui_interact proc on our object. This
-will be called by `interact` for you, which is in turn called by `attack_hand`
-(or `attack_self` for items). `ui_interact` is also called to update a UI (hence
-the `try_update_ui`), so we accept an existing UI to update. The `state` is a
-default argument so that a caller can overload it with named arguments
-(`ui_interact(state = overloaded_state)`) if needed.
-
-Inside the `if(!ui)` block (which means we are creating a new UI), we choose our
-template, title, and size; we can also set various options like `style` (for
-themes), or autoupdate. These options will be elaborated on later (as will
-`ui_state`s).
-
-After `ui_interact`, we need to define `ui_data`. This just returns a list of
-data for our object to use. Let's imagine our object has a few vars:
-
-```dm
-/obj/machinery/my_machine/ui_data(mob/user)
- var/list/data = list()
- data["health"] = health
- data["color"] = color
-
- return data
-```
-
-The `ui_data` proc is what people often find the hardest about tgui, but its
-really quite simple! You just need to represent your object as numbers, strings,
-and lists, instead of atoms and datums.
-
-Finally, the `ui_act` proc is called by the interface whenever the user used an
-input. The input's `action` and `params` are passed to the proc.
-
-```dm
-/obj/machinery/my_machine/ui_act(action, params)
- if(..())
- return
- switch(action)
- if("change_color")
- var/new_color = params["color"]
- if(!(color in allowed_coors))
- return
- color = new_color
- . = TRUE
- update_icon()
-```
-
-The `..()` (parent call) is very important here, as it is how we check that the
-user is allowed to use this interface (to avoid so-called href exploits). It is
-also very important to clamp and sanitize all input here. Always assume the user
-is attempting to exploit the game.
-
-Also note the use of `. = TRUE` (or `FALSE`), which is used to notify the UI
-that this input caused an update. This is especially important for UIs that do
-not auto-update, as otherwise the user will never see their change.
-
-### Frontend
-
-Finally, you have to make a UI component. This is also a source of
-confusion for many new users. If you got some basic javascript and HTML
-knowledge, that should ease the learning process, although we recommend
-getting yourself introduced to
-[React and JSX](https://reactjs.org/docs/introducing-jsx.html).
-
-A component is not a regular HTML. A component is a pure function, which
-accepts a `props` object (it contains properties passed to a component),
-and outputs an HTML-like structure consisting of regular HTML elements and
-other UI components.
-
-Interface component will always receive 1 prop which is called `state`.
-This object contains a few special values:
-
-- `config` is always the same and is part of core tgui
-(it will be explained later),
-- `data` is the data returned from `ui_data`
-
-```jsx
-import { Section, LabeledList } from '../components';
-
-const SampleInterface = props => {
- const { state } = props;
- const { config, data } = state;
- const { ref } = config;
- return (
-
-
-
- {data.health}
-
-
- {data.color}
-
-
-
- );
-};
-```
-
-This syntax can be very confusing at first, but it is very important to
-realize that this is just a natural extension of javascript. Here's a few
-examples of this syntax:
-
-Return a different element based on a condition:
-
-```jsx
-if (condition) {
- return ;
-}
-return ;
-```
-
-Conditionally render a element inside of another element:
-
-```jsx
-
- {showProgress && (
-
- )}
-
-```
-
-Looping over the array to make an element for each item:
-
-```jsx
-
- {items.map(item => (
-
- {item.content}
-
- ))}
-
-```
-
-### Routing table
-
-Once you finished creating your interface, you need to add a route entry to
-the large `ROUTES` object, otherwise tgui won't know when and how to render
-your interface. Key of this `ROUTES` object corresponds to the interface
-name you use in DM code.
-
-```js
-import { SampleInterface } from './interfaces/SampleInterface';
-
-const ROUTES = {
- sample_interface: {
- component: () => SampleInterface,
- scrollable: true,
- },
-};
-```
-
-## Copypasta
-
-We all do it, even the best of us. If you just want to make a tgui **fast**,
-here's what you need (note that you'll probably be forced to clean your shit up
-upon code review):
-
-```dm
-/obj/copypasta/ui_interact(mob/user, ui_key = "main", datum/tgui/ui = null, force_open = 0, datum/tgui/master_ui = null, datum/ui_state/state = default_state) // Remember to use the appropriate state.
- ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
- if(!ui)
- ui = new(user, src, ui_key, "copypasta", name, 300, 300, master_ui, state)
- ui.open()
-
-/obj/copypasta/ui_data(mob/user)
- var/list/data = list()
- data["var"] = var
- return data
-
-/obj/copypasta/ui_act(action, params)
- if(..())
- return
- if(action == "copypasta")
- var/newvar = params["var"]
- // A demo of proper input sanitation.
- var = CLAMP(newvar, min_val, max_val)
- return TRUE
- update_icon() // Not applicable to all objects.
-```
-
-And the template:
-
-```jsx
-import { Section, LabeledList } from '../components';
-
-const SampleInterface = props => {
- const { state } = props;
- const { config, data } = state;
- const { ref } = config;
- return (
-
-
-
- {data.var}
-
-
-
- );
-};
-```
diff --git a/tgui-next/package.json b/tgui-next/package.json
deleted file mode 100644
index 9b7253e131..0000000000
--- a/tgui-next/package.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
- "private": true,
- "name": "tgui-next",
- "version": "0.1.0",
- "workspaces": [
- "packages/*"
- ],
- "scripts": {
- "build": "eslint packages && cd packages/tgui && npx webpack --mode=production",
- "watch": "cd packages/tgui-dev-server && node --experimental-modules index.js",
- "analyze": "cd packages/tgui && npx webpack --mode=production --env.analyze=1",
- "lint": "eslint packages"
- },
- "dependencies": {
- "babel-eslint": "^10.0.3",
- "eslint": "^6.7.2",
- "eslint-plugin-react": "^7.17.0"
- }
-}
diff --git a/tgui-next/packages/common/math.js b/tgui-next/packages/common/math.js
deleted file mode 100644
index a33b9aa214..0000000000
--- a/tgui-next/packages/common/math.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Limits a number to the range between 'min' and 'max'.
- */
-export const clamp = (value, min = 0, max = 1) => {
- return Math.max(min, Math.min(value, max));
-};
-
-/**
- * Returns a rounded number.
- * TODO: Replace this native rounding function with a more robust one.
- */
-export const round = value => Math.round(value);
-
-/**
- * Returns a string representing a number in fixed point notation.
- */
-export const toFixed = (value, fractionDigits = 0) => {
- return Number(value).toFixed(fractionDigits);
-};
diff --git a/tgui-next/packages/common/package.json b/tgui-next/packages/common/package.json
deleted file mode 100644
index 56dd3f7fd4..0000000000
--- a/tgui-next/packages/common/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "private": true,
- "name": "common",
- "version": "0.1.0",
- "type": "module"
-}
diff --git a/tgui-next/packages/tgui-dev-server/link/server.js b/tgui-next/packages/tgui-dev-server/link/server.js
deleted file mode 100644
index 4d0e22d341..0000000000
--- a/tgui-next/packages/tgui-dev-server/link/server.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import { createLogger, directLog } from 'common/logging.js';
-import http from 'http';
-import { inspect } from 'util';
-import WebSocket from 'ws';
-import { retrace, loadSourceMaps } from './retrace.js';
-
-const logger = createLogger('link');
-
-const DEBUG = process.argv.includes('--debug');
-
-export { loadSourceMaps };
-
-export const setupLink = () => {
- logger.log('setting up');
- const wss = setupWebSocketLink();
- setupHttpLink();
- return {
- wss,
- };
-};
-
-export const broadcastMessage = (link, msg) => {
- const { wss } = link;
- const clients = [...wss.clients];
- logger.log(`broadcasting ${msg.type} to ${clients.length} clients`);
- for (let client of clients) {
- const json = JSON.stringify(msg);
- client.send(json);
- }
-};
-
-const deserializeObject = obj => {
- return JSON.parse(obj, (key, value) => {
- if (typeof value === 'object' && value !== null) {
- if (value.__error__) {
- return retrace(value.stack);
- }
- if (value.__number__) {
- return parseFloat(value.__number__);
- }
- return value;
- }
- return value;
- });
-};
-
-const handleLinkMessage = msg => {
- const { type, payload } = msg;
-
- if (type === 'log') {
- const { level, ns, args } = payload;
- // Skip debug messages
- if (level <= 0 && !DEBUG) {
- return;
- }
- directLog(ns, ...args.map(arg => {
- if (typeof arg === 'object') {
- return inspect(arg, {
- depth: Infinity,
- colors: true,
- compact: 8,
- });
- }
- return arg;
- }));
- return;
- }
-
- logger.log('unhandled message', msg);
-};
-
-// WebSocket-based client link
-const setupWebSocketLink = () => {
- const port = 3000;
- const wss = new WebSocket.Server({ port });
-
- wss.on('connection', ws => {
- logger.log('client connected');
-
- ws.on('message', json => {
- const msg = deserializeObject(json);
- handleLinkMessage(msg);
- });
-
- ws.on('close', () => {
- logger.log('client disconnected');
- });
- });
-
- logger.log(`listening on port ${port} (WebSocket)`);
- return wss;
-};
-
-// One way HTTP-based client link for IE8
-const setupHttpLink = () => {
- const port = 3001;
-
- const server = http.createServer((req, res) => {
- if (req.method === 'POST') {
- let body = '';
- req.on('data', chunk => {
- body += chunk.toString();
- });
- req.on('end', () => {
- const msg = JSON.parse(body);
- handleLinkMessage(msg);
- res.end();
- });
- return;
- }
- res.write('Hello');
- res.end();
- });
-
- server.listen(port);
- logger.log(`listening on port ${port} (HTTP)`);
-};
diff --git a/tgui-next/packages/tgui-dev-server/package.json b/tgui-next/packages/tgui-dev-server/package.json
deleted file mode 100644
index 0c98cabae3..0000000000
--- a/tgui-next/packages/tgui-dev-server/package.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
- "private": true,
- "name": "tgui-dev-server",
- "version": "0.1.0",
- "type": "module",
- "dependencies": {
- "glob": "^7.1.4",
- "source-map": "^0.7.3",
- "stacktrace-parser": "^0.1.7",
- "ws": "^7.1.2"
- }
-}
diff --git a/tgui-next/packages/tgui/backend.js b/tgui-next/packages/tgui/backend.js
deleted file mode 100644
index cdaf89fc6b..0000000000
--- a/tgui-next/packages/tgui/backend.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import { UI_DISABLED, UI_INTERACTIVE } from './constants';
-import { tridentVersion, act as _act } from './byond';
-
-/**
- * This file provides a clear separation layer between backend updates
- * and what state our React app sees.
- *
- * Sometimes backend can response without a "data" field, but our final
- * state will still contain previous "data" because we are merging
- * the response with already existing state.
- */
-
-/**
- * Creates a backend update action.
- */
-export const backendUpdate = state => ({
- type: 'backendUpdate',
- payload: state,
-});
-
-/**
- * Precisely defines state changes.
- */
-export const backendReducer = (state, action) => {
- const { type, payload } = action;
-
- if (type === 'backendUpdate') {
- // Merge config
- const config = {
- ...state.config,
- ...payload.config,
- };
- // Merge data
- const data = {
- ...state.data,
- ...payload.static_data,
- ...payload.data,
- };
- // Calculate our own fields
- const visible = config.status !== UI_DISABLED;
- const interactive = config.status === UI_INTERACTIVE;
- // Return new state
- return {
- ...state,
- config,
- data,
- visible,
- interactive,
- };
- }
-
- return state;
-};
-
-/**
- * @typedef BackendState
- * @type {{
- * config: {
- * title: string,
- * status: number,
- * screen: string,
- * style: string,
- * interface: string,
- * fancy: number,
- * locked: number,
- * observer: number,
- * window: string,
- * ref: string,
- * },
- * data: any,
- * visible: boolean,
- * interactive: boolean,
- * }}
- */
-
-/**
- * A React hook (sort of) for getting tgui state and related functions.
- *
- * This is supposed to be replaced with a real React Hook, which can only
- * be used in functional components. DO NOT use it in class-based components!
- *
- * @return {BackendState & {
- * act: (action: string, params?: object) => void,
- * }}
- */
-export const useBackend = props => {
- // TODO: Dispatch "act" calls as Redux actions
- const { state, dispatch } = props;
- const ref = state.config.ref;
- const act = (action, params = {}) => _act(ref, action, params);
- return {
- ...state,
- act,
- };
-};
diff --git a/tgui-next/packages/tgui/byond.js b/tgui-next/packages/tgui/byond.js
deleted file mode 100644
index 2b7d3ff772..0000000000
--- a/tgui-next/packages/tgui/byond.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import { buildQueryString } from 'common/string';
-
-/**
- * Version of Trident engine used in Internet Explorer.
- *
- * - IE 8 - Trident 4.0
- * - IE 11 - Trident 7.0
- *
- * @return An integer number or 'null' if this is not a trident engine.
- */
-export const tridentVersion = (() => {
- const { userAgent } = navigator;
- const groups = userAgent.match(/Trident\/(\d+).+?;/i);
- const majorVersion = groups[1];
- if (!majorVersion) {
- return null;
- }
- return parseInt(majorVersion, 10);
-})();
-
-/**
- * Helper to generate a BYOND href given 'params' as an object
- * (with an optional 'url' for eg winset).
- */
-const href = (url, params = {}) => {
- return 'byond://' + url + '?' + buildQueryString(params);
-};
-
-export const callByond = (url, params = {}) => {
- window.location.href = href(url, params);
-};
-
-/**
- * A high-level abstraction of BYJAX. Makes a call to BYOND and returns
- * a promise, which (if endpoint has a callback parameter) resolves
- * with the return value of that call.
- */
-export const callByondAsync = (url, params = {}) => {
- // Create a callback array if it doesn't exist yet
- window.__callbacks__ = window.__callbacks__ || [];
- // Create a Promise and push its resolve function into callback array
- const callbackIndex = window.__callbacks__.length;
- const promise = new Promise(resolve => {
- // TODO: Fix a potential memory leak
- window.__callbacks__.push(resolve);
- });
- // Call BYOND client
- window.location.href = href(url, {
- ...params,
- callback: `__callbacks__[${callbackIndex}]`,
- });
- return promise;
-};
-
-/**
- * Literally types a command on the client.
- */
-export const runCommand = command => callByond('winset', { command });
-
-/**
- * Helper to make a BYOND ui_act() call on the UI 'src' given an 'action'
- * and optional 'params'.
- */
-export const act = (src, action, params = {}) => {
- return callByond('', { src, action, ...params });
-};
-
-/**
- * Calls 'winget' on window, retrieving value by the 'key'.
- */
-export const winget = async (win, key) => {
- const obj = await callByondAsync('winget', {
- id: win,
- property: key,
- });
- return obj[key];
-};
-
-/**
- * Calls 'winset' on window, setting 'key' to 'value'.
- */
-export const winset = (win, key, value) => callByond('winset', {
- [`${win}.${key}`]: value,
-});
diff --git a/tgui-next/packages/tgui/components/Box.js b/tgui-next/packages/tgui/components/Box.js
deleted file mode 100644
index 5fa678681c..0000000000
--- a/tgui-next/packages/tgui/components/Box.js
+++ /dev/null
@@ -1,186 +0,0 @@
-import { classes, isFalsy, pureComponentHooks } from 'common/react';
-import { createVNode } from 'inferno';
-import { ChildFlags, VNodeFlags } from 'inferno-vnode-flags';
-import { CSS_COLORS } from '../constants';
-
-const UNIT_PX = 6;
-
-/**
- * Coverts our rem-like spacing unit into a CSS unit.
- */
-export const unit = value => {
- if (typeof value === 'string') {
- return value;
- }
- if (typeof value === 'number') {
- return (value * UNIT_PX) + 'px';
- }
-};
-
-const isColorCode = str => !isColorClass(str);
-
-const isColorClass = str => typeof str === 'string'
- && CSS_COLORS.includes(str);
-
-const mapRawPropTo = attrName => (style, value) => {
- if (!isFalsy(value)) {
- style[attrName] = value;
- }
-};
-
-const mapUnitPropTo = attrName => (style, value) => {
- if (!isFalsy(value)) {
- style[attrName] = unit(value);
- }
-};
-
-const mapBooleanPropTo = (attrName, attrValue) => (style, value) => {
- if (!isFalsy(value)) {
- style[attrName] = attrValue;
- }
-};
-
-const mapDirectionalUnitPropTo = (attrName, dirs) => (style, value) => {
- if (!isFalsy(value)) {
- for (let i = 0; i < dirs.length; i++) {
- style[attrName + '-' + dirs[i]] = unit(value);
- }
- }
-};
-
-const mapColorPropTo = attrName => (style, value) => {
- if (isColorCode(value)) {
- style[attrName] = value;
- }
-};
-
-const styleMapperByPropName = {
- // Direct mapping
- position: mapRawPropTo('position'),
- overflow: mapRawPropTo('overflow'),
- overflowX: mapRawPropTo('overflow-x'),
- overflowY: mapRawPropTo('overflow-y'),
- top: mapUnitPropTo('top'),
- bottom: mapUnitPropTo('bottom'),
- left: mapUnitPropTo('left'),
- right: mapUnitPropTo('right'),
- width: mapUnitPropTo('width'),
- minWidth: mapUnitPropTo('min-width'),
- maxWidth: mapUnitPropTo('max-width'),
- height: mapUnitPropTo('height'),
- minHeight: mapUnitPropTo('min-height'),
- maxHeight: mapUnitPropTo('max-height'),
- fontSize: mapUnitPropTo('font-size'),
- fontFamily: mapRawPropTo('font-family'),
- lineHeight: mapUnitPropTo('line-height'),
- opacity: mapRawPropTo('opacity'),
- textAlign: mapRawPropTo('text-align'),
- verticalAlign: mapRawPropTo('vertical-align'),
- // Boolean props
- inline: mapBooleanPropTo('display', 'inline-block'),
- bold: mapBooleanPropTo('font-weight', 'bold'),
- italic: mapBooleanPropTo('font-style', 'italic'),
- nowrap: mapBooleanPropTo('white-space', 'nowrap'),
- // Margins
- m: mapDirectionalUnitPropTo('margin', ['top', 'bottom', 'left', 'right']),
- mx: mapDirectionalUnitPropTo('margin', ['left', 'right']),
- my: mapDirectionalUnitPropTo('margin', ['top', 'bottom']),
- mt: mapUnitPropTo('margin-top'),
- mb: mapUnitPropTo('margin-bottom'),
- ml: mapUnitPropTo('margin-left'),
- mr: mapUnitPropTo('margin-right'),
- // Color props
- color: mapColorPropTo('color'),
- textColor: mapColorPropTo('color'),
- backgroundColor: mapColorPropTo('background-color'),
- // Utility props
- fillPositionedParent: (style, value) => {
- if (value) {
- style['position'] = 'absolute';
- style['top'] = 0;
- style['bottom'] = 0;
- style['left'] = 0;
- style['right'] = 0;
- }
- },
-};
-
-export const computeBoxProps = props => {
- const computedProps = {};
- const computedStyles = {};
- // Compute props
- for (let propName of Object.keys(props)) {
- if (propName === 'style') {
- continue;
- }
- const propValue = props[propName];
- const mapPropToStyle = styleMapperByPropName[propName];
- if (mapPropToStyle) {
- mapPropToStyle(computedStyles, propValue);
- }
- else {
- computedProps[propName] = propValue;
- }
- }
- // Concatenate styles
- Object.assign(computedStyles, props.style);
- let style = '';
- for (let attrName of Object.keys(computedStyles)) {
- const attrValue = computedStyles[attrName];
- style += attrName + ':' + attrValue + ';';
- }
- if (style.length > 0) {
- computedProps.style = style;
- }
- return computedProps;
-};
-
-export const Box = props => {
- const {
- as = 'div',
- className,
- content,
- children,
- ...rest
- } = props;
- const color = props.textColor || props.color;
- const backgroundColor = props.backgroundColor;
- // Render props
- if (typeof children === 'function') {
- return children(computeBoxProps(props));
- }
- const computedProps = computeBoxProps(rest);
- // Render a wrapper element
- return createVNode(
- VNodeFlags.HtmlElement,
- as,
- classes([
- className,
- isColorClass(color) && 'color-' + color,
- isColorClass(backgroundColor) && 'color-bg-' + backgroundColor,
- ]),
- content || children,
- ChildFlags.UnknownChildren,
- computedProps);
-};
-
-Box.defaultHooks = pureComponentHooks;
-
-/**
- * A hack to force certain things (like tables) to position correctly
- * inside bugged things, like Flex in Internet Explorer.
- */
-const ForcedBox = props => {
- const { children, ...rest } = props;
- return (
-
-
- {children}
-
-
- );
-};
-
-ForcedBox.defaultHooks = pureComponentHooks;
-
-Box.Forced = ForcedBox;
diff --git a/tgui-next/packages/tgui/components/Button.js b/tgui-next/packages/tgui/components/Button.js
deleted file mode 100644
index 5ed0c8648b..0000000000
--- a/tgui-next/packages/tgui/components/Button.js
+++ /dev/null
@@ -1,257 +0,0 @@
-import { classes, pureComponentHooks } from 'common/react';
-import { tridentVersion, act } from '../byond';
-import { KEY_ENTER, KEY_ESCAPE, KEY_SPACE } from '../hotkeys';
-import { createLogger } from '../logging';
-import { refocusLayout } from '../refocus';
-import { Box } from './Box';
-import { Icon } from './Icon';
-import { Tooltip } from './Tooltip';
-import { Input } from './Input';
-import { Component, createRef } from 'inferno';
-import { Grid } from './Grid';
-
-const logger = createLogger('Button');
-
-export const Button = props => {
- const {
- className,
- fluid,
- icon,
- color,
- disabled,
- selected,
- tooltip,
- tooltipPosition,
- ellipsis,
- content,
- iconRotation,
- iconSpin,
- children,
- onclick,
- onClick,
- ...rest
- } = props;
- const hasContent = !!(content || children);
- // A warning about the lowercase onclick
- if (onclick) {
- logger.warn(
- `Lowercase 'onclick' is not supported on Button and lowercase`
- + ` prop names are discouraged in general. Please use a camelCase`
- + `'onClick' instead and read: `
- + `https://infernojs.org/docs/guides/event-handling`);
- }
- // IE8: Use a lowercase "onclick" because synthetic events are fucked.
- // IE8: Use an "unselectable" prop because "user-select" doesn't work.
- return (
- {
- refocusLayout();
- if (!disabled && onClick) {
- onClick(e);
- }
- }}
- onKeyDown={e => {
- const keyCode = window.event ? e.which : e.keyCode;
- // Simulate a click when pressing space or enter.
- if (keyCode === KEY_SPACE || keyCode === KEY_ENTER) {
- e.preventDefault();
- if (!disabled && onClick) {
- onClick(e);
- }
- return;
- }
- // Refocus layout on pressing escape.
- if (keyCode === KEY_ESCAPE) {
- e.preventDefault();
- refocusLayout();
- return;
- }
- }}
- {...rest}>
- {icon && (
-
- )}
- {content}
- {children}
- {tooltip && (
-
- )}
-
- );
-};
-
-Button.defaultHooks = pureComponentHooks;
-
-export const ButtonCheckbox = props => {
- const { checked, ...rest } = props;
- return (
-
- );
-};
-
-Button.Checkbox = ButtonCheckbox;
-
-export class ButtonConfirm extends Component {
- constructor() {
- super();
- this.state = {
- clickedOnce: false,
- };
- this.handleClick = () => {
- if (this.state.clickedOnce) {
- this.setClickedOnce(false);
- }
- };
- }
-
- setClickedOnce(clickedOnce) {
- this.setState({
- clickedOnce,
- });
- if (clickedOnce) {
- setTimeout(() => window.addEventListener('click', this.handleClick));
- }
- else {
- window.removeEventListener('click', this.handleClick);
- }
- }
-
- render() {
- const {
- confirmMessage = "Confirm?",
- confirmColor = "bad",
- color,
- content,
- onClick,
- ...rest
- } = this.props;
- return (
-