Merge pull request #37 from zJaaal/dev

Dev
zJaaal · Nov 23, 2022 · 866143e · 866143e
2 parents ec98d66 + ced03bf
commit 866143e
Show file tree

Hide file tree

Showing 44 changed files with 1,979 additions and 611 deletions.
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
@@ -3,7 +3,13 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Sono:wght@400;500;700&display=swap"
+      rel="stylesheet"
+    />
+    <title>React Scroll Utilities</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-scroll-utilities",
   "private": false,
-  "version": "0.5.1",
+  "version": "1.0.0",
   "license": "MIT",
   "type": "module",
   "main": "src/lib/index.ts",

diff --git a/public/arrow.png b/public/arrow.png
diff --git a/public/github.png b/public/github.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,20 +1,19 @@
-import { useRef } from "react";
-import { useDirection } from "./lib";
-import useProximity from "./lib/hooks/useProximity";
+import Direction from "./site/components/direction/Direction";
+import Dynamic from "./site/components/dynamic/Dynamic";
+import Footer from "./site/components/footer/Footer";
+import Header from "./site/components/header/Header";
+import LinearValue from "./site/components/linearValue/LinearValue";
+import Proximity from "./site/components/proximity/Proximity";
 
 function App() {
-  const ref = useRef<HTMLDivElement>(null);
-
-  const proximity = useProximity(ref);
-  const direction = useDirection();
-
   return (
-    <div className="test" ref={ref}>
-      <ul>
-        <li>{"Proximity Y: " + proximity.y}</li>
-        <li>{"Proximity X: " + proximity.x}</li>
-        <li>{"Direction: " + direction}</li>
-      </ul>
+    <div style={{ height: "100%" }}>
+      <Header />
+      <Proximity />
+      <Direction />
+      <Dynamic />
+      <LinearValue />
+      <Footer />
     </div>
   );
 }

