blue-react 10.0.0-rc1 → 10.0.0-rc2

package/dist/types/components/SidebarMenuItem.d.ts

@@ -1,22 +1,21 @@
-/// <reference types="react" />
-import { MenuItemProps } from "./MenuItem";
-export interface SidebarMenuItemProps extends MenuItemProps {
-    outerClass?: string;
-}
-/**
- * @deprecated `MenuItem` now has all the features of `SidebarMenuItem`. Use `MenuItem` instead.
- * Extends `MenuItem` with following features:
- * * Shows provided label as tooltip if sidebar is closed.
- * * Children will be displayed on the right side of the parent item.
- *
- * **Important!** Set the following props to the surrounding `SidebarMenu` to provide problems with tooltips:
- * ```jsx
- * <SidebarMenu
- *     sidebarClass="overflow-visible"
- *     menuClass="overflow-visible"
- * >
- *     ...
- * </SidebarMenu>
- * ```
- */
-export default function SidebarMenuItem({ outerClass, children, onClick, ...props }: SidebarMenuItemProps): JSX.Element;
+import { MenuItemProps } from "./MenuItem";
+export interface SidebarMenuItemProps extends MenuItemProps {
+    outerClass?: string;
+}
+/**
+ * @deprecated `MenuItem` now has all the features of `SidebarMenuItem`. Use `MenuItem` instead.
+ * Extends `MenuItem` with following features:
+ * * Shows provided label as tooltip if sidebar is closed.
+ * * Children will be displayed on the right side of the parent item.
+ *
+ * **Important!** Set the following props to the surrounding `SidebarMenu` to provide problems with tooltips:
+ * ```jsx
+ * <SidebarMenu
+ *     sidebarClass="overflow-visible"
+ *     menuClass="overflow-visible"
+ * >
+ *     ...
+ * </SidebarMenu>
+ * ```
+ */
+export default function SidebarMenuItem({ outerClass, children, onClick, ...props }: SidebarMenuItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/SidebarToggler.d.ts

@@ -1,10 +1,10 @@
-import { MouseEventHandler, ReactNode } from "react";
-export interface SidebarTogglerProps {
-    className?: string;
-    sidebarToggleIconComponent: ReactNode;
-    onClick: MouseEventHandler<HTMLButtonElement>;
-}
-/**
- * Button to toggle sidebar state. Designed for internal use inside of `Layout`.
- */
-export default function SidebarToggler({ className, sidebarToggleIconComponent, onClick }: SidebarTogglerProps): JSX.Element;
+import { MouseEventHandler, ReactNode } from "react";
+export interface SidebarTogglerProps {
+    className?: string;
+    sidebarToggleIconComponent: ReactNode;
+    onClick: MouseEventHandler<HTMLButtonElement>;
+}
+/**
+ * Button to toggle sidebar state. Designed for internal use inside of `Layout`.
+ */
+export default function SidebarToggler({ className, sidebarToggleIconComponent, onClick }: SidebarTogglerProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/SlimContainer.d.ts

@@ -1,10 +1,10 @@
-import { ReactNode } from "react";
-export interface SlimContainerProps {
-    children?: ReactNode;
-    className?: string;
-    innerClassName?: string;
-}
-/**
- * Shortcut for a combination using Bootstrap's Grid System to create a slim responsive container.
- */
-export default function SlimContainer({ children, className, innerClassName }: SlimContainerProps): JSX.Element;
+import { ReactNode } from "react";
+export interface SlimContainerProps {
+    children?: ReactNode;
+    className?: string;
+    innerClassName?: string;
+}
+/**
+ * Shortcut for a combination using Bootstrap's Grid System to create a slim responsive container.
+ */
+export default function SlimContainer({ children, className, innerClassName }: SlimContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Status.d.ts

@@ -1,12 +1,12 @@
-import { ReactNode } from "react";
-import { StatusAlert, StatusType } from "./shared";
-export interface StatusProps {
-    alert?: StatusAlert;
-    onUnsetAlert?: () => void;
-    successIcon?: ReactNode;
-    infoIcon?: ReactNode;
-    warningIcon?: ReactNode;
-    dangerIcon?: ReactNode;
-    status?: StatusType;
-}
-export default function Status({ alert, onUnsetAlert, successIcon, infoIcon, warningIcon, dangerIcon, status }: StatusProps): JSX.Element;
+import { ReactNode } from "react";
+import { StatusAlert, StatusType } from "./shared";
+export interface StatusProps {
+    alert?: StatusAlert;
+    onUnsetAlert?: () => void;
+    successIcon?: ReactNode;
+    infoIcon?: ReactNode;
+    warningIcon?: ReactNode;
+    dangerIcon?: ReactNode;
+    status?: StatusType;
+}
+export default function Status({ alert, onUnsetAlert, successIcon, infoIcon, warningIcon, dangerIcon, status }: StatusProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/StatusProvider.d.ts

@@ -1,15 +1,15 @@
-import { ReactNode } from "react";
-import { StatusAlert, StatusType } from "./shared";
-export interface StatusProviderProps {
-    children?: ReactNode;
-    successIcon?: ReactNode;
-    infoIcon?: ReactNode;
-    warningIcon?: ReactNode;
-    dangerIcon?: ReactNode;
-}
-declare const StatusProvider: ({ children, successIcon, infoIcon, warningIcon, dangerIcon, ...rest }: StatusProviderProps) => JSX.Element;
-declare const useStatus: () => {
-    setAlert: (alert: StatusAlert | null) => void;
-    setStatus: (status: StatusType) => void;
-};
-export { useStatus, StatusProvider };
+import { ReactNode } from "react";
+import { StatusAlert, StatusType } from "./shared";
+export interface StatusProviderProps {
+    children?: ReactNode;
+    successIcon?: ReactNode;
+    infoIcon?: ReactNode;
+    warningIcon?: ReactNode;
+    dangerIcon?: ReactNode;
+}
+declare const StatusProvider: ({ children, successIcon, infoIcon, warningIcon, dangerIcon, ...rest }: StatusProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const useStatus: () => {
+    setAlert: (alert: StatusAlert | null) => void;
+    setStatus: (status: StatusType) => void;
+};
+export { useStatus, StatusProvider };

package/dist/types/components/Switch.d.ts

@@ -1,33 +1,33 @@
-import React, { ReactNode } from "react";
-export interface SwitchProps {
-    className?: string;
-    checked?: boolean;
-    onChange?: (event: React.ChangeEvent) => void;
-    /**
-     * Sets label inside of the switch. If you set this, you should also set the className "lg" to make the switch larger.
-     */
-    sliderLabel?: string;
-    /**
-     * You can change the type of the wrapper element. If you do, the `onChange` event might not be triggered.
-     */
-    elementType?: string;
-    disabled?: boolean;
-    /**
-     * Set prop to use the older look and feel. Will disappear in future releases.
-     */
-    legacy?: boolean;
-    label?: ReactNode | string;
-}
-/**
- * @deprecated
- * Use Bootstrap's `.form-check.form-switch` instead:
- * https://getbootstrap.com/docs/5.2/forms/checks-radios/#switches
- *
- * For now, this component acts as proxy for Bootstrap's Switch.
- * To place a label next to the switch, use the new `label` prop.
- *
- * Migrate to Blue React 8.4.0 and use legacy support: Set the `label` with a string. Or set the `legacy` prop to use the previous look and behaviour.
- */
-export default function Switch({ className, checked, onChange, sliderLabel, disabled, elementType, legacy, label }: SwitchProps): React.ReactElement<{
-    className: string;
-}, string | React.JSXElementConstructor<any>>;
+import React, { ReactNode } from "react";
+export interface SwitchProps {
+    className?: string;
+    checked?: boolean;
+    onChange?: (event: React.ChangeEvent) => void;
+    /**
+     * Sets label inside of the switch. If you set this, you should also set the className "lg" to make the switch larger.
+     */
+    sliderLabel?: string;
+    /**
+     * You can change the type of the wrapper element. If you do, the `onChange` event might not be triggered.
+     */
+    elementType?: string;
+    disabled?: boolean;
+    /**
+     * Set prop to use the older look and feel. Will disappear in future releases.
+     */
+    legacy?: boolean;
+    label?: ReactNode | string;
+}
+/**
+ * @deprecated
+ * Use Bootstrap's `.form-check.form-switch` instead:
+ * https://getbootstrap.com/docs/5.2/forms/checks-radios/#switches
+ *
+ * For now, this component acts as proxy for Bootstrap's Switch.
+ * To place a label next to the switch, use the new `label` prop.
+ *
+ * Migrate to Blue React 8.4.0 and use legacy support: Set the `label` with a string. Or set the `legacy` prop to use the previous look and behaviour.
+ */
+export default function Switch({ className, checked, onChange, sliderLabel, disabled, elementType, legacy, label }: SwitchProps): React.ReactElement<{
+    className: string;
+}, string | React.JSXElementConstructor<any>>;

package/dist/types/components/ToastProvider.d.ts

@@ -1,22 +1,22 @@
-import { ReactNode } from "react";
-export interface ToastProviderProps {
-    children?: ReactNode;
-    successIcon?: ReactNode;
-    infoIcon?: ReactNode;
-    warningIcon?: ReactNode;
-    dangerIcon?: ReactNode;
-}
-export declare type ToastItemType = "success" | "danger" | "info" | "warning";
-export interface ToastItem {
-    type: ToastItemType;
-    title?: string;
-    message?: string;
-}
-/**
- * Push notifications to your visitors using Bootstrap's toast component.
- */
-export declare function ToastProvider({ children, successIcon, infoIcon, warningIcon, dangerIcon }: ToastProviderProps): JSX.Element;
-export declare const useToast: () => {
-    addToast: (toastItem: ToastItem) => void;
-    clearToasts: () => void;
-};
+import { ReactNode } from "react";
+export interface ToastProviderProps {
+    children?: ReactNode;
+    successIcon?: ReactNode;
+    infoIcon?: ReactNode;
+    warningIcon?: ReactNode;
+    dangerIcon?: ReactNode;
+}
+export type ToastItemType = "success" | "danger" | "info" | "warning";
+export interface ToastItem {
+    type: ToastItemType;
+    title?: string;
+    message?: string;
+}
+/**
+ * Push notifications to your visitors using Bootstrap's toast component.
+ */
+export declare function ToastProvider({ children, successIcon, infoIcon, warningIcon, dangerIcon }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare const useToast: () => {
+    addToast: (toastItem: ToastItem) => void;
+    clearToasts: () => void;
+};

package/dist/types/components/Utilities.d.ts

@@ -1,41 +1,41 @@
-import { startLoading, finishLoading, showSuccess, hideSuccess, resetAlertMessage, setAlertMessage, scrollToTop, fetchData } from "blue-web/dist/js/utils";
-/**
- * @deprecated Use (el as HTMLElement).classList.contains("my-class") instead.
- */
-export declare function hasClass(el: HTMLElement | null, className: string): boolean;
-/**
- * @deprecated Use (el as HTMLElement).classList.add("my-class") instead.
- */
-export declare function addClass(el: HTMLElement | null, className: string): void;
-/**
- * @deprecated Use (el as HTMLElement).classList.remove("my-class") instead.
- */
-export declare function removeClass(el: HTMLElement | null, className: string): void;
-/**
- * @deprecated Use (el as HTMLElement).classList.toggle("my-class") instead.
- */
-export declare function toggleClass(element: HTMLElement | null, className: string): void;
-/**
- * @deprecated Is handled inside of `ActioMenu` component now
- */
-export declare function toggleActions(): void;
-/**
- * @deprecated In future versions of Blue React, you will need to use utils of Blue Web directly.
- */
-declare const _default: {
-    hasClass: typeof hasClass;
-    addClass: typeof addClass;
-    removeClass: typeof removeClass;
-    toggleClass: typeof toggleClass;
-    startLoading: typeof startLoading;
-    finishLoading: typeof finishLoading;
-    showSuccess: typeof showSuccess;
-    hideSuccess: typeof hideSuccess;
-    toggleActions: typeof toggleActions;
-    resetAlertMessage: typeof resetAlertMessage;
-    setAlertMessage: typeof setAlertMessage;
-    guid: () => string;
-    scrollToTop: typeof scrollToTop;
-    fetchData: typeof fetchData;
-};
-export default _default;
+import { startLoading, finishLoading, showSuccess, hideSuccess, resetAlertMessage, setAlertMessage, scrollToTop, fetchData } from "blue-web/dist/js/utils";
+/**
+ * @deprecated Use (el as HTMLElement).classList.contains("my-class") instead.
+ */
+export declare function hasClass(el: HTMLElement | null, className: string): boolean;
+/**
+ * @deprecated Use (el as HTMLElement).classList.add("my-class") instead.
+ */
+export declare function addClass(el: HTMLElement | null, className: string): void;
+/**
+ * @deprecated Use (el as HTMLElement).classList.remove("my-class") instead.
+ */
+export declare function removeClass(el: HTMLElement | null, className: string): void;
+/**
+ * @deprecated Use (el as HTMLElement).classList.toggle("my-class") instead.
+ */
+export declare function toggleClass(element: HTMLElement | null, className: string): void;
+/**
+ * @deprecated Is handled inside of `ActioMenu` component now
+ */
+export declare function toggleActions(): void;
+/**
+ * @deprecated In future versions of Blue React, you will need to use utils of Blue Web directly.
+ */
+declare const _default: {
+    hasClass: typeof hasClass;
+    addClass: typeof addClass;
+    removeClass: typeof removeClass;
+    toggleClass: typeof toggleClass;
+    startLoading: typeof startLoading;
+    finishLoading: typeof finishLoading;
+    showSuccess: typeof showSuccess;
+    hideSuccess: typeof hideSuccess;
+    toggleActions: typeof toggleActions;
+    resetAlertMessage: typeof resetAlertMessage;
+    setAlertMessage: typeof setAlertMessage;
+    guid: () => string;
+    scrollToTop: typeof scrollToTop;
+    fetchData: typeof fetchData;
+};
+export default _default;

package/dist/types/components/shared.d.ts

@@ -1,15 +1,15 @@
-export declare type breakOption = "sm" | "md" | "lg" | "xl";
-export declare type ModalType = "ask" | "tell" | "verify";
-export declare type StatusType = null | "loading" | "success" | "info" | "warning" | "danger";
-export interface StatusAlert {
-    title?: string;
-    alertClassName?: string;
-    close?: boolean;
-    detailText?: string;
-    status?: StatusType;
-}
-interface Phrases {
-    [key: string]: string[];
-}
-export declare function getPhrase(keyword: string, countryCode?: string | undefined, _phrases?: Phrases | undefined): string;
-export {};
+export type breakOption = "sm" | "md" | "lg" | "xl";
+export type ModalType = "ask" | "tell" | "verify";
+export type StatusType = null | "loading" | "success" | "info" | "warning" | "danger";
+export interface StatusAlert {
+    title?: string;
+    alertClassName?: string;
+    close?: boolean;
+    detailText?: string;
+    status?: StatusType;
+}
+interface Phrases {
+    [key: string]: string[];
+}
+export declare function getPhrase(keyword: string, countryCode?: string | undefined, _phrases?: Phrases | undefined): string;
+export {};

package/index.d.ts

@@ -1,7 +1,6 @@
 declare global {
     interface Window {
-        blueLayoutRef: any
-        toggleSidebarEvent: any
+        blueHashRouterRef: any
     }
 }
 export default global
@@ -15,21 +14,18 @@ export { AProps } from "./dist/types/components/A"
 export { default as ActionMenu } from "./dist/types/components/ActionMenu"
 export { ActionMenuProps } from "./dist/types/components/ActionMenu"
 
-export { default as ActionMenuSwitch } from "./dist/types/components/ActionMenuSwitch"
-export { ActionMenuSwitchProps } from "./dist/types/components/ActionMenuSwitch"
-
 export { default as ActionMenuItem } from "./dist/types/components/ActionMenuItem"
 export { ActionMenuItemProps } from "./dist/types/components/ActionMenuItem"
 
 export { default as Body } from "./dist/types/components/Body"
 export { BodyProps } from "./dist/types/components/Body"
 
-export { default as Caret } from "./dist/types/components/Caret"
-export { CaretProps } from "./dist/types/components/Caret"
-
 export { default as Chevron } from "./dist/types/components/Chevron"
 export { ChevronProps } from "./dist/types/components/Chevron"
 
+export { default as HashRouter } from "./dist/types/components/HashRouter"
+export { HashRouterProps } from "./dist/types/components/HashRouter"
+
 export { default as Header } from "./dist/types/components/Header"
 export { HeaderProps } from "./dist/types/components/Header"
 
@@ -71,10 +67,10 @@ export { SlimContainerProps } from "./dist/types/components/SlimContainer"
 export { default as Status } from "./dist/types/components/Status"
 export { StatusProps } from "./dist/types/components/Status"
 
-export { StatusProvider, useStatus } from "./dist/types/components/StatusProvider"
-
-export { default as Switch } from "./dist/types/components/Switch"
-export { SwitchProps } from "./dist/types/components/Switch"
+export {
+    StatusProvider,
+    useStatus
+} from "./dist/types/components/StatusProvider"
 
 export {
     ToastProvider,

package/index.js

@@ -1,30 +1,56 @@
-exports.A = require("./dist/components/A.js")["default"]
-exports.ActionMenu = require("./dist/components/ActionMenu.js")["default"]
-exports.ActionMenuSwitch = require("./dist/components/ActionMenuSwitch.js")["default"]
-exports.ActionMenuItem = require("./dist/components/ActionMenuItem.js")["default"]
-exports.Body = require("./dist/components/Body.js")["default"]
-exports.Caret = require("./dist/components/Caret.js")["default"]
-exports.Chevron = require("./dist/components/Chevron.js")["default"]
-exports.HashRouter = require("./dist/components/HashRouter.js")["default"]
-exports.Layout = require("./dist/components/Layout.js")["default"]
-exports.Header = require("./dist/components/Header.js")["default"]
-exports.HeaderTitle = require("./dist/components/HeaderTitle.js")["default"]
-exports.IconMenuItem = require("./dist/components/IconMenuItem.js")["default"]
-exports.Intro = require("./dist/components/Intro.js")["default"]
-exports.MenuItem = require("./dist/components/MenuItem.js")["default"]
-exports.Modal = require("./dist/components/Modal.js")["default"]
-exports.ModalProvider = require("./dist/components/ModalProvider.js")["ModalProvider"]
-exports.useModal = require("./dist/components/ModalProvider.js")["useModal"]
-exports.Outside = require("./dist/components/Outside.js")["default"]
-exports.Page = require("./dist/components/Page.js")["default"]
-exports.Search = require("./dist/components/Search.js")["default"]
-exports.SidebarMenu = require("./dist/components/SidebarMenu.js")["default"]
-exports.SidebarMenuItem = require("./dist/components/SidebarMenuItem.js")["default"]
-exports.SlimContainer = require("./dist/components/SlimContainer.js")["default"]
-exports.Status = require("./dist/components/Status.js")["default"]
-exports.StatusProvider = require("./dist/components/StatusProvider.js")["StatusProvider"]
-exports.useStatus = require("./dist/components/StatusProvider.js")["useStatus"]
-exports.Switch = require("./dist/components/Switch.js")["default"]
-exports.ToastProvider = require("./dist/components/ToastProvider.js")["ToastProvider"]
-exports.useToast = require("./dist/components/ToastProvider.js")["useToast"]
-exports.Utilities = require("./dist/components/Utilities.js")["default"]
+// Import statements
+import A from "./dist/components/A.js"
+import ActionMenu from "./dist/components/ActionMenu.js"
+import ActionMenuItem from "./dist/components/ActionMenuItem.js"
+import Body from "./dist/components/Body.js"
+import Chevron from "./dist/components/Chevron.js"
+import HashRouter from "./dist/components/HashRouter.js"
+import Layout from "./dist/components/Layout.js"
+import Header from "./dist/components/Header.js"
+import HeaderTitle from "./dist/components/HeaderTitle.js"
+import IconMenuItem from "./dist/components/IconMenuItem.js"
+import Intro from "./dist/components/Intro.js"
+import MenuItem from "./dist/components/MenuItem.js"
+import Modal from "./dist/components/Modal.js"
+import { ModalProvider, useModal } from "./dist/components/ModalProvider.js"
+import Outside from "./dist/components/Outside.js"
+import Page from "./dist/components/Page.js"
+import Search from "./dist/components/Search.js"
+import SidebarMenu from "./dist/components/SidebarMenu.js"
+import SidebarMenuItem from "./dist/components/SidebarMenuItem.js"
+import SlimContainer from "./dist/components/SlimContainer.js"
+import Status from "./dist/components/Status.js"
+import { StatusProvider, useStatus } from "./dist/components/StatusProvider.js"
+import { ToastProvider, useToast } from "./dist/components/ToastProvider.js"
+import Utilities from "./dist/components/Utilities.js"
+
+// Export statements
+export {
+    A,
+    ActionMenu,
+    ActionMenuItem,
+    Body,
+    Chevron,
+    HashRouter,
+    Layout,
+    Header,
+    HeaderTitle,
+    IconMenuItem,
+    Intro,
+    MenuItem,
+    Modal,
+    ModalProvider,
+    useModal,
+    Outside,
+    Page,
+    Search,
+    SidebarMenu,
+    SidebarMenuItem,
+    SlimContainer,
+    Status,
+    StatusProvider,
+    useStatus,
+    ToastProvider,
+    useToast,
+    Utilities
+}

package/package.json

@@ -1,8 +1,9 @@
 {
     "name": "blue-react",
-    "version": "10.0.0-rc1",
+    "version": "10.0.0-rc2",
     "description": "Blue React Components",
     "license": "LGPL-3.0-or-later",
+    "type": "module",
     "main": "index.js",
     "types": "index.d.ts",
     "homepage": "https://bruegmann.github.io/blue-react/v10",
@@ -14,17 +15,18 @@
         "url": "https://github.com/bruegmann/blue-react/issues"
     },
     "scripts": {
-        "start": "react-scripts start",
-        "build-docs": "react-scripts build && npm run docgen",
-        "build-types": "tsc --declaration --emitDeclarationOnly --declarationDir ./dist/types --noEmit false",
+        "start": "vite",
+        "build-docs": "tsc -b && vite build --base=/blue-react/v10/ && npm run docgen",
+        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+        "preview": "vite preview",
+        "build-types": "tsc -p tsconfig.app.json --declaration --emitDeclarationOnly --declarationDir ./dist/types --noEmit false --composite false",
         "build": "babel ./src/components --out-dir ./dist/components --extensions \".tsx,.js,.ts\"",
-        "build-css": "node ./setVersionToStyleScss.js && node-sass ./dist/style.scss ./dist/style.css && npx postcss ./dist/style.css --use autoprefixer -r && npx postcss ./dist/style.css --use postcss-minify -o ./dist/style.min.css",
-        "build-release": "npm run build-types && npm run build && npm run build-css && npm run docgen",
+        "build-release": "npm run build-types && npm run build && npm run docgen",
         "docgen": "react-docgen ./src/components/ -o ./src/docs/data/docs.json --extension tsx && node followUpDocs && npm run license-report",
         "test": "react-scripts test",
         "eject": "react-scripts eject",
         "predeploy": "npm run build-docs",
-        "deploy": "gh-pages --dist build --dest v10",
+        "deploy": "gh-pages --dist deployment --dest v10",
         "prepublishOnly": "npm i && npm run build-release",
         "release": "npm publish --tag next && npm run deploy",
         "prettier": "npx prettier --write .",
@@ -37,55 +39,36 @@
         "clsx": "^1.1.1"
     },
     "peerDependencies": {
-        "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
     },
     "devDependencies": {
         "@babel/cli": "^7.10.4",
         "@babel/preset-env": "^7.10.4",
         "@babel/preset-react": "^7.10.4",
         "@babel/preset-typescript": "^7.9.0",
-        "@testing-library/jest-dom": "^4.2.4",
-        "@testing-library/react": "^9.5.0",
-        "@testing-library/user-event": "^7.2.1",
         "@types/bootstrap": "^5.0.17",
-        "@types/jest": "^24.9.1",
-        "@types/node": "^12.12.47",
-        "@types/react": "^18.0.9",
-        "@types/react-dom": "^18.0.5",
+        "@types/react": "^19.0.2",
+        "@types/react-dom": "^19.0.2",
         "@types/react-router-dom": "^5.3.3",
         "@types/react-syntax-highlighter": "^13.5.0",
-        "autoprefixer": "^10.3.6",
-        "gh-pages": "^3.1.0",
+        "@typescript-eslint/eslint-plugin": "^7.15.0",
+        "@typescript-eslint/parser": "^7.15.0",
+        "@vitejs/plugin-react": "^4.3.1",
+        "eslint": "^8.57.0",
+        "eslint-plugin-react-hooks": "^4.6.2",
+        "eslint-plugin-react-refresh": "^0.4.7",
+        "gh-pages": "^6.3.0",
         "license-report": "^6.2.0",
-        "lint-staged": "^11.1.2",
-        "node-sass": "^9.0.0",
-        "postcss-cli": "^9.0.1",
-        "postcss-minify": "^1.1.0",
         "prettier": "2.4.1",
-        "react": "^18.1.0",
+        "react": "^19.0.0",
         "react-bootstrap-icons": "^1.9.1",
         "react-docgen": "^5.4.0",
-        "react-dom": "^18.1.0",
-        "react-markdown": "^8.0.3",
+        "react-dom": "^19.0.0",
+        "react-markdown": "^9.0.1",
         "react-router-dom": "^5.3.3",
-        "react-scripts": "^5.0.1",
         "react-syntax-highlighter": "^15.4.3",
-        "reactstrap": "^9.0.0-0",
-        "typescript": "^4.3.5"
-    },
-    "eslintConfig": {
-        "extends": "react-app"
-    },
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
-        ]
+        "sass": "1.77.6",
+        "typescript": "^5.2.2",
+        "vite": "^5.3.4"
     }
 }