Kitchensink 2 (#22613)

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 <div>Loading stories...</div>;
-  }
+  const [activeTab, setActiveTab] = useState(Tab.Config);
 
-  const story = stories[pageIndex];
   const Layout = panel ? Pane : Window;
 
   return (
     <Layout title="Kitchen Sink" width={600} height={500}>
       <Layout.Content>
         <Stack fill>
-          <Stack.Item>
-            <Section fill fitted>
-              <Tabs vertical>
-                {stories.map((story, i) => (
-                  <Tabs.Tab
-                    key={i}
-                    color="transparent"
-                    selected={i === pageIndex}
-                    onClick={() => setPageIndex(i)}
-                  >
-                    {story.meta.title}
-                  </Tabs.Tab>
-                ))}
-              </Tabs>
-            </Section>
+          <Stack.Item grow>
+            <Tabs vertical>
+              {tabs.map((tab) => (
+                <Tabs.Tab
+                  key={tab.name}
+                  className="candystripe"
+                  selected={activeTab === tab.value}
+                  onClick={() => setActiveTab(tab.value)}
+                >
+                  {tab.name}
+                </Tabs.Tab>
+              ))}
+              <Divider />
+              <Tabs.Tab
+                selected={activeTab === Tab.Components}
+                onClick={() => setActiveTab(Tab.Components)}
+              >
+                Components
+              </Tabs.Tab>
+            </Tabs>
+          </Stack.Item>
+          <Stack.Item grow={4}>
+            {activeTab === Tab.Components ? (
+              <ComponentsPage />
+            ) : (
+              <TreePage tab={activeTab} />
+            )}
           </Stack.Item>
-          <Stack.Item grow>{story.meta.render()}</Stack.Item>
         </Stack>
       </Layout.Content>
     </Layout>
   );
 }
+
+function ComponentsPage() {
+  return (
+    <Section fill>
+      <NoticeBox info>All component stories have been moved.</NoticeBox>
+      View them here{' '}
+      <a href="https://tgstation.github.io/tgui-core">
+        https://tgstation.github.io/tgui-core
+      </a>
+    </Section>
+  );
+}
+
+type TreeProps = {
+  tab: Tab;
+};
+
+function TreePage(props: TreeProps) {
+  const { tab } = props;
+
+  const backend = useBackend();
+  const inView = backend[tab];
+
+  return (
+    <Section
+      fill
+      scrollable
+      title={`${backend.config.interface.name ?? 'TGUI'} data`}
+    >
+      <div style={{ border: 'thin solid var(--color-base)' }}>
+        <JSONTree data={inView} theme={tgui16} />
+      </div>
+    </Section>
+  );
+}

tgui/packages/tgui/debug/middleware.ts

@@ -57,7 +57,7 @@ export function relayMiddleware(store) {
   } else {
     acquireHotKey(KEY_F10);
     globalEvents.on('keydown', (key) => {
-      if (key === KEY_F10) {
+      if (key.code === KEY_F10) {
         store.dispatch(openExternalBrowser());
       }
     });

tgui/packages/tgui/debug/use-debug.ts

@@ -1,7 +1,7 @@
 import { globalEvents } from 'tgui-core/events';
 import { acquireHotKey } from 'tgui-core/hotkeys';
 import { KEY_BACKSPACE, KEY_F11, KEY_F12 } from 'tgui-core/keycodes';
-import { kitchenSinkAtom, store } from '../events/store';
+import { debugLayoutAtom, kitchenSinkAtom, store } from '../events/store';
 
 export function setDebugHotKeys(): void {
   acquireHotKey(KEY_F11);
@@ -12,6 +12,10 @@ export function setDebugHotKeys(): void {
       store.set(kitchenSinkAtom, (prev) => !prev);
     }
 
+    if (evt.code === KEY_F12) {
+      store.set(debugLayoutAtom, (prev) => !prev);
+    }
+
     if (evt.ctrl && evt.alt && evt.code === KEY_BACKSPACE) {
       // NOTE: We need to call this in a timeout, because we need a clean
       // stack in order for this to be a fatal error.