From 962f081ddc03b25f1ce210d6363068ec29015ab3 Mon Sep 17 00:00:00 2001 From: Antonette Caldwell Date: Sun, 27 Aug 2023 19:41:52 -0500 Subject: [PATCH 1/6] created hooks library Signed-off-by: Antonette Caldwell --- packages/hooks/.gitignore | 26 +++++ packages/hooks/package.json | 27 +++++ .../hooks/src/context/CytoscapeProvider.ts | 19 ++++ packages/hooks/src/context/ReduxProvider.tsx | 21 ++++ packages/hooks/src/context/useRedux.ts | 15 +++ packages/hooks/src/index.ts | 7 ++ packages/hooks/src/redux/store.ts | 8 ++ packages/hooks/src/useCytoscape.ts | 7 ++ packages/hooks/src/useDebounced.ts | 26 +++++ packages/hooks/src/useDraggable.ts | 52 +++++++++ packages/hooks/src/useFullScreen.ts | 45 ++++++++ packages/hooks/src/useLocalStorage.ts | 15 +++ packages/hooks/src/useOverlayedComponent.ts | 102 ++++++++++++++++++ packages/hooks/src/usePauseEvent.ts | 13 +++ packages/hooks/src/useThrottledDragOver.ts | 29 +++++ packages/hooks/tsconfig.json | 27 +++++ yarn.lock | 90 +++++++++++++++- 17 files changed, 524 insertions(+), 5 deletions(-) create mode 100644 packages/hooks/.gitignore create mode 100644 packages/hooks/package.json create mode 100644 packages/hooks/src/context/CytoscapeProvider.ts create mode 100644 packages/hooks/src/context/ReduxProvider.tsx create mode 100644 packages/hooks/src/context/useRedux.ts create mode 100644 packages/hooks/src/index.ts create mode 100644 packages/hooks/src/redux/store.ts create mode 100644 packages/hooks/src/useCytoscape.ts create mode 100644 packages/hooks/src/useDebounced.ts create mode 100644 packages/hooks/src/useDraggable.ts create mode 100644 packages/hooks/src/useFullScreen.ts create mode 100644 packages/hooks/src/useLocalStorage.ts create mode 100644 packages/hooks/src/useOverlayedComponent.ts create mode 100644 packages/hooks/src/usePauseEvent.ts create mode 100644 packages/hooks/src/useThrottledDragOver.ts create mode 100644 packages/hooks/tsconfig.json diff --git a/packages/hooks/.gitignore b/packages/hooks/.gitignore new file mode 100644 index 000000000..a3e304c22 --- /dev/null +++ b/packages/hooks/.gitignore @@ -0,0 +1,26 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local +.eslintcache + +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +dist/** \ No newline at end of file diff --git a/packages/hooks/package.json b/packages/hooks/package.json new file mode 100644 index 000000000..95780bcd8 --- /dev/null +++ b/packages/hooks/package.json @@ -0,0 +1,27 @@ +{ + "name": "@layer5/sistent-hooks", + "version": "0.0.0", + "description": "Reusable React Components", + "main": "dist/index.umd.js", + "module": "dist/index.mjs", + "types": "dist/index.d.ts", + "files": [ + "dist" + ], + "scripts": { + "build": "tsup src/index.ts --format esm,cjs --dts --external react", + "dev": "tsup src/index.ts --format esm,cjs --watch --dts --external react" + }, + "dependencies": { + "@reduxjs/toolkit": "^1.9.5", + "@types/cytoscape": "^3.19.10", + "@types/react": "^18.2.21", + "cytoscape": "^3.26.0", + "react": "^18.2.0", + "react-redux": "^8.1.2", + "redux": "^4.2.1", + "rxjs": "^7.8.1", + "tsup": "^7.2.0", + "typescript": "^5.2.2" + } +} diff --git a/packages/hooks/src/context/CytoscapeProvider.ts b/packages/hooks/src/context/CytoscapeProvider.ts new file mode 100644 index 000000000..5ab39cda2 --- /dev/null +++ b/packages/hooks/src/context/CytoscapeProvider.ts @@ -0,0 +1,19 @@ +import cytoscape from 'cytoscape'; +import { createContext, useContext } from 'react'; + +export interface CytoscapeContextInterface { + cytoscape: cytoscape.Core; + container: HTMLElement; +} + +export const CytoscapeContext = createContext(null); + +export const CytoscapeProvider = CytoscapeContext.Provider; + +export function useCytoscapeContext() { + const context = useContext(CytoscapeContext); + if (!context) { + throw new Error('useCytoscapeContext must be used within a CytoscapeContextProvider'); + } + return context; +} diff --git a/packages/hooks/src/context/ReduxProvider.tsx b/packages/hooks/src/context/ReduxProvider.tsx new file mode 100644 index 000000000..6b0479dea --- /dev/null +++ b/packages/hooks/src/context/ReduxProvider.tsx @@ -0,0 +1,21 @@ +import React, { ReactNode, createContext, useContext } from 'react'; +import { Provider } from 'react-redux'; +import { store } from '../redux/store'; + +type ReduxProviderProps = { + children: ReactNode; +}; + +const ReduxContext = createContext({}); + +export function useRedux() { + return useContext(ReduxContext); +} + +export function ReduxProvider({ children }: ReduxProviderProps) { + return ( + + {children} + + ); +} diff --git a/packages/hooks/src/context/useRedux.ts b/packages/hooks/src/context/useRedux.ts new file mode 100644 index 000000000..2ebf8d719 --- /dev/null +++ b/packages/hooks/src/context/useRedux.ts @@ -0,0 +1,15 @@ +import { createContext, useContext } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { AppDispatch, RootState, store } from '../redux/store'; + +const ReduxContext = createContext(store); + +export function useReduxState(selector: (state: RootState) => T): T { + const store = useContext(ReduxContext); + return useSelector(selector); +} + +export function useReduxDispatch(): AppDispatch { + const store = useContext(ReduxContext); + return useDispatch(); +} diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts new file mode 100644 index 000000000..c24142099 --- /dev/null +++ b/packages/hooks/src/index.ts @@ -0,0 +1,7 @@ +export { ReduxProvider } from './context/ReduxProvider'; +export { useReduxState, useReduxDispatch } from './context/useRedux'; +export { useDebounced } from './useDebounced'; +export { useLocalStorage } from './useLocalStorage'; +export { usePauseEvent } from './usePauseEvent'; +export { useThrottledDragOver } from './useThrottledDragOver'; +export * from '.'; diff --git a/packages/hooks/src/redux/store.ts b/packages/hooks/src/redux/store.ts new file mode 100644 index 000000000..f0af22e8a --- /dev/null +++ b/packages/hooks/src/redux/store.ts @@ -0,0 +1,8 @@ +import { configureStore } from '@reduxjs/toolkit'; + +export const store = configureStore({ + reducer: {} +}); + +export type RootState = ReturnType; +export type AppDispatch = typeof store.dispatch; diff --git a/packages/hooks/src/useCytoscape.ts b/packages/hooks/src/useCytoscape.ts new file mode 100644 index 000000000..bdb9b1820 --- /dev/null +++ b/packages/hooks/src/useCytoscape.ts @@ -0,0 +1,7 @@ +import cytoscape from 'cytoscape'; + +import { useCytoscapeContext } from './context/CytoscapeProvider'; + +export function useCytoscape(): cytoscape.Core { + return useCytoscapeContext().cytoscape; +} diff --git a/packages/hooks/src/useDebounced.ts b/packages/hooks/src/useDebounced.ts new file mode 100644 index 000000000..e9c733126 --- /dev/null +++ b/packages/hooks/src/useDebounced.ts @@ -0,0 +1,26 @@ +import { useEffect, useRef } from 'react'; + +export function useDebounced void>(func: T, timeout = 500) { + const timerRef = useRef(); + + useEffect(() => { + const cleanup = () => { + if (timerRef.current) { + clearTimeout(timerRef.current); + } + }; + + return cleanup; + }, []); + + const debouncedFunction = (...args: Parameters) => { + if (timerRef.current) { + clearTimeout(timerRef.current); + } + timerRef.current = window.setTimeout(() => { + func(...args); + }, timeout); + }; + + return debouncedFunction; +} diff --git a/packages/hooks/src/useDraggable.ts b/packages/hooks/src/useDraggable.ts new file mode 100644 index 000000000..05d7a4e64 --- /dev/null +++ b/packages/hooks/src/useDraggable.ts @@ -0,0 +1,52 @@ +import { RefObject, useEffect, useState } from 'react'; + +import { useCytoscapeContext } from './context/CytoscapeProvider'; + +export function useDraggable( + dragReference: RefObject, + componentReference: RefObject +) { + const context = useCytoscapeContext(); + const [{ dx, dy }, setOffset] = useState({ dx: 0, dy: 0 }); + + useEffect(() => { + if (!dragReference.current || !componentReference.current || !context) { + throw new Error(`An error occurred while trying to drag.`); + } + const el = dragReference.current; + + const handleMouseDown: EventListener = (event) => { + const startX = (event as MouseEvent).pageX - dx; + const startY = (event as MouseEvent).pageY - dy; + + const handleMouseMove = (event: Event) => { + const newDx = (event as MouseEvent).pageX - startX; + const newDy = (event as MouseEvent).pageY - startY; + setOffset({ dx: newDx, dy: newDy }); + }; + + document.addEventListener('mousemove', handleMouseMove); + document.addEventListener( + 'mouseup', + () => { + document.removeEventListener('mousemove', handleMouseMove); + }, + { once: true } + ); + }; + + el.addEventListener('mousedown', handleMouseDown); + el.addEventListener('mouseup', handleMouseDown); + + return () => { + el.removeEventListener('mousedown', handleMouseDown); + el.removeEventListener('mouseup', handleMouseDown); + }; + }, [dx, dy, dragReference, componentReference, context]); + + useEffect(() => { + if (componentReference.current) { + componentReference.current.style.transform = `translate3d(${dx}px, ${dy}px, 0)`; + } + }, [componentReference, dx, dy]); +} diff --git a/packages/hooks/src/useFullScreen.ts b/packages/hooks/src/useFullScreen.ts new file mode 100644 index 000000000..09ab464a7 --- /dev/null +++ b/packages/hooks/src/useFullScreen.ts @@ -0,0 +1,45 @@ +import { useCallback, useEffect, useState } from 'react'; + +import { useCytoscapeContext } from './context/CytoscapeProvider'; + +function toggleFullScreen(dom: HTMLElement) { + if (document.fullscreenElement !== dom) { + dom.requestFullscreen; + } else { + if (document.exitFullscreen) { + document.exitFullscreen(); + } + } +} + +export function useFullScreen(container?: HTMLElement | null): { + toggle: () => void; + isFullScreen: boolean; +} { + const context = useCytoscapeContext(); + const [isFullScreen, setFullScreen] = useState(false); + const [element, setElement] = useState(container ? container : context.container); + + // const toggleState = () => setFullScreen((v) => !v) + const toggleState = useCallback(() => { + setFullScreen((prevState) => !prevState); + }, [setFullScreen]); + + useEffect(() => { + document.addEventListener('fullscreenchange', toggleState); + return () => document.removeEventListener('fullscreenchange', toggleState); + }, [toggleState]); + + useEffect(() => { + setElement(container || context.container); + }, [container, context.container]); + + const toggle = useCallback(() => { + toggleFullScreen(element); + }, [element]); + + return { + toggle, + isFullScreen + }; +} diff --git a/packages/hooks/src/useLocalStorage.ts b/packages/hooks/src/useLocalStorage.ts new file mode 100644 index 000000000..9105ea2fb --- /dev/null +++ b/packages/hooks/src/useLocalStorage.ts @@ -0,0 +1,15 @@ +import { useState } from 'react'; + +export function useLocalStorage(key: string, initialValue: T): [T, (newValue: T) => void] { + const [value, setValue] = useState(() => { + const storedValue = localStorage.getItem(key); + return storedValue !== null ? JSON.parse(storedValue) : initialValue; + }); + + const setLocalStorageValue = (newValue: T) => { + localStorage.setItem(key, JSON.stringify(newValue)); + setValue(newValue); + }; + + return [value, setLocalStorageValue]; +} diff --git a/packages/hooks/src/useOverlayedComponent.ts b/packages/hooks/src/useOverlayedComponent.ts new file mode 100644 index 000000000..8afed25e7 --- /dev/null +++ b/packages/hooks/src/useOverlayedComponent.ts @@ -0,0 +1,102 @@ +import cytoscape, { NodeCollection } from 'cytoscape'; +import { useEffect, useState } from 'react'; + +import { useCytoscapeContext } from './context/CytoscapeProvider'; + +export function useOverlayedComponent(): NodeCollection | null { + const context = useCytoscapeContext(); + const [overlayedComponent, setOverlayedComponent] = useState(null); + + useEffect(() => { + const handleMouseMove = (e: MouseEvent) => { + const position = getMousePostitionRelativeToCyCanvas(e); + const component = getOverlayedComponent(context.cytoscape, position); + setOverlayedComponent((prevComponent) => { + if (prevComponent === null) { + return component; + } else { + return component === null ? prevComponent : component; + } + }); + }; + + const cyWrapperDiv = document.getElementById('cyto-wrapper-div'); + if (cyWrapperDiv) { + cyWrapperDiv.addEventListener('mousemove', handleMouseMove); + } + + return () => { + if (cyWrapperDiv) { + cyWrapperDiv.removeEventListener('mousemove', handleMouseMove); + } + }; + }, [context.cytoscape]); + + return overlayedComponent; +} + +type Overlayed = { + x1: number; + x2: number; + y1: number; + y2: number; +}; + +type OverlayedPosition = { + x: number; + y: number; +}; + +export function getMousePostitionRelativeToElement( + e: MouseEvent, + element: HTMLElement +): OverlayedPosition { + const elementBoundingClientRect = element.getBoundingClientRect(); + const mouseX = e.clientX - elementBoundingClientRect.left; + const mouseY = e.clientY - elementBoundingClientRect.top; + return { x: mouseX, y: mouseY }; +} + +export function getMousePostitionRelativeToCyCanvas(e: MouseEvent): OverlayedPosition { + const cyWrapperDiv = document.getElementById('cyto-wrapper-div'); + + if (cyWrapperDiv) { + const elementBoundingClientRect = cyWrapperDiv.getBoundingClientRect(); + const mouseX = e.clientX - elementBoundingClientRect.left; + const mouseY = e.clientY - elementBoundingClientRect.top - 40; // Adjusted by 40 as per your original code + return { x: mouseX, y: mouseY }; + } + + return { x: 0, y: 0 }; +} + +export function getOverlayedComponent( + cy: cytoscape.Core, + position: OverlayedPosition +): cytoscape.NodeCollection | null { + const acceptingNodesCytoSelector = `node[type="NAMESPACE"], node[type="DEPLOYMENT"]`; + + const elements = cy.elements(acceptingNodesCytoSelector); + const overlayedParents: cytoscape.NodeCollection = cy.collection(); + + elements.forEach((ele) => { + const boundingBox = ele.boundingBox(); + if (isOverlayed(boundingBox, position)) { + overlayedParents.merge(ele); + } + }); + + if (overlayedParents.length === 0) { + return null; + } + + if (overlayedParents.length >= 1) { + return overlayedParents; + } + + return null; +} + +export function isOverlayed(bb: Overlayed, position: OverlayedPosition): boolean { + return position.x >= bb.x1 && position.x <= bb.x2 && position.y >= bb.y1 && position.y <= bb.y2; +} diff --git a/packages/hooks/src/usePauseEvent.ts b/packages/hooks/src/usePauseEvent.ts new file mode 100644 index 000000000..008f9e4e1 --- /dev/null +++ b/packages/hooks/src/usePauseEvent.ts @@ -0,0 +1,13 @@ +import { useCallback } from 'react'; + +export function usePauseEvent(): (e: Event) => boolean { + const pauseEvent = useCallback((e: Event) => { + if (e.stopPropagation) e.stopPropagation(); + if (e.preventDefault) e.preventDefault(); + (e as any).cancelBubble = true; + (e as any).returnValue = false; + return false; + }, []); + + return pauseEvent; +} diff --git a/packages/hooks/src/useThrottledDragOver.ts b/packages/hooks/src/useThrottledDragOver.ts new file mode 100644 index 000000000..0fb34a83a --- /dev/null +++ b/packages/hooks/src/useThrottledDragOver.ts @@ -0,0 +1,29 @@ +import { useEffect, useRef } from 'react'; +import { fromEvent, Observable, Subscription } from 'rxjs'; +import { throttleTime } from 'rxjs/operators'; + +export const useThrottledDragOver = ( + element: HTMLElement, + callback: (event: Event) => void +): Subscription | undefined => { + const subscriptionRef = useRef(); + + useEffect(() => { + const dragOver$: Observable = fromEvent(element, 'dragover').pipe( + throttleTime(100, undefined, { leading: true, trailing: true }) + ); + + const subscription: Subscription = dragOver$.subscribe(callback); + subscriptionRef.current = subscription; + + return () => { + if (subscriptionRef.current) { + subscriptionRef.current.unsubscribe(); + } + }; + }, [element, callback]); + + return subscriptionRef.current; +}; + +export default useThrottledDragOver; diff --git a/packages/hooks/tsconfig.json b/packages/hooks/tsconfig.json new file mode 100644 index 000000000..b210dfaee --- /dev/null +++ b/packages/hooks/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": [ + "src/**/*" + ] + } + \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 5d52abc85..66e39230f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1071,7 +1071,7 @@ resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310" integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA== -"@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.1", "@babel/runtime@^7.22.10", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.1", "@babel/runtime@^7.22.10", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.22.11" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.11.tgz#7a9ba3bbe406ad6f9e8dd4da2ece453eb23a77a4" integrity sha512-ee7jVNlWN09+KftVOu9n7S8gQzD/Z6hN/I8VBRXW4P1+Xe7kJGXMwu8vds4aGIMHZnNbdpSWCfZZtinytpcAvA== @@ -2396,6 +2396,16 @@ dependencies: "@babel/runtime" "^7.13.10" +"@reduxjs/toolkit@^1.9.5": + version "1.9.5" + resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.9.5.tgz#d3987849c24189ca483baa7aa59386c8e52077c4" + integrity sha512-Rt97jHmfTeaxL4swLRNPD/zV4OxTes4la07Xc4hetpUW/vc75t5m1ANyxG6ymnEQ2FsLQsoMlYB2vV1sO3m8tQ== + dependencies: + immer "^9.0.21" + redux "^4.2.1" + redux-thunk "^2.4.2" + reselect "^4.1.8" + "@rollup/pluginutils@^5.0.2": version "5.0.3" resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.3.tgz#183126d69aeb1cfa23401d5a71cb4b8c16c4a4e0" @@ -3389,6 +3399,11 @@ dependencies: "@types/node" "*" +"@types/cytoscape@^3.19.10": + version "3.19.10" + resolved "https://registry.yarnpkg.com/@types/cytoscape/-/cytoscape-3.19.10.tgz#f4540749d68cd3db6f89da5197f7ec2a2ca516ee" + integrity sha512-PLsKQcsUd05nz4PYyulIhjkLnlq9oD2WYpswrWOjoqtFZEuuBje0f9fi2zTG5/yfTf5+Gpllf/MPcFmfDzZ24w== + "@types/debug@^4.1.7": version "4.1.8" resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.8.tgz#cef723a5d0a90990313faec2d1e22aee5eecb317" @@ -3471,6 +3486,14 @@ dependencies: "@types/node" "*" +"@types/hoist-non-react-statics@^3.3.1": + version "3.3.1" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" + integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/http-errors@*": version "2.0.1" resolved "https://registry.yarnpkg.com/@types/http-errors/-/http-errors-2.0.1.tgz#20172f9578b225f6c7da63446f56d4ce108d5a65" @@ -3648,7 +3671,7 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@>=16", "@types/react@^18.0.28", "@types/react@^18.2.20": +"@types/react@*", "@types/react@>=16", "@types/react@^18.0.28", "@types/react@^18.2.20", "@types/react@^18.2.21": version "18.2.21" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.21.tgz#774c37fd01b522d0b91aed04811b58e4e0514ed9" integrity sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA== @@ -3713,6 +3736,11 @@ resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.7.tgz#5b06ad6894b236a1d2bd6b2f07850ca5c59cf4d6" integrity sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g== +"@types/use-sync-external-store@^0.0.3": + version "0.0.3" + resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43" + integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA== + "@types/yargs-parser@*": version "21.0.0" resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.0.tgz#0c60e537fa790f5f9472ed2776c2b71ec117351b" @@ -4950,6 +4978,14 @@ csv@^5.5.3: csv-stringify "^5.6.5" stream-transform "^2.1.3" +cytoscape@^3.26.0: + version "3.26.0" + resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.26.0.tgz#b4c6961445fd51e1fd3cca83c3ffe924d9a8abc9" + integrity sha512-IV+crL+KBcrCnVVUCZW+zRRRFUZQcrtdOPXki+o4CFUWLdAEYvuZLcBSJC9EBK++suamERKzeY7roq2hdovV3w== + dependencies: + heap "^0.2.6" + lodash "^4.17.21" + data-urls@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-3.0.2.tgz#9cf24a477ae22bcef5cd5f6f0bfbc1d2d3be9143" @@ -6397,7 +6433,12 @@ headers-polyfill@^3.1.0, headers-polyfill@^3.1.2: resolved "https://registry.yarnpkg.com/headers-polyfill/-/headers-polyfill-3.1.2.tgz#9a4dcb545c5b95d9569592ef7ec0708aab763fbe" integrity sha512-tWCK4biJ6hcLqTviLXVR9DTRfYGQMXEIUj3gwJ2rZ5wO/at3XtkI4g8mCvFdUF9l1KMBNCfmNAdnahm1cgavQA== -hoist-non-react-statics@^3.3.1: +heap@^0.2.6: + version "0.2.7" + resolved "https://registry.yarnpkg.com/heap/-/heap-0.2.7.tgz#1e6adf711d3f27ce35a81fe3b7bd576c2260a8fc" + integrity sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg== + +hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -6506,6 +6547,11 @@ ignore@^5.2.0, ignore@^5.2.4: resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324" integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ== +immer@^9.0.21: + version "9.0.21" + resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.21.tgz#1e025ea31a40f24fb064f1fef23e931496330176" + integrity sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA== + import-fresh@^3.2.1: version "3.3.0" resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b" @@ -8858,6 +8904,18 @@ react-is@^18.0.0, react-is@^18.2.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== +react-redux@^8.1.2: + version "8.1.2" + resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.1.2.tgz#9076bbc6b60f746659ad6d51cb05de9c5e1e9188" + integrity sha512-xJKYI189VwfsFc4CJvHqHlDrzyFTY/3vZACbE+rr/zQ34Xx1wQfB4OTOSeOSNrF6BDVe8OOdxIrAnMGXA3ggfw== + dependencies: + "@babel/runtime" "^7.12.1" + "@types/hoist-non-react-statics" "^3.3.1" + "@types/use-sync-external-store" "^0.0.3" + hoist-non-react-statics "^3.3.2" + react-is "^18.0.0" + use-sync-external-store "^1.0.0" + react-refresh@^0.14.0: version "0.14.0" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e" @@ -8995,6 +9053,18 @@ redent@^3.0.0: indent-string "^4.0.0" strip-indent "^3.0.0" +redux-thunk@^2.4.2: + version "2.4.2" + resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.2.tgz#b9d05d11994b99f7a91ea223e8b04cf0afa5ef3b" + integrity sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q== + +redux@^4.2.1: + version "4.2.1" + resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197" + integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w== + dependencies: + "@babel/runtime" "^7.9.2" + reflect.getprototypeof@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.3.tgz#2738fd896fcc3477ffbd4190b40c2458026b6928" @@ -9099,6 +9169,11 @@ requires-port@^1.0.0: resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ== +reselect@^4.1.8: + version "4.1.8" + resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.8.tgz#3f5dc671ea168dccdeb3e141236f69f02eaec524" + integrity sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ== + resolve-cwd@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d" @@ -9210,7 +9285,7 @@ run-parallel@^1.1.9: dependencies: queue-microtask "^1.2.2" -rxjs@^7.5.5: +rxjs@^7.5.5, rxjs@^7.8.1: version "7.8.1" resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543" integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg== @@ -10132,7 +10207,7 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA== -typescript@*, typescript@^5.1.6: +typescript@*, typescript@^5.1.6, typescript@^5.2.2: version "5.2.2" resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.2.2.tgz#5ebb5e5a5b75f085f22bc3f8460fba308310fa78" integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w== @@ -10284,6 +10359,11 @@ use-sidecar@^1.1.2: detect-node-es "^1.1.0" tslib "^2.0.0" +use-sync-external-store@^1.0.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a" + integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA== + util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" From c012ca2a3de122246798ab632911087af88c5ceb Mon Sep 17 00:00:00 2001 From: Antonette Caldwell Date: Fri, 10 Nov 2023 10:59:47 -0600 Subject: [PATCH 2/6] chore(hooks): configure tsup, eslint and tsconfig fix #114 --- packages/hooks/.eslintignore | 4 + packages/hooks/.eslintrc.cjs | 21 ++ packages/hooks/package.json | 46 ++++- packages/hooks/tsconfig.json | 30 +-- packages/hooks/tsup.config.ts | 18 ++ yarn.lock | 366 +++++++++++++++++++++++++++++++++- 6 files changed, 454 insertions(+), 31 deletions(-) create mode 100644 packages/hooks/.eslintignore create mode 100644 packages/hooks/.eslintrc.cjs create mode 100644 packages/hooks/tsup.config.ts diff --git a/packages/hooks/.eslintignore b/packages/hooks/.eslintignore new file mode 100644 index 000000000..0db9e028b --- /dev/null +++ b/packages/hooks/.eslintignore @@ -0,0 +1,4 @@ +vite.config.ts +.eslintrc.cjs +node_modules +dist \ No newline at end of file diff --git a/packages/hooks/.eslintrc.cjs b/packages/hooks/.eslintrc.cjs new file mode 100644 index 000000000..e5f2c8aad --- /dev/null +++ b/packages/hooks/.eslintrc.cjs @@ -0,0 +1,21 @@ +module.exports = { + root: true, + env: { browser: true, es2020: true }, + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended-type-checked', + 'plugin:@typescript-eslint/stylistic-type-checked' + ], + parserOptions: { + ecmaVersion: 'latest', + sourceType: 'module', + project: ['./tsconfig.json'], + tsconfigRootDir: __dirname, + }, + ignorePatterns: ['dist', '.eslintrc.cjs', 'tsup.config.ts'], + parser: '@typescript-eslint/parser', + plugins: ['react'], + rules: { + '@typescript-eslint/explicit-function-return-type': ['off'] + }, +} diff --git a/packages/hooks/package.json b/packages/hooks/package.json index 95780bcd8..d9a8a74b3 100644 --- a/packages/hooks/package.json +++ b/packages/hooks/package.json @@ -2,26 +2,58 @@ "name": "@layer5/sistent-hooks", "version": "0.0.0", "description": "Reusable React Components", - "main": "dist/index.umd.js", - "module": "dist/index.mjs", - "types": "dist/index.d.ts", + "sideEffects": false, + "exports": { + ".": { + "require": "./dist/index.js", + "import": "./dist/index.js", + "types": "./dist/index.d.ts", + "default": "./dist/index.js" + } + }, + "main": "./dist/index.js", + "module": "./dist/index.js", + "types": "./dist/index.d.ts", "files": [ - "dist" + "dist/**" ], "scripts": { - "build": "tsup src/index.ts --format esm,cjs --dts --external react", - "dev": "tsup src/index.ts --format esm,cjs --watch --dts --external react" + "build": "NODE_ENV=production tsup", + "dev": "NODE_ENV=development tsup" }, "dependencies": { "@reduxjs/toolkit": "^1.9.5", "@types/cytoscape": "^3.19.10", "@types/react": "^18.2.21", "cytoscape": "^3.26.0", - "react": "^18.2.0", + "notistack": "^3.0.1", "react-redux": "^8.1.2", "redux": "^4.2.1", "rxjs": "^7.8.1", "tsup": "^7.2.0", "typescript": "^5.2.2" + }, + "devDependencies": { + "@swc/core": "^1.3.96", + "@typescript-eslint/eslint-plugin": "^6.10.0", + "@typescript-eslint/parser": "^6.10.0", + "eslint": "^8.53.0", + "eslint-plugin-react": "^7.33.2", + "tsconfig": "workspace:^" + }, + "optionalDependencies": { + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "publishConfig": { + "access": "public", + "exports": { + ".": { + "require": "./dist/index.js", + "import": "./dist/index.js", + "types": "./dist/index.d.ts", + "default": "./dist/index.js" + } + } } } diff --git a/packages/hooks/tsconfig.json b/packages/hooks/tsconfig.json index b210dfaee..9e5182c05 100644 --- a/packages/hooks/tsconfig.json +++ b/packages/hooks/tsconfig.json @@ -1,27 +1,13 @@ { + "extends": "tsconfig/react-library.json", "compilerOptions": { - "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], - "allowJs": true, - "skipLibCheck": true, - "esModuleInterop": true, - "allowSyntheticDefaultImports": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noFallthroughCasesInSwitch": true, - "module": "esnext", - "moduleResolution": "node", - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx" + "declarationMap": true, + "emitDeclarationOnly": true, + "lib": ["es2020", "DOM"], + "target": "es2020", + "module": "esnext" }, - "include": [ - "src/**/*" - ] + "include": ["."], + "exclude": ["dist", "build", "node_modules", "**/*.d.ts", "tsup.config.ts"] } \ No newline at end of file diff --git a/packages/hooks/tsup.config.ts b/packages/hooks/tsup.config.ts new file mode 100644 index 000000000..7f8a3f71d --- /dev/null +++ b/packages/hooks/tsup.config.ts @@ -0,0 +1,18 @@ +import path from 'path'; +import { defineConfig } from 'tsup'; + +const env = process.env.NODE_ENV; + +export default defineConfig({ + outdir: 'dist', + entry: ['src/index.ts'], + bundle: env === 'production', + clean: true, + dts: true, + format: ['cjs'], + external: ['react'], + minify: env === 'production', + watch: env === 'development', + sourcemap: env === 'development', + tsconfig: path.resolve(__dirname, './tsconfig.json') +}); diff --git a/yarn.lock b/yarn.lock index 4eb6c059b..d4f6bf56f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -678,6 +678,23 @@ __metadata: languageName: node linkType: hard +"@eslint/eslintrc@npm:^2.1.3": + version: 2.1.3 + resolution: "@eslint/eslintrc@npm:2.1.3" + dependencies: + ajv: ^6.12.4 + debug: ^4.3.2 + espree: ^9.6.0 + globals: ^13.19.0 + ignore: ^5.2.0 + import-fresh: ^3.2.1 + js-yaml: ^4.1.0 + minimatch: ^3.1.2 + strip-json-comments: ^3.1.1 + checksum: 5c6c3878192fe0ddffa9aff08b4e2f3bcc8f1c10d6449b7295a5f58b662019896deabfc19890455ffd7e60a5bd28d25d0eaefb2f78b2d230aae3879af92b89e5 + languageName: node + linkType: hard + "@eslint/js@npm:8.50.0": version: 8.50.0 resolution: "@eslint/js@npm:8.50.0" @@ -685,6 +702,13 @@ __metadata: languageName: node linkType: hard +"@eslint/js@npm:8.53.0": + version: 8.53.0 + resolution: "@eslint/js@npm:8.53.0" + checksum: e0d5cfb0000aaee237c8e6d6d6e366faa60b1ef7f928ce17778373aa44d3b886368f6d5e1f97f913f0f16801aad016db8b8df78418c9d18825c15590328028af + languageName: node + linkType: hard + "@exodus/schemasafe@npm:^1.0.0-rc.2": version: 1.3.0 resolution: "@exodus/schemasafe@npm:1.3.0" @@ -741,6 +765,17 @@ __metadata: languageName: node linkType: hard +"@humanwhocodes/config-array@npm:^0.11.13": + version: 0.11.13 + resolution: "@humanwhocodes/config-array@npm:0.11.13" + dependencies: + "@humanwhocodes/object-schema": ^2.0.1 + debug: ^4.1.1 + minimatch: ^3.0.5 + checksum: f8ea57b0d7ed7f2d64cd3944654976829d9da91c04d9c860e18804729a33f7681f78166ef4c761850b8c324d362f7d53f14c5c44907a6b38b32c703ff85e4805 + languageName: node + linkType: hard + "@humanwhocodes/module-importer@npm:^1.0.1": version: 1.0.1 resolution: "@humanwhocodes/module-importer@npm:1.0.1" @@ -755,6 +790,13 @@ __metadata: languageName: node linkType: hard +"@humanwhocodes/object-schema@npm:^2.0.1": + version: 2.0.1 + resolution: "@humanwhocodes/object-schema@npm:2.0.1" + checksum: 24929487b1ed48795d2f08346a0116cc5ee4634848bce64161fb947109352c562310fd159fc64dda0e8b853307f5794605191a9547f7341158559ca3c8262a45 + languageName: node + linkType: hard + "@hutson/parse-repository-url@npm:^3.0.0": version: 3.0.2 resolution: "@hutson/parse-repository-url@npm:3.0.2" @@ -949,15 +991,28 @@ __metadata: resolution: "@layer5/sistent-hooks@workspace:packages/hooks" dependencies: "@reduxjs/toolkit": ^1.9.5 + "@swc/core": ^1.3.96 "@types/cytoscape": ^3.19.10 "@types/react": ^18.2.21 + "@typescript-eslint/eslint-plugin": ^6.10.0 + "@typescript-eslint/parser": ^6.10.0 cytoscape: ^3.26.0 - react: ^18.2.0 + eslint: ^8.53.0 + eslint-plugin-react: ^7.33.2 + notistack: ^3.0.1 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 react-redux: ^8.1.2 redux: ^4.2.1 rxjs: ^7.8.1 + tsconfig: "workspace:^" tsup: ^7.2.0 typescript: ^5.2.2 + dependenciesMeta: + react: + optional: true + react-dom: + optional: true languageName: unknown linkType: soft @@ -1923,6 +1978,136 @@ __metadata: languageName: node linkType: hard +"@swc/core-darwin-arm64@npm:1.3.96": + version: 1.3.96 + resolution: "@swc/core-darwin-arm64@npm:1.3.96" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@swc/core-darwin-x64@npm:1.3.96": + version: 1.3.96 + resolution: "@swc/core-darwin-x64@npm:1.3.96" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@swc/core-linux-arm-gnueabihf@npm:1.3.96": + version: 1.3.96 + resolution: "@swc/core-linux-arm-gnueabihf@npm:1.3.96" + conditions: os=linux & cpu=arm + languageName: node + linkType: hard + +"@swc/core-linux-arm64-gnu@npm:1.3.96": + version: 1.3.96 + resolution: "@swc/core-linux-arm64-gnu@npm:1.3.96" + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + +"@swc/core-linux-arm64-musl@npm:1.3.96": + version: 1.3.96 + resolution: "@swc/core-linux-arm64-musl@npm:1.3.96" + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + +"@swc/core-linux-x64-gnu@npm:1.3.96": + version: 1.3.96 + resolution: "@swc/core-linux-x64-gnu@npm:1.3.96" + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + +"@swc/core-linux-x64-musl@npm:1.3.96": + version: 1.3.96 + resolution: "@swc/core-linux-x64-musl@npm:1.3.96" + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + +"@swc/core-win32-arm64-msvc@npm:1.3.96": + version: 1.3.96 + resolution: "@swc/core-win32-arm64-msvc@npm:1.3.96" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + +"@swc/core-win32-ia32-msvc@npm:1.3.96": + version: 1.3.96 + resolution: "@swc/core-win32-ia32-msvc@npm:1.3.96" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + +"@swc/core-win32-x64-msvc@npm:1.3.96": + version: 1.3.96 + resolution: "@swc/core-win32-x64-msvc@npm:1.3.96" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + +"@swc/core@npm:^1.3.96": + version: 1.3.96 + resolution: "@swc/core@npm:1.3.96" + dependencies: + "@swc/core-darwin-arm64": 1.3.96 + "@swc/core-darwin-x64": 1.3.96 + "@swc/core-linux-arm-gnueabihf": 1.3.96 + "@swc/core-linux-arm64-gnu": 1.3.96 + "@swc/core-linux-arm64-musl": 1.3.96 + "@swc/core-linux-x64-gnu": 1.3.96 + "@swc/core-linux-x64-musl": 1.3.96 + "@swc/core-win32-arm64-msvc": 1.3.96 + "@swc/core-win32-ia32-msvc": 1.3.96 + "@swc/core-win32-x64-msvc": 1.3.96 + "@swc/counter": ^0.1.1 + "@swc/types": ^0.1.5 + peerDependencies: + "@swc/helpers": ^0.5.0 + dependenciesMeta: + "@swc/core-darwin-arm64": + optional: true + "@swc/core-darwin-x64": + optional: true + "@swc/core-linux-arm-gnueabihf": + optional: true + "@swc/core-linux-arm64-gnu": + optional: true + "@swc/core-linux-arm64-musl": + optional: true + "@swc/core-linux-x64-gnu": + optional: true + "@swc/core-linux-x64-musl": + optional: true + "@swc/core-win32-arm64-msvc": + optional: true + "@swc/core-win32-ia32-msvc": + optional: true + "@swc/core-win32-x64-msvc": + optional: true + peerDependenciesMeta: + "@swc/helpers": + optional: true + checksum: 41d4a4461b2952aaf8d3be945d373d0f3bd126115ee1aad0f76f2690e2b5635b6ec5bb54a7638deb9afedb1ad6f7d8453468a704e54e5fbb8234dd4a43b80205 + languageName: node + linkType: hard + +"@swc/counter@npm:^0.1.1": + version: 0.1.2 + resolution: "@swc/counter@npm:0.1.2" + checksum: 8427c594f1f0cf44b83885e9c8fe1e370c9db44ae96e07a37c117a6260ee97797d0709483efbcc244e77bac578690215f45b23254c4cd8a70fb25ddbb50bf33e + languageName: node + linkType: hard + +"@swc/types@npm:^0.1.5": + version: 0.1.5 + resolution: "@swc/types@npm:0.1.5" + checksum: 6aee11f62d3d805a64848e0bd5f0e0e615f958e327a9e1260056c368d7d28764d89e38bd8005a536c9bf18afbcd303edd84099d60df34a2975d62540f61df13b + languageName: node + linkType: hard + "@testing-library/dom@npm:^9.0.0": version: 9.3.3 resolution: "@testing-library/dom@npm:9.3.3" @@ -2261,6 +2446,31 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/eslint-plugin@npm:^6.10.0": + version: 6.10.0 + resolution: "@typescript-eslint/eslint-plugin@npm:6.10.0" + dependencies: + "@eslint-community/regexpp": ^4.5.1 + "@typescript-eslint/scope-manager": 6.10.0 + "@typescript-eslint/type-utils": 6.10.0 + "@typescript-eslint/utils": 6.10.0 + "@typescript-eslint/visitor-keys": 6.10.0 + debug: ^4.3.4 + graphemer: ^1.4.0 + ignore: ^5.2.4 + natural-compare: ^1.4.0 + semver: ^7.5.4 + ts-api-utils: ^1.0.1 + peerDependencies: + "@typescript-eslint/parser": ^6.0.0 || ^6.0.0-alpha + eslint: ^7.0.0 || ^8.0.0 + peerDependenciesMeta: + typescript: + optional: true + checksum: eaf1f66ae1915426dad8d229c8cb80d2b320572a30c3fbc57d560d40edc2d17d004101a2fcbe331bc458df19a00f8b705f2442ee02e028bb595f4e9f9152e99d + languageName: node + linkType: hard + "@typescript-eslint/parser@npm:^5.4.2 || ^6.0.0, @typescript-eslint/parser@npm:^6.0.0": version: 6.7.3 resolution: "@typescript-eslint/parser@npm:6.7.3" @@ -2279,6 +2489,34 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/parser@npm:^6.10.0": + version: 6.10.0 + resolution: "@typescript-eslint/parser@npm:6.10.0" + dependencies: + "@typescript-eslint/scope-manager": 6.10.0 + "@typescript-eslint/types": 6.10.0 + "@typescript-eslint/typescript-estree": 6.10.0 + "@typescript-eslint/visitor-keys": 6.10.0 + debug: ^4.3.4 + peerDependencies: + eslint: ^7.0.0 || ^8.0.0 + peerDependenciesMeta: + typescript: + optional: true + checksum: c4b140932d639b3f3eac892497aa700bcc9101ef268285020757dc9bee670d122de107e936320af99a5c06569e4eb93bccf87f14a9970ceab708c432e748423a + languageName: node + linkType: hard + +"@typescript-eslint/scope-manager@npm:6.10.0": + version: 6.10.0 + resolution: "@typescript-eslint/scope-manager@npm:6.10.0" + dependencies: + "@typescript-eslint/types": 6.10.0 + "@typescript-eslint/visitor-keys": 6.10.0 + checksum: c9b9483082ae853f10b888cf04d4a14f666ac55e749bfdb7b7f726fc51127a6340b5e2f50d93f134a8854ddcc41f7b116b214753251a8b033d0d84c600439c54 + languageName: node + linkType: hard + "@typescript-eslint/scope-manager@npm:6.7.3": version: 6.7.3 resolution: "@typescript-eslint/scope-manager@npm:6.7.3" @@ -2289,6 +2527,23 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/type-utils@npm:6.10.0": + version: 6.10.0 + resolution: "@typescript-eslint/type-utils@npm:6.10.0" + dependencies: + "@typescript-eslint/typescript-estree": 6.10.0 + "@typescript-eslint/utils": 6.10.0 + debug: ^4.3.4 + ts-api-utils: ^1.0.1 + peerDependencies: + eslint: ^7.0.0 || ^8.0.0 + peerDependenciesMeta: + typescript: + optional: true + checksum: cfe9520cf0c0f50b115d2591acb2abf99ffe5789b3536268ca65b624c8498812d91f187e80c41bea7cf2cebad9c38f69ef27440f872a20fb53c59856d8f5df38 + languageName: node + linkType: hard + "@typescript-eslint/type-utils@npm:6.7.3": version: 6.7.3 resolution: "@typescript-eslint/type-utils@npm:6.7.3" @@ -2306,6 +2561,13 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/types@npm:6.10.0": + version: 6.10.0 + resolution: "@typescript-eslint/types@npm:6.10.0" + checksum: e63a9e05eb3d736d02a09131627d5cb89394bf0d9d6b46fb4b620be902d89d73554720be65acbc194787bff9ffcd518c9a6cf88fd63e418232b4181e8d8438df + languageName: node + linkType: hard + "@typescript-eslint/types@npm:6.7.3": version: 6.7.3 resolution: "@typescript-eslint/types@npm:6.7.3" @@ -2313,6 +2575,24 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/typescript-estree@npm:6.10.0": + version: 6.10.0 + resolution: "@typescript-eslint/typescript-estree@npm:6.10.0" + dependencies: + "@typescript-eslint/types": 6.10.0 + "@typescript-eslint/visitor-keys": 6.10.0 + debug: ^4.3.4 + globby: ^11.1.0 + is-glob: ^4.0.3 + semver: ^7.5.4 + ts-api-utils: ^1.0.1 + peerDependenciesMeta: + typescript: + optional: true + checksum: 15bd8d9239a557071d6b03e7aa854b769fcc2dbdff587ed94be7ee8060dabdb05bcae4251df22432f625f82087e7f6986e9aab04f7eea35af694d4edd76a21af + languageName: node + linkType: hard + "@typescript-eslint/typescript-estree@npm:6.7.3": version: 6.7.3 resolution: "@typescript-eslint/typescript-estree@npm:6.7.3" @@ -2331,6 +2611,23 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/utils@npm:6.10.0": + version: 6.10.0 + resolution: "@typescript-eslint/utils@npm:6.10.0" + dependencies: + "@eslint-community/eslint-utils": ^4.4.0 + "@types/json-schema": ^7.0.12 + "@types/semver": ^7.5.0 + "@typescript-eslint/scope-manager": 6.10.0 + "@typescript-eslint/types": 6.10.0 + "@typescript-eslint/typescript-estree": 6.10.0 + semver: ^7.5.4 + peerDependencies: + eslint: ^7.0.0 || ^8.0.0 + checksum: b6bd4d68623fb8d616ae63a88f2954258411a0cc113029fba801d1e74b4c0319fdfbcac0070527afe5cc38c012c8718e4faecd1603000924d7b89e8fefc3f24d + languageName: node + linkType: hard + "@typescript-eslint/utils@npm:6.7.3": version: 6.7.3 resolution: "@typescript-eslint/utils@npm:6.7.3" @@ -2348,6 +2645,16 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/visitor-keys@npm:6.10.0": + version: 6.10.0 + resolution: "@typescript-eslint/visitor-keys@npm:6.10.0" + dependencies: + "@typescript-eslint/types": 6.10.0 + eslint-visitor-keys: ^3.4.1 + checksum: 9640bfae41e6109ffba31e68b1720382de0538d021261e2fc9e514c83c703084393c0818ca77ed26b950273e45e593371120281e8d4bbd09cb8c2d46c9fe4f03 + languageName: node + linkType: hard + "@typescript-eslint/visitor-keys@npm:6.7.3": version: 6.7.3 resolution: "@typescript-eslint/visitor-keys@npm:6.7.3" @@ -2358,6 +2665,13 @@ __metadata: languageName: node linkType: hard +"@ungap/structured-clone@npm:^1.2.0": + version: 1.2.0 + resolution: "@ungap/structured-clone@npm:1.2.0" + checksum: 4f656b7b4672f2ce6e272f2427d8b0824ed11546a601d8d5412b9d7704e83db38a8d9f402ecdf2b9063fc164af842ad0ec4a55819f621ed7e7ea4d1efcc74524 + languageName: node + linkType: hard + "@yarnpkg/lockfile@npm:^1.1.0": version: 1.1.0 resolution: "@yarnpkg/lockfile@npm:1.1.0" @@ -4483,6 +4797,54 @@ __metadata: languageName: node linkType: hard +"eslint@npm:^8.53.0": + version: 8.53.0 + resolution: "eslint@npm:8.53.0" + dependencies: + "@eslint-community/eslint-utils": ^4.2.0 + "@eslint-community/regexpp": ^4.6.1 + "@eslint/eslintrc": ^2.1.3 + "@eslint/js": 8.53.0 + "@humanwhocodes/config-array": ^0.11.13 + "@humanwhocodes/module-importer": ^1.0.1 + "@nodelib/fs.walk": ^1.2.8 + "@ungap/structured-clone": ^1.2.0 + ajv: ^6.12.4 + chalk: ^4.0.0 + cross-spawn: ^7.0.2 + debug: ^4.3.2 + doctrine: ^3.0.0 + escape-string-regexp: ^4.0.0 + eslint-scope: ^7.2.2 + eslint-visitor-keys: ^3.4.3 + espree: ^9.6.1 + esquery: ^1.4.2 + esutils: ^2.0.2 + fast-deep-equal: ^3.1.3 + file-entry-cache: ^6.0.1 + find-up: ^5.0.0 + glob-parent: ^6.0.2 + globals: ^13.19.0 + graphemer: ^1.4.0 + ignore: ^5.2.0 + imurmurhash: ^0.1.4 + is-glob: ^4.0.0 + is-path-inside: ^3.0.3 + js-yaml: ^4.1.0 + json-stable-stringify-without-jsonify: ^1.0.1 + levn: ^0.4.1 + lodash.merge: ^4.6.2 + minimatch: ^3.1.2 + natural-compare: ^1.4.0 + optionator: ^0.9.3 + strip-ansi: ^6.0.1 + text-table: ^0.2.0 + bin: + eslint: bin/eslint.js + checksum: 2da808655c7aa4b33f8970ba30d96b453c3071cc4d6cd60d367163430677e32ff186b65270816b662d29139283138bff81f28dddeb2e73265495245a316ed02c + languageName: node + linkType: hard + "espree@npm:^9.6.0, espree@npm:^9.6.1": version: 9.6.1 resolution: "espree@npm:9.6.1" @@ -8720,7 +9082,7 @@ __metadata: languageName: node linkType: hard -"react@npm:^17.0.0 || ^18.0.0, react@npm:^18.2.0": +"react@npm:^17.0.0 || ^18.0.0": version: 18.2.0 resolution: "react@npm:18.2.0" dependencies: From 27d0ada18552a56e3bf0aecc8387d168d8b37c11 Mon Sep 17 00:00:00 2001 From: Antonette Caldwell Date: Fri, 10 Nov 2023 14:33:18 -0600 Subject: [PATCH 3/6] chore(components): use React directly Signed-off-by: Antonette Caldwell --- packages/hooks/src/context/CytoscapeProvider.ts | 6 +++--- packages/hooks/src/context/ReduxProvider.tsx | 10 +++++----- packages/hooks/src/context/useRedux.ts | 8 ++++---- packages/hooks/src/useDebounced.ts | 6 +++--- packages/hooks/src/useDraggable.ts | 12 ++++++------ packages/hooks/src/useFullScreen.ts | 16 +++++++++------- packages/hooks/src/useLocalStorage.ts | 4 ++-- packages/hooks/src/useOverlayedComponent.ts | 6 +++--- packages/hooks/src/usePauseEvent.ts | 4 ++-- packages/hooks/src/useThrottledDragOver.ts | 6 +++--- 10 files changed, 40 insertions(+), 38 deletions(-) diff --git a/packages/hooks/src/context/CytoscapeProvider.ts b/packages/hooks/src/context/CytoscapeProvider.ts index 5ab39cda2..3da942fe4 100644 --- a/packages/hooks/src/context/CytoscapeProvider.ts +++ b/packages/hooks/src/context/CytoscapeProvider.ts @@ -1,17 +1,17 @@ import cytoscape from 'cytoscape'; -import { createContext, useContext } from 'react'; +import React from 'react'; export interface CytoscapeContextInterface { cytoscape: cytoscape.Core; container: HTMLElement; } -export const CytoscapeContext = createContext(null); +export const CytoscapeContext = React.createContext(null); export const CytoscapeProvider = CytoscapeContext.Provider; export function useCytoscapeContext() { - const context = useContext(CytoscapeContext); + const context = React.useContext(CytoscapeContext); if (!context) { throw new Error('useCytoscapeContext must be used within a CytoscapeContextProvider'); } diff --git a/packages/hooks/src/context/ReduxProvider.tsx b/packages/hooks/src/context/ReduxProvider.tsx index 05f3a8e1f..df930a15f 100644 --- a/packages/hooks/src/context/ReduxProvider.tsx +++ b/packages/hooks/src/context/ReduxProvider.tsx @@ -1,18 +1,18 @@ -import { ReactNode, createContext, useContext } from 'react'; +import React from 'react'; import { Provider } from 'react-redux'; import { store } from '../redux/store'; type ReduxProviderProps = { - children: ReactNode; + children: React.ReactNode; }; -const ReduxContext = createContext({}); +const ReduxContext = React.createContext({}); export function useRedux() { - return useContext(ReduxContext); + return React.useContext(ReduxContext); } -export function ReduxProvider({ children }: ReduxProviderProps) { +export function ReduxProvider({ children }: ReduxProviderProps): JSX.Element { return ( {children} diff --git a/packages/hooks/src/context/useRedux.ts b/packages/hooks/src/context/useRedux.ts index 2ebf8d719..e164be620 100644 --- a/packages/hooks/src/context/useRedux.ts +++ b/packages/hooks/src/context/useRedux.ts @@ -1,15 +1,15 @@ -import { createContext, useContext } from 'react'; +import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { AppDispatch, RootState, store } from '../redux/store'; -const ReduxContext = createContext(store); +const ReduxContext = React.createContext(store); export function useReduxState(selector: (state: RootState) => T): T { - const store = useContext(ReduxContext); + const store = React.useContext(ReduxContext); return useSelector(selector); } export function useReduxDispatch(): AppDispatch { - const store = useContext(ReduxContext); + const store = React.useContext(ReduxContext); return useDispatch(); } diff --git a/packages/hooks/src/useDebounced.ts b/packages/hooks/src/useDebounced.ts index e9c733126..b15b6542c 100644 --- a/packages/hooks/src/useDebounced.ts +++ b/packages/hooks/src/useDebounced.ts @@ -1,9 +1,9 @@ -import { useEffect, useRef } from 'react'; +import React from 'react'; export function useDebounced void>(func: T, timeout = 500) { - const timerRef = useRef(); + const timerRef = React.useRef(); - useEffect(() => { + React.useEffect(() => { const cleanup = () => { if (timerRef.current) { clearTimeout(timerRef.current); diff --git a/packages/hooks/src/useDraggable.ts b/packages/hooks/src/useDraggable.ts index 05d7a4e64..0b385e4db 100644 --- a/packages/hooks/src/useDraggable.ts +++ b/packages/hooks/src/useDraggable.ts @@ -1,15 +1,15 @@ -import { RefObject, useEffect, useState } from 'react'; +import React from 'react'; import { useCytoscapeContext } from './context/CytoscapeProvider'; export function useDraggable( - dragReference: RefObject, - componentReference: RefObject + dragReference: React.RefObject, + componentReference: React.RefObject ) { const context = useCytoscapeContext(); - const [{ dx, dy }, setOffset] = useState({ dx: 0, dy: 0 }); + const [{ dx, dy }, setOffset] = React.useState({ dx: 0, dy: 0 }); - useEffect(() => { + React.useEffect(() => { if (!dragReference.current || !componentReference.current || !context) { throw new Error(`An error occurred while trying to drag.`); } @@ -44,7 +44,7 @@ export function useDraggable( }; }, [dx, dy, dragReference, componentReference, context]); - useEffect(() => { + React.useEffect(() => { if (componentReference.current) { componentReference.current.style.transform = `translate3d(${dx}px, ${dy}px, 0)`; } diff --git a/packages/hooks/src/useFullScreen.ts b/packages/hooks/src/useFullScreen.ts index 09ab464a7..55e98207b 100644 --- a/packages/hooks/src/useFullScreen.ts +++ b/packages/hooks/src/useFullScreen.ts @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useState } from 'react'; +import React from 'react'; import { useCytoscapeContext } from './context/CytoscapeProvider'; @@ -17,24 +17,26 @@ export function useFullScreen(container?: HTMLElement | null): { isFullScreen: boolean; } { const context = useCytoscapeContext(); - const [isFullScreen, setFullScreen] = useState(false); - const [element, setElement] = useState(container ? container : context.container); + const [isFullScreen, setFullScreen] = React.useState(false); + const [element, setElement] = React.useState( + container ? container : context.container + ); // const toggleState = () => setFullScreen((v) => !v) - const toggleState = useCallback(() => { + const toggleState = React.useCallback(() => { setFullScreen((prevState) => !prevState); }, [setFullScreen]); - useEffect(() => { + React.useEffect(() => { document.addEventListener('fullscreenchange', toggleState); return () => document.removeEventListener('fullscreenchange', toggleState); }, [toggleState]); - useEffect(() => { + React.useEffect(() => { setElement(container || context.container); }, [container, context.container]); - const toggle = useCallback(() => { + const toggle = React.useCallback(() => { toggleFullScreen(element); }, [element]); diff --git a/packages/hooks/src/useLocalStorage.ts b/packages/hooks/src/useLocalStorage.ts index 9105ea2fb..3eb5ff23a 100644 --- a/packages/hooks/src/useLocalStorage.ts +++ b/packages/hooks/src/useLocalStorage.ts @@ -1,7 +1,7 @@ -import { useState } from 'react'; +import React from 'react'; export function useLocalStorage(key: string, initialValue: T): [T, (newValue: T) => void] { - const [value, setValue] = useState(() => { + const [value, setValue] = React.useState(() => { const storedValue = localStorage.getItem(key); return storedValue !== null ? JSON.parse(storedValue) : initialValue; }); diff --git a/packages/hooks/src/useOverlayedComponent.ts b/packages/hooks/src/useOverlayedComponent.ts index 8afed25e7..45012a781 100644 --- a/packages/hooks/src/useOverlayedComponent.ts +++ b/packages/hooks/src/useOverlayedComponent.ts @@ -1,13 +1,13 @@ import cytoscape, { NodeCollection } from 'cytoscape'; -import { useEffect, useState } from 'react'; +import React from 'react'; import { useCytoscapeContext } from './context/CytoscapeProvider'; export function useOverlayedComponent(): NodeCollection | null { const context = useCytoscapeContext(); - const [overlayedComponent, setOverlayedComponent] = useState(null); + const [overlayedComponent, setOverlayedComponent] = React.useState(null); - useEffect(() => { + React.useEffect(() => { const handleMouseMove = (e: MouseEvent) => { const position = getMousePostitionRelativeToCyCanvas(e); const component = getOverlayedComponent(context.cytoscape, position); diff --git a/packages/hooks/src/usePauseEvent.ts b/packages/hooks/src/usePauseEvent.ts index 008f9e4e1..6cc1e68c2 100644 --- a/packages/hooks/src/usePauseEvent.ts +++ b/packages/hooks/src/usePauseEvent.ts @@ -1,7 +1,7 @@ -import { useCallback } from 'react'; +import React from 'react'; export function usePauseEvent(): (e: Event) => boolean { - const pauseEvent = useCallback((e: Event) => { + const pauseEvent = React.useCallback((e: Event) => { if (e.stopPropagation) e.stopPropagation(); if (e.preventDefault) e.preventDefault(); (e as any).cancelBubble = true; diff --git a/packages/hooks/src/useThrottledDragOver.ts b/packages/hooks/src/useThrottledDragOver.ts index 2c7ed31d1..1231d9390 100644 --- a/packages/hooks/src/useThrottledDragOver.ts +++ b/packages/hooks/src/useThrottledDragOver.ts @@ -1,4 +1,4 @@ -import { useEffect, useRef } from 'react'; +import React from 'react'; import { Observable, Subscription, fromEvent } from 'rxjs'; import { throttleTime } from 'rxjs/operators'; @@ -6,9 +6,9 @@ export const useThrottledDragOver = ( element: HTMLElement, callback: (event: Event) => void ): Subscription | undefined => { - const subscriptionRef = useRef(); + const subscriptionRef = React.useRef(); - useEffect(() => { + React.useEffect(() => { const dragOver$: Observable = fromEvent(element, 'dragover').pipe( throttleTime(100, undefined, { leading: true, trailing: true }) ); From 4b3460ae6ce2367be8f4e4cf494b4111bd43bb2f Mon Sep 17 00:00:00 2001 From: Antonette Caldwell Date: Fri, 10 Nov 2023 14:34:03 -0600 Subject: [PATCH 4/6] fix(components): resolve eslint issue Signed-off-by: Antonette Caldwell --- packages/hooks/src/useFullScreen.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/hooks/src/useFullScreen.ts b/packages/hooks/src/useFullScreen.ts index 55e98207b..11d4f28e1 100644 --- a/packages/hooks/src/useFullScreen.ts +++ b/packages/hooks/src/useFullScreen.ts @@ -4,7 +4,9 @@ import { useCytoscapeContext } from './context/CytoscapeProvider'; function toggleFullScreen(dom: HTMLElement) { if (document.fullscreenElement !== dom) { - dom.requestFullscreen; + dom.requestFullscreen().catch((err) => { + console.error('Error attempting to enable full screen:', err); + }); } else { if (document.exitFullscreen) { document.exitFullscreen(); @@ -28,12 +30,14 @@ export function useFullScreen(container?: HTMLElement | null): { }, [setFullScreen]); React.useEffect(() => { - document.addEventListener('fullscreenchange', toggleState); - return () => document.removeEventListener('fullscreenchange', toggleState); + const handleFullscreenChange = () => toggleState(); + document.addEventListener('fullscreenchange', handleFullscreenChange); + + return () => document.removeEventListener('fullscreenchange', handleFullscreenChange); }, [toggleState]); React.useEffect(() => { - setElement(container || context.container); + setElement(container ?? context.container); }, [container, context.container]); const toggle = React.useCallback(() => { From 5c0083416130dc159f93de90ba3cb15baba515d0 Mon Sep 17 00:00:00 2001 From: Antonette Caldwell Date: Fri, 10 Nov 2023 14:34:39 -0600 Subject: [PATCH 5/6] feat(components): change type to interface Signed-off-by: Antonette Caldwell --- packages/hooks/src/useOverlayedComponent.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/hooks/src/useOverlayedComponent.ts b/packages/hooks/src/useOverlayedComponent.ts index 45012a781..90b5f544c 100644 --- a/packages/hooks/src/useOverlayedComponent.ts +++ b/packages/hooks/src/useOverlayedComponent.ts @@ -35,17 +35,17 @@ export function useOverlayedComponent(): NodeCollection | null { return overlayedComponent; } -type Overlayed = { +interface Overlayed { x1: number; x2: number; y1: number; y2: number; -}; +} -type OverlayedPosition = { +interface OverlayedPosition { x: number; y: number; -}; +} export function getMousePostitionRelativeToElement( e: MouseEvent, From fbc3e478795d2fc7699901e4bb943ae621f1cfbd Mon Sep 17 00:00:00 2001 From: Antonette Caldwell Date: Fri, 10 Nov 2023 14:35:59 -0600 Subject: [PATCH 6/6] feat(components): remove cancelBubble and returnValue, deprecated Signed-off-by: Antonette Caldwell --- packages/hooks/src/context/ReduxProvider.tsx | 4 ++-- packages/hooks/src/usePauseEvent.ts | 2 -- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/hooks/src/context/ReduxProvider.tsx b/packages/hooks/src/context/ReduxProvider.tsx index df930a15f..4b9040300 100644 --- a/packages/hooks/src/context/ReduxProvider.tsx +++ b/packages/hooks/src/context/ReduxProvider.tsx @@ -2,9 +2,9 @@ import React from 'react'; import { Provider } from 'react-redux'; import { store } from '../redux/store'; -type ReduxProviderProps = { +interface ReduxProviderProps { children: React.ReactNode; -}; +} const ReduxContext = React.createContext({}); diff --git a/packages/hooks/src/usePauseEvent.ts b/packages/hooks/src/usePauseEvent.ts index 6cc1e68c2..42d64fb46 100644 --- a/packages/hooks/src/usePauseEvent.ts +++ b/packages/hooks/src/usePauseEvent.ts @@ -4,8 +4,6 @@ export function usePauseEvent(): (e: Event) => boolean { const pauseEvent = React.useCallback((e: Event) => { if (e.stopPropagation) e.stopPropagation(); if (e.preventDefault) e.preventDefault(); - (e as any).cancelBubble = true; - (e as any).returnValue = false; return false; }, []);