@aptre/flex-layout 0.2.0 → 0.2.2

package/dist/model/IJsonModel.d.ts

@@ -0,0 +1,149 @@
+import { ICloseType } from "./ICloseType";
+export type IBorderLocation = "top" | "bottom" | "left" | "right";
+export type ITabLocation = "top" | "bottom";
+export type IInsets = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export interface IJsonModel {
+    global?: IGlobalAttributes;
+    borders?: IJsonBorderNode[];
+    layout: IJsonRowNode;
+}
+export interface IJsonBorderNode extends IBorderAttributes {
+    location: IBorderLocation;
+    children: IJsonTabNode[];
+}
+export interface IJsonRowNode extends IRowAttributes {
+    children: (IJsonRowNode | IJsonTabSetNode)[];
+}
+export interface IJsonTabSetNode extends ITabSetAttributes {
+    active?: boolean;
+    maximized?: boolean;
+    children: IJsonTabNode[];
+}
+export interface IJsonTabNode extends ITabAttributes {
+}
+export interface IGlobalAttributes {
+    borderAutoSelectTabWhenClosed?: boolean;
+    borderAutoSelectTabWhenOpen?: boolean;
+    borderBarSize?: number;
+    borderClassName?: string;
+    borderEnableAutoHide?: boolean;
+    borderEnableDrop?: boolean;
+    borderMinSize?: number;
+    borderSize?: number;
+    enableEdgeDock?: boolean;
+    enableRotateBorderIcons?: boolean;
+    enableUseVisibility?: boolean;
+    legacyOverflowMenu?: boolean;
+    marginInsets?: IInsets;
+    rootOrientationVertical?: boolean;
+    splitterExtra?: number;
+    splitterSize?: number;
+    tabBorderHeight?: number;
+    tabBorderWidth?: number;
+    tabClassName?: string;
+    tabCloseType?: ICloseType;
+    tabContentClassName?: string;
+    tabDragSpeed?: number;
+    tabEnableClose?: boolean;
+    tabEnableDrag?: boolean;
+    tabEnableFloat?: boolean;
+    tabEnableRename?: boolean;
+    tabEnableRenderOnDemand?: boolean;
+    tabIcon?: string;
+    tabSetAutoSelectTab?: boolean;
+    tabSetBorderInsets?: IInsets;
+    tabSetClassNameHeader?: string;
+    tabSetClassNameTabStrip?: string;
+    tabSetEnableClose?: boolean;
+    tabSetEnableDeleteWhenEmpty?: boolean;
+    tabSetEnableDivide?: boolean;
+    tabSetEnableDrag?: boolean;
+    tabSetEnableDrop?: boolean;
+    tabSetEnableMaximize?: boolean;
+    tabSetEnableSingleTabStretch?: boolean;
+    tabSetEnableTabStrip?: boolean;
+    tabSetHeaderHeight?: number;
+    tabSetMarginInsets?: IInsets;
+    tabSetMinHeight?: number;
+    tabSetMinWidth?: number;
+    tabSetTabLocation?: ITabLocation;
+    tabSetTabStripHeight?: number;
+}
+export interface IRowAttributes {
+    height?: number;
+    id?: string;
+    type: "row";
+    weight?: number;
+    width?: number;
+}
+export interface ITabSetAttributes {
+    autoSelectTab?: boolean;
+    borderInsets?: IInsets;
+    classNameHeader?: string;
+    classNameTabStrip?: string;
+    config?: any;
+    enableClose?: boolean;
+    enableDeleteWhenEmpty?: boolean;
+    enableDivide?: boolean;
+    enableDrag?: boolean;
+    enableDrop?: boolean;
+    enableMaximize?: boolean;
+    enableSingleTabStretch?: boolean;
+    enableTabStrip?: boolean;
+    headerHeight?: number;
+    height?: number;
+    id?: string;
+    marginInsets?: IInsets;
+    minHeight?: number;
+    minWidth?: number;
+    name?: string;
+    selected?: number;
+    tabLocation?: ITabLocation;
+    tabStripHeight?: number;
+    type: "tabset";
+    weight?: number;
+    width?: number;
+    maximized?: boolean;
+    active?: boolean;
+}
+export interface ITabAttributes {
+    altName?: string;
+    borderHeight?: number;
+    borderWidth?: number;
+    className?: string;
+    closeType?: ICloseType;
+    component?: string;
+    config?: any;
+    contentClassName?: string;
+    tabsetClassName?: string;
+    enableClose?: boolean;
+    enableDrag?: boolean;
+    enableFloat?: boolean;
+    enableRename?: boolean;
+    enableRenderOnDemand?: boolean;
+    floating?: boolean;
+    helpText?: string;
+    icon?: string;
+    id?: string;
+    name?: string;
+    type?: string;
+}
+export interface IBorderAttributes {
+    autoSelectTabWhenClosed?: boolean;
+    autoSelectTabWhenOpen?: boolean;
+    barSize?: number;
+    className?: string;
+    config?: any;
+    enableAutoHide?: boolean;
+    enableDrop?: boolean;
+    minSize?: number;
+    selected?: number;
+    show?: boolean;
+    size?: number;
+    type: "border";
+}

