🚀 release v3.0.0

client/components/build/LeftSidebar/sections/Basics.tsx

@@ -0,0 +1,81 @@
+import { PhotoFilter } from '@mui/icons-material';
+import { Button, Divider, Popover } from '@mui/material';
+import { useTranslation } from 'next-i18next';
+import { useState } from 'react';
+
+import Heading from '@/components/shared/Heading';
+import ResumeInput from '@/components/shared/ResumeInput';
+
+import PhotoFilters from './PhotoFilters';
+import PhotoUpload from './PhotoUpload';
+
+const Basics = () => {
+  const { t } = useTranslation();
+
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <Heading path="sections.basics" name={t('builder.leftSidebar.sections.basics.heading')} />
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <div className="flex flex-col items-center gap-4 sm:col-span-2 sm:flex-row">
+          <PhotoUpload />
+
+          <div className="flex w-full flex-col-reverse gap-4 sm:flex-col sm:gap-2">
+            <ResumeInput label={t('builder.leftSidebar.sections.basics.name.label')} path="basics.name" />
+
+            <Button variant="outlined" startIcon={<PhotoFilter />} onClick={handleClick}>
+              {t('builder.leftSidebar.sections.basics.actions.photo-filters')}
+            </Button>
+
+            <Popover
+              open={Boolean(anchorEl)}
+              anchorEl={anchorEl}
+              onClose={handleClose}
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'center',
+              }}
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'center',
+              }}
+            >
+              <PhotoFilters />
+            </Popover>
+          </div>
+        </div>
+
+        <ResumeInput label={t('builder.common.form.email.label')} path="basics.email" className="sm:col-span-2" />
+        <ResumeInput label={t('builder.common.form.phone.label')} path="basics.phone" />
+        <ResumeInput label={t('builder.common.form.url.label')} path="basics.website" />
+
+        <Divider className="sm:col-span-2" />
+
+        <ResumeInput
+          label={t('builder.leftSidebar.sections.basics.headline.label')}
+          path="basics.headline"
+          className="sm:col-span-2"
+        />
+        <ResumeInput
+          type="textarea"
+          label={t('builder.common.form.summary.label')}
+          path="basics.summary"
+          className="sm:col-span-2"
+          markdownSupported
+        />
+      </div>
+    </>
+  );
+};
+
+export default Basics;

client/components/build/LeftSidebar/sections/Location.tsx

@@ -0,0 +1,31 @@
+import { useTranslation } from 'next-i18next';
+
+import Heading from '@/components/shared/Heading';
+import ResumeInput from '@/components/shared/ResumeInput';
+
+const Location = () => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Heading path="sections.location" name={t('builder.leftSidebar.sections.location.heading')} />
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <ResumeInput
+          label={t('builder.leftSidebar.sections.location.address.label')}
+          path="basics.location.address"
+          className="sm:col-span-2"
+        />
+        <ResumeInput label={t('builder.leftSidebar.sections.location.city.label')} path="basics.location.city" />
+        <ResumeInput label={t('builder.leftSidebar.sections.location.region.label')} path="basics.location.region" />
+        <ResumeInput label={t('builder.leftSidebar.sections.location.country.label')} path="basics.location.country" />
+        <ResumeInput
+          label={t('builder.leftSidebar.sections.location.postal-code.label')}
+          path="basics.location.postalCode"
+        />
+      </div>
+    </>
+  );
+};
+
+export default Location;

client/components/build/LeftSidebar/sections/PhotoFilters.tsx

