Skip to content

Commit 866143e

Browse files
zJaaalzJaaal
authored
Merge pull request #37 from zJaaal/dev
Dev
2 parents ec98d66 + ced03bf commit 866143e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1979
-611
lines changed

‎README.md‎

Lines changed: 111 additions & 34 deletions
Large diffs are not rendered by default.

‎index.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,13 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Vite + React + TS</title>
6+
<link rel="preconnect" href="https://fonts.googleapis.com" />
7+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Sono:wght@400;500;700&display=swap"
10+
rel="stylesheet"
11+
/>
12+
<title>React Scroll Utilities</title>
713
</head>
814
<body>
915
<div id="root"></div>

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "react-scroll-utilities",
33
"private": false,
4-
"version": "0.5.1",
4+
"version": "1.0.0",
55
"license": "MIT",
66
"type": "module",
77
"main": "src/lib/index.ts",

‎public/arrow.png‎

7.83 KB
Loading

‎public/github.png‎

1.82 KB
Loading

‎src/App.tsx‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
1-
import { useRef } from "react";
2-
import { useDirection } from "./lib";
3-
import useProximity from "./lib/hooks/useProximity";
1+
import Direction from "./site/components/direction/Direction";
2+
import Dynamic from "./site/components/dynamic/Dynamic";
3+
import Footer from "./site/components/footer/Footer";
4+
import Header from "./site/components/header/Header";
5+
import LinearValue from "./site/components/linearValue/LinearValue";
6+
import Proximity from "./site/components/proximity/Proximity";
47

58
function App() {
6-
const ref = useRef<HTMLDivElement>(null);
7-
8-
const proximity = useProximity(ref);
9-
const direction = useDirection();
10-
119
return (
12-
<div className="test" ref={ref}>
13-
<ul>
14-
<li>{"Proximity Y: " + proximity.y}</li>
15-
<li>{"Proximity X: " + proximity.x}</li>
16-
<li>{"Direction: " + direction}</li>
17-
</ul>
10+
<div style={{ height: "100%" }}>
11+
<Header />
12+
<Proximity />
13+
<Direction />
14+
<Dynamic />
15+
<LinearValue />
16+
<Footer />
1817
</div>
1918
);
2019
}

‎src/IconTest.tsx‎

Lines changed: 0 additions & 60 deletions
This file was deleted.

‎src/TestEnvironment.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React, { useRef } from "react";
2+
import { Circle, useDynamicColor, useLinearValue } from "./lib";
3+
4+
const TestEnvironment = () => {
5+
const ref = useRef(null);
6+
const color = useDynamicColor({
7+
startColor: [67, 206, 162],
8+
endColor: [24, 90, 157],
9+
elementRef: ref,
10+
});
11+
12+
const height = useLinearValue({
13+
startValue: 100,
14+
endValue: 500,
15+
elementRef: ref,
16+
});
17+
const width = useLinearValue({
18+
startValue: 100,
19+
endValue: 500,
20+
elementRef: ref,
21+
});
22+
const deg = useLinearValue({
23+
startValue: 0,
24+
endValue: 90,
25+
elementRef: ref,
26+
});
27+
28+
return (
29+
<div>
30+
<div
31+
style={{
32+
height: 4000,
33+
display: "flex",
34+
justifyContent: "center",
35+
alignItems: "center",
36+
}}
37+
>
38+
<div
39+
style={{
40+
height,
41+
width,
42+
backgroundColor: color,
43+
color: "black",
44+
transform: `rotate(${deg}deg)`,
45+
borderRadius: "10px",
46+
}}
47+
ref={ref}
48+
></div>
49+
</div>
50+
<div style={{ height: 400 }}>
51+
<Circle radius="40vh" stroke={2}></Circle>
52+
</div>
53+
</div>
54+
);
55+
};
56+
57+
export default TestEnvironment;

‎src/__test__/Circle.test.tsx‎

Lines changed: 1 addition & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -89,51 +89,12 @@ describe("Circle Component", () => {
8989
"Circle should be rendered with scaleX(-1)"
9090
).toHaveStyle("transform: rotate(0deg) scaleX(-1);");
9191
}),
92-
//This test is not working, beacuse there's an issue in JSDom that don't set gradients to background and
93-
//there's no way to test the values of the conical gradient
94-
it.skip("Should change its speed when setting speed prop", () => {
95-
const CircleTestComponent = render(
96-
<ScrollWatcher>
97-
<Circle speed={10} />
98-
</ScrollWatcher>
99-
);
100-
101-
//Should fire the same scroll event and compare the values
102-
103-
// expect(
104-
// someValue,
105-
// "Circle deg should be greater than the last deg calculation since is faster"
106-
// ).toBeGreaterThan(lastCalculation));
107-
}),
108-
it("Should change its stroke when setting stroke prop", () => {
109-
let stroke = 5;
110-
111-
const CircleTestComponent = render(
112-
<ScrollWatcher>
113-
<Circle stroke={stroke} />
114-
</ScrollWatcher>
115-
);
116-
117-
//Calculate stroke by hand
118-
const circleRadius = parseInt(
119-
CircleTestComponent.queryByTestId("circle")?.style.height as string
120-
);
121-
const innerCircleRadius = parseInt(
122-
CircleTestComponent.queryByTestId("inner-circle")?.style
123-
.height as string
124-
);
125-
126-
expect(
127-
circleRadius - innerCircleRadius,
128-
"Difference between circleRadius and innerCircleRadius should be 5"
129-
).toBe(stroke);
130-
}),
13192
it("Should change its size when setting radius prop", () => {
13293
let radius = 400;
13394

13495
const CircleTestComponent = render(
13596
<ScrollWatcher>
136-
<Circle radius={radius} />
97+
<Circle radius={radius + "px"} />
13798
</ScrollWatcher>
13899
);
139100

0 commit comments

Comments
 (0)