package/dist/model/Model.d.ts

@@ -0,0 +1,86 @@
+import { DropInfo } from "../DropInfo";
+import { Action } from "./Action";
+import { BorderSet } from "./BorderSet";
+import { IJsonModel, ITabSetAttributes } from "./IJsonModel";
+import { Node } from "./Node";
+import { RowNode } from "./RowNode";
+import { TabNode } from "./TabNode";
+import { TabSetNode } from "./TabSetNode";
+/**
+ * Class containing the Tree of Nodes used by the FlexLayout component
+ */
+export declare class Model {
+    /**
+     * Loads the model from the given json object
+     * @param json the json model to load
+     * @returns {Model} a new Model object
+     */
+    static fromJson(json: IJsonModel): Model;
+    /**
+     * Get the currently active tabset node
+     */
+    getActiveTabset(): TabSetNode | undefined;
+    /**
+     * Get the currently maximized tabset node
+     */
+    getMaximizedTabset(): TabSetNode | undefined;
+    /**
+     * Gets the root RowNode of the model
+     * @returns {RowNode}
+     */
+    getRoot(): RowNode;
+    isRootOrientationVertical(): boolean;
+    isUseVisibility(): boolean;
+    isEnableRotateBorderIcons(): boolean;
+    /**
+     * Gets the
+     * @returns {BorderSet|*}
+     */
+    getBorderSet(): BorderSet;
+    /**
+     * Visits all the nodes in the model and calls the given function for each
+     * @param fn a function that takes visited node and a integer level as parameters
+     */
+    visitNodes(fn: (node: Node, level: number) => void): void;
+    /**
+     * Gets a node by its id
+     * @param id the id to find
+     */
+    getNodeById(id: string): Node | undefined;
+    /**
+     * Finds the first/top left tab set of the given node.
+     * @param node The top node you want to begin searching from, deafults to the root node
+     * @returns The first Tab Set
+     */
+    getFirstTabSet(node?: Node): Node;
+    /**
+     * Update the node tree by performing the given action,
+     * Actions should be generated via static methods on the Actions class
+     * @param action the action to perform
+     * @returns added Node for Actions.addNode; undefined otherwise
+     */
+    doAction(action: Action): Node | undefined;
+    /**
+     * Converts the model to a json object
+     * @returns {IJsonModel} json object that represents this model
+     */
+    toJson(): IJsonModel;
+    getSplitterSize(): number;
+    isLegacyOverflowMenu(): boolean;
+    getSplitterExtra(): number;
+    isEnableEdgeDock(): boolean;
+    /**
+     * Sets a function to allow/deny dropping a node
+     * @param onAllowDrop function that takes the drag node and DropInfo and returns true if the drop is allowed
+     */
+    setOnAllowDrop(onAllowDrop: (dragNode: Node, dropInfo: DropInfo) => boolean): void;
+    /**
+     * set callback called when a new TabSet is created.
+     * The tabNode can be undefined if it's the auto created first tabset in the root row (when the last
+     * tab is deleted, the root tabset can be recreated)
+     * @param onCreateTabSet
+     */
+    setOnCreateTabSet(onCreateTabSet: (tabNode?: TabNode) => ITabSetAttributes): void;
+    static toTypescriptInterfaces(): void;
+    toString(): string;
+}