@@ -0,0 +1,97 @@
+import { Circle, Square, SquareRounded } from '@mui/icons-material';
+import { Checkbox, Divider, FormControlLabel, Slider, ToggleButton, ToggleButtonGroup } from '@mui/material';
+import { Photo, PhotoShape } from '@reactive-resume/schema';
+import get from 'lodash/get';
+import { useTranslation } from 'next-i18next';
+
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setResumeState } from '@/store/resume/resumeSlice';
+
+const PhotoFilters = () => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const photo: Photo = useAppSelector((state) => get(state.resume, 'basics.photo'));
+  const size: number = get(photo, 'filters.size', 128);
+  const shape: PhotoShape = get(photo, 'filters.shape', 'square');
+  const grayscale: boolean = get(photo, 'filters.grayscale', false);
+  const border: boolean = get(photo, 'filters.border', false);
+
+  const handleChangeSize = (size: number | number[]) =>
+    dispatch(setResumeState({ path: 'basics.photo.filters.size', value: size }));
+
+  const handleChangeShape = (shape: PhotoShape) =>
+    dispatch(setResumeState({ path: 'basics.photo.filters.shape', value: shape }));
+
+  const handleSetGrayscale = (value: boolean) =>
+    dispatch(setResumeState({ path: 'basics.photo.filters.grayscale', value }));
+
+  const handleSetBorder = (value: boolean) => dispatch(setResumeState({ path: 'basics.photo.filters.border', value }));
+
+  return (
+    <div className="flex flex-col gap-2 p-5 dark:bg-neutral-800">
+      <div>
+        <h4 className="font-medium">{t('builder.leftSidebar.sections.basics.photo-filters.size.heading')}</h4>
+
+        <div className="mx-2">
+          <Slider
+            min={32}
+            max={512}
+            step={2}
+            marks={[
+              { value: 32, label: '32' },
+              { value: 128, label: '128' },
+              { value: 256, label: '256' },
+              { value: 512, label: '512' },
+            ]}
+            value={size}
+            onChange={(_, value: number | number[]) => handleChangeSize(value)}
+          />
+        </div>
+      </div>
+
+      <Divider />
+
+      <div>
+        <h4 className="font-medium">{t('builder.leftSidebar.sections.basics.photo-filters.effects.heading')}</h4>
+
+        <div className="flex items-center">
+          <FormControlLabel
+            label={t<string>('builder.leftSidebar.sections.basics.photo-filters.effects.grayscale.label')}
+            control={
+              <Checkbox color="secondary" checked={grayscale} onChange={(_, value) => handleSetGrayscale(value)} />
+            }
+          />
+
+          <FormControlLabel
+            label={t<string>('builder.leftSidebar.sections.basics.photo-filters.effects.border.label')}
+            control={<Checkbox color="secondary" checked={border} onChange={(_, value) => handleSetBorder(value)} />}
+          />
+        </div>
+      </div>
+
+      <Divider />
+
+      <div className="flex flex-col gap-2">
+        <h4 className="font-medium">{t('builder.leftSidebar.sections.basics.photo-filters.shape.heading')}</h4>
+
+        <ToggleButtonGroup exclusive value={shape} onChange={(_, value) => handleChangeShape(value)}>
+          <ToggleButton size="small" value="square" className="w-14">
+            <Square fontSize="small" />
+          </ToggleButton>
+
+          <ToggleButton size="small" value="rounded-square" className="w-14">
+            <SquareRounded fontSize="small" />
+          </ToggleButton>
+
+          <ToggleButton size="small" value="circle" className="w-14">
+            <Circle fontSize="small" />
+          </ToggleButton>
+        </ToggleButtonGroup>
+      </div>
+    </div>
+  );
+};
+
+export default PhotoFilters;

client/components/build/LeftSidebar/sections/PhotoUpload.tsx

