test: 💍 Added tests and new storybook

.bin/jest.sh

@@ -0,0 +1,17 @@
+# Extract working directory based on jest config file
+
+# Path to Jest config file supplied by VSCode Jest Runner
+jest_config=$3
+
+# Remove part after last slash
+cwd=$(echo "$jest_config" | sed 's|\(.*\)/.*|\1|')
+
+cd "$cwd"
+
+command="yarn jest '$1' -c ./jest.config.ts -t '$5' $6"
+
+echo "$command"
+
+eval "$command"
+
+cd ./

.storybook/main.ts

@@ -0,0 +1,27 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+import { mergeConfig } from "vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  async viteFinal(config, { configType }) {
+    // return the customized config
+    return mergeConfig(config, {
+      plugins: [tsconfigPaths()],
+    });
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

README.md

@@ -167,6 +167,14 @@ const Component = () => {
 };
 ```
 
+## 💖 Our sponsors
+
+<p align="center">
+  <a href="https://github.com/sponsors/prc5">
+    <img src="https://github.com/prc5/sponsors/blob/main/sponsorkit/sponsors.png?raw=true" alt="My Sponsors" />
+  </a>
+</p>
+
 ## License
 
 MIT © [prc5](https://github.com/prc5)

__tests__/examples/controls.utils.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+
+import { useControls } from "../../src";
+
+export const Controls: React.FC = () => {
+  const { zoomIn, zoomOut, resetTransform, centerView } = useControls();
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => {
+          zoomIn();
+          console.log("zoomIn");
+        }}
+        data-testid="zoom-in"
+      >
+        Zoom In +
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          zoomOut();
+          console.log("zoomOut");
+        }}
+        data-testid="zoom-out"
+      >
+        Zoom Out -
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          resetTransform();
+          console.log("resetTransform");
+        }}
+        data-testid="reset"
+      >
+        Reset
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          centerView();
+          console.log("centerView");
+        }}
+        data-testid="center"
+      >
+        Center
+      </button>
+    </div>
+  );
+};

__tests__/examples/example.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+
+import {
+  TransformWrapper,
+  TransformComponent,
+  ReactZoomPanPinchProps,
+} from "../../src";
+import { Controls } from "./controls.utils";
+
+export const Example = (options: {
+  props?: ReactZoomPanPinchProps;
+  onRender: () => void;
+  children?: React.ReactNode;
+}) => {
+  const { props = {}, onRender, children } = options;
+
+  onRender();
+
+  return (
+    <TransformWrapper {...props}>
+      <div>
+        {children}
+        <Controls />
+        <TransformComponent
+          wrapperProps={
+            {
+              "data-testid": "wrapper",
+            } as React.HTMLAttributes<HTMLDivElement>
+          }
+          contentProps={
+            {
+              "data-testid": "content",
+            } as React.HTMLAttributes<HTMLDivElement>
+          }
+          wrapperStyle={{
+            width: "500px",
+            height: "500px",
+            maxWidth: "100%",
+            maxHeight: "calc(100vh - 50px)",
+          }}
+        >
+          <div style={{ background: "#444", color: "white", padding: "50px" }}>
+            <h1>Title</h1>
+            <h2>Subtitle</h2>
+            <button
+              type="button"
+              onClick={() => alert("You can still interact with click events!")}
+            >
+              Click me!
+            </button>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum
+            </p>
+          </div>
+        </TransformComponent>
+      </div>
+    </TransformWrapper>
+  );
+};

__tests__/features/animations/animations.base.spec.tsx

@@ -0,0 +1,43 @@
+import { waitFor } from "@testing-library/react";
+
+import { renderApp } from "../../utils/render-app";
+import { ReactZoomPanPinchState } from "models";
+
+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 { content, pan, zoom } = renderApp({
+          onPanning: (ref) => {
+            transformStates.push(ref.instance.transformState);
+          },
+        });
+        expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
+        zoom({ value: 1.5 });
+        expect(content.style.transform).toBe(
+          "translate(0px, 0px) scale(1.5009999999999448)",
+        );
+        pan({ x: -100, y: -100 });
+        expect(transformStates).toHaveLength(1);
+        expect(content.style.transform).toBe(
+          "translate(-100px, -100px) scale(1.5009999999999448)",
+        );
+        // await waitFor(() => {
+        //   expect(transformStates).toHaveLength(5);
+        // });
+      });
+    });
+    it("should animate returning to the bounded position", async () => {
+      const { content, pan, zoom } = renderApp();
+      expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
+      pan({ x: -100, y: -100 });
+      expect(content.style.transform).toBe(
+        "translate(-100px, -100px) scale(1)",
+      );
+      // await waitFor(() => {
+      //   expect(transformStates).toHaveLength(5);
+      // });
+    });
+  });
+});

__tests__/features/props.spec.tsx → __tests__/features/base/props.spec.tsx

@@ -1,9 +1,9 @@
-import { renderExample } from "../shared/render.shared";
+import { renderApp } from "../../utils/render-app";
 
 describe("Library components", () => {
   describe("When library components have been rendered", () => {
     test("it renders transform component without errors", () => {
-      const { content, wrapper } = renderExample();
+      const { content, wrapper } = renderApp();
       expect(content).toBeDefined();
       expect(wrapper).toBeDefined();
     });

__tests__/features/rendering.spec.tsx → __tests__/features/base/rendering.spec.tsx

@@ -1,34 +1,34 @@
-import { renderExample } from "../shared/render.shared";
+import { renderApp } from "../../utils/render-app";
 
 describe("Example view", () => {
   describe("When example view has been rendered", () => {
     test("it renders entire example without errors", () => {
-      const { wrapper } = renderExample();
+      const { wrapper } = renderApp();
 
       expect(wrapper).toBeDefined();
     });
     test("it renders center in button without errors", () => {
-      const { center } = renderExample();
+      const { center } = renderApp();
 
       expect(center).toBeDefined();
     });
     test("it renders zoom in button without errors", () => {
-      const { zoomInBtn } = renderExample();
+      const { zoomInBtn } = renderApp();
 
       expect(zoomInBtn).toBeDefined();
     });
     test("it renders zoom out button without errors", () => {
-      const { zoomOutBtn } = renderExample();
+      const { zoomOutBtn } = renderApp();
 
       expect(zoomOutBtn).toBeDefined();
     });
     test("it renders reset button without errors", () => {
-      const { resetBtn } = renderExample();
+      const { resetBtn } = renderApp();
 
       expect(resetBtn).toBeDefined();
     });
     test("it renders transform component without errors", () => {
-      const { content } = renderExample();
+      const { content } = renderApp();
 
       expect(content).toBeDefined();
     });