diff --git a/src/IconTest.tsx b/src/IconTest.tsx
diff --git a/src/TestEnvironment.tsx b/src/TestEnvironment.tsx
@@ -0,0 +1,57 @@
+import React, { useRef } from "react";
+import { Circle, useDynamicColor, useLinearValue } from "./lib";
+
+const TestEnvironment = () => {
+  const ref = useRef(null);
+  const color = useDynamicColor({
+    startColor: [67, 206, 162],
+    endColor: [24, 90, 157],
+    elementRef: ref,
+  });
+
+  const height = useLinearValue({
+    startValue: 100,
+    endValue: 500,
+    elementRef: ref,
+  });
+  const width = useLinearValue({
+    startValue: 100,
+    endValue: 500,
+    elementRef: ref,
+  });
+  const deg = useLinearValue({
+    startValue: 0,
+    endValue: 90,
+    elementRef: ref,
+  });
+
+  return (
+    <div>
+      <div
+        style={{
+          height: 4000,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <div
+          style={{
+            height,
+            width,
+            backgroundColor: color,
+            color: "black",
+            transform: `rotate(${deg}deg)`,
+            borderRadius: "10px",
+          }}
+          ref={ref}
+        ></div>
+      </div>
+      <div style={{ height: 400 }}>
+        <Circle radius="40vh" stroke={2}></Circle>
+      </div>
+    </div>
+  );
+};
+
+export default TestEnvironment;
diff --git a/src/__test__/Circle.test.tsx b/src/__test__/Circle.test.tsx
@@ -89,51 +89,12 @@ describe("Circle Component", () => {
         "Circle should be rendered with scaleX(-1)"
       ).toHaveStyle("transform: rotate(0deg) scaleX(-1);");
     }),
-    //This test is not working, beacuse there's an issue in JSDom that don't set gradients to background and
-    //there's no way to test the values of the conical gradient
-    it.skip("Should change its speed when setting speed prop", () => {
-      const CircleTestComponent = render(
-        <ScrollWatcher>
-          <Circle speed={10} />
-        </ScrollWatcher>
-      );
-
-      //Should fire the same scroll event and compare the values
-
-      // expect(
-      //   someValue,
-      //   "Circle deg should be greater than the last deg calculation since is faster"
-      // ).toBeGreaterThan(lastCalculation));
-    }),
-    it("Should change its stroke when setting stroke prop", () => {
-      let stroke = 5;
-
-      const CircleTestComponent = render(
-        <ScrollWatcher>
-          <Circle stroke={stroke} />
-        </ScrollWatcher>
-      );
-
-      //Calculate stroke by hand
-      const circleRadius = parseInt(
-        CircleTestComponent.queryByTestId("circle")?.style.height as string
-      );
-      const innerCircleRadius = parseInt(
-        CircleTestComponent.queryByTestId("inner-circle")?.style
-          .height as string
-      );
-
-      expect(
-        circleRadius - innerCircleRadius,
-        "Difference between circleRadius and innerCircleRadius should be 5"
-      ).toBe(stroke);
-    }),
     it("Should change its size when setting radius prop", () => {
       let radius = 400;
 
       const CircleTestComponent = render(
         <ScrollWatcher>
-          <Circle radius={radius} />
+          <Circle radius={radius + "px"} />
         </ScrollWatcher>
       );
 

diff --git a/src/__test__/Rectangle.test.tsx b/src/__test__/Rectangle.test.tsx
@@ -88,72 +88,31 @@ describe("Rectangle Component", () => {
         RectangleTestComponent.queryByTestId("rectangle"),
         "Rectangle should be rendered with scaleX(-1)"
       ).toHaveStyle("transform: rotate(0deg) scaleX(-1);");
-    }),
-    //This test is not working, beacuse there's an issue in JSDom that don't set gradients to background and
-    //there's no way to test the values of the conical gradient
-    it.skip("Should change its speed when setting speed prop", () => {
-      const RectangleTestComponent = render(
-        <ScrollWatcher>
-          <Rectangle speed={10} />
-        </ScrollWatcher>
-      );
-
-      //Should fire the same scroll event and compare the values
-
-      // expect(
-      //   someValue,
-      //   "Rectangle deg should be greater than the last deg calculation since is faster"
-      // ).toBeGreaterThan(lastCalculation));
-    }),
-    it("Should change its stroke when setting stroke prop", () => {
-      let stroke = 5;
-
-      const RectangleTestComponent = render(
-        <ScrollWatcher>
-          <Rectangle stroke={stroke} />
-        </ScrollWatcher>
-      );
-
-      //Calculate stroke by hand
-      const rectangleHeight = parseInt(
-        RectangleTestComponent.queryByTestId("rectangle")?.style
-          .height as string
-      );
-      const innerRectangleHeight = parseInt(
-        RectangleTestComponent.queryByTestId("inner-rectangle")?.style
-          .height as string
-      );
-
-      expect(
-        rectangleHeight - innerRectangleHeight,
-        "Difference between rectangleHeight and innerRectangleHeight should be 5"
-      ).toBe(stroke);
-    }),
-    it("Should change its size when setting height prop", () => {
-      let height = 400;
+    });
+  it("Should change its size when setting height prop", () => {
+    let height = 400;
 
-      const RectangleTestComponent = render(
-        <ScrollWatcher>
-          <Rectangle height={height} />
-        </ScrollWatcher>
-      );
+    const RectangleTestComponent = render(
+      <ScrollWatcher>
+        <Rectangle height={height + "px"} />
+      </ScrollWatcher>
+    );
 
-      const rectangleHeight = parseInt(
-        RectangleTestComponent.queryByTestId("rectangle")?.style
-          .height as string
-      );
+    const rectangleHeight = parseInt(
+      RectangleTestComponent.queryByTestId("rectangle")?.style.height as string
+    );
 
-      expect(
-        rectangleHeight == height,
-        "Rectangle height should be equal to 400"
-      ).toBeTruthy();
-    }),
+    expect(
+      rectangleHeight == height,
+      "Rectangle height should be equal to 400"
+    ).toBeTruthy();
+  }),
     it("Should change its size when setting width prop", () => {
       let width = 400;
 
       const RectangleTestComponent = render(
         <ScrollWatcher>
-          <Rectangle width={width} />
+          <Rectangle width={width + "px"} />
         </ScrollWatcher>
       );
 

diff --git a/src/__test__/components/linearValue/LinearValueTest.tsx b/src/__test__/components/linearValue/LinearValueTest.tsx
@@ -0,0 +1,16 @@
+import React, { FC, useRef } from "react";
+import { useLinearValue } from "../../../lib";
+
+const LinearValueTest: FC<any> = ({ startValue, endValue }) => {
+  const ref = useRef(null);
+
+  const value = useLinearValue({
+    startValue,
+    endValue,
+    elementRef: ref,
+  });
+
+  return <div ref={ref}>{value}</div>;
+};
+
+export default LinearValueTest;