@@ -0,0 +1,83 @@
+import { Avatar, IconButton, Skeleton, Tooltip } from '@mui/material';
+import { Photo, Resume } from '@reactive-resume/schema';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import { useTranslation } from 'next-i18next';
+import React, { useRef } from 'react';
+import toast from 'react-hot-toast';
+import { useMutation } from 'react-query';
+
+import { ServerError } from '@/services/axios';
+import { deletePhoto, DeletePhotoParams, uploadPhoto, UploadPhotoParams } from '@/services/resume';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setResumeState } from '@/store/resume/resumeSlice';
+
+const FILE_UPLOAD_MAX_SIZE = 2000000; // 2 MB
+
+const PhotoUpload: React.FC = () => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const id: number = useAppSelector((state) => get(state.resume, 'id'));
+  const photo: Photo = useAppSelector((state) => get(state.resume, 'basics.photo'));
+
+  const { mutateAsync: uploadMutation, isLoading } = useMutation<Resume, ServerError, UploadPhotoParams>(uploadPhoto);
+
+  const { mutateAsync: deleteMutation } = useMutation<Resume, ServerError, DeletePhotoParams>(deletePhoto);
+
+  const handleClick = async () => {
+    if (fileInputRef.current) {
+      if (!isEmpty(photo.url)) {
+        try {
+          await deleteMutation({ id });
+        } finally {
+          dispatch(setResumeState({ path: 'basics.photo.url', value: '' }));
+        }
+      } else {
+        fileInputRef.current.click();
+      }
+
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files && event.target.files[0]) {
+      const file = event.target.files[0];
+
+      if (file.size > FILE_UPLOAD_MAX_SIZE) {
+        toast.error(t('common.toast.error.upload-photo-size'));
+        return;
+      }
+
+      const resume = await uploadMutation({ id, file });
+
+      dispatch(setResumeState({ path: 'basics.photo.url', value: get(resume, 'basics.photo.url', '') }));
+    }
+  };
+
+  return (
+    <IconButton onClick={handleClick}>
+      {isLoading ? (
+        <Skeleton variant="circular" width={96} height={96} />
+      ) : (
+        <Tooltip
+          title={
+            isEmpty(photo.url)
+              ? t<string>('builder.leftSidebar.sections.basics.photo-upload.tooltip.upload')
+              : t<string>('builder.leftSidebar.sections.basics.photo-upload.tooltip.remove')
+          }
+        >
+          <Avatar sx={{ width: 96, height: 96 }} src={photo.url} />
+        </Tooltip>
+      )}
+
+      <input hidden type="file" ref={fileInputRef} onChange={handleChange} accept="image/*" />
+    </IconButton>
+  );
+};
+
+export default PhotoUpload;

client/components/build/LeftSidebar/sections/Profiles.tsx

@@ -0,0 +1,52 @@
+import { Add } from '@mui/icons-material';
+import { Button } from '@mui/material';
+import { ListItem } from '@reactive-resume/schema';
+import { useTranslation } from 'next-i18next';
+
+import Heading from '@/components/shared/Heading';
+import List from '@/components/shared/List';
+import { useAppDispatch } from '@/store/hooks';
+import { setModalState } from '@/store/modal/modalSlice';
+import { duplicateItem } from '@/store/resume/resumeSlice';
+
+const Profiles = () => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const handleAdd = () => {
+    dispatch(setModalState({ modal: 'builder.sections.profile', state: { open: true } }));
+  };
+
+  const handleEdit = (item: ListItem) => {
+    dispatch(setModalState({ modal: 'builder.sections.profile', state: { open: true, payload: { item } } }));
+  };
+
+  const handleDuplicate = (item: ListItem) => {
+    dispatch(duplicateItem({ path: 'basics.profiles', value: item }));
+  };
+
+  return (
+    <>
+      <Heading path="sections.profiles" name={t('builder.leftSidebar.sections.profiles.heading')} />
+
+      <List
+        path="basics.profiles"
+        titleKey="username"
+        subtitleKey="network"
+        onEdit={handleEdit}
+        onDuplicate={handleDuplicate}
+      />
+
+      <footer className="flex justify-end">
+        <Button variant="outlined" startIcon={<Add />} onClick={handleAdd}>
+          {t('builder.common.actions.add', {
+            section: t('builder.leftSidebar.sections.profiles.heading', { count: 1 }),
+          })}
+        </Button>
+      </footer>
+    </>
+  );
+};
+
+export default Profiles;

client/components/build/LeftSidebar/sections/Section.tsx

