Merge branch 'main' into biome

.vscode/settings.json

@@ -14,5 +14,8 @@
   "[yaml][markdown][html][scss]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
+  "[yaml][markdown][html][scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   "typescript.tsdk": "node_modules/typescript/lib"
 }

lib/common/color.ts

@@ -62,7 +62,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 (!Number.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 (!Number.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/math.ts

@@ -55,7 +55,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();
 
@@ -190,7 +190,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;
   let 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/components/BlockQuote.tsx

@@ -1,9 +1,8 @@
 import { classes } from '../common/react';
-import styles from '../styles/components/BlockQuote.module.scss';
 import { Box, type 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

@@ -8,10 +8,8 @@ import {
   useRef,
   useState,
 } from 'react';
-
 import { KEY, isEscape } from '../common/keys';
 import { type BooleanLike, classes } from '../common/react';
-import styles from '../styles/components/Button.module.scss';
 import {
   Box,
   type BoxProps,
@@ -111,19 +109,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),
       ])}
@@ -154,7 +153,7 @@ export function Button(props: Props) {
       }}
       {...computeBoxProps(rest)}
     >
-      <div className={styles.content}>
+      <div className="Button__content">
         {icon && iconPosition !== 'right' && (
           <Icon
             mr={toDisplay ? 1 : 0}
@@ -169,7 +168,10 @@ export function Button(props: Props) {
           toDisplay
         ) : (
           <span
-            className={classes([styles.ellipsis, icon && styles.textMargin])}
+            className={classes([
+              'Button--ellipsis',
+              icon && 'Button__textMargin',
+            ])}
           >
             {toDisplay}
           </span>
@@ -333,9 +335,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 type { ReactNode } from 'react';
 
 import { classes } from '../common/react';
-import styles from '../styles/components/ColorBox.module.scss';
 import { type 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,12 @@
 import { classes } from '../common/react';
-import styles from '../styles/components/Dimmer.module.scss';
+
 import { Box, type 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',
       ])}
     />
   );

lib/components/Flex.tsx

@@ -1,5 +1,5 @@
 import { classes } from '../common/react';
-import styles from '../styles/components/Flex.module.scss';
+
 import {
   type BoxProps,
   computeBoxClassName,
@@ -65,8 +65,8 @@ export type FlexProps = Partial<{
 
 export function computeFlexClassName(props: FlexProps) {
   return classes([
-    styles.flex,
-    props.inline && styles.inline,
+    'Flex',
+    props.inline && 'Flex--inline',
     computeBoxClassName(props),
   ]);
 }
@@ -96,6 +96,10 @@ export function Flex(props) {
   );
 }
 
+export const computeFlexItemClassName = (props: FlexItemProps) => {
+  return classes(['Flex__item', computeBoxClassName(props)]);
+};
+
 export type FlexItemProps = Partial<{
   /** This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. */
   align: string | boolean;
@@ -155,7 +159,7 @@ function FlexItem(props) {
   const { className, ...rest } = props;
   return (
     <div
-      className={classes([className, computeBoxClassName(props)])}
+      className={classes([className, computeFlexItemClassName(props)])}
       {...computeFlexItemProps(rest)}
     />
   );

lib/components/Icon.tsx

@@ -1,7 +1,6 @@
 import type { CSSProperties, ReactNode } from 'react';
 
 import { type BooleanLike, classes } from '../common/react';
-import style from '../styles/components/Icon.module.scss';
 import { type BoxProps, computeBoxClassName, computeBoxProps } from './Box';
 
 type Props = {
@@ -59,7 +58,7 @@ export function Icon(props: Props) {
   return (
     <i
       className={classes([
-        style.icon,
+        'Icon',
         iconClass,
         className,
         computeBoxClassName(rest),
@@ -80,11 +79,7 @@ export function IconStack(props: IconStackProps) {
   const { className, children, ...rest } = props;
   return (
     <span
-      className={classes([
-        style.iconStack,
-        className,
-        computeBoxClassName(rest),
-      ])}
+      className={classes(['IconStack', className, computeBoxClassName(rest)])}
       {...computeBoxProps(rest)}
     >
       {children}