From a1313809aeb396113bc343858571002f67904bb0 Mon Sep 17 00:00:00 2001 From: Jeremiah <42397676+jlsnow301@users.noreply.github.com> Date: Thu, 11 Dec 2025 09:28:55 -0800 Subject: [PATCH] Rewrites tgui kitchensink into something usable (#94400) --- tgui/bun.lock | 18 +++ tgui/package.json | 26 ++-- tgui/packages/tgui/constants/theme.ts | 31 +++++ tgui/packages/tgui/debug/KitchenSink.tsx | 123 ++++++++++++------ tgui/packages/tgui/package.json | 1 + .../packages/tgui/stories/ByondUi.stories.tsx | 63 --------- .../packages/tgui/stories/Storage.stories.tsx | 42 ------ tgui/packages/tgui/stories/Themes.stories.tsx | 28 ---- tgui/packages/tgui/stories/common.tsx | 19 --- 9 files changed, 147 insertions(+), 204 deletions(-) create mode 100644 tgui/packages/tgui/constants/theme.ts delete mode 100644 tgui/packages/tgui/stories/ByondUi.stories.tsx delete mode 100644 tgui/packages/tgui/stories/Storage.stories.tsx delete mode 100644 tgui/packages/tgui/stories/Themes.stories.tsx delete mode 100644 tgui/packages/tgui/stories/common.tsx diff --git a/tgui/bun.lock b/tgui/bun.lock index acef62558fd..d5ca5c7549e 100644 --- a/tgui/bun.lock +++ b/tgui/bun.lock @@ -1,5 +1,6 @@ { "lockfileVersion": 1, + "configVersion": 0, "workspaces": { "": { "name": "tgui-workspace", @@ -49,6 +50,7 @@ "marked-smartypants": "^1.1.9", "react": "^19.1.0", "react-dom": "^19.1.0", + "react-json-tree": "^0.20.0", "tgui-core": "^5.3.1", "tgui-dev-server": "workspace:*", }, @@ -221,6 +223,8 @@ "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="], + "@types/lodash": ["@types/lodash@4.17.21", "", {}, "sha512-FOvQ0YPD5NOfPgMzJihoT+Za5pdkDJWcbpuj1DjaKZIr/gxodQjY/uWEFlTNqW2ugXHUiL8lRQgw63dzKHZdeQ=="], + "@types/mime": ["@types/mime@1.3.5", "", {}, "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w=="], "@types/node": ["@types/node@24.0.12", "", { "dependencies": { "undici-types": "~7.8.0" } }, "sha512-LtOrbvDf5ndC9Xi+4QZjVL0woFymF/xSTKZKPgrrl7H7XoeDvnD+E2IclKVDyaK9UM756W/3BXqSU+JEHopA9g=="], @@ -353,10 +357,14 @@ "cliui": ["cliui@8.0.1", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.1", "wrap-ansi": "^7.0.0" } }, "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ=="], + "color": ["color@4.2.3", "", { "dependencies": { "color-convert": "^2.0.1", "color-string": "^1.9.0" } }, "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A=="], + "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="], "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="], + "color-string": ["color-string@1.9.1", "", { "dependencies": { "color-name": "^1.0.0", "simple-swizzle": "^0.2.2" } }, "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg=="], + "colorette": ["colorette@2.0.20", "", {}, "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w=="], "colorjs.io": ["colorjs.io@0.5.2", "", {}, "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw=="], @@ -605,6 +613,8 @@ "ipaddr.js": ["ipaddr.js@2.2.0", "", {}, "sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA=="], + "is-arrayish": ["is-arrayish@0.3.4", "", {}, "sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA=="], + "is-binary-path": ["is-binary-path@2.1.0", "", { "dependencies": { "binary-extensions": "^2.0.0" } }, "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw=="], "is-core-module": ["is-core-module@2.16.1", "", { "dependencies": { "hasown": "^2.0.2" } }, "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w=="], @@ -655,6 +665,8 @@ "lodash": ["lodash@4.17.21", "", {}, "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="], + "lodash-es": ["lodash-es@4.17.21", "", {}, "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="], + "lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="], "lru-cache": ["lru-cache@11.1.0", "", {}, "sha512-QIXZUBJUx+2zHUdQujWejBkcD9+cs94tLn0+YL8UrCh+D5sCXZ4c7LaEH48pNwRY3MLDgqUFyhlCyjJPf1WP0A=="], @@ -821,8 +833,12 @@ "react": ["react@19.1.0", "", {}, "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg=="], + "react-base16-styling": ["react-base16-styling@0.10.0", "", { "dependencies": { "@types/lodash": "^4.17.0", "color": "^4.2.3", "csstype": "^3.1.3", "lodash-es": "^4.17.21" } }, "sha512-H1k2eFB6M45OaiRru3PBXkuCcn2qNmx+gzLb4a9IPMR7tMH8oBRXU5jGbPDYG1Hz+82d88ED0vjR8BmqU3pQdg=="], + "react-dom": ["react-dom@19.1.0", "", { "dependencies": { "scheduler": "^0.26.0" }, "peerDependencies": { "react": "^19.1.0" } }, "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g=="], + "react-json-tree": ["react-json-tree@0.20.0", "", { "dependencies": { "@types/lodash": "^4.17.15", "react-base16-styling": "^0.10.0" }, "peerDependencies": { "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-h+f9fUNAxzBx1rbrgUF7+zSWKGHDtt2VPYLErIuB0JyKGnWgFMM21ksqQyb3EXwXNnoMW2rdE5kuAaubgGOx2Q=="], + "readable-stream": ["readable-stream@3.6.2", "", { "dependencies": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", "util-deprecate": "^1.0.1" } }, "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA=="], "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="], @@ -919,6 +935,8 @@ "signal-exit": ["signal-exit@4.1.0", "", {}, "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw=="], + "simple-swizzle": ["simple-swizzle@0.2.4", "", { "dependencies": { "is-arrayish": "^0.3.1" } }, "sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw=="], + "sirv": ["sirv@2.0.4", "", { "dependencies": { "@polka/url": "^1.0.0-next.24", "mrmime": "^2.0.0", "totalist": "^3.0.0" } }, "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ=="], "smart-buffer": ["smart-buffer@4.2.0", "", {}, "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg=="], diff --git a/tgui/package.json b/tgui/package.json index e3afee1f779..0f43cb06c2b 100644 --- a/tgui/package.json +++ b/tgui/package.json @@ -1,18 +1,6 @@ { - "private": true, "name": "tgui-workspace", "version": "6.0.0", - "packageManager": "bun@1.2.16", - "workspaces": [ - "packages/*" - ], - "scripts": { - "tgui:analyze": "rspack --analyze", - "tgui:build": "rspack build", - "tgui:dev": "bun --smol packages/tgui-dev-server/index.ts", - "tgui:test": "bun test", - "tgui:tsc": "tsc" - }, "devDependencies": { "@happy-dom/global-registrator": "^17.4.7", "@rspack/cli": "^1.4.5", @@ -26,5 +14,17 @@ "sass-embedded": "^1.89.2", "sass-loader": "^16.0.5", "typescript": "^5.8.3" - } + }, + "packageManager": "bun@1.2.16", + "private": true, + "scripts": { + "tgui:analyze": "rspack --analyze", + "tgui:build": "rspack build", + "tgui:dev": "bun --smol packages/tgui-dev-server/index.ts", + "tgui:test": "bun test", + "tgui:tsc": "tsc" + }, + "workspaces": [ + "packages/*" + ] } diff --git a/tgui/packages/tgui/constants/theme.ts b/tgui/packages/tgui/constants/theme.ts new file mode 100644 index 00000000000..6b77ffd84d9 --- /dev/null +++ b/tgui/packages/tgui/constants/theme.ts @@ -0,0 +1,31 @@ +/** + * TGUI Base16 Theme + * Based on TGUI color scheme defined in css variables + * @see https://github.com/chriskempson/base16 + * @see https://github.com/tgstation/tgui-core/blob/main/styles/vars-colors.scss + */ +export const tgui16 = { + scheme: 'ntos16', + author: 'Aleksej Komarov et al., (https://github.com/tgstation)', + // Backgrounds / UI surfaces + base00: '#1A1A1A', + base01: '#313234', + base02: '#3a3a36', + base03: '#6b6b5b', + + // Foreground / text + base04: '#a59f85', + base05: '#f8f8f2', // default text (near white) + base06: '#f5f4f1', + base07: '#f9f8f5', + + // Accent colors + base08: '#f92672', + base09: '#fd971f', + base0A: '#f4bf75', + base0B: '#5BA626', // --color-good + base0C: '#a1efe4', + base0D: '#47739E', // blue primary + base0E: '#ae81ff', + base0F: '#cc6633', +} as const; diff --git a/tgui/packages/tgui/debug/KitchenSink.tsx b/tgui/packages/tgui/debug/KitchenSink.tsx index 3bfa77e513c..ae63ddd0633 100644 --- a/tgui/packages/tgui/debug/KitchenSink.tsx +++ b/tgui/packages/tgui/debug/KitchenSink.tsx @@ -4,62 +4,107 @@ * @license MIT */ import { useState } from 'react'; -import { Section, Stack, Tabs } from 'tgui-core/components'; - +import { JSONTree } from 'react-json-tree'; +import { Divider, NoticeBox, Section, Stack, Tabs } from 'tgui-core/components'; +import { useBackend } from '../backend'; +import { tgui16 } from '../constants/theme'; import { Pane, Window } from '../layouts'; -const r = import.meta.webpackContext('../', { - recursive: false, - include: /\.stories\.tsx$/, -}); +type Props = { + panel?: boolean; +}; -/** - * @returns {{ - * meta: { - * title: string, - * render: () => any, - * }, - * }[]} - */ -function getStories() { - return r.keys().map((path) => r(path)); +enum Tab { + Config = 'config', + Data = 'data', + Shared = 'shared', + Chunks = 'outgoingPayloadQueues', + Components = 'components', } -export function KitchenSink(props) { +const tabs = [ + { name: 'Config', value: Tab.Config }, + { name: 'Data', value: Tab.Data }, + { name: 'Shared', value: Tab.Shared }, + { name: 'Chunks', value: Tab.Chunks }, +] as const; + +export function KitchenSink(props: Props) { const { panel } = props; - const [pageIndex, setPageIndex] = useState(0); - const stories = getStories(); - if (stories.length === 0) { - return
Loading stories...
; - } + const [activeTab, setActiveTab] = useState(Tab.Config); - const story = stories[pageIndex]; const Layout = panel ? Pane : Window; return ( - -
- - {stories.map((story, i) => ( - setPageIndex(i)} - > - {story.meta.title} - - ))} - -
+ + + {tabs.map((tab) => ( + setActiveTab(tab.value)} + > + {tab.name} + + ))} + + setActiveTab(Tab.Components)} + > + Components + + + + + {activeTab === Tab.Components ? ( + + ) : ( + + )} - {story.meta.render()} ); } + +function ComponentsPage() { + return ( +
+ All component stories have been moved. + View them here{' '} + + https://tgstation.github.io/tgui-core + +
+ ); +} + +type TreeProps = { + tab: Tab; +}; + +function TreePage(props: TreeProps) { + const { tab } = props; + + const backend = useBackend(); + const inView = backend[tab]; + + return ( +
+
+ +
+
+ ); +} diff --git a/tgui/packages/tgui/package.json b/tgui/packages/tgui/package.json index e4f1037775f..c33da97bede 100644 --- a/tgui/packages/tgui/package.json +++ b/tgui/packages/tgui/package.json @@ -14,6 +14,7 @@ "marked-smartypants": "^1.1.9", "react": "^19.1.0", "react-dom": "^19.1.0", + "react-json-tree": "^0.20.0", "tgui-core": "^5.3.1", "tgui-dev-server": "workspace:*" }, diff --git a/tgui/packages/tgui/stories/ByondUi.stories.tsx b/tgui/packages/tgui/stories/ByondUi.stories.tsx deleted file mode 100644 index 3fbe5b4f632..00000000000 --- a/tgui/packages/tgui/stories/ByondUi.stories.tsx +++ /dev/null @@ -1,63 +0,0 @@ -/** - * @file - * @copyright 2021 Aleksej Komarov - * @license MIT - */ - -import { useState } from 'react'; -import { Button, ByondUi, Section, TextArea } from 'tgui-core/components'; - -import { logger } from '../logging'; - -export const meta = { - title: 'ByondUi', - render: () => , -}; - -function Story() { - const [code, setCode] = useState( - `Byond.winset('${Byond.windowId}', {\n 'is-visible': true,\n})`, - ); - - return ( - <> -
- -
-
- setTimeout(() => { - try { - const result = new Function(`return (${code})`)(); - if (result?.then) { - logger.log('Promise'); - result.then(logger.log); - } else { - logger.log(result); - } - } catch (err) { - logger.log(err); - } - }) - } - > - Evaluate - - } - > - -
- - ); -} diff --git a/tgui/packages/tgui/stories/Storage.stories.tsx b/tgui/packages/tgui/stories/Storage.stories.tsx deleted file mode 100644 index c5234a1e31d..00000000000 --- a/tgui/packages/tgui/stories/Storage.stories.tsx +++ /dev/null @@ -1,42 +0,0 @@ -/** - * @file - * @copyright 2021 Aleksej Komarov - * @license MIT - */ - -import { storage } from 'common/storage'; -import { Button, LabeledList, NoticeBox, Section } from 'tgui-core/components'; - -export const meta = { - title: 'Storage', - render: () => , -}; - -const Story = (props) => { - if (!window.localStorage) { - return Local storage is not available.; - } - - return ( -
{ - localStorage.clear(); - storage.clear(); - }} - > - Clear - - } - > - - - {localStorage.length} - - -
- ); -}; diff --git a/tgui/packages/tgui/stories/Themes.stories.tsx b/tgui/packages/tgui/stories/Themes.stories.tsx deleted file mode 100644 index c73b2408fae..00000000000 --- a/tgui/packages/tgui/stories/Themes.stories.tsx +++ /dev/null @@ -1,28 +0,0 @@ -/** - * @file - * @copyright 2021 Aleksej Komarov - * @license MIT - */ - -import { Input, LabeledList, Section } from 'tgui-core/components'; - -import { useLocalState } from '../backend'; - -export const meta = { - title: 'Themes', - render: () => , -}; - -function Story() { - const [theme, setTheme] = useLocalState('kitchenSinkTheme', ''); - - return ( -
- - - - - -
- ); -} diff --git a/tgui/packages/tgui/stories/common.tsx b/tgui/packages/tgui/stories/common.tsx deleted file mode 100644 index 3810dc39272..00000000000 --- a/tgui/packages/tgui/stories/common.tsx +++ /dev/null @@ -1,19 +0,0 @@ -/** - * @file - * @copyright 2021 Aleksej Komarov - * @license MIT - */ - -import { Box } from 'tgui-core/components'; - -export function BoxWithSampleText(props) { - return ( - - Jackdaws love my big sphinx of quartz. - - The wide electrification of the southern provinces will give a powerful - impetus to the growth of agriculture. - - - ); -}