diff --git a/package-lock.json b/package-lock.json index c1720187..2a93181d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,8 +9,11 @@ "version": "3.0.0", "dependencies": { "archiver": "^5.3.1", + "babel-runtime": "^6.26.0", "common-tags": "^1.8.2", + "core-js": "^3.33.3", "fs-extra": "^10.1.0", + "fslightbox-react": "^1.7.6", "jotai": "^1.7.0", "next": "^13.5.4", "node-latex": "^3.1.0", @@ -1344,6 +1347,27 @@ "styled-components": ">= 2" } }, + "node_modules/babel-runtime": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", + "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==", + "dependencies": { + "core-js": "^2.4.0", + "regenerator-runtime": "^0.11.0" + } + }, + "node_modules/babel-runtime/node_modules/core-js": { + "version": "2.6.12", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", + "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==", + "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.", + "hasInstallScript": true + }, + "node_modules/babel-runtime/node_modules/regenerator-runtime": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", + "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==" + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -1600,6 +1624,16 @@ "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" }, + "node_modules/core-js": { + "version": "3.33.3", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.33.3.tgz", + "integrity": "sha512-lo0kOocUlLKmm6kv/FswQL8zbkH7mVsLJ/FULClOhv8WRVmKLVcs6XPNQAzstfeJTCHMyButEwG+z1kHxHoDZw==", + "hasInstallScript": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/core-js" + } + }, "node_modules/core-util-is": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", @@ -2617,6 +2651,16 @@ "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" }, + "node_modules/fslightbox-react": { + "version": "1.7.6", + "resolved": "https://registry.npmjs.org/fslightbox-react/-/fslightbox-react-1.7.6.tgz", + "integrity": "sha512-7LN2GZRLHo2vZGKdH+BZDJUoUDkCRCLlZ5hOwtLtZplmGZQ9nqzpG54cTax7XNjbYGTWLT6BHdMiL5zOEhiRlA==", + "peerDependencies": { + "prop-types": ">=15.6.2", + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", diff --git a/package.json b/package.json index 7e4f9c50..4b1bee6c 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,11 @@ }, "dependencies": { "archiver": "^5.3.1", + "babel-runtime": "^6.26.0", "common-tags": "^1.8.2", + "core-js": "^3.33.3", "fs-extra": "^10.1.0", + "fslightbox-react": "^1.7.6", "jotai": "^1.7.0", "next": "^13.5.4", "node-latex": "^3.1.0", diff --git a/src/components/generator/form/Form.tsx b/src/components/generator/form/Form.tsx index fbf30570..c9510237 100644 --- a/src/components/generator/form/Form.tsx +++ b/src/components/generator/form/Form.tsx @@ -70,7 +70,6 @@ export function Form() { const handleFormSubmit = useCallback(async () => { const formValues = convertFormData(formContext.getValues()) - console.log(formValues) setResume({ ...resume, isLoading: true }) try { const newResumeUrl = await generateResume(formValues) diff --git a/src/components/generator/form/sections/TemplatesSection.tsx b/src/components/generator/form/sections/TemplatesSection.tsx index 94ac7674..a6a4f718 100644 --- a/src/components/generator/form/sections/TemplatesSection.tsx +++ b/src/components/generator/form/sections/TemplatesSection.tsx @@ -1,8 +1,9 @@ import styled from 'styled-components' -import Lightbox from 'react-image-lightbox' +import { useFormContext } from 'react-hook-form' import { FormSection } from './FormSection' import { Button } from '../../../core/Button' -import { colors, sizes } from '../../../../theme' +import { colors } from '../../../../theme' +import FsLightbox from 'fslightbox-react' import { useState } from 'react' import image1 from '../img/1.png' @@ -28,14 +29,6 @@ const images = [ image10 ] -const Section = styled.section` - width: ${sizes.templatesSection.width}; - background: ${colors.background}; - border-left: 1px solid rgba(0, 0, 0, 0.5); - box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1); - overflow-y: scroll; -` - const Grid = styled.div` display: grid; grid-template-columns: 1fr 1fr; @@ -53,7 +46,7 @@ const Div = styled.div` align-items: center; ` -const Image = styled.img` +const StyledImage = styled.img` position: relative; border-radius: 3px; color: #fff; @@ -71,29 +64,43 @@ const Image = styled.img` } ` -type Props = { - selectedTemplate: number - selectTemplate: (templateId: number) => void -} - -type State = { - isLightboxOpen: boolean - lightboxImageIndex: number -} - export function TemplatesSection() { - const [state, setState] = useState({ - isLightboxOpen: false, - lightboxImageIndex: 0 - }) - - const showLightbox = (index: number) => { - setState({ isLightboxOpen: true, lightboxImageIndex: index }) - } + const { watch, setValue } = useFormContext() + const [lightboxImageIndex, setLightboxImageIndex] = useState(0) - const hideLightbox = () => { - setState({ isLightboxOpen: false }) + const setIndex = (index: number) => { + setLightboxImageIndex(index) } - return + return ( + + + {images.map((src, i) => ( +
+ setIndex(i)} + /> + +
+ ))} + + + + ) } diff --git a/src/pages/api/generate-pdf.ts b/src/pages/api/generate-pdf.ts index 74cf7f03..23d5d8ea 100644 --- a/src/pages/api/generate-pdf.ts +++ b/src/pages/api/generate-pdf.ts @@ -27,7 +27,7 @@ export default async function handler( */ async function generatePDF(formData: FormValues) { const { texDoc, opts } = getTemplateData(formData) - const pdf = await latex(texDoc, opts) + const pdf = latex(texDoc, opts) return pdf } diff --git a/src/pages/generator.tsx b/src/pages/generator.tsx index 1da05b9a..9b60f447 100644 --- a/src/pages/generator.tsx +++ b/src/pages/generator.tsx @@ -4,8 +4,6 @@ import styled from 'styled-components' import { Form } from '../components/generator/form/Form' import { Header } from '../components/generator/layout/Header' import { Sidebar } from '../components/generator/layout/Sidebar' -import { Templates } from '../components/generator/form/sections/TemplatesSection' - const Preview = dynamic( async () => (await import('../components/generator/preview/Preview')).Preview, { ssr: false } diff --git a/src/theme/colors.ts b/src/theme/colors.ts index 5102e3a9..1a472a0b 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -3,6 +3,7 @@ export const lightGray = '#121217' export const gray = '#161619' export const white = '#ffffff' export const green = '#22d7a6' +export const silver = '#c0c5ce' export const primary = green export const accent = green