package/dist/model/Node.d.ts

@@ -0,0 +1,17 @@
+import { Orientation } from "../Orientation";
+import { Rect } from "../Rect";
+import { IJsonBorderNode, IJsonRowNode, IJsonTabNode, IJsonTabSetNode } from "./IJsonModel";
+import { Model } from "./Model";
+export declare abstract class Node {
+    getId(): string;
+    getModel(): Model;
+    getType(): string;
+    getParent(): Node | undefined;
+    getChildren(): Node[];
+    getRect(): Rect;
+    isVisible(): boolean;
+    getOrientation(): Orientation;
+    setEventListener(event: string, callback: (params: any) => void): void;
+    removeEventListener(event: string): void;
+    abstract toJson(): IJsonRowNode | IJsonBorderNode | IJsonTabSetNode | IJsonTabNode | undefined;
+}

package/dist/model/RowNode.d.ts

@@ -0,0 +1,11 @@
+import { IDropTarget } from "./IDropTarget";
+import { IJsonRowNode } from "./IJsonModel";
+import { Node } from "./Node";
+export declare class RowNode extends Node implements IDropTarget {
+    static readonly TYPE = "row";
+    getWeight(): number;
+    getWidth(): number | undefined;
+    getHeight(): number | undefined;
+    toJson(): IJsonRowNode;
+    isEnableDrop(): boolean;
+}

package/dist/model/SplitterNode.d.ts

@@ -0,0 +1,5 @@
+import { Node } from "./Node";
+export declare class SplitterNode extends Node {
+    static readonly TYPE: string;
+    toJson(): undefined;
+}

package/dist/model/TabNode.d.ts

@@ -0,0 +1,37 @@
+import { Rect } from "../Rect";
+import { IDraggable } from "./IDraggable";
+import { IJsonTabNode } from "./IJsonModel";
+import { Node } from "./Node";
+export declare class TabNode extends Node implements IDraggable {
+    static readonly TYPE = "tab";
+    getWindow(): Window | undefined;
+    getTabRect(): Rect | undefined;
+    getName(): string;
+    getHelpText(): string | undefined;
+    getComponent(): string | undefined;
+    /**
+     * Returns the config attribute that can be used to store node specific data that
+     * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather
+     * than directly, for example:
+     * this.state.model.doAction(
+     *   FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));
+     */
+    getConfig(): any;
+    /**
+     * Returns an object that can be used to store transient node specific data that will
+     * NOT be saved in the json.
+     */
+    getExtraData(): Record<string, any>;
+    isFloating(): boolean;
+    getIcon(): string | undefined;
+    isEnableClose(): boolean;
+    getCloseType(): number;
+    isEnableFloat(): boolean;
+    isEnableDrag(): boolean;
+    isEnableRename(): boolean;
+    getClassName(): string | undefined;
+    getContentClassName(): string | undefined;
+    getTabSetClassName(): string | undefined;
+    isEnableRenderOnDemand(): boolean;
+    toJson(): IJsonTabNode;
+}

package/dist/model/TabSetNode.d.ts

@@ -0,0 +1,41 @@
+import { IDraggable } from "./IDraggable";
+import { IDropTarget } from "./IDropTarget";
+import { IJsonTabSetNode } from "./IJsonModel";
+import { Node } from "./Node";
+export declare class TabSetNode extends Node implements IDraggable, IDropTarget {
+    static readonly TYPE = "tabset";
+    getName(): string | undefined;
+    getSelected(): number;
+    getSelectedNode(): Node | undefined;
+    getWeight(): number;
+    getWidth(): number | undefined;
+    getMinWidth(): number;
+    getHeight(): number | undefined;
+    getMinHeight(): number;
+    /**
+     * Returns the config attribute that can be used to store node specific data that
+     * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather
+     * than directly, for example:
+     * this.state.model.doAction(
+     *   FlexLayout.Actions.updateNodeAttributes(node.getId(), {config:myConfigObject}));
+     */
+    getConfig(): any;
+    isMaximized(): boolean;
+    isActive(): boolean;
+    isEnableDeleteWhenEmpty(): boolean;
+    isEnableDrop(): boolean;
+    isEnableDrag(): boolean;
+    isEnableDivide(): boolean;
+    isEnableMaximize(): boolean;
+    isEnableClose(): boolean;
+    isEnableSingleTabStretch(): boolean;
+    canMaximize(): boolean;
+    isEnableTabStrip(): boolean;
+    isAutoSelectTab(): boolean;
+    getClassNameTabStrip(): string | undefined;
+    getClassNameHeader(): string | undefined;
+    getHeaderHeight(): number;
+    getTabStripHeight(): number;
+    getTabLocation(): string;
+    toJson(): IJsonTabSetNode;
+}

