Merge branch 'main' into ChromaticSetup

tgstation · Nov 22, 2024 · 7fef656 · 7fef656
2 parents 99fbdc6 + 481e964
commit 7fef656
Show file tree

Hide file tree

Showing 12 changed files with 219 additions and 118 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -8,6 +8,7 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@chromatic-com/storybook',
     '@storybook/addon-interactions',
+    '@storybook/addon-console',
     {
       name: 'storybook-addon-sass-postcss',
       options: {

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1,14 @@
+<script type="text/javascript">
+  var Byond = (window.Byond = {
+    command: function (command) {
+      console.log("Byond.command", command);
+    },
+    winget: function (command) {
+      console.log("Byond.winget", command);
+      return Promise.resolve("FAKE VALUE");
+    },
+    winset: function (command) {
+      console.log("Byond.winset", command);
+    },
+  });
+</script>
diff --git a/dist/components/ImageButton.js b/dist/components/ImageButton.js
@@ -1,56 +1,56 @@
-import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
 import { classes as l } from "../common/react.js";
-import { computeBoxProps as B } from "./Box.js";
+import { computeBoxProps as A } from "./Box.js";
 import { DmIcon as D } from "./DmIcon.js";
 import { Icon as F } from "./Icon.js";
 import { Image as j } from "./Image.js";
-import { Stack as I } from "./Stack.js";
+import { Stack as y } from "./Stack.js";
 import { Tooltip as z } from "./Tooltip.js";
-function H(k) {
+function H(N) {
   const {
-    asset: h,
+    asset: f,
     base64: r,
     buttons: m,
-    buttonsAlt: g,
+    buttonsAlt: h,
     children: i,
-    className: w,
+    className: k,
     color: e,
     disabled: a,
-    dmFallback: b,
-    dmIcon: x,
-    dmIconState: C,
+    dmFallback: I,
+    dmIcon: b,
+    dmIconState: x,
     fluid: c,
     imageSize: o = 64,
     imageSrc: d,
     onClick: s,
-    onRightClick: p,
-    selected: _,
-    title: $,
-    tooltip: y,
-    tooltipPosition: v,
-    ...S
-  } = k;
-  function N(n, A) {
-    return /* @__PURE__ */ t(I, { height: `${o}px`, width: `${o}px`, children: /* @__PURE__ */ t(I.Item, { grow: !0, textAlign: "center", align: "center", children: /* @__PURE__ */ t(
+    onRightClick: u,
+    selected: B,
+    title: C,
+    tooltip: _,
+    tooltipPosition: w,
+    ...v
+  } = N;
+  function $(n, S) {
+    return /* @__PURE__ */ t(y, { height: `${o}px`, width: `${o}px`, children: /* @__PURE__ */ t(y.Item, { grow: !0, textAlign: "center", align: "center", children: /* @__PURE__ */ t(
       F,
       {
-        spin: A,
+        spin: S,
         name: n,
         color: "gray",
         style: { fontSize: `calc(${o}px * 0.75)` }
       }
     ) }) });
   }
-  let u = /* @__PURE__ */ f(
+  let p = /* @__PURE__ */ g(
     "div",
     {
       className: l([
         "container",
         m && "hasButtons",
-        !s && !p && "noAction",
-        _ && "selected",
-        a && "disabled",
-        e && typeof e == "string" ? `color__${e}` : "color__default"
+        !s && !u && "noAction",
+        B && "ImageButton--selected",
+        a && "ImageButton--disabled",
+        e && typeof e == "string" ? `ImageButton--color__${e}` : "ImageButton--color__default"
       ]),
       tabIndex: a ? void 0 : 0,
       onClick: (n) => {
@@ -60,64 +60,68 @@ function H(k) {
         n.key === "Enter" && !a && s && s(n);
       },
       onContextMenu: (n) => {
-        n.preventDefault(), !a && p && p(n);
+        n.preventDefault(), !a && u && u(n);
       },
       style: { width: c ? "auto" : `calc(${o}px + 0.5em + 2px)` },
       children: [
-        /* @__PURE__ */ t("div", { className: "image", children: r || h || d ? /* @__PURE__ */ t(
+        /* @__PURE__ */ t("div", { className: "image", children: r || f || d ? /* @__PURE__ */ t(
           j,
           {
-            className: l(!r && !d && h || []),
+            className: l(!r && !d && f || []),
             src: r ? `data:image/png;base64,${r}` : d,
             height: `${o}px`,
             width: `${o}px`
           }
-        ) : x && C ? /* @__PURE__ */ t(
+        ) : b && x ? /* @__PURE__ */ t(
           D,
           {
-            icon: x,
-            icon_state: C,
-            fallback: b || N("spinner", !0),
+            icon: b,
+            icon_state: x,
+            fallback: I || $("spinner", !0),
             height: `${o}px`,
             width: `${o}px`
           }
-        ) : N("question", !1) }),
-        c ? /* @__PURE__ */ f("div", { className: "info", children: [
-          $ && /* @__PURE__ */ t("span", { className: l(["title", i && "divider"]), children: $ }),
+        ) : $("question", !1) }),
+        c ? /* @__PURE__ */ g("div", { className: "info", children: [
+          C && /* @__PURE__ */ t("span", { className: l(["title", i && "divider"]), children: C }),
           i && /* @__PURE__ */ t("span", { className: "contentFluid", children: i })
         ] }) : i && /* @__PURE__ */ t(
           "span",
           {
             className: l([
               "content",
-              _ && "contentSelected",
-              a && "contentDisabled",
-              e && typeof e == "string" ? `contentColor__${e}` : "contentColor__default"
+              B && "ImageButton--contentSelected",
+              a && "ImageButton--contentDisabled",
+              e && typeof e == "string" ? `ImageButton--contentColor__${e}` : "ImageButton--contentColor__default"
             ]),
             children: i
           }
         )
       ]
     }
   );
-  return y && (u = /* @__PURE__ */ t(z, { content: y, position: v, children: u })), /* @__PURE__ */ f(
+  return _ && (p = /* @__PURE__ */ t(z, { content: _, position: w, children: p })), /* @__PURE__ */ g(
     "div",
     {
-      className: l(["ImageButton", c && "fluid", w]),
-      ...B(S),
+      className: l([
+        "ImageButton",
+        c && "ImageButton--fluid",
+        k
+      ]),
+      ...A(v),
       children: [
-        u,
+        p,
         m && /* @__PURE__ */ t(
           "div",
           {
             className: l([
               "buttonsContainer",
-              g && "buttonsAltContainer",
+              h && "buttonsAltContainer",
               !i && "buttonsEmpty",
-              c && e && typeof e == "string" ? `buttonsContainerColor__${e}` : c && "buttonsContainerColor__default"
+              c && e && typeof e == "string" ? `ImageButton--buttonsContainerColor__${e}` : c && "ImageButton--buttonsContainerColor__default"
             ]),
             style: {
-              width: g ? `calc(${o}px + 0.5em)` : "auto"
+              width: h ? `calc(${o}px + 0.5em)` : "auto"
             },
             children: m
           }

diff --git a/dist/components/Section.js b/dist/components/Section.js
@@ -7,9 +7,9 @@ function G(m) {
   const {
     buttons: n,
     children: f,
-    className: _,
+    className: S,
     fill: u,
-    fitted: S,
+    fitted: _,
     flexGrow: p,
     noTopPadding: N,
     onScroll: h,
@@ -33,11 +33,11 @@ function G(m) {
       className: a([
         "Section",
         u && "Section--fill",
-        S && "Section--fitted",
+        _ && "Section--fitted",
         c && "Section--scrollable",
         l && "Section--scrollableHorizontal",
-        p && "Section__flex",
-        _,
+        p && "Section--flex",
+        S,
         j(i)
       ]),
       ...z(i),
@@ -51,8 +51,8 @@ function G(m) {
           {
             className: a([
               "Section__content",
-              !!b && "content__stretchContents",
-              !!N && "content__noTopPadding"
+              b && "Section__content--stretchContents",
+              N && "Section__content--noTopPadding"
             ]),
             onScroll: h,
             ref: e,

diff --git a/lib/components/ImageButton.tsx b/lib/components/ImageButton.tsx
@@ -117,11 +117,11 @@ export function ImageButton(props: Props) {
         'container',
         buttons && 'hasButtons',
         !onClick && !onRightClick && 'noAction',
-        selected && 'selected',
-        disabled && 'disabled',
+        selected && 'ImageButton--selected',
+        disabled && 'ImageButton--disabled',
         color && typeof color === 'string'
-          ? `color__${color}`
-          : 'color__default',
+          ? `ImageButton--color__${color}`
+          : 'ImageButton--color__default',
       ])}
       tabIndex={!disabled ? 0 : undefined}
       onClick={(event) => {
@@ -176,11 +176,11 @@ export function ImageButton(props: Props) {
           <span
             className={classes([
               'content',
-              selected && 'contentSelected',
-              disabled && 'contentDisabled',
+              selected && 'ImageButton--contentSelected',
+              disabled && 'ImageButton--contentDisabled',
               color && typeof color === 'string'
-                ? `contentColor__${color}`
-                : 'contentColor__default',
+                ? `ImageButton--contentColor__${color}`
+                : 'ImageButton--contentColor__default',
             ])}
           >
             {children}
@@ -200,7 +200,11 @@ export function ImageButton(props: Props) {
 
   return (
     <div
-      className={classes(['ImageButton', fluid && 'fluid', className])}
+      className={classes([
+        'ImageButton',
+        fluid && 'ImageButton--fluid',
+        className,
+      ])}
       {...computeBoxProps(rest)}
     >
       {buttonContent}
@@ -211,8 +215,8 @@ export function ImageButton(props: Props) {
             buttonsAlt && 'buttonsAltContainer',
             !children && 'buttonsEmpty',
             fluid && color && typeof color === 'string'
-              ? `buttonsContainerColor__${color}`
-              : fluid && 'buttonsContainerColor__default',
+              ? `ImageButton--buttonsContainerColor__${color}`
+              : fluid && 'ImageButton--buttonsContainerColor__default',
           ])}
           style={{
             width: buttonsAlt ? `calc(${imageSize}px + 0.5em)` : 'auto',

diff --git a/lib/components/Input.tsx b/lib/components/Input.tsx
@@ -50,20 +50,24 @@ type OptionalProps = Partial<{
   /** Fires when user is 'done typing': Clicked out, blur, enter key */
   onChange: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
   /** Fires once the enter key is pressed */
-  onEnter?: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
+  onEnter: (event: SyntheticEvent<HTMLInputElement>, value: string) => void;
   /** Fires once the escape key is pressed */
   onEscape: (event: SyntheticEvent<HTMLInputElement>) => void;
   /** The placeholder text when everything is cleared */
   placeholder: string;
   /** Clears the input value on enter */
   selfClear: boolean;
+  /** Auto-updates the input value on props change, ie, data from Byond */
+  updateOnPropsChange: boolean;
   /** The state variable of the input. */
   value: string | number;
 }>;
 
-type Props = OptionalProps & ConditionalProps & BoxProps;
+type Props = OptionalProps & ConditionalProps & Omit<BoxProps, 'children'>;
 
-export function toInputValue(value: string | number | undefined): string {
+type InputValue = string | number | undefined;
+
+export function toInputValue(value: InputValue): string {
   return typeof value !== 'number' && typeof value !== 'string'
     ? ''
     : String(value);
@@ -93,11 +97,11 @@ export function Input(props: Props) {
     onInput,
     placeholder,
     selfClear,
+    updateOnPropsChange,
     value,
     ...rest
   } = props;
 
-  // The ref to the input field
   const inputRef = useRef<HTMLInputElement>(null);
 
   function handleInput(event: SyntheticEvent<HTMLInputElement>) {
@@ -133,38 +137,44 @@ export function Input(props: Props) {
     }
   }
 
-  /** Focuses the input on mount */
-  useEffect(() => {
+  function setValue(newValue: InputValue) {
     const input = inputRef.current;
     if (!input) return;
 
-    const newValue = toInputValue(value);
+    const changed = toInputValue(newValue);
+    if (input.value === changed) return;
+
+    input.value = changed;
+  }
+
+  /** Focuses the input on mount */
+  useEffect(() => {
+    const input = inputRef.current;
 
-    if (input.value !== newValue) input.value = newValue;
+    if (input) {
+      setValue(value);
 
-    if (!autoFocus && !autoSelect) return;
+      const hasFocusOrSelect = autoFocus || autoSelect;
+      const isActive = document.activeElement === input;
 
-    setTimeout(() => {
-      input.focus();
+      if (hasFocusOrSelect && !isActive) {
+        setTimeout(() => {
+          input.focus();
 
-      if (autoSelect) {
-        input.select();
+          if (autoSelect) {
+            input.select();
+          }
+        }, 1);
       }
-    }, 1);
+    }
   }, []);
 
+  /** Updates the initial value on props change */
   useEffect(() => {
-    const input = inputRef.current;
-    if (!input) return;
-
-    if (document.activeElement === input) {
-      return;
+    if (updateOnPropsChange) {
+      setValue(value);
     }
-
-    const newValue = toInputValue(value);
-
-    if (input.value !== newValue) input.value = newValue;
-  });
+  }, [value]);
 
   return (
     <Box