From 57dd7d00d1a4533f5d7e6907dd431c1d275fd363 Mon Sep 17 00:00:00 2001 From: MAYUR Date: Wed, 1 Jan 2025 14:04:07 +0530 Subject: [PATCH 01/12] feat: added framer motions --- package-lock.json | 40 +++++++++++++- package.json | 1 + src/components/SnippetList.tsx | 51 +++++++++++++----- src/components/SnippetModal.tsx | 93 +++++++++++++++++++-------------- 4 files changed, 129 insertions(+), 56 deletions(-) diff --git a/package-lock.json b/package-lock.json index c616748a..03c5d905 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "quicksnip", "version": "0.0.0", "dependencies": { + "framer-motion": "^11.15.0", "prismjs": "^1.29.0", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -2026,6 +2027,32 @@ "node": ">=0.4.x" } }, + "node_modules/framer-motion": { + "version": "11.15.0", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.15.0.tgz", + "integrity": "sha512-MLk8IvZntxOMg7lDBLw2qgTHHv664bYoYmnFTmE0Gm/FW67aOJk0WM3ctMcG+Xhcv+vh5uyyXwxvxhSeJzSe+w==", + "dependencies": { + "motion-dom": "^11.14.3", + "motion-utils": "^11.14.3", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -2363,6 +2390,16 @@ "node": "*" } }, + "node_modules/motion-dom": { + "version": "11.14.3", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.14.3.tgz", + "integrity": "sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA==" + }, + "node_modules/motion-utils": { + "version": "11.14.3", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.14.3.tgz", + "integrity": "sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ==" + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -2925,8 +2962,7 @@ "node_modules/tslib": { "version": "2.8.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", - "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", - "dev": true + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==" }, "node_modules/type-check": { "version": "0.4.0", diff --git a/package.json b/package.json index df52e2a2..0731216f 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "preview": "vite preview" }, "dependencies": { + "framer-motion": "^11.15.0", "prismjs": "^1.29.0", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/src/components/SnippetList.tsx b/src/components/SnippetList.tsx index 6b4a5ce7..8bb6d9d8 100644 --- a/src/components/SnippetList.tsx +++ b/src/components/SnippetList.tsx @@ -1,4 +1,5 @@ import { useState } from "react"; +import { motion, AnimatePresence } from "framer-motion"; import { SnippetType } from "../types"; import { useAppContext } from "../contexts/AppContext"; import { useSnippets } from "../hooks/useSnippets"; @@ -30,31 +31,53 @@ const SnippetList = () => { return ( <> - - - {isModalOpen && snippet && ( - - )} + + + + {isModalOpen && snippet && ( + + )} + ); }; diff --git a/src/components/SnippetModal.tsx b/src/components/SnippetModal.tsx index 791957ef..7e9151fb 100644 --- a/src/components/SnippetModal.tsx +++ b/src/components/SnippetModal.tsx @@ -1,5 +1,6 @@ import React from "react"; import ReactDOM from "react-dom"; +import { motion, AnimatePresence } from "framer-motion"; import Button from "./Button"; import { CloseIcon } from "./Icons"; import CodePreview from "./CodePreview"; @@ -23,46 +24,58 @@ const SnippetModal: React.FC = ({ useEscapeKey(handleCloseModal); return ReactDOM.createPortal( -
{ - if (e.target === e.currentTarget) { - handleCloseModal(); - } - }} - > -
-
-

{snippet.title}

- -
- -

- Description: - {snippet.description} -

-

- Contributed by{" "} - - @{snippet.author} - -

-
    - {snippet.tags.map((tag) => ( -
  • - {tag} -
    • - ))} -
-
-
, + + { + if (e.target === e.currentTarget) { + handleCloseModal(); + } + }} + initial={{ opacity: 0 }} + animate={{ opacity: 1 }} + exit={{ opacity: 0 }} + > + +
+

{snippet.title}

+ +
+ +

+ Description: + {snippet.description} +

+

+ Contributed by{" "} + + @{snippet.author} + +

+
    + {snippet.tags.map((tag) => ( +
  • + {tag} +
    • + ))} +
+ + + , modalRoot ); }; From 01ea1fd87e468f526a1a80885e20365ccef47a39 Mon Sep 17 00:00:00 2001 From: MAYUR Date: Wed, 1 Jan 2025 14:56:34 +0530 Subject: [PATCH 02/12] fix: add exit animations --- src/components/SnippetList.tsx | 2 +- src/components/SnippetModal.tsx | 99 +++++++++++++++++---------------- 2 files changed, 51 insertions(+), 50 deletions(-) diff --git a/src/components/SnippetList.tsx b/src/components/SnippetList.tsx index 8bb6d9d8..47df9b6d 100644 --- a/src/components/SnippetList.tsx +++ b/src/components/SnippetList.tsx @@ -69,7 +69,7 @@ const SnippetList = () => { ))} - + {isModalOpen && snippet && ( = ({ useEscapeKey(handleCloseModal); return ReactDOM.createPortal( - + { + if (e.target === e.currentTarget) { + handleCloseModal(); + } + }} + initial={{ opacity: 0 }} + animate={{ opacity: 1 }} + exit={{ opacity: 0 }} + transition={{ duration: 0.2 }} + > { - if (e.target === e.currentTarget) { - handleCloseModal(); - } - }} - initial={{ opacity: 0 }} - animate={{ opacity: 1 }} - exit={{ opacity: 0 }} + key="modal-content" + className="modal | flow" + data-flow-space="lg" + initial={{ scale: 0.8, opacity: 0, y: 20 }} + animate={{ scale: 1, opacity: 1, y: 0 }} + exit={{ scale: 0.8, opacity: 0, y: 20 }} + transition={{ type: "spring", duration: 0.5 }} > - -
-

{snippet.title}

- -
- -

- Description: - {snippet.description} -

-

- Contributed by{" "} - - @{snippet.author} - -

-
    - {snippet.tags.map((tag) => ( -
  • - {tag} -
    • - ))} -
- +
+

{snippet.title}

+ +
+ +

+ Description: + {snippet.description} +

+

+ Contributed by{" "} + + @{snippet.author} + +

+
    + {snippet.tags.map((tag) => ( +
  • + {tag} +
    • + ))} +
- , + , modalRoot ); }; From 98d69c05039b83c763ac4d6b81052677793280bd Mon Sep 17 00:00:00 2001 From: MAYUR Date: Wed, 1 Jan 2025 15:00:08 +0530 Subject: [PATCH 03/12] fix: add exit animations --- src/components/SnippetModal.tsx | 2 +- tsconfig.app.tsbuildinfo | 1 + tsconfig.node.tsbuildinfo | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) create mode 100644 tsconfig.app.tsbuildinfo create mode 100644 tsconfig.node.tsbuildinfo diff --git a/src/components/SnippetModal.tsx b/src/components/SnippetModal.tsx index 13d6ae00..cec8c981 100644 --- a/src/components/SnippetModal.tsx +++ b/src/components/SnippetModal.tsx @@ -1,6 +1,6 @@ import React from "react"; import ReactDOM from "react-dom"; -import { motion, AnimatePresence } from "framer-motion"; +import { motion } from "framer-motion"; import Button from "./Button"; import { CloseIcon } from "./Icons"; import CodePreview from "./CodePreview"; diff --git a/tsconfig.app.tsbuildinfo b/tsconfig.app.tsbuildinfo new file mode 100644 index 00000000..d97074a0 --- /dev/null +++ b/tsconfig.app.tsbuildinfo @@ -0,0 +1 @@ +{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/button.tsx","./src/components/categorylist.tsx","./src/components/codepreview.tsx","./src/components/copytoclipboard.tsx","./src/components/icons.tsx","./src/components/languageselector.tsx","./src/components/linkbutton.tsx","./src/components/logo.tsx","./src/components/searchinput.tsx","./src/components/snippetlist.tsx","./src/components/snippetmodal.tsx","./src/components/themetoggle.tsx","./src/contexts/appcontext.tsx","./src/hooks/usecategories.ts","./src/hooks/useescapekey.ts","./src/hooks/usefetch.ts","./src/hooks/usekeyboardnavigation.ts","./src/hooks/uselanguages.ts","./src/hooks/usesnippets.ts","./src/layouts/banner.tsx","./src/layouts/footer.tsx","./src/layouts/header.tsx","./src/layouts/sidebar.tsx","./src/types/index.ts","./src/utils/slugify.ts"],"version":"5.6.3"} \ No newline at end of file diff --git a/tsconfig.node.tsbuildinfo b/tsconfig.node.tsbuildinfo new file mode 100644 index 00000000..75ea0011 --- /dev/null +++ b/tsconfig.node.tsbuildinfo @@ -0,0 +1 @@ +{"root":["./vite.config.ts"],"version":"5.6.3"} \ No newline at end of file From fac2354bd2ece969fd717bf0d35cc45434b6aaf5 Mon Sep 17 00:00:00 2001 From: MAYUR Date: Wed, 1 Jan 2025 15:26:46 +0530 Subject: [PATCH 04/12] fix: add exit animations --- tsconfig.app.tsbuildinfo | 1 - tsconfig.node.tsbuildinfo | 1 - 2 files changed, 2 deletions(-) delete mode 100644 tsconfig.app.tsbuildinfo delete mode 100644 tsconfig.node.tsbuildinfo diff --git a/tsconfig.app.tsbuildinfo b/tsconfig.app.tsbuildinfo deleted file mode 100644 index d97074a0..00000000 --- a/tsconfig.app.tsbuildinfo +++ /dev/null @@ -1 +0,0 @@ -{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/button.tsx","./src/components/categorylist.tsx","./src/components/codepreview.tsx","./src/components/copytoclipboard.tsx","./src/components/icons.tsx","./src/components/languageselector.tsx","./src/components/linkbutton.tsx","./src/components/logo.tsx","./src/components/searchinput.tsx","./src/components/snippetlist.tsx","./src/components/snippetmodal.tsx","./src/components/themetoggle.tsx","./src/contexts/appcontext.tsx","./src/hooks/usecategories.ts","./src/hooks/useescapekey.ts","./src/hooks/usefetch.ts","./src/hooks/usekeyboardnavigation.ts","./src/hooks/uselanguages.ts","./src/hooks/usesnippets.ts","./src/layouts/banner.tsx","./src/layouts/footer.tsx","./src/layouts/header.tsx","./src/layouts/sidebar.tsx","./src/types/index.ts","./src/utils/slugify.ts"],"version":"5.6.3"} \ No newline at end of file diff --git a/tsconfig.node.tsbuildinfo b/tsconfig.node.tsbuildinfo deleted file mode 100644 index 75ea0011..00000000 --- a/tsconfig.node.tsbuildinfo +++ /dev/null @@ -1 +0,0 @@ -{"root":["./vite.config.ts"],"version":"5.6.3"} \ No newline at end of file From 05962c0f97bfbdca8fdb161abddc945d984e6e3f Mon Sep 17 00:00:00 2001 From: MAYUR Date: Wed, 1 Jan 2025 16:46:10 +0530 Subject: [PATCH 05/12] feat: added framer motions --- src/components/SnippetList.tsx | 67 ++++++++++++++++++---------------- src/types/index.ts | 5 ++- 2 files changed, 39 insertions(+), 33 deletions(-) diff --git a/src/components/SnippetList.tsx b/src/components/SnippetList.tsx index 47df9b6d..bdd31026 100644 --- a/src/components/SnippetList.tsx +++ b/src/components/SnippetList.tsx @@ -34,39 +34,44 @@ const SnippetList = () => { - {fetchedSnippets.map((snippet, idx) => ( - - handleOpenModal(snippet)} - whileHover={{ scale: 1.01 }} - whileTap={{ scale: 0.98 }} + + {fetchedSnippets.map((snippet, idx) => ( + -
- {language.lang} -
- -

{snippet.title}

- - - ))} + handleOpenModal(snippet)} + whileHover={{ scale: 1.01 }} + whileTap={{ scale: 0.98 }} + > +
+ {language.lang} +
+

{snippet.title}

+ + + ))} + diff --git a/src/types/index.ts b/src/types/index.ts index 31b79fe3..c09a4891 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -8,13 +8,14 @@ export type CategoryType = { snippets: SnippetType[]; }; -export type SnippetType = { +export interface SnippetType { + id?: string | number; title: string; description: string; code: string[]; tags: string[]; author: string; -}; +} export type AppState = { language: LanguageType; From 865ee361252ee83d37f2d283365de74ca6f20e9e Mon Sep 17 00:00:00 2001 From: MAYUR Date: Wed, 1 Jan 2025 16:53:22 +0530 Subject: [PATCH 06/12] feat: added framer motions --- src/types/index.ts | 2 +- tsconfig.app.tsbuildinfo | 1 + tsconfig.node.tsbuildinfo | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) create mode 100644 tsconfig.app.tsbuildinfo create mode 100644 tsconfig.node.tsbuildinfo diff --git a/src/types/index.ts b/src/types/index.ts index c09a4891..55259da1 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -15,7 +15,7 @@ export interface SnippetType { code: string[]; tags: string[]; author: string; -} +}; export type AppState = { language: LanguageType; diff --git a/tsconfig.app.tsbuildinfo b/tsconfig.app.tsbuildinfo new file mode 100644 index 00000000..d97074a0 --- /dev/null +++ b/tsconfig.app.tsbuildinfo @@ -0,0 +1 @@ +{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/button.tsx","./src/components/categorylist.tsx","./src/components/codepreview.tsx","./src/components/copytoclipboard.tsx","./src/components/icons.tsx","./src/components/languageselector.tsx","./src/components/linkbutton.tsx","./src/components/logo.tsx","./src/components/searchinput.tsx","./src/components/snippetlist.tsx","./src/components/snippetmodal.tsx","./src/components/themetoggle.tsx","./src/contexts/appcontext.tsx","./src/hooks/usecategories.ts","./src/hooks/useescapekey.ts","./src/hooks/usefetch.ts","./src/hooks/usekeyboardnavigation.ts","./src/hooks/uselanguages.ts","./src/hooks/usesnippets.ts","./src/layouts/banner.tsx","./src/layouts/footer.tsx","./src/layouts/header.tsx","./src/layouts/sidebar.tsx","./src/types/index.ts","./src/utils/slugify.ts"],"version":"5.6.3"} \ No newline at end of file diff --git a/tsconfig.node.tsbuildinfo b/tsconfig.node.tsbuildinfo new file mode 100644 index 00000000..75ea0011 --- /dev/null +++ b/tsconfig.node.tsbuildinfo @@ -0,0 +1 @@ +{"root":["./vite.config.ts"],"version":"5.6.3"} \ No newline at end of file From cd197d5aee2b55a82182ca0cfed4ac7e7f053d2b Mon Sep 17 00:00:00 2001 From: MAYUR <74107137+mayur1377@users.noreply.github.com> Date: Wed, 1 Jan 2025 16:54:14 +0530 Subject: [PATCH 07/12] Update index.ts minor fix --- src/types/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/types/index.ts b/src/types/index.ts index c09a4891..55259da1 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -15,7 +15,7 @@ export interface SnippetType { code: string[]; tags: string[]; author: string; -} +}; export type AppState = { language: LanguageType; From 004dca6ab2384e1576e2582a414a064902c1d89b Mon Sep 17 00:00:00 2001 From: MAYUR Date: Wed, 1 Jan 2025 17:30:47 +0530 Subject: [PATCH 08/12] fix: lint errors fix --- src/components/SnippetList.tsx | 21 +++++++++------------ src/components/SnippetModal.tsx | 4 +++- src/types/index.ts | 2 +- 3 files changed, 13 insertions(+), 14 deletions(-) diff --git a/src/components/SnippetList.tsx b/src/components/SnippetList.tsx index bdd31026..aac9cd0f 100644 --- a/src/components/SnippetList.tsx +++ b/src/components/SnippetList.tsx @@ -31,30 +31,27 @@ const SnippetList = () => { return ( <> - + {fetchedSnippets.map((snippet, idx) => ( = ({ handleCloseModal, }) => { const modalRoot = document.getElementById("modal-root"); - if (!modalRoot) return null; + useEscapeKey(handleCloseModal); + if (!modalRoot) return null; + return ReactDOM.createPortal( Date: Wed, 1 Jan 2025 17:33:56 +0530 Subject: [PATCH 09/12] fix: lint errors fix --- src/types/index.ts | 2 +- tsconfig.app.tsbuildinfo | 1 - tsconfig.node.tsbuildinfo | 1 - 3 files changed, 1 insertion(+), 3 deletions(-) delete mode 100644 tsconfig.app.tsbuildinfo delete mode 100644 tsconfig.node.tsbuildinfo diff --git a/src/types/index.ts b/src/types/index.ts index 55259da1..c09a4891 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -15,7 +15,7 @@ export interface SnippetType { code: string[]; tags: string[]; author: string; -}; +} export type AppState = { language: LanguageType; diff --git a/tsconfig.app.tsbuildinfo b/tsconfig.app.tsbuildinfo deleted file mode 100644 index d97074a0..00000000 --- a/tsconfig.app.tsbuildinfo +++ /dev/null @@ -1 +0,0 @@ -{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/button.tsx","./src/components/categorylist.tsx","./src/components/codepreview.tsx","./src/components/copytoclipboard.tsx","./src/components/icons.tsx","./src/components/languageselector.tsx","./src/components/linkbutton.tsx","./src/components/logo.tsx","./src/components/searchinput.tsx","./src/components/snippetlist.tsx","./src/components/snippetmodal.tsx","./src/components/themetoggle.tsx","./src/contexts/appcontext.tsx","./src/hooks/usecategories.ts","./src/hooks/useescapekey.ts","./src/hooks/usefetch.ts","./src/hooks/usekeyboardnavigation.ts","./src/hooks/uselanguages.ts","./src/hooks/usesnippets.ts","./src/layouts/banner.tsx","./src/layouts/footer.tsx","./src/layouts/header.tsx","./src/layouts/sidebar.tsx","./src/types/index.ts","./src/utils/slugify.ts"],"version":"5.6.3"} \ No newline at end of file diff --git a/tsconfig.node.tsbuildinfo b/tsconfig.node.tsbuildinfo deleted file mode 100644 index 75ea0011..00000000 --- a/tsconfig.node.tsbuildinfo +++ /dev/null @@ -1 +0,0 @@ -{"root":["./vite.config.ts"],"version":"5.6.3"} \ No newline at end of file From 085cea484c3db75ff0709c959de696660acfd7ee Mon Sep 17 00:00:00 2001 From: MAYUR Date: Thu, 2 Jan 2025 11:26:23 +0530 Subject: [PATCH 10/12] feat: fix --- src/types/index.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/types/index.ts b/src/types/index.ts index c09a4891..791d3f25 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -9,13 +9,12 @@ export type CategoryType = { }; export interface SnippetType { - id?: string | number; title: string; description: string; code: string[]; tags: string[]; author: string; -} +}; export type AppState = { language: LanguageType; From 647633cf9f68a67e0be8c567d3c272aa59bee681 Mon Sep 17 00:00:00 2001 From: MAYUR Date: Thu, 2 Jan 2025 11:53:01 +0530 Subject: [PATCH 11/12] fix: lint errors fix --- src/types/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/types/index.ts b/src/types/index.ts index 791d3f25..31b79fe3 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -8,7 +8,7 @@ export type CategoryType = { snippets: SnippetType[]; }; -export interface SnippetType { +export type SnippetType = { title: string; description: string; code: string[]; From 1696e76205801f90e32c47a345eb074bac9d2e35 Mon Sep 17 00:00:00 2001 From: MAYUR Date: Thu, 2 Jan 2025 12:16:45 +0530 Subject: [PATCH 12/12] fix --- src/components/SnippetList.tsx | 6 ++---- src/components/SnippetModal.tsx | 4 +++- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/SnippetList.tsx b/src/components/SnippetList.tsx index a8336c9f..eb5ef79d 100644 --- a/src/components/SnippetList.tsx +++ b/src/components/SnippetList.tsx @@ -1,8 +1,6 @@ -import { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; -import { SnippetType } from "../types"; -import { useAppContext } from "../contexts/AppContext"; -import { useSnippets } from "../hooks/useSnippets"; +import { useState } from "react"; + import { useAppContext } from "@contexts/AppContext"; import { useSnippets } from "@hooks/useSnippets"; import { SnippetType } from "@types"; diff --git a/src/components/SnippetModal.tsx b/src/components/SnippetModal.tsx index a265d83a..b5e2379e 100644 --- a/src/components/SnippetModal.tsx +++ b/src/components/SnippetModal.tsx @@ -1,9 +1,11 @@ +import { motion } from "framer-motion"; import React from "react"; import ReactDOM from "react-dom"; -import { motion } from "framer-motion"; + import { useEscapeKey } from "@hooks/useEscapeKey"; import { SnippetType } from "@types"; import { slugify } from "@utils/slugify"; + import Button from "./Button"; import CodePreview from "./CodePreview"; import { CloseIcon } from "./Icons";