Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-16 17:51:43 +10:00
Code Issues Packages Projects Releases Wiki Activity

design nosepass template, add tests, add template previews

Browse Source
This commit is contained in:
Amruth Pillai
2023-11-17 08:31:12 +01:00
parent 0b4cb71320
commit 34247f13b6
92 changed files with 24440 additions and 35518 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/client/src/pages/builder/_components/toolbar.tsx
View File

@ -5,7 +5,7 @@ import {
CircleNotch,
ClockClockwise,
CubeFocus,
DownloadSimple,
FilePdf,
Hash,
LineSegment,
LinkSimple,
@ -51,7 +51,7 @@ export const BuilderToolbar = () => {
<motion.div
initial={{ opacity: 0.5 }}
whileHover={{ opacity: 1 }}
className="fixed inset-x-0 mx-auto hidden pb-4 pt-6 text-center md:block"
className="fixed inset-x-0 bottom-0 mx-auto pb-4 pt-6 text-center md:block"
>
<div className="inline-flex items-center justify-center rounded-full bg-background px-4 shadow-xl">
<Tooltip content={t`Undo`}>
@ -134,7 +134,7 @@ export const BuilderToolbar = () => {
onClick={onPrint}
disabled={loading}
>
{loading ? <CircleNotch className="animate-spin" /> : <DownloadSimple />}
{loading ? <CircleNotch className="animate-spin" /> : <FilePdf />}
</Button>
</Tooltip>
</div>

19
apps/client/src/pages/builder/sidebars/left/dialogs/languages.tsx
View File

@ -10,7 +10,6 @@ import {
Input,
Slider,
} from "@reactive-resume/ui";
import { getCEFRLevel } from "@reactive-resume/utils";
import { useForm } from "react-hook-form";
import { z } from "zod";
@ -44,11 +43,11 @@ export const LanguagesDialog = () => {
/>
<FormField
name="fluency"
name="description"
control={form.control}
render={({ field }) => (
<FormItem>
<FormLabel>{t`Fluency`}</FormLabel>
<FormLabel>{t`Description`}</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
@ -58,22 +57,26 @@ export const LanguagesDialog = () => {
/>
<FormField
name="fluencyLevel"
name="level"
control={form.control}
render={({ field }) => (
<FormItem className="sm:col-span-2">
<FormLabel>{t`Fluency (CEFR)`}</FormLabel>
<FormLabel>{t`Level`}</FormLabel>
<FormControl className="py-2">
<div className="flex items-center gap-x-4">
<Slider
{...field}
min={1}
max={6}
min={0}
max={5}
value={[field.value]}
onValueChange={(value) => field.onChange(value[0])}
/>
<span className="text-base font-bold">{getCEFRLevel(field.value)}</span>
{field.value === 0 ? (
<span className="text-base font-bold">{t`Hidden`}</span>
) : (
<span className="text-base font-bold">{field.value}</span>
)}
</div>
</FormControl>
<FormMessage />

8
apps/client/src/pages/builder/sidebars/left/dialogs/skills.tsx
View File

@ -71,14 +71,18 @@ export const SkillsDialog = () => {
<div className="flex items-center gap-x-4">
<Slider
{...field}
min={1}
min={0}
max={5}
value={[field.value]}
orientation="horizontal"
onValueChange={(value) => field.onChange(value[0])}
/>
<span className="text-base font-bold">{field.value}</span>
{field.value === 0 ? (
<span className="text-base font-bold">{t`Hidden`}</span>
) : (
<span className="text-base font-bold">{field.value}</span>
)}
</div>
</FormControl>
<FormMessage />

47
apps/client/src/pages/builder/sidebars/left/index.tsx
View File

@ -16,7 +16,6 @@ import {
Volunteer,
} from "@reactive-resume/schema";
import { Button, ScrollArea, Separator } from "@reactive-resume/ui";
import { getCEFRLevel } from "@reactive-resume/utils";
import { Fragment, useRef } from "react";
import { Link } from "react-router-dom";
@ -57,21 +56,21 @@ export const LeftSidebar = () => {
name={t({
message: "Basics",
context:
"The Basics section of a Resume consists of User's Picture, Full Name, Location etc.",
"The basics section of a resume consists of User's Picture, Full Name, Location etc.",
})}
/>
<SectionIcon id="summary" onClick={() => scrollIntoView("#summary")} />
<SectionIcon id="profiles" onClick={() => scrollIntoView("#profiles")} />
<SectionIcon id="experience" onClick={() => scrollIntoView("#experience")} />
<SectionIcon id="education" onClick={() => scrollIntoView("#education")} />
<SectionIcon id="skills" onClick={() => scrollIntoView("#skills")} />
<SectionIcon id="languages" onClick={() => scrollIntoView("#languages")} />
<SectionIcon id="awards" onClick={() => scrollIntoView("#awards")} />
<SectionIcon id="certifications" onClick={() => scrollIntoView("#certifications")} />
<SectionIcon id="interests" onClick={() => scrollIntoView("#interests")} />
<SectionIcon id="languages" onClick={() => scrollIntoView("#languages")} />
<SectionIcon id="volunteer" onClick={() => scrollIntoView("#volunteer")} />
<SectionIcon id="projects" onClick={() => scrollIntoView("#projects")} />
<SectionIcon id="publications" onClick={() => scrollIntoView("#publications")} />
<SectionIcon id="skills" onClick={() => scrollIntoView("#skills")} />
<SectionIcon id="volunteer" onClick={() => scrollIntoView("#volunteer")} />
<SectionIcon id="references" onClick={() => scrollIntoView("#references")} />
<SectionIcon
@ -118,6 +117,21 @@ export const LeftSidebar = () => {
description={(item) => item.area}
/>
<Separator />
<SectionBase<Skill>
id="skills"
title={(item) => item.name}
description={(item) => {
if (item.description) return item.description;
if (item.keywords.length > 0) return `${item.keywords.length} keywords`;
}}
/>
<Separator />
<SectionBase<Language>
id="languages"
title={(item) => item.name}
description={(item) => item.description}
/>
<Separator />
<SectionBase<Award>
id="awards"
title={(item) => item.title}
@ -138,18 +152,6 @@ export const LeftSidebar = () => {
}}
/>
<Separator />
<SectionBase<Language>
id="languages"
title={(item) => item.name}
description={(item) => item.fluency || getCEFRLevel(item.fluencyLevel)}
/>
<Separator />
<SectionBase<Volunteer>
id="volunteer"
title={(item) => item.organization}
description={(item) => item.position}
/>
<Separator />
<SectionBase<Project>
id="projects"
title={(item) => item.name}
@ -162,13 +164,10 @@ export const LeftSidebar = () => {
description={(item) => item.publisher}
/>
<Separator />
<SectionBase<Skill>
id="skills"
title={(item) => item.name}
description={(item) => {
if (item.description) return item.description;
if (item.keywords.length > 0) return `${item.keywords.length} keywords`;
}}
<SectionBase<Volunteer>
id="volunteer"
title={(item) => item.organization}
description={(item) => item.position}
/>
<Separator />
<SectionBase<Reference>

80
apps/client/src/pages/builder/sidebars/left/sections/picture/section.tsx
View File

@ -1,8 +1,7 @@
import { t } from "@lingui/macro";
import { Aperture, UploadSimple } from "@phosphor-icons/react";
import { Aperture, Trash, UploadSimple } from "@phosphor-icons/react";
import {
Avatar,
AvatarFallback,
AvatarImage,
buttonVariants,
Input,
@ -11,8 +10,8 @@ import {
PopoverContent,
PopoverTrigger,
} from "@reactive-resume/ui";
import { cn, getInitials } from "@reactive-resume/utils";
import { AnimatePresence, motion } from "framer-motion";
import { cn } from "@reactive-resume/utils";
import { motion } from "framer-motion";
import { useMemo, useRef } from "react";
import { z } from "zod";
@ -23,10 +22,9 @@ import { PictureOptions } from "./options";
export const PictureSection = () => {
const inputRef = useRef<HTMLInputElement>(null);
const { uploadImage, loading } = useUploadImage();
const { uploadImage } = useUploadImage();
const setValue = useResumeStore((state) => state.setValue);
const name = useResumeStore((state) => state.resume.data.basics.name);
const picture = useResumeStore((state) => state.resume.data.basics.picture);
const isValidUrl = useMemo(() => z.string().url().safeParse(picture.url).success, [picture.url]);
@ -41,16 +39,37 @@ export const PictureSection = () => {
}
};
const onAvatarClick = () => {
if (isValidUrl) {
setValue("basics.picture.url", "");
} else {
inputRef.current?.click();
}
};
return (
<div className="flex items-center gap-x-4">
<Avatar className="h-14 w-14">
{isValidUrl && <AvatarImage src={picture.url} />}
<AvatarFallback className="text-lg font-bold">{getInitials(name)}</AvatarFallback>
</Avatar>
<div className="group relative cursor-pointer" onClick={onAvatarClick}>
<Avatar className="h-14 w-14 bg-secondary">
<AvatarImage src={picture.url} />
</Avatar>
{isValidUrl ? (
<div className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-full bg-background/30 opacity-0 transition-opacity group-hover:opacity-100">
<Trash size={16} weight="bold" />
</div>
) : (
<div className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-full bg-background/30 opacity-0 transition-opacity group-hover:opacity-100">
<UploadSimple size={16} weight="bold" />
</div>
)}
</div>
<div className="flex w-full flex-col gap-y-1.5">
<Label htmlFor="basics.picture.url">{t`Picture`}</Label>
<div className="flex items-center gap-x-2">
<input hidden type="file" ref={inputRef} onChange={onSelectImage} />
<Input
id="basics.picture.url"
placeholder="https://..."
@ -58,44 +77,23 @@ export const PictureSection = () => {
onChange={(event) => setValue("basics.picture.url", event.target.value)}
/>
<AnimatePresence>
{/* Show options button if picture exists */}
{isValidUrl && (
<Popover>
<PopoverTrigger asChild>
<motion.button
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className={cn(buttonVariants({ size: "icon", variant: "ghost" }))}
>
<Aperture />
</motion.button>
</PopoverTrigger>
<PopoverContent className="w-[360px]">
<PictureOptions />
</PopoverContent>
</Popover>
)}
{/* Show upload button if picture doesn't exist, else show remove button to delete picture */}
{!isValidUrl && (
<>
<input hidden type="file" ref={inputRef} onChange={onSelectImage} />
{isValidUrl && (
<Popover>
<PopoverTrigger asChild>
<motion.button
disabled={loading}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
onClick={() => inputRef.current?.click()}
className={cn(buttonVariants({ size: "icon", variant: "ghost" }))}
>
<UploadSimple />
<Aperture />
</motion.button>
</>
)}
</AnimatePresence>
</PopoverTrigger>
<PopoverContent className="w-[360px]">
<PictureOptions />
</PopoverContent>
</Popover>
)}
</div>
</div>
</div>

48
apps/client/src/pages/builder/sidebars/right/sections/template.tsx
View File

@ -1,6 +1,7 @@
import { t } from "@lingui/macro";
import { Button, HoverCard, HoverCardContent, HoverCardTrigger } from "@reactive-resume/ui";
import { AspectRatio } from "@reactive-resume/ui";
import { cn, templatesList } from "@reactive-resume/utils";
import { motion } from "framer-motion";
import { useResumeStore } from "@/client/stores/resume";
@ -19,31 +20,28 @@ export const TemplateSection = () => {
</div>
</header>
<main className="grid grid-cols-2 gap-4">
{templatesList.map(({ id, name }) => (
<HoverCard key={id} openDelay={0} closeDelay={0}>
<HoverCardTrigger asChild>
<Button
variant="outline"
onClick={() => setValue("metadata.template", id)}
className={cn(
"flex h-12 items-center justify-center overflow-hidden rounded border text-center text-sm capitalize ring-primary transition-colors hover:bg-secondary-accent focus:outline-none focus:ring-1 disabled:opacity-100",
id === currentTemplate && "ring-1",
)}
>
{name}
</Button>
</HoverCardTrigger>
<main className="grid grid-cols-2 gap-5 @lg/right:grid-cols-3 @2xl/right:grid-cols-4">
{templatesList.map((template, index) => (
<AspectRatio ratio={1 / 1.4142}>
<motion.div
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0, transition: { delay: index * 0.1 } }}
whileTap={{ scale: 0.98, transition: { duration: 0.1 } }}
onClick={() => setValue("metadata.template", template)}
className={cn(
"relative cursor-pointer rounded-sm ring-primary transition-all hover:ring-2",
currentTemplate === template && "ring-2",
)}
>
<img src={`/templates/jpg/${template}.jpg`} alt={template} className="rounded-sm" />
<HoverCardContent className="max-w-xs overflow-hidden border-none bg-white p-0">
<img
alt={name}
loading="lazy"
src="/templates/sample.jpg"
className="aspect-[1/1.4142]"
/>
</HoverCardContent>
</HoverCard>
<div className="absolute inset-x-0 bottom-0 h-32 w-full bg-gradient-to-b from-transparent to-background/80">
<p className="absolute inset-x-0 bottom-2 text-center font-bold capitalize text-primary">
{template}
</p>
</div>
</motion.div>
</AspectRatio>
))}
</main>
</section>

4
apps/client/src/pages/builder/sidebars/right/sections/typography.tsx
View File

@ -137,7 +137,7 @@ export const TypographySection = () => {
<Slider
min={12}
max={18}
step={1}
step={0.05}
value={[typography.font.size]}
onValueChange={(value) => {
setValue("metadata.typography.font.size", value[0]);
@ -154,7 +154,7 @@ export const TypographySection = () => {
<Slider
min={0}
max={3}
step={0.25}
step={0.05}
value={[typography.lineHeight]}
onValueChange={(value) => {
setValue("metadata.typography.lineHeight", value[0]);