@@ -0,0 +1,84 @@
+import { Add } from '@mui/icons-material';
+import { Button } from '@mui/material';
+import { ListItem } from '@reactive-resume/schema';
+import clsx from 'clsx';
+import get from 'lodash/get';
+import { useTranslation } from 'next-i18next';
+import { validate } from 'uuid';
+
+import Heading from '@/components/shared/Heading';
+import List from '@/components/shared/List';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { ModalName, setModalState } from '@/store/modal/modalSlice';
+import { duplicateItem } from '@/store/resume/resumeSlice';
+
+import SectionSettings from './SectionSettings';
+
+type Props = {
+  path: `sections.${string}`;
+  name?: string;
+  titleKey?: string;
+  subtitleKey?: string;
+  isEditable?: boolean;
+  isHideable?: boolean;
+  isDeletable?: boolean;
+};
+
+const Section: React.FC<Props> = ({
+  path,
+  name = 'Section Name',
+  titleKey = 'title',
+  subtitleKey = 'subtitle',
+  isEditable = false,
+  isHideable = false,
+  isDeletable = false,
+}) => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const heading = useAppSelector<string>((state) => get(state.resume, `${path}.name`, name));
+  const visibility = useAppSelector<boolean>((state) => get(state.resume, `${path}.visible`, true));
+
+  const handleAdd = () => {
+    const id = path.split('.').at(-1) as string;
+    const modal: ModalName = validate(id) ? 'builder.sections.custom' : `builder.${path}`;
+
+    dispatch(setModalState({ modal, state: { open: true, payload: { path } } }));
+  };
+
+  const handleEdit = (item: ListItem) => {
+    const id = path.split('.').at(-1) as string;
+    const modal: ModalName = validate(id) ? 'builder.sections.custom' : `builder.${path}`;
+    const payload = validate(id) ? { path, item } : { item };
+
+    dispatch(setModalState({ modal, state: { open: true, payload } }));
+  };
+
+  const handleDuplicate = (item: ListItem) => dispatch(duplicateItem({ path: `${path}.items`, value: item }));
+
+  return (
+    <>
+      <Heading path={path} name={name} isEditable={isEditable} isHideable={isHideable} isDeletable={isDeletable} />
+
+      <List
+        path={`${path}.items`}
+        titleKey={titleKey}
+        subtitleKey={subtitleKey}
+        onEdit={handleEdit}
+        onDuplicate={handleDuplicate}
+        className={clsx({ 'opacity-50': !visibility })}
+      />
+
+      <footer className="flex items-center justify-between">
+        <SectionSettings path={path} />
+
+        <Button variant="outlined" startIcon={<Add />} onClick={handleAdd}>
+          {t('builder.common.actions.add', { token: heading })}
+        </Button>
+      </footer>
+    </>
+  );
+};
+
+export default Section;

client/components/build/LeftSidebar/sections/SectionSettings.tsx

@@ -0,0 +1,66 @@
+import { ViewWeek } from '@mui/icons-material';
+import { ButtonBase, Popover, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
+import get from 'lodash/get';
+import { useTranslation } from 'next-i18next';
+import { useState } from 'react';
+
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setResumeState } from '@/store/resume/resumeSlice';
+
+type Props = {
+  path: string;
+};
+
+const SectionSettings: React.FC<Props> = ({ path }) => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const columns = useAppSelector<number>((state) => get(state.resume, `${path}.columns`, 2));
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleSetColumns = (index: number) => dispatch(setResumeState({ path: `${path}.columns`, value: index }));
+
+  return (
+    <div>
+      <Tooltip title={t<string>('builder.common.columns.tooltip')}>
+        <ButtonBase onClick={handleClick} sx={{ padding: 1, borderRadius: 1 }} className="opacity-50 hover:opacity-75">
+          <ViewWeek /> <span className="ml-1.5 text-xs">{columns}</span>
+        </ButtonBase>
+      </Tooltip>
+
+      <Popover
+        open={Boolean(anchorEl)}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+      >
+        <div className="p-5 dark:bg-neutral-800">
+          <h4 className="mb-2 font-medium">{t('builder.common.columns.heading')}</h4>
+
+          <ToggleButtonGroup exclusive value={columns} onChange={(_, value: number) => handleSetColumns(value)}>
+            {[1, 2, 3, 4].map((index) => (
+              <ToggleButton key={index} value={index} size="small" className="w-12">
+                {index}
+              </ToggleButton>
+            ))}
+          </ToggleButtonGroup>
+        </div>
+      </Popover>
+    </div>
+  );
+};
+
+export default SectionSettings;