feat: 🎸 general logic cleanup for tests

BetterTyped · Jun 21, 2024 · 38d3b96 · 38d3b96
1 parent 32c1f66
commit 38d3b96
Show file tree

Hide file tree

Showing 51 changed files with 169 additions and 204 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -8,7 +8,6 @@ const config: StorybookConfig = {
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
     "@storybook/addon-interactions",
   ],
   framework: {
@@ -18,7 +17,7 @@ const config: StorybookConfig = {
   docs: {
     autodocs: "tag",
   },
-  async viteFinal(config, { configType }) {
+  async viteFinal(config) {
     // return the customized config
     return mergeConfig(config, {
       plugins: [

diff --git a/.storybook/preview.ts → .storybook/preview.tsx b/.storybook/preview.ts → .storybook/preview.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import type { Preview } from "@storybook/react";
 
 const preview: Preview = {

diff --git a/__tests__/features/animations/animations.base.spec.tsx b/__tests__/features/animations/animations.base.spec.tsx
@@ -7,10 +7,10 @@ describe("Animations [Base]", () => {
   describe("When panning out of boundaries", () => {
     describe("And content is zoomed in", () => {
       it("should animate returning to the bounded position", async () => {
-        const transformStates: ReactZoomPanPinchState[] = [];
+        const states: ReactZoomPanPinchState[] = [];
         const { content, pan, zoom } = renderApp({
           onPanning: (ref) => {
-            transformStates.push(ref.instance.transformState);
+            states.push(ref.instance.state);
           },
         });
         expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
@@ -19,12 +19,12 @@ describe("Animations [Base]", () => {
           "translate(0px, 0px) scale(1.5009999999999448)",
         );
         pan({ x: -100, y: -100 });
-        expect(transformStates).toHaveLength(1);
+        expect(states).toHaveLength(1);
         expect(content.style.transform).toBe(
           "translate(-100px, -100px) scale(1.5009999999999448)",
         );
         // await waitFor(() => {
-        //   expect(transformStates).toHaveLength(5);
+        //   expect(states).toHaveLength(5);
         // });
       });
     });
@@ -36,7 +36,7 @@ describe("Animations [Base]", () => {
         "translate(-100px, -100px) scale(1)",
       );
       // await waitFor(() => {
-      //   expect(transformStates).toHaveLength(5);
+      //   expect(states).toHaveLength(5);
       // });
     });
   });

diff --git a/__tests__/features/pan-touch/pan-touch.base.spec.tsx b/__tests__/features/pan-touch/pan-touch.base.spec.tsx
@@ -98,7 +98,7 @@ describe("Pan Touch [Base]", () => {
   //     minPositionX: 30,
   //     minPositionY: 30,
   //     onTransform: (ctx) => {
-  //       console.log(ctx.instance.transformState);
+  //       console.log(ctx.instance.state);
   //     },
   //   });
   //   zoom({ value: 1.5 });

diff --git a/__tests__/features/pinch/pinch.base.spec.tsx b/__tests__/features/pinch/pinch.base.spec.tsx
@@ -9,7 +9,7 @@ describe("Pinch [Base]", () => {
       pinch({ value: 1.5 });
       await waitFor(() => {
         expect(content.style.transform).toBe("translate(0px, 0px) scale(1.5)");
-        expect(ref.current?.instance.transformState.scale).toBe(1.5);
+        expect(ref.current?.instance.state.scale).toBe(1.5);
       });
     });
   });

diff --git a/__tests__/features/zoom/zoom.base.spec.tsx b/__tests__/features/zoom/zoom.base.spec.tsx
@@ -9,7 +9,7 @@ describe("Zoom [Base]", () => {
       zoom({ value: 1.5 });
       await waitFor(() => {
         expect(content.style.transform).toBe("translate(0px, 0px) scale(1.5)");
-        expect(ref.current?.instance.transformState.scale).toBe(1.5);
+        expect(ref.current?.instance.state.scale).toBe(1.5);
       });
     });
   });

diff --git a/__tests__/utils/render-app.tsx b/__tests__/utils/render-app.tsx
@@ -112,16 +112,16 @@ export const renderApp = ({
 
     const step = 1;
 
-    const isZoomIn = ref.current.instance.transformState.scale < value;
+    const isZoomIn = ref.current.instance.state.scale < value;
     while (true) {
       if (
         (isZoomIn
-          ? ref.current.instance.transformState.scale < value
-          : ref.current.instance.transformState.scale > value) &&
-        ref.current.instance.transformState.scale !== value
+          ? ref.current.instance.state.scale < value
+          : ref.current.instance.state.scale > value) &&
+        ref.current.instance.state.scale !== value
       ) {
         const isNearScale =
-          Math.abs(ref.current.instance.transformState.scale - value) < 0.01;
+          Math.abs(ref.current.instance.state.scale - value) < 0.01;
 
         const newStep = isNearScale ? 0.35 : step;
 
@@ -142,7 +142,7 @@ export const renderApp = ({
     const { value, center = [0, 0] } = options;
     if (!ref.current) throw new Error("ref.current is null");
 
-    const isZoomIn = ref.current.instance.transformState.scale < value;
+    const isZoomIn = ref.current.instance.state.scale < value;
     const from = isZoomIn ? 40 : 200;
     const stepY = 0.1;
     const stepX = 0.1;
@@ -157,12 +157,12 @@ export const renderApp = ({
     while (true) {
       if (
         (isZoomIn
-          ? ref.current.instance.transformState.scale < value
-          : ref.current.instance.transformState.scale > value) &&
-        ref.current.instance.transformState.scale !== value
+          ? ref.current.instance.state.scale < value
+          : ref.current.instance.state.scale > value) &&
+        ref.current.instance.state.scale !== value
       ) {
         const isNearScale =
-          Math.abs(ref.current.instance.transformState.scale - value) < 0.5;
+          Math.abs(ref.current.instance.state.scale - value) < 0.5;
 
         const newStepX = isNearScale ? stepX / 10 : stepX;
         const newStepY = isNearScale ? stepY / 10 : stepY;

diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "deploy": "gh-pages -d storybook-static",
     "release": "yarn semantic-release",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "storybook:build": "storybook build"
   },
   "peerDependencies": {
     "react": "*",
@@ -48,7 +48,6 @@
     "@storybook/addon-interactions": "^7.6.9",
     "@storybook/addon-links": "7.6.9",
     "@storybook/addon-mdx-gfm": "7.6.9",
-    "@storybook/addon-onboarding": "^1.0.10",
     "@storybook/addon-storysource": "7.6.9",
     "@storybook/blocks": "^7.6.9",
     "@storybook/cli": "^7.6.9",

diff --git a/src/components/keep-scale/keep-scale.tsx b/src/components/keep-scale/keep-scale.tsx
@@ -18,7 +18,7 @@ export const KeepScale = React.forwardRef<
         localRef.current.style.transform = instance.handleTransformStyles(
           positionX,
           positionY,
-          1 / ctx.instance.transformState.scale,
+          1 / ctx.instance.state.scale,
         );
       }
     });

diff --git a/src/components/mini-map/mini-map.tsx b/src/components/mini-map/mini-map.tsx
@@ -67,15 +67,15 @@ export const MiniMap: React.FC<MiniMapProps> = ({
       const rect = instance.contentComponent.getBoundingClientRect();
 
       return {
-        width: rect.width / instance.transformState.scale,
-        height: rect.height / instance.transformState.scale,
+        width: rect.width / instance.state.scale,
+        height: rect.height / instance.state.scale,
       };
     }
     return {
       width: 0,
       height: 0,
     };
-  }, [instance.contentComponent, instance.transformState.scale]);
+  }, [instance.contentComponent, instance.state.scale]);
 
   const computeMiniMapScale = useCallback(() => {
     const contentSize = getContentSize();
@@ -129,10 +129,10 @@ export const MiniMap: React.FC<MiniMapProps> = ({
     if (previewRef.current) {
       const size = getContentSize();
       const scale = computeMiniMapScale();
-      const previewScale = scale * (1 / instance.transformState.scale);
+      const previewScale = scale * (1 / instance.state.scale);
       const transform = instance.handleTransformStyles(
-        -instance.transformState.positionX * previewScale,
-        -instance.transformState.positionY * previewScale,
+        -instance.state.positionX * previewScale,
+        -instance.state.positionY * previewScale,
         1,
       );
 
@@ -161,12 +161,11 @@ export const MiniMap: React.FC<MiniMapProps> = ({
     return instance.onChange((zpp) => {
       const scale = computeMiniMapScale();
       if (miniMapInstance.current) {
-        miniMapInstance.current.instance.transformState.scale =
-          zpp.instance.transformState.scale;
-        miniMapInstance.current.instance.transformState.positionX =
-          zpp.instance.transformState.positionX * scale;
-        miniMapInstance.current.instance.transformState.positionY =
-          zpp.instance.transformState.positionY * scale;
+        miniMapInstance.current.instance.state.scale = zpp.instance.state.scale;
+        miniMapInstance.current.instance.state.positionX =
+          zpp.instance.state.positionX * scale;
+        miniMapInstance.current.instance.state.positionY =
+          zpp.instance.state.positionY * scale;
       }
     });
   }, [computeMiniMapScale, instance, miniMapInstance]);
@@ -185,37 +184,30 @@ export const MiniMap: React.FC<MiniMapProps> = ({
         const y = relativeY - previewRect.height / 2;
 
         const instanceWidth =
-          (instance.wrapperComponent?.offsetWidth || 0) *
-          instance.transformState.scale;
+          (instance.wrapperComponent?.offsetWidth || 0) * instance.state.scale;
         const instanceHeight =
-          (instance.wrapperComponent?.offsetHeight || 0) *
-          instance.transformState.scale;
+          (instance.wrapperComponent?.offsetHeight || 0) * instance.state.scale;
 
         const limitWidth =
-          instanceWidth - previewRect.width * 2 * instance.transformState.scale;
+          instanceWidth - previewRect.width * 2 * instance.state.scale;
         const limitHeight =
-          instanceHeight -
-          previewRect.height * 2 * instance.transformState.scale;
+          instanceHeight - previewRect.height * 2 * instance.state.scale;
 
         const boundedX = boundLimiter(
-          x * instance.transformState.scale,
+          x * instance.state.scale,
           0,
           limitWidth,
           true,
         );
 
         const boundedY = boundLimiter(
-          y * instance.transformState.scale,
+          y * instance.state.scale,
           0,
           limitHeight,
           true,
         );
 
-        instance.setTransformState(
-          instance.transformState.scale,
-          -boundedX,
-          -boundedY,
-        );
+        instance.setState(instance.state.scale, -boundedX, -boundedY);
       }
     };
 

diff --git a/src/constants/state.constants.ts b/src/constants/state.constants.ts
@@ -44,6 +44,7 @@ export const initialSetup: LibrarySetup = {
   pinch: {
     step: 5,
     disabled: false,
+    allowPanning: true,
     excluded: [],
   },
   doubleClick: {

diff --git a/src/core/animations/animations.utils.ts b/src/core/animations/animations.utils.ts
@@ -83,19 +83,15 @@ export function animate(
   const isValid = isValidTargetState(targetState);
   if (!contextInstance.mounted || !isValid) return;
 
-  const { setTransformState } = contextInstance;
-  const { scale, positionX, positionY } = contextInstance.transformState;
+  const { setState } = contextInstance;
+  const { scale, positionX, positionY } = contextInstance.state;
 
   const scaleDiff = targetState.scale - scale;
   const positionXDiff = targetState.positionX - positionX;
   const positionYDiff = targetState.positionY - positionY;
 
   if (animationTime === 0) {
-    setTransformState(
-      targetState.scale,
-      targetState.positionX,
-      targetState.positionY,
-    );
+    setState(targetState.scale, targetState.positionX, targetState.positionY);
   } else {
     // animation start timestamp
     handleSetupAnimation(
@@ -112,7 +108,7 @@ export function animate(
         const newPositionX = positionX + positionXDiff * step;
         const newPositionY = positionY + positionYDiff * step;
 
-        setTransformState(newScale, newPositionX, newPositionY);
+        setState(newScale, newPositionX, newPositionY);
       },
     );
   }

diff --git a/src/core/double-click/double-click.logic.ts b/src/core/double-click/double-click.logic.ts
@@ -59,10 +59,10 @@ export function handleDoubleClick(
   contextInstance: ReactZoomPanPinchContext,
   event: MouseEvent | TouchEvent,
 ): void {
-  const { setup, doubleClickStopEventTimer, transformState, contentComponent } =
+  const { setup, doubleClickStopEventTimer, state, contentComponent } =
     contextInstance;
 
-  const { scale } = transformState;
+  const { scale } = state;
   const { onZoomStart, onZoom } = contextInstance.props;
   const { disabled, mode, step, animationTime, animationType } =
     setup.doubleClick;
@@ -76,7 +76,7 @@ export function handleDoubleClick(
 
   if (!contentComponent) return console.error("No ContentComponent found");
 
-  const delta = getDoubleClickScale(mode, contextInstance.transformState.scale);
+  const delta = getDoubleClickScale(mode, contextInstance.state.scale);
 
   const newScale = handleCalculateButtonZoom(contextInstance, delta, step);
 

diff --git a/src/core/handlers/handlers.logic.ts b/src/core/handlers/handlers.logic.ts
@@ -49,7 +49,7 @@ export const setTransform =
     animationTime = 300,
     animationType: keyof typeof animations = "easeOut",
   ): void => {
-    const { positionX, positionY, scale } = contextInstance.transformState;
+    const { positionX, positionY, scale } = contextInstance.state;
     const { wrapperComponent, contentComponent } = contextInstance;
     const { disabled } = contextInstance.setup;
 
@@ -80,11 +80,10 @@ export const centerView =
     animationTime = 200,
     animationType: keyof typeof animations = "easeOut",
   ): void => {
-    const { transformState, wrapperComponent, contentComponent } =
-      contextInstance;
+    const { state, wrapperComponent, contentComponent } = contextInstance;
     if (wrapperComponent && contentComponent) {
       const targetState = getCenterPosition(
-        scale || transformState.scale,
+        scale || state.scale,
         wrapperComponent,
         contentComponent,
       );

diff --git a/src/core/handlers/handlers.utils.ts b/src/core/handlers/handlers.utils.ts
@@ -15,7 +15,7 @@ export const handleCalculateButtonZoom = (
   delta: number,
   step: number,
 ): number => {
-  const { scale } = contextInstance.transformState;
+  const { scale } = contextInstance.state;
   const { wrapperComponent, setup } = contextInstance;
   const { maxScale, minScale, zoomAnimation, smooth } = setup;
   const { size } = zoomAnimation;
@@ -46,7 +46,7 @@ export function handleZoomToViewCenter(
   animationType: keyof typeof animations,
 ): void {
   const { wrapperComponent } = contextInstance;
-  const { scale, positionX, positionY } = contextInstance.transformState;
+  const { scale, positionX, positionY } = contextInstance.state;
 
   if (!wrapperComponent) return console.error("No WrapperComponent found");
 
@@ -82,7 +82,7 @@ export function resetTransformations(
   const { setup, wrapperComponent } = contextInstance;
   const { limitToBounds } = setup;
   const initialTransformation = createState(contextInstance.props);
-  const { scale, positionX, positionY } = contextInstance.transformState;
+  const { scale, positionX, positionY } = contextInstance.state;
 
   if (!wrapperComponent) return;
 
@@ -143,24 +143,18 @@ export function calculateZoomToNode(
   node: HTMLElement,
   customZoom?: number,
 ): { positionX: number; positionY: number; scale: number } {
-  const { wrapperComponent, contentComponent, transformState } =
-    contextInstance;
+  const { wrapperComponent, contentComponent, state } = contextInstance;
   const { limitToBounds, minScale, maxScale } = contextInstance.setup;
-  if (!wrapperComponent || !contentComponent) return transformState;
+  if (!wrapperComponent || !contentComponent) return state;
 
   const wrapperRect = wrapperComponent.getBoundingClientRect();
   const nodeRect = node.getBoundingClientRect();
-  const nodeOffset = getOffset(
-    node,
-    wrapperComponent,
-    contentComponent,
-    transformState,
-  );
+  const nodeOffset = getOffset(node, wrapperComponent, contentComponent, state);
 
   const nodeLeft = nodeOffset.x;
   const nodeTop = nodeOffset.y;
-  const nodeWidth = nodeRect.width / transformState.scale;
-  const nodeHeight = nodeRect.height / transformState.scale;
+  const nodeWidth = nodeRect.width / state.scale;
+  const nodeHeight = nodeRect.height / state.scale;
 
   const scaleX = wrapperComponent.offsetWidth / nodeWidth;
   const scaleY = wrapperComponent.offsetHeight / nodeHeight;