diff --git a/eslint.config.js b/eslint.config.js index 05bea95..6a21c6d 100644 --- a/eslint.config.js +++ b/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 ); diff --git a/lib/common/color.ts b/lib/common/color.ts index e77d593..89ad639 100644 --- a/lib/common/color.ts +++ b/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 ); } diff --git a/lib/common/events.ts b/lib/common/events.ts index b22364c..92d2361 100644 --- a/lib/common/events.ts +++ b/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; }; diff --git a/lib/common/format.ts b/lib/common/format.ts index 56deeeb..a5e2ecb 100644 --- a/lib/common/format.ts +++ b/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); diff --git a/lib/common/http.ts b/lib/common/http.ts index b37a818..0d3de02 100644 --- a/lib/common/http.ts +++ b/lib/common/http.ts @@ -4,7 +4,7 @@ export function fetchRetry( url: string, options?: RequestInit, - retryTimer: number = 1000, + retryTimer: number = 1000 ): Promise { return fetch(url, options).catch(() => { return new Promise((resolve) => { diff --git a/lib/common/math.ts b/lib/common/math.ts index 1308311..b3062cd 100644 --- a/lib/common/math.ts +++ b/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, + ranges: Record ): string | undefined { for (const rangeName of Object.keys(ranges)) { const range = ranges[rangeName]; diff --git a/lib/common/react.ts b/lib/common/react.ts index dcfd436..172a888 100644 --- a/lib/common/react.ts +++ b/lib/common/react.ts @@ -32,7 +32,7 @@ export function normalizeChildren(children: T | T[]): T[] { */ export function shallowDiffers( a: Record, - b: Record, + b: Record ): boolean { let i: string; for (i in a) { diff --git a/lib/common/string.ts b/lib/common/string.ts index 92d460f..3e122bd 100644 --- a/lib/common/string.ts +++ b/lib/common/string.ts @@ -17,7 +17,7 @@ */ export function createSearch( 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) => { diff --git a/lib/common/timer.ts b/lib/common/timer.ts index d9a5e91..345d82e 100644 --- a/lib/common/timer.ts +++ b/lib/common/timer.ts @@ -7,7 +7,7 @@ export function debounce any>( fn: F, time: number, - immediate = false, + immediate = false ): (...args: Parameters) => void { let timeout: ReturnType | null; return (...args: Parameters) => { @@ -32,7 +32,7 @@ export function debounce any>( */ export function throttle any>( fn: F, - time: number, + time: number ): (...args: Parameters) => void { let previouslyRun: number | null, queuedToRun: ReturnType | null; @@ -47,7 +47,7 @@ export function throttle any>( } else { queuedToRun = setTimeout( () => invokeFn(...args), - time - (now - (previouslyRun ?? 0)), + time - (now - (previouslyRun ?? 0)) ); } }; diff --git a/lib/common/type-utils.ts b/lib/common/type-utils.ts index a73c0c1..c388565 100644 --- a/lib/common/type-utils.ts +++ b/lib/common/type-utils.ts @@ -7,7 +7,7 @@ * ``` */ export function getShallowTypes( - data: Record, + data: Record ): Record { const output = {}; diff --git a/lib/components/Blink.tsx b/lib/components/Blink.tsx index 8ab2bd6..89317a0 100644 --- a/lib/components/Blink.tsx +++ b/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 { interval: NodeJS.Timeout; timer: NodeJS.Timeout; diff --git a/lib/components/BlockQuote.tsx b/lib/components/BlockQuote.tsx index 432b818..f0700c5 100644 --- a/lib/components/BlockQuote.tsx +++ b/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 ; + return ; } diff --git a/lib/components/Box.tsx b/lib/components/Box.tsx index 0cb7a9f..58750b0 100644 --- a/lib/components/Box.tsx +++ b/lib/components/Box.tsx @@ -249,6 +249,6 @@ export function Box(props: BoxProps & DangerDoNotUse) { ...computedProps, className: computedClassName, }, - children, + children ); } diff --git a/lib/components/Button.tsx b/lib/components/Button.tsx index 1e0ed44..e84d876 100644 --- a/lib/components/Button.tsx +++ b/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 = (
-
+
{icon && iconPosition !== 'right' && ( {toDisplay} @@ -328,9 +331,10 @@ function ButtonInput(props: InputProps) { let buttonContent = ( setInInput(true)} diff --git a/lib/components/ColorBox.tsx b/lib/components/ColorBox.tsx index bc0d094..096a0e7 100644 --- a/lib/components/ColorBox.tsx +++ b/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 (
{content || ''} diff --git a/lib/components/Dialog.tsx b/lib/components/Dialog.tsx index 175cbb4..fa68437 100644 --- a/lib/components/Dialog.tsx +++ b/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 ( -
- -
-
{title}
+
+ +
+
{title}
}` + * Example: `buttons={}` */ buttons: ReactNode; - /** + /** * Enables alternate layout for `buttons` container. * Without fluid, buttons will be on top and with `pointer-events: none`, useful for text info. * With fluid, buttons will be in "hamburger" style. @@ -48,9 +47,9 @@ type Props = Partial<{ dmIcon: string | null; /** Parameter `icon_state` of component `DmIcon`. */ dmIconState: string | null; - /** + /** * Changes the layout of the button, making it fill the entire horizontally available space. - * Allows the use of `title` + * Allows the use of `title` */ fluid: boolean; /** Parameter responsible for the size of the image, component and standard "stubs". */ @@ -115,14 +114,14 @@ export function ImageButton(props: Props) { let buttonContent = (
{ @@ -138,10 +137,10 @@ export function ImageButton(props: Props) { }} style={{ width: !fluid ? `calc(${imageSize}px + 0.5em + 2px)` : 'auto' }} > -
+
{base64 || asset || imageSrc ? ( {fluid ? ( -
+
{title && ( - + {title} )} - {children && ( - {children} - )} + {children && {children}}
) : ( children && ( {children} @@ -200,23 +195,19 @@ export function ImageButton(props: Props) { return (
{buttonContent} {buttons && (
-
.
+
.
onChange?.(event, event.target.value)} diff --git a/lib/components/Knob.tsx b/lib/components/Knob.tsx index 83b04c7..ec71796 100644 --- a/lib/components/Knob.tsx +++ b/lib/components/Knob.tsx @@ -1,6 +1,5 @@ import { keyOfMatchingRange, scale } from '../common/math'; import { BooleanLike, classes } from '../common/react'; -import styles from '../styles/components/Knob.module.scss'; import { BoxProps, computeBoxClassName, computeBoxProps } from './Box'; import { DraggableControl } from './DraggableControl'; @@ -116,9 +115,9 @@ export function Knob(props: Props) { return (
-
+
-
+
{dragging && ( -
{displayElement}
+
{displayElement}
)} @@ -110,13 +109,13 @@ function LabeledListItem(props: LabeledListItemProps) { ); return ( -
+
{labelChild} {buttons && ( - {buttons} + {buttons} )}
); diff --git a/lib/components/MenuBar.tsx b/lib/components/MenuBar.tsx index 98d0dce..4fbad59 100644 --- a/lib/components/MenuBar.tsx +++ b/lib/components/MenuBar.tsx @@ -6,7 +6,6 @@ import { Component, createRef, ReactNode, RefObject } from 'react'; import { classes } from '../common/react'; -import styles from '../styles/components/MenuBar.module.scss'; import { Box } from './Box'; import { Icon } from './Icon'; @@ -45,7 +44,7 @@ class Menu extends Component { const { width, children } = this.props; return (
{
null : onClick} onMouseOver={onMouseOver} > - {display} + {display} {open && ( onClick(value)} > -
+
{checked && }
{displayText} @@ -200,7 +199,11 @@ function MenuItem(props) { const { value, displayText, onClick } = props; return ( onClick(value)} > {displayText} @@ -211,7 +214,7 @@ function MenuItem(props) { Dropdown.MenuItem = MenuItem; function Separator() { - return
; + return
; } Dropdown.Separator = Separator; @@ -222,7 +225,7 @@ type MenuBarProps = { export function MenuBar(props: MenuBarProps) { const { children } = props; - return {children}; + return {children}; } MenuBar.Dropdown = Dropdown; diff --git a/lib/components/Modal.tsx b/lib/components/Modal.tsx index 998c4ca..e3f3526 100644 --- a/lib/components/Modal.tsx +++ b/lib/components/Modal.tsx @@ -1,5 +1,4 @@ import { classes } from '../common/react'; -import styles from '../styles/components/Modal.module.scss'; import { BoxProps, computeBoxClassName, computeBoxProps } from './Box'; import { Dimmer } from './Dimmer'; @@ -9,11 +8,7 @@ export function Modal(props: BoxProps) { return (
{children} diff --git a/lib/components/NoticeBox.tsx b/lib/components/NoticeBox.tsx index 8619e0c..c56067b 100644 --- a/lib/components/NoticeBox.tsx +++ b/lib/components/NoticeBox.tsx @@ -1,5 +1,4 @@ import { classes } from '../common/react'; -import styles from '../styles/components/NoticeBox.module.scss'; import { Box, BoxProps } from './Box'; type Props = ExclusiveProps & BoxProps; @@ -21,10 +20,10 @@ type ExclusiveProps = /** Green notice */ success: boolean; }) - | (Omit & { + | (Omit & { /** Orange notice */ - warning: boolean; - }) + warning: boolean; + }) | (Omit & { /** Red notice */ danger: boolean; @@ -36,12 +35,11 @@ export function NoticeBox(props: Props) { return ( { const internalValue = clamp( state.currentValue + (offset * step) / stepSize, minValue - step, - maxValue + step, + maxValue + step ); if (Math.abs(internalValue - state.currentValue) >= step) { // Clamp the final value { state.currentValue = clamp( - round(internalValue / step, 0) * step , + round(internalValue / step, 0) * step, minValue, - maxValue, + maxValue ); } // Set the new origin @@ -196,7 +195,7 @@ export class NumberInput extends Component { const targetValue = clamp( parseFloat(event.target.value), minValue, - maxValue, + maxValue ); if (isNaN(targetValue)) { this.setState({ @@ -227,7 +226,7 @@ export class NumberInput extends Component { const targetValue = clamp( parseFloat(event.currentTarget.value), minValue, - maxValue, + maxValue ); if (isNaN(targetValue)) { this.setState({ @@ -276,7 +275,7 @@ export class NumberInput extends Component { } const contentElement = ( -
+
{animated && !dragging ? ( ) : format ? ( @@ -292,8 +291,8 @@ export class NumberInput extends Component { return ( { fontSize={fontSize} onMouseDown={this.handleDragStart} > -
+
@@ -318,7 +317,7 @@ export class NumberInput extends Component { {contentElement} ) { const [referenceElement, setReferenceElement] = useState(null); const [popperElement, setPopperElement] = useState( - null, + null ); // One would imagine we could just use useref here, but it's against react-popper documentation and causes a positioning bug diff --git a/lib/components/ProgressBar.tsx b/lib/components/ProgressBar.tsx index c92e113..fc123c5 100644 --- a/lib/components/ProgressBar.tsx +++ b/lib/components/ProgressBar.tsx @@ -3,7 +3,6 @@ import { PropsWithChildren } from 'react'; import { CSS_COLORS } from '../common/constants'; import { clamp01, keyOfMatchingRange, scale, toFixed } from '../common/math'; import { classes } from '../common/react'; -import styles from '../styles/components/ProgressBar.module.scss'; import { BoxProps, computeBoxClassName, computeBoxProps } from './Box'; type Props = { @@ -71,11 +70,7 @@ export function ProgressBar(props: Props) { // a name for a color- class, or a base CSS class. const outerProps = computeBoxProps(rest); - const outerClasses = [ - styles.progressBar, - className, - computeBoxClassName(rest), - ]; + const outerClasses = ['ProgressBar', className, computeBoxClassName(rest)]; const fillStyles = { width: clamp01(scaledValue) * 100 + '%', }; @@ -84,7 +79,7 @@ export function ProgressBar(props: Props) { effectiveColor === 'default' ) { // If the color is a color- class, just use that. - outerClasses.push(styles['color__' + effectiveColor]); + outerClasses.push('ProgressBar--color--' + effectiveColor); } else { // Otherwise, set styles directly. outerProps.style = { ...outerProps.style, borderColor: effectiveColor }; @@ -94,10 +89,10 @@ export function ProgressBar(props: Props) { return (
-
+
{hasContent ? children : toFixed(scaledValue * 100) + '%'}
diff --git a/lib/components/RoundGauge.tsx b/lib/components/RoundGauge.tsx index 773bc7b..e8bd8b3 100644 --- a/lib/components/RoundGauge.tsx +++ b/lib/components/RoundGauge.tsx @@ -5,7 +5,6 @@ */ import { clamp01, keyOfMatchingRange, scale } from '../common/math'; import { classes } from '../common/react'; -import styles from '../styles/components/RoundGauge.module.scss'; import { AnimatedNumber } from './AnimatedNumber'; import { Box, BoxProps, computeBoxClassName, computeBoxProps } from './Box'; @@ -118,7 +117,7 @@ export function RoundGauge(props: Props) {
)} - + {Object.keys(scaledRanges).map((x, i) => { const col_ranges = scaledRanges[x]; return ( - - + +
diff --git a/lib/components/Section.tsx b/lib/components/Section.tsx index c5bdd75..8a2edf6 100644 --- a/lib/components/Section.tsx +++ b/lib/components/Section.tsx @@ -2,7 +2,6 @@ import { ReactNode, useEffect, useRef } from 'react'; import { addScrollableNode, removeScrollableNode } from '../common/events'; import { canRender, classes } from '../common/react'; -import styles from '../styles/components/Section.module.scss'; import { BoxProps, computeBoxClassName, computeBoxProps } from './Box'; type Props = Partial<{ @@ -98,29 +97,29 @@ export const Section = (props: Props) => {
{hasTitle && ( -
- {title} -
{buttons}
+
+ {title} +
{buttons}
)} -
+
-
-
+
+
{dragging && ( -
{displayElement}
+
{displayElement}
)}
-
+
{hasContent ? children : displayElement}
{inputElement} diff --git a/lib/components/Stack.tsx b/lib/components/Stack.tsx index 00048bb..ea0f516 100644 --- a/lib/components/Stack.tsx +++ b/lib/components/Stack.tsx @@ -6,7 +6,6 @@ import { RefObject } from 'react'; import { classes } from '../common/react'; -import styles from '../styles/components/Stack.module.scss'; import { computeBoxClassName } from './Box'; import { computeFlexClassName, @@ -37,10 +36,11 @@ export function Stack(props: Props) { return (
@@ -82,9 +82,9 @@ function StackDivider(props: StackDividerProps) { return (