fix: 🐛 setup and linting

.eslintignore

@@ -3,4 +3,9 @@ node_modules
 storybook-static
 .storybook
 coverage
-rollup.config.js
+rollup.config.js
+jest.config.ts
+jest.setup.ts
+next-env.d.ts
+commitlint.config.js
+next.config.js

__tests__/examples/controls.utils.tsx

@@ -11,7 +11,6 @@ export const Controls: React.FC = () => {
         type="button"
         onClick={() => {
           zoomIn();
-          console.log("zoomIn");
         }}
         data-testid="zoom-in"
       >
@@ -21,7 +20,6 @@ export const Controls: React.FC = () => {
         type="button"
         onClick={() => {
           zoomOut();
-          console.log("zoomOut");
         }}
         data-testid="zoom-out"
       >
@@ -31,7 +29,6 @@ export const Controls: React.FC = () => {
         type="button"
         onClick={() => {
           resetTransform();
-          console.log("resetTransform");
         }}
         data-testid="reset"
       >
@@ -41,7 +38,6 @@ export const Controls: React.FC = () => {
         type="button"
         onClick={() => {
           centerView();
-          console.log("centerView");
         }}
         data-testid="center"
       >

__tests__/examples/example.tsx

@@ -56,12 +56,12 @@ export const Example = (options: {
           <div style={{ background: "#444", color: "white", padding: "50px" }}>
             <h1>Title</h1>
             <h2>Subtitle</h2>
-            <button
+            {/* <button
               type="button"
               onClick={() => alert("You can still interact with click events!")}
             >
               Click me!
-            </button>
+            </button> */}
             <div
               style={{
                 display: "flex",

__tests__/features/controls/controls.center.spec.tsx

@@ -1,12 +1,11 @@
 import { fireEvent, waitFor } from "@testing-library/react";
 
 import { renderApp } from "../../utils/render-app";
-import { sleep } from "../../utils";
 
 describe("Controls [Center]", () => {
   describe("When centering with controls button", () => {
     it("should change css transform", async () => {
-      const { content, wrapper, centerBtn, zoom } = renderApp();
+      const { content, centerBtn, zoom } = renderApp();
       zoom({ value: 1.65 });
       expect(content.style.transform).toBe("translate(0px, 0px) scale(1.65)");
       fireEvent(centerBtn, new MouseEvent("click", { bubbles: true }));

__tests__/features/controls/controls.reset.spec.tsx

@@ -1,7 +1,6 @@
 import { fireEvent, waitFor } from "@testing-library/react";
 
 import { renderApp } from "../../utils/render-app";
-import { sleep } from "../../utils";
 
 describe("Controls [Reset]", () => {
   describe("When resetting state with controls button", () => {

__tests__/features/pan-track-pad/pan-track-pad.base.spec.tsx

@@ -1,6 +1,6 @@
 import { waitFor } from "@testing-library/react";
 
-import { renderApp, sleep } from "../../utils";
+import { renderApp } from "../../utils";
 
 describe("Pan TrackPad [Base]", () => {
   describe("When panning to coords", () => {

__tests__/features/pan/pan.bounds.spec.tsx

@@ -1,7 +1,3 @@
-import { waitFor } from "@testing-library/react";
-
-import { renderApp } from "../../utils";
-
 describe("Pan [Bounds]", () => {
   it("TODO", () => {
     expect(true).toBe(true);

__tests__/features/pinch/pinch.base.spec.tsx

@@ -1,4 +1,5 @@
 import { waitFor } from "@testing-library/dom";
+
 import { renderApp } from "../../utils/render-app";
 
 describe("Pinch [Base]", () => {

__tests__/features/pinch/pinch.panning.spec.tsx

@@ -1,4 +1,5 @@
 import { waitFor } from "@testing-library/dom";
+
 import { renderApp } from "../../utils/render-app";
 
 describe("Pinch [Panning]", () => {

__tests__/features/zoom/zoom.base.spec.tsx

@@ -1,4 +1,5 @@
 import { waitFor } from "@testing-library/dom";
+
 import { renderApp } from "../../utils/render-app";
 
 describe("Zoom [Base]", () => {

__tests__/features/zoom/zoom.callbacks.spec.tsx

@@ -1,4 +1,5 @@
 import { waitFor } from "@testing-library/dom";
+
 import { renderApp } from "../../utils";
 
 describe("Zoom [Callbacks]", () => {

__tests__/utils/render-app.tsx

@@ -32,7 +32,9 @@ interface RenderApp {
 const waitForPreviousActionToEnd = () => {
   // Synchronous await for 10ms to wait for the previous event to finish (pinching or touching)
   const startTime = Date.now();
-  while (Date.now() - startTime < 10) {}
+  while (Date.now() - startTime < 10) {
+    // wait
+  }
 };
 
 function getPinchTouches(
@@ -80,7 +82,7 @@ export const renderApp = ({
   wrapperHeight?: string;
 } = {}): RenderResult & RenderApp => {
   let renders = 0;
-  let ref: { current: ReactZoomPanPinchRef | null } = { current: null };
+  const ref: { current: ReactZoomPanPinchRef | null } = { current: null };
 
   const onRender = () => {
     renders += 1;
@@ -189,7 +191,7 @@ export const renderApp = ({
 
         const newStep = isNearScale ? step / 6 : step;
 
-        pinchValue = pinchValue + newStep;
+        pinchValue += newStep;
 
         fireEvent.touchMove(content, {
           touches: getPinchTouches(content, center, pinchValue, from),

__tests__/utils/sleep.ts

@@ -1,3 +1,5 @@
 export const sleep = async (ms: number): Promise<void> => {
-  return new Promise((resolve) => setTimeout(resolve, ms));
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
 };

package.json

@@ -88,6 +88,7 @@
     "jest-extended": "^4.0.2",
     "jest-preview": "^0.3.1",
     "jest-watch-typeahead": "^2.2.2",
+    "prettier": "^3.3.2",
     "prism-react-renderer": "^2.3.1",
     "react": "*",
     "react-dom": "*",

src/core/pinch/pinch.logic.ts

@@ -84,7 +84,7 @@ export const handlePinchZoom = (
   const panX = (center.x - (pinchPreviousCenter?.x || 0)) * scaleDiff;
   const panY = (center.y - (pinchPreviousCenter?.y || 0)) * scaleDiff;
 
-  if (newScale === scale && 0 == panX && 0 == panY) return;
+  if (newScale === scale && panX == 0 && panY == 0) return;
 
   contextInstance.pinchPreviousCenter = center;
 

src/hooks/use-zoom-pan-pinch.tsx

@@ -1,7 +1,8 @@
+import { useLayoutEffect, useRef } from "react";
+
 import { initialSetup } from "constants/state.constants";
 import { ZoomPanPinch } from "core/instance.core";
 import { ReactZoomPanPinchProps, ReactZoomPanPinchRef } from "models";
-import { useLayoutEffect, useRef } from "react";
 
 export const useZoomPanPinch = (props?: ReactZoomPanPinchProps) => {
   const contentRef = useRef<HTMLDivElement>(null);

src/models/helpers.model.ts

@@ -3,10 +3,10 @@
 export type DeepNonNullable<T> = T extends (...args: any[]) => any
   ? T
   : T extends any[]
-  ? DeepNonNullableArray<T[number]>
-  : T extends object
-  ? DeepNonNullableObject<T>
-  : T;
+    ? DeepNonNullableArray<T[number]>
+    : T extends object
+      ? DeepNonNullableObject<T>
+      : T;
 
 export type DeepNonNullableArray<T> = Array<DeepNonNullable<NonNullable<T>>>;
 

src/stories/examples/miro/miro.stories.mdx

@@ -28,10 +28,8 @@ export const Template = (args) => (
         maxHeight: "70vh",
       }}
       contentStyle={{
-        width: "400px",
-        height: "400px",
-        maxWidth: "70vw",
-        maxHeight: "70vh",
+        width: "100%",
+        height: "100%",
       }}
     >
       <div style={{ background: "#ababab", color: "black", padding: "0px" }}>
@@ -41,8 +39,7 @@ export const Template = (args) => (
           src={exampleImg}
           alt=""
           style={{
-            width: "600px",
-            maxWidth: "80vw",
+            width: "100%",
           }}
         />
       </div>
@@ -65,4 +62,3 @@ export const Template = (args) => (
 ## Component API
 
 <ArgsTable story="Miro" />
-../../../components/index.ts../../utils/index.ts

src/typings.d.ts

@@ -8,6 +8,7 @@ declare module "*.css" {
 }
 declare module "*.svg" {
   import React = require("react");
+
   export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
   const src: string;
   export default src;

tsconfig.json

@@ -24,5 +24,5 @@
     "noEmit": true
   },
   "include": ["src", "__tests__"],
-  "exclude": ["node_modules", "build", "dist", "rollup.config.js"]
+  "exclude": ["node_modules", "build", "dist", "rollup.config.mjs"]
 }