package/dist/model/Utils.d.ts

@@ -0,0 +1 @@
+export declare function randomUUID(): string;

package/dist/view/BorderButton.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/view/BorderTabSet.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/view/ErrorBoundary.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/view/FloatingWindow.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/view/FloatingWindowTab.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/view/Icons.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export declare const CloseIcon: () => React.JSX.Element;
+export declare const MaximizeIcon: () => React.JSX.Element;
+export declare const OverflowIcon: () => React.JSX.Element;
+export declare const EdgeIcon: () => React.JSX.Element;
+export declare const PopoutIcon: () => React.JSX.Element;
+export declare const RestoreIcon: () => React.JSX.Element;

package/dist/view/Layout.d.ts

@@ -0,0 +1,161 @@
+import * as React from "react";
+import { DockLocation } from "../DockLocation";
+import { I18nLabel } from "../I18nLabel";
+import { Action } from "../model/Action";
+import { BorderNode } from "../model/BorderNode";
+import { Model } from "../model/Model";
+import { Node } from "../model/Node";
+import { TabNode } from "../model/TabNode";
+import { TabSetNode } from "../model/TabSetNode";
+import { Rect } from "../Rect";
+import { IJsonTabNode } from "../model/IJsonModel";
+export type CustomDragCallback = (dragging: TabNode | IJsonTabNode, over: TabNode, x: number, y: number, location: DockLocation) => void;
+export type DragRectRenderCallback = (content: React.ReactElement | undefined, node?: Node, json?: IJsonTabNode) => React.ReactElement | undefined;
+export type FloatingTabPlaceholderRenderCallback = (dockPopout: () => void, showPopout: () => void) => React.ReactElement | undefined;
+export type NodeMouseEvent = (node: TabNode | TabSetNode | BorderNode, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+export type ShowOverflowMenuCallback = (node: TabSetNode | BorderNode, mouseEvent: React.MouseEvent<HTMLElement, MouseEvent>, items: {
+    index: number;
+    node: TabNode;
+}[], onSelect: (item: {
+    index: number;
+    node: TabNode;
+}) => void) => void;
+export type TabSetPlaceHolderCallback = (node: TabSetNode) => React.ReactNode;
+export type IconFactory = (node: TabNode) => React.ReactNode;
+export type TitleFactory = (node: TabNode) => ITitleObject | React.ReactNode;
+export interface ILayoutProps {
+    model: Model;
+    factory: (node: TabNode) => React.ReactNode;
+    font?: IFontValues;
+    fontFamily?: string;
+    iconFactory?: IconFactory;
+    titleFactory?: TitleFactory;
+    icons?: IIcons;
+    onAction?: (action: Action) => Action | undefined;
+    onRenderTab?: (node: TabNode, renderValues: ITabRenderValues) => void;
+    onRenderTabSet?: (tabSetNode: TabSetNode | BorderNode, renderValues: ITabSetRenderValues) => void;
+    onModelChange?: (model: Model, action: Action) => void;
+    onExternalDrag?: (event: React.DragEvent<HTMLDivElement>) => undefined | {
+        dragText: string;
+        json: any;
+        onDrop?: (node?: Node, event?: Event) => void;
+    };
+    classNameMapper?: (defaultClassName: string) => string;
+    i18nMapper?: (id: I18nLabel, param?: string) => string | undefined;
+    supportsPopout?: boolean | undefined;
+    popoutURL?: string | undefined;
+    realtimeResize?: boolean | undefined;
+    onTabDrag?: (dragging: TabNode | IJsonTabNode, over: TabNode, x: number, y: number, location: DockLocation, refresh: () => void) => undefined | {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        callback: CustomDragCallback;
+        invalidated?: () => void;
+        cursor?: string | undefined;
+    };
+    onRenderDragRect?: DragRectRenderCallback;
+    onRenderFloatingTabPlaceholder?: FloatingTabPlaceholderRenderCallback;
+    onContextMenu?: NodeMouseEvent;
+    onAuxMouseClick?: NodeMouseEvent;
+    onShowOverflowMenu?: ShowOverflowMenuCallback;
+    onTabSetPlaceHolder?: TabSetPlaceHolderCallback;
+}
+export interface IFontValues {
+    size?: string;
+    family?: string;
+    style?: string;
+    weight?: string;
+}
+export interface ITabSetRenderValues {
+    headerContent?: React.ReactNode;
+    centerContent?: React.ReactNode;
+    stickyButtons: React.ReactNode[];
+    buttons: React.ReactNode[];
+    headerButtons: React.ReactNode[];
+    overflowPosition: number | undefined;
+}
+export interface ITabRenderValues {
+    leading: React.ReactNode;
+    content: React.ReactNode;
+    name: string;
+    buttons: React.ReactNode[];
+}
+export interface ITitleObject {
+    titleContent: React.ReactNode;
+    name: string;
+}
+export interface ILayoutState {
+    rect: Rect;
+    calculatedHeaderBarSize: number;
+    calculatedTabBarSize: number;
+    calculatedBorderBarSize: number;
+    editingTab?: TabNode;
+    showHiddenBorder: DockLocation;
+    portal?: React.ReactPortal;
+    showEdges?: boolean;
+}
+export interface IIcons {
+    close?: React.ReactNode | ((tabNode: TabNode) => React.ReactNode);
+    closeTabset?: React.ReactNode | ((tabSetNode: TabSetNode) => React.ReactNode);
+    popout?: React.ReactNode | ((tabNode: TabNode) => React.ReactNode);
+    maximize?: React.ReactNode | ((tabSetNode: TabSetNode) => React.ReactNode);
+    restore?: React.ReactNode | ((tabSetNode: TabSetNode) => React.ReactNode);
+    more?: React.ReactNode | ((tabSetNode: TabSetNode | BorderNode, hiddenTabs: {
+        node: TabNode;
+        index: number;
+    }[]) => React.ReactNode);
+    edgeArrow?: React.ReactNode;
+}
+export interface ICustomDropDestination {
+    rect: Rect;
+    callback: CustomDragCallback;
+    invalidated: (() => void) | undefined;
+    dragging: TabNode | IJsonTabNode;
+    over: TabNode;
+    x: number;
+    y: number;
+    location: DockLocation;
+    cursor: string | undefined;
+}
+/**
+ * A React component that hosts a multi-tabbed layout
+ */
+export declare class Layout extends React.Component<ILayoutProps, ILayoutState> {
+    constructor(props: ILayoutProps);
+    /**
+     * Adds a new tab to the given tabset
+     * @param tabsetId the id of the tabset where the new tab will be added
+     * @param json the json for the new tab node
+     * @returns the added tab node or undefined
+     */
+    addTabToTabSet(tabsetId: string, json: IJsonTabNode): TabNode | undefined;
+    /**
+     * Adds a new tab to the active tabset (if there is one)
+     * @param json the json for the new tab node
+     * @returns the added tab node or undefined
+     */
+    addTabToActiveTabSet(json: IJsonTabNode): TabNode | undefined;
+    /**
+     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts immediatelly
+     * @param dragText the text to show on the drag panel
+     * @param json the json for the new tab node
+     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)
+     */
+    addTabWithDragAndDrop(dragText: string | undefined, json: IJsonTabNode, onDrop?: (node?: Node, event?: Event) => void): void;
+    /**
+     * Move a tab/tabset using drag and drop
+     * @param node the tab or tabset to drag
+     * @param dragText the text to show on the drag panel
+     */
+    moveTabWithDragAndDrop(node: TabNode | TabSetNode, dragText?: string): void;
+    /**
+     * Adds a new tab by dragging a labeled panel to the drop location, dragging starts when you
+     * mouse down on the panel
+     *
+     * @param dragText the text to show on the drag panel
+     * @param json the json for the new tab node
+     * @param onDrop a callback to call when the drag is complete (node and event will be undefined if the drag was cancelled)
+     */
+    addTabWithDragAndDropIndirect(dragText: string | undefined, json: IJsonTabNode, onDrop?: (node?: Node, event?: Event) => void): void;
+}

package/dist/view/Splitter.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/view/Tab.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/view/TabButton.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/view/TabButtonStamp.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/view/TabFloating.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/view/TabOverflowHook.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/view/TabSet.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/view/Utils.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -2,7 +2,7 @@
     "name": "@aptre/flex-layout",
     "author": "Caplin Systems Ltd",
     "description": "A multi-tab docking layout manager",
-    "version": "0.2.0",
+    "version": "0.2.2",
     "license": "ISC",
     "repository": {
         "type": "git",
@@ -29,7 +29,7 @@
     ],
     "main": "./dist/index.mjs",
     "module": "./dist/index.mjs",
-    "types": "./declarations/index.d.ts",
+    "types": "./dist/index.d.ts",
     "exports": {
         ".": "./dist/index.mjs",
         "./style": "./style/",
@@ -57,12 +57,13 @@
         "dist/"
     ],
     "scripts": {
-        "build": "npm run build:style && npm run build:doc && npm run build:lib",
-        "build:min": "npm run build:style && npm run build:doc && npm run build:lib:min",
+        "build": "npm run build:style && npm run build:doc && npm run build:lib && npm run build:types",
+        "build:min": "npm run build:style && npm run build:doc && npm run build:lib:min && npm run build:types",
         "build:lib": "rimraf ./dist && esbuild --bundle --external:react --external:react-dom --format=esm --target=es2022 --platform=browser --outfile=./dist/index.mjs ./src/index.ts",
         "build:lib:min": "npm run build:lib -- --minify",
         "build:doc": "typedoc --out typedoc --exclude \"**/examples/**/*.tsx\" --excludeInternal --disableSources --excludePrivate --excludeProtected --readme none ./src",
         "build:style": "sass style/underline.scss style/underline.css && sass style/gray.scss style/gray.css && sass style/light.scss style/light.css && sass style/dark.scss style/dark.css",
+        "build:types": "tsc --emitDeclarationOnly --declaration --outDir dist/",
         "test": "tsc --project tsconfig.json --noEmit",
         "lint": "eslint src/*",
         "format": "prettier --write './style/*.scss' './{src,declarations}/**/(*.ts|*.tsx|*.html)' package.json"
@@ -71,21 +72,23 @@
         "react": "^18.0.0",
         "react-dom": "^18.0.0"
     },
-    "eslintConfig": {
-        "extends": "react-app"
+    "dependencies": {
+        "ulidx": "^2.2.1"
     },
-    "dependencies": {},
     "devDependencies": {
         "@types/node": "^20.8.7",
         "@types/prismjs": "^1.26.0",
         "@types/react": "^18.2.31",
         "@types/react-dom": "^18.0.1",
+        "@typescript-eslint/eslint-plugin": "^6.15.0",
+        "@typescript-eslint/parser": "^6.15.0",
         "esbuild": "^0.19.5",
+        "eslint": "^8.56.0",
+        "eslint-plugin-react": "^7.33.2",
         "prettier": "^3.0.0",
         "prismjs": "^1.28.0",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
-        "react-scripts": "5.0.1",
         "rimraf": "^5.0.5",
         "sass": "^1.50.0",
         "typedoc": "^0.25.0",

package/tsconfig.json

@@ -4,6 +4,7 @@
         "sourceMap": true,
         "noImplicitAny": true,
         "module": "ES6",
+        "moduleResolution": "node",
         "target": "ES6",
         "stripInternal": true,
         "alwaysStrict": true,