tgui: adds tgui npm library (#83789)

<!-- Write **BELOW** The Headers and **ABOVE** The comments else it may
not be viewable. -->
<!-- You can view Contributing.MD for a detailed description of the pull
request process. -->

## About The Pull Request
As a side project I've been building an npm library for tgui components.
~~I'd like to see if it works~~. It functions as a straight one-line
replacement for interfaces and, if fully implemented, allows you to
totally delete your tgui/components and tgui/styles/components folders

This is a test of 10 mostly random UIs

>[!NOTE]
>Link to the repo:
>https://github.com/tgstation/tgui-core
>
>Link to the npm package
>https://www.npmjs.com/package/tgui-core

<!-- Describe The Pull Request. Please be sure every change is
documented or this can delay review and even discourage maintainers from
merging your PR! -->

## Why It's Good For The Game
This is nice because it allows us to easily distribute the gospel of TG
to downstreams without them having to sift through our PRs and code (as
much as I want to make them) just to assess parity. With tgui-core
you're getting the most up-to-date TGUI components without having to
fiddle with integrating them or copy pasting.

It also allows me and other TGUI(tm) contributors (all 2 other people
maybe) to collectively work across borders on improving and maintaining
tgui without causing significant deviations and requiring
upstream/downstream ports to fix them.

EDIT: Someone asked how would this allow them to make their own custom
versions. You still can, and you can even use both interoperably, by
simply changing where you're importing the component from. It's opt in
to use tgui-core components.
<!-- Argue for the merits of your changes and how they benefit the game,
especially if they are controversial and/or far reaching. If you can't
actually explain WHY what you are doing will improve the game, then it
probably isn't good for the game in the first place. -->

## Changelog

n/a these are identical tgui components

tgui/packages/tgui/interfaces/AccountingConsole.tsx

@@ -1,7 +1,5 @@
 import { BooleanLike } from 'common/react';
 import { useState } from 'react';
-
-import { useBackend } from '../backend';
 import {
   BlockQuote,
   Collapsible,
@@ -9,7 +7,9 @@ import {
   Section,
   Stack,
   Tabs,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 type Data = {

tgui/packages/tgui/interfaces/AirAlarm.tsx

@@ -1,7 +1,5 @@
 import { BooleanLike } from 'common/react';
 import { Fragment } from 'react';
-
-import { useBackend, useLocalState } from '../backend';
 import {
   Box,
   Button,
@@ -11,7 +9,9 @@ import {
   Section,
   Table,
   VirtualList,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend, useLocalState } from '../backend';
 import { Window } from '../layouts';
 import {
   Scrubber,

tgui/packages/tgui/interfaces/Autolathe.tsx

@@ -1,7 +1,5 @@
 import { BooleanLike, classes } from 'common/react';
 import { capitalize } from 'common/string';
-
-import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -12,7 +10,9 @@ import {
   Section,
   Stack,
   Tooltip,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 import { DesignBrowser } from './Fabrication/DesignBrowser';
 import { MaterialCostSequence } from './Fabrication/MaterialCostSequence';

tgui/packages/tgui/interfaces/CameraConsole.tsx

@@ -2,8 +2,6 @@ import { filter, sort } from 'common/collections';
 import { BooleanLike, classes } from 'common/react';
 import { createSearch } from 'common/string';
 import { useState } from 'react';
-
-import { useBackend } from '../backend';
 import {
   Button,
   ByondUi,
@@ -11,7 +9,9 @@ import {
   NoticeBox,
   Section,
   Stack,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 type Data = {

tgui/packages/tgui/interfaces/ChemDispenser.tsx

@@ -1,8 +1,6 @@
 import { BooleanLike } from 'common/react';
 import { toTitleCase } from 'common/string';
 import { useState } from 'react';
-
-import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -10,7 +8,9 @@ import {
   LabeledList,
   ProgressBar,
   Section,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 import { Beaker, BeakerDisplay } from './common/BeakerDisplay';
 

tgui/packages/tgui/interfaces/CrewConsole.tsx

@@ -1,9 +1,9 @@
 import { BooleanLike } from 'common/react';
 import { createSearch } from 'common/string';
 import { useState } from 'react';
+import { Box, Button, Icon, Input, Section, Table } from 'tgui-core/components';
 
 import { useBackend } from '../backend';
-import { Box, Button, Icon, Input, Section, Table } from '../components';
 import { COLORS } from '../constants';
 import { Window } from '../layouts';
 

tgui/packages/tgui/interfaces/Fabricator.tsx

@@ -1,6 +1,4 @@
 import { classes } from 'common/react';
-
-import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -9,7 +7,9 @@ import {
   Section,
   Stack,
   Tooltip,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 import { DesignBrowser } from './Fabrication/DesignBrowser';
 import { MaterialAccessBar } from './Fabrication/MaterialAccessBar';

tgui/packages/tgui/interfaces/QuantumConsole.tsx

@@ -1,6 +1,4 @@
 import { BooleanLike } from 'common/react';
-
-import { useBackend, useSharedState } from '../backend';
 import {
   Button,
   Collapsible,
@@ -12,7 +10,9 @@ import {
   Table,
   Tabs,
   Tooltip,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend, useSharedState } from '../backend';
 import { TableCell, TableRow } from '../components/Table';
 import { Window } from '../layouts';
 import { LoadingScreen } from './common/LoadingToolbox';

tgui/packages/tgui/interfaces/Vending.tsx

@@ -1,7 +1,6 @@
 import { classes } from 'common/react';
 import { capitalizeAll } from 'common/string';
 import { useState } from 'react';
-import { useBackend } from 'tgui/backend';
 import {
   Box,
   Button,
@@ -11,8 +10,10 @@ import {
   Section,
   Stack,
   Table,
-} from 'tgui/components';
-import { Window } from 'tgui/layouts';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
+import { Window } from '../layouts';
 
 type VendingData = {
   onstation: boolean;

tgui/packages/tgui/interfaces/VotePanel.tsx

@@ -1,6 +1,4 @@
 import { BooleanLike } from 'common/react';
-
-import { useBackend } from '../backend';
 import {
   Box,
   Button,
@@ -11,7 +9,9 @@ import {
   NoticeBox,
   Section,
   Stack,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
 import { Window } from '../layouts';
 
 enum VoteConfig {

tgui/packages/tgui/package.json

@@ -16,6 +16,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-popper": "^2.3.0",
+    "tgui-core": "^1.0.18",
     "tgui-dev-server": "workspace:*",
     "tgui-polyfill": "workspace:*"
   }

tgui/webpack.config.js

@@ -60,7 +60,7 @@ module.exports = (env = {}, argv) => {
           ],
         },
         {
-          test: /\.scss$/,
+          test: /\.(s)?css$/,
           use: [
             {
               loader: ExtractCssPlugin.loader,

tgui/yarn.lock

@@ -8281,6 +8281,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"tgui-core@npm:^1.0.18":
+  version: 1.0.18
+  resolution: "tgui-core@npm:1.0.18"
+  peerDependencies:
+    react: ^18.2.0
+    react-dom: ^18.2.0
+  checksum: 10c0/f5fa9078649ba0aa052116cd3ecbbb3a38113e9c32e6875c233d074f38db6abdb4dbfc3fb846d3cd125d4572eaf999988a082c1650b94ae429ace90e56deaca9
+  languageName: node
+  linkType: hard
+
 "tgui-dev-server@workspace:*, tgui-dev-server@workspace:packages/tgui-dev-server":
   version: 0.0.0-use.local
   resolution: "tgui-dev-server@workspace:packages/tgui-dev-server"
@@ -8389,6 +8399,7 @@ __metadata:
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     react-popper: "npm:^2.3.0"
+    tgui-core: "npm:^1.0.18"
     tgui-dev-server: "workspace:*"
     tgui-polyfill: "workspace:*"
   languageName: unknown