Headless tgui-core (#29)

eslint.config.js

@@ -12,7 +12,7 @@ export default tseslint.config(
   eslint.configs.recommended,
   ...tseslint.configs.recommended,
   {
-    ignores: ['dist/**', 'node_modules/**', 'pnpm-lock.yaml', 'lib/styles/**/*.d.ts'],
+    ignores: ['dist/**', 'node_modules/**', 'pnpm-lock.yaml'],
     plugins: {
       'simple-import-sort': simpleImportSort,
       'unused-imports': unusedImports,
@@ -32,5 +32,5 @@ export default tseslint.config(
       'unused-imports/no-unused-vars': 'off',
     },
   },
-  eslintCongigPrettier,
+  eslintCongigPrettier
 );

lib/common/color.ts

@@ -32,7 +32,7 @@ export class Color {
       this.r - this.r * percent,
       this.g - this.g * percent,
       this.b - this.b * percent,
-      this.a,
+      this.a
     );
   }
 
@@ -49,7 +49,7 @@ export class Color {
     return new Color(
       parseInt(hex.slice(1, 3), 16),
       parseInt(hex.slice(3, 5), 16),
-      parseInt(hex.slice(5, 7), 16),
+      parseInt(hex.slice(5, 7), 16)
     );
   }
 
@@ -61,7 +61,7 @@ export class Color {
       (c2.r - c1.r) * n + c1.r,
       (c2.g - c1.g) * n + c1.g,
       (c2.b - c1.b) * n + c1.b,
-      (c2.a - c1.a) * n + c1.a,
+      (c2.a - c1.a) * n + c1.a
     );
   }
 

lib/common/events.ts

@@ -44,7 +44,7 @@ export const globalEvents = new EventEmitter();
 let ignoreWindowFocus = false;
 
 export const setupGlobalEvents = (
-  options: { ignoreWindowFocus?: boolean } = {},
+  options: { ignoreWindowFocus?: boolean } = {}
 ): void => {
   ignoreWindowFocus = !!options.ignoreWindowFocus;
 };

lib/common/format.ts

@@ -30,7 +30,7 @@ const SI_BASE_INDEX = SI_SYMBOLS.indexOf(' ');
 export function formatSiUnit(
   value: number,
   minBase1000 = -SI_BASE_INDEX,
-  unit = '',
+  unit = ''
 ): string {
   if (!isFinite(value)) {
     return value.toString();
@@ -121,7 +121,7 @@ const SI_BASE_TEN_UNITS = [
 export function formatSiBaseTenUnit(
   value: number,
   minBase1000 = 0,
-  unit = '',
+  unit = ''
 ): string {
   if (!isFinite(value)) {
     return 'NaN';
@@ -145,7 +145,7 @@ export function formatSiBaseTenUnit(
  */
 export function formatTime(
   val: number,
-  formatType: 'short' | 'default' = 'default',
+  formatType: 'short' | 'default' = 'default'
 ): string {
   const totalSeconds = Math.floor(val / 10);
   const hours = Math.floor(totalSeconds / 3600);

lib/common/http.ts

@@ -4,7 +4,7 @@
 export function fetchRetry(
   url: string,
   options?: RequestInit,
-  retryTimer: number = 1000,
+  retryTimer: number = 1000
 ): Promise<Response> {
   return fetch(url, options).catch(() => {
     return new Promise((resolve) => {

lib/common/math.ts

@@ -30,7 +30,7 @@ export function round(num: number, dec: number): number {
     (
       Math.round(num * Math.pow(10, dec) + num_sign * 0.0001) /
       Math.pow(10, dec)
-    ).toFixed(dec),
+    ).toFixed(dec)
   );
 }
 
@@ -58,7 +58,7 @@ export function inRange(value: number, range: number[]): boolean {
  */
 export function keyOfMatchingRange(
   value: number,
-  ranges: Record<string, any>,
+  ranges: Record<string, any>
 ): string | undefined {
   for (const rangeName of Object.keys(ranges)) {
     const range = ranges[rangeName];

lib/common/react.ts

@@ -32,7 +32,7 @@ export function normalizeChildren<T>(children: T | T[]): T[] {
  */
 export function shallowDiffers(
   a: Record<string, any>,
-  b: Record<string, any>,
+  b: Record<string, any>
 ): boolean {
   let i: string;
   for (i in a) {

lib/common/string.ts

@@ -17,7 +17,7 @@
  */
 export function createSearch<TObj>(
   searchText: string,
-  stringifier = (obj: TObj) => JSON.stringify(obj),
+  stringifier = (obj: TObj) => JSON.stringify(obj)
 ): (obj: TObj) => boolean {
   const preparedSearchText = searchText.toLowerCase().trim();
 
@@ -191,7 +191,7 @@ export function decodeHtmlEntities(str: string): string {
       // Basic entities
       .replace(
         /&(nbsp|amp|quot|lt|gt|apos);/g,
-        (_match, entity) => TRANSLATIONS[entity],
+        (_match, entity) => TRANSLATIONS[entity]
       )
       // Decimal entities
       .replace(/&#?([0-9]+);/gi, (_match, numStr) => {

lib/common/timer.ts

@@ -7,7 +7,7 @@
 export function debounce<F extends (...args: any[]) => any>(
   fn: F,
   time: number,
-  immediate = false,
+  immediate = false
 ): (...args: Parameters<F>) => void {
   let timeout: ReturnType<typeof setTimeout> | null;
   return (...args: Parameters<F>) => {
@@ -32,7 +32,7 @@ export function debounce<F extends (...args: any[]) => any>(
  */
 export function throttle<F extends (...args: any[]) => any>(
   fn: F,
-  time: number,
+  time: number
 ): (...args: Parameters<F>) => void {
   let previouslyRun: number | null,
     queuedToRun: ReturnType<typeof setTimeout> | null;
@@ -47,7 +47,7 @@ export function throttle<F extends (...args: any[]) => any>(
     } else {
       queuedToRun = setTimeout(
         () => invokeFn(...args),
-        time - (now - (previouslyRun ?? 0)),
+        time - (now - (previouslyRun ?? 0))
       );
     }
   };

lib/common/type-utils.ts

@@ -7,7 +7,7 @@
  * ```
  */
 export function getShallowTypes(
-  data: Record<string, any>,
+  data: Record<string, any>
 ): Record<string, any> {
   const output = {};
 

lib/components/Blink.tsx

@@ -1,6 +1,5 @@
 import { Component, PropsWithChildren } from 'react';
 
-
 type Props = Partial<{
   /**
    * The interval between blinks, in milliseconds.
@@ -11,7 +10,8 @@ type Props = Partial<{
    * The time to wait before blinking again, in milliseconds.
    */
   time: number;
-}> & PropsWithChildren;
+}> &
+  PropsWithChildren;
 
 type State = {
   hidden: boolean;
@@ -20,8 +20,6 @@ type State = {
 const DEFAULT_BLINKING_INTERVAL = 1000;
 const DEFAULT_BLINKING_TIME = 1000;
 
-
-
 export class Blink extends Component<Props, State> {
   interval: NodeJS.Timeout;
   timer: NodeJS.Timeout;

lib/components/BlockQuote.tsx

@@ -1,9 +1,8 @@
 import { classes } from '../common/react';
-import styles from '../styles/components/BlockQuote.module.scss';
 import { Box, BoxProps } from './Box';
 
 export function BlockQuote(props: BoxProps) {
   const { className, ...rest } = props;
 
-  return <Box className={classes([styles.blockQuote, className])} {...rest} />;
+  return <Box className={classes(['BlockQuote', className])} {...rest} />;
 }

lib/components/Box.tsx

@@ -249,6 +249,6 @@ export function Box(props: BoxProps & DangerDoNotUse) {
       ...computedProps,
       className: computedClassName,
     },
-    children,
+    children
   );
 }

lib/components/Button.tsx

@@ -11,7 +11,6 @@ import {
 
 import { isEscape, KEY } from '../common/keys';
 import { BooleanLike, classes } from '../common/react';
-import styles from '../styles/components/Button.module.scss';
 import { Box, BoxProps, computeBoxClassName, computeBoxProps } from './Box';
 import { Icon } from './Icon';
 import { Tooltip } from './Tooltip';
@@ -57,7 +56,7 @@ type Props = Partial<{
   /** Icon rotation */
   iconRotation: number;
   /** Icon size */
-  iconSize: number
+  iconSize: number;
   /** Makes the icon spin */
   iconSpin: BooleanLike;
   /** Called when element is clicked */
@@ -106,19 +105,20 @@ export function Button(props: Props) {
   let buttonContent = (
     <div
       className={classes([
-        styles.button,
-        fluid && styles.fluid,
-        disabled && styles.disabled,
-        selected && styles.selected,
-        circular && styles.circular,
-        compact && styles.compact,
-        verticalAlignContent && styles.flex,
-        verticalAlignContent && fluid && styles.flex__fluid,
+        'Button',
+        fluid && 'Button--fluid',
+        disabled && 'Button--disabled',
+        selected && 'Button--selected',
+        circular && 'Button--circular',
+        compact && 'Button--compact',
+        iconPosition && 'Button--iconPosition--' + iconPosition,
+        verticalAlignContent && 'Button--flex',
+        verticalAlignContent && fluid && 'Button--flex--fluid',
         verticalAlignContent &&
-          styles['verticalAlignContent__' + verticalAlignContent],
+          'Button--verticalAlignContent--' + verticalAlignContent,
         color && typeof color === 'string'
-          ? styles['color__' + color]
-          : styles['color__default'],
+          ? 'Button--color--' + color
+          : 'Button--color--default',
         className,
         computeBoxClassName(rest),
       ])}
@@ -149,7 +149,7 @@ export function Button(props: Props) {
       }}
       {...computeBoxProps(rest)}
     >
-      <div className={styles.content}>
+      <div className="Button__content">
         {icon && iconPosition !== 'right' && (
           <Icon
             mr={toDisplay ? 1 : 0}
@@ -164,7 +164,10 @@ export function Button(props: Props) {
           toDisplay
         ) : (
           <span
-            className={classes([styles.ellipsis, icon && styles.textMargin])}
+            className={classes([
+              'Button--ellipsis',
+              icon && 'Button__textMargin',
+            ])}
           >
             {toDisplay}
           </span>
@@ -328,9 +331,10 @@ function ButtonInput(props: InputProps) {
   let buttonContent = (
     <Box
       className={classes([
-        styles.button,
-        fluid && styles.fluid,
-        styles['color__' + color],
+        'Button',
+        fluid && 'Button--fluid',
+        disabled && 'Button--disabled',
+        'Button--color--' + color,
       ])}
       {...rest}
       onClick={() => setInInput(true)}

lib/components/ColorBox.tsx

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
 
 import { classes } from '../common/react';
-import styles from '../styles/components/ColorBox.module.scss';
 import { BoxProps, computeBoxClassName, computeBoxProps } from './Box';
 
 type Props = {
@@ -16,11 +15,7 @@ export function ColorBox(props: Props) {
 
   return (
     <div
-      className={classes([
-        styles.colorBox,
-        className,
-        computeBoxClassName(rest),
-      ])}
+      className={classes(['ColorBox', className, computeBoxClassName(rest)])}
       {...computeBoxProps(rest)}
     >
       {content || ''}

lib/components/Dialog.tsx

@@ -1,4 +1,3 @@
-import styles from '../styles/components/Dialog.module.scss';
 import { Box } from './Box';
 import { Button } from './Button';
 
@@ -13,10 +12,10 @@ type DialogProps = {
 export function Dialog(props: DialogProps) {
   const { title, onClose, children, width, height } = props;
   return (
-    <div className={styles.dialog}>
-      <Box className={styles.content} width={width || '370px'} height={height}>
-        <div className={styles.header}>
-          <div className={styles.title}>{title}</div>
+    <div className="Dialog">
+      <Box className="Dialog__content" width={width || '370px'} height={height}>
+        <div className="Dialog__header">
+          <div className="Dialog__title">{title}</div>
           <Box mr={2}>
             <Button
               mr="-3px"
@@ -47,7 +46,7 @@ function DialogButton(props: DialogButtonProps) {
   return (
     <Button
       onClick={onClick}
-      className={styles.button}
+      className="Dialog__button"
       verticalAlignContent="middle"
     >
       {children}
@@ -68,10 +67,10 @@ export function UnsavedChangesDialog(props: UnsavedChangesDialogProps) {
   const { documentName, onSave, onDiscard, onClose } = props;
   return (
     <Dialog title="Notepad" onClose={onClose}>
-      <div className={styles.body}>
+      <div className="Dialog__body">
         Do you want to save changes to {documentName}?
       </div>
-      <div className={styles.footer}>
+      <div className="Dialog__footer">
         <DialogButton onClick={onSave}>Save</DialogButton>
         <DialogButton onClick={onDiscard}>Don&apos;t Save</DialogButton>
         <DialogButton onClick={onClose}>Cancel</DialogButton>

lib/components/Dimmer.tsx

@@ -1,12 +1,11 @@
 import { classes } from '../common/react';
-import styles from '../styles/components/Dimmer.module.scss';
 import { Box, BoxProps } from './Box';
 
 export function Dimmer(props: BoxProps) {
   const { className, children, ...rest } = props;
 
   return (
-    <Box className={classes([styles.dimmer, className])} {...rest}>
+    <Box className={classes(['Dimmer', className])} {...rest}>
       <div className="Dimmer__inner">{children}</div>
     </Box>
   );

lib/components/Divider.tsx

@@ -1,5 +1,4 @@
 import { classes } from '../common/react';
-import styles from '../styles/components/Divider.module.scss';
 
 type Props = Partial<{
   hidden: boolean;
@@ -12,8 +11,9 @@ export function Divider(props: Props) {
   return (
     <div
       className={classes([
-        hidden && styles.hidden,
-        vertical ? styles.vertical : styles.horizontal,
+        'Divider',
+        hidden && 'Divider--hidden',
+        vertical ? 'Divider--vertical' : 'Divider--horizontal',
       ])}
     />
   );