From b1a505e46316627b2869a4cf6d807cd85ef243a2 Mon Sep 17 00:00:00 2001 From: Tyler Yu Date: Sat, 14 Oct 2023 14:32:52 -0700 Subject: [PATCH 1/8] update: removed deadzone --- .../src/components/Sticker/BaseSticker.tsx | 2 ++ .../Stickers/HeartSticker/HeartSticker.tsx | 23 ++++++++----------- apps/site/src/views/Home/Home.tsx | 2 +- .../StickerLayout/StickerLayout.tsx | 2 +- 4 files changed, 13 insertions(+), 16 deletions(-) diff --git a/apps/site/src/components/Sticker/BaseSticker.tsx b/apps/site/src/components/Sticker/BaseSticker.tsx index 10f4d7c6..0aed975a 100644 --- a/apps/site/src/components/Sticker/BaseSticker.tsx +++ b/apps/site/src/components/Sticker/BaseSticker.tsx @@ -14,6 +14,7 @@ interface StickerProps { // dragConstraints prop can be an object containing coordinates, a Falsy boolean, or a parent ref (https://www.framer.com/motion/gestures/#:~:text=%23-,dragConstraints%3A,-false%20%7C%20Partial%3CBoundingBox2D) animate?: object | undefined; transition?: object | undefined; + style?: object | undefined; } export default function Sticker({ @@ -25,6 +26,7 @@ export default function Sticker({ dragConstraints = false, animate = {}, transition = {}, + style = {}, }: StickerProps) { // prevent next from throwing error involving DOM API const pageRef = useRef( diff --git a/apps/site/src/components/Sticker/Stickers/HeartSticker/HeartSticker.tsx b/apps/site/src/components/Sticker/Stickers/HeartSticker/HeartSticker.tsx index 7d9dd148..9eb7063e 100644 --- a/apps/site/src/components/Sticker/Stickers/HeartSticker/HeartSticker.tsx +++ b/apps/site/src/components/Sticker/Stickers/HeartSticker/HeartSticker.tsx @@ -2,20 +2,15 @@ import HeartEmoji from "@/assets/images/heart_emoji.png"; import BaseSticker from "../../BaseSticker"; import { fastShake } from "@/components/animation"; -export default function HeartSticker({ - style, -}: { - style?: object | undefined; -}) { +export default function HeartSticker(style: any) { return ( -
- -
+ ); } diff --git a/apps/site/src/views/Home/Home.tsx b/apps/site/src/views/Home/Home.tsx index ea164ae1..d7bd331e 100644 --- a/apps/site/src/views/Home/Home.tsx +++ b/apps/site/src/views/Home/Home.tsx @@ -11,8 +11,8 @@ import styles from "./Home.module.scss"; function Home() { return ( <> -
+ diff --git a/apps/site/src/views/Home/components/StickerLayout/StickerLayout.tsx b/apps/site/src/views/Home/components/StickerLayout/StickerLayout.tsx index 5dba189f..50b7435c 100644 --- a/apps/site/src/views/Home/components/StickerLayout/StickerLayout.tsx +++ b/apps/site/src/views/Home/components/StickerLayout/StickerLayout.tsx @@ -2,7 +2,7 @@ import { HeartSticker } from "@/components/Sticker/Stickers"; export default function StickerLayout() { return ( - <> +
Date: Mon, 16 Oct 2023 00:20:52 -0700 Subject: [PATCH 2/8] feat: position stickers relative to page elements --- apps/site/src/views/Home/Home.tsx | 3 --- .../site/src/views/Home/components/ApplyButton/ApplyButton.tsx | 1 + apps/site/src/views/Home/sections/Landing/Landing.tsx | 3 +-- 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/apps/site/src/views/Home/Home.tsx b/apps/site/src/views/Home/Home.tsx index d7bd331e..c2434c2d 100644 --- a/apps/site/src/views/Home/Home.tsx +++ b/apps/site/src/views/Home/Home.tsx @@ -4,15 +4,12 @@ import Mentor from "./sections/Mentor/Mentor"; import Sponsors from "./sections/Sponsors/Sponsors"; import FAQ from "./sections/FAQ/FAQ"; -import StickerLayout from "./components/StickerLayout/StickerLayout"; - import styles from "./Home.module.scss"; function Home() { return ( <>
- diff --git a/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx b/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx index 0f581ca9..32cc08a4 100644 --- a/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx +++ b/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx @@ -1,4 +1,5 @@ import Button from "react-bootstrap/Button"; +import { HeartSticker } from "@/components/Sticker/Stickers"; import styles from "./ApplyButton.module.scss"; diff --git a/apps/site/src/views/Home/sections/Landing/Landing.tsx b/apps/site/src/views/Home/sections/Landing/Landing.tsx index b9a33bef..1f9715b3 100644 --- a/apps/site/src/views/Home/sections/Landing/Landing.tsx +++ b/apps/site/src/views/Home/sections/Landing/Landing.tsx @@ -1,6 +1,5 @@ "use client"; - -import ApplyButton from "../../components/ApplyButton/ApplyButton"; +import ApplyButton from "@/views/Home/components/ApplyButton/ApplyButton"; import styles from "./Landing.module.scss"; From ae8d3ebe781e237f622b61dda2f465634aa95e83 Mon Sep 17 00:00:00 2001 From: Alexander Liu Date: Sun, 22 Oct 2023 02:24:29 -0700 Subject: [PATCH 3/8] refactor: centralize sticker positioning logic to base sticker component --- .../Sticker/BaseSticker.module.scss | 15 +++++- .../src/components/Sticker/BaseSticker.tsx | 53 +++++++++++++------ .../Stickers/HeartSticker/HeartSticker.tsx | 32 +++++++---- .../components/ApplyButton/ApplyButton.tsx | 19 +++---- 4 files changed, 83 insertions(+), 36 deletions(-) diff --git a/apps/site/src/components/Sticker/BaseSticker.module.scss b/apps/site/src/components/Sticker/BaseSticker.module.scss index 775c4965..de1004ba 100644 --- a/apps/site/src/components/Sticker/BaseSticker.module.scss +++ b/apps/site/src/components/Sticker/BaseSticker.module.scss @@ -1,3 +1,16 @@ -.stickerContainer { +.stickerPositionContainer { + position: relative; + display: flex; +} + +.stickerParent { + position: "relative"; + width: 0; + height: 0; +} + +.sticker { cursor: grab; + position: absolute; + z-index: 100; } diff --git a/apps/site/src/components/Sticker/BaseSticker.tsx b/apps/site/src/components/Sticker/BaseSticker.tsx index 0aed975a..7a022b39 100644 --- a/apps/site/src/components/Sticker/BaseSticker.tsx +++ b/apps/site/src/components/Sticker/BaseSticker.tsx @@ -1,10 +1,13 @@ "use client"; +import { MutableRefObject, useRef } from "react"; import { motion } from "framer-motion"; + import styles from "./BaseSticker.module.scss"; -import { MutableRefObject, useRef } from "react"; interface StickerProps { + children?: React.ReactNode; + position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"; imageSrc: string; alt: string; height?: number; @@ -14,10 +17,11 @@ interface StickerProps { // dragConstraints prop can be an object containing coordinates, a Falsy boolean, or a parent ref (https://www.framer.com/motion/gestures/#:~:text=%23-,dragConstraints%3A,-false%20%7C%20Partial%3CBoundingBox2D) animate?: object | undefined; transition?: object | undefined; - style?: object | undefined; } -export default function Sticker({ +const BaseSticker: React.FC = ({ + children, + position = "bottom-right", imageSrc, alt, height = 100, @@ -26,8 +30,7 @@ export default function Sticker({ dragConstraints = false, animate = {}, transition = {}, - style = {}, -}: StickerProps) { +}) => { // prevent next from throwing error involving DOM API const pageRef = useRef( typeof document !== "undefined" ? document.documentElement : undefined, @@ -55,6 +58,7 @@ export default function Sticker({ filter: `drop-shadow(10px 14px 10px rgba(0, 0, 0, 0.2))`, }, drag: true, + initial: { x: -width / 2, y: -height / 2 }, dragMomentum: false, dragConstraints: dragConstraints ? dragConstraints : pageRef, dragElastic: 0.2, @@ -63,14 +67,33 @@ export default function Sticker({ : {}; return ( - +
+ {children} +
+ +
+
); -} +}; + +export default BaseSticker; diff --git a/apps/site/src/components/Sticker/Stickers/HeartSticker/HeartSticker.tsx b/apps/site/src/components/Sticker/Stickers/HeartSticker/HeartSticker.tsx index 9eb7063e..2a544d68 100644 --- a/apps/site/src/components/Sticker/Stickers/HeartSticker/HeartSticker.tsx +++ b/apps/site/src/components/Sticker/Stickers/HeartSticker/HeartSticker.tsx @@ -1,16 +1,26 @@ import HeartEmoji from "@/assets/images/heart_emoji.png"; import BaseSticker from "../../BaseSticker"; import { fastShake } from "@/components/animation"; +import React from "react"; -export default function HeartSticker(style: any) { - return ( - - ); +interface HeartStickerProps { + children: React.ReactNode; + position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"; } + +const HeartSticker = React.forwardRef< + React.ElementRef, + HeartStickerProps +>(({ ...props }, ref) => ( + +)); +HeartSticker.displayName = "HeartSticker"; + +export default HeartSticker; diff --git a/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx b/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx index 32cc08a4..6858fc13 100644 --- a/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx +++ b/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx @@ -5,14 +5,15 @@ import styles from "./ApplyButton.module.scss"; export default function ApplyButton() { return ( - + + + ); } From 3611a3db44c0d58660be886304d1305d546e30c7 Mon Sep 17 00:00:00 2001 From: Alexander Liu Date: Sun, 22 Oct 2023 03:40:33 -0700 Subject: [PATCH 4/8] fix: position value wrapped with quotes --- apps/site/src/components/Sticker/BaseSticker.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/components/Sticker/BaseSticker.module.scss b/apps/site/src/components/Sticker/BaseSticker.module.scss index de1004ba..e572ab01 100644 --- a/apps/site/src/components/Sticker/BaseSticker.module.scss +++ b/apps/site/src/components/Sticker/BaseSticker.module.scss @@ -4,7 +4,7 @@ } .stickerParent { - position: "relative"; + position: relative; width: 0; height: 0; } From 099765bbdae188bcc5a0cfa019b58311dcb97635 Mon Sep 17 00:00:00 2001 From: Alexander Liu Date: Sun, 22 Oct 2023 04:00:00 -0700 Subject: [PATCH 5/8] refactor: remove unnecessary forwardRef on sticker --- .../Sticker/Stickers/HeartSticker/HeartSticker.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/apps/site/src/components/Sticker/Stickers/HeartSticker/HeartSticker.tsx b/apps/site/src/components/Sticker/Stickers/HeartSticker/HeartSticker.tsx index 2a544d68..2eebefe0 100644 --- a/apps/site/src/components/Sticker/Stickers/HeartSticker/HeartSticker.tsx +++ b/apps/site/src/components/Sticker/Stickers/HeartSticker/HeartSticker.tsx @@ -8,10 +8,7 @@ interface HeartStickerProps { position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"; } -const HeartSticker = React.forwardRef< - React.ElementRef, - HeartStickerProps ->(({ ...props }, ref) => ( +const HeartSticker: React.FC = (props) => ( -)); -HeartSticker.displayName = "HeartSticker"; +); export default HeartSticker; From 6051599a44134980a79af7e5ea29697703172913 Mon Sep 17 00:00:00 2001 From: Alexander Liu Date: Sun, 29 Oct 2023 04:53:17 -0700 Subject: [PATCH 6/8] feat: sticker positioning component --- .../Sticker/BaseSticker.module.scss | 11 ---- .../src/components/Sticker/BaseSticker.tsx | 45 +++++---------- .../Sticker/StickerPosition.module.scss | 12 ++++ .../components/Sticker/StickerPosition.tsx | 56 +++++++++++++++++++ .../HackSticker/HackSticker.module.scss | 3 - .../Stickers/HackSticker/HackSticker.tsx | 28 +++++----- .../Stickers/HeartSticker/HeartSticker.tsx | 10 +--- .../Sticker/Stickers/stickerProps.ts | 4 ++ .../ApplyButton/ApplyButton.module.scss | 3 +- .../components/ApplyButton/ApplyButton.tsx | 27 +++++++-- 10 files changed, 128 insertions(+), 71 deletions(-) create mode 100644 apps/site/src/components/Sticker/StickerPosition.module.scss create mode 100644 apps/site/src/components/Sticker/StickerPosition.tsx delete mode 100644 apps/site/src/components/Sticker/Stickers/HackSticker/HackSticker.module.scss create mode 100644 apps/site/src/components/Sticker/Stickers/stickerProps.ts diff --git a/apps/site/src/components/Sticker/BaseSticker.module.scss b/apps/site/src/components/Sticker/BaseSticker.module.scss index e572ab01..996b0e97 100644 --- a/apps/site/src/components/Sticker/BaseSticker.module.scss +++ b/apps/site/src/components/Sticker/BaseSticker.module.scss @@ -1,14 +1,3 @@ -.stickerPositionContainer { - position: relative; - display: flex; -} - -.stickerParent { - position: relative; - width: 0; - height: 0; -} - .sticker { cursor: grab; position: absolute; diff --git a/apps/site/src/components/Sticker/BaseSticker.tsx b/apps/site/src/components/Sticker/BaseSticker.tsx index 7a022b39..ad77726b 100644 --- a/apps/site/src/components/Sticker/BaseSticker.tsx +++ b/apps/site/src/components/Sticker/BaseSticker.tsx @@ -6,8 +6,6 @@ import { motion } from "framer-motion"; import styles from "./BaseSticker.module.scss"; interface StickerProps { - children?: React.ReactNode; - position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"; imageSrc: string; alt: string; height?: number; @@ -17,11 +15,11 @@ interface StickerProps { // dragConstraints prop can be an object containing coordinates, a Falsy boolean, or a parent ref (https://www.framer.com/motion/gestures/#:~:text=%23-,dragConstraints%3A,-false%20%7C%20Partial%3CBoundingBox2D) animate?: object | undefined; transition?: object | undefined; + offsetX?: number; + offsetY?: number; } const BaseSticker: React.FC = ({ - children, - position = "bottom-right", imageSrc, alt, height = 100, @@ -30,6 +28,8 @@ const BaseSticker: React.FC = ({ dragConstraints = false, animate = {}, transition = {}, + offsetX = 0, + offsetY = 0, }) => { // prevent next from throwing error involving DOM API const pageRef = useRef( @@ -58,7 +58,7 @@ const BaseSticker: React.FC = ({ filter: `drop-shadow(10px 14px 10px rgba(0, 0, 0, 0.2))`, }, drag: true, - initial: { x: -width / 2, y: -height / 2 }, + initial: { x: -width / 2 + offsetX, y: -height / 2 + offsetY }, dragMomentum: false, dragConstraints: dragConstraints ? dragConstraints : pageRef, dragElastic: 0.2, @@ -67,32 +67,15 @@ const BaseSticker: React.FC = ({ : {}; return ( -
- {children} -
- -
-
+ ); }; diff --git a/apps/site/src/components/Sticker/StickerPosition.module.scss b/apps/site/src/components/Sticker/StickerPosition.module.scss new file mode 100644 index 00000000..a9bd3cdf --- /dev/null +++ b/apps/site/src/components/Sticker/StickerPosition.module.scss @@ -0,0 +1,12 @@ +.stickerPosition { + position: relative; + display: flex; + justify-content: center; + width: max-content; +} + +.stickerParent { + position: relative; + width: 0; + height: 0; +} diff --git a/apps/site/src/components/Sticker/StickerPosition.tsx b/apps/site/src/components/Sticker/StickerPosition.tsx new file mode 100644 index 00000000..445796cc --- /dev/null +++ b/apps/site/src/components/Sticker/StickerPosition.tsx @@ -0,0 +1,56 @@ +import type { StickerProps } from "./Stickers/stickerProps"; +import styles from "./StickerPosition.module.scss"; + +interface Sticker { + Node: React.ComponentType; + positionX?: "left" | "right"; + positionY?: "top" | "bottom"; + offsetX?: number; + offsetY?: number; +} + +const StickerParent: React.FC = ({ + Node, + positionY = "top", + offsetX, + offsetY, +}) => ( +
+ +
+); + +interface StickerPositionProps { + children?: React.ReactNode; + stickers: Sticker[]; +} + +const StickerPosition: React.FC = ({ + children, + stickers, +}) => { + return ( +
+ {stickers + .filter(({ positionX }) => !positionX || positionX === "left") + .map((sticker) => ( + // eslint-disable-next-line react/jsx-key + + ))} + {children} + {stickers + .filter(({ positionX }) => positionX === "right") + .map((sticker) => ( + // eslint-disable-next-line react/jsx-key + + ))} +
+ ); +}; + +export default StickerPosition; diff --git a/apps/site/src/components/Sticker/Stickers/HackSticker/HackSticker.module.scss b/apps/site/src/components/Sticker/Stickers/HackSticker/HackSticker.module.scss deleted file mode 100644 index d308296a..00000000 --- a/apps/site/src/components/Sticker/Stickers/HackSticker/HackSticker.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -.stickerContainer { - filter: drop-shadow(3px 5px 5px rgba(black, 0.3)); -} diff --git a/apps/site/src/components/Sticker/Stickers/HackSticker/HackSticker.tsx b/apps/site/src/components/Sticker/Stickers/HackSticker/HackSticker.tsx index 27b24f04..cd098ecb 100644 --- a/apps/site/src/components/Sticker/Stickers/HackSticker/HackSticker.tsx +++ b/apps/site/src/components/Sticker/Stickers/HackSticker/HackSticker.tsx @@ -1,18 +1,18 @@ +import type React from "react"; +import type { StickerProps } from "../stickerProps"; import HackLogo from "@/assets/icons/hack.png"; import BaseSticker from "../../BaseSticker"; -import styles from "./HackSticker.module.scss"; import { lightShake } from "@/components/animation"; -export default function HackSticker({ style }: { style?: object | undefined }) { - return ( -
- -
- ); -} +const HackSticker: React.FC = (props) => ( + +); + +export default HackSticker; diff --git a/apps/site/src/components/Sticker/Stickers/HeartSticker/HeartSticker.tsx b/apps/site/src/components/Sticker/Stickers/HeartSticker/HeartSticker.tsx index 2eebefe0..9257901f 100644 --- a/apps/site/src/components/Sticker/Stickers/HeartSticker/HeartSticker.tsx +++ b/apps/site/src/components/Sticker/Stickers/HeartSticker/HeartSticker.tsx @@ -1,14 +1,10 @@ +import type React from "react"; +import type { StickerProps } from "../stickerProps"; import HeartEmoji from "@/assets/images/heart_emoji.png"; import BaseSticker from "../../BaseSticker"; import { fastShake } from "@/components/animation"; -import React from "react"; -interface HeartStickerProps { - children: React.ReactNode; - position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"; -} - -const HeartSticker: React.FC = (props) => ( +const HeartSticker: React.FC = (props) => ( * { + width: max-content; + display: block; transform: skew(-$skew-amount); } diff --git a/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx b/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx index 6858fc13..fedae79f 100644 --- a/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx +++ b/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx @@ -1,19 +1,38 @@ import Button from "react-bootstrap/Button"; -import { HeartSticker } from "@/components/Sticker/Stickers"; +import StickerPosition from "@/components/Sticker/StickerPosition"; +import { HackSticker, HeartSticker } from "@/components/Sticker/Stickers"; import styles from "./ApplyButton.module.scss"; export default function ApplyButton() { return ( - + - + ); } From 574190f2ef8170915a31cdb38b2be32581f463cc Mon Sep 17 00:00:00 2001 From: Alexander Liu Date: Sun, 29 Oct 2023 04:57:46 -0700 Subject: [PATCH 7/8] fix: remove extraneous broken sticker layout component --- .../components/StickerLayout/StickerLayout.tsx | 16 ---------------- 1 file changed, 16 deletions(-) delete mode 100644 apps/site/src/views/Home/components/StickerLayout/StickerLayout.tsx diff --git a/apps/site/src/views/Home/components/StickerLayout/StickerLayout.tsx b/apps/site/src/views/Home/components/StickerLayout/StickerLayout.tsx deleted file mode 100644 index 50b7435c..00000000 --- a/apps/site/src/views/Home/components/StickerLayout/StickerLayout.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { HeartSticker } from "@/components/Sticker/Stickers"; - -export default function StickerLayout() { - return ( -
- - - ); -} From 85c22127dd7e932c852f63a10a771eb169f51c46 Mon Sep 17 00:00:00 2001 From: Alexander Liu Date: Sun, 29 Oct 2023 14:32:43 -0700 Subject: [PATCH 8/8] feat: remove hack sticker from button --- .../src/views/Home/components/ApplyButton/ApplyButton.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx b/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx index fedae79f..5c1b5ee0 100644 --- a/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx +++ b/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx @@ -15,13 +15,6 @@ export default function ApplyButton() { offsetX: 50, offsetY: 50, }, - { - Node: HackSticker, - positionX: "left", - positionY: "top", - offsetX: -50, - offsetY: -50, - }, ]} >