From 4165d8a3babcba54d0d2dccb58b1e5e1200a0d41 Mon Sep 17 00:00:00 2001 From: Jeremiah <42397676+jlsnow301@users.noreply.github.com> Date: Wed, 26 Jun 2024 17:14:13 -0700 Subject: [PATCH] tgui: adds tgui npm library (#83789) ## 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 ## 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. ## Changelog n/a these are identical tgui components --- tgui/packages/tgui/interfaces/AccountingConsole.tsx | 6 +++--- tgui/packages/tgui/interfaces/AirAlarm.tsx | 6 +++--- tgui/packages/tgui/interfaces/Autolathe.tsx | 6 +++--- tgui/packages/tgui/interfaces/CameraConsole.tsx | 6 +++--- tgui/packages/tgui/interfaces/ChemDispenser.tsx | 6 +++--- tgui/packages/tgui/interfaces/CrewConsole.tsx | 2 +- tgui/packages/tgui/interfaces/Fabricator.tsx | 6 +++--- tgui/packages/tgui/interfaces/QuantumConsole.tsx | 6 +++--- tgui/packages/tgui/interfaces/Vending.tsx | 7 ++++--- tgui/packages/tgui/interfaces/VotePanel.tsx | 6 +++--- tgui/packages/tgui/package.json | 1 + tgui/webpack.config.js | 2 +- tgui/yarn.lock | 11 +++++++++++ 13 files changed, 42 insertions(+), 29 deletions(-) diff --git a/tgui/packages/tgui/interfaces/AccountingConsole.tsx b/tgui/packages/tgui/interfaces/AccountingConsole.tsx index f737234fc6a..92124bc38ef 100644 --- a/tgui/packages/tgui/interfaces/AccountingConsole.tsx +++ b/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 = { diff --git a/tgui/packages/tgui/interfaces/AirAlarm.tsx b/tgui/packages/tgui/interfaces/AirAlarm.tsx index bacfe259fe1..448d233d368 100644 --- a/tgui/packages/tgui/interfaces/AirAlarm.tsx +++ b/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, diff --git a/tgui/packages/tgui/interfaces/Autolathe.tsx b/tgui/packages/tgui/interfaces/Autolathe.tsx index cf110806830..67f707476fe 100644 --- a/tgui/packages/tgui/interfaces/Autolathe.tsx +++ b/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'; diff --git a/tgui/packages/tgui/interfaces/CameraConsole.tsx b/tgui/packages/tgui/interfaces/CameraConsole.tsx index 3dafe1240df..f28c308f1b5 100644 --- a/tgui/packages/tgui/interfaces/CameraConsole.tsx +++ b/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 = { diff --git a/tgui/packages/tgui/interfaces/ChemDispenser.tsx b/tgui/packages/tgui/interfaces/ChemDispenser.tsx index 2bb50df59de..3e0174a3b2f 100644 --- a/tgui/packages/tgui/interfaces/ChemDispenser.tsx +++ b/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'; diff --git a/tgui/packages/tgui/interfaces/CrewConsole.tsx b/tgui/packages/tgui/interfaces/CrewConsole.tsx index 52af3eaff43..7394d9964fd 100644 --- a/tgui/packages/tgui/interfaces/CrewConsole.tsx +++ b/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'; diff --git a/tgui/packages/tgui/interfaces/Fabricator.tsx b/tgui/packages/tgui/interfaces/Fabricator.tsx index 05119076180..9c50cf973b3 100644 --- a/tgui/packages/tgui/interfaces/Fabricator.tsx +++ b/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'; diff --git a/tgui/packages/tgui/interfaces/QuantumConsole.tsx b/tgui/packages/tgui/interfaces/QuantumConsole.tsx index bba1d858019..c42a7ce9402 100644 --- a/tgui/packages/tgui/interfaces/QuantumConsole.tsx +++ b/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'; diff --git a/tgui/packages/tgui/interfaces/Vending.tsx b/tgui/packages/tgui/interfaces/Vending.tsx index 2f8cd42dade..6db6ec962d3 100644 --- a/tgui/packages/tgui/interfaces/Vending.tsx +++ b/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; diff --git a/tgui/packages/tgui/interfaces/VotePanel.tsx b/tgui/packages/tgui/interfaces/VotePanel.tsx index 2cb9c91ff82..949751f2226 100644 --- a/tgui/packages/tgui/interfaces/VotePanel.tsx +++ b/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 { diff --git a/tgui/packages/tgui/package.json b/tgui/packages/tgui/package.json index efe74af8123..a9ab77fac45 100644 --- a/tgui/packages/tgui/package.json +++ b/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:*" } diff --git a/tgui/webpack.config.js b/tgui/webpack.config.js index fa1782eb073..6ff3d1bf4a0 100644 --- a/tgui/webpack.config.js +++ b/tgui/webpack.config.js @@ -60,7 +60,7 @@ module.exports = (env = {}, argv) => { ], }, { - test: /\.scss$/, + test: /\.(s)?css$/, use: [ { loader: ExtractCssPlugin.loader, diff --git a/tgui/yarn.lock b/tgui/yarn.lock index 1caeb0d24e8..5421adc8057 100644 --- a/tgui/yarn.lock +++ b/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