@@ -17,6 +17,3 @@ FallBackLoading.propTypes = {
text: PropTypes.string,
};
-FallBackLoading.defaultProps = {
- text: "Loading...",
-};
diff --git a/src/components/misc/Toaster.jsx b/src/components/misc/Toaster.jsx
index 5ff20b3..b5b55aa 100644
--- a/src/components/misc/Toaster.jsx
+++ b/src/components/misc/Toaster.jsx
@@ -16,10 +16,10 @@ function getIcon(color) {
export default function Toaster({
header,
- body,
- color,
- timeout,
- showToggle,
+ body = null,
+ color = "info",
+ timeout = 4000,
+ showToggle = false,
...props
}) {
// state
@@ -53,9 +53,3 @@ Toaster.propTypes = {
showToggle: PropTypes.bool,
};
-Toaster.defaultProps = {
- body: null,
- color: "info",
- timeout: 4000,
- showToggle: false,
-};
diff --git a/src/components/misc/UserBubble.jsx b/src/components/misc/UserBubble.jsx
index c6c6322..ea5d25c 100644
--- a/src/components/misc/UserBubble.jsx
+++ b/src/components/misc/UserBubble.jsx
@@ -6,8 +6,7 @@ import classnames from "classnames";
* @type {component}
* @param props
*/
-export default function UserBubble(props) {
- const { userInfo, size, className, ...elProps } = props;
+export default function UserBubble({ userInfo, size = "sm", className = undefined, ...elProps }) {
const userInitials =
userInfo?.first_name?.charAt(0).concat(userInfo?.last_name?.charAt(0)) ||
@@ -45,7 +44,3 @@ UserBubble.propTypes = {
userInfo: PropTypes.object.isRequired,
};
-UserBubble.defaultProps = {
- size: "sm",
- className: undefined,
-};
diff --git a/src/components/modals/ConfirmModal.jsx b/src/components/modals/ConfirmModal.jsx
index 15e84ee..5bc5b61 100644
--- a/src/components/modals/ConfirmModal.jsx
+++ b/src/components/modals/ConfirmModal.jsx
@@ -1,21 +1,21 @@
import React, { Fragment } from "react";
-import { render, unmountComponentAtNode } from "react-dom";
+import { createRoot } from "react-dom/client";
import PropTypes from "prop-types";
import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from "reactstrap";
function ConfirmModal({
onClose,
- message,
- title,
- confirmText,
- cancelText,
- confirmColor,
- cancelColor,
- className,
- buttonsComponent,
- size,
- bodyComponent,
- modalProps,
+ message = "Are you sure?",
+ title = "Warning!",
+ confirmText = "Ok",
+ cancelText = "Cancel",
+ confirmColor = "primary",
+ cancelColor = "",
+ className = "",
+ buttonsComponent = null,
+ size = null,
+ bodyComponent = null,
+ modalProps = {},
}) {
let buttonsContent = (
@@ -54,19 +54,6 @@ function ConfirmModal({
);
}
-ConfirmModal.defaultProps = {
- message: "Are you sure?",
- title: "Warning!",
- confirmText: "Ok",
- cancelText: "Cancel",
- confirmColor: "primary",
- cancelColor: "",
- className: "",
- buttonsComponent: null,
- size: null,
- bodyComponent: null,
- modalProps: {},
-};
ConfirmModal.propTypes = {
onClose: PropTypes.func.isRequired,
@@ -84,13 +71,15 @@ ConfirmModal.propTypes = {
};
export const confirm = (props) => new Promise((resolve) => {
- let el = document.createElement("div");
+ const el = document.createElement("div");
+ document.body.appendChild(el);
+ const root = createRoot(el);
const handleResolve = (result) => {
- unmountComponentAtNode(el);
- el = null;
+ root.unmount();
+ el.remove();
resolve(result);
};
- render(, el);
+ root.render();
});
export default ConfirmModal;
diff --git a/src/components/nav/HoverDropdown.jsx b/src/components/nav/HoverDropdown.jsx
index fc0537d..0a35bc4 100644
--- a/src/components/nav/HoverDropdown.jsx
+++ b/src/components/nav/HoverDropdown.jsx
@@ -6,8 +6,7 @@ import { Dropdown } from "reactstrap";
* @type {component}
* @param props
*/
-function HoverDropdown(props) {
- const { defaultOpen, ...toPassProps } = props;
+function HoverDropdown({ defaultOpen = false, ...toPassProps }) {
const [isOpen, setIsOpen] = React.useState(defaultOpen);
@@ -23,10 +22,6 @@ function HoverDropdown(props) {
);
}
-HoverDropdown.defaultProps = {
- defaultOpen: false,
-};
-
HoverDropdown.propTypes = {
...Dropdown.propTypes,
defaultOpen: PropTypes.bool,
diff --git a/src/components/nav/NavLink.jsx b/src/components/nav/NavLink.jsx
index aceaf1c..9d3f3cd 100644
--- a/src/components/nav/NavLink.jsx
+++ b/src/components/nav/NavLink.jsx
@@ -14,7 +14,7 @@ const type2ClassnameMap = {
};
// component
-export default function NavLink({ type, children, className, ...props }) {
+export default function NavLink({ type = "default", children, className = null, ...props }) {
return (
pp.id === np.id);
diff --git a/src/components/time/DateHoverable.jsx b/src/components/time/DateHoverable.jsx
index 99df407..0e37197 100644
--- a/src/components/time/DateHoverable.jsx
+++ b/src/components/time/DateHoverable.jsx
@@ -16,8 +16,7 @@ import {
import { nanoid } from "nanoid";
-function DateHoverable(props) {
- const { id, value, className, noHover, ago, showAgo, format: formatProp, showFormat, ...rest } = props;
+function DateHoverable({ id = undefined, value, className = undefined, noHover = false, ago = false, showAgo = false, format: formatProp = "PPpppp", showFormat = "p PP", ...rest }) {
const [utcVal, userTz, userTzVal] = React.useMemo(() => {
const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
@@ -77,14 +76,4 @@ DateHoverable.propTypes = {
showAgo: PropTypes.bool,
};
-DateHoverable.defaultProps = {
- ago: false,
- className: undefined,
- format: "PPpppp",
- id: undefined,
- noHover: false,
- showAgo: false,
- showFormat: "p PP",
-};
-
export default React.memo(DateHoverable);
diff --git a/src/components/time/ElasticTimePicker.jsx b/src/components/time/ElasticTimePicker.jsx
index 522f049..fb2af70 100644
--- a/src/components/time/ElasticTimePicker.jsx
+++ b/src/components/time/ElasticTimePicker.jsx
@@ -35,9 +35,7 @@ function intervalToTime(ti) {
* />
* ```
*/
-function ElasticTimePicker(props) {
- const { onChange, size, defaultSelected, intervals, showInfinity, ...rest } =
- props;
+function ElasticTimePicker({ onChange, size = "sm", defaultSelected = "24h", intervals = Object.keys(TIME_INTERVALS), showInfinity = false, ...rest }) {
// state
const [selected, setSelected] = React.useState(defaultSelected);
@@ -86,13 +84,6 @@ function ElasticTimePicker(props) {
);
}
-ElasticTimePicker.defaultProps = {
- size: "sm",
- defaultSelected: "24h",
- intervals: Object.keys(TIME_INTERVALS),
- showInfinity: false,
-};
-
ElasticTimePicker.propTypes = {
onChange: PropTypes.func.isRequired,
defaultSelected: PropTypes.string,
diff --git a/src/stores/useTimePickerStore.jsx b/src/stores/useTimePickerStore.jsx
index 5fa8d0b..6686018 100644
--- a/src/stores/useTimePickerStore.jsx
+++ b/src/stores/useTimePickerStore.jsx
@@ -1,6 +1,6 @@
-import create from "zustand";
-import { persist } from "zustand/middleware";
+import { create } from "zustand";
+import { persist, createJSONStorage } from "zustand/middleware";
// constants
const DEFAULT_RANGE_DATEFORMAT_MAP = {
@@ -31,7 +31,7 @@ const useTimePickerStore = create(
}),
{
name: "certegoUI-useTimePickerStore", // unique name
- getStorage: () => localStorage,
+ storage: createJSONStorage(() => localStorage),
}
)
);
diff --git a/src/stores/useToastr.jsx b/src/stores/useToastr.jsx
index e94ee00..1315f5a 100644
--- a/src/stores/useToastr.jsx
+++ b/src/stores/useToastr.jsx
@@ -1,4 +1,4 @@
-import create from "zustand";
+import { create } from "zustand";
import { nanoid } from "nanoid";
// store
diff --git a/vitest.config.mjs b/vitest.config.mjs
new file mode 100644
index 0000000..16d16eb
--- /dev/null
+++ b/vitest.config.mjs
@@ -0,0 +1,12 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+ plugins: [react({ include: /\.(jsx?|tsx?)$/ })],
+ test: {
+ environment: "jsdom",
+ globals: true,
+ setupFiles: ["./vitest.setup.mjs"],
+ include: ["src/**/*.{test,spec}.{js,jsx}"],
+ },
+});
diff --git a/vitest.setup.mjs b/vitest.setup.mjs
new file mode 100644
index 0000000..d0de870
--- /dev/null
+++ b/vitest.setup.mjs
@@ -0,0 +1 @@
+import "@testing-library/jest-dom";