[MIRROR] Removes grid usage + heavy refactors (#1940)

* Removes grid usage + heavy refactors (#82571) ## About The Pull Request Grid has been deprecated for quite some time and we still use it. I won't completely remove the component, this way downstreams won't immediately suffer, but I can remove it from usage. Some of these UIs had issues with them and as a hobby project I've refactored them into typescript / rebuilt them. Airlock electronics, for instance, looks substantially better. <details> <summary>before/after as requested</summary> current airlock electronics scrolls into oblivion ![6RJ29HCPob](https://github.com/tgstation/tgstation/assets/42397676/ba82bc20-40fa-4af0-b709-7c8846c25652) updated ![Screenshot 2024-04-11 164321](https://github.com/tgstation/tgstation/assets/42397676/05507e06-6305-4175-8476-778c345f02c8) </details> ## Why It's Good For The Game Code improvement + probably UI bug fixes ## Changelog :cl: fix: Airlock electronics and other access-config type UIs should look much better. /:cl: * Removes grid usage + heavy refactors * Updates our UIs to get rid of grid usage --------- Co-authored-by: Jeremiah <[email protected]> Co-authored-by: Mal <[email protected]>
Fluffy-Frontier · Apr 12, 2024 · 29f5312 · 29f5312
1 parent d8de46f
commit 29f5312
Show file tree

Hide file tree

Showing 25 changed files with 1,463 additions and 1,251 deletions.
diff --git a/tgui/packages/tgui/components/Grid.jsx b/tgui/packages/tgui/components/Grid.jsx
diff --git a/tgui/packages/tgui/components/Grid.tsx b/tgui/packages/tgui/components/Grid.tsx
@@ -0,0 +1,44 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { PropsWithChildren } from 'react';
+
+import { logger } from '../logging';
+import { BoxProps } from './Box';
+import { Table } from './Table';
+
+/** @deprecated Do not use. Use stack instead. */
+export function Grid(props: PropsWithChildren<BoxProps>) {
+  const { children, ...rest } = props;
+  logger.error('Grid component is deprecated. Use a Stack instead.');
+  return (
+    <Table {...rest}>
+      <Table.Row>{children}</Table.Row>
+    </Table>
+  );
+}
+
+type Props = Partial<{
+  /** Width of the column in percentage. */
+  size: number;
+}> &
+  BoxProps;
+
+/** @deprecated Do not use. Use stack instead. */
+export function GridColumn(props: Props) {
+  const { size = 1, style, ...rest } = props;
+  return (
+    <Table.Cell
+      style={{
+        width: size + '%',
+        ...style,
+      }}
+      {...rest}
+    />
+  );
+}
+
+Grid.Column = GridColumn;
diff --git a/tgui/packages/tgui/components/Table.tsx b/tgui/packages/tgui/components/Table.tsx
@@ -64,6 +64,8 @@ type CellProps = Partial<{
   colSpan: number;
   /** Whether this is a header cell. */
   header: boolean;
+  /** Rows for this cell to expand, assuming there is room. */
+  rowSpan: number;
 }> &
   BoxProps;
 

diff --git a/tgui/packages/tgui/interfaces/AirlockElectronics.tsx b/tgui/packages/tgui/interfaces/AirlockElectronics.tsx
@@ -1,21 +1,31 @@
 import { BooleanLike } from 'common/react';
 
 import { useBackend } from '../backend';
-import { Button, Input, LabeledList, Section } from '../components';
+import { Button, Input, LabeledList, Section, Stack } from '../components';
 import { Window } from '../layouts';
-import { AccessConfig } from './common/AccessConfig';
+import { AccessConfig, Region } from './common/AccessConfig';
 
 type Data = {
+  accesses: string[];
   oneAccess: BooleanLike;
-  unres_direction: number;
-  passedName: string;
   passedCycleId: number;
-  regions: string[];
-  accesses: string[];
+  passedName: string;
+  regions: Region[];
   shell: BooleanLike;
+  unres_direction: number;
 };
 
-export const AirLockMainSection = (props) => {
+export function AirlockElectronics(props) {
+  return (
+    <Window width={420} height={485}>
+      <Window.Content>
+        <AirLockMainSection />
+      </Window.Content>
+    </Window>
+  );
+}
+
+export function AirLockMainSection(props) {
   const { act, data } = useBackend<Data>();
   const {
     accesses = [],
@@ -28,123 +38,125 @@ export const AirLockMainSection = (props) => {
   } = data;
 
   return (
-    <Section title="Main">
-      <LabeledList>
-        <LabeledList.Item label="Integrated Circuit Shell">
-          <Button.Checkbox
-            content="Shell"
-            checked={shell}
-            onClick={() => {
-              act('set_shell', { on: !shell });
-            }}
-            tooltip="Whether this airlock can have an integrated circuit placed inside of it or not."
-          />
-        </LabeledList.Item>
-        <LabeledList.Item label="Access Required">
-          <Button
-            icon={oneAccess ? 'unlock' : 'lock'}
-            content={oneAccess ? 'One' : 'All'}
-            onClick={() => act('one_access')}
-          />
-        </LabeledList.Item>
-        <LabeledList.Item label="Unrestricted Access">
-          <Button
-            icon={unres_direction & 1 ? 'check-square-o' : 'square-o'}
-            content="North"
-            selected={unres_direction & 1}
-            onClick={() =>
-              act('direc_set', {
-                unres_direction: '1',
-              })
-            }
-          />
-          <Button
-            icon={unres_direction & 2 ? 'check-square-o' : 'square-o'}
-            content="South"
-            selected={unres_direction & 2}
-            onClick={() =>
-              act('direc_set', {
-                unres_direction: '2',
-              })
-            }
-          />
-          <Button
-            icon={unres_direction & 4 ? 'check-square-o' : 'square-o'}
-            content="East"
-            selected={unres_direction & 4}
-            onClick={() =>
-              act('direc_set', {
-                unres_direction: '4',
-              })
-            }
-          />
-          <Button
-            icon={unres_direction & 8 ? 'check-square-o' : 'square-o'}
-            content="West"
-            selected={unres_direction & 8}
-            onClick={() =>
-              act('direc_set', {
-                unres_direction: '8',
-              })
-            }
-          />
-        </LabeledList.Item>
-        <LabeledList.Item label="Airlock Name">
-          <Input
-            fluid
-            maxLength={30}
-            value={passedName}
-            onChange={(e, value) =>
-              act('passedName', {
-                passedName: value,
-              })
-            }
-          />
-        </LabeledList.Item>
-        <LabeledList.Item label="Cycling Id">
-          <Input
-            fluid
-            maxLength={30}
-            value={passedCycleId}
-            onChange={(e, value) =>
-              act('passedCycleId', {
-                passedCycleId: value,
-              })
-            }
-          />
-        </LabeledList.Item>
-      </LabeledList>
-      <AccessConfig
-        accesses={regions}
-        selectedList={accesses}
-        accessMod={(ref) =>
-          act('set', {
-            access: ref,
-          })
-        }
-        grantAll={() => act('grant_all')}
-        denyAll={() => act('clear_all')}
-        grantDep={(ref) =>
-          act('grant_region', {
-            region: ref,
-          })
-        }
-        denyDep={(ref) =>
-          act('deny_region', {
-            region: ref,
-          })
-        }
-      />
-    </Section>
-  );
-};
-
-export const AirlockElectronics = (props) => {
-  return (
-    <Window width={420} height={485}>
-      <Window.Content>
-        <AirLockMainSection />
-      </Window.Content>
-    </Window>
+    <Stack fill vertical>
+      <Stack.Item>
+        <Section fill>
+          <LabeledList>
+            <LabeledList.Item label="Integrated Circuit Shell">
+              <Button.Checkbox
+                checked={shell}
+                onClick={() => {
+                  act('set_shell', { on: !shell });
+                }}
+                tooltip="Whether this airlock can have an integrated circuit placed inside of it or not."
+              >
+                Shell
+              </Button.Checkbox>
+            </LabeledList.Item>
+            <LabeledList.Item label="Access Required">
+              <Button
+                icon={oneAccess ? 'unlock' : 'lock'}
+                onClick={() => act('one_access')}
+              >
+                {oneAccess ? 'One' : 'All'}
+              </Button>
+            </LabeledList.Item>
+            <LabeledList.Item label="Unrestricted Access">
+              <Button
+                icon={unres_direction & 1 ? 'check-square-o' : 'square-o'}
+                selected={unres_direction & 1}
+                onClick={() =>
+                  act('direc_set', {
+                    unres_direction: '1',
+                  })
+                }
+              >
+                North
+              </Button>
+              <Button
+                icon={unres_direction & 2 ? 'check-square-o' : 'square-o'}
+                selected={unres_direction & 2}
+                onClick={() =>
+                  act('direc_set', {
+                    unres_direction: '2',
+                  })
+                }
+              >
+                South
+              </Button>
+              <Button
+                icon={unres_direction & 4 ? 'check-square-o' : 'square-o'}
+                selected={unres_direction & 4}
+                onClick={() =>
+                  act('direc_set', {
+                    unres_direction: '4',
+                  })
+                }
+              >
+                East
+              </Button>
+              <Button
+                icon={unres_direction & 8 ? 'check-square-o' : 'square-o'}
+                selected={unres_direction & 8}
+                onClick={() =>
+                  act('direc_set', {
+                    unres_direction: '8',
+                  })
+                }
+              >
+                West
+              </Button>
+            </LabeledList.Item>
+            <LabeledList.Item label="Airlock Name">
+              <Input
+                fluid
+                maxLength={30}
+                value={passedName}
+                onChange={(e, value) =>
+                  act('passedName', {
+                    passedName: value,
+                  })
+                }
+              />
+            </LabeledList.Item>
+            <LabeledList.Item label="Cycling Id">
+              <Input
+                fluid
+                maxLength={30}
+                value={passedCycleId}
+                onChange={(e, value) =>
+                  act('passedCycleId', {
+                    passedCycleId: value,
+                  })
+                }
+              />
+            </LabeledList.Item>
+          </LabeledList>
+        </Section>
+      </Stack.Item>
+      <Stack.Item grow>
+        <AccessConfig
+          accesses={regions}
+          selectedList={accesses}
+          accessMod={(ref) =>
+            act('set', {
+              access: ref,
+            })
+          }
+          grantAll={() => act('grant_all')}
+          denyAll={() => act('clear_all')}
+          grantDep={(ref) =>
+            act('grant_region', {
+              region: ref,
+            })
+          }
+          denyDep={(ref) =>
+            act('deny_region', {
+              region: ref,
+            })
+          }
+        />
+      </Stack.Item>
+    </Stack>
   );
-};
+}
diff --git a/tgui/packages/tgui/interfaces/CircuitAccessChecker.tsx b/tgui/packages/tgui/interfaces/CircuitAccessChecker.tsx
@@ -3,11 +3,11 @@ import { BooleanLike } from 'common/react';
 import { useBackend } from '../backend';
 import { Button, LabeledList } from '../components';
 import { Window } from '../layouts';
-import { AccessConfig } from './common/AccessConfig';
+import { AccessConfig, Region } from './common/AccessConfig';
 
 type Data = {
   oneAccess: BooleanLike;
-  regions: string[];
+  regions: Region[];
   accesses: string[];
 };
 
@@ -28,8 +28,8 @@ export const CircuitAccessChecker = (props) => {
           </LabeledList.Item>
         </LabeledList>
         <AccessConfig
-          accesses={regions || []}
-          selectedList={accesses || []}
+          accesses={regions}
+          selectedList={accesses}
           accessMod={(ref) =>
             act('set', {
               access: ref,