Update dependencies and fix TypeScript errors in CVTemplates. Fixed s…

…vg styles in template3
josippapez · Jun 30, 2024 · dd49760 · dd49760
1 parent 7b03454
commit dd49760
Show file tree

Hide file tree

Showing 18 changed files with 4,888 additions and 12,075 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "next", "prettier"]
 }
diff --git a/compile-translations.mjs b/compile-translations.mjs
@@ -2,6 +2,7 @@
 
 import path from 'path';
 import fs from 'fs';
+import chalk from 'chalk';
 
 /**
  *
@@ -10,10 +11,13 @@ import fs from 'fs';
  * @param {function} callback
  */
 function findTranslations(startDir, regexFilter, callback) {
-  console.log('- Finding translation files in directory:', startDir);
+  console.log(
+    chalk.blue('- Finding translation files in directory:'),
+    startDir
+  );
 
   if (!fs.existsSync(startDir)) {
-    console.log('- Directory does not exist:', startDir);
+    console.log(chalk.red('- Directory does not exist:'), startDir);
     return;
   }
 
@@ -35,7 +39,7 @@ function findTranslations(startDir, regexFilter, callback) {
  * @param {string} filePath
  */
 function appendTranslationFile(filePath) {
-  console.log('- Translation file found:', filePath);
+  console.log(chalk.green('- Translation file found:'), chalk.yellow(filePath));
 
   const translationFile = JSON.parse(fs.readFileSync(filePath));
   const language = filePath.split('/').pop().replace('.json', '');

diff --git a/modules/PDFView/CVTemplates/CVTemplate.tsx b/modules/PDFView/CVTemplates/CVTemplate.tsx
@@ -13,6 +13,7 @@ import {
   Project,
   Skill,
 } from '@modules/PDFView/models';
+import { usePDFComponentsAreHTML } from '@rawwee/react-pdf-html';
 import { useTranslations } from 'next-intl';
 import { useMemo } from 'react';
 
@@ -56,12 +57,14 @@ export const getTemplate = (
 
 export const CVTemplate = (props: Props): JSX.Element => {
   const t = useTranslations('Templates');
+  const { isHTML } = usePDFComponentsAreHTML();
   const { template } = props;
 
   const options: OptionType = useMemo(() => {
     return {
       ...props,
       translate: t,
+      isHtml: isHTML,
     };
   }, []);
 

diff --git a/modules/PDFView/CVTemplates/TemplateComponents/Certificates.tsx b/modules/PDFView/CVTemplates/TemplateComponents/Certificates.tsx
@@ -1,11 +1,10 @@
 import { CertificateItem } from '@modules/PDFView/CVTemplates/TemplateComponents/CertificateItem';
 import { TextDisplay } from '@modules/PDFView/CVTemplates/TemplateComponents/TextDisplay';
-import { View } from '@rawwee/react-pdf-html';
 import { Certificate } from '@modules/PDFView/models';
+import { View } from '@rawwee/react-pdf-html';
 import { StyleSheet } from '@react-pdf/renderer';
 import { Style } from '@react-pdf/types';
 import { useTranslations } from 'next-intl';
-import { FC } from 'react';
 
 type Props = {
   certificateList?: Certificate[];
@@ -35,7 +34,7 @@ export const Certificates = ({
       <TextDisplay style={[styles.sectionTitle]}>
         {translate('certificates')}
       </TextDisplay>
-      {certificateList.map((cert, index) => (
+      {certificateList?.map((cert, index) => (
         <CertificateItem cert={cert} styles={styles} key={index} />
       ))}
     </View>

diff --git a/modules/PDFView/CVTemplates/TemplateComponents/Educations.tsx b/modules/PDFView/CVTemplates/TemplateComponents/Educations.tsx
@@ -34,7 +34,7 @@ export const Educations = ({
       <TextDisplay style={[styles.sectionTitle]}>
         {translate('education')}
       </TextDisplay>
-      {education.map((edu, index) => (
+      {education?.map((edu, index) => (
         <EducationItem
           edu={edu}
           styles={styles}

diff --git a/modules/PDFView/CVTemplates/TemplateComponents/Languages.tsx b/modules/PDFView/CVTemplates/TemplateComponents/Languages.tsx
@@ -82,7 +82,7 @@ export const Languages: FC<Props> = ({
           },
         ]}
       >
-        {languages.map((lang, index) => (
+        {languages?.map((lang, index) => (
           <View
             key={index}
             style={[styles.column, combinedStyles.languageCard]}

diff --git a/modules/PDFView/CVTemplates/TemplateComponents/PersonalInfo.tsx b/modules/PDFView/CVTemplates/TemplateComponents/PersonalInfo.tsx
@@ -9,11 +9,17 @@ import { FC } from 'react';
 
 type Props = {
   styles: ReturnType<typeof StyleSheet.create>;
-  generalInfo?: GeneralInfo;
+  generalInfo: GeneralInfo;
   skills?: Skill[];
 };
 
 export const PersonalInfo: FC<Props> = ({ styles, generalInfo, skills }) => {
+  const generalInfoIsEmpty = Object.values(generalInfo).every(value => !value);
+
+  if (generalInfoIsEmpty) {
+    return null;
+  }
+
   return (
     <View
       style={[

diff --git a/modules/PDFView/CVTemplates/TemplateComponents/ProfessionalExperienceDisplay.tsx b/modules/PDFView/CVTemplates/TemplateComponents/ProfessionalExperienceDisplay.tsx
@@ -45,7 +45,7 @@ export const ProfessionalExperienceDisplay: FC<Props> = ({
         {translate('professionalExperience')}
       </TextDisplay>
       <View style={[{ rowGap: 30 }]}>
-        {professionalExperience.map((experience, index) => (
+        {professionalExperience?.map((experience, index) => (
           <View
             key={index}
             wrap={false}

diff --git a/modules/PDFView/CVTemplates/TemplateComponents/Template3/CertificatesWithImage.tsx b/modules/PDFView/CVTemplates/TemplateComponents/Template3/CertificatesWithImage.tsx
@@ -42,6 +42,8 @@ export const CertificatesWithImage: FC<Props> = ({
           zIndex: -1,
           top: 0,
           left: 0,
+          height: '100px',
+          alignItems: 'flex-start',
         }}
       >
         <BlobTopLeft />

diff --git a/modules/PDFView/CVTemplates/TemplateComponents/Template3/EducationWithImage.tsx b/modules/PDFView/CVTemplates/TemplateComponents/Template3/EducationWithImage.tsx
@@ -52,6 +52,8 @@ export const EducationWithImage: FC<Props> = ({
                 zIndex: -1,
                 top: 0,
                 right: 0,
+                height: '100px',
+                alignItems: 'flex-end',
               }}
             >
               <BlobTopRight />
@@ -66,6 +68,8 @@ export const EducationWithImage: FC<Props> = ({
                   position: 'absolute',
                   zIndex: -1,
                   bottom: 0,
+                  height: '100px',
+                  alignItems: 'flex-start',
                 }}
               >
                 <BlobBottomLeft />

diff --git a/modules/PDFView/CVTemplates/Templates/CVTemplateProps.ts b/modules/PDFView/CVTemplates/Templates/CVTemplateProps.ts
@@ -10,7 +10,7 @@ import {
 } from '../../models';
 
 export interface DefaultProps {
-  generalInfo?: GeneralInfo;
+  generalInfo: GeneralInfo;
   professionalExperience?: ProfessionalExperience[];
   certificates?: Certificate[];
   education?: Education[];

diff --git a/modules/PDFView/CVTemplates/Templates/Template1.tsx b/modules/PDFView/CVTemplates/Templates/Template1.tsx
@@ -7,12 +7,7 @@ import {
   TextDisplay,
 } from '@modules/PDFView/CVTemplates/TemplateComponents';
 import { DefaultProps } from '@modules/PDFView/CVTemplates/Templates/CVTemplateProps';
-import {
-  Document,
-  Image,
-  Page,
-  View,
-} from '@rawwee/react-pdf-html';
+import { Document, Image, Page, View } from '@rawwee/react-pdf-html';
 import { displayDate } from '@modules/PDFView/CVTemplates/Templates/Utils';
 import { Skill } from '@modules/PDFView/models';
 import { StyleSheet } from '@react-pdf/renderer';
@@ -221,96 +216,101 @@ export const Template1: FC<Props> = ({
   translate,
   isHtml,
 }) => {
+  const generalInfoIsEmpty = Object.values(generalInfo).every(value => !value);
   return (
     <Document>
       <Page size='A4' style={styles.page}>
-        <View style={styles.personalInfo}>
-          <View style={[styles.topBar, styles.paddingY20, styles.paddingX40]}>
-            {generalInfo && generalInfo.profilePicture && (
-              <View style={[styles.profilePicture]}>
-                <Image
-                  src={generalInfo.profilePicture}
-                  style={{
-                    width: 100,
-                    height: 100,
-                    borderRadius: 50,
-                    objectFit: 'cover',
-                  }}
-                />
-              </View>
-            )}
-            <View
-              style={{
-                flex: 1,
-              }}
-            >
+        {!generalInfoIsEmpty ? (
+          <View style={styles.personalInfo}>
+            <View style={[styles.topBar, styles.paddingY20, styles.paddingX40]}>
+              {generalInfo && generalInfo.profilePicture && (
+                <View style={[styles.profilePicture]}>
+                  <Image
+                    src={generalInfo.profilePicture}
+                    style={{
+                      width: 100,
+                      height: 100,
+                      borderRadius: 50,
+                      objectFit: 'cover',
+                    }}
+                  />
+                </View>
+              )}
               <View
                 style={{
-                  flexDirection: 'row',
+                  flex: 1,
                 }}
               >
-                <TextDisplay style={styles.topBarName}>
-                  {generalInfo?.firstName} {generalInfo?.lastName}
-                </TextDisplay>
-                <TextDisplay
-                  style={[
-                    {
-                      fontWeight: 'light',
-                      fontSize: 11,
-                      paddingLeft: 20,
-                      paddingBottom: 3,
-                      alignSelf: 'flex-end',
-                    },
-                  ]}
+                <View
+                  style={{
+                    flexDirection: 'row',
+                  }}
                 >
-                  {generalInfo?.dob && displayDate(generalInfo?.dob, 'default')}
+                  <TextDisplay style={styles.topBarName}>
+                    {generalInfo?.firstName} {generalInfo?.lastName}
+                  </TextDisplay>
+                  <TextDisplay
+                    style={[
+                      {
+                        fontWeight: 'light',
+                        fontSize: 11,
+                        paddingLeft: 20,
+                        paddingBottom: 3,
+                        alignSelf: 'flex-end',
+                      },
+                    ]}
+                  >
+                    {generalInfo?.dob &&
+                      displayDate(generalInfo?.dob, 'default')}
+                  </TextDisplay>
+                </View>
+                <TextDisplay style={styles.topBarPosition}>
+                  {generalInfo?.position}
+                </TextDisplay>
+                <TextDisplay style={styles.topBarText}>
+                  {generalInfo?.aboutMe}
                 </TextDisplay>
               </View>
-              <TextDisplay style={styles.topBarPosition}>
-                {generalInfo?.position}
-              </TextDisplay>
-              <TextDisplay style={styles.topBarText}>
-                {generalInfo?.aboutMe}
-              </TextDisplay>
             </View>
+            {skills && skills.length > 0 && (
+              <View
+                style={[
+                  styles.row,
+                  styles.paddingX40,
+                  {
+                    flexWrap: 'wrap',
+                  },
+                ]}
+              >
+                {skills.map((skill: Skill, index: number) => {
+                  return (
+                    <View key={index} style={[styles.skill]}>
+                      <TextDisplay style={[styles.skillText]}>
+                        {skill.name}
+                      </TextDisplay>
+                    </View>
+                  );
+                })}
+              </View>
+            )}
+            <AdditionalInformation
+              onlyIcon
+              generalInfo={generalInfo}
+              styles={styles}
+              itemWrapperStyle={{
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+              }}
+              wrapperStyle={{
+                paddingHorizontal: 40,
+              }}
+              backgroundColor='#0C1829'
+            />
           </View>
-          {skills && skills.length > 0 && (
-            <View
-              style={[
-                styles.row,
-                styles.paddingX40,
-                {
-                  flexWrap: 'wrap',
-                },
-              ]}
-            >
-              {skills.map((skill: Skill, index: number) => {
-                return (
-                  <View key={index} style={[styles.skill]}>
-                    <TextDisplay style={[styles.skillText]}>
-                      {skill.name}
-                    </TextDisplay>
-                  </View>
-                );
-              })}
-            </View>
-          )}
-          <AdditionalInformation
-            onlyIcon
-            generalInfo={generalInfo}
-            styles={styles}
-            itemWrapperStyle={{
-              display: 'flex',
-              flexDirection: 'row',
-              alignItems: 'center',
-            }}
-            wrapperStyle={{
-              paddingHorizontal: 40,
-            }}
-            backgroundColor='#0C1829'
-          />
-        </View>
-        {professionalExperience && (
+        ) : null}
+
+        {professionalExperience?.length ? (
           <View style={[styles.paddingX20, styles.column]}>
             <TextDisplay
               style={[
@@ -396,7 +396,8 @@ export const Template1: FC<Props> = ({
               ))}
             </View>
           </View>
-        )}
+        ) : null}
+
         <Projects
           projects={projects}
           translate={translate}