From 4c2571cfc82fc1ed6a963b63f99ffaa4bde93448 Mon Sep 17 00:00:00 2001 From: Nishanth Mane Date: Wed, 7 Feb 2024 19:21:04 +0530 Subject: [PATCH 1/3] feat: (section-list): Allow user to drag and drop to sort the sections in the sidebar --- .gitignore | 4 + package-lock.json | 11 +++ package.json | 1 + src/components/generator/Sidebar.tsx | 110 +++++++++++++++++++-------- 4 files changed, 96 insertions(+), 30 deletions(-) diff --git a/.gitignore b/.gitignore index 8c85756e..caf2e30b 100644 --- a/.gitignore +++ b/.gitignore @@ -40,3 +40,7 @@ yarn-error.log* # swiftlatex's postinstall files /public/*.js /public/*.wasm + +#vscode +.vscode +.history/** \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 75df4a94..0126ac69 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "polished": "^4.2.2", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-dragged": "^1.1.0", "react-hook-form": "^7.31.3", "react-icons": "^4.4.0", "react-pdf": "^5.7.2", @@ -4836,6 +4837,16 @@ "react": "^18.2.0" } }, + "node_modules/react-dragged": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/react-dragged/-/react-dragged-1.1.0.tgz", + "integrity": "sha512-3Mf437KumcHUgajkbOnY6khYUCVrcpLDZBZ/V3Trkve3xiVm7sTie0lJdoIvYcDAku/zxWLg5doGa4Igh8zhAw==", + "peerDependencies": { + "@types/node": ">= 14", + "@types/react": ">= 17", + "react": ">= 17" + } + }, "node_modules/react-hook-form": { "version": "7.45.1", "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.45.1.tgz", diff --git a/package.json b/package.json index e2610204..9aa65367 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "polished": "^4.2.2", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-dragged": "^1.1.0", "react-hook-form": "^7.31.3", "react-icons": "^4.4.0", "react-pdf": "^5.7.2", diff --git a/src/components/generator/Sidebar.tsx b/src/components/generator/Sidebar.tsx index bd21bf1d..f36e2e38 100644 --- a/src/components/generator/Sidebar.tsx +++ b/src/components/generator/Sidebar.tsx @@ -2,9 +2,11 @@ import Link from 'next/link' import { useRouter } from 'next/router' import styled from 'styled-components' import { MdDragIndicator } from 'react-icons/md' +import DragSort from 'react-dragged' import { colors } from '../../theme' import { PrimaryButton, IconButton } from '../core/Button' +import { useState } from 'react' const Aside = styled.aside` grid-area: sidebar; @@ -12,7 +14,8 @@ const Aside = styled.aside` padding: 24px 36px; ` -const Nav = styled.nav` +// div targets the items inside the drag sort library +const NavList = styled.nav` display: flex; flex-direction: column; align-items: flex-start; @@ -20,8 +23,11 @@ const Nav = styled.nav` gap: 24px; margin-bottom: 28px; - button { - cursor: grab; + > div { + display: flex; + flex-direction: column; + flex-grow: 1; + gap: 24px; } ` @@ -33,38 +39,82 @@ const StyledLink = styled(Link)<{ $active: boolean }>` ${(props) => props.$active && `color: ${colors.primary};`} ` +const DragIconButton = styled(IconButton)` + opacity: ${(props) => (props.disabled ? 0 : 1)}; + cursor: ${(props) => (props.disabled ? 'default' : 'grab')}; +` + +const staticSectionLinks = [ + { label: 'Templates', section: 'templates' }, + { label: 'Profile', section: 'basics' } +] + +const sortableSectionLinks = [ + { label: 'Education', section: 'education' }, + { label: 'Work Experience', section: 'work' }, + { label: 'Skills', section: 'skills' }, + { label: 'Projects', section: 'projects' }, + { label: 'Awards', section: 'awards' } +] + +const NavItem = ({ + label, + section, + currSection, + draggable +}: { + label: string + section: string + currSection: string + draggable?: boolean +}) => ( +
+ + + + + {label} + +
+) + export function Sidebar() { const router = useRouter() - const { section: currSection = 'basics' } = router.query - - const sectionLinks = [ - { label: 'Templates', section: 'templates' }, - { label: 'Profile', section: 'basics' }, - { label: 'Education', section: 'education' }, - { label: 'Work Experience', section: 'work' }, - { label: 'Skills', section: 'skills' }, - { label: 'Projects', section: 'projects' }, - { label: 'Awards', section: 'awards' } - ] + const currSection = (router.query.section || 'basics') as string + const [sections, updateSectionOrder] = useState(sortableSectionLinks) return ( ) From dbf72348599937325966366a5fc45adc23a78dab Mon Sep 17 00:00:00 2001 From: Nishanth Mane Date: Thu, 8 Feb 2024 00:08:26 +0530 Subject: [PATCH 2/3] feat: (drag-sort): use identical drag sort library to that of v2 --- package-lock.json | 38 +++++++++++--- package.json | 2 +- src/components/generator/Sidebar.tsx | 76 +++++++++++++--------------- 3 files changed, 66 insertions(+), 50 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0126ac69..824e26b2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,7 @@ "polished": "^4.2.2", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-dragged": "^1.1.0", + "react-easy-sort": "^1.6.0", "react-hook-form": "^7.31.3", "react-icons": "^4.4.0", "react-pdf": "^5.7.2", @@ -1702,6 +1702,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/array-move": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/array-move/-/array-move-3.0.1.tgz", + "integrity": "sha512-H3Of6NIn2nNU1gsVDqDnYKY/LCdWvCMMOWifNGhKcVQgiZ6nOek39aESOvro6zmueP07exSl93YLvkN4fZOkSg==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/array-union": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", @@ -4837,16 +4848,27 @@ "react": "^18.2.0" } }, - "node_modules/react-dragged": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/react-dragged/-/react-dragged-1.1.0.tgz", - "integrity": "sha512-3Mf437KumcHUgajkbOnY6khYUCVrcpLDZBZ/V3Trkve3xiVm7sTie0lJdoIvYcDAku/zxWLg5doGa4Igh8zhAw==", + "node_modules/react-easy-sort": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/react-easy-sort/-/react-easy-sort-1.6.0.tgz", + "integrity": "sha512-zd9Nn90wVlZPEwJrpqElN87sf9GZnFR1StfjgNQVbSpR5QTSzCHjEYK6REuwq49Ip+76KOMSln9tg/ST2KLelg==", + "dependencies": { + "array-move": "^3.0.1", + "tslib": "2.0.1" + }, + "engines": { + "node": ">=16" + }, "peerDependencies": { - "@types/node": ">= 14", - "@types/react": ">= 17", - "react": ">= 17" + "react": ">=16.4.0", + "react-dom": ">=16.4.0" } }, + "node_modules/react-easy-sort/node_modules/tslib": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz", + "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ==" + }, "node_modules/react-hook-form": { "version": "7.45.1", "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.45.1.tgz", diff --git a/package.json b/package.json index 9aa65367..52ae79fd 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "polished": "^4.2.2", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-dragged": "^1.1.0", + "react-easy-sort": "^1.6.0", "react-hook-form": "^7.31.3", "react-icons": "^4.4.0", "react-pdf": "^5.7.2", diff --git a/src/components/generator/Sidebar.tsx b/src/components/generator/Sidebar.tsx index f36e2e38..e11be7b7 100644 --- a/src/components/generator/Sidebar.tsx +++ b/src/components/generator/Sidebar.tsx @@ -1,12 +1,13 @@ +import { useState } from 'react' import Link from 'next/link' import { useRouter } from 'next/router' import styled from 'styled-components' import { MdDragIndicator } from 'react-icons/md' -import DragSort from 'react-dragged' +import arrayMove from 'array-move' +import SortableList, { SortableItem, SortableKnob } from 'react-easy-sort' import { colors } from '../../theme' import { PrimaryButton, IconButton } from '../core/Button' -import { useState } from 'react' const Aside = styled.aside` grid-area: sidebar; @@ -44,17 +45,14 @@ const DragIconButton = styled(IconButton)` cursor: ${(props) => (props.disabled ? 'default' : 'grab')}; ` -const staticSectionLinks = [ - { label: 'Templates', section: 'templates' }, - { label: 'Profile', section: 'basics' } -] - -const sortableSectionLinks = [ - { label: 'Education', section: 'education' }, - { label: 'Work Experience', section: 'work' }, - { label: 'Skills', section: 'skills' }, - { label: 'Projects', section: 'projects' }, - { label: 'Awards', section: 'awards' } +const sections = [ + { label: 'Templates', section: 'templates', isSortble: false }, + { label: 'Profile', section: 'basics', isSortble: false }, + { label: 'Education', section: 'education', isSortble: true }, + { label: 'Work Experience', section: 'work', isSortble: true }, + { label: 'Skills', section: 'skills', isSortble: true }, + { label: 'Projects', section: 'projects', isSortble: true }, + { label: 'Awards', section: 'awards', isSortble: true } ] const NavItem = ({ @@ -69,9 +67,11 @@ const NavItem = ({ draggable?: boolean }) => (
- - - + + + + + { + updateSectionOrder((array) => arrayMove(array, oldIndex, newIndex)) + } return ( From 86bc490361cb1d5be83f492f02ad8707028a469f Mon Sep 17 00:00:00 2001 From: Nishanth Mane Date: Thu, 8 Feb 2024 00:12:39 +0530 Subject: [PATCH 3/3] fix: remove unnecessary styling --- src/components/generator/Sidebar.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/generator/Sidebar.tsx b/src/components/generator/Sidebar.tsx index e11be7b7..b6b4081b 100644 --- a/src/components/generator/Sidebar.tsx +++ b/src/components/generator/Sidebar.tsx @@ -18,13 +18,9 @@ const Aside = styled.aside` // div targets the items inside the drag sort library const NavList = styled.nav` display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - gap: 24px; margin-bottom: 28px; - > div { + .sort-list-wrapper { display: flex; flex-direction: column; flex-grow: 1; @@ -93,10 +89,14 @@ export function Sidebar() { return (