diff --git a/.dockerignore b/.dockerignore deleted file mode 100644 index 39261c41..00000000 --- a/.dockerignore +++ /dev/null @@ -1,27 +0,0 @@ -# Android App -/app - -# Build Artifacts -/schema/dist -/server/dist -/client/.next - -# IDEs -.vscode - -# Project Metadata -.crowdin.yml - -# Documentation -README.md -SECURITY.md -CHANGELOG.md -CODE_OF_CONDUCT.md - -# Project Dependencies -**/node_modules - -# Docker -Dockerfile -.dockerignore -docker-compose.yml diff --git a/.editorconfig b/.editorconfig deleted file mode 100644 index 7278fb63..00000000 --- a/.editorconfig +++ /dev/null @@ -1,8 +0,0 @@ -root = true - -[*] -charset = utf-8 -indent_size = 2 -indent_style = space -insert_final_newline = true -trim_trailing_whitespace = true diff --git a/.env.example b/.env.example deleted file mode 100644 index 1692f9f6..00000000 --- a/.env.example +++ /dev/null @@ -1,36 +0,0 @@ -# Server + Client -TZ=UTC -PUBLIC_URL=http://localhost:3000 -PUBLIC_SERVER_URL=http://localhost:3100 -PUBLIC_GOOGLE_CLIENT_ID= - -# Server + Database -POSTGRES_DB=postgres -POSTGRES_USER=postgres -POSTGRES_PASSWORD=postgres - -# Server -SECRET_KEY= -POSTGRES_HOST=localhost -POSTGRES_PORT=5432 -POSTGRES_SSL_CERT= -JWT_SECRET= -JWT_EXPIRY_TIME=604800 -GOOGLE_CLIENT_SECRET= -GOOGLE_API_KEY= -MAIL_FROM_NAME= -MAIL_FROM_EMAIL= -MAIL_HOST= -MAIL_PORT= -MAIL_USERNAME= -MAIL_PASSWORD= -STORAGE_BUCKET= -STORAGE_REGION= -STORAGE_ENDPOINT= -STORAGE_URL_PREFIX= -STORAGE_ACCESS_KEY= -STORAGE_SECRET_KEY= -PDF_DELETION_TIME=345600000 - -# Client -PUBLIC_FLAG_DISABLE_SIGNUPS=false diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index 1bab8c6f..00000000 --- a/.eslintrc.json +++ /dev/null @@ -1,41 +0,0 @@ -{ - "parser": "@typescript-eslint/parser", - "extends": ["plugin:@typescript-eslint/recommended"], - "plugins": ["@typescript-eslint/eslint-plugin", "unused-imports", "simple-import-sort"], - "rules": { - // ESLint - "no-unused-vars": "off", - - // Unused Imports - "unused-imports/no-unused-imports": "error", - "unused-imports/no-unused-vars": [ - "warn", - { - "vars": "all", - "args": "none", - "varsIgnorePattern": "^_", - "argsIgnorePattern": "^_" - } - ], - - // Simple Import Sort - "simple-import-sort/imports": "error", - "simple-import-sort/exports": "error", - - // TypeScript ESLint - "@typescript-eslint/no-unused-vars": "off", - "@typescript-eslint/no-explicit-any": "off", - "@typescript-eslint/no-non-null-assertion": "off", - "@typescript-eslint/interface-name-prefix": "off", - "@typescript-eslint/explicit-function-return-type": "off", - "@typescript-eslint/explicit-module-boundary-types": "off" - }, - "overrides": [ - { - "files": ["*.js"], - "rules": { - "@typescript-eslint/no-var-requires": "off" - } - } - ] -} diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml deleted file mode 100644 index 1f81cc42..00000000 --- a/.github/FUNDING.yml +++ /dev/null @@ -1,2 +0,0 @@ -github: AmruthPillai -custom: https://paypal.me/amruthde diff --git a/.github/ISSUE_TEMPLATE/bug-report.yaml b/.github/ISSUE_TEMPLATE/bug-report.yaml deleted file mode 100644 index 11cdfb09..00000000 --- a/.github/ISSUE_TEMPLATE/bug-report.yaml +++ /dev/null @@ -1,75 +0,0 @@ -name: 🐞 Bug Report -description: Create a bug report to help improve Reactive Resume. - -title: '[Bug] ' -labels: [Bug, Needs Triage] -assignees: 'AmruthPillai' - -body: - - type: checkboxes - attributes: - label: Is there an existing issue for this? - description: Please search to see if an issue already exists for the bug you encountered. - options: - - label: Yes, I have searched the existing issues - required: true - - - type: dropdown - id: variant - attributes: - label: Product Variant - description: What variant of Reactive Resume are you using? - options: - - Cloud (http://rxresu.me) - - Self-Hosted - validations: - required: true - - - type: textarea - attributes: - label: Current Behavior - description: A concise description of what you're experiencing. - validations: - required: true - - - type: textarea - attributes: - label: Expected Behavior - description: A concise description of what you expected to happen. - validations: - required: false - - - type: textarea - attributes: - label: Steps To Reproduce - description: Detailed steps to reproduce the behavior, so that it can be easily diagnosed. - placeholder: | - 1. Go to '...' - 2. Click on '....' - 3. Scroll down to '....' - 4. See error - validations: - required: false - - - type: dropdown - id: browsers - attributes: - label: What browsers are you seeing the problem on? - multiple: true - options: - - Firefox - - Chrome - - Safari - - Microsoft Edge - validations: - required: false - - - type: textarea - attributes: - label: Anything else? - description: | - Links? References? Anything that will give us more context about the issue you are encountering! - - Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in. - validations: - required: false diff --git a/.github/ISSUE_TEMPLATE/feature-request.yaml b/.github/ISSUE_TEMPLATE/feature-request.yaml deleted file mode 100644 index d91dd226..00000000 --- a/.github/ISSUE_TEMPLATE/feature-request.yaml +++ /dev/null @@ -1,22 +0,0 @@ -name: ✨ Feature Request -description: Suggest an feature or idea that you would like to see in Reactive Resume. - -title: '[Feature] <title>' -labels: [Feature, Needs Triage] -assignees: 'AmruthPillai' - -body: - - type: checkboxes - attributes: - label: Is there an existing issue for this? - description: Please search to see if an issue already exists for the feature you requested. - options: - - label: Yes, I have searched the existing issues and it doesn't exist - required: true - - - type: textarea - attributes: - label: Feature Description - description: A concise description of what feature you would like to see in Reactive Resume. - validations: - required: true diff --git a/.github/dependabot.yml b/.github/dependabot.yml deleted file mode 100644 index 8448be6b..00000000 --- a/.github/dependabot.yml +++ /dev/null @@ -1,22 +0,0 @@ -version: 2 - -updates: - - package-ecosystem: 'docker' - directory: '/server' - schedule: - interval: 'weekly' - - - package-ecosystem: 'docker' - directory: '/client' - schedule: - interval: 'weekly' - - - package-ecosystem: 'gradle' - directory: '/app' - schedule: - interval: 'weekly' - - - package-ecosystem: 'github-actions' - directory: '/' - schedule: - interval: 'weekly' diff --git a/.github/workflows/build-deploy.yml b/.github/workflows/build-deploy.yml deleted file mode 100644 index a2f857c1..00000000 --- a/.github/workflows/build-deploy.yml +++ /dev/null @@ -1,142 +0,0 @@ -name: Build and Deploy - -on: - workflow_dispatch: - release: - types: [published] - -jobs: - build-amd64: - name: Build (amd64) - runs-on: ubuntu-latest - - strategy: - fail-fast: false - matrix: - image: - - client - - server - - steps: - - name: Checkout the repository - uses: actions/checkout@v3.6.0 - - - name: Retrieve version from package.json - id: version - uses: martinbeentjes/npm-get-version-action@v1.3.1 - - - name: Docker Metadaata - id: meta - uses: docker/metadata-action@v4.6.0 - with: - images: amruthpillai/reactive-resume - tags: | - type=raw,value=${{ matrix.image }}-latest - type=raw,value=${{ matrix.image }}-${{ steps.version.outputs.current-version }} - - - name: Set up QEMU - uses: docker/setup-qemu-action@v2.2.0 - - - name: Set up Docker Buildx - uses: docker/setup-buildx-action@v2.9.1 - - - name: Login to Docker Hub - uses: docker/login-action@v2.2.0 - with: - username: ${{ secrets.DOCKER_USERNAME }} - password: ${{ secrets.DOCKER_PASSWORD }} - - - name: Login to GitHub Container Registry - uses: docker/login-action@v2.2.0 - with: - registry: ghcr.io - username: $GITHUB_REPOSITORY_OWNER - password: ${{ secrets.GH_TOKEN }} - - - name: Build and Push - id: build - uses: docker/build-push-action@v4.1.1 - with: - context: . - push: true - platforms: linux/amd64 - file: ${{ matrix.image }}/Dockerfile - labels: ${{ steps.meta.outputs.labels }} - tags: ${{ steps.meta.outputs.tags }} - build-args: | - TURBO_TOKEN=${{ secrets.TURBO_TOKEN }} - - build-arm64: - name: Build (arm64) - runs-on: ubuntu-latest - - strategy: - fail-fast: false - matrix: - image: - - client - - server - - steps: - - name: Checkout the repository - uses: actions/checkout@v3.6.0 - - - name: Retrieve version from package.json - id: version - uses: martinbeentjes/npm-get-version-action@v1.3.1 - - - name: Docker Metadaata - id: meta - uses: docker/metadata-action@v4.6.0 - with: - images: amruthpillai/reactive-resume - tags: | - type=raw,value=${{ matrix.image }}-arm64-latest - type=raw,value=${{ matrix.image }}-arm64-${{ steps.version.outputs.current-version }} - - - name: Set up QEMU - uses: docker/setup-qemu-action@v2.2.0 - - - name: Set up Docker Buildx - uses: docker/setup-buildx-action@v2.9.1 - - - name: Login to Docker Hub - uses: docker/login-action@v2.2.0 - with: - username: ${{ secrets.DOCKER_USERNAME }} - password: ${{ secrets.DOCKER_PASSWORD }} - - - name: Login to GitHub Container Registry - uses: docker/login-action@v2.2.0 - with: - registry: ghcr.io - username: $GITHUB_REPOSITORY_OWNER - password: ${{ secrets.GH_TOKEN }} - - - name: Build and Push - id: build - uses: docker/build-push-action@v4.1.1 - with: - context: . - push: true - platforms: linux/arm64 - file: ${{ matrix.image }}/Dockerfile - labels: ${{ steps.meta.outputs.labels }} - tags: ${{ steps.meta.outputs.tags }} - build-args: | - TURBO_TOKEN=${{ secrets.TURBO_TOKEN }} - - deploy: - name: Deploy - runs-on: ubuntu-latest - - needs: build-amd64 - - steps: - - name: Install DigitalOcean CLI - uses: digitalocean/action-doctl@v2.4.0 - with: - token: ${{ secrets.DIGITALOCEAN_TOKEN }} - - - name: Create Deployment with Latest Version - run: doctl apps create-deployment ${{ secrets.DIGITALOCEAN_APP_ID }} --wait --force-rebuild diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 4e5621cf..00000000 --- a/.gitignore +++ /dev/null @@ -1,18 +0,0 @@ -# Environment Variables -.env -.env.* -*.env -!.env.gitpod -!.env.example - -# Project Dependencies -node_modules - -# macOS -.DS_Store - -# Intellij -.idea - -# Turborepo -.turbo \ No newline at end of file diff --git a/.gitpod.yml b/.gitpod.yml deleted file mode 100644 index 7806449a..00000000 --- a/.gitpod.yml +++ /dev/null @@ -1,41 +0,0 @@ -tasks: - - name: Run PostgreSQL Database - command: docker run --name postgres -p 5432:5432 -e POSTGRES_PASSWORD=postgres -d postgres - - - name: Install Project Dependencies - command: | - pnpm install - pnpm dlx playwright install --with-deps chromium - gp sync-done deps - - - name: Generate Environment Variables - init: gp sync-await deps - command: | - if [ -f .env ]; then - echo "Found .env in workspace, skipping generation" - else - pnpm generate-env - fi - gp sync-done env - - - name: Build and Run Project - init: gp sync-await env - command: | - pnpm build - pnpm start - -ports: - # PostgreSQL - - port: 5432 - onOpen: ignore - visibility: private - - # Server - - port: 3100 - onOpen: ignore - visibility: public - - # Client - - port: 3000 - onOpen: open-browser - visibility: public diff --git a/.npmrc b/.npmrc deleted file mode 100644 index 8051a481..00000000 --- a/.npmrc +++ /dev/null @@ -1,2 +0,0 @@ -auto-install-peers=true -strict-peer-dependencies=false \ No newline at end of file diff --git a/.nvmrc b/.nvmrc deleted file mode 100644 index 1a2f5bd2..00000000 --- a/.nvmrc +++ /dev/null @@ -1 +0,0 @@ -lts/* \ No newline at end of file diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index 1b149073..00000000 --- a/.prettierignore +++ /dev/null @@ -1,29 +0,0 @@ -# Android App -/app - -# Schema -schema/dist - -# Server -server/dist - -# Client -client/.next -client/public/__ENV.js - -# IDEs -.vscode - -# Project Metadata -LICENSE -README.md -CHANGELOG.md - -# Project Dependencies -node_modules -pnpm-lock.yaml - -# Docker -Dockerfile -.dockerignore -docker-compose.yml \ No newline at end of file diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index 3f584f60..00000000 --- a/.prettierrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "printWidth": 120, - "singleQuote": true -} diff --git a/.vscode/extensions.json b/.vscode/extensions.json deleted file mode 100644 index d8fa4eca..00000000 --- a/.vscode/extensions.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "recommendations": [ - "dbaeumer.vscode-eslint", - "esbenp.prettier-vscode", - "lokalise.i18n-ally" - ] -} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index fba60638..00000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "css.validate": false, - "scss.validate": false, - "editor.wordWrap": "on", - "npm.packageManager": "pnpm", - "editor.formatOnSave": true, - "editor.defaultFormatter": "esbenp.prettier-vscode", - "editor.codeActionsOnSave": { - "source.fixAll.eslint": true - }, - "eslint.workingDirectories": [ - "schema", - "client", - "server" - ], - "conventionalCommits.scopes": [ - "client", - "server", - "docker", - "dependencies" - ] -} \ No newline at end of file diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md deleted file mode 100644 index cbefc2ac..00000000 --- a/CODE_OF_CONDUCT.md +++ /dev/null @@ -1,128 +0,0 @@ -# Contributor Covenant Code of Conduct - -## Our Pledge - -We as members, contributors, and leaders pledge to make participation in our -community a harassment-free experience for everyone, regardless of age, body -size, visible or invisible disability, ethnicity, sex characteristics, gender -identity and expression, level of experience, education, socio-economic status, -nationality, personal appearance, race, religion, or sexual identity -and orientation. - -We pledge to act and interact in ways that contribute to an open, welcoming, -diverse, inclusive, and healthy community. - -## Our Standards - -Examples of behavior that contributes to a positive environment for our -community include: - -- Demonstrating empathy and kindness toward other people -- Being respectful of differing opinions, viewpoints, and experiences -- Giving and gracefully accepting constructive feedback -- Accepting responsibility and apologizing to those affected by our mistakes, - and learning from the experience -- Focusing on what is best not just for us as individuals, but for the - overall community - -Examples of unacceptable behavior include: - -- The use of sexualized language or imagery, and sexual attention or - advances of any kind -- Trolling, insulting or derogatory comments, and personal or political attacks -- Public or private harassment -- Publishing others' private information, such as a physical or email - address, without their explicit permission -- Other conduct which could reasonably be considered inappropriate in a - professional setting - -## Enforcement Responsibilities - -Community leaders are responsible for clarifying and enforcing our standards of -acceptable behavior and will take appropriate and fair corrective action in -response to any behavior that they deem inappropriate, threatening, offensive, -or harmful. - -Community leaders have the right and responsibility to remove, edit, or reject -comments, commits, code, wiki edits, issues, and other contributions that are -not aligned to this Code of Conduct, and will communicate reasons for moderation -decisions when appropriate. - -## Scope - -This Code of Conduct applies within all community spaces, and also applies when -an individual is officially representing the community in public spaces. -Examples of representing our community include using an official e-mail address, -posting via an official social media account, or acting as an appointed -representative at an online or offline event. - -## Enforcement - -Instances of abusive, harassing, or otherwise unacceptable behavior may be -reported to the community leaders responsible for enforcement at -im.amruth@gmail.com. -All complaints will be reviewed and investigated promptly and fairly. - -All community leaders are obligated to respect the privacy and security of the -reporter of any incident. - -## Enforcement Guidelines - -Community leaders will follow these Community Impact Guidelines in determining -the consequences for any action they deem in violation of this Code of Conduct: - -### 1. Correction - -**Community Impact**: Use of inappropriate language or other behavior deemed -unprofessional or unwelcome in the community. - -**Consequence**: A private, written warning from community leaders, providing -clarity around the nature of the violation and an explanation of why the -behavior was inappropriate. A public apology may be requested. - -### 2. Warning - -**Community Impact**: A violation through a single incident or series -of actions. - -**Consequence**: A warning with consequences for continued behavior. No -interaction with the people involved, including unsolicited interaction with -those enforcing the Code of Conduct, for a specified period of time. This -includes avoiding interactions in community spaces as well as external channels -like social media. Violating these terms may lead to a temporary or -permanent ban. - -### 3. Temporary Ban - -**Community Impact**: A serious violation of community standards, including -sustained inappropriate behavior. - -**Consequence**: A temporary ban from any sort of interaction or public -communication with the community for a specified period of time. No public or -private interaction with the people involved, including unsolicited interaction -with those enforcing the Code of Conduct, is allowed during this period. -Violating these terms may lead to a permanent ban. - -### 4. Permanent Ban - -**Community Impact**: Demonstrating a pattern of violation of community -standards, including sustained inappropriate behavior, harassment of an -individual, or aggression toward or disparagement of classes of individuals. - -**Consequence**: A permanent ban from any sort of public interaction within -the community. - -## Attribution - -This Code of Conduct is adapted from the [Contributor Covenant][homepage], -version 2.0, available at -https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. - -Community Impact Guidelines were inspired by [Mozilla's code of conduct -enforcement ladder](https://github.com/mozilla/diversity). - -[homepage]: https://www.contributor-covenant.org - -For answers to common questions about this code of conduct, see the FAQ at -https://www.contributor-covenant.org/faq. Translations are available at -https://www.contributor-covenant.org/translations. diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 26f5c650..00000000 --- a/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2022 Amruth Pillai - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/README.md b/README.md deleted file mode 100644 index 73cbe4c6..00000000 --- a/README.md +++ /dev/null @@ -1,179 +0,0 @@ -<img src="/client/public/logo/dark.svg" alt="Reactive Resume" width="256px" height="256px" /> - -# Reactive Resume - -[![Project Version](https://img.shields.io/github/package-json/v/AmruthPillai/Reactive-Resume?style=flat-square)](https://github.com/AmruthPillai/Reactive-Resume/releases) -[![Project License](https://img.shields.io/github/license/AmruthPillai/Reactive-Resume?style=flat-square)](https://github.com/AmruthPillai/Reactive-Resume/blob/main/LICENSE) -[![Crowdin](https://badges.crowdin.net/reactive-resume/localized.svg)](https://translate.rxresu.me) -[![Docker Pulls](https://img.shields.io/docker/pulls/amruthpillai/reactive-resume?style=flat-square)](https://hub.docker.com/r/amruthpillai/reactive-resume) -![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/AmruthPillai/Reactive-Resume/docker-build-push.yml?branch=main&label=docker%20build&style=flat-square) -[![Gitpod](https://img.shields.io/badge/Contribute%20with-Gitpod-908a85?logo=gitpod)](https://gitpod.io/#https://github.com/AmruthPillai/Reactive-Resume) -[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FAmruthPillai%2FReactive-Resume.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2FAmruthPillai%2FReactive-Resume?ref=badge_shield) - -## [Go to App](https://rxresu.me) | [Docs](https://docs.rxresu.me) - -Reactive Resume is a free and open source resume builder that’s built to make the mundane tasks of creating, updating and sharing your resume as easy as 1, 2, 3. With this app, you can create multiple resumes, share them with recruiters through a unique link and print as PDF, all for free, no advertisements, without losing the integrity and privacy of your data. - -You have complete control over what goes into your resume, how it looks, what colors, what templates, even the layout in which sections placed. Want a dark mode resume? It’s as easy as editing 3 values and you’re done. You don’t need to wait to see your changes either. Everything you type, everything you change, appears immediately on your resume and gets updated in real time. - -## ❗️ Important Notice - -Due to increasing and recurring costs from Google Cloud, I would have to take down the Version 1 and Version 2 editions of the application that live on https://v1.rxresu.me/ and https://v2.rxresu.me/ respectively. - -I plan to take down the servers on 1st September 2023, so if you have any data on the earlier versions, please migrate it over to the latest version on https://rxresu.me/ as soon as you can. - -The current version will remain unchanged, and is still actively supported. It will have no effect on these changes. - -Thank you to the 400,000+ people using the app! 🙏 - -## Table of Contents - -- [Reactive Resume](#reactive-resume) - - [Go to App | Docs](#go-to-app--docs) - - [Table of Contents](#table-of-contents) - - [Features](#features) - - [Languages](#languages) - - [Tutorial](#tutorial) - - [Build from Source](#build-from-source) - - [Contributing](#contributing) - - [Report Bugs and Feature Requests](#report-bugs-and-feature-requests) - - [Donations](#donations) - - [GitHub Sponsor](#github-sponsor) - - [PayPal](#paypal) - - [GitHub Star History](#github-star-history) - - [Infrastructure](#infrastructure) - - [Contributors Wall](#contributors-wall) - - [License](#license) - -## Features - -- Free, forever -- No Advertising -- No User Tracking -- Sync your data across devices -- Accessible in multiple languages -- Import data from [LinkedIn](https://www.linkedin.com/), [JSON Resume](https://jsonresume.org/) -- Manage multiple resumes with one account -- Open Source (with large community support) -- Send your resume to others with a unique sharable link -- Pick any font from [Google Fonts](https://fonts.google.com/) to use on your resume -- Choose from 6 vibrant templates and more coming soon -- Export your resume to JSON or PDF format with just one click -- Create an account using your email, or just Sign in with Google -- Mix and match colors to any degree, even a dark mode resume? -- Add sections, add pages and change layouts the way you want to -- Tailor-made Backend and Database, isolated from Google, Amazon etc. -- **Oh, and did I mention that it's free?** - -## Languages - -- Amharic (አማርኛ) -- Arabic (اَلْعَرَبِيَّةُ) -- Bengali (বাংলা) -- Bulgarian (български) -- Catalan (Valencian) -- Chinese (中文) -- Czech (čeština) -- Danish (Dansk) -- Dutch (Nederlands) -- English -- Finnish (Suomi) -- French (Français) -- German (Deutsch) -- Greek (Ελληνικά) -- Hebrew (Ivrit) -- Hindi (हिन्दी) -- Hungarian (Magyar) -- Indonesian (Bahasa Indonesia) -- Italian (Italiano) -- Japanese (日本語) -- Kannada (ಕನ್ನಡ) -- Khmer (ភាសាខ្មែរ) -- Korean (한국어) -- Malayalam (മലയാളം) -- Marathi (मराठी) -- Nepali (नेपाली) -- Norwegian (Norsk) -- Odia (ଓଡ଼ିଆ) -- Persian (فارسی) -- Polish (Polski) -- Portuguese (Português) -- Romanian (limba română) -- Russian (русский) -- Serbian (српски језик) -- Spanish (Español) -- Swedish (Svenska) -- Tamil (தமிழ்) -- Turkish (Türkçe) -- Ukrainian (Українська мова) -- Vietnamese (Tiếng Việt) - -Help by [translating Reactive Resume](https://translate.rxresu.me) to your language! - -## Tutorial - -The docs include an extensive [Tutorial](https://docs.rxresu.me/tutorial) section which outline the features of Reactive Resume and help you through building your first resume on the app. - -## Build from Source - -[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/AmruthPillai/Reactive-Resume) - -Initially building the image and project on Gitpod will take at least ~10 minutes, so please be patient on first launch. - -For extensive information on how to build the app on your local machine, head over to the docs [Source Code](https://docs.rxresu.me/source-code) section. - -## Contributing - -This project makes use of [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) style and workflow for commit messages to ensure that the CHANGELOG is auto-generated. In general, this project follows the "fork-and-pull" Git workflow. - -1. **Fork** the repo on GitHub -2. **Clone** the project to your own machine -3. **Commit** changes to your own branch -4. **Push** your work back up to your fork -5. Submit a **Pull Request** so that we can review your changes - -NOTE: Be sure to merge the latest from `main` before making a pull request! - -## Report Bugs and Feature Requests - -Use the [GitHub Issues](https://github.com/AmruthPillai/Reactive-Resume/issues/new/choose) platform to notify me about bugs or new features that you would like to see in Reactive Resume. Please check before creating new issues as there might already be one. - -## Donations - -Reactive Resume would be nothing without the folks who supported me and kept the project alive in the beginning, and your continued support is what keeps me going. If you found Reactive Resume to be useful, helpful or just insightful and appreciate the effort I took to make the project, please consider donating as little or as much as you can. - -### [GitHub Sponsor](https://github.com/sponsors/AmruthPillai) -### [PayPal](https://paypal.me/RajaRajanA) - -## GitHub Star History - -[![Star History Chart](https://api.star-history.com/svg?repos=AmruthPillai/Reactive-Resume&type=Date)](https://star-history.com/#AmruthPillai/Reactive-Resume&Date) - -## Infrastructure - -- [Next.js](https://nextjs.org/), frontend -- [NestJS](https://nestjs.com/), backend -- [PostgreSQL](https://www.postgresql.org/), database -- [DigitalOcean](https://www.digitalocean.com/), infrastructure provider -- [Crowdin](https://translate.rxresu.me/), translation management platform - -  - -<a href="https://pillai.xyz/digitalocean"> - <img src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/PoweredByDO/DO_Powered_by_Badge_blue.svg" width="200px" /> -</a> - -## Contributors Wall -<a href="https://github.com/AmruthPillai/Reactive-Resume/graphs/contributors"> - <img src="https://contrib.rocks/image?repo=AmruthPillai/Reactive-Resume" /> -</a> - - -_Note: It may take up to 24h for the [contrib.rocks](https://contrib.rocks/image?repo=AmruthPillai/Reactive-Resume) plugin to update because it's refreshed once a day._ - -## License - -Reactive Resume is packaged and distributed using the [MIT License](https://choosealicense.com/licenses/mit/) which allows for commercial use, distribution, modification and private use provided that all copies of the software contain the same license and copyright. - -_By the community, for the community._ -A passion project by [Amruth Pillai](https://amruthpillai.com/) diff --git a/SECURITY.md b/SECURITY.md deleted file mode 100644 index 79a62a5c..00000000 --- a/SECURITY.md +++ /dev/null @@ -1,13 +0,0 @@ -# Security Policy - -## Supported Versions - -| Version | Supported | -| ------- | ------------------ | -| 3.x.x | :white_check_mark: | -| 2.x.x | :x: | -| 1.x.x | :x: | - -## Reporting a Vulnerability - -Create an issue on GitHub or send me an email through the contact form on my website at https://amruthpillai.com/ diff --git a/app/.gitignore b/app/.gitignore deleted file mode 100644 index 16dcd122..00000000 --- a/app/.gitignore +++ /dev/null @@ -1,33 +0,0 @@ -# Gradle files -.gradle/ -build/ - -# Local configuration file (sdk path, etc) -local.properties - -# Log/OS Files -*.log - -# Android Studio generated files and folders -captures/ -.externalNativeBuild/ -.cxx/ -*.apk -output.json - -# IntelliJ -*.iml -.idea/ -misc.xml -deploymentTargetDropDown.xml -render.experimental.xml - -# Keystore files -*.jks -*.keystore - -# Google Services (e.g. APIs or Firebase) -google-services.json - -# Android Profiling -*.hprof \ No newline at end of file diff --git a/app/app/.editorconfig b/app/app/.editorconfig deleted file mode 100644 index 86a14cae..00000000 --- a/app/app/.editorconfig +++ /dev/null @@ -1,8 +0,0 @@ -root = true - -[*] -charset = utf-8 -indent_size = 4 -indent_style = space -insert_final_newline = true -trim_trailing_whitespace = true diff --git a/app/app/.gitignore b/app/app/.gitignore deleted file mode 100644 index 956c004d..00000000 --- a/app/app/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -/build -/release \ No newline at end of file diff --git a/app/app/build.gradle b/app/app/build.gradle deleted file mode 100644 index 786e1303..00000000 --- a/app/app/build.gradle +++ /dev/null @@ -1,47 +0,0 @@ -plugins { - id 'com.android.application' - id 'org.jetbrains.kotlin.android' -} - -android { - compileSdk 32 - - defaultConfig { - applicationId "me.rxresu.app" - minSdk 21 - targetSdk 32 - versionCode 3 - versionName "1.0" - resConfigs 'en' - - } - - buildTypes { - release { - minifyEnabled true - shrinkResources true - zipAlignEnabled true - - proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' - } - } - - compileOptions { - sourceCompatibility JavaVersion.VERSION_1_8 - targetCompatibility JavaVersion.VERSION_1_8 - } - - kotlinOptions { - jvmTarget = '1.8' - } - - buildFeatures { - viewBinding true - } - namespace 'me.rxresu.app' -} - -dependencies { - implementation 'androidx.core:core-ktx:1.7.0' - implementation 'com.google.android.material:material:1.5.0' -} diff --git a/app/app/proguard-rules.pro b/app/app/proguard-rules.pro deleted file mode 100644 index 481bb434..00000000 --- a/app/app/proguard-rules.pro +++ /dev/null @@ -1,21 +0,0 @@ -# Add project specific ProGuard rules here. -# You can control the set of applied configuration files using the -# proguardFiles setting in build.gradle. -# -# For more details, see -# http://developer.android.com/guide/developing/tools/proguard.html - -# If your project uses WebView with JS, uncomment the following -# and specify the fully qualified class name to the JavaScript interface -# class: -#-keepclassmembers class fqcn.of.javascript.interface.for.webview { -# public *; -#} - -# Uncomment this to preserve the line number information for -# debugging stack traces. -#-keepattributes SourceFile,LineNumberTable - -# If you keep the line number information, uncomment this to -# hide the original source file name. -#-renamesourcefileattribute SourceFile \ No newline at end of file diff --git a/app/app/src/main/AndroidManifest.xml b/app/app/src/main/AndroidManifest.xml deleted file mode 100644 index bc8fe1cd..00000000 --- a/app/app/src/main/AndroidManifest.xml +++ /dev/null @@ -1,26 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> -<manifest - xmlns:android="http://schemas.android.com/apk/res/android"> - - <uses-permission android:name="android.permission.INTERNET"/> - - <application - android:allowBackup="true" - android:icon="@mipmap/ic_launcher" - android:label="@string/app_name" - android:roundIcon="@mipmap/ic_launcher_round" - android:supportsRtl="true" - android:theme="@style/AppTheme"> - <activity - android:configChanges="orientation|screenSize" - android:name=".MainActivity" - android:exported="true"> - <intent-filter> - <action android:name="android.intent.action.MAIN" /> - - <category android:name="android.intent.category.LAUNCHER" /> - </intent-filter> - </activity> - </application> - -</manifest> diff --git a/app/app/src/main/ic_launcher-playstore.png b/app/app/src/main/ic_launcher-playstore.png deleted file mode 100644 index ef2861c3..00000000 Binary files a/app/app/src/main/ic_launcher-playstore.png and /dev/null differ diff --git a/app/app/src/main/java/me/rxresu/app/CustomWebViewClient.kt b/app/app/src/main/java/me/rxresu/app/CustomWebViewClient.kt deleted file mode 100644 index a97da13e..00000000 --- a/app/app/src/main/java/me/rxresu/app/CustomWebViewClient.kt +++ /dev/null @@ -1,21 +0,0 @@ -package me.rxresu.app - -import android.content.Intent -import android.net.Uri -import android.webkit.WebView -import android.webkit.WebViewClient - -internal class CustomWebViewClient : WebViewClient() { - override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean { - val hostname = "rxresu.me" - val uri = Uri.parse(url) - - if (uri.host != null && uri.host!!.endsWith(hostname)) { - return false - } - - view.context.startActivity(Intent(Intent.ACTION_VIEW, Uri.parse(url))) - - return true - } -} diff --git a/app/app/src/main/java/me/rxresu/app/MainActivity.kt b/app/app/src/main/java/me/rxresu/app/MainActivity.kt deleted file mode 100644 index 6897ec52..00000000 --- a/app/app/src/main/java/me/rxresu/app/MainActivity.kt +++ /dev/null @@ -1,34 +0,0 @@ -package me.rxresu.app - -import android.annotation.SuppressLint -import android.os.Bundle -import android.webkit.WebView -import androidx.appcompat.app.AppCompatActivity - -class MainActivity : AppCompatActivity() { - private lateinit var webView: WebView - - private var url = "https://rxresu.me" - - @SuppressLint("SetJavaScriptEnabled") - override fun onCreate(savedInstanceState: Bundle?) { - super.onCreate(savedInstanceState) - setContentView(R.layout.activity_main) - - webView = findViewById(R.id.webview) - - webView.webViewClient = CustomWebViewClient() - webView.settings.javaScriptEnabled = true - webView.settings.userAgentString = "Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Mobile Safari/537.36" - - webView.loadUrl(url) - } - - override fun onBackPressed() { - if (webView.canGoBack()) { - webView.goBack() - } else { - super.onBackPressed() - } - } -} diff --git a/app/app/src/main/res/layout/activity_main.xml b/app/app/src/main/res/layout/activity_main.xml deleted file mode 100644 index b1ce2b18..00000000 --- a/app/app/src/main/res/layout/activity_main.xml +++ /dev/null @@ -1,15 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> -<androidx.coordinatorlayout.widget.CoordinatorLayout - xmlns:android="http://schemas.android.com/apk/res/android" - xmlns:tools="http://schemas.android.com/tools" - android:layout_width="match_parent" - android:layout_height="match_parent" - tools:context=".MainActivity"> - - <include - layout="@layout/content_main" - android:layout_width="match_parent" - android:layout_height="match_parent" - android:visibility="visible" /> - -</androidx.coordinatorlayout.widget.CoordinatorLayout> diff --git a/app/app/src/main/res/layout/content_main.xml b/app/app/src/main/res/layout/content_main.xml deleted file mode 100644 index 238cd022..00000000 --- a/app/app/src/main/res/layout/content_main.xml +++ /dev/null @@ -1,17 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> -<androidx.constraintlayout.widget.ConstraintLayout - xmlns:android="http://schemas.android.com/apk/res/android" - xmlns:app="http://schemas.android.com/apk/res-auto" - android:layout_width="match_parent" - android:layout_height="match_parent"> - - <WebView - android:id="@+id/webview" - android:layout_width="0dp" - android:layout_height="0dp" - app:layout_constraintBottom_toBottomOf="parent" - app:layout_constraintEnd_toEndOf="parent" - app:layout_constraintStart_toStartOf="parent" - app:layout_constraintTop_toTopOf="parent" /> - -</androidx.constraintlayout.widget.ConstraintLayout> diff --git a/app/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml b/app/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml deleted file mode 100644 index 036d09bc..00000000 --- a/app/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml +++ /dev/null @@ -1,5 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> -<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android"> - <background android:drawable="@color/ic_launcher_background"/> - <foreground android:drawable="@mipmap/ic_launcher_foreground"/> -</adaptive-icon> \ No newline at end of file diff --git a/app/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml b/app/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml deleted file mode 100644 index 036d09bc..00000000 --- a/app/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml +++ /dev/null @@ -1,5 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> -<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android"> - <background android:drawable="@color/ic_launcher_background"/> - <foreground android:drawable="@mipmap/ic_launcher_foreground"/> -</adaptive-icon> \ No newline at end of file diff --git a/app/app/src/main/res/mipmap-hdpi/ic_launcher.png b/app/app/src/main/res/mipmap-hdpi/ic_launcher.png deleted file mode 100644 index 91830192..00000000 Binary files a/app/app/src/main/res/mipmap-hdpi/ic_launcher.png and /dev/null differ diff --git a/app/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png b/app/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png deleted file mode 100644 index 32312634..00000000 Binary files a/app/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png and /dev/null differ diff --git a/app/app/src/main/res/mipmap-hdpi/ic_launcher_round.png b/app/app/src/main/res/mipmap-hdpi/ic_launcher_round.png deleted file mode 100644 index 966baa42..00000000 Binary files a/app/app/src/main/res/mipmap-hdpi/ic_launcher_round.png and /dev/null differ diff --git a/app/app/src/main/res/mipmap-mdpi/ic_launcher.png b/app/app/src/main/res/mipmap-mdpi/ic_launcher.png deleted file mode 100644 index fe4857c9..00000000 Binary files a/app/app/src/main/res/mipmap-mdpi/ic_launcher.png and /dev/null differ diff --git a/app/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png b/app/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png deleted file mode 100644 index 7b17b97f..00000000 Binary files a/app/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png and /dev/null differ diff --git a/app/app/src/main/res/mipmap-mdpi/ic_launcher_round.png b/app/app/src/main/res/mipmap-mdpi/ic_launcher_round.png deleted file mode 100644 index 063a4c84..00000000 Binary files a/app/app/src/main/res/mipmap-mdpi/ic_launcher_round.png and /dev/null differ diff --git a/app/app/src/main/res/mipmap-xhdpi/ic_launcher.png b/app/app/src/main/res/mipmap-xhdpi/ic_launcher.png deleted file mode 100644 index 25d8bf42..00000000 Binary files a/app/app/src/main/res/mipmap-xhdpi/ic_launcher.png and /dev/null differ diff --git a/app/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png b/app/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png deleted file mode 100644 index ae0fa803..00000000 Binary files a/app/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png and /dev/null differ diff --git a/app/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png b/app/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png deleted file mode 100644 index 14424fc3..00000000 Binary files a/app/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png and /dev/null differ diff --git a/app/app/src/main/res/mipmap-xxhdpi/ic_launcher.png b/app/app/src/main/res/mipmap-xxhdpi/ic_launcher.png deleted file mode 100644 index 3d3d5b8d..00000000 Binary files a/app/app/src/main/res/mipmap-xxhdpi/ic_launcher.png and /dev/null differ diff --git a/app/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png b/app/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png deleted file mode 100644 index 7c5959f4..00000000 Binary files a/app/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png and /dev/null differ diff --git a/app/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png b/app/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png deleted file mode 100644 index 618a6332..00000000 Binary files a/app/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png and /dev/null differ diff --git a/app/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png b/app/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png deleted file mode 100644 index 4f931699..00000000 Binary files a/app/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png and /dev/null differ diff --git a/app/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png b/app/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png deleted file mode 100644 index 4ddb06f7..00000000 Binary files a/app/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png and /dev/null differ diff --git a/app/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png b/app/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png deleted file mode 100644 index 862a03de..00000000 Binary files a/app/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png and /dev/null differ diff --git a/app/app/src/main/res/values/ic_launcher_background.xml b/app/app/src/main/res/values/ic_launcher_background.xml deleted file mode 100644 index c5d5899f..00000000 --- a/app/app/src/main/res/values/ic_launcher_background.xml +++ /dev/null @@ -1,4 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> -<resources> - <color name="ic_launcher_background">#FFFFFF</color> -</resources> \ No newline at end of file diff --git a/app/app/src/main/res/values/strings.xml b/app/app/src/main/res/values/strings.xml deleted file mode 100644 index 14dd8a46..00000000 --- a/app/app/src/main/res/values/strings.xml +++ /dev/null @@ -1,3 +0,0 @@ -<resources> - <string name="app_name">Reactive Resume</string> -</resources> diff --git a/app/app/src/main/res/values/themes.xml b/app/app/src/main/res/values/themes.xml deleted file mode 100644 index b81c93fa..00000000 --- a/app/app/src/main/res/values/themes.xml +++ /dev/null @@ -1,6 +0,0 @@ -<resources> - <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar"> - <item name="windowActionBar">false</item> - <item name="windowNoTitle">true</item> - </style> -</resources> diff --git a/app/build.gradle b/app/build.gradle deleted file mode 100644 index fc9d0cdc..00000000 --- a/app/build.gradle +++ /dev/null @@ -1,9 +0,0 @@ -plugins { - id 'com.android.application' version '7.4.2' apply false - id 'com.android.library' version '7.4.2' apply false - id 'org.jetbrains.kotlin.android' version '1.9.10' apply false -} - -task clean(type: Delete) { - delete rootProject.buildDir -} diff --git a/app/gradle.properties b/app/gradle.properties deleted file mode 100644 index 3c7a8bd3..00000000 --- a/app/gradle.properties +++ /dev/null @@ -1,23 +0,0 @@ -# Project-wide Gradle settings. -# IDE (e.g. Android Studio) users: -# Gradle settings configured through the IDE *will override* -# any settings specified in this file. -# For more details on how to configure your build environment visit -# http://www.gradle.org/docs/current/userguide/build_environment.html -# Specifies the JVM arguments used for the daemon process. -# The setting is particularly useful for tweaking memory settings. -org.gradle.jvmargs=-Xmx2048m -Dfile.encoding=UTF-8 -# When configured, Gradle will run in incubating parallel mode. -# This option should only be used with decoupled projects. More details, visit -# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects -# org.gradle.parallel=true -# AndroidX package structure to make it clearer which packages are bundled with the -# Android operating system, and which are packaged with your app"s APK -# https://developer.android.com/topic/libraries/support-library/androidx-rn -android.useAndroidX=true -# Kotlin code style for this project: "official" or "obsolete": -kotlin.code.style=official -# Enables namespacing of each library's R class so that its R class includes only the -# resources declared in the library itself and none from the library's dependencies, -# thereby reducing the size of the R class for that library -android.nonTransitiveRClass=true diff --git a/app/gradle/wrapper/gradle-wrapper.jar b/app/gradle/wrapper/gradle-wrapper.jar deleted file mode 100644 index e708b1c0..00000000 Binary files a/app/gradle/wrapper/gradle-wrapper.jar and /dev/null differ diff --git a/app/gradle/wrapper/gradle-wrapper.properties b/app/gradle/wrapper/gradle-wrapper.properties deleted file mode 100644 index 211f6a25..00000000 --- a/app/gradle/wrapper/gradle-wrapper.properties +++ /dev/null @@ -1,6 +0,0 @@ -#Wed Mar 09 21:34:49 CET 2022 -distributionBase=GRADLE_USER_HOME -distributionUrl=https\://services.gradle.org/distributions/gradle-7.5-bin.zip -distributionPath=wrapper/dists -zipStorePath=wrapper/dists -zipStoreBase=GRADLE_USER_HOME diff --git a/app/gradlew b/app/gradlew deleted file mode 100755 index 4f906e0c..00000000 --- a/app/gradlew +++ /dev/null @@ -1,185 +0,0 @@ -#!/usr/bin/env sh - -# -# Copyright 2015 the original author or authors. -# -# Licensed under the Apache License, Version 2.0 (the "License"); -# you may not use this file except in compliance with the License. -# You may obtain a copy of the License at -# -# https://www.apache.org/licenses/LICENSE-2.0 -# -# Unless required by applicable law or agreed to in writing, software -# distributed under the License is distributed on an "AS IS" BASIS, -# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -# See the License for the specific language governing permissions and -# limitations under the License. -# - -############################################################################## -## -## Gradle start up script for UN*X -## -############################################################################## - -# Attempt to set APP_HOME -# Resolve links: $0 may be a link -PRG="$0" -# Need this for relative symlinks. -while [ -h "$PRG" ] ; do - ls=`ls -ld "$PRG"` - link=`expr "$ls" : '.*-> \(.*\)$'` - if expr "$link" : '/.*' > /dev/null; then - PRG="$link" - else - PRG=`dirname "$PRG"`"/$link" - fi -done -SAVED="`pwd`" -cd "`dirname \"$PRG\"`/" >/dev/null -APP_HOME="`pwd -P`" -cd "$SAVED" >/dev/null - -APP_NAME="Gradle" -APP_BASE_NAME=`basename "$0"` - -# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. -DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' - -# Use the maximum available, or set MAX_FD != -1 to use that value. -MAX_FD="maximum" - -warn () { - echo "$*" -} - -die () { - echo - echo "$*" - echo - exit 1 -} - -# OS specific support (must be 'true' or 'false'). -cygwin=false -msys=false -darwin=false -nonstop=false -case "`uname`" in - CYGWIN* ) - cygwin=true - ;; - Darwin* ) - darwin=true - ;; - MINGW* ) - msys=true - ;; - NONSTOP* ) - nonstop=true - ;; -esac - -CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar - - -# Determine the Java command to use to start the JVM. -if [ -n "$JAVA_HOME" ] ; then - if [ -x "$JAVA_HOME/jre/sh/java" ] ; then - # IBM's JDK on AIX uses strange locations for the executables - JAVACMD="$JAVA_HOME/jre/sh/java" - else - JAVACMD="$JAVA_HOME/bin/java" - fi - if [ ! -x "$JAVACMD" ] ; then - die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME - -Please set the JAVA_HOME variable in your environment to match the -location of your Java installation." - fi -else - JAVACMD="java" - which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. - -Please set the JAVA_HOME variable in your environment to match the -location of your Java installation." -fi - -# Increase the maximum file descriptors if we can. -if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then - MAX_FD_LIMIT=`ulimit -H -n` - if [ $? -eq 0 ] ; then - if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then - MAX_FD="$MAX_FD_LIMIT" - fi - ulimit -n $MAX_FD - if [ $? -ne 0 ] ; then - warn "Could not set maximum file descriptor limit: $MAX_FD" - fi - else - warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" - fi -fi - -# For Darwin, add options to specify how the application appears in the dock -if $darwin; then - GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" -fi - -# For Cygwin or MSYS, switch paths to Windows format before running java -if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then - APP_HOME=`cygpath --path --mixed "$APP_HOME"` - CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` - - JAVACMD=`cygpath --unix "$JAVACMD"` - - # We build the pattern for arguments to be converted via cygpath - ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` - SEP="" - for dir in $ROOTDIRSRAW ; do - ROOTDIRS="$ROOTDIRS$SEP$dir" - SEP="|" - done - OURCYGPATTERN="(^($ROOTDIRS))" - # Add a user-defined pattern to the cygpath arguments - if [ "$GRADLE_CYGPATTERN" != "" ] ; then - OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" - fi - # Now convert the arguments - kludge to limit ourselves to /bin/sh - i=0 - for arg in "$@" ; do - CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` - CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option - - if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition - eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` - else - eval `echo args$i`="\"$arg\"" - fi - i=`expr $i + 1` - done - case $i in - 0) set -- ;; - 1) set -- "$args0" ;; - 2) set -- "$args0" "$args1" ;; - 3) set -- "$args0" "$args1" "$args2" ;; - 4) set -- "$args0" "$args1" "$args2" "$args3" ;; - 5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; - 6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; - 7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; - 8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; - 9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; - esac -fi - -# Escape application args -save () { - for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done - echo " " -} -APP_ARGS=`save "$@"` - -# Collect all arguments for the java command, following the shell quoting and substitution rules -eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" - -exec "$JAVACMD" "$@" diff --git a/app/gradlew.bat b/app/gradlew.bat deleted file mode 100644 index ac1b06f9..00000000 --- a/app/gradlew.bat +++ /dev/null @@ -1,89 +0,0 @@ -@rem -@rem Copyright 2015 the original author or authors. -@rem -@rem Licensed under the Apache License, Version 2.0 (the "License"); -@rem you may not use this file except in compliance with the License. -@rem You may obtain a copy of the License at -@rem -@rem https://www.apache.org/licenses/LICENSE-2.0 -@rem -@rem Unless required by applicable law or agreed to in writing, software -@rem distributed under the License is distributed on an "AS IS" BASIS, -@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -@rem See the License for the specific language governing permissions and -@rem limitations under the License. -@rem - -@if "%DEBUG%" == "" @echo off -@rem ########################################################################## -@rem -@rem Gradle startup script for Windows -@rem -@rem ########################################################################## - -@rem Set local scope for the variables with windows NT shell -if "%OS%"=="Windows_NT" setlocal - -set DIRNAME=%~dp0 -if "%DIRNAME%" == "" set DIRNAME=. -set APP_BASE_NAME=%~n0 -set APP_HOME=%DIRNAME% - -@rem Resolve any "." and ".." in APP_HOME to make it shorter. -for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi - -@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. -set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" - -@rem Find java.exe -if defined JAVA_HOME goto findJavaFromJavaHome - -set JAVA_EXE=java.exe -%JAVA_EXE% -version >NUL 2>&1 -if "%ERRORLEVEL%" == "0" goto execute - -echo. -echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. -echo. -echo Please set the JAVA_HOME variable in your environment to match the -echo location of your Java installation. - -goto fail - -:findJavaFromJavaHome -set JAVA_HOME=%JAVA_HOME:"=% -set JAVA_EXE=%JAVA_HOME%/bin/java.exe - -if exist "%JAVA_EXE%" goto execute - -echo. -echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% -echo. -echo Please set the JAVA_HOME variable in your environment to match the -echo location of your Java installation. - -goto fail - -:execute -@rem Setup the command line - -set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar - - -@rem Execute Gradle -"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* - -:end -@rem End local scope for the variables with windows NT shell -if "%ERRORLEVEL%"=="0" goto mainEnd - -:fail -rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of -rem the _cmd.exe /c_ return code! -if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 -exit /b 1 - -:mainEnd -if "%OS%"=="Windows_NT" endlocal - -:omega diff --git a/app/settings.gradle b/app/settings.gradle deleted file mode 100644 index 3ec57465..00000000 --- a/app/settings.gradle +++ /dev/null @@ -1,16 +0,0 @@ -pluginManagement { - repositories { - gradlePluginPortal() - google() - mavenCentral() - } -} -dependencyResolutionManagement { - repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS) - repositories { - google() - mavenCentral() - } -} -rootProject.name = "Reactive Resume" -include ':app' diff --git a/client/.eslintrc.json b/client/.eslintrc.json deleted file mode 100644 index 823a26af..00000000 --- a/client/.eslintrc.json +++ /dev/null @@ -1,36 +0,0 @@ -{ - "extends": ["../.eslintrc.json", "next/core-web-vitals", "plugin:tailwindcss/recommended"], - "plugins": ["unused-imports"], - "ignorePatterns": [".next", "__ENV.js"], - "settings": { - "next": { - "rootDir": "client" - } - }, - "rules": { - // Next.js - "@next/next/no-img-element": "off", - "@next/next/no-sync-scripts": "off", - - // React - "react/no-unescaped-entities": "off", - - // React Hooks - "react-hooks/exhaustive-deps": "off", - - // Unused Imports - "unused-imports/no-unused-imports": "error", - "unused-imports/no-unused-vars": [ - "warn", - { - "vars": "all", - "args": "none", - "varsIgnorePattern": "^_", - "argsIgnorePattern": "^_" - } - ], - - // Tailwind CSS - "tailwindcss/no-custom-classname": ["warn", { "whitelist": ["preview-mode", "printer-mode", "markdown"] }] - } -} diff --git a/client/.gitignore b/client/.gitignore deleted file mode 100644 index 6cf4f584..00000000 --- a/client/.gitignore +++ /dev/null @@ -1,42 +0,0 @@ -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* -.pnpm-debug.log* - -# local env files -.env.local -.env.development.local -.env.test.local -.env.production.local - -# vercel -.vercel - -# typescript -*.tsbuildinfo - -# react-env -__ENV.js - -# next-sitemap -sitemap*.xml diff --git a/client/Dockerfile b/client/Dockerfile deleted file mode 100644 index b1c86259..00000000 --- a/client/Dockerfile +++ /dev/null @@ -1,45 +0,0 @@ -FROM node:lts-alpine AS base - -WORKDIR /app - -RUN apk add --no-cache g++ git make curl python3 libc6-compat \ - && corepack enable && corepack prepare pnpm@latest --activate - -FROM base as dependencies - -COPY package.json pnpm-*.yaml ./ -COPY ./schema/package.json ./schema/package.json -COPY ./client/package.json ./client/package.json - -RUN pnpm install --frozen-lockfile - -FROM base as builder - -COPY . . - -COPY --from=dependencies /app/node_modules ./node_modules -COPY --from=dependencies /app/schema/node_modules ./schema/node_modules -COPY --from=dependencies /app/client/node_modules ./client/node_modules - -ARG TURBO_TOKEN -ENV TURBO_TOKEN=$TURBO_TOKEN - -RUN pnpm exec turbo --filter client build - -FROM base as production - -COPY --from=builder /app/package.json /app/pnpm-*.yaml ./ -COPY --from=builder /app/client/package.json ./client/package.json - -RUN pnpm install --filter client --prod --frozen-lockfile --workspace-root - -COPY --from=builder /app/client/.next ./client/.next -COPY --from=builder /app/client/public ./client/public -COPY --from=builder /app/client/next.config.js ./client/next.config.js -COPY --from=builder /app/client/next-i18next.config.js ./client/next-i18next.config.js - -EXPOSE 3000 - -ENV PORT 3000 - -CMD [ "pnpm", "run", "--filter", "client", "start" ] \ No newline at end of file diff --git a/client/Dockerfile.standalone b/client/Dockerfile.standalone deleted file mode 100644 index 24ffbf82..00000000 --- a/client/Dockerfile.standalone +++ /dev/null @@ -1,43 +0,0 @@ -FROM node:20-alpine AS base - -FROM base AS deps -RUN apk add --no-cache libc6-compat -WORKDIR /app - -COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./ -RUN \ - if [ -f yarn.lock ]; then yarn --frozen-lockfile; \ - elif [ -f package-lock.json ]; then npm ci; \ - elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \ - else echo "Lockfile not found." && exit 1; \ - fi - -FROM base AS builder -WORKDIR /app -COPY --from=deps /app/node_modules ./node_modules -COPY . . - -ENV NEXT_TELEMETRY_DISABLED 1 - -RUN yarn global add pnpm && pnpm build - -FROM base AS runner -WORKDIR /app - -ENV NODE_ENV production -ENV NEXT_TELEMETRY_DISABLED 1 - -RUN addgroup --system --gid 1001 nodejs -RUN adduser --system --uid 1001 nextjs - -COPY --from=builder /app/public ./public -COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ -COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static - -USER nextjs - -EXPOSE 3000 - -ENV PORT 3000 - -CMD ["node", "client/server.js"] \ No newline at end of file diff --git a/client/components/build/Center/ArtboardController.module.scss b/client/components/build/Center/ArtboardController.module.scss deleted file mode 100644 index a4a47d4d..00000000 --- a/client/components/build/Center/ArtboardController.module.scss +++ /dev/null @@ -1,28 +0,0 @@ -.container { - @apply flex w-auto items-center justify-center; - @apply fixed inset-x-0 bottom-6; - @apply transition-[margin-left,margin-right] duration-200; -} - -.pushLeft { - @apply xl:ml-[30vw] 2xl:ml-[28vw]; -} - -.pushRight { - @apply xl:mr-[30vw] 2xl:mr-[28vw]; -} - -.controller { - @apply z-20 flex items-center justify-center shadow-lg; - @apply flex rounded-l-full rounded-r-full px-4; - @apply bg-zinc-50 dark:bg-zinc-900; - @apply opacity-70 transition-opacity duration-200 hover:opacity-100; - - > button { - @apply px-2.5 py-2.5; - } - - > hr { - @apply mx-3 h-5 w-0.5 bg-zinc-900/40 dark:bg-zinc-50/20; - } -} diff --git a/client/components/build/Center/ArtboardController.tsx b/client/components/build/Center/ArtboardController.tsx deleted file mode 100644 index 7cbd0b52..00000000 --- a/client/components/build/Center/ArtboardController.tsx +++ /dev/null @@ -1,168 +0,0 @@ -import { - AlignHorizontalCenter, - AlignVerticalCenter, - Download, - FilterCenterFocus, - InsertPageBreak, - Link, - RedoOutlined, - UndoOutlined, - ViewSidebar, - ZoomIn, - ZoomOut, -} from '@mui/icons-material'; -import { ButtonBase, Divider, Tooltip, useMediaQuery, useTheme } from '@mui/material'; -import dayjs from 'dayjs'; -import get from 'lodash/get'; -import { useTranslation } from 'next-i18next'; -import toast from 'react-hot-toast'; -import { useMutation } from 'react-query'; -import { ReactZoomPanPinchHandlers } from 'react-zoom-pan-pinch'; -import { ActionCreators } from 'redux-undo'; - -import { ServerError } from '@/services/axios'; -import { printResumeAsPdf, PrintResumeAsPdfParams } from '@/services/printer'; -import { togglePageBreakLine, togglePageOrientation, toggleSidebar } from '@/store/build/buildSlice'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import getResumeUrl from '@/utils/getResumeUrl'; -import { cn } from '@/utils/styles'; - -import styles from './ArtboardController.module.scss'; - -const ArtboardController: React.FC<ReactZoomPanPinchHandlers> = ({ zoomIn, zoomOut, centerView }) => { - const { t } = useTranslation(); - - const theme = useTheme(); - const dispatch = useAppDispatch(); - - const isDesktop = useMediaQuery(theme.breakpoints.up('sm')); - - const { past, present: resume, future } = useAppSelector((state) => state.resume); - const pages = get(resume, 'metadata.layout'); - const { left, right } = useAppSelector((state) => state.build.sidebar); - const orientation = useAppSelector((state) => state.build.page.orientation); - - const { mutateAsync, isLoading } = useMutation<string, ServerError, PrintResumeAsPdfParams>(printResumeAsPdf); - - const handleUndo = () => dispatch(ActionCreators.undo()); - const handleRedo = () => dispatch(ActionCreators.redo()); - - const handleTogglePageBreakLine = () => dispatch(togglePageBreakLine()); - - const handleTogglePageOrientation = () => dispatch(togglePageOrientation()); - - const handleToggleSidebar = () => { - dispatch(toggleSidebar({ sidebar: 'left' })); - dispatch(toggleSidebar({ sidebar: 'right' })); - }; - - const handleCopyLink = async () => { - const url = getResumeUrl(resume, { withHost: true }); - await navigator.clipboard.writeText(url); - - toast.success(t('common.toast.success.resume-link-copied')); - }; - - const handleExportPDF = async () => { - const download = (await import('downloadjs')).default; - - const slug = get(resume, 'slug'); - const username = get(resume, 'user.username'); - const updatedAt = get(resume, 'updatedAt'); - - const url = await mutateAsync({ username, slug, lastUpdated: dayjs(updatedAt).unix().toString() }); - - download(url); - }; - - return ( - <div - className={cn({ - [styles.container]: true, - [styles.pushLeft]: left.open, - [styles.pushRight]: right.open, - })} - > - <div className={styles.controller}> - <Tooltip arrow placement="top" title={t('builder.controller.tooltip.undo')}> - <ButtonBase onClick={handleUndo} className={cn({ 'pointer-events-none opacity-50': past.length < 2 })}> - <UndoOutlined fontSize="medium" /> - </ButtonBase> - </Tooltip> - - <Tooltip arrow placement="top" title={t('builder.controller.tooltip.redo')}> - <ButtonBase onClick={handleRedo} className={cn({ 'pointer-events-none opacity-50': future.length === 0 })}> - <RedoOutlined fontSize="medium" /> - </ButtonBase> - </Tooltip> - - <Divider /> - - <Tooltip arrow placement="top" title={t('builder.controller.tooltip.zoom-in')}> - <ButtonBase onClick={() => zoomIn(0.25)}> - <ZoomIn fontSize="medium" /> - </ButtonBase> - </Tooltip> - - <Tooltip arrow placement="top" title={t('builder.controller.tooltip.zoom-out')}> - <ButtonBase onClick={() => zoomOut(0.25)}> - <ZoomOut fontSize="medium" /> - </ButtonBase> - </Tooltip> - - <Tooltip arrow placement="top" title={t('builder.controller.tooltip.center-artboard')}> - <ButtonBase onClick={() => centerView(0.95)}> - <FilterCenterFocus fontSize="medium" /> - </ButtonBase> - </Tooltip> - - <Divider /> - - {isDesktop && ( - <> - <Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-orientation')}> - <ButtonBase - onClick={handleTogglePageOrientation} - className={cn({ 'pointer-events-none opacity-50': pages.length === 1 })} - > - {orientation === 'vertical' ? ( - <AlignHorizontalCenter fontSize="medium" /> - ) : ( - <AlignVerticalCenter fontSize="medium" /> - )} - </ButtonBase> - </Tooltip> - - <Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-page-break-line')}> - <ButtonBase onClick={handleTogglePageBreakLine}> - <InsertPageBreak fontSize="medium" /> - </ButtonBase> - </Tooltip> - - <Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-sidebars')}> - <ButtonBase onClick={handleToggleSidebar}> - <ViewSidebar fontSize="medium" /> - </ButtonBase> - </Tooltip> - - <Divider /> - </> - )} - - <Tooltip arrow placement="top" title={t('builder.controller.tooltip.copy-link')}> - <ButtonBase onClick={handleCopyLink}> - <Link fontSize="medium" /> - </ButtonBase> - </Tooltip> - - <Tooltip arrow placement="top" title={t('builder.controller.tooltip.export-pdf')}> - <ButtonBase onClick={handleExportPDF} disabled={isLoading}> - <Download fontSize="medium" /> - </ButtonBase> - </Tooltip> - </div> - </div> - ); -}; - -export default ArtboardController; diff --git a/client/components/build/Center/Center.module.scss b/client/components/build/Center/Center.module.scss deleted file mode 100644 index 1c86ed27..00000000 --- a/client/components/build/Center/Center.module.scss +++ /dev/null @@ -1,13 +0,0 @@ -.center { - @apply mx-0 flex flex-grow pt-12 lg:pt-16; - @apply transition-[margin-left,margin-right] duration-200; - @apply bg-zinc-100 dark:bg-zinc-900; -} - -.wrapper { - @apply h-full w-full overflow-visible #{!important}; -} - -.artboard { - @apply flex gap-8; -} diff --git a/client/components/build/Center/Center.tsx b/client/components/build/Center/Center.tsx deleted file mode 100644 index 92c8984d..00000000 --- a/client/components/build/Center/Center.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import get from 'lodash/get'; -import isEmpty from 'lodash/isEmpty'; -import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'; - -import { useAppSelector } from '@/store/hooks'; -import { cn } from '@/utils/styles'; - -import ArtboardController from './ArtboardController'; -import styles from './Center.module.scss'; -import Header from './Header'; -import Page from './Page'; - -const Center = () => { - const orientation = useAppSelector((state) => state.build.page.orientation); - - const resume = useAppSelector((state) => state.resume.present); - const layout: string[][][] = get(resume, 'metadata.layout'); - - if (isEmpty(resume)) return null; - - return ( - <div className={cn(styles.center)}> - <Header /> - - <TransformWrapper - centerOnInit - minScale={0.25} - initialScale={0.95} - limitToBounds={false} - centerZoomedOut={false} - pinch={{ step: 1 }} - wheel={{ step: 0.1 }} - > - {(controllerProps) => ( - <> - <TransformComponent wrapperClass={styles.wrapper}> - <div - className={cn({ - [styles.artboard]: true, - 'flex-col': orientation === 'vertical', - })} - > - {layout.map((_, pageIndex) => ( - <Page key={pageIndex} page={pageIndex} showPageNumbers /> - ))} - </div> - </TransformComponent> - - <ArtboardController {...controllerProps} /> - </> - )} - </TransformWrapper> - </div> - ); -}; - -export default Center; diff --git a/client/components/build/Center/Header.module.scss b/client/components/build/Center/Header.module.scss deleted file mode 100644 index 3bad08e9..00000000 --- a/client/components/build/Center/Header.module.scss +++ /dev/null @@ -1,25 +0,0 @@ -.header { - @apply mx-0 flex justify-between shadow; - @apply bg-zinc-900 text-zinc-100; - @apply transition-[margin-left,margin-right] duration-200; - - button > svg { - @apply text-base text-zinc-100; - } -} - -.pushLeft { - @apply xl:ml-[30vw] 2xl:ml-[28vw]; -} - -.pushRight { - @apply xl:mr-[30vw] 2xl:mr-[28vw]; -} - -.title { - @apply flex items-center justify-center; - - h1 { - @apply ml-2; - } -} diff --git a/client/components/build/Center/Header.tsx b/client/components/build/Center/Header.tsx deleted file mode 100644 index 18a8d0f6..00000000 --- a/client/components/build/Center/Header.tsx +++ /dev/null @@ -1,215 +0,0 @@ -import { - ChevronLeft as ChevronLeftIcon, - ChevronRight as ChevronRightIcon, - CopyAll, - Delete, - DriveFileRenameOutline, - Home as HomeIcon, - KeyboardArrowDown as KeyboardArrowDownIcon, - Link as LinkIcon, -} from '@mui/icons-material'; -import { - AppBar, - IconButton, - ListItemIcon, - ListItemText, - Menu, - MenuItem, - Toolbar, - Tooltip, - useMediaQuery, - useTheme, -} from '@mui/material'; -import get from 'lodash/get'; -import { useRouter } from 'next/router'; -import { useTranslation } from 'next-i18next'; -import { useEffect, useMemo, useState } from 'react'; -import toast from 'react-hot-toast'; -import { useMutation } from 'react-query'; -import { Resume } from 'schema'; - -import { RESUMES_QUERY } from '@/constants/index'; -import { ServerError } from '@/services/axios'; -import queryClient from '@/services/react-query'; -import { deleteResume, DeleteResumeParams, duplicateResume, DuplicateResumeParams } from '@/services/resume'; -import { setSidebarState, toggleSidebar } from '@/store/build/buildSlice'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setModalState } from '@/store/modal/modalSlice'; -import getResumeUrl from '@/utils/getResumeUrl'; -import { cn } from '@/utils/styles'; - -import styles from './Header.module.scss'; - -const Header = () => { - const theme = useTheme(); - - const router = useRouter(); - - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const isDesktop = useMediaQuery(theme.breakpoints.up('lg')); - - const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null); - - const resume = useAppSelector((state) => state.resume.present); - const { left, right } = useAppSelector((state) => state.build.sidebar); - - const { mutateAsync: deleteMutation } = useMutation<void, ServerError, DeleteResumeParams>(deleteResume); - const { mutateAsync: duplicateMutation } = useMutation<Resume, ServerError, DuplicateResumeParams>(duplicateResume); - - const name = useMemo(() => get(resume, 'name'), [resume]); - - useEffect(() => { - if (isDesktop) { - dispatch(setSidebarState({ sidebar: 'left', state: { open: true } })); - dispatch(setSidebarState({ sidebar: 'right', state: { open: true } })); - } else { - dispatch(setSidebarState({ sidebar: 'left', state: { open: false } })); - dispatch(setSidebarState({ sidebar: 'right', state: { open: false } })); - } - }, [isDesktop, dispatch]); - - const toggleLeftSidebar = () => dispatch(toggleSidebar({ sidebar: 'left' })); - - const toggleRightSidebar = () => dispatch(toggleSidebar({ sidebar: 'right' })); - - const goBack = () => router.push('/dashboard'); - - const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => { - setAnchorEl(event.currentTarget); - }; - - const handleClose = () => { - setAnchorEl(null); - }; - - const handleRename = () => { - handleClose(); - - dispatch( - setModalState({ - modal: 'dashboard.rename-resume', - state: { - open: true, - payload: { - item: resume, - onComplete: (newResume: Resume) => { - queryClient.invalidateQueries(RESUMES_QUERY); - - router.push(`/${resume.user.username}/${newResume.slug}/build`); - }, - }, - }, - }), - ); - }; - - const handleDuplicate = async () => { - handleClose(); - - const newResume = await duplicateMutation({ id: resume.id }); - - queryClient.invalidateQueries(RESUMES_QUERY); - - router.push(`/${resume.user.username}/${newResume.slug}/build`); - }; - - const handleDelete = async () => { - handleClose(); - - await deleteMutation({ id: resume.id }); - - queryClient.invalidateQueries(RESUMES_QUERY); - - goBack(); - }; - - const handleShareLink = async () => { - handleClose(); - - const url = getResumeUrl(resume, { withHost: true }); - await navigator.clipboard.writeText(url); - - toast.success(t('common.toast.success.resume-link-copied')); - }; - - return ( - <AppBar elevation={0} position="fixed"> - <Toolbar - variant="regular" - className={cn({ - [styles.header]: true, - [styles.pushLeft]: left.open, - [styles.pushRight]: right.open, - })} - > - <IconButton onClick={toggleLeftSidebar}>{left.open ? <ChevronLeftIcon /> : <ChevronRightIcon />}</IconButton> - - <div className={styles.title}> - <IconButton className="opacity-50 hover:opacity-100" onClick={goBack}> - <HomeIcon /> - </IconButton> - - <span className="opacity-50">{'/'}</span> - - <h1>{name}</h1> - - <IconButton onClick={handleClick}> - <KeyboardArrowDownIcon /> - </IconButton> - - <Menu open={Boolean(anchorEl)} anchorEl={anchorEl} onClose={handleClose}> - <MenuItem onClick={handleRename}> - <ListItemIcon> - <DriveFileRenameOutline className="scale-90" /> - </ListItemIcon> - <ListItemText>{t('builder.header.menu.rename')}</ListItemText> - </MenuItem> - - <MenuItem onClick={handleDuplicate}> - <ListItemIcon> - <CopyAll className="scale-90" /> - </ListItemIcon> - <ListItemText>{t('builder.header.menu.duplicate')}</ListItemText> - </MenuItem> - - {resume.public ? ( - <MenuItem onClick={handleShareLink}> - <ListItemIcon> - <LinkIcon className="scale-90" /> - </ListItemIcon> - <ListItemText>{t('builder.header.menu.share-link')}</ListItemText> - </MenuItem> - ) : ( - <Tooltip arrow placement="right" title={t('builder.header.menu.tooltips.share-link')}> - <div> - <MenuItem> - <ListItemIcon> - <LinkIcon className="scale-90" /> - </ListItemIcon> - <ListItemText>{t('builder.header.menu.share-link')}</ListItemText> - </MenuItem> - </div> - </Tooltip> - )} - - <Tooltip arrow placement="right" title={t('builder.header.menu.tooltips.delete')}> - <MenuItem onClick={handleDelete}> - <ListItemIcon> - <Delete className="scale-90" /> - </ListItemIcon> - <ListItemText>{t('builder.header.menu.delete')}</ListItemText> - </MenuItem> - </Tooltip> - </Menu> - </div> - - <IconButton onClick={toggleRightSidebar}>{right.open ? <ChevronRightIcon /> : <ChevronLeftIcon />}</IconButton> - </Toolbar> - </AppBar> - ); -}; - -export default Header; diff --git a/client/components/build/Center/Page.module.scss b/client/components/build/Center/Page.module.scss deleted file mode 100644 index e8489134..00000000 --- a/client/components/build/Center/Page.module.scss +++ /dev/null @@ -1,43 +0,0 @@ -.container { - @apply flex flex-col items-center gap-2; - @apply rounded-sm; -} - -.page { - width: 210mm; - min-height: 297mm; - - @apply relative z-50 grid shadow; - @apply print:shadow-none; - - :global(.printer-mode) & { - @apply shadow-none; - } - - &.break::after { - content: 'Page Break'; - top: calc(297mm - 19px); - - @apply absolute w-full border-b border-dashed border-zinc-900/75; - @apply flex items-end justify-end pr-2 pb-0.5 text-xs font-bold text-zinc-900/75; - @apply print:hidden; - - :global(.preview-mode) &, - :global(.printer-mode) & { - @apply hidden; - } - } - - &.format-letter { - width: 216mm; - min-height: 279mm; - - &.break::after { - top: calc(279mm - 19px); - } - } -} - -.pageNumber { - @apply text-center font-bold print:hidden; -} diff --git a/client/components/build/Center/Page.tsx b/client/components/build/Center/Page.tsx deleted file mode 100644 index 3d8e3bf9..00000000 --- a/client/components/build/Center/Page.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { css } from '@emotion/css'; -import clsx from 'clsx'; -import get from 'lodash/get'; -import isEmpty from 'lodash/isEmpty'; -import { useTranslation } from 'next-i18next'; -import { useMemo } from 'react'; -import { CustomCSS, PageConfig, ThemeConfig, Typography } from 'schema'; - -import { useAppSelector } from '@/store/hooks'; -import templateMap from '@/templates/templateMap'; -import { generateThemeStyles, generateTypographyStyles } from '@/utils/styles'; -import { PageProps } from '@/utils/template'; - -import styles from './Page.module.scss'; - -type Props = PageProps & { - showPageNumbers?: boolean; -}; - -const Page: React.FC<Props> = ({ page, showPageNumbers = false }) => { - const { t } = useTranslation(); - - const resume = useAppSelector((state) => state.resume.present); - const breakLine: boolean = useAppSelector((state) => state.build.page.breakLine); - - const theme: ThemeConfig = get(resume, 'metadata.theme'); - const customCSS: CustomCSS = get(resume, 'metadata.css'); - const template: string = get(resume, 'metadata.template'); - const typography: Typography = get(resume, 'metadata.typography'); - const pageConfig: PageConfig = get(resume, 'metadata.page', {} as PageConfig); - - const themeCSS = useMemo(() => !isEmpty(theme) && generateThemeStyles(theme), [theme]); - const typographyCSS = useMemo(() => !isEmpty(typography) && generateTypographyStyles(typography), [typography]); - const TemplatePage: React.FC<PageProps> | null = useMemo(() => templateMap[template].component, [template]); - - return ( - <div className={styles.container} data-page={page + 1} data-format={pageConfig?.format || 'A4'}> - <div - className={clsx({ - reset: true, - [styles.page]: true, - [styles.break]: breakLine, - [styles['format-letter']]: pageConfig?.format === 'Letter', - [css(themeCSS)]: true, - [css(typographyCSS)]: true, - [css(customCSS.value)]: customCSS.visible, - })} - > - {TemplatePage && <TemplatePage page={page} />} - </div> - - {showPageNumbers && <h4 className={styles.pageNumber}>{`${t('builder.common.glossary.page')} ${page + 1}`}</h4>} - </div> - ); -}; - -export default Page; diff --git a/client/components/build/LeftSidebar/LeftSidebar.module.scss b/client/components/build/LeftSidebar/LeftSidebar.module.scss deleted file mode 100644 index d335048b..00000000 --- a/client/components/build/LeftSidebar/LeftSidebar.module.scss +++ /dev/null @@ -1,45 +0,0 @@ -.container { - @apply h-screen w-[95vw] md:w-[70vw] lg:w-[50vw] xl:w-[30vw] 2xl:w-[28vw]; - @apply bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100; - @apply relative flex border-r-2 border-zinc-100/10; - - nav { - @apply absolute inset-y-0 left-0; - @apply w-14 py-4 md:w-16 md:px-2; - @apply bg-zinc-100 shadow dark:bg-zinc-900; - @apply flex flex-col items-center justify-between; - - hr { - @apply mt-2; - } - - > div { - @apply grid gap-2; - } - - .sections svg { - @apply opacity-75 transition-opacity hover:opacity-100; - } - } - - main { - @apply overflow-y-scroll p-4; - @apply absolute inset-y-0 left-12 right-0 md:left-16; - - > section { - @apply grid gap-4; - @apply pt-5 pb-7 first:pt-0; - @apply border-b border-zinc-900/10 last:border-b-0 dark:border-zinc-100/10; - - hr { - @apply my-2; - } - } - - -ms-overflow-style: none; - - &::-webkit-scrollbar { - display: none; - } - } -} diff --git a/client/components/build/LeftSidebar/LeftSidebar.tsx b/client/components/build/LeftSidebar/LeftSidebar.tsx deleted file mode 100644 index 47cbdf6b..00000000 --- a/client/components/build/LeftSidebar/LeftSidebar.tsx +++ /dev/null @@ -1,173 +0,0 @@ -import { Add, Star } from '@mui/icons-material'; -import { Button, Divider, IconButton, SwipeableDrawer, Tooltip, useMediaQuery, useTheme } from '@mui/material'; -import cloneDeep from 'lodash/cloneDeep'; -import get from 'lodash/get'; -import Link from 'next/link'; -import { useTranslation } from 'next-i18next'; -import React, { ReactComponentElement, useMemo } from 'react'; -import { Section as SectionRecord } from 'schema'; -import { validate } from 'uuid'; - -import Icon from '@/components/shared/Icon'; -import { getCustomSections, getSectionsByType, left } from '@/config/sections'; -import { setSidebarState } from '@/store/build/buildSlice'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { addSection } from '@/store/resume/resumeSlice'; - -import styles from './LeftSidebar.module.scss'; -import Section from './sections/Section'; - -const LeftSidebar = () => { - const theme = useTheme(); - - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const isDesktop = useMediaQuery(theme.breakpoints.up('lg')); - - const sections = useAppSelector((state) => state.resume.present.sections); - - const { open } = useAppSelector((state) => state.build.sidebar.left); - - const customSections = useMemo(() => getCustomSections(sections), [sections]); - - const handleOpen = () => dispatch(setSidebarState({ sidebar: 'left', state: { open: true } })); - - const handleClose = () => dispatch(setSidebarState({ sidebar: 'left', state: { open: false } })); - - const handleClick = (id: string) => { - const elementId = validate(id) ? `#section-${id}` : `#${id}`; - const section = document.querySelector(elementId); - - if (section) { - section.scrollIntoView({ behavior: 'smooth', block: 'start' }); - } - }; - - const handleAddSection = () => { - const newSection: SectionRecord = { - name: 'Custom Section', - type: 'custom', - visible: true, - columns: 2, - items: [], - }; - - dispatch(addSection({ value: newSection, type: 'custom' })); - }; - - const sectionsList = () => { - const sectionsComponents: Array<ReactComponentElement<any>> = []; - - for (const item of left) { - const id = (item as any).id; - const component = (item as any).component; - const type = component.props.type; - const addMore = !!component.props.addMore; - - sectionsComponents.push( - <section key={id} id={id}> - {component} - </section>, - ); - - if (addMore) { - const additionalSections = getSectionsByType(sections, type); - const elements = []; - for (const element of additionalSections) { - const newId = element.id; - - const props = cloneDeep(component.props); - props.path = 'sections.' + newId; - props.name = element.name; - props.isDeletable = true; - props.addMore = false; - props.isDuplicated = true; - const newComponent = React.cloneElement(component, props); - - elements.push( - <section key={newId} id={`section-${newId}`}> - {newComponent} - </section>, - ); - } - sectionsComponents.push(...elements); - } - } - - return sectionsComponents; - }; - - return ( - <SwipeableDrawer - open={open} - anchor="left" - onOpen={handleOpen} - onClose={handleClose} - PaperProps={{ className: '!shadow-lg' }} - variant={isDesktop ? 'persistent' : 'temporary'} - > - <div className={styles.container}> - <nav className="overflow-y-auto"> - <div> - <Link href="/dashboard"> - <IconButton> - <Icon size={24} /> - </IconButton> - </Link> - <Divider /> - </div> - - <div className={styles.sections}> - {left.map(({ id, icon }) => ( - <Tooltip - arrow - key={id} - placement="right" - title={t(`builder.leftSidebar.sections.${id}.heading`, get(sections, `${id}.name`))} - > - <IconButton onClick={() => handleClick(id)}>{icon}</IconButton> - </Tooltip> - ))} - - {customSections.map(({ id }) => ( - <Tooltip - key={id} - title={t(`builder.leftSidebar.sections.${id}.heading`, get(sections, `${id}.name`))} - placement="right" - arrow - > - <IconButton onClick={() => id && handleClick(id)}> - <Star /> - </IconButton> - </Tooltip> - ))} - </div> - - <div /> - </nav> - - <main> - {sectionsList()} - - {customSections.map(({ id }) => ( - <section key={id} id={`section-${id}`}> - <Section path={`sections.${id}`} type="custom" isEditable isHideable isDeletable /> - </section> - ))} - - <div className="py-6 text-right"> - <Button fullWidth variant="outlined" startIcon={<Add />} onClick={handleAddSection}> - {t('builder.common.actions.add', { - token: t('builder.leftSidebar.sections.section.heading'), - })} - </Button> - </div> - </main> - </div> - </SwipeableDrawer> - ); -}; - -export default LeftSidebar; diff --git a/client/components/build/LeftSidebar/sections/Basics.tsx b/client/components/build/LeftSidebar/sections/Basics.tsx deleted file mode 100644 index 1f276619..00000000 --- a/client/components/build/LeftSidebar/sections/Basics.tsx +++ /dev/null @@ -1,89 +0,0 @@ -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="grid items-center gap-4 sm:col-span-2 sm:grid-cols-3"> - <div className="mx-auto"> - <PhotoUpload /> - </div> - - <div className="grid w-full gap-2 sm:col-span-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 - type="date" - label={t('builder.leftSidebar.sections.basics.birthdate.label')} - path="basics.birthdate" - className="sm:col-span-2" - /> - <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; diff --git a/client/components/build/LeftSidebar/sections/Location.tsx b/client/components/build/LeftSidebar/sections/Location.tsx deleted file mode 100644 index cced13d8..00000000 --- a/client/components/build/LeftSidebar/sections/Location.tsx +++ /dev/null @@ -1,31 +0,0 @@ -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; diff --git a/client/components/build/LeftSidebar/sections/PhotoFilters.tsx b/client/components/build/LeftSidebar/sections/PhotoFilters.tsx deleted file mode 100644 index e2abac02..00000000 --- a/client/components/build/LeftSidebar/sections/PhotoFilters.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import { Circle, Square, SquareRounded } from '@mui/icons-material'; -import { Checkbox, Divider, FormControlLabel, Slider, ToggleButton, ToggleButtonGroup } from '@mui/material'; -import get from 'lodash/get'; -import { useTranslation } from 'next-i18next'; -import { Photo, PhotoShape } from 'schema'; - -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.present, '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-zinc-900"> - <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('builder.leftSidebar.sections.basics.photo-filters.effects.grayscale.label')} - control={ - <Checkbox color="secondary" checked={grayscale} onChange={(_, value) => handleSetGrayscale(value)} /> - } - /> - - <FormControlLabel - label={t('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; diff --git a/client/components/build/LeftSidebar/sections/PhotoUpload.tsx b/client/components/build/LeftSidebar/sections/PhotoUpload.tsx deleted file mode 100644 index f7710742..00000000 --- a/client/components/build/LeftSidebar/sections/PhotoUpload.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import { Avatar, IconButton, Skeleton, Tooltip } from '@mui/material'; -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 { Photo, Resume } from 'schema'; - -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.present, 'id')); - const photo: Photo = useAppSelector((state) => get(state.resume.present, '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('builder.leftSidebar.sections.basics.photo-upload.tooltip.upload') as string) - : (t('builder.leftSidebar.sections.basics.photo-upload.tooltip.remove') as string) - } - > - <Avatar sx={{ width: 96, height: 96 }} src={photo.url} /> - </Tooltip> - )} - - <input hidden type="file" ref={fileInputRef} onChange={handleChange} accept="image/*" /> - </IconButton> - ); -}; - -export default PhotoUpload; diff --git a/client/components/build/LeftSidebar/sections/Profiles.tsx b/client/components/build/LeftSidebar/sections/Profiles.tsx deleted file mode 100644 index 770e1657..00000000 --- a/client/components/build/LeftSidebar/sections/Profiles.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { Add } from '@mui/icons-material'; -import { Button } from '@mui/material'; -import { useTranslation } from 'next-i18next'; -import { ListItem } from 'schema'; - -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', { - token: t('builder.leftSidebar.sections.profiles.heading', { count: 1 }), - })} - </Button> - </footer> - </> - ); -}; - -export default Profiles; diff --git a/client/components/build/LeftSidebar/sections/Section.tsx b/client/components/build/LeftSidebar/sections/Section.tsx deleted file mode 100644 index baba6507..00000000 --- a/client/components/build/LeftSidebar/sections/Section.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import { Add } from '@mui/icons-material'; -import { Button } from '@mui/material'; -import clsx from 'clsx'; -import get from 'lodash/get'; -import { useTranslation } from 'next-i18next'; -import { ListItem, Section as SectionRecord, SectionType } from 'schema'; -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, duplicateSection } from '@/store/resume/resumeSlice'; - -import SectionSettings from './SectionSettings'; - -type Props = { - path: `sections.${string}`; - type?: SectionType; - name?: string; - titleKey?: string; - subtitleKey?: string; - isEditable?: boolean; - isHideable?: boolean; - isDeletable?: boolean; - addMore?: boolean; - isDuplicated?: boolean; -}; - -const Section: React.FC<Props> = ({ - path, - name = 'Section Name', - type = 'basic', - titleKey = 'title', - subtitleKey = 'subtitle', - isEditable = false, - isHideable = false, - isDeletable = false, - addMore = false, - isDuplicated = false, -}) => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const heading = useAppSelector<string>((state) => get(state.resume.present, `${path}.name`, name)); - const visibility = useAppSelector<boolean>((state) => get(state.resume.present, `${path}.visible`, true)); - - const handleAdd = () => { - const modal: ModalName = `builder.sections.${type}`; - - dispatch(setModalState({ modal, state: { open: true, payload: { path } } })); - }; - - const handleEdit = (item: ListItem) => { - const id = path.split('.')[1]; - let modal: ModalName = validate(id) ? 'builder.sections.custom' : `builder.${path}`; - - const payload = validate(id) ? { path, item } : { item }; - - if (isDuplicated) { - modal = `builder.sections.${type}`; - payload.path = path; - } - - dispatch(setModalState({ modal, state: { open: true, payload } })); - }; - - const handleDuplicate = (item: ListItem) => dispatch(duplicateItem({ path: `${path}.items`, value: item })); - - const handleDuplicateSection = () => { - const newSection: SectionRecord = { - name: `${heading}`, - type: type, - visible: true, - columns: 2, - items: [], - isDuplicated: true, - }; - - dispatch(duplicateSection({ value: newSection, type })); - }; - - 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: t(`builder.leftSidebar.${path}.heading`, { defaultValue: heading }), - })} - </Button> - </footer> - - {addMore ? ( - <div className="py-6 text-right"> - <Button fullWidth variant="outlined" startIcon={<Add />} onClick={handleDuplicateSection}> - {t('builder.common.actions.duplicate')} - </Button> - </div> - ) : ( - <></> - )} - </> - ); -}; - -export default Section; diff --git a/client/components/build/LeftSidebar/sections/SectionSettings.tsx b/client/components/build/LeftSidebar/sections/SectionSettings.tsx deleted file mode 100644 index a41bea57..00000000 --- a/client/components/build/LeftSidebar/sections/SectionSettings.tsx +++ /dev/null @@ -1,66 +0,0 @@ -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.present, `${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('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-zinc-900"> - <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; diff --git a/client/components/build/RightSidebar/RightSidebar.module.scss b/client/components/build/RightSidebar/RightSidebar.module.scss deleted file mode 100644 index cc53fb82..00000000 --- a/client/components/build/RightSidebar/RightSidebar.module.scss +++ /dev/null @@ -1,50 +0,0 @@ -.container { - @apply h-screen w-[95vw] md:w-[70vw] lg:w-[50vw] xl:w-[30vw] 2xl:w-[28vw]; - @apply bg-zinc-50 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-50; - @apply relative flex border-l-2 border-zinc-50/10; - - nav { - @apply absolute inset-y-0 right-0; - @apply w-12 py-4 md:w-16 md:px-2; - @apply bg-zinc-100 shadow dark:bg-zinc-900; - @apply flex flex-col items-center justify-between; - - hr { - @apply mt-2; - } - - > div { - @apply grid gap-2; - } - - .sections svg { - @apply opacity-75 transition-opacity hover:opacity-100; - } - } - - main { - @apply overflow-y-scroll p-4; - @apply absolute inset-y-0 right-12 left-0 md:right-16; - - > section { - @apply grid gap-4; - @apply pt-5 pb-7 first:pt-0; - @apply border-b border-zinc-900/10 last:border-b-0 dark:border-zinc-50/10; - - hr { - @apply my-2; - } - } - - -ms-overflow-style: none; - - &::-webkit-scrollbar { - display: none; - } - } - - .footer { - @apply flex flex-col items-center justify-center gap-3 py-4; - @apply text-center text-xs leading-normal opacity-40; - } -} diff --git a/client/components/build/RightSidebar/RightSidebar.tsx b/client/components/build/RightSidebar/RightSidebar.tsx deleted file mode 100644 index 9c637015..00000000 --- a/client/components/build/RightSidebar/RightSidebar.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { Divider, IconButton, SwipeableDrawer, Tooltip, useMediaQuery, useTheme } from '@mui/material'; -import capitalize from 'lodash/capitalize'; -import { useTranslation } from 'next-i18next'; - -import Avatar from '@/components/shared/Avatar'; -import Footer from '@/components/shared/Footer'; -import { right } from '@/config/sections'; -import { setSidebarState } from '@/store/build/buildSlice'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; - -import styles from './RightSidebar.module.scss'; - -const RightSidebar = () => { - const theme = useTheme(); - - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const isDesktop = useMediaQuery(theme.breakpoints.up('lg')); - - const { open } = useAppSelector((state) => state.build.sidebar.right); - - const handleOpen = () => dispatch(setSidebarState({ sidebar: 'right', state: { open: true } })); - - const handleClose = () => dispatch(setSidebarState({ sidebar: 'right', state: { open: false } })); - - const handleClick = (id: string) => { - const section = document.querySelector(`#${id}`); - - if (section) { - section.scrollIntoView({ behavior: 'smooth', block: 'start' }); - } - }; - - return ( - <SwipeableDrawer - open={open} - anchor="right" - onOpen={handleOpen} - onClose={handleClose} - PaperProps={{ className: '!shadow-lg' }} - variant={isDesktop ? 'persistent' : 'temporary'} - > - <div className={styles.container}> - <nav className="overflow-y-auto"> - <div> - <Avatar size={24} /> - <Divider /> - </div> - - <div className={styles.sections}> - {right.map(({ id, icon }) => ( - <Tooltip - key={id} - arrow - placement="right" - title={t(`builder.rightSidebar.sections.${id}.heading`, { defaultValue: capitalize(id) })} - > - <IconButton onClick={() => handleClick(id)}>{icon}</IconButton> - </Tooltip> - ))} - </div> - - <div /> - </nav> - - <main> - {right.map(({ id, component }) => ( - <section key={id} id={id}> - {component} - </section> - ))} - - <footer className={styles.footer}> - <Footer /> - - <div>v{process.env.appVersion}</div> - </footer> - </main> - </div> - </SwipeableDrawer> - ); -}; - -export default RightSidebar; diff --git a/client/components/build/RightSidebar/sections/CustomCSS.tsx b/client/components/build/RightSidebar/sections/CustomCSS.tsx deleted file mode 100644 index 875b901f..00000000 --- a/client/components/build/RightSidebar/sections/CustomCSS.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import Editor from '@monaco-editor/react'; -import { useTheme } from '@mui/material'; -import clsx from 'clsx'; -import get from 'lodash/get'; -import { useTranslation } from 'next-i18next'; -import React from 'react'; -import { CustomCSS as CustomCSSType } from 'schema'; - -import Heading from '@/components/shared/Heading'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setResumeState } from '@/store/resume/resumeSlice'; - -const CustomCSS = () => { - const theme = useTheme(); - - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const customCSS: CustomCSSType = useAppSelector((state) => - get(state.resume.present, 'metadata.css', {} as CustomCSSType), - ); - - const handleChange = (value: string | undefined) => { - dispatch(setResumeState({ path: 'metadata.css.value', value })); - }; - - return ( - <> - <Heading path="metadata.css" name={t('builder.rightSidebar.sections.css.heading')} isHideable /> - - <Editor - height="200px" - language="css" - value={customCSS.value} - onChange={handleChange} - className={clsx({ 'opacity-50': !customCSS.visible })} - theme={theme.palette.mode === 'dark' ? 'vs-dark' : 'light'} - options={{ - minimap: { enabled: false }, - overviewRulerLanes: 0, - scrollBeyondLastColumn: 5, - overviewRulerBorder: false, - scrollBeyondLastLine: true, - }} - /> - </> - ); -}; - -export default CustomCSS; diff --git a/client/components/build/RightSidebar/sections/Export.tsx b/client/components/build/RightSidebar/sections/Export.tsx deleted file mode 100644 index 057913a3..00000000 --- a/client/components/build/RightSidebar/sections/Export.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { PictureAsPdf, Schema } from '@mui/icons-material'; -import { List, ListItem, ListItemButton, ListItemText } from '@mui/material'; -import dayjs from 'dayjs'; -import get from 'lodash/get'; -import pick from 'lodash/pick'; -import { useTranslation } from 'next-i18next'; -import { useMutation } from 'react-query'; - -import Heading from '@/components/shared/Heading'; -import { ServerError } from '@/services/axios'; -import { printResumeAsPdf, PrintResumeAsPdfParams } from '@/services/printer'; -import { useAppSelector } from '@/store/hooks'; - -const Export = () => { - const { t } = useTranslation(); - - const resume = useAppSelector((state) => state.resume.present); - - const { mutateAsync, isLoading } = useMutation<string, ServerError, PrintResumeAsPdfParams>(printResumeAsPdf); - - const pdfListItemText = { - normal: { - primary: t('builder.rightSidebar.sections.export.pdf.normal.primary'), - secondary: t('builder.rightSidebar.sections.export.pdf.normal.secondary'), - }, - loading: { - primary: t('builder.rightSidebar.sections.export.pdf.loading.primary'), - secondary: t('builder.rightSidebar.sections.export.pdf.loading.secondary'), - }, - }; - - const handleExportJSON = async () => { - const nanoid = (await import('nanoid')).nanoid; - const download = (await import('downloadjs')).default; - - const redactedResume = pick(resume, ['basics', 'sections', 'metadata', 'public']); - const jsonString = JSON.stringify(redactedResume, null, 4); - const jsonBlob = new Blob([jsonString], { type: 'application/json;charset=utf-8' }); - const filename = `RxResume_JSONExport_${nanoid()}.json`; - - download(jsonBlob, filename); - }; - - const handleExportPDF = async () => { - const download = (await import('downloadjs')).default; - - const slug = get(resume, 'slug'); - const username = get(resume, 'user.username'); - const updatedAt = get(resume, 'updatedAt'); - - const url = await mutateAsync({ username, slug, lastUpdated: dayjs(updatedAt).unix().toString() }); - - download(url); - }; - - return ( - <> - <Heading path="metadata.export" name={t('builder.rightSidebar.sections.export.heading')} /> - - <List sx={{ padding: 0 }}> - <ListItem sx={{ padding: 0 }}> - <ListItemButton className="gap-6" onClick={handleExportJSON}> - <Schema /> - - <ListItemText - primary={t('builder.rightSidebar.sections.export.json.primary')} - secondary={t('builder.rightSidebar.sections.export.json.secondary')} - /> - </ListItemButton> - </ListItem> - - <ListItem sx={{ padding: 0 }}> - <ListItemButton className="gap-6" onClick={handleExportPDF} disabled={isLoading}> - <PictureAsPdf /> - - <ListItemText {...(isLoading ? pdfListItemText.loading : pdfListItemText.normal)} /> - </ListItemButton> - </ListItem> - </List> - </> - ); -}; - -export default Export; diff --git a/client/components/build/RightSidebar/sections/Layout.module.scss b/client/components/build/RightSidebar/sections/Layout.module.scss deleted file mode 100644 index 333de3fd..00000000 --- a/client/components/build/RightSidebar/sections/Layout.module.scss +++ /dev/null @@ -1,43 +0,0 @@ -.page { - @apply relative border pl-4 pb-4 dark:border-zinc-100/10; - @apply rounded bg-zinc-100 dark:bg-zinc-900; - - .delete { - @apply opacity-50 hover:opacity-75; - @apply rotate-0 hover:rotate-90; - @apply transition-[opacity,transform]; - } - - .container { - @apply grid grid-cols-2 gap-2; - } - - .heading { - @apply relative z-10 my-3; - @apply text-xs font-semibold; - } -} - -.column { - @apply relative w-full px-4; - - .heading { - @apply relative z-10 my-3; - @apply text-xs font-semibold; - } - - .base { - @apply absolute inset-0 w-4/5; - @apply rounded bg-zinc-200 dark:bg-zinc-800; - } -} - -.section { - @apply relative my-3 w-full px-4 py-2; - @apply cursor-move break-all rounded text-xs capitalize; - @apply bg-zinc-900/90 text-zinc-50 dark:bg-zinc-50/90 dark:text-zinc-900; - - &.disabled { - @apply opacity-60; - } -} diff --git a/client/components/build/RightSidebar/sections/Layout.tsx b/client/components/build/RightSidebar/sections/Layout.tsx deleted file mode 100644 index b3a122ef..00000000 --- a/client/components/build/RightSidebar/sections/Layout.tsx +++ /dev/null @@ -1,147 +0,0 @@ -import { DragDropContext, Draggable, DraggableLocation, Droppable, DropResult } from '@hello-pangea/dnd'; -import { Add, Close, Restore } from '@mui/icons-material'; -import { Button, IconButton, Tooltip } from '@mui/material'; -import clsx from 'clsx'; -import cloneDeep from 'lodash/cloneDeep'; -import get from 'lodash/get'; -import { useTranslation } from 'next-i18next'; - -import Heading from '@/components/shared/Heading'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { addPage, deletePage, setResumeState } from '@/store/resume/resumeSlice'; - -import styles from './Layout.module.scss'; - -const getIndices = (location: DraggableLocation) => ({ - page: +location.droppableId.split('.')[0], - column: +location.droppableId.split('.')[1], - section: +location.index, -}); - -const Layout = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const layout = useAppSelector((state) => state.resume.present.metadata.layout); - const resumeSections = useAppSelector((state) => state.resume.present.sections); - - const onDragEnd = (dropResult: DropResult) => { - const { source: srcLoc, destination: destLoc } = dropResult; - - if (!destLoc) return; - - const newLayout = cloneDeep(layout); - - const srcIndex = getIndices(srcLoc); - const destIndex = getIndices(destLoc); - const section = layout[srcIndex.page][srcIndex.column][srcIndex.section]; - - // Remove item at source - newLayout[srcIndex.page][srcIndex.column].splice(srcIndex.section, 1); - - // Insert item at destination - newLayout[destIndex.page][destIndex.column].splice(destIndex.section, 0, section); - - dispatch(setResumeState({ path: 'metadata.layout', value: newLayout })); - }; - - const handleAddPage = () => dispatch(addPage()); - - const handleDeletePage = (page: number) => dispatch(deletePage({ page })); - - const handleResetLayout = () => { - for (let i = layout.length - 1; i > 0; i--) { - handleDeletePage(i); - } - }; - - return ( - <> - <Heading - path="metadata.layout" - name={t('builder.rightSidebar.sections.layout.heading')} - action={ - <Tooltip title={t('builder.rightSidebar.sections.layout.tooltip.reset-layout')}> - <IconButton onClick={handleResetLayout}> - <Restore /> - </IconButton> - </Tooltip> - } - /> - - <DragDropContext onDragEnd={onDragEnd}> - {/* Pages */} - {layout.map((columns, pageIndex) => ( - <div key={pageIndex} className={styles.page}> - <div className="flex items-center justify-between pr-3"> - <p className={styles.heading}> - {t('builder.common.glossary.page')} {pageIndex + 1} - </p> - - <div className={clsx(styles.delete, { hidden: pageIndex === 0 })}> - <Tooltip - title={ - t('builder.common.actions.delete', { - token: t('builder.common.glossary.page'), - }) as string - } - > - <IconButton size="small" onClick={() => handleDeletePage(pageIndex)}> - <Close fontSize="small" /> - </IconButton> - </Tooltip> - </div> - </div> - - <div className={styles.container}> - {/* Sections */} - {columns.map((sections, columnIndex) => { - const index = `${pageIndex}.${columnIndex}`; - - return ( - <Droppable key={index} droppableId={index}> - {(provided) => ( - <div ref={provided.innerRef} className={styles.column} {...provided.droppableProps}> - <p className={styles.heading}>{columnIndex ? 'Sidebar' : 'Main'}</p> - - <div className={styles.base} /> - - {/* Sections */} - {sections.map((sectionId, sectionIndex) => ( - <Draggable key={sectionId} draggableId={sectionId} index={sectionIndex}> - {(provided) => ( - <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}> - <div - className={clsx(styles.section, { - [styles.disabled]: !get(resumeSections, `${sectionId}.visible`, true), - })} - > - {get(resumeSections, `${sectionId}.name`, '') as string} - </div> - </div> - )} - </Draggable> - ))} - - {provided.placeholder} - </div> - )} - </Droppable> - ); - })} - </div> - </div> - ))} - - <div className="flex items-center justify-end"> - <Button variant="outlined" startIcon={<Add />} onClick={handleAddPage}> - {t('builder.common.actions.add', { token: t('builder.common.glossary.page') })} - </Button> - </div> - </DragDropContext> - </> - ); -}; - -export default Layout; diff --git a/client/components/build/RightSidebar/sections/Links.module.scss b/client/components/build/RightSidebar/sections/Links.module.scss deleted file mode 100644 index 975e9fe2..00000000 --- a/client/components/build/RightSidebar/sections/Links.module.scss +++ /dev/null @@ -1,20 +0,0 @@ -.container { - @apply grid gap-4; - - .section { - @apply grid gap-2 rounded p-6; - @apply bg-zinc-100 dark:bg-zinc-900; - - h2 { - @apply inline-flex items-center gap-2 text-base font-medium; - } - - p { - @apply mb-3 text-xs leading-loose; - } - } - - a { - @apply hover:no-underline; - } -} diff --git a/client/components/build/RightSidebar/sections/Links.tsx b/client/components/build/RightSidebar/sections/Links.tsx deleted file mode 100644 index 3688b814..00000000 --- a/client/components/build/RightSidebar/sections/Links.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { BugReport, Coffee, GitHub, Link, Savings } from '@mui/icons-material'; -import { Button } from '@mui/material'; -import { useTranslation } from 'next-i18next'; - -import Heading from '@/components/shared/Heading'; -import { DOCS_URL, DONATION_URL, GITHUB_ISSUES_URL, GITHUB_URL, REDDIT_URL } from '@/constants/index'; - -import styles from './Links.module.scss'; - -const Links = () => { - const { t } = useTranslation(); - - return ( - <> - <Heading path="metadata.links" name={t('builder.rightSidebar.sections.links.heading')} /> - - <div className={styles.container}> - <div className={styles.section}> - <h2> - <Savings fontSize="small" /> - {t('builder.rightSidebar.sections.links.donate.heading')} - </h2> - - <p>{t('builder.rightSidebar.sections.links.donate.body')}</p> - - <a href={DONATION_URL} target="_blank" rel="noreferrer"> - <Button startIcon={<Coffee />}>{t('builder.rightSidebar.sections.links.donate.button')}</Button> - </a> - </div> - - <div className={styles.section}> - <h2> - <BugReport fontSize="small" /> - {t('builder.rightSidebar.sections.links.bugs-features.heading')} - </h2> - - <p>{t('builder.rightSidebar.sections.links.bugs-features.body')}</p> - - <a href={GITHUB_ISSUES_URL} target="_blank" rel="noreferrer"> - <Button startIcon={<GitHub />}>{t('builder.rightSidebar.sections.links.bugs-features.button')}</Button> - </a> - </div> - - <div> - <a href={GITHUB_URL} target="_blank" rel="noreferrer"> - <Button variant="text" startIcon={<Link />}> - {t('builder.rightSidebar.sections.links.github')} - </Button> - </a> - - <a href={REDDIT_URL} target="_blank" rel="noreferrer"> - <Button variant="text" startIcon={<Link />}> - {t('builder.rightSidebar.sections.links.reddit')} - </Button> - </a> - - <a href={DOCS_URL} target="_blank" rel="noreferrer"> - <Button variant="text" startIcon={<Link />}> - {t('builder.rightSidebar.sections.links.docs')} - </Button> - </a> - </div> - </div> - </> - ); -}; - -export default Links; diff --git a/client/components/build/RightSidebar/sections/Settings.tsx b/client/components/build/RightSidebar/sections/Settings.tsx deleted file mode 100644 index 11d9b3f0..00000000 --- a/client/components/build/RightSidebar/sections/Settings.tsx +++ /dev/null @@ -1,246 +0,0 @@ -import { Anchor, DeleteForever, Palette } from '@mui/icons-material'; -import { - Autocomplete, - List, - ListItem, - ListItemButton, - ListItemIcon, - ListItemText, - ListSubheader, - Switch, - TextField, -} from '@mui/material'; -import dayjs from 'dayjs'; -import get from 'lodash/get'; -import { useRouter } from 'next/router'; -import { useTranslation } from 'next-i18next'; -import { useMemo, useState } from 'react'; -import { useMutation } from 'react-query'; -import { DateConfig, PageConfig, Resume } from 'schema'; - -import Heading from '@/components/shared/Heading'; -import ThemeSwitch from '@/components/shared/ThemeSwitch'; -import { Language, languageMap, languages } from '@/config/languages'; -import { ServerError } from '@/services/axios'; -import queryClient from '@/services/react-query'; -import { loadSampleData, LoadSampleDataParams, resetResume, ResetResumeParams } from '@/services/resume'; -import { setTheme, togglePageBreakLine, togglePageOrientation } from '@/store/build/buildSlice'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setResumeState } from '@/store/resume/resumeSlice'; -import { dateFormatOptions } from '@/utils/date'; - -const Settings = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const { locale, ...router } = useRouter(); - - const [confirmReset, setConfirmReset] = useState(false); - - const resume = useAppSelector((state) => state.resume.present); - const theme = useAppSelector((state) => state.build.theme); - const pages = useAppSelector((state) => state.resume.present.metadata.layout); - const breakLine = useAppSelector((state) => state.build.page.breakLine); - const orientation = useAppSelector((state) => state.build.page.orientation); - - const id: number = useMemo(() => get(resume, 'id'), [resume]); - const slug: string = useMemo(() => get(resume, 'slug'), [resume]); - const username: string = useMemo(() => get(resume, 'user.username'), [resume]); - const dateConfig: DateConfig = useMemo(() => get(resume, 'metadata.date'), [resume]); - const pageConfig: PageConfig | undefined = useMemo(() => get(resume, 'metadata.page'), [resume]); - - const isDarkMode = useMemo(() => theme === 'dark', [theme]); - const exampleDateString = useMemo(() => `Eg. ${dayjs().format(dateConfig.format)}`, [dateConfig.format]); - const themeString = useMemo(() => (isDarkMode ? 'Matte Black Everything' : 'As bright as your future'), [isDarkMode]); - - const { mutateAsync: loadSampleDataMutation } = useMutation<Resume, ServerError, LoadSampleDataParams>( - loadSampleData, - ); - const { mutateAsync: resetResumeMutation } = useMutation<Resume, ServerError, ResetResumeParams>(resetResume); - - const handleSetTheme = (value: boolean) => dispatch(setTheme({ theme: value ? 'dark' : 'light' })); - - const handleChangePageFormat = (value: PageConfig['format'] | null) => - dispatch(setResumeState({ path: 'metadata.page.format', value })); - - const handleChangeDateFormat = (value: string | null) => - dispatch(setResumeState({ path: 'metadata.date.format', value })); - - const handleChangeLanguage = (value: Language | null) => { - const { pathname, asPath, query, push } = router; - const code = value?.code || 'en'; - - document.cookie = `NEXT_LOCALE=${code}; path=/; expires=2147483647`; - dispatch(setResumeState({ path: 'metadata.locale', value: code })); - - push({ pathname, query }, asPath, { locale: code }); - }; - - const handleLoadSampleData = async () => { - await loadSampleDataMutation({ id }); - - queryClient.invalidateQueries(`resume/${username}/${slug}`); - }; - - const handleResetResume = async () => { - if (!confirmReset) { - return setConfirmReset(true); - } - - await resetResumeMutation({ id }); - await queryClient.invalidateQueries(`resume/${username}/${slug}`); - - setConfirmReset(false); - }; - - return ( - <> - <Heading path="metadata.settings" name={t('builder.rightSidebar.sections.settings.heading')} /> - - <List disablePadding> - {/* Global Settings */} - <> - <ListSubheader disableSticky className="rounded"> - {t('builder.rightSidebar.sections.settings.global.heading')} - </ListSubheader> - - <ListItem> - <ListItemIcon> - <Palette /> - </ListItemIcon> - <ListItemText - primary={t('builder.rightSidebar.sections.settings.global.theme.primary')} - secondary={themeString} - /> - <ThemeSwitch checked={isDarkMode} onChange={(_, value: boolean) => handleSetTheme(value)} /> - </ListItem> - - <ListItem className="flex-col"> - <ListItemText - className="w-full" - primary={t('builder.rightSidebar.sections.settings.global.date.primary')} - secondary={t('builder.rightSidebar.sections.settings.global.date.secondary')} - /> - <Autocomplete<string, false, true, false> - disableClearable - className="my-2 w-full" - options={dateFormatOptions} - value={dateConfig.format} - onChange={(_, value) => handleChangeDateFormat(value)} - renderInput={(params) => <TextField {...params} helperText={exampleDateString} />} - /> - </ListItem> - - <ListItem className="flex-col"> - <ListItemText - className="w-full" - primary={t('builder.rightSidebar.sections.settings.global.language.primary')} - secondary={t('builder.rightSidebar.sections.settings.global.language.secondary')} - /> - <Autocomplete<Language, false, true, false> - disableClearable - className="my-2 w-full" - options={languages} - value={languageMap[locale ?? 'en']} - isOptionEqualToValue={(a, b) => a.code === b.code} - onChange={(_, value) => handleChangeLanguage(value)} - renderInput={(params) => <TextField {...params} />} - getOptionLabel={(language) => { - if (language.localName) { - return `${language.name} (${language.localName})`; - } - - return language.name; - }} - /> - </ListItem> - </> - - {/* Page Settings */} - <> - <ListSubheader disableSticky className="rounded"> - {t('builder.rightSidebar.sections.settings.page.heading')} - </ListSubheader> - - <ListItem className="flex-col"> - <ListItemText - className="w-full" - primary={t('builder.rightSidebar.sections.settings.page.format.primary')} - secondary={t('builder.rightSidebar.sections.settings.page.format.secondary')} - /> - <Autocomplete<PageConfig['format'], false, true, false> - disableClearable - defaultValue="A4" - className="my-2 w-full" - options={['A4', 'Letter']} - value={pageConfig?.format || 'A4'} - renderInput={(params) => <TextField {...params} />} - onChange={(_, value) => handleChangePageFormat(value)} - /> - </ListItem> - - <ListItem> - <ListItemText - primary={t('builder.rightSidebar.sections.settings.page.orientation.primary')} - secondary={ - pages.length === 1 - ? t('builder.rightSidebar.sections.settings.page.orientation.disabled') - : t('builder.rightSidebar.sections.settings.page.orientation.secondary') - } - /> - <Switch - color="secondary" - disabled={pages.length === 1} - checked={orientation === 'horizontal'} - onChange={() => dispatch(togglePageOrientation())} - /> - </ListItem> - - <ListItem> - <ListItemText - primary={t('builder.rightSidebar.sections.settings.page.break-line.primary')} - secondary={t('builder.rightSidebar.sections.settings.page.break-line.secondary')} - /> - <Switch color="secondary" checked={breakLine} onChange={() => dispatch(togglePageBreakLine())} /> - </ListItem> - </> - - {/* Resume Settings */} - <> - <ListSubheader disableSticky className="rounded"> - {t('builder.rightSidebar.sections.settings.resume.heading')} - </ListSubheader> - - <ListItem disableGutters> - <ListItemButton onClick={handleLoadSampleData}> - <ListItemIcon> - <Anchor /> - </ListItemIcon> - <ListItemText - primary={t('builder.rightSidebar.sections.settings.resume.sample.primary')} - secondary={t('builder.rightSidebar.sections.settings.resume.sample.secondary')} - /> - </ListItemButton> - </ListItem> - - <ListItem disableGutters> - <ListItemButton onClick={handleResetResume}> - <ListItemIcon> - <DeleteForever /> - </ListItemIcon> - <ListItemText - primary={ - confirmReset ? 'Are you sure?' : t('builder.rightSidebar.sections.settings.resume.reset.primary') - } - secondary={t('builder.rightSidebar.sections.settings.resume.reset.secondary')} - /> - </ListItemButton> - </ListItem> - </> - </List> - </> - ); -}; - -export default Settings; diff --git a/client/components/build/RightSidebar/sections/Sharing.tsx b/client/components/build/RightSidebar/sections/Sharing.tsx deleted file mode 100644 index c7683efb..00000000 --- a/client/components/build/RightSidebar/sections/Sharing.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { CopyAll } from '@mui/icons-material'; -import { Checkbox, FormControlLabel, IconButton, List, ListItem, ListItemText, Switch, TextField } from '@mui/material'; -import get from 'lodash/get'; -import { useTranslation } from 'next-i18next'; -import { useMemo, useState } from 'react'; -import toast from 'react-hot-toast'; - -import Heading from '@/components/shared/Heading'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setResumeState } from '@/store/resume/resumeSlice'; -import getResumeUrl from '@/utils/getResumeUrl'; - -const Sharing = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const [showShortUrl, setShowShortUrl] = useState(false); - - const resume = useAppSelector((state) => state.resume.present); - const isPublic = useMemo(() => get(resume, 'public'), [resume]); - const url = useMemo(() => getResumeUrl(resume, { withHost: true }), [resume]); - const shortUrl = useMemo(() => getResumeUrl(resume, { withHost: true, shortUrl: true }), [resume]); - - const handleSetVisibility = (value: boolean) => dispatch(setResumeState({ path: 'public', value })); - - const handleCopyToClipboard = async () => { - const text = showShortUrl ? shortUrl : url; - - await navigator.clipboard.writeText(text); - - toast.success(t('common.toast.success.resume-link-copied')); - }; - - return ( - <> - <Heading path="metadata.sharing" name={t('builder.rightSidebar.sections.sharing.heading')} /> - - <List sx={{ padding: 0 }}> - <ListItem className="flex flex-col" sx={{ padding: 0 }}> - <div className="flex w-full items-center justify-between"> - <ListItemText - primary={t('builder.rightSidebar.sections.sharing.visibility.title')} - secondary={t('builder.rightSidebar.sections.sharing.visibility.subtitle')} - /> - <Switch color="secondary" checked={isPublic} onChange={(_, value) => handleSetVisibility(value)} /> - </div> - - <div className="mt-2 w-full"> - <TextField - disabled - fullWidth - value={showShortUrl ? shortUrl : url} - InputProps={{ - endAdornment: ( - <IconButton onClick={handleCopyToClipboard}> - <CopyAll /> - </IconButton> - ), - }} - /> - </div> - - <div className="mt-1 flex w-full"> - <FormControlLabel - label={t('builder.rightSidebar.sections.sharing.short-url.label')} - control={ - <Checkbox className="mr-1" checked={showShortUrl} onChange={(_, value) => setShowShortUrl(value)} /> - } - /> - </div> - </ListItem> - </List> - </> - ); -}; - -export default Sharing; diff --git a/client/components/build/RightSidebar/sections/Templates.module.scss b/client/components/build/RightSidebar/sections/Templates.module.scss deleted file mode 100644 index 6a4de7c5..00000000 --- a/client/components/build/RightSidebar/sections/Templates.module.scss +++ /dev/null @@ -1,22 +0,0 @@ -.container { - @apply grid grid-cols-2 gap-4; -} - -.template { - @apply grid text-center; - - .preview { - aspect-ratio: 1 / 1.4142; - - @apply relative grid rounded; - @apply border-2 border-transparent; - - &.selected { - @apply border-black dark:border-white; - } - } - - .label { - @apply mt-1 text-xs font-medium; - } -} diff --git a/client/components/build/RightSidebar/sections/Templates.tsx b/client/components/build/RightSidebar/sections/Templates.tsx deleted file mode 100644 index 38e36b13..00000000 --- a/client/components/build/RightSidebar/sections/Templates.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { ButtonBase } from '@mui/material'; -import clsx from 'clsx'; -import get from 'lodash/get'; -import Image from 'next/image'; -import { useTranslation } from 'next-i18next'; - -import Heading from '@/components/shared/Heading'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setResumeState } from '@/store/resume/resumeSlice'; -import templateMap, { TemplateMeta } from '@/templates/templateMap'; - -import styles from './Templates.module.scss'; - -const Templates = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const currentTemplate: string = useAppSelector((state) => get(state.resume.present, 'metadata.template')); - - const handleChange = (template: TemplateMeta) => { - dispatch(setResumeState({ path: 'metadata.template', value: template.id })); - }; - - return ( - <> - <Heading path="metadata.templates" name={t('builder.rightSidebar.sections.templates.heading')} /> - - <div className={styles.container}> - {Object.values(templateMap).map((template) => ( - <div key={template.id} className={styles.template}> - <div className={clsx(styles.preview, { [styles.selected]: template.id === currentTemplate })}> - <ButtonBase onClick={() => handleChange(template)}> - <Image - fill - priority - alt={template.name} - src={template.preview} - className="rounded-sm" - sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" - /> - </ButtonBase> - </div> - - <p className={styles.label}>{template.name}</p> - </div> - ))} - </div> - </> - ); -}; - -export default Templates; diff --git a/client/components/build/RightSidebar/sections/Theme.module.scss b/client/components/build/RightSidebar/sections/Theme.module.scss deleted file mode 100644 index 383c1bf9..00000000 --- a/client/components/build/RightSidebar/sections/Theme.module.scss +++ /dev/null @@ -1,8 +0,0 @@ -.container { - @apply grid gap-4 sm:grid-cols-2; -} - -.colorOptions { - @apply col-span-2 mb-4; - @apply grid grid-cols-8 justify-items-center gap-y-2; -} diff --git a/client/components/build/RightSidebar/sections/Theme.tsx b/client/components/build/RightSidebar/sections/Theme.tsx deleted file mode 100644 index a8174c4c..00000000 --- a/client/components/build/RightSidebar/sections/Theme.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import get from 'lodash/get'; -import { useTranslation } from 'next-i18next'; -import { ThemeConfig } from 'schema'; - -import ColorAvatar from '@/components/shared/ColorAvatar'; -import ColorPicker from '@/components/shared/ColorPicker'; -import Heading from '@/components/shared/Heading'; -import { colorOptions } from '@/config/colors'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setResumeState } from '@/store/resume/resumeSlice'; - -import styles from './Theme.module.scss'; - -const Theme = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const { background, text, primary } = useAppSelector<ThemeConfig>((state) => - get(state.resume.present, 'metadata.theme'), - ); - - const handleChange = (property: string, color: string) => { - dispatch(setResumeState({ path: `metadata.theme.${property}`, value: color[0] !== '#' ? `#${color}` : color })); - }; - - return ( - <> - <Heading path="metadata.theme" name={t('builder.rightSidebar.sections.theme.heading')} /> - - <div className={styles.container}> - <div className={styles.colorOptions}> - {colorOptions.map((color) => ( - <ColorAvatar key={color} color={color} onClick={(color) => handleChange('primary', color)} /> - ))} - </div> - - <ColorPicker - label={t('builder.rightSidebar.sections.theme.form.primary.label')} - color={primary} - className="col-span-2" - onChange={(color) => handleChange('primary', color)} - /> - <ColorPicker - label={t('builder.rightSidebar.sections.theme.form.background.label')} - color={background} - onChange={(color) => handleChange('background', color)} - /> - <ColorPicker - label={t('builder.rightSidebar.sections.theme.form.text.label')} - color={text} - onChange={(color) => handleChange('text', color)} - /> - </div> - </> - ); -}; - -export default Theme; diff --git a/client/components/build/RightSidebar/sections/Typography.module.scss b/client/components/build/RightSidebar/sections/Typography.module.scss deleted file mode 100644 index 6a70f62f..00000000 --- a/client/components/build/RightSidebar/sections/Typography.module.scss +++ /dev/null @@ -1,11 +0,0 @@ -.container { - @apply grid gap-4 xl:grid-cols-2; -} - -.subheading { - @apply mt-2 font-medium; -} - -.slider { - @apply px-6; -} diff --git a/client/components/build/RightSidebar/sections/Typography.tsx b/client/components/build/RightSidebar/sections/Typography.tsx deleted file mode 100644 index 9b84fb35..00000000 --- a/client/components/build/RightSidebar/sections/Typography.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import { Autocomplete, Skeleton, Slider, TextField } from '@mui/material'; -import get from 'lodash/get'; -import isEmpty from 'lodash/isEmpty'; -import { useTranslation } from 'next-i18next'; -import { useQuery } from 'react-query'; -import { Font, TypeCategory, TypeProperty, Typography as TypographyType } from 'schema'; - -import Heading from '@/components/shared/Heading'; -import { FONTS_QUERY } from '@/constants/index'; -import { fetchFonts } from '@/services/fonts'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setResumeState } from '@/store/resume/resumeSlice'; - -import styles from './Typography.module.scss'; - -const TypographySkeleton: React.FC = () => ( - <> - <Skeleton variant="text" /> - <div className={styles.container}> - <Skeleton variant="rectangular" height={60} /> - <Skeleton variant="rectangular" height={60} /> - </div> - </> -); - -type WidgetProps = { - label: string; - category: TypeCategory; -}; - -const Widgets: React.FC<WidgetProps> = ({ label, category }) => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const { family, size } = useAppSelector<TypographyType>((state) => get(state.resume.present, 'metadata.typography')); - - const { data: fonts } = useQuery(FONTS_QUERY, fetchFonts, { - select: (fonts) => fonts.sort((a, b) => a.category.localeCompare(b.category)), - }); - - const handleChange = (property: TypeProperty, value: number | number[] | Font | null) => { - if (!value) return; - - dispatch( - setResumeState({ - path: `metadata.typography.${property}.${category}`, - value: property === 'family' ? (value as Font).family : value, - }), - ); - }; - - if (!fonts || isEmpty(fonts)) return <TypographySkeleton />; - - return ( - <> - <h5 className={styles.subheading}>{label}</h5> - - <div className={styles.container}> - <div className={styles.slider}> - <Slider - min={12} - max={36} - step={1} - marks={[ - { value: 12, label: '12px' }, - { value: 24, label: t('builder.rightSidebar.sections.typography.form.font-size.label') }, - { value: 36, label: '36px' }, - ]} - valueLabelDisplay="auto" - value={size[category]} - onChange={(_, size: number | number[]) => handleChange('size', size)} - /> - </div> - - <Autocomplete<Font, false, boolean, false> - options={fonts} - disableClearable={true} - groupBy={(font) => font.category} - getOptionLabel={(font) => font.family} - isOptionEqualToValue={(a, b) => a.family === b.family} - value={fonts.find((font) => font.family === family[category])} - onChange={(_, font: Font | null) => handleChange('family', font)} - renderInput={(params) => ( - <TextField {...params} label={t('builder.rightSidebar.sections.typography.form.font-family.label')} /> - )} - /> - </div> - </> - ); -}; - -const Typography = () => { - const { t } = useTranslation(); - - return ( - <> - <Heading path="metadata.typography" name={t('builder.rightSidebar.sections.typography.heading')} /> - - <Widgets label={t('builder.rightSidebar.sections.typography.widgets.headings.label')} category="heading" /> - <Widgets label={t('builder.rightSidebar.sections.typography.widgets.body.label')} category="body" /> - </> - ); -}; - -export default Typography; diff --git a/client/components/dashboard/ResumeCard.module.scss b/client/components/dashboard/ResumeCard.module.scss deleted file mode 100644 index 61e3693d..00000000 --- a/client/components/dashboard/ResumeCard.module.scss +++ /dev/null @@ -1,24 +0,0 @@ -.resume { - @apply flex flex-col gap-2; - - .preview { - aspect-ratio: 1 / 1.41; - - @apply flex items-center justify-center shadow; - @apply cursor-pointer rounded-sm bg-zinc-100 transition-opacity hover:opacity-80 dark:bg-zinc-900; - } - - footer { - @apply flex items-center justify-between; - - .meta { - p:first-child { - @apply text-sm font-semibold leading-relaxed; - } - - p:last-child { - @apply text-xs leading-relaxed opacity-50; - } - } - } -} diff --git a/client/components/dashboard/ResumeCard.tsx b/client/components/dashboard/ResumeCard.tsx deleted file mode 100644 index a1854532..00000000 --- a/client/components/dashboard/ResumeCard.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { SvgIconComponent } from '@mui/icons-material'; -import { ButtonBase } from '@mui/material'; - -import { useAppDispatch } from '@/store/hooks'; -import { ModalName, setModalState } from '@/store/modal/modalSlice'; - -import styles from './ResumeCard.module.scss'; - -type Props = { - modal: ModalName; - icon: SvgIconComponent; - title: string; - subtitle: string; -}; - -const ResumeCard: React.FC<Props> = ({ modal, icon: Icon, title, subtitle }) => { - const dispatch = useAppDispatch(); - - const handleClick = () => dispatch(setModalState({ modal, state: { open: true } })); - - return ( - <section className={styles.resume}> - <ButtonBase className={styles.preview} onClick={handleClick}> - <Icon sx={{ fontSize: 64 }} /> - </ButtonBase> - - <footer> - <div className={styles.meta}> - <p>{title}</p> - <p>{subtitle}</p> - </div> - </footer> - </section> - ); -}; - -export default ResumeCard; diff --git a/client/components/dashboard/ResumePreview.module.scss b/client/components/dashboard/ResumePreview.module.scss deleted file mode 100644 index 0126d01b..00000000 --- a/client/components/dashboard/ResumePreview.module.scss +++ /dev/null @@ -1,37 +0,0 @@ -.resume { - @apply flex flex-col gap-2; - - .preview { - aspect-ratio: 1 / 1.41; - - @apply relative cursor-pointer rounded-sm shadow; - @apply bg-zinc-100 transition-opacity hover:opacity-80 dark:bg-zinc-900; - } - - footer { - @apply flex items-center justify-between overflow-hidden; - - .meta { - flex: 4; - @apply flex flex-col overflow-hidden; - - p { - @apply overflow-hidden text-ellipsis whitespace-nowrap; - - &:first-child { - @apply text-sm font-semibold leading-relaxed; - } - - &:last-child { - @apply text-xs leading-relaxed opacity-50; - } - } - } - - .menu { - flex: 1; - - @apply h-full w-full cursor-pointer rounded text-lg; - } - } -} diff --git a/client/components/dashboard/ResumePreview.tsx b/client/components/dashboard/ResumePreview.tsx deleted file mode 100644 index adb1cc64..00000000 --- a/client/components/dashboard/ResumePreview.tsx +++ /dev/null @@ -1,188 +0,0 @@ -import { - ContentCopy, - DeleteOutline, - DriveFileRenameOutline, - Link as LinkIcon, - MoreVert, - OpenInNew, -} from '@mui/icons-material'; -import { ButtonBase, ListItemIcon, ListItemText, Menu, MenuItem, Tooltip } from '@mui/material'; -import Image from 'next/image'; -import Link from 'next/link'; -import { useRouter } from 'next/router'; -import { useTranslation } from 'next-i18next'; -import { useState } from 'react'; -import toast from 'react-hot-toast'; -import { useMutation } from 'react-query'; -import { Resume } from 'schema'; - -import { RESUMES_QUERY } from '@/constants/index'; -import { ServerError } from '@/services/axios'; -import queryClient from '@/services/react-query'; -import { deleteResume, DeleteResumeParams, duplicateResume, DuplicateResumeParams } from '@/services/resume'; -import { useAppDispatch } from '@/store/hooks'; -import { setModalState } from '@/store/modal/modalSlice'; -import { getRelativeTime } from '@/utils/date'; -import getResumeUrl from '@/utils/getResumeUrl'; - -import styles from './ResumePreview.module.scss'; - -type Props = { - resume: Resume; -}; - -const ResumePreview: React.FC<Props> = ({ resume }) => { - const router = useRouter(); - - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const [anchorEl, setAnchorEl] = useState<Element | null>(null); - - const { mutateAsync: duplicateMutation } = useMutation<Resume, ServerError, DuplicateResumeParams>(duplicateResume); - - const { mutateAsync: deleteMutation } = useMutation<void, ServerError, DeleteResumeParams>(deleteResume); - - const handleOpen = () => { - handleClose(); - - router.push({ - pathname: '/[username]/[slug]/build', - query: { username: resume.user.username, slug: resume.slug }, - }); - }; - - const handleOpenMenu = (event: React.MouseEvent<Element>) => { - setAnchorEl(event.currentTarget); - }; - - const handleClose = () => { - setAnchorEl(null); - }; - - const handleRename = () => { - handleClose(); - - dispatch( - setModalState({ - modal: 'dashboard.rename-resume', - state: { - open: true, - payload: { - item: resume, - onComplete: () => { - queryClient.invalidateQueries(RESUMES_QUERY); - }, - }, - }, - }), - ); - }; - - const handleDuplicate = async () => { - handleClose(); - - await duplicateMutation({ id: resume.id }); - - queryClient.invalidateQueries(RESUMES_QUERY); - }; - - const handleShareLink = async () => { - handleClose(); - - const url = getResumeUrl(resume, { withHost: true }); - await navigator.clipboard.writeText(url); - - toast.success(t('common.toast.success.resume-link-copied')); - }; - - const handleDelete = async () => { - handleClose(); - - await deleteMutation({ id: resume.id }); - - queryClient.invalidateQueries(RESUMES_QUERY); - }; - - return ( - <section className={styles.resume}> - <Link - passHref - href={{ - pathname: '/[username]/[slug]/build', - query: { username: resume.user.username, slug: resume.slug }, - }} - > - <ButtonBase className={styles.preview}> - {resume.image ? <Image src={resume.image} alt={resume.name} priority width={400} height={0} /> : null} - </ButtonBase> - </Link> - - <footer> - <div className={styles.meta}> - <p>{resume.name}</p> - <p>{t('dashboard.resume.timestamp', { timestamp: getRelativeTime(resume.updatedAt) })}</p> - </div> - - <ButtonBase className={styles.menu} onClick={handleOpenMenu}> - <MoreVert /> - </ButtonBase> - - <Menu anchorEl={anchorEl} onClose={handleClose} open={Boolean(anchorEl)}> - <MenuItem onClick={handleOpen}> - <ListItemIcon> - <OpenInNew className="scale-90" /> - </ListItemIcon> - <ListItemText>{t('dashboard.resume.menu.open')}</ListItemText> - </MenuItem> - - <MenuItem onClick={handleRename}> - <ListItemIcon> - <DriveFileRenameOutline className="scale-90" /> - </ListItemIcon> - <ListItemText>{t('dashboard.resume.menu.rename')}</ListItemText> - </MenuItem> - - <MenuItem onClick={handleDuplicate}> - <ListItemIcon> - <ContentCopy className="scale-90" /> - </ListItemIcon> - <ListItemText>{t('dashboard.resume.menu.duplicate')}</ListItemText> - </MenuItem> - - {resume.public ? ( - <MenuItem onClick={handleShareLink}> - <ListItemIcon> - <LinkIcon className="scale-90" /> - </ListItemIcon> - <ListItemText>{t('dashboard.resume.menu.share-link')}</ListItemText> - </MenuItem> - ) : ( - <Tooltip arrow placement="right" title={t('dashboard.resume.menu.tooltips.share-link')}> - <div> - <MenuItem> - <ListItemIcon> - <LinkIcon className="scale-90" /> - </ListItemIcon> - <ListItemText>{t('dashboard.resume.menu.share-link')}</ListItemText> - </MenuItem> - </div> - </Tooltip> - )} - - <Tooltip arrow placement="right" title={t('dashboard.resume.menu.tooltips.delete')}> - <MenuItem onClick={handleDelete}> - <ListItemIcon> - <DeleteOutline className="scale-90" /> - </ListItemIcon> - <ListItemText>{t('dashboard.resume.menu.delete')}</ListItemText> - </MenuItem> - </Tooltip> - </Menu> - </footer> - </section> - ); -}; - -export default ResumePreview; diff --git a/client/components/home/Actions.tsx b/client/components/home/Actions.tsx deleted file mode 100644 index a55b31cb..00000000 --- a/client/components/home/Actions.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { Button } from '@mui/material'; -import Link from 'next/link'; -import { useTranslation } from 'next-i18next'; - -import { FLAG_DISABLE_SIGNUPS } from '@/constants/flags'; -import { logout } from '@/store/auth/authSlice'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setModalState } from '@/store/modal/modalSlice'; - -const HomeActions = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const isLoggedIn = useAppSelector((state) => state.auth.isLoggedIn); - - const handleLogin = () => dispatch(setModalState({ modal: 'auth.login', state: { open: true } })); - const handleRegister = () => dispatch(setModalState({ modal: 'auth.register', state: { open: true } })); - const handleLogout = () => dispatch(logout()); - - return isLoggedIn ? ( - <> - <Link href="/dashboard" passHref> - <Button size="large">{t('landing.actions.app')}</Button> - </Link> - - <Button size="large" variant="outlined" onClick={handleLogout}> - {t('landing.actions.logout')} - </Button> - </> - ) : ( - <> - <Button size="large" onClick={handleLogin}> - {t('landing.actions.login')} - </Button> - - <Button size="large" variant="outlined" onClick={handleRegister} disabled={FLAG_DISABLE_SIGNUPS}> - {t('landing.actions.register')} - </Button> - </> - ); -}; - -export default HomeActions; diff --git a/client/components/home/Background.tsx b/client/components/home/Background.tsx deleted file mode 100644 index 5e366243..00000000 --- a/client/components/home/Background.tsx +++ /dev/null @@ -1,16 +0,0 @@ -const HeroBackground = () => ( - <div - aria-hidden="true" - className="absolute left-[calc(50%-4rem)] top-10 -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:left-48 lg:top-[calc(50%-30rem)] xl:left-[calc(50%-24rem)]" - > - <div - className="aspect-[1108/632] h-96 w-[69.25rem] bg-gradient-to-r from-[#6f8cbb] to-[#c93b37] opacity-40 dark:opacity-20" - style={{ - clipPath: - 'polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)', - }} - /> - </div> -); - -export default HeroBackground; diff --git a/client/components/home/Footer.tsx b/client/components/home/Footer.tsx deleted file mode 100644 index b297d0c1..00000000 --- a/client/components/home/Footer.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import GitHubButton from 'react-github-btn'; - -import { useAppSelector } from '@/store/hooks'; - -import { Copyright } from '../shared/Copyright'; -import Logo from '../shared/Logo'; -import { Separator } from '../ui/Separator'; - -const Footer = () => { - const theme = useAppSelector((state) => state.build.theme); - - return ( - <footer className="fixed inset-x-0 bottom-0 -z-50 h-[450px] bg-zinc-50 dark:bg-zinc-950"> - <Separator /> - - <div className="container grid py-12 sm:grid-cols-3 lg:grid-cols-4"> - <div className="flex flex-col gap-y-2"> - <Logo size={96} className="-ml-2" /> - - <h2 className="text-xl font-medium">Reactive Resume</h2> - - <p className="prose prose-sm prose-zinc leading-relaxed opacity-60 dark:prose-invert"> - A free and open-source resume builder that simplifies the tasks of creating, updating, and sharing your - resume. - </p> - - <div className="mt-6"> - <GitHubButton - data-size="large" - data-show-count="true" - data-icon="octicon-star" - data-color-scheme={theme ? 'dark' : 'light'} - href="https://github.com/AmruthPillai/Reactive-Resume" - aria-label="Star AmruthPillai/Reactive-Resume on GitHub" - > - Star - </GitHubButton> - </div> - - <Copyright className="mt-4" /> - </div> - </div> - </footer> - ); -}; - -export default Footer; diff --git a/client/components/home/Header.tsx b/client/components/home/Header.tsx deleted file mode 100644 index a3d88cfb..00000000 --- a/client/components/home/Header.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import Link from 'next/link'; - -import Logo from '../shared/Logo'; -import HomeActions from './Actions'; - -const Header = () => ( - <header className="fixed inset-x-0 top-0 z-50"> - <nav className="bg-gradient-to-b from-zinc-50 to-transparent py-3 dark:from-zinc-950"> - <div className="container flex items-center justify-between"> - <div className="lg:flex-1"> - <Link href="/"> - <Logo size={48} /> - </Link> - </div> - - <div className="space-x-4"> - <HomeActions /> - </div> - </div> - </nav> - </header> -); - -export default Header; diff --git a/client/components/home/Hero.tsx b/client/components/home/Hero.tsx deleted file mode 100644 index e69de29b..00000000 diff --git a/client/components/home/Pattern.tsx b/client/components/home/Pattern.tsx deleted file mode 100644 index 501ae14b..00000000 --- a/client/components/home/Pattern.tsx +++ /dev/null @@ -1,28 +0,0 @@ -const HeroPattern = () => ( - <svg - aria-hidden="true" - className="absolute inset-0 -z-10 h-full w-full stroke-zinc-950/10 opacity-60 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)] dark:stroke-zinc-50/10 dark:opacity-40" - > - <defs> - <pattern - id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc" - width={200} - height={200} - x="50%" - y={-1} - patternUnits="userSpaceOnUse" - > - <path d="M.5 200V.5H200" fill="none" /> - </pattern> - </defs> - <svg x="50%" y={-1} className="overflow-visible fill-zinc-100/20 dark:fill-zinc-900/20"> - <path - d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z" - strokeWidth={0} - /> - </svg> - <rect width="100%" height="100%" strokeWidth={0} fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)" /> - </svg> -); - -export default HeroPattern; diff --git a/client/components/home/Testimony.module.scss b/client/components/home/Testimony.module.scss deleted file mode 100644 index 2ec5657f..00000000 --- a/client/components/home/Testimony.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -.testimony { - @apply grid gap-2; - @apply rounded border-2 p-4 dark:border-zinc-900; - - blockquote { - @apply text-justify text-xs leading-normal opacity-90; - } - - figcaption { - @apply text-xs opacity-60; - } -} diff --git a/client/components/home/Testimony.tsx b/client/components/home/Testimony.tsx deleted file mode 100644 index 674c762a..00000000 --- a/client/components/home/Testimony.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { Testimony as TestimonyType } from '@/data/testimonials'; - -import styles from './Testimony.module.scss'; - -type Props = TestimonyType; - -const Testimony: React.FC<Props> = ({ name, message }) => { - return ( - <div className={styles.testimony}> - <blockquote>{message}</blockquote> - - <figcaption>— {name}</figcaption> - </div> - ); -}; - -export default Testimony; diff --git a/client/components/home/sections/Hero.tsx b/client/components/home/sections/Hero.tsx deleted file mode 100644 index 16ef2107..00000000 --- a/client/components/home/sections/Hero.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import Tilt from 'react-parallax-tilt'; - -import { defaultTiltProps } from '@/constants/tilt'; - -import HomeActions from '../Actions'; -import HeroBackground from '../Background'; -import HeroPattern from '../Pattern'; - -const HeroSection = () => ( - <section className="relative"> - <HeroPattern /> - <HeroBackground /> - - <div className="mx-auto max-w-7xl px-6 pb-24 pt-10 sm:pb-32 lg:flex lg:px-8 lg:py-52"> - <div className="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:max-w-xl lg:pt-12"> - <div className="mt-10 space-y-2"> - <h6 className="text-base font-bold tracking-wide">Finally,</h6> - <h1 className="text-4xl font-bold !leading-[1.15] tracking-tight sm:text-6xl"> - A free and open-source resume builder - </h1> - </div> - - <p className="prose prose-base prose-zinc mt-6 text-lg leading-8 dark:prose-invert"> - Reactive Resume is a free and open-source resume builder that simplifies the tasks of creating, updating, and - sharing your resume. - </p> - - <div className="mt-12 space-x-4"> - <HomeActions /> - </div> - </div> - - <div className="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:ml-10 lg:mr-0 lg:mt-0 lg:max-w-none lg:flex-none xl:ml-32"> - <div className="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none"> - <Tilt {...defaultTiltProps}> - <img - width={2432} - height={1442} - src="/images/screenshots/builder.png" - alt="Reactive Resume Screenshot - Builder Screen" - className="w-[76rem] rounded-lg bg-zinc-50/5 shadow-2xl ring-1 ring-zinc-950/10 dark:bg-zinc-950/5 dark:ring-zinc-50/10" - /> - </Tilt> - </div> - </div> - </div> - </section> -); - -export default HeroSection; diff --git a/client/components/home/sections/Logo.tsx b/client/components/home/sections/Logo.tsx deleted file mode 100644 index 77ed3398..00000000 --- a/client/components/home/sections/Logo.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { cn } from '@/utils/styles'; - -type LogoProps = { brand: string }; - -const Logo = ({ brand }: LogoProps) => ( - <div className={cn('col-span-2 col-start-2 sm:col-start-auto lg:col-span-1', brand === 'twilio' && 'sm:col-start-2')}> - {/* Show on Light Theme */} - <img - className="block max-h-12 object-contain dark:hidden" - src={`/images/brand-logos/dark/${brand}.svg`} - alt={brand} - width={212} - height={48} - /> - {/* Show on Dark Theme */} - <img - className="hidden max-h-12 object-contain dark:block" - src={`/images/brand-logos/light/${brand}.svg`} - alt={brand} - width={212} - height={48} - /> - </div> -); - -const logoList: string[] = ['amazon', 'google', 'postman', 'twilio', 'zalando']; - -const LogoSection = () => ( - <section className="relative py-24 sm:py-32"> - <div className="mx-auto max-w-7xl px-6 lg:px-8"> - <p className="text-center text-lg leading-relaxed"> - Reactive Resume has helped people land jobs at these great companies: - </p> - <div className="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-5"> - {logoList.map((brand) => ( - <Logo key={brand} brand={brand} /> - ))} - </div> - - <p className="mx-auto mt-8 max-w-sm text-center leading-relaxed"> - If this app has helped you with your job hunt, let me know by reaching out through{' '} - <a href="https://www.amruthpillai.com/#contact" target="_blank" rel="noreferrer" className="hover:underline"> - this contact form - </a> - . - </p> - </div> - </section> -); - -export default LogoSection; diff --git a/client/components/home/sections/Stats.tsx b/client/components/home/sections/Stats.tsx deleted file mode 100644 index 000058f3..00000000 --- a/client/components/home/sections/Stats.tsx +++ /dev/null @@ -1,27 +0,0 @@ -type Statistic = { - name: string; - value: string; -}; - -const stats: Statistic[] = [ - { name: 'GitHub Stars', value: '11,800+' }, - { name: 'Users Signed Up', value: '300,000+' }, - { name: 'Resumes Generated', value: '400,000+' }, -]; - -const StatsSection = () => ( - <section className="relative py-24 sm:py-32"> - <div className="mx-auto max-w-7xl px-6 lg:px-8"> - <dl className="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3"> - {stats.map((stat, index) => ( - <div key={index} className="mx-auto flex max-w-xs flex-col gap-y-4"> - <dt className="text-base leading-7 opacity-60">{stat.name}</dt> - <dd className="order-first text-3xl font-semibold tracking-tight sm:text-5xl">{stat.value}</dd> - </div> - ))} - </dl> - </div> - </section> -); - -export default StatsSection; diff --git a/client/components/shared/ArrayInput.module.scss b/client/components/shared/ArrayInput.module.scss deleted file mode 100644 index 3247205c..00000000 --- a/client/components/shared/ArrayInput.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -.header { - @apply mb-4 flex items-center justify-between; - - .label { - @apply text-base font-semibold; - } -} - -.inputGrid { - @apply grid grid-cols-2 gap-4; - - .delete { - @apply opacity-25 hover:opacity-75; - } -} diff --git a/client/components/shared/ArrayInput.tsx b/client/components/shared/ArrayInput.tsx deleted file mode 100644 index a10592b6..00000000 --- a/client/components/shared/ArrayInput.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { Add, Delete } from '@mui/icons-material'; -import { IconButton, InputAdornment, TextField } from '@mui/material'; -import get from 'lodash/get'; -import { useEffect, useState } from 'react'; -import { FieldError } from 'react-hook-form'; - -import styles from './ArrayInput.module.scss'; - -type Props = { - label: string; - value?: string[]; - className?: string; - onChange: (event: any) => void; - errors?: FieldError | FieldError[]; -}; - -const ArrayInput: React.FC<Props> = ({ value, label, onChange, errors, className }) => { - const [items, setItems] = useState<string[]>(value || []); - - const onAdd = () => setItems([...items, '']); - - const onDelete = (index: number) => setItems(items.filter((_, idx) => idx !== index)); - - const handleChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => { - const tempItems = [...items]; - tempItems[index] = event.target.value; - setItems(tempItems); - }; - - useEffect(() => { - onChange(items); - }, [onChange, items]); - - return ( - <div className={className}> - <header className={styles.header}> - <h3 className={styles.label}> - {label} <small>({items.length})</small> - </h3> - - <IconButton onClick={onAdd}> - <Add /> - </IconButton> - </header> - - <div className={styles.inputGrid}> - {items.map((value, index) => ( - <TextField - key={index} - value={value} - onChange={(event: React.ChangeEvent<HTMLInputElement>) => handleChange(event, index)} - error={!!get(errors, index, false)} - helperText={get(errors, `${index}.message`, '')} - InputProps={{ - endAdornment: ( - <InputAdornment position="end"> - <IconButton edge="end" onClick={() => onDelete(index)} className={styles.delete}> - <Delete /> - </IconButton> - </InputAdornment> - ), - }} - /> - ))} - </div> - </div> - ); -}; - -export default ArrayInput; diff --git a/client/components/shared/Avatar.module.scss b/client/components/shared/Avatar.module.scss deleted file mode 100644 index 12a57fc2..00000000 --- a/client/components/shared/Avatar.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -.avatar { - @apply cursor-pointer rounded-full; -} diff --git a/client/components/shared/Avatar.tsx b/client/components/shared/Avatar.tsx deleted file mode 100644 index 01402206..00000000 --- a/client/components/shared/Avatar.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { Divider, IconButton, Menu, MenuItem } from '@mui/material'; -import Image from 'next/image'; -import { useRouter } from 'next/router'; -import { useTranslation } from 'next-i18next'; -import { useState } from 'react'; - -import { logout } from '@/store/auth/authSlice'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setModalState } from '@/store/modal/modalSlice'; -import getGravatarUrl from '@/utils/getGravatarUrl'; - -import styles from './Avatar.module.scss'; - -type Props = { - size?: number; - interactive?: boolean; -}; - -const Avatar: React.FC<Props> = ({ size = 64, interactive = true }) => { - const router = useRouter(); - - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const [anchorEl, setAnchorEl] = useState<Element | null>(null); - - const user = useAppSelector((state) => state.auth.user); - const email = user?.email || ''; - - const handleOpen = (event: React.MouseEvent<Element>) => { - setAnchorEl(event.currentTarget); - }; - - const handleClose = () => { - setAnchorEl(null); - }; - - const handleOpenProfile = () => { - dispatch(setModalState({ modal: 'auth.profile', state: { open: true } })); - handleClose(); - }; - - const handleLogout = () => { - dispatch(logout()); - handleClose(); - - router.push('/'); - }; - - return ( - <> - <IconButton onClick={handleOpen} disabled={!interactive}> - <Image - width={size} - height={size} - className={styles.avatar} - src={getGravatarUrl(email, size)} - alt={user?.name ?? 'User Avatar'} - /> - </IconButton> - - <Menu anchorEl={anchorEl} onClose={handleClose} open={Boolean(anchorEl)}> - <MenuItem onClick={handleOpenProfile}> - <div> - <span className="text-xs opacity-50">{t('common.avatar.menu.greeting')},</span> - <p>{user?.name}</p> - </div> - </MenuItem> - <Divider /> - <MenuItem onClick={handleLogout}>{t('common.avatar.menu.logout')}</MenuItem> - </Menu> - </> - ); -}; - -export default Avatar; diff --git a/client/components/shared/BaseModal.module.scss b/client/components/shared/BaseModal.module.scss deleted file mode 100644 index 2d6d0cbb..00000000 --- a/client/components/shared/BaseModal.module.scss +++ /dev/null @@ -1,39 +0,0 @@ -.content { - @apply rounded px-6 text-sm shadow lg:w-2/3 xl:w-1/2; - @apply absolute inset-4 sm:inset-x-4 sm:inset-y-auto lg:inset-auto; - @apply overflow-scroll bg-zinc-100 dark:bg-zinc-900 lg:overflow-auto; - @apply max-h-[90vh] min-h-fit; - - &::-webkit-scrollbar { - display: none; - } -} - -.header { - @apply sticky top-0 left-0 right-0 z-50 bg-zinc-100 pt-6 dark:bg-zinc-900; - @apply flex items-center justify-between; - @apply w-full border-b pb-5 dark:border-white/10; - - > div { - @apply flex items-center gap-2; - } - - button { - @apply flex items-center justify-center; - @apply rotate-0 transition-transform hover:rotate-90; - } - - h1 { - @apply text-base font-medium; - } -} - -.body { - @apply grid gap-4 pt-4 pb-6; -} - -.footer { - @apply sticky bottom-0 left-0 right-0 z-50 bg-zinc-100 pb-6 dark:bg-zinc-900; - @apply flex items-center justify-end gap-x-4; - @apply w-full border-t pt-5 dark:border-white/10; -} diff --git a/client/components/shared/BaseModal.tsx b/client/components/shared/BaseModal.tsx deleted file mode 100644 index 96d9a20b..00000000 --- a/client/components/shared/BaseModal.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { Close as CloseIcon } from '@mui/icons-material'; -import { Fade, IconButton, Modal } from '@mui/material'; -import { useRouter } from 'next/router'; - -import styles from './BaseModal.module.scss'; - -type Props = { - isOpen: boolean; - heading: string; - icon?: React.ReactNode; - children?: React.ReactNode; - footerChildren?: React.ReactNode; - handleClose: () => void; -}; - -const BaseModal: React.FC<Props> = ({ icon, isOpen, heading, children, handleClose, footerChildren }) => { - const router = useRouter(); - const { pathname, query } = router; - - const onClose = (event: object, reason: string) => { - router.push({ pathname, query }, ''); - if (reason === 'backdropClick') return; - handleClose(); - }; - - const onIconClose = () => { - router.push({ pathname, query }, ''); - handleClose(); - }; - - return ( - <Modal - open={isOpen} - onClose={(event, reason) => onClose(event, reason)} - closeAfterTransition - aria-labelledby={heading} - classes={{ root: 'flex items-center justify-center' }} - > - <Fade in={isOpen}> - <div className={styles.content}> - <header className={styles.header}> - <div> - {icon} - {icon && <span className="mx-1 opacity-25">/</span>} - <h1>{heading}</h1> - </div> - - <IconButton size="small" onClick={onIconClose}> - <CloseIcon sx={{ fontSize: 18 }} /> - </IconButton> - </header> - - <div className={styles.body}>{children}</div> - - {footerChildren ? <footer className={styles.footer}>{footerChildren}</footer> : null} - </div> - </Fade> - </Modal> - ); -}; - -export default BaseModal; diff --git a/client/components/shared/ColorAvatar.tsx b/client/components/shared/ColorAvatar.tsx deleted file mode 100644 index f2d2e28b..00000000 --- a/client/components/shared/ColorAvatar.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Avatar, IconButton } from '@mui/material'; -import isFunction from 'lodash/isFunction'; - -type Props = { - color: string; - size?: number; - onClick?: (color: string) => void; -}; - -const ColorAvatar: React.FC<Props> = ({ color, size = 20, onClick }) => { - const handleClick = () => isFunction(onClick) && onClick(color); - - return ( - <IconButton onClick={handleClick}> - <Avatar sx={{ bgcolor: color, width: size, height: size }}> </Avatar> - </IconButton> - ); -}; - -export default ColorAvatar; diff --git a/client/components/shared/ColorPicker.tsx b/client/components/shared/ColorPicker.tsx deleted file mode 100644 index 895ba5c5..00000000 --- a/client/components/shared/ColorPicker.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { Popover, TextField } from '@mui/material'; -import React, { useMemo, useState } from 'react'; -import { HexColorPicker } from 'react-colorful'; - -import { hexColorPattern } from '@/config/colors'; - -import ColorAvatar from './ColorAvatar'; - -type Props = { - label: string; - color: string; - className?: string; - onChange: (color: string) => void; -}; - -const ColorPicker: React.FC<Props> = ({ label, color, onChange, className }) => { - const isValid = useMemo(() => hexColorPattern.test(color), [color]); - - const [anchorEl, setAnchorEl] = useState<HTMLInputElement | null>(null); - const isOpen = Boolean(anchorEl); - - const handleOpen = (event: React.MouseEvent<HTMLInputElement>) => { - setAnchorEl(event.currentTarget); - }; - - const handleClose = () => { - setAnchorEl(null); - }; - - const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { - if (hexColorPattern.test(event.target.value)) { - onChange(event.target.value); - } - }; - - return ( - <> - <TextField - label={label} - value={color} - error={!isValid} - onClick={handleOpen} - onChange={handleChange} - className={className} - InputProps={{ - startAdornment: ( - <div className="mr-2"> - <ColorAvatar color={color} /> - </div> - ), - }} - /> - <Popover - open={isOpen} - anchorEl={anchorEl} - onClose={handleClose} - anchorOrigin={{ - vertical: 'bottom', - horizontal: 'left', - }} - > - <HexColorPicker color={color} onChange={onChange} className="overflow-hidden" /> - </Popover> - </> - ); -}; - -export default ColorPicker; diff --git a/client/components/shared/Copyright.tsx b/client/components/shared/Copyright.tsx deleted file mode 100644 index 287a2968..00000000 --- a/client/components/shared/Copyright.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import clsx from 'clsx'; - -type Props = { - className?: string; -}; - -export const Copyright = ({ className }: Props) => ( - <div - className={clsx('prose prose-sm prose-zinc flex flex-col gap-y-1 text-xs opacity-40 dark:prose-invert', className)} - > - <span className="font-medium">v{process.env.appVersion}</span> - <span> - Licensed under <a href="https://github.com/AmruthPillai/Reactive-Resume/blob/main/LICENSE">MIT</a> - </span> - <span> - A passion project by <a href="https://www.amruthpillai.com/">Amruth Pillai</a> - </span> - </div> -); diff --git a/client/components/shared/Footer.tsx b/client/components/shared/Footer.tsx deleted file mode 100644 index 1bd8f2f6..00000000 --- a/client/components/shared/Footer.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import clsx from 'clsx'; -import { Trans, useTranslation } from 'next-i18next'; - -type Props = { - className?: string; -}; - -const Footer: React.FC<Props> = ({ className }) => { - const { t } = useTranslation(); - - return ( - <div className={clsx('text-xs', className)}> - <p>{t('common.footer.license')}</p> - - <p> - <Trans t={t} i18nKey="common.footer.credit"> - A passion project by - <a href="https://www.amruthpillai.com/" target="_blank" rel="noreferrer"> - Amruth Pillai - </a> - </Trans> - </p> - </div> - ); -}; - -export default Footer; diff --git a/client/components/shared/Heading.module.scss b/client/components/shared/Heading.module.scss deleted file mode 100644 index 756123a0..00000000 --- a/client/components/shared/Heading.module.scss +++ /dev/null @@ -1,17 +0,0 @@ -.container { - @apply flex items-center justify-between; - - h1 { - @apply text-2xl; - } - - .actions { - @apply flex gap-2 opacity-75 transition-opacity lg:opacity-50 dark:lg:opacity-25; - } - - &:hover { - .actions { - @apply opacity-75; - } - } -} diff --git a/client/components/shared/Heading.tsx b/client/components/shared/Heading.tsx deleted file mode 100644 index 2bd0f981..00000000 --- a/client/components/shared/Heading.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import { Check, Delete, DriveFileRenameOutline, Grade, Visibility, VisibilityOff } from '@mui/icons-material'; -import { IconButton, TextField, Tooltip } from '@mui/material'; -import clsx from 'clsx'; -import get from 'lodash/get'; -import { useTranslation } from 'next-i18next'; -import React, { useMemo, useState } from 'react'; - -import sections from '@/config/sections'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { deleteSection, setResumeState } from '@/store/resume/resumeSlice'; - -import styles from './Heading.module.scss'; - -type Props = { - path: string; - name?: string; - isEditable?: boolean; - isHideable?: boolean; - isDeletable?: boolean; - action?: React.ReactNode; -}; - -const Heading: React.FC<Props> = ({ - path, - name, - isEditable = false, - isHideable = false, - isDeletable = false, - action, -}) => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const heading = useAppSelector((state) => get(state.resume.present, `${path}.name`, name)); - const visibility = useAppSelector((state) => get(state.resume.present, `${path}.visible`, true)); - - const [editMode, setEditMode] = useState(false); - - const id = useMemo(() => path.split('.')[1], [path]); - - const icon = sections.find((x) => x.id === id)?.icon || <Grade />; - - const toggleVisibility = () => { - dispatch(setResumeState({ path: `${path}.visible`, value: !visibility })); - }; - - const toggleEditMode = () => setEditMode(!editMode); - - const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { - dispatch(setResumeState({ path: `${path}.name`, value: event.target.value })); - }; - - const handleDelete = () => { - dispatch(deleteSection({ path })); - }; - - return ( - <div className={styles.container}> - <div className="flex w-full items-center gap-3"> - <div className="opacity-50">{icon}</div> - {editMode ? ( - <TextField size="small" value={heading} className="w-3/4" onChange={handleChange} /> - ) : ( - <h1>{t(`builder.leftSidebar.${path}.heading`, { defaultValue: heading })}</h1> - )} - </div> - - <div - className={clsx(styles.actions, { - '!opacity-75': editMode, - })} - > - {isEditable && ( - <Tooltip title={t('builder.common.tooltip.rename-section')}> - <IconButton onClick={toggleEditMode}>{editMode ? <Check /> : <DriveFileRenameOutline />}</IconButton> - </Tooltip> - )} - - {isHideable && ( - <Tooltip title={t('builder.common.tooltip.toggle-visibility')}> - <IconButton onClick={toggleVisibility}>{visibility ? <Visibility /> : <VisibilityOff />}</IconButton> - </Tooltip> - )} - - {isDeletable && ( - <Tooltip title={t('builder.common.tooltip.delete-section')}> - <IconButton onClick={handleDelete}> - <Delete /> - </IconButton> - </Tooltip> - )} - - {action} - </div> - </div> - ); -}; - -export default Heading; diff --git a/client/components/shared/Icon.tsx b/client/components/shared/Icon.tsx deleted file mode 100644 index 2d419cd0..00000000 --- a/client/components/shared/Icon.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import clsx from 'clsx'; -import Image from 'next/image'; - -import { useAppSelector } from '@/store/hooks'; - -type Props = { - className?: string; - size?: 256 | 96 | 64 | 48 | 40 | 32 | 24 | 16; -}; - -const Icon: React.FC<Props> = ({ size = 64, className }) => { - const theme = useAppSelector((state) => state.build.theme); - const iconTheme = theme === 'light' ? 'dark' : 'light'; - - return ( - <Image - alt="Reactive Resume" - src={`/icon/${iconTheme}.svg`} - className={clsx('rounded', className)} - width={size} - height={size} - priority - /> - ); -}; - -export default Icon; diff --git a/client/components/shared/LanguageSwitcher.module.scss b/client/components/shared/LanguageSwitcher.module.scss deleted file mode 100644 index e95f04ea..00000000 --- a/client/components/shared/LanguageSwitcher.module.scss +++ /dev/null @@ -1,13 +0,0 @@ -.popover { - width: 460px; - - @apply px-4 py-2; -} - -.container { - @apply grid grid-cols-3 items-center justify-center gap-x-2; -} - -.language { - @apply cursor-pointer py-2 px-4 text-center hover:underline; -} diff --git a/client/components/shared/LanguageSwitcher.tsx b/client/components/shared/LanguageSwitcher.tsx deleted file mode 100644 index f8eef27c..00000000 --- a/client/components/shared/LanguageSwitcher.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { Language } from '@mui/icons-material'; -import { IconButton, Menu, MenuItem } from '@mui/material'; -import { useRouter } from 'next/router'; -import { MouseEvent, useState } from 'react'; - -import { languages } from '@/config/languages'; -import { TRANSLATE_URL } from '@/constants/index'; - -const LanguageSwitcher = () => { - const router = useRouter(); - - const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null); - - const handleClick = (event: MouseEvent<HTMLButtonElement>) => setAnchorEl(event.currentTarget); - - const handleClose = () => setAnchorEl(null); - - const handleChange = (locale: string) => { - const { pathname, asPath, query } = router; - - handleClose(); - - document.cookie = `NEXT_LOCALE=${locale}; path=/; expires=2147483647`; - - router.push({ pathname, query }, asPath, { locale }); - }; - - const handleAddLanguage = () => window.open(TRANSLATE_URL, '_blank'); - - return ( - <div> - <IconButton onClick={handleClick}> - <Language /> - </IconButton> - - <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}> - {languages.map(({ code, name, localName }) => ( - <MenuItem key={code} onClick={() => handleChange(code)}> - {name} {localName && `(${localName})`} - </MenuItem> - ))} - - <MenuItem> - <span className="font-bold" onClick={handleAddLanguage}> - Add your language - </span> - </MenuItem> - </Menu> - </div> - ); -}; - -export default LanguageSwitcher; diff --git a/client/components/shared/List.module.scss b/client/components/shared/List.module.scss deleted file mode 100644 index a16aa947..00000000 --- a/client/components/shared/List.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -.container { - @apply rounded-lg border dark:border-zinc-50/10; - - .empty { - @apply py-8 text-center; - } -} diff --git a/client/components/shared/List.tsx b/client/components/shared/List.tsx deleted file mode 100644 index 07d16d50..00000000 --- a/client/components/shared/List.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import clsx from 'clsx'; -import get from 'lodash/get'; -import isArray from 'lodash/isArray'; -import isEmpty from 'lodash/isEmpty'; -import isFunction from 'lodash/isFunction'; -import { useTranslation } from 'next-i18next'; -import { useCallback } from 'react'; -import { DndProvider } from 'react-dnd'; -import { HTML5Backend } from 'react-dnd-html5-backend'; -import { ListItem as ListItemType } from 'schema'; - -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { deleteItem, setResumeState } from '@/store/resume/resumeSlice'; - -import styles from './List.module.scss'; -import ListItem from './ListItem'; - -type Props = { - path: string; - titleKey?: string; - subtitleKey?: string; - onEdit?: (item: ListItemType) => void; - onDuplicate?: (item: ListItemType) => void; - className?: string; -}; - -const List: React.FC<Props> = ({ - path, - titleKey = 'title', - subtitleKey = 'subtitle', - onEdit, - onDuplicate, - className, -}) => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const list: Array<ListItemType> = useAppSelector((state) => get(state.resume.present, path, [])); - - const handleEdit = (item: ListItemType) => { - isFunction(onEdit) && onEdit(item); - }; - - const handleDuplicate = (item: ListItemType) => { - isFunction(onDuplicate) && onDuplicate(item); - }; - - const handleDelete = (item: ListItemType) => { - dispatch(deleteItem({ path, value: item })); - }; - - const handleMove = useCallback( - (dragIndex: number, hoverIndex: number) => { - const dragItem = list[dragIndex]; - const newList = [...list]; - - newList.splice(dragIndex, 1); - newList.splice(hoverIndex, 0, dragItem); - - dispatch(setResumeState({ path, value: newList })); - }, - [list, dispatch, path], - ); - - return ( - <DndProvider backend={HTML5Backend}> - <div className={clsx(styles.container, className)}> - {isEmpty(list) && <div className={styles.empty}>{t('builder.common.list.empty-text')}</div>} - - {list.map((item, index) => { - const title = get(item, titleKey, ''); - const subtitleObj = get(item, subtitleKey); - const subtitle: string = isArray(subtitleObj) ? subtitleObj.join(', ') : subtitleObj; - - return ( - <ListItem - key={item.id} - path={path} - item={item} - index={index} - title={title} - subtitle={subtitle} - onMove={handleMove} - onEdit={handleEdit} - onDelete={handleDelete} - onDuplicate={handleDuplicate} - /> - ); - })} - </div> - </DndProvider> - ); -}; - -export default List; diff --git a/client/components/shared/ListItem.module.scss b/client/components/shared/ListItem.module.scss deleted file mode 100644 index e02fbfac..00000000 --- a/client/components/shared/ListItem.module.scss +++ /dev/null @@ -1,18 +0,0 @@ -.item { - @apply flex items-center justify-between; - @apply py-5 pl-5 pr-2; - @apply border-b border-zinc-900/10 last:border-0 dark:border-zinc-50/10; - @apply cursor-move transition-opacity; - - .meta { - @apply grid gap-1; - - .title { - @apply font-semibold; - } - - .subtitle { - @apply text-xs opacity-50; - } - } -} diff --git a/client/components/shared/ListItem.tsx b/client/components/shared/ListItem.tsx deleted file mode 100644 index 986421c7..00000000 --- a/client/components/shared/ListItem.tsx +++ /dev/null @@ -1,157 +0,0 @@ -import { DeleteOutline, DriveFileRenameOutline, FileCopy, MoreVert } from '@mui/icons-material'; -import { Divider, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, Tooltip } from '@mui/material'; -import clsx from 'clsx'; -import isFunction from 'lodash/isFunction'; -import { useTranslation } from 'next-i18next'; -import React, { useRef, useState } from 'react'; -import { DropTargetMonitor, useDrag, useDrop, XYCoord } from 'react-dnd'; -import { ListItem as ListItemType } from 'schema'; - -import styles from './ListItem.module.scss'; - -interface DragItem { - id: string; - type: string; - index: number; -} - -type Props = { - item: ListItemType; - path: string; - index: number; - title: string; - subtitle?: string; - onMove?: (dragIndex: number, hoverIndex: number) => void; - onEdit?: (item: ListItemType) => void; - onDelete?: (item: ListItemType) => void; - onDuplicate?: (item: ListItemType) => void; -}; - -const ListItem: React.FC<Props> = ({ item, path, index, title, subtitle, onMove, onEdit, onDelete, onDuplicate }) => { - const { t } = useTranslation(); - - const ref = useRef<HTMLDivElement>(null); - const [anchorEl, setAnchorEl] = useState<Element | null>(null); - - const [{ handlerId }, drop] = useDrop<DragItem, any, any>({ - accept: path, - collect(monitor) { - return { handlerId: monitor.getHandlerId() }; - }, - hover(item: DragItem, monitor: DropTargetMonitor) { - if (!ref.current) { - return; - } - const dragIndex = item.index; - const hoverIndex = index; - - if (dragIndex === hoverIndex) { - return; - } - - const hoverBoundingRect = ref.current?.getBoundingClientRect(); - const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2; - const clientOffset = monitor.getClientOffset(); - const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top; - - if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) { - return; - } - - if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) { - return; - } - - isFunction(onMove) && onMove(dragIndex, hoverIndex); - - item.index = hoverIndex; - }, - }); - - const [{ isDragging }, drag] = useDrag({ - type: path, - item: () => { - return { id: item.id, index }; - }, - collect: (monitor) => ({ - isDragging: monitor.isDragging(), - }), - }); - - const handleOpen = (event: React.MouseEvent<Element>) => { - setAnchorEl(event.currentTarget); - }; - - const handleClose = () => { - setAnchorEl(null); - }; - - const handleEdit = (item: ListItemType) => { - isFunction(onEdit) && onEdit(item); - handleClose(); - }; - - const handleDelete = (item: ListItemType) => { - isFunction(onDelete) && onDelete(item); - handleClose(); - }; - - const handleDuplicate = (item: ListItemType) => { - isFunction(onDuplicate) && onDuplicate(item); - handleClose(); - }; - - drag(drop(ref)); - - return ( - <div - ref={ref} - data-handler-id={handlerId} - className={clsx(styles.item, { - ['opacity-25']: isDragging, - })} - > - <div className={styles.meta}> - <h1 className={styles.title}>{title}</h1> - <h2 className={styles.subtitle}>{subtitle}</h2> - </div> - - <div> - <IconButton onClick={handleOpen}> - <MoreVert /> - </IconButton> - - <Menu anchorEl={anchorEl} onClose={handleClose} open={Boolean(anchorEl)}> - <MenuItem onClick={() => handleEdit(item)}> - <ListItemIcon> - <DriveFileRenameOutline className="scale-90" /> - </ListItemIcon> - <ListItemText>{t('builder.common.list.actions.edit')}</ListItemText> - </MenuItem> - - <MenuItem onClick={() => handleDuplicate(item)}> - <ListItemIcon> - <FileCopy className="scale-90" /> - </ListItemIcon> - <ListItemText>{t('builder.common.list.actions.duplicate')}</ListItemText> - </MenuItem> - - <Divider /> - - <Tooltip arrow placement="right" title={t('builder.common.tooltip.delete-item')}> - <div> - <MenuItem onClick={() => handleDelete(item)}> - <ListItemIcon> - <DeleteOutline className="scale-90" /> - </ListItemIcon> - <ListItemText>{t('builder.common.list.actions.delete')}</ListItemText> - </MenuItem> - </div> - </Tooltip> - </Menu> - </div> - </div> - ); -}; - -export default ListItem; diff --git a/client/components/shared/Loading.module.scss b/client/components/shared/Loading.module.scss deleted file mode 100644 index 9559bdbd..00000000 --- a/client/components/shared/Loading.module.scss +++ /dev/null @@ -1,32 +0,0 @@ -.loading { - animation: progress 2s linear infinite; - - @apply fixed top-0 z-50; - @apply bg-primary-500 shadow-primary-500/50 h-0.5 w-screen shadow; -} - -@keyframes progress { - 0% { - left: 0%; - right: 100%; - width: 0; - } - - 10% { - left: 0%; - right: 75%; - width: 25%; - } - - 90% { - left: 75%; - right: 0%; - width: 25%; - } - - 100% { - left: 100%; - right: 0%; - width: 0; - } -} diff --git a/client/components/shared/Loading.tsx b/client/components/shared/Loading.tsx deleted file mode 100644 index 701601f8..00000000 --- a/client/components/shared/Loading.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { useRouter } from 'next/router'; -import { useIsFetching, useIsMutating } from 'react-query'; - -import styles from './Loading.module.scss'; - -const Loading: React.FC = () => { - const { isReady } = useRouter(); - - const isFetching = useIsFetching(); - const isMutating = useIsMutating(); - - if (!isFetching && !isMutating && isReady) { - return null; - } - - return <div className={styles.loading} />; -}; - -export default Loading; diff --git a/client/components/shared/Logo.tsx b/client/components/shared/Logo.tsx deleted file mode 100644 index a8f029e4..00000000 --- a/client/components/shared/Logo.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import clsx from 'clsx'; -import Image from 'next/image'; - -import { useAppSelector } from '@/store/hooks'; - -type Props = { - className?: string; - size?: 256 | 96 | 64 | 48 | 40 | 32 | 24 | 16; -}; - -const Logo: React.FC<Props> = ({ size = 64, className }) => { - const theme = useAppSelector((state) => state.build.theme); - - return ( - <Image - alt="Reactive Resume" - src={`/logo/${theme}.svg`} - className={clsx('rounded', className)} - width={size} - height={size} - priority - /> - ); -}; - -export default Logo; diff --git a/client/components/shared/Markdown.tsx b/client/components/shared/Markdown.tsx deleted file mode 100644 index 8e613abe..00000000 --- a/client/components/shared/Markdown.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import clsx from 'clsx'; -import isEmpty from 'lodash/isEmpty'; -import ReactMarkdown from 'react-markdown'; -import rehypeKatex from 'rehype-katex'; -import remarkGfm from 'remark-gfm'; -import remarkMath from 'remark-math'; - -type Props = { - children?: string; - className?: string; -}; - -const Markdown: React.FC<Props> = ({ className, children }) => { - if (!children || isEmpty(children)) return null; - - return ( - <ReactMarkdown - rehypePlugins={[rehypeKatex]} - className={clsx('markdown', className)} - remarkPlugins={[remarkGfm, remarkMath]} - > - {children} - </ReactMarkdown> - ); -}; - -export default Markdown; diff --git a/client/components/shared/MarkdownSupported.tsx b/client/components/shared/MarkdownSupported.tsx deleted file mode 100644 index 2fb46904..00000000 --- a/client/components/shared/MarkdownSupported.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Link } from '@mui/material'; -import { Trans, useTranslation } from 'next-i18next'; - -const MarkdownSupported: React.FC = () => { - const { t } = useTranslation(); - - return ( - <span className="inline-block pt-1 opacity-75"> - <Trans t={t} i18nKey="common.markdown.help-text"> - This section supports - <Link href="https://www.markdownguide.org/cheat-sheet/" target="_blank" rel="noreferrer"> - markdown - </Link> - formatting. - </Trans> - </span> - ); -}; - -export default MarkdownSupported; diff --git a/client/components/shared/ResumeInput.tsx b/client/components/shared/ResumeInput.tsx deleted file mode 100644 index 6f6d3232..00000000 --- a/client/components/shared/ResumeInput.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { TextField } from '@mui/material'; -import { DatePicker } from '@mui/x-date-pickers/DatePicker'; -import dayjs from 'dayjs'; -import get from 'lodash/get'; -import isEmpty from 'lodash/isEmpty'; -import { useEffect, useState } from 'react'; - -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setResumeState } from '@/store/resume/resumeSlice'; - -import MarkdownSupported from './MarkdownSupported'; - -interface Props { - type?: 'text' | 'textarea' | 'date'; - label: string; - path: string; - className?: string; - markdownSupported?: boolean; -} - -const ResumeInput: React.FC<Props> = ({ type = 'text', label, path, className, markdownSupported = false }) => { - const dispatch = useAppDispatch(); - - const stateValue = useAppSelector((state) => get(state.resume.present, path, '')); - - useEffect(() => { - setValue(stateValue); - }, [stateValue]); - - const [value, setValue] = useState<string>(stateValue); - - const onChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => { - setValue(event.target.value); - dispatch(setResumeState({ path, value: event.target.value })); - }; - - const onChangeValue = (value: string) => { - setValue(value); - dispatch(setResumeState({ path, value })); - }; - - if (type === 'textarea') { - return ( - <TextField - rows={5} - multiline - label={label} - value={value} - onChange={onChange} - className={className} - helperText={markdownSupported && <MarkdownSupported />} - /> - ); - } - - if (type === 'date') { - return ( - <DatePicker - openTo="year" - label={label} - className={className} - views={['year', 'month', 'day']} - value={isEmpty(value) ? null : dayjs(value)} - onChange={(date: dayjs.Dayjs | null) => { - if (!date) return onChangeValue(''); - if (dayjs(date).isValid()) return onChangeValue(dayjs(date).format('YYYY-MM-DD')); - }} - /> - ); - } - - return <TextField type={type} label={label} value={value} onChange={onChange} className={className} />; -}; - -export default ResumeInput; diff --git a/client/components/shared/ThemeSwitch.tsx b/client/components/shared/ThemeSwitch.tsx deleted file mode 100644 index 2b414a09..00000000 --- a/client/components/shared/ThemeSwitch.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { styled, Switch } from '@mui/material'; - -const ThemeSwitch = styled(Switch)(({ theme }) => ({ - width: 62, - height: 34, - padding: 7, - '& .MuiSwitch-switchBase': { - margin: 1, - padding: 0, - transform: 'translateX(6px)', - '&.Mui-checked': { - color: '#fff', - transform: 'translateX(22px)', - '& .MuiSwitch-thumb:before': { - backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent( - '#fff', - )}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')`, - }, - '& + .MuiSwitch-track': { - opacity: 1, - backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be', - }, - }, - }, - '& .MuiSwitch-thumb': { - backgroundColor: theme.palette.mode === 'dark' ? '#003892' : '#001e3c', - width: 32, - height: 32, - '&:before': { - content: "''", - position: 'absolute', - width: '100%', - height: '100%', - left: 0, - top: 0, - backgroundRepeat: 'no-repeat', - backgroundPosition: 'center', - backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent( - '#fff', - )}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`, - }, - }, - '& .MuiSwitch-track': { - opacity: 1, - backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be', - borderRadius: 20 / 2, - }, -})); - -export default ThemeSwitch; diff --git a/client/components/ui/Separator.tsx b/client/components/ui/Separator.tsx deleted file mode 100644 index 91d1894f..00000000 --- a/client/components/ui/Separator.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import * as SeparatorPrimitive from '@radix-ui/react-separator'; -import * as React from 'react'; - -import { cn } from '@/utils/styles'; - -const Separator = React.forwardRef< - React.ElementRef<typeof SeparatorPrimitive.Root>, - React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> ->(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => ( - <SeparatorPrimitive.Root - ref={ref} - decorative={decorative} - orientation={orientation} - className={cn( - 'shrink-0 dark:bg-zinc-900 bg-zinc-100', - orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', - className, - )} - {...props} - /> -)); - -Separator.displayName = SeparatorPrimitive.Root.displayName; - -export { Separator }; diff --git a/client/config/colors.ts b/client/config/colors.ts deleted file mode 100644 index b62d9bd3..00000000 --- a/client/config/colors.ts +++ /dev/null @@ -1,20 +0,0 @@ -export const hexColorPattern = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i; - -export const colorOptions: string[] = [ - '#f44336', - '#e91e63', - '#9c27b0', - '#673ab7', - '#3f51b5', - '#4896d5', - '#03a9f4', - '#00bcd4', - '#009688', - '#4caf50', - '#8bc34a', - '#cddc39', - '#ffeb3b', - '#ffc107', - '#222222', - '#dddddd', -]; diff --git a/client/config/languages.ts b/client/config/languages.ts deleted file mode 100644 index 9a9f3ac3..00000000 --- a/client/config/languages.ts +++ /dev/null @@ -1,58 +0,0 @@ -export type Language = { - code: string; - name: string; - localName?: string; - isRTL?: boolean; -}; - -export const languages: Language[] = [ - { code: 'am', name: 'Amharic', localName: 'አማርኛ' }, - { code: 'ar', name: 'Arabic', localName: 'اَلْعَرَبِيَّةُ', isRTL: true }, - { code: 'bg', name: 'Bulgarian', localName: 'български' }, - { code: 'bn', name: 'Bengali', localName: 'বাংলা' }, - { code: 'ca', name: 'Catalan', localName: 'Valencian' }, - { code: 'cs', name: 'Czech', localName: 'čeština' }, - { code: 'da', name: 'Danish', localName: 'Dansk' }, - { code: 'de', name: 'German', localName: 'Deutsch Formell / Sie' }, - { code: 'el', name: 'Greek', localName: 'Ελληνικά' }, - { code: 'en', name: 'English' }, - { code: 'es', name: 'Spanish', localName: 'Español' }, - { code: 'fa', name: 'Persian', localName: 'فارسی', isRTL: true }, - { code: 'fi', name: 'Finnish', localName: 'Suomi' }, - { code: 'fr', name: 'French', localName: 'Français' }, - { code: 'he', name: 'Hebrew', localName: 'Ivrit', isRTL: true }, - { code: 'hi', name: 'Hindi', localName: 'हिन्दी' }, - { code: 'hu', name: 'Hungarian', localName: 'Magyar' }, - { code: 'id', name: 'Indonesian', localName: 'Bahasa Indonesia' }, - { code: 'it', name: 'Italian', localName: 'Italiano' }, - { code: 'ja', name: 'Japanese', localName: '日本語' }, - { code: 'km', name: 'Khmer', localName: 'ភាសាខ្មែរ' }, - { code: 'kn', name: 'Kannada', localName: 'ಕನ್ನಡ' }, - { code: 'ko', name: 'Korean', localName: '한국어' }, - { code: 'ml', name: 'Malayalam', localName: 'മലയാളം' }, - { code: 'mr', name: 'Marathi', localName: 'मराठी' }, - { code: 'ne', name: 'Nepali', localName: 'नेपाली' }, - { code: 'nl', name: 'Dutch', localName: 'Nederlands' }, - { code: 'no', name: 'Norwegian', localName: 'Norsk' }, - { code: 'or', name: 'Odia', localName: 'ଓଡ଼ିଆ' }, - { code: 'pl', name: 'Polish', localName: 'Polski' }, - { code: 'pt', name: 'Portuguese', localName: 'Português' }, - { code: 'pt-BR', name: 'Brazilian Portuguese', localName: 'Brasil' }, - { code: 'ro', name: 'Romanian', localName: 'limba română' }, - { code: 'ru', name: 'Russian', localName: 'русский' }, - { code: 'sr', name: 'Serbian', localName: 'српски језик' }, - { code: 'sv', name: 'Swedish', localName: 'Svenska' }, - { code: 'ta', name: 'Tamil', localName: 'தமிழ்' }, - { code: 'tr', name: 'Turkish', localName: 'Türkçe' }, - { code: 'uk', name: 'Ukranian', localName: 'Українська мова' }, - { code: 'vi', name: 'Vietnamese', localName: 'Tiếng Việt' }, - { code: 'zh', name: 'Chinese', localName: '中文' }, -].sort((a, b) => a.name.localeCompare(b.name)); - -export const languageMap: Record<string, Language> = languages.reduce( - (acc, lang) => ({ - ...acc, - [lang.code]: lang, - }), - {}, -); diff --git a/client/config/screenshots.ts b/client/config/screenshots.ts deleted file mode 100644 index d174afcc..00000000 --- a/client/config/screenshots.ts +++ /dev/null @@ -1,31 +0,0 @@ -type Screenshot = { - src: string; - alt: string; -}; - -export const screenshots: Screenshot[] = [ - { - src: '/images/screenshots/dashboard.png', - alt: 'Create multiple resumes under one account', - }, - { - src: '/images/screenshots/import-external.png', - alt: 'Import your data from LinkedIn, JSON Resume or Reactive Resume', - }, - { - src: '/images/screenshots/builder.png', - alt: 'Variety of features to personalize your resume to your liking', - }, - { - src: '/images/screenshots/add-section.png', - alt: 'Multiple pre-built sections which can be renamed, or just create your own section', - }, - { - src: '/images/screenshots/page-layout.png', - alt: 'Create multiple pages, manage section layouts as easy as dragging them around', - }, - { - src: '/images/screenshots/preview.png', - alt: 'Get a unique link to your resume which can be shared with anyone for the latest information', - }, -]; diff --git a/client/config/sections.tsx b/client/config/sections.tsx deleted file mode 100644 index b0d6f356..00000000 --- a/client/config/sections.tsx +++ /dev/null @@ -1,270 +0,0 @@ -import { - Architecture, - CardGiftcard, - Category, - Coffee, - Download, - EmojiEvents, - FontDownload, - Groups, - Language, - Link as LinkIcon, - Map, - Margin, - MenuBook, - Palette, - Person, - Sailing, - School, - Settings as SettingsIcon, - Share, - Style, - Twitter, - VolunteerActivism, - Work, -} from '@mui/icons-material'; -import isEmpty from 'lodash/isEmpty'; -import { Section as SectionRecord, SectionType } from 'schema'; - -import Basics from '@/components/build/LeftSidebar/sections/Basics'; -import Location from '@/components/build/LeftSidebar/sections/Location'; -import Profiles from '@/components/build/LeftSidebar/sections/Profiles'; -import Section from '@/components/build/LeftSidebar/sections/Section'; -import CustomCSS from '@/components/build/RightSidebar/sections/CustomCSS'; -import Export from '@/components/build/RightSidebar/sections/Export'; -import Layout from '@/components/build/RightSidebar/sections/Layout'; -import Links from '@/components/build/RightSidebar/sections/Links'; -import Settings from '@/components/build/RightSidebar/sections/Settings'; -import Sharing from '@/components/build/RightSidebar/sections/Sharing'; -import Templates from '@/components/build/RightSidebar/sections/Templates'; -import Theme from '@/components/build/RightSidebar/sections/Theme'; -import Typography from '@/components/build/RightSidebar/sections/Typography'; -import { SidebarSection } from '@/types/app'; - -export const left: SidebarSection[] = [ - { - id: 'basics', - icon: <Person />, - component: <Basics />, - }, - { - id: 'location', - icon: <Map />, - component: <Location />, - }, - { - id: 'profiles', - icon: <Twitter />, - component: <Profiles />, - }, - { - id: 'work', - icon: <Work />, - component: ( - <Section - type={'work'} - addMore={true} - path="sections.work" - titleKey="name" - subtitleKey="position" - isEditable - isHideable - /> - ), - }, - { - id: 'education', - icon: <School />, - component: ( - <Section - type={'education'} - path="sections.education" - titleKey="institution" - subtitleKey="area" - isEditable - isHideable - /> - ), - }, - { - id: 'awards', - icon: <EmojiEvents />, - component: ( - <Section type={'awards'} path="sections.awards" titleKey="title" subtitleKey="awarder" isEditable isHideable /> - ), - }, - { - id: 'certifications', - icon: <CardGiftcard />, - component: ( - <Section - type={'certifications'} - path="sections.certifications" - titleKey="name" - subtitleKey="issuer" - isEditable - isHideable - /> - ), - }, - { - id: 'publications', - icon: <MenuBook />, - component: ( - <Section - type={'publications'} - path="sections.publications" - titleKey="name" - subtitleKey="publisher" - isEditable - isHideable - /> - ), - }, - { - id: 'skills', - icon: <Architecture />, - component: ( - <Section type={'skills'} path="sections.skills" titleKey="name" subtitleKey="level" isEditable isHideable /> - ), - }, - { - id: 'languages', - icon: <Language />, - component: ( - <Section type={'languages'} path="sections.languages" titleKey="name" subtitleKey="level" isEditable isHideable /> - ), - }, - { - id: 'interests', - icon: <Sailing />, - component: ( - <Section - type={'interests'} - path="sections.interests" - titleKey="name" - subtitleKey="keywords" - isEditable - isHideable - /> - ), - }, - { - id: 'volunteer', - icon: <VolunteerActivism />, - component: ( - <Section - type={'volunteer'} - path="sections.volunteer" - titleKey="organization" - subtitleKey="position" - isEditable - isHideable - /> - ), - }, - { - id: 'projects', - icon: <Coffee />, - component: ( - <Section - type={'projects'} - path="sections.projects" - titleKey="name" - subtitleKey="description" - isEditable - isHideable - /> - ), - }, - { - id: 'references', - icon: <Groups />, - component: ( - <Section - type={'references'} - path="sections.references" - titleKey="name" - subtitleKey="relationship" - isEditable - isHideable - /> - ), - }, -]; - -export const right: SidebarSection[] = [ - { - id: 'templates', - icon: <Category />, - component: <Templates />, - }, - { - id: 'layout', - icon: <Margin />, - component: <Layout />, - }, - { - id: 'typography', - icon: <FontDownload />, - component: <Typography />, - }, - { - id: 'theme', - icon: <Palette />, - component: <Theme />, - }, - { - id: 'css', - icon: <Style />, - component: <CustomCSS />, - }, - { - id: 'sharing', - icon: <Share />, - component: <Sharing />, - }, - { - id: 'export', - icon: <Download />, - component: <Export />, - }, - { - id: 'settings', - icon: <SettingsIcon />, - component: <Settings />, - }, - { - id: 'links', - icon: <LinkIcon />, - component: <Links />, - }, -]; - -export const getSectionsByType = (sections: Record<string, SectionRecord>, type: SectionType): SectionRecord[] => { - if (isEmpty(sections)) return []; - - return Object.entries(sections).reduce((acc, [id, section]) => { - if (section.type.startsWith(type) && section.isDuplicated) { - return [...acc, { ...section, id }]; - } - - return acc; - }, [] as SectionRecord[]); -}; - -export const getCustomSections = (sections: Record<string, SectionRecord>): SectionRecord[] => { - if (isEmpty(sections)) return []; - - return Object.entries(sections).reduce((acc, [id, section]) => { - if (section.type === 'custom') { - return [...acc, { ...section, id }]; - } - - return acc; - }, [] as SectionRecord[]); -}; - -const sections = [...left, ...right]; - -export default sections; diff --git a/client/config/theme.ts b/client/config/theme.ts deleted file mode 100644 index 2bc6548f..00000000 --- a/client/config/theme.ts +++ /dev/null @@ -1,88 +0,0 @@ -import { createTheme, ThemeOptions } from '@mui/material/styles'; - -const theme: ThemeOptions = { - typography: { - fontSize: 12, - fontFamily: '"IBM Plex Sans", sans-serif', - }, - components: { - MuiButton: { - defaultProps: { - size: 'small', - variant: 'contained', - disableElevation: true, - }, - styleOverrides: { - root: { - textTransform: 'none', - padding: '6px 20px', - }, - }, - }, - MuiTextField: { - defaultProps: { - variant: 'outlined', - }, - }, - MuiInputBase: { - styleOverrides: { - input: { - boxShadow: 'none !important', - }, - }, - }, - MuiAppBar: { - styleOverrides: { - root: { - zIndex: 30, - }, - }, - }, - MuiTooltip: { - styleOverrides: { - tooltip: { - fontSize: 12, - }, - }, - }, - MuiDrawer: { - styleOverrides: { - root: { - zIndex: 40, - }, - paper: { - border: 'none', - }, - }, - }, - MuiModal: { - defaultProps: { - componentsProps: { - backdrop: { - className: 'backdrop-blur-sm', - }, - }, - }, - }, - }, -}; - -export const lightTheme = createTheme({ - ...theme, - palette: { - mode: 'light', - background: { default: '#fafafa', paper: '#f4f4f5' }, - primary: { main: '#18181b' }, - secondary: { main: '#14b8a6' }, - }, -}); - -export const darkTheme = createTheme({ - ...theme, - palette: { - mode: 'dark', - background: { default: '#09090b', paper: '#18181b' }, - primary: { main: '#f4f4f5' }, - secondary: { main: '#0d9488' }, - }, -}); diff --git a/client/constants/flags.ts b/client/constants/flags.ts deleted file mode 100644 index f78838b7..00000000 --- a/client/constants/flags.ts +++ /dev/null @@ -1,3 +0,0 @@ -import env from '@beam-australia/react-env'; - -export const FLAG_DISABLE_SIGNUPS = env('FLAG_DISABLE_SIGNUPS') === 'true'; diff --git a/client/constants/index.ts b/client/constants/index.ts deleted file mode 100644 index c0db8868..00000000 --- a/client/constants/index.ts +++ /dev/null @@ -1,23 +0,0 @@ -// React Queries -export const FONTS_QUERY = 'fonts'; -export const RESUMES_QUERY = 'resumes'; - -// Regular Expressions -export const VALID_URL_REGEX = /[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&/=]*)/; - -// Date Formats -export const FILENAME_TIMESTAMP = 'DDMMYYYYHHmmss'; - -// Links -export const DOCS_URL = 'https://docs.rxresu.me'; -export const DONATION_URL = 'https://paypal.me/amruthde'; -export const TRANSLATE_URL = 'https://translate.rxresu.me/'; -export const DIGITALOCEAN_URL = 'https://pillai.xyz/digitalocean'; -export const REDDIT_URL = 'https://www.reddit.com/r/reactiveresume/'; -export const GITHUB_URL = 'https://github.com/AmruthPillai/Reactive-Resume'; -export const PRODUCT_HUNT_URL = 'https://www.producthunt.com/posts/reactive-resume-v3'; -export const GITHUB_ISSUES_URL = 'https://github.com/AmruthPillai/Reactive-Resume/issues/new/choose'; - -// Default Error Message -export const DEFAULT_ERROR_MESSAGE = - 'Something went wrong while performing this action, please report this issue on GitHub.'; diff --git a/client/constants/tilt.ts b/client/constants/tilt.ts deleted file mode 100644 index 927e634a..00000000 --- a/client/constants/tilt.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { ReactParallaxTiltProps } from 'react-parallax-tilt'; - -export const defaultTiltProps: ReactParallaxTiltProps = { - scale: 1.05, - tiltMaxAngleX: 8, - tiltMaxAngleY: 8, - perspective: 1400, - glareEnable: true, - glareMaxOpacity: 0.1, - glareColor: '#fafafa', -}; diff --git a/client/data/testimonials.ts b/client/data/testimonials.ts deleted file mode 100644 index 372e7403..00000000 --- a/client/data/testimonials.ts +++ /dev/null @@ -1,38 +0,0 @@ -export type Testimony = { - name: string; - message: string; -}; - -const testimonials: Testimony[] = [ - { - name: 'Yogeshwar B.', - message: `Hi Amruth! First off, many thanks for making RxResume! It was love at first sight for me when I saw it was a FOSS resume-builder with such a polished UI. It's been of great help for me as I've been applying to MS programs in international universities. The generated resume is slick as hell, and I spent a fraction of the time building it that I would have spent, had I chosen the "Microsoft Word/Google Docs" route. And the best thing was I spent absolutely no money on it!`, - }, - { - name: 'Chandani B.', - message: `Hi Amruth, Thank you for creating reactive resume and keeping it open source. I am about to use it in updating my profile and therefore wanted to express my gratitude. -As a new enthusiast with no previous background in coding, I thought it would be amazing to connect with you to learn more. Thanks`, - }, - { - name: 'Aadith R.', - message: `Hey, I just found out about Reactive Resume through a co-worker and it's damn good. Minimalist, Contains all the necessary things and is also editable.`, - }, - { - name: 'Krzysztof W.', - message: `I have just used Your CV builder to make something that jus might get me a job. Very nice website and so easy to use, perfect outcome. if i get the job i'll "buy you coffee" for sure i will recommend it to friends`, - }, - { - name: 'Bharat M.', - message: `Hi Amruth, I Just came across your open-source app, Reactive Resume while trying to search for some good resume builders online. I can't express how useful it is! I wish I found it earlier than yesterday! :D I appreciate your work. From now on, I'm gonna recommend the app to whoever I feel could make good use of it! Thank you very much for your work! I will remember this and would like to buy you coffee as soon as I can. What's better than donating for such a good cause! Thanks again. Have a great day!`, - }, - { - name: 'Shlok C.', - message: `Hey Amruth, I recently stumbled upon reactive resume and have started playing around with it. Kudos to you for building such an awesome open-source resume building tool..... Best wishes!`, - }, - { - name: 'Joao R.', - message: `Hi Amruth, Let me congratulate you on the awesome RxResume. After long and extensive searches on the internet for a good and clean CV generator, RxResume is truly a gem. I've been using it to create all my CVs.`, - }, -]; - -export default testimonials; diff --git a/client/modals/auth/ForgotPasswordModal.tsx b/client/modals/auth/ForgotPasswordModal.tsx deleted file mode 100644 index d28bd198..00000000 --- a/client/modals/auth/ForgotPasswordModal.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import { joiResolver } from '@hookform/resolvers/joi'; -import { Password } from '@mui/icons-material'; -import { Button, TextField } from '@mui/material'; -import Joi from 'joi'; -import { useTranslation } from 'next-i18next'; -import { Controller, useForm } from 'react-hook-form'; -import { useMutation } from 'react-query'; - -import BaseModal from '@/components/shared/BaseModal'; -import { forgotPassword, ForgotPasswordParams } from '@/services/auth'; -import { ServerError } from '@/services/axios'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setModalState } from '@/store/modal/modalSlice'; - -type FormData = { - email: string; -}; - -const defaultState: FormData = { - email: '', -}; - -const schema = Joi.object({ - email: Joi.string() - .email({ tlds: { allow: false } }) - .required(), -}); - -const ForgotPasswordModal: React.FC = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const { open: isOpen } = useAppSelector((state) => state.modal['auth.forgot']); - - const { mutate, isLoading } = useMutation<void, ServerError, ForgotPasswordParams>(forgotPassword); - - const { reset, control, handleSubmit } = useForm<FormData>({ - defaultValues: defaultState, - resolver: joiResolver(schema), - }); - - const handleClose = () => { - dispatch(setModalState({ modal: 'auth.forgot', state: { open: false } })); - reset(); - }; - - const onSubmit = ({ email }: FormData) => { - mutate({ email }, { onSettled: handleClose }); - }; - - return ( - <> - <BaseModal - icon={<Password />} - isOpen={isOpen} - heading={t('modals.auth.forgot-password.heading')} - handleClose={handleClose} - footerChildren={ - <Button type="submit" disabled={isLoading} onClick={handleSubmit(onSubmit)}> - {t('modals.auth.forgot-password.actions.send-email')} - </Button> - } - > - <div className="grid gap-4"> - <p>{t('modals.auth.forgot-password.body')}</p> - - <form className="grid gap-4 xl:w-2/3"> - <Controller - name="email" - control={control} - render={({ field, fieldState }) => ( - <TextField - autoFocus - label={t('modals.auth.forgot-password.form.email.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - </form> - - <p className="text-xs">{t('modals.auth.forgot-password.help-text')}</p> - </div> - </BaseModal> - </> - ); -}; - -export default ForgotPasswordModal; diff --git a/client/modals/auth/LoginModal.tsx b/client/modals/auth/LoginModal.tsx deleted file mode 100644 index 51e9c1af..00000000 --- a/client/modals/auth/LoginModal.tsx +++ /dev/null @@ -1,173 +0,0 @@ -import env from '@beam-australia/react-env'; -import { joiResolver } from '@hookform/resolvers/joi'; -import { Login, Visibility, VisibilityOff } from '@mui/icons-material'; -import { Button, IconButton, InputAdornment, TextField } from '@mui/material'; -import { CredentialResponse, GoogleLogin } from '@react-oauth/google'; -import Joi from 'joi'; -import isEmpty from 'lodash/isEmpty'; -import { Trans, useTranslation } from 'next-i18next'; -import { useMemo, useState } from 'react'; -import { Controller, useForm } from 'react-hook-form'; -import toast from 'react-hot-toast'; -import { useIsMutating, useMutation } from 'react-query'; - -import BaseModal from '@/components/shared/BaseModal'; -import { FLAG_DISABLE_SIGNUPS } from '@/constants/flags'; -import { login, LoginParams, loginWithGoogle, LoginWithGoogleParams } from '@/services/auth'; -import { ServerError } from '@/services/axios'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setModalState } from '@/store/modal/modalSlice'; - -type FormData = { - identifier: string; - password: string; -}; - -const defaultState: FormData = { - identifier: '', - password: '', -}; - -const schema = Joi.object({ - identifier: Joi.string().required(), - password: Joi.string().min(6).required(), -}); - -const LoginModal: React.FC = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const [showPassword, setShowPassword] = useState(false); - - const isMutating = useIsMutating(); - const isLoading = useMemo(() => isMutating > 0, [isMutating]); - - const { open: isOpen } = useAppSelector((state) => state.modal['auth.login']); - - const { reset, control, handleSubmit } = useForm<FormData>({ - defaultValues: defaultState, - resolver: joiResolver(schema), - }); - - const { mutateAsync: loginMutation } = useMutation<void, ServerError, LoginParams>(login); - - const { mutateAsync: loginWithGoogleMutation } = useMutation<void, ServerError, LoginWithGoogleParams>( - loginWithGoogle, - ); - - const handleClose = () => { - dispatch(setModalState({ modal: 'auth.login', state: { open: false } })); - reset(); - }; - - const onSubmit = async ({ identifier, password }: FormData) => { - await loginMutation({ identifier, password }); - - handleClose(); - }; - - const handleCreateAccount = () => { - handleClose(); - dispatch(setModalState({ modal: 'auth.register', state: { open: true } })); - }; - - const handleRecoverAccount = () => { - handleClose(); - dispatch(setModalState({ modal: 'auth.forgot', state: { open: true } })); - }; - - const handleLoginWithGoogle = async (response: CredentialResponse) => { - if (response.credential) { - await loginWithGoogleMutation({ credential: response.credential }, { onError: handleGoogleLoginError }); - - handleClose(); - } - }; - - const handleGoogleLoginError = () => { - toast.error("Google doesn't seem to be responding, please try logging in using email/password instead."); - }; - - const PasswordVisibility = (): React.ReactElement => { - const handleToggle = () => setShowPassword((showPassword) => !showPassword); - - return ( - <InputAdornment position="end"> - <IconButton edge="end" onClick={handleToggle}> - {showPassword ? <VisibilityOff /> : <Visibility />} - </IconButton> - </InputAdornment> - ); - }; - - return ( - <BaseModal - icon={<Login />} - isOpen={isOpen} - heading={t('modals.auth.login.heading')} - handleClose={handleClose} - footerChildren={ - <div className="flex gap-4"> - {!isEmpty(env('GOOGLE_CLIENT_ID')) && ( - <GoogleLogin onSuccess={handleLoginWithGoogle} onError={handleGoogleLoginError} /> - )} - - <Button type="submit" onClick={handleSubmit(onSubmit)} disabled={isLoading}> - {t('modals.auth.login.actions.login')} - </Button> - </div> - } - > - <p>{t('modals.auth.login.body')}</p> - - <form className="grid gap-4"> - <Controller - name="identifier" - control={control} - render={({ field, fieldState }) => ( - <TextField - autoFocus - label={t('modals.auth.login.form.username.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message || t('modals.auth.login.form.username.help-text')} - {...field} - /> - )} - /> - - <Controller - name="password" - control={control} - render={({ field, fieldState }) => ( - <TextField - type={showPassword ? 'text' : 'password'} - label={t('modals.auth.login.form.password.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - InputProps={{ endAdornment: <PasswordVisibility /> }} - {...field} - /> - )} - /> - </form> - - {!FLAG_DISABLE_SIGNUPS && ( - <p className="text-xs"> - <Trans t={t} i18nKey="modals.auth.login.register-text"> - If you don't have one, you can <a onClick={handleCreateAccount}>create an account here.</a> - </Trans> - </p> - )} - - <p className="text-xs"> - <Trans t={t} i18nKey="modals.auth.login.recover-text"> - In case you have forgotten your password, you can - <a onClick={handleRecoverAccount}>recover your account here.</a> - </Trans> - </p> - </BaseModal> - ); -}; - -export default LoginModal; diff --git a/client/modals/auth/RegisterModal.tsx b/client/modals/auth/RegisterModal.tsx deleted file mode 100644 index 3c7d8a8b..00000000 --- a/client/modals/auth/RegisterModal.tsx +++ /dev/null @@ -1,195 +0,0 @@ -import env from '@beam-australia/react-env'; -import { joiResolver } from '@hookform/resolvers/joi'; -import { HowToReg } from '@mui/icons-material'; -import { Button, TextField } from '@mui/material'; -import { CredentialResponse, GoogleLogin } from '@react-oauth/google'; -import Joi from 'joi'; -import isEmpty from 'lodash/isEmpty'; -import { Trans, useTranslation } from 'next-i18next'; -import { Controller, useForm } from 'react-hook-form'; -import toast from 'react-hot-toast'; -import { useMutation } from 'react-query'; - -import BaseModal from '@/components/shared/BaseModal'; -import { loginWithGoogle, LoginWithGoogleParams, register as registerUser, RegisterParams } from '@/services/auth'; -import { ServerError } from '@/services/axios'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setModalState } from '@/store/modal/modalSlice'; - -type FormData = { - name: string; - username: string; - email: string; - password: string; - confirmPassword: string; -}; - -const defaultState: FormData = { - name: '', - username: '', - email: '', - password: '', - confirmPassword: '', -}; - -const schema = Joi.object({ - name: Joi.string().required(), - username: Joi.string() - .lowercase() - .min(3) - .regex(/^[a-z0-9-]+$/, 'only lowercase characters, numbers and hyphens') - .required(), - email: Joi.string() - .email({ tlds: { allow: false } }) - .required(), - password: Joi.string().min(6).required(), - confirmPassword: Joi.string().min(6).required().valid(Joi.ref('password')), -}); - -const RegisterModal: React.FC = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const { open: isOpen } = useAppSelector((state) => state.modal['auth.register']); - - const { reset, control, handleSubmit } = useForm<FormData>({ - defaultValues: defaultState, - resolver: joiResolver(schema), - }); - - const { mutateAsync, isLoading } = useMutation<void, ServerError, RegisterParams>(registerUser); - - const { mutateAsync: loginWithGoogleMutation } = useMutation<void, ServerError, LoginWithGoogleParams>( - loginWithGoogle, - ); - - const handleClose = () => { - dispatch(setModalState({ modal: 'auth.register', state: { open: false } })); - reset(); - }; - - const onSubmit = async ({ name, username, email, password }: FormData) => { - await mutateAsync({ name, username, email, password }); - handleClose(); - }; - - const handleLogin = () => { - handleClose(); - dispatch(setModalState({ modal: 'auth.login', state: { open: true } })); - }; - - const handleLoginWithGoogle = async (response: CredentialResponse) => { - if (response.credential) { - await loginWithGoogleMutation({ credential: response.credential }, { onError: handleGoogleLoginError }); - - handleClose(); - } - }; - - const handleGoogleLoginError = () => { - toast("Google doesn't seem to be responding, please try logging in using email/password instead."); - }; - - return ( - <BaseModal - icon={<HowToReg />} - isOpen={isOpen} - heading={t('modals.auth.register.heading')} - handleClose={handleClose} - footerChildren={ - <div className="flex gap-4"> - {!isEmpty(env('GOOGLE_CLIENT_ID')) && ( - <GoogleLogin onSuccess={handleLoginWithGoogle} onError={handleGoogleLoginError} /> - )} - - <Button type="submit" onClick={handleSubmit(onSubmit)} disabled={isLoading}> - {t('modals.auth.register.actions.register')} - </Button> - </div> - } - > - <p>{t('modals.auth.register.body')}</p> - - <form className="grid gap-4 md:grid-cols-2"> - <Controller - name="name" - control={control} - render={({ field, fieldState }) => ( - <TextField - autoFocus - label={t('modals.auth.register.form.name.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="username" - control={control} - render={({ field, fieldState }) => ( - <TextField - label={t('modals.auth.register.form.username.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="email" - control={control} - render={({ field, fieldState }) => ( - <TextField - type="email" - label={t('modals.auth.register.form.email.label')} - className="col-span-2" - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="password" - control={control} - render={({ field, fieldState }) => ( - <TextField - type="password" - label={t('modals.auth.register.form.password.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="confirmPassword" - control={control} - render={({ field, fieldState }) => ( - <TextField - type="password" - label={t('modals.auth.register.form.confirm-password.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - </form> - - <p className="text-xs"> - <Trans t={t} i18nKey="modals.auth.register.loginText"> - If you already have an account, you can <a onClick={handleLogin}>login here</a>. - </Trans> - </p> - </BaseModal> - ); -}; - -export default RegisterModal; diff --git a/client/modals/auth/ResetPasswordModal.tsx b/client/modals/auth/ResetPasswordModal.tsx deleted file mode 100644 index 5a03f781..00000000 --- a/client/modals/auth/ResetPasswordModal.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import { joiResolver } from '@hookform/resolvers/joi'; -import { LockReset } from '@mui/icons-material'; -import { Button, TextField } from '@mui/material'; -import Joi from 'joi'; -import get from 'lodash/get'; -import isEmpty from 'lodash/isEmpty'; -import { useTranslation } from 'next-i18next'; -import { Controller, useForm } from 'react-hook-form'; -import { useMutation } from 'react-query'; - -import BaseModal from '@/components/shared/BaseModal'; -import { resetPassword, ResetPasswordParams } from '@/services/auth'; -import { ServerError } from '@/services/axios'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { ModalState, setModalState } from '@/store/modal/modalSlice'; - -type Payload = { - resetToken?: string; -}; - -type FormData = { - password: string; - confirmPassword: string; -}; - -const defaultState: FormData = { - password: '', - confirmPassword: '', -}; - -const schema = Joi.object({ - password: Joi.string().min(6).required(), - confirmPassword: Joi.string().min(6).required().valid(Joi.ref('password')), -}); - -const ResetPasswordModal: React.FC = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const { open: isOpen, payload } = useAppSelector((state) => state.modal['auth.reset']) as ModalState; - const resetData = get(payload, 'item', {}) as Payload; - - const { mutateAsync, isLoading } = useMutation<void, ServerError, ResetPasswordParams>(resetPassword); - - const { reset, control, handleSubmit } = useForm<FormData>({ - defaultValues: defaultState, - resolver: joiResolver(schema), - }); - - const handleClose = () => { - dispatch(setModalState({ modal: 'auth.reset', state: { open: false } })); - reset(); - }; - - const onSubmit = async ({ password }: FormData) => { - if (!resetData.resetToken || isEmpty(resetData.resetToken)) return; - - await mutateAsync({ resetToken: resetData.resetToken, password }); - - handleClose(); - }; - - return ( - <BaseModal - icon={<LockReset />} - isOpen={isOpen} - heading={t('modals.auth.reset-password.heading')} - handleClose={handleClose} - footerChildren={ - <Button type="submit" disabled={isLoading} onClick={handleSubmit(onSubmit)}> - {t('modals.auth.reset-password.actions.set-password')} - </Button> - } - > - <p>{t('modals.auth.reset-password.body')}</p> - - <form className="grid gap-4 md:grid-cols-2"> - <Controller - name="password" - control={control} - render={({ field, fieldState }) => ( - <TextField - autoFocus - type="password" - label={t('modals.auth.reset-password.form.password.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="confirmPassword" - control={control} - render={({ field, fieldState }) => ( - <TextField - type="password" - label={t('modals.auth.reset-password.form.confirm-password.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - </form> - </BaseModal> - ); -}; - -export default ResetPasswordModal; diff --git a/client/modals/auth/UserProfileModal.tsx b/client/modals/auth/UserProfileModal.tsx deleted file mode 100644 index b83f831b..00000000 --- a/client/modals/auth/UserProfileModal.tsx +++ /dev/null @@ -1,159 +0,0 @@ -import { joiResolver } from '@hookform/resolvers/joi'; -import { CrisisAlert, ManageAccounts } from '@mui/icons-material'; -import { Button, Divider, TextField } from '@mui/material'; -import Joi from 'joi'; -import { useRouter } from 'next/router'; -import { Trans, useTranslation } from 'next-i18next'; -import { useEffect, useMemo, useState } from 'react'; -import { Controller, useForm } from 'react-hook-form'; -import { useMutation } from 'react-query'; - -import Avatar from '@/components/shared/Avatar'; -import BaseModal from '@/components/shared/BaseModal'; -import { deleteAccount, updateProfile, UpdateProfileParams } from '@/services/auth'; -import { ServerError } from '@/services/axios'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setModalState } from '@/store/modal/modalSlice'; - -type FormData = { - name: string; - email: string; -}; - -const defaultState: FormData = { - name: '', - email: '', -}; - -const schema = Joi.object({ - name: Joi.string().required(), - email: Joi.string() - .email({ tlds: { allow: false } }) - .required(), -}); - -const UserProfileModal = () => { - const router = useRouter(); - - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const [deleteText, setDeleteText] = useState<string>(''); - const isDeleteTextValid = useMemo(() => deleteText.toLowerCase() === 'delete', [deleteText]); - - const user = useAppSelector((state) => state.auth.user); - const { open: isOpen } = useAppSelector((state) => state.modal['auth.profile']); - - const { mutateAsync: deleteAccountMutation } = useMutation<void, ServerError>(deleteAccount); - const { mutateAsync: updateProfileMutation } = useMutation<void, ServerError, UpdateProfileParams>(updateProfile); - - const { reset, getFieldState, control, handleSubmit } = useForm<FormData>({ - defaultValues: defaultState, - resolver: joiResolver(schema), - }); - - useEffect(() => { - if (user && !getFieldState('name').isTouched && !getFieldState('email').isTouched) { - reset({ name: user.name, email: user.email }); - } - }, [user]); - - const handleClose = () => { - dispatch(setModalState({ modal: 'auth.profile', state: { open: false } })); - }; - - const handleUpdate = handleSubmit(async (data) => { - handleClose(); - await updateProfileMutation({ name: data.name }); - }); - - const handleDelete = async () => { - await deleteAccountMutation(); - handleClose(); - - router.push('/'); - }; - - return ( - <BaseModal isOpen={isOpen} handleClose={handleClose} heading="Your Account" icon={<ManageAccounts />}> - <div className="grid gap-4"> - <form className="grid gap-4 xl:w-2/3"> - <div className="flex items-center gap-4"> - <Avatar interactive={false} /> - - <div className="grid flex-1 gap-1.5"> - <Controller - name="name" - control={control} - render={({ field, fieldState }) => ( - <TextField - autoFocus - label={t('modals.auth.profile.form.name.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <p className="pl-4 text-[10.25px] opacity-50"> - <Trans t={t} i18nKey="modals.auth.profile.form.avatar.help-text"> - You can update your profile picture on{' '} - <a href="https://gravatar.com/" target="_blank" rel="noreferrer"> - Gravatar - </a> - </Trans> - </p> - </div> - </div> - - <Controller - name="email" - control={control} - render={({ field, fieldState }) => ( - <TextField - disabled - label={t('modals.auth.profile.form.email.label')} - error={!!fieldState.error} - helperText={t('modals.auth.profile.form.email.help-text')} - {...field} - /> - )} - /> - - <div> - <Button onClick={handleUpdate}>{t('modals.auth.profile.actions.save')}</Button> - </div> - </form> - - <div className="my-2"> - <Divider /> - </div> - - <div className="flex items-center gap-2"> - <CrisisAlert /> - <h5 className="font-medium">{t('modals.auth.profile.delete-account.heading')}</h5> - </div> - - <p className="text-xs opacity-75">{t('modals.auth.profile.delete-account.body', { keyword: 'delete' })}</p> - - <div className="flex max-w-xs flex-col gap-4"> - <TextField - value={deleteText} - placeholder="Type 'delete' to confirm" - onChange={(e) => setDeleteText(e.target.value)} - /> - - <div> - <Button variant="contained" color="error" disabled={!isDeleteTextValid} onClick={handleDelete}> - {t('modals.auth.profile.delete-account.actions.delete')} - </Button> - </div> - </div> - </div> - </BaseModal> - ); -}; - -export default UserProfileModal; diff --git a/client/modals/builder/sections/AwardModal.tsx b/client/modals/builder/sections/AwardModal.tsx deleted file mode 100644 index 1eb555c8..00000000 --- a/client/modals/builder/sections/AwardModal.tsx +++ /dev/null @@ -1,188 +0,0 @@ -import { joiResolver } from '@hookform/resolvers/joi'; -import { Add, DriveFileRenameOutline } from '@mui/icons-material'; -import { Button, TextField } from '@mui/material'; -import { DatePicker } from '@mui/x-date-pickers/DatePicker'; -import { Award, SectionPath } from 'schema'; -import dayjs from 'dayjs'; -import Joi from 'joi'; -import get from 'lodash/get'; -import isEmpty from 'lodash/isEmpty'; -import { useTranslation } from 'next-i18next'; -import { useEffect, useMemo } from 'react'; -import { Controller, useForm } from 'react-hook-form'; - -import BaseModal from '@/components/shared/BaseModal'; -import MarkdownSupported from '@/components/shared/MarkdownSupported'; -import { VALID_URL_REGEX } from '@/constants/index'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setModalState } from '@/store/modal/modalSlice'; -import { addItem, editItem } from '@/store/resume/resumeSlice'; - -type FormData = Award; - -const path: SectionPath = 'sections.awards'; - -const defaultState: FormData = { - title: '', - awarder: '', - date: '', - url: '', - summary: '', -}; - -const schema = Joi.object<FormData>().keys({ - id: Joi.string(), - title: Joi.string().required(), - awarder: Joi.string().required(), - date: Joi.string().allow(''), - url: Joi.string().pattern(VALID_URL_REGEX, { name: 'valid URL' }).allow(''), - summary: Joi.string().allow(''), -}); - -const AwardModal: React.FC = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const heading = useAppSelector((state) => get(state.resume.present, `${path}.name`)); - const { open: isOpen, payload } = useAppSelector((state) => state.modal[`builder.${path}`]); - - const item: FormData = get(payload, 'item', null); - const isEditMode = useMemo(() => !!item, [item]); - - const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]); - const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]); - - const { reset, control, handleSubmit } = useForm<FormData>({ - defaultValues: defaultState, - resolver: joiResolver(schema), - }); - - const onSubmit = (formData: FormData) => { - if (isEditMode) { - dispatch(editItem({ path: `${path}.items`, value: formData })); - } else { - dispatch(addItem({ path: `${path}.items`, value: formData })); - } - - handleClose(); - }; - - const handleClose = () => { - dispatch( - setModalState({ - modal: `builder.${path}`, - state: { open: false }, - }), - ); - - reset(defaultState); - }; - - useEffect(() => { - if (!isEmpty(item)) { - reset(item); - } - }, [item, reset]); - - return ( - <BaseModal - icon={isEditMode ? <DriveFileRenameOutline /> : <Add />} - isOpen={isOpen} - handleClose={handleClose} - heading={isEditMode ? editText : addText} - footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>} - > - <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}> - <Controller - name="title" - control={control} - render={({ field, fieldState }) => ( - <TextField - required - autoFocus - label={t('builder.common.form.title.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="awarder" - control={control} - render={({ field, fieldState }) => ( - <TextField - required - label={t('builder.leftSidebar.sections.awards.form.awarder.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="date" - control={control} - render={({ field, fieldState }) => ( - <DatePicker - openTo="year" - inputRef={field.ref} - label={t('builder.common.form.date.label')} - value={dayjs(field.value)} - views={['year', 'month', 'day']} - slots={{ - textField: (params) => ( - <TextField - {...params} - error={!!fieldState.error} - helperText={fieldState.error?.message || params.inputProps?.placeholder} - /> - ), - }} - onChange={(date: dayjs.Dayjs | null) => { - date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD')); - }} - /> - )} - /> - - <Controller - name="url" - control={control} - render={({ field, fieldState }) => ( - <TextField - label={t('builder.common.form.url.label')} - placeholder="https://" - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="summary" - control={control} - render={({ field, fieldState }) => ( - <TextField - multiline - minRows={3} - maxRows={6} - label={t('builder.common.form.summary.label')} - className="col-span-2" - error={!!fieldState.error} - helperText={fieldState.error?.message || <MarkdownSupported />} - {...field} - /> - )} - /> - <input type="submit" style={{ display: 'none' }} /> - </form> - </BaseModal> - ); -}; - -export default AwardModal; diff --git a/client/modals/builder/sections/CertificateModal.tsx b/client/modals/builder/sections/CertificateModal.tsx deleted file mode 100644 index c5addd4e..00000000 --- a/client/modals/builder/sections/CertificateModal.tsx +++ /dev/null @@ -1,188 +0,0 @@ -import { joiResolver } from '@hookform/resolvers/joi'; -import { Add, DriveFileRenameOutline } from '@mui/icons-material'; -import { Button, TextField } from '@mui/material'; -import { DatePicker } from '@mui/x-date-pickers/DatePicker'; -import { Certificate, SectionPath } from 'schema'; -import dayjs from 'dayjs'; -import Joi from 'joi'; -import get from 'lodash/get'; -import isEmpty from 'lodash/isEmpty'; -import { useTranslation } from 'next-i18next'; -import { useEffect, useMemo } from 'react'; -import { Controller, useForm } from 'react-hook-form'; - -import BaseModal from '@/components/shared/BaseModal'; -import MarkdownSupported from '@/components/shared/MarkdownSupported'; -import { VALID_URL_REGEX } from '@/constants/index'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setModalState } from '@/store/modal/modalSlice'; -import { addItem, editItem } from '@/store/resume/resumeSlice'; - -type FormData = Certificate; - -const path: SectionPath = 'sections.certifications'; - -const defaultState: FormData = { - name: '', - issuer: '', - date: '', - url: '', - summary: '', -}; - -const schema = Joi.object<FormData>().keys({ - id: Joi.string(), - name: Joi.string().required(), - issuer: Joi.string().required(), - date: Joi.string().allow(''), - url: Joi.string().pattern(VALID_URL_REGEX, { name: 'valid URL' }).allow(''), - summary: Joi.string().allow(''), -}); - -const CertificateModal: React.FC = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const heading = useAppSelector((state) => get(state.resume.present, `${path}.name`)); - const { open: isOpen, payload } = useAppSelector((state) => state.modal[`builder.${path}`]); - const item: FormData = get(payload, 'item', null); - - const isEditMode = useMemo(() => !!item, [item]); - - const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]); - const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]); - - const { reset, control, handleSubmit } = useForm<FormData>({ - defaultValues: defaultState, - resolver: joiResolver(schema), - }); - - const onSubmit = (formData: FormData) => { - if (isEditMode) { - dispatch(editItem({ path: `${path}.items`, value: formData })); - } else { - dispatch(addItem({ path: `${path}.items`, value: formData })); - } - - handleClose(); - }; - - const handleClose = () => { - dispatch( - setModalState({ - modal: `builder.${path}`, - state: { open: false }, - }), - ); - - reset(defaultState); - }; - - useEffect(() => { - if (!isEmpty(item)) { - reset(item); - } - }, [item, reset]); - - return ( - <BaseModal - icon={isEditMode ? <DriveFileRenameOutline /> : <Add />} - isOpen={isOpen} - handleClose={handleClose} - heading={isEditMode ? editText : addText} - footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>} - > - <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}> - <Controller - name="name" - control={control} - render={({ field, fieldState }) => ( - <TextField - required - autoFocus - label={t('builder.common.form.name.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="issuer" - control={control} - render={({ field, fieldState }) => ( - <TextField - required - label={t('builder.leftSidebar.sections.certifications.form.issuer.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="date" - control={control} - render={({ field, fieldState }) => ( - <DatePicker - openTo="year" - inputRef={field.ref} - label={t('builder.common.form.date.label')} - value={dayjs(field.value)} - views={['year', 'month', 'day']} - slots={{ - textField: (params) => ( - <TextField - {...params} - error={!!fieldState.error} - helperText={fieldState.error?.message || params.inputProps?.placeholder} - /> - ), - }} - onChange={(date: dayjs.Dayjs | null) => { - date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD')); - }} - /> - )} - /> - - <Controller - name="url" - control={control} - render={({ field, fieldState }) => ( - <TextField - label={t('builder.common.form.url.label')} - placeholder="https://" - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="summary" - control={control} - render={({ field, fieldState }) => ( - <TextField - multiline - minRows={3} - maxRows={6} - label={t('builder.common.form.summary.label')} - className="col-span-2" - error={!!fieldState.error} - helperText={fieldState.error?.message || <MarkdownSupported />} - {...field} - /> - )} - /> - <input type="submit" style={{ display: 'none' }} /> - </form> - </BaseModal> - ); -}; - -export default CertificateModal; diff --git a/client/modals/builder/sections/CustomModal.tsx b/client/modals/builder/sections/CustomModal.tsx deleted file mode 100644 index 33d20b1d..00000000 --- a/client/modals/builder/sections/CustomModal.tsx +++ /dev/null @@ -1,298 +0,0 @@ -import { joiResolver } from '@hookform/resolvers/joi'; -import { Add, DriveFileRenameOutline } from '@mui/icons-material'; -import { Button, Slider, TextField } from '@mui/material'; -import { DatePicker } from '@mui/x-date-pickers/DatePicker'; -import dayjs from 'dayjs'; -import Joi from 'joi'; -import get from 'lodash/get'; -import isEmpty from 'lodash/isEmpty'; -import { useTranslation } from 'next-i18next'; -import { useEffect, useMemo } from 'react'; -import { Controller, useForm } from 'react-hook-form'; -import { Custom } from 'schema'; - -import ArrayInput from '@/components/shared/ArrayInput'; -import BaseModal from '@/components/shared/BaseModal'; -import MarkdownSupported from '@/components/shared/MarkdownSupported'; -import { VALID_URL_REGEX } from '@/constants/index'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setModalState } from '@/store/modal/modalSlice'; -import { addItem, editItem } from '@/store/resume/resumeSlice'; - -type FormData = Custom; - -export type CustomModalPayload = { - path: string; - item?: Custom; -}; - -const defaultState: FormData = { - title: '', - subtitle: '', - date: { - start: '', - end: '', - }, - url: '', - level: '', - levelNum: 0, - summary: '', - keywords: [], -}; - -const schema = Joi.object<FormData>().keys({ - id: Joi.string(), - title: Joi.string().required(), - subtitle: Joi.string().allow(''), - date: Joi.object().keys({ - start: Joi.string().allow(''), - end: Joi.string().allow(''), - }), - url: Joi.string().pattern(VALID_URL_REGEX, { name: 'valid URL' }).allow(''), - level: Joi.string().allow(''), - levelNum: Joi.number().min(0).max(10), - summary: Joi.string().allow(''), - keywords: Joi.array().items(Joi.string().optional()), -}); - -const CustomModal: React.FC = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const { open: isOpen, payload } = useAppSelector((state) => state.modal['builder.sections.custom']); - - const path: string = get(payload, 'path', 'sections.custom'); - const item: FormData = get(payload, 'item', null); - const isEditMode = useMemo(() => !!item, [item]); - - const heading = useAppSelector((state) => get(state.resume.present, `${path}.name`)); - - const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]); - const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]); - - const { reset, control, handleSubmit } = useForm<FormData>({ - defaultValues: defaultState, - resolver: joiResolver(schema), - }); - - const onSubmit = (formData: FormData) => { - if (isEditMode) { - dispatch(editItem({ path: `${path}.items`, value: formData })); - } else { - dispatch(addItem({ path: `${path}.items`, value: formData })); - } - - handleClose(); - }; - - const handleClose = () => { - dispatch( - setModalState({ - modal: 'builder.sections.custom', - state: { open: false }, - }), - ); - - reset(defaultState); - }; - - useEffect(() => { - if (!isEmpty(item)) { - reset(item); - } - }, [item, reset]); - - return ( - <BaseModal - icon={isEditMode ? <DriveFileRenameOutline /> : <Add />} - isOpen={isOpen} - handleClose={handleClose} - heading={isEditMode ? editText : addText} - footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>} - > - <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}> - <Controller - name="title" - control={control} - render={({ field, fieldState }) => ( - <TextField - required - autoFocus - label={t('builder.common.form.title.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="subtitle" - control={control} - render={({ field, fieldState }) => ( - <TextField - label={t('builder.common.form.subtitle.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="date.start" - control={control} - render={({ field, fieldState }) => ( - <DatePicker - openTo="year" - inputRef={field.ref} - label={t('builder.common.form.start-date.label')} - value={dayjs(field.value)} - views={['year', 'month', 'day']} - slots={{ - textField: (params) => ( - <TextField - {...params} - error={!!fieldState.error} - helperText={fieldState.error?.message || params.inputProps?.placeholder} - /> - ), - }} - onChange={(date: dayjs.Dayjs | null) => { - date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD')); - }} - /> - )} - /> - - <Controller - name="date.end" - control={control} - render={({ field, fieldState }) => ( - <DatePicker - openTo="year" - inputRef={field.ref} - label={t('builder.common.form.end-date.label')} - value={dayjs(field.value)} - views={['year', 'month', 'day']} - slots={{ - textField: (params) => ( - <TextField - {...params} - error={!!fieldState.error} - helperText={fieldState.error?.message || t('builder.common.form.end-date.help-text')} - /> - ), - }} - onChange={(date: dayjs.Dayjs | null) => { - date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD')); - }} - /> - )} - /> - - <Controller - name="url" - control={control} - render={({ field, fieldState }) => ( - <TextField - label={t('builder.common.form.url.label')} - placeholder="https://" - className="col-span-2" - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="level" - control={control} - render={({ field, fieldState }) => ( - <TextField - label={t('builder.common.form.level.label')} - className="col-span-2" - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="levelNum" - control={control} - render={({ field }) => ( - <div className="col-span-2"> - <h4 className="mb-3 font-semibold">{t('builder.common.form.levelNum.label')}</h4> - - <div className="px-10"> - <Slider - name={field.name} - value={field.value} - onChange={(_, value) => field.onChange(value as number)} - marks={[ - { - value: 0, - label: 'Disable', - }, - { - value: 1, - label: 'Beginner', - }, - { - value: 10, - label: 'Expert', - }, - ]} - min={0} - max={10} - defaultValue={0} - color="secondary" - valueLabelDisplay="auto" - aria-label={t('builder.common.form.levelNum.label')} - /> - </div> - </div> - )} - /> - - <Controller - name="summary" - control={control} - render={({ field, fieldState }) => ( - <TextField - multiline - minRows={3} - maxRows={6} - className="col-span-2" - error={!!fieldState.error} - label={t('builder.common.form.summary.label')} - helperText={fieldState.error?.message || <MarkdownSupported />} - {...field} - /> - )} - /> - - <Controller - name="keywords" - control={control} - render={({ field, fieldState }) => ( - <ArrayInput - label={t('builder.common.form.keywords.label')} - value={field.value as string[]} - onChange={field.onChange} - errors={fieldState.error} - className="col-span-2" - /> - )} - /> - <input type="submit" style={{ display: 'none' }} /> - </form> - </BaseModal> - ); -}; - -export default CustomModal; diff --git a/client/modals/builder/sections/EducationModal.tsx b/client/modals/builder/sections/EducationModal.tsx deleted file mode 100644 index 114c3fa3..00000000 --- a/client/modals/builder/sections/EducationModal.tsx +++ /dev/null @@ -1,275 +0,0 @@ -import { joiResolver } from '@hookform/resolvers/joi'; -import { Add, DriveFileRenameOutline } from '@mui/icons-material'; -import { Button, TextField } from '@mui/material'; -import { DatePicker } from '@mui/x-date-pickers/DatePicker'; -import dayjs from 'dayjs'; -import Joi from 'joi'; -import get from 'lodash/get'; -import isEmpty from 'lodash/isEmpty'; -import { useTranslation } from 'next-i18next'; -import { useEffect, useMemo } from 'react'; -import { Controller, useForm } from 'react-hook-form'; -import { Education, SectionPath } from 'schema'; - -import ArrayInput from '@/components/shared/ArrayInput'; -import BaseModal from '@/components/shared/BaseModal'; -import MarkdownSupported from '@/components/shared/MarkdownSupported'; -import { VALID_URL_REGEX } from '@/constants/index'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setModalState } from '@/store/modal/modalSlice'; -import { addItem, editItem } from '@/store/resume/resumeSlice'; - -type FormData = Education; - -const path: SectionPath = 'sections.education'; - -const defaultState: FormData = { - institution: '', - degree: '', - area: '', - score: '', - date: { - start: '', - end: '', - }, - url: '', - summary: '', - courses: [], -}; - -const schema = Joi.object<FormData>().keys({ - id: Joi.string(), - institution: Joi.string().required(), - degree: Joi.string().required(), - area: Joi.string().allow(''), - score: Joi.string().allow(''), - date: Joi.object().keys({ - start: Joi.string().allow(''), - end: Joi.string().allow(''), - }), - url: Joi.string().pattern(VALID_URL_REGEX, { name: 'valid URL' }).allow(''), - summary: Joi.string().allow(''), - courses: Joi.array().items(Joi.string().optional()), -}); - -const EducationModal: React.FC = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const heading = useAppSelector((state) => get(state.resume.present, `${path}.name`)); - const { open: isOpen, payload } = useAppSelector((state) => state.modal[`builder.${path}`]); - - const item: FormData = get(payload, 'item', null); - const isEditMode = useMemo(() => !!item, [item]); - - const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]); - const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]); - - const { - reset, - control, - handleSubmit, - formState: { isDirty }, - } = useForm<FormData>({ - defaultValues: defaultState, - resolver: joiResolver(schema), - }); - - const onSubmit = (formData: FormData) => { - if (isEditMode) { - dispatch(editItem({ path: `${path}.items`, value: formData })); - } else { - dispatch(addItem({ path: `${path}.items`, value: formData })); - } - - handleClose(); - }; - - const handleClose = () => { - dispatch( - setModalState({ - modal: `builder.${path}`, - state: { open: false }, - }), - ); - - reset(defaultState); - }; - - const handleModalClose = () => { - if (isDirty) { - if (confirm('You have unsaved changes, Do you want to discard the changes?')) handleClose(); - else return; - } - handleClose(); - }; - - useEffect(() => { - if (!isEmpty(item)) { - reset(item); - } - }, [item, reset]); - - return ( - <BaseModal - icon={isEditMode ? <DriveFileRenameOutline /> : <Add />} - isOpen={isOpen} - handleClose={handleModalClose} - heading={isEditMode ? editText : addText} - footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>} - > - <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}> - <Controller - name="institution" - control={control} - render={({ field, fieldState }) => ( - <TextField - required - autoFocus - label={t('builder.leftSidebar.sections.education.form.institution.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="degree" - control={control} - render={({ field, fieldState }) => ( - <TextField - required - label={t('builder.leftSidebar.sections.education.form.degree.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="area" - control={control} - render={({ field, fieldState }) => ( - <TextField - label={t('builder.leftSidebar.sections.education.form.area-study.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="score" - control={control} - render={({ field, fieldState }) => ( - <TextField - label={t('builder.leftSidebar.sections.education.form.grade.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="date.start" - control={control} - render={({ field, fieldState }) => ( - <DatePicker - openTo="year" - inputRef={field.ref} - label={t('builder.common.form.start-date.label')} - value={dayjs(field.value)} - views={['year', 'month', 'day']} - slotProps={{ - textField: { - error: !!fieldState.error, - helperText: fieldState.error?.message || t('builder.common.form.start-date.help-text'), - }, - }} - onChange={(date: dayjs.Dayjs | null) => { - date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD')); - }} - /> - )} - /> - - <Controller - name="date.end" - control={control} - render={({ field, fieldState }) => ( - <DatePicker - openTo="year" - inputRef={field.ref} - label={t('builder.common.form.end-date.label')} - value={dayjs(field.value)} - views={['year', 'month', 'day']} - slotProps={{ - textField: { - error: !!fieldState.error, - helperText: fieldState.error?.message || t('builder.common.form.end-date.help-text'), - }, - }} - onChange={(date: dayjs.Dayjs | null) => { - date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD')); - }} - /> - )} - /> - - <Controller - name="url" - control={control} - render={({ field, fieldState }) => ( - <TextField - label={t('builder.common.form.url.label')} - placeholder="https://" - className="col-span-2" - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="summary" - control={control} - render={({ field, fieldState }) => ( - <TextField - multiline - minRows={3} - maxRows={6} - label={t('builder.common.form.summary.label')} - className="col-span-2" - error={!!fieldState.error} - helperText={fieldState.error?.message || <MarkdownSupported />} - {...field} - /> - )} - /> - - <Controller - name="courses" - control={control} - render={({ field, fieldState }) => ( - <ArrayInput - label={t('builder.leftSidebar.sections.education.form.courses.label')} - value={field.value as string[]} - onChange={field.onChange} - errors={fieldState.error} - className="col-span-2" - /> - )} - /> - <input type="submit" style={{ display: 'none' }} /> - </form> - </BaseModal> - ); -}; - -export default EducationModal; diff --git a/client/modals/builder/sections/InterestModal.tsx b/client/modals/builder/sections/InterestModal.tsx deleted file mode 100644 index 54ea8a18..00000000 --- a/client/modals/builder/sections/InterestModal.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import { joiResolver } from '@hookform/resolvers/joi'; -import { Add, DriveFileRenameOutline } from '@mui/icons-material'; -import { Button, TextField } from '@mui/material'; -import { Interest, SectionPath } from 'schema'; -import Joi from 'joi'; -import get from 'lodash/get'; -import isEmpty from 'lodash/isEmpty'; -import { useTranslation } from 'next-i18next'; -import { useEffect, useMemo } from 'react'; -import { Controller, useForm } from 'react-hook-form'; - -import ArrayInput from '@/components/shared/ArrayInput'; -import BaseModal from '@/components/shared/BaseModal'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setModalState } from '@/store/modal/modalSlice'; -import { addItem, editItem } from '@/store/resume/resumeSlice'; - -type FormData = Interest; - -const path: SectionPath = 'sections.interests'; - -const defaultState: FormData = { - name: '', - keywords: [], -}; - -const schema = Joi.object<FormData>().keys({ - id: Joi.string(), - name: Joi.string().required(), - keywords: Joi.array().items(Joi.string().optional()), -}); - -const InterestModal: React.FC = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const heading = useAppSelector((state) => get(state.resume.present, `${path}.name`)); - const { open: isOpen, payload } = useAppSelector((state) => state.modal[`builder.${path}`]); - - const item: FormData = get(payload, 'item', null); - const isEditMode = useMemo(() => !!item, [item]); - - const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]); - const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]); - - const { reset, control, handleSubmit } = useForm<FormData>({ - defaultValues: defaultState, - resolver: joiResolver(schema), - }); - - const onSubmit = (formData: FormData) => { - if (isEditMode) { - dispatch(editItem({ path: `${path}.items`, value: formData })); - } else { - dispatch(addItem({ path: `${path}.items`, value: formData })); - } - - handleClose(); - }; - - const handleClose = () => { - dispatch( - setModalState({ - modal: `builder.${path}`, - state: { open: false }, - }), - ); - - reset(defaultState); - }; - - useEffect(() => { - if (!isEmpty(item)) { - reset(item); - } - }, [item, reset]); - - return ( - <BaseModal - icon={isEditMode ? <DriveFileRenameOutline /> : <Add />} - isOpen={isOpen} - handleClose={handleClose} - heading={isEditMode ? editText : addText} - footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>} - > - <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}> - <Controller - name="name" - control={control} - render={({ field, fieldState }) => ( - <TextField - required - autoFocus - label={t('builder.common.form.name.label')} - className="col-span-2" - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="keywords" - control={control} - render={({ field, fieldState }) => ( - <ArrayInput - label={t('builder.common.form.keywords.label')} - value={field.value as string[]} - onChange={field.onChange} - errors={fieldState.error} - className="col-span-2" - /> - )} - /> - <input type="submit" style={{ display: 'none' }} /> - </form> - </BaseModal> - ); -}; - -export default InterestModal; diff --git a/client/modals/builder/sections/LanguageModal.tsx b/client/modals/builder/sections/LanguageModal.tsx deleted file mode 100644 index fc3bb6c7..00000000 --- a/client/modals/builder/sections/LanguageModal.tsx +++ /dev/null @@ -1,161 +0,0 @@ -import { joiResolver } from '@hookform/resolvers/joi'; -import { Add, DriveFileRenameOutline } from '@mui/icons-material'; -import { Button, Slider, TextField } from '@mui/material'; -import Joi from 'joi'; -import get from 'lodash/get'; -import isEmpty from 'lodash/isEmpty'; -import { useTranslation } from 'next-i18next'; -import { useEffect, useMemo } from 'react'; -import { Controller, useForm } from 'react-hook-form'; -import { Language, SectionPath } from 'schema'; - -import BaseModal from '@/components/shared/BaseModal'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setModalState } from '@/store/modal/modalSlice'; -import { addItem, editItem } from '@/store/resume/resumeSlice'; - -type FormData = Language; - -const path: SectionPath = 'sections.languages'; - -const defaultState: FormData = { - name: '', - level: '', - levelNum: 0, -}; - -const schema = Joi.object<FormData>().keys({ - id: Joi.string(), - name: Joi.string().required(), - level: Joi.string().required(), - levelNum: Joi.number().min(0).max(10).required(), -}); - -const LanguageModal: React.FC = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const heading = useAppSelector((state) => get(state.resume.present, `${path}.name`)); - const { open: isOpen, payload } = useAppSelector((state) => state.modal[`builder.${path}`]); - - const item: FormData = get(payload, 'item', null); - const isEditMode = useMemo(() => !!item, [item]); - - const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]); - const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]); - - const { reset, control, handleSubmit } = useForm<FormData>({ - defaultValues: defaultState, - resolver: joiResolver(schema), - }); - - const onSubmit = (formData: FormData) => { - if (isEditMode) { - dispatch(editItem({ path: `${path}.items`, value: formData })); - } else { - dispatch(addItem({ path: `${path}.items`, value: formData })); - } - - handleClose(); - }; - - const handleClose = () => { - dispatch( - setModalState({ - modal: `builder.${path}`, - state: { open: false }, - }), - ); - - reset(defaultState); - }; - - useEffect(() => { - if (!isEmpty(item)) { - reset(item); - } - }, [item, reset]); - - return ( - <BaseModal - icon={isEditMode ? <DriveFileRenameOutline /> : <Add />} - isOpen={isOpen} - handleClose={handleClose} - heading={isEditMode ? editText : addText} - footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>} - > - <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}> - <Controller - name="name" - control={control} - render={({ field, fieldState }) => ( - <TextField - required - autoFocus - label={t('builder.common.form.name.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="level" - control={control} - render={({ field, fieldState }) => ( - <TextField - required - label={t('builder.common.form.level.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="levelNum" - control={control} - render={({ field }) => ( - <div className="col-span-2"> - <h4 className="mb-3 font-semibold">{t('builder.common.form.levelNum.label')}</h4> - - <div className="px-10"> - <Slider - name={field.name} - value={field.value} - onChange={(_, value) => field.onChange(value as number)} - marks={[ - { - value: 0, - label: 'Disable', - }, - { - value: 1, - label: 'Beginner', - }, - { - value: 10, - label: 'Expert', - }, - ]} - min={0} - max={10} - defaultValue={0} - color="secondary" - valueLabelDisplay="auto" - aria-label={t('builder.common.form.levelNum.label')} - /> - </div> - </div> - )} - /> - <input type="submit" style={{ display: 'none' }} /> - </form> - </BaseModal> - ); -}; - -export default LanguageModal; diff --git a/client/modals/builder/sections/ProfileModal.tsx b/client/modals/builder/sections/ProfileModal.tsx deleted file mode 100644 index 83210cba..00000000 --- a/client/modals/builder/sections/ProfileModal.tsx +++ /dev/null @@ -1,145 +0,0 @@ -import { joiResolver } from '@hookform/resolvers/joi'; -import { Add, AlternateEmail, DriveFileRenameOutline } from '@mui/icons-material'; -import { Button, TextField } from '@mui/material'; -import { Profile } from 'schema'; -import Joi from 'joi'; -import get from 'lodash/get'; -import isEmpty from 'lodash/isEmpty'; -import { useTranslation } from 'next-i18next'; -import { useEffect, useMemo } from 'react'; -import { Controller, useForm } from 'react-hook-form'; - -import BaseModal from '@/components/shared/BaseModal'; -import { VALID_URL_REGEX } from '@/constants/index'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setModalState } from '@/store/modal/modalSlice'; -import { addItem, editItem } from '@/store/resume/resumeSlice'; - -type FormData = Profile; - -const path = 'sections.profile'; - -const defaultState: FormData = { - network: '', - username: '', - url: '', -}; - -const schema = Joi.object<FormData>({ - id: Joi.string(), - network: Joi.string().required(), - username: Joi.string().required(), - url: Joi.string().pattern(VALID_URL_REGEX, { name: 'valid URL' }).allow(''), -}); - -const ProfileModal: React.FC = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const { open: isOpen, payload } = useAppSelector((state) => state.modal[`builder.${path}`]); - - const item: FormData = get(payload, 'item', null); - const isEditMode = useMemo(() => !!item, [item]); - - const addText = t('builder.common.actions.add', { - token: t('builder.leftSidebar.sections.profiles.heading', { count: 1 }), - }); - const editText = t('builder.common.actions.edit', { - token: t('builder.leftSidebar.sections.profiles.heading', { count: 1 }), - }); - - const { reset, control, handleSubmit } = useForm<FormData>({ - defaultValues: defaultState, - resolver: joiResolver(schema), - }); - - const onSubmit = (formData: FormData) => { - if (isEditMode) { - dispatch(editItem({ path: 'basics.profiles', value: formData })); - } else { - dispatch(addItem({ path: 'basics.profiles', value: formData })); - } - - handleClose(); - }; - - const handleClose = () => { - dispatch( - setModalState({ - modal: `builder.${path}`, - state: { open: false }, - }), - ); - - reset(defaultState); - }; - - useEffect(() => { - if (!isEmpty(item)) { - reset(item); - } - }, [item, reset]); - - return ( - <BaseModal - icon={isEditMode ? <DriveFileRenameOutline /> : <Add />} - isOpen={isOpen} - heading={isEditMode ? editText : addText} - handleClose={handleClose} - footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>} - > - <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}> - <Controller - name="network" - control={control} - render={({ field, fieldState }) => ( - <TextField - required - autoFocus - label={t('builder.leftSidebar.sections.profiles.form.network.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="username" - control={control} - render={({ field, fieldState }) => ( - <TextField - required - label={t('builder.leftSidebar.sections.profiles.form.username.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - InputProps={{ - startAdornment: <AlternateEmail className="mr-2" />, - }} - {...field} - /> - )} - /> - - <Controller - name="url" - control={control} - render={({ field, fieldState }) => ( - <TextField - label={t('builder.common.form.url.label')} - className="col-span-2" - placeholder="https://" - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - <input type="submit" style={{ display: 'none' }} /> - </form> - </BaseModal> - ); -}; - -export default ProfileModal; diff --git a/client/modals/builder/sections/ProjectModal.tsx b/client/modals/builder/sections/ProjectModal.tsx deleted file mode 100644 index d71cac98..00000000 --- a/client/modals/builder/sections/ProjectModal.tsx +++ /dev/null @@ -1,238 +0,0 @@ -import { joiResolver } from '@hookform/resolvers/joi'; -import { Add, DriveFileRenameOutline } from '@mui/icons-material'; -import { Button, TextField } from '@mui/material'; -import { DatePicker } from '@mui/x-date-pickers/DatePicker'; -import { Project, SectionPath } from 'schema'; -import dayjs from 'dayjs'; -import Joi from 'joi'; -import get from 'lodash/get'; -import isEmpty from 'lodash/isEmpty'; -import { useTranslation } from 'next-i18next'; -import { useEffect, useMemo } from 'react'; -import { Controller, useForm } from 'react-hook-form'; - -import ArrayInput from '@/components/shared/ArrayInput'; -import BaseModal from '@/components/shared/BaseModal'; -import MarkdownSupported from '@/components/shared/MarkdownSupported'; -import { VALID_URL_REGEX } from '@/constants/index'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setModalState } from '@/store/modal/modalSlice'; -import { addItem, editItem } from '@/store/resume/resumeSlice'; - -type FormData = Project; - -const path: SectionPath = 'sections.projects'; - -const defaultState: FormData = { - name: '', - description: '', - date: { - start: '', - end: '', - }, - url: '', - summary: '', - keywords: [], -}; - -const schema = Joi.object<FormData>().keys({ - id: Joi.string(), - name: Joi.string().required(), - description: Joi.string().required(), - date: Joi.object().keys({ - start: Joi.string().allow(''), - end: Joi.string().allow(''), - }), - url: Joi.string().pattern(VALID_URL_REGEX, { name: 'valid URL' }).allow(''), - summary: Joi.string().allow(''), - keywords: Joi.array().items(Joi.string().optional()), -}); - -const ProjectModal: React.FC = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const heading = useAppSelector((state) => get(state.resume.present, `${path}.name`)); - const { open: isOpen, payload } = useAppSelector((state) => state.modal[`builder.${path}`]); - - const item: FormData = get(payload, 'item', null); - const isEditMode = useMemo(() => !!item, [item]); - - const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]); - const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]); - - const { reset, control, handleSubmit } = useForm<FormData>({ - defaultValues: defaultState, - resolver: joiResolver(schema), - }); - - const onSubmit = (formData: FormData) => { - if (isEditMode) { - dispatch(editItem({ path: `${path}.items`, value: formData })); - } else { - dispatch(addItem({ path: `${path}.items`, value: formData })); - } - - handleClose(); - }; - - const handleClose = () => { - dispatch( - setModalState({ - modal: `builder.${path}`, - state: { open: false }, - }), - ); - - reset(defaultState); - }; - - useEffect(() => { - if (!isEmpty(item)) { - reset(item); - } - }, [item, reset]); - - return ( - <BaseModal - icon={isEditMode ? <DriveFileRenameOutline /> : <Add />} - isOpen={isOpen} - handleClose={handleClose} - heading={isEditMode ? editText : addText} - footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>} - > - <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}> - <Controller - name="name" - control={control} - render={({ field, fieldState }) => ( - <TextField - required - autoFocus - label={t('builder.common.form.name.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="description" - control={control} - render={({ field, fieldState }) => ( - <TextField - required - label={t('builder.common.form.description.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="date.start" - control={control} - render={({ field, fieldState }) => ( - <DatePicker - openTo="year" - inputRef={field.ref} - label={t('builder.common.form.start-date.label')} - value={dayjs(field.value)} - views={['year', 'month', 'day']} - slots={{ - textField: (params) => ( - <TextField - {...params} - error={!!fieldState.error} - helperText={fieldState.error?.message || params.inputProps?.placeholder} - /> - ), - }} - onChange={(date: dayjs.Dayjs | null) => { - date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD')); - }} - /> - )} - /> - - <Controller - name="date.end" - control={control} - render={({ field, fieldState }) => ( - <DatePicker - openTo="year" - inputRef={field.ref} - label={t('builder.common.form.end-date.label')} - value={dayjs(field.value)} - views={['year', 'month', 'day']} - slots={{ - textField: (params) => ( - <TextField - {...params} - error={!!fieldState.error} - helperText={fieldState.error?.message || t('builder.common.form.end-date.help-text')} - /> - ), - }} - onChange={(date: dayjs.Dayjs | null) => { - date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD')); - }} - /> - )} - /> - - <Controller - name="url" - control={control} - render={({ field, fieldState }) => ( - <TextField - label={t('builder.common.form.url.label')} - placeholder="https://" - className="col-span-2" - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="summary" - control={control} - render={({ field, fieldState }) => ( - <TextField - multiline - minRows={3} - maxRows={6} - label={t('builder.common.form.summary.label')} - className="col-span-2" - error={!!fieldState.error} - helperText={fieldState.error?.message || <MarkdownSupported />} - {...field} - /> - )} - /> - - <Controller - name="keywords" - control={control} - render={({ field, fieldState }) => ( - <ArrayInput - label={t('builder.common.form.keywords.label')} - value={field.value as string[]} - onChange={field.onChange} - errors={fieldState.error} - className="col-span-2" - /> - )} - /> - <input type="submit" style={{ display: 'none' }} /> - </form> - </BaseModal> - ); -}; - -export default ProjectModal; diff --git a/client/modals/builder/sections/PublicationModal.tsx b/client/modals/builder/sections/PublicationModal.tsx deleted file mode 100644 index f0964367..00000000 --- a/client/modals/builder/sections/PublicationModal.tsx +++ /dev/null @@ -1,188 +0,0 @@ -import { joiResolver } from '@hookform/resolvers/joi'; -import { Add, DriveFileRenameOutline } from '@mui/icons-material'; -import { Button, TextField } from '@mui/material'; -import { DatePicker } from '@mui/x-date-pickers/DatePicker'; -import { Publication, SectionPath } from 'schema'; -import dayjs from 'dayjs'; -import Joi from 'joi'; -import get from 'lodash/get'; -import isEmpty from 'lodash/isEmpty'; -import { useTranslation } from 'next-i18next'; -import { useEffect, useMemo } from 'react'; -import { Controller, useForm } from 'react-hook-form'; - -import BaseModal from '@/components/shared/BaseModal'; -import MarkdownSupported from '@/components/shared/MarkdownSupported'; -import { VALID_URL_REGEX } from '@/constants/index'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setModalState } from '@/store/modal/modalSlice'; -import { addItem, editItem } from '@/store/resume/resumeSlice'; - -type FormData = Publication; - -const path: SectionPath = 'sections.publications'; - -const defaultState: FormData = { - name: '', - publisher: '', - date: '', - url: '', - summary: '', -}; - -const schema = Joi.object<FormData>().keys({ - id: Joi.string(), - name: Joi.string().required(), - publisher: Joi.string().required(), - date: Joi.string().allow(''), - url: Joi.string().pattern(VALID_URL_REGEX, { name: 'valid URL' }).allow(''), - summary: Joi.string().allow(''), -}); - -const PublicationModal: React.FC = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const heading = useAppSelector((state) => get(state.resume.present, `${path}.name`)); - const { open: isOpen, payload } = useAppSelector((state) => state.modal[`builder.${path}`]); - - const item: FormData = get(payload, 'item', null); - const isEditMode = useMemo(() => !!item, [item]); - - const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]); - const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]); - - const { reset, control, handleSubmit } = useForm<FormData>({ - defaultValues: defaultState, - resolver: joiResolver(schema), - }); - - const onSubmit = (formData: FormData) => { - if (isEditMode) { - dispatch(editItem({ path: `${path}.items`, value: formData })); - } else { - dispatch(addItem({ path: `${path}.items`, value: formData })); - } - - handleClose(); - }; - - const handleClose = () => { - dispatch( - setModalState({ - modal: `builder.${path}`, - state: { open: false }, - }), - ); - - reset(defaultState); - }; - - useEffect(() => { - if (!isEmpty(item)) { - reset(item); - } - }, [item, reset]); - - return ( - <BaseModal - icon={isEditMode ? <DriveFileRenameOutline /> : <Add />} - isOpen={isOpen} - handleClose={handleClose} - heading={isEditMode ? editText : addText} - footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>} - > - <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}> - <Controller - name="name" - control={control} - render={({ field, fieldState }) => ( - <TextField - required - autoFocus - label={t('builder.common.form.name.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="publisher" - control={control} - render={({ field, fieldState }) => ( - <TextField - required - label={t('builder.leftSidebar.sections.publications.form.publisher.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="date" - control={control} - render={({ field, fieldState }) => ( - <DatePicker - openTo="year" - inputRef={field.ref} - label={t('builder.common.form.date.label')} - value={dayjs(field.value)} - views={['year', 'month', 'day']} - slots={{ - textField: (params) => ( - <TextField - {...params} - error={!!fieldState.error} - helperText={fieldState.error?.message || params.inputProps?.placeholder} - /> - ), - }} - onChange={(date: dayjs.Dayjs | null) => { - date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD')); - }} - /> - )} - /> - - <Controller - name="url" - control={control} - render={({ field, fieldState }) => ( - <TextField - label={t('builder.common.form.url.label')} - placeholder="https://" - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="summary" - control={control} - render={({ field, fieldState }) => ( - <TextField - multiline - minRows={3} - maxRows={6} - label={t('builder.common.form.summary.label')} - className="col-span-2" - error={!!fieldState.error} - helperText={fieldState.error?.message || <MarkdownSupported />} - {...field} - /> - )} - /> - <input type="submit" style={{ display: 'none' }} /> - </form> - </BaseModal> - ); -}; - -export default PublicationModal; diff --git a/client/modals/builder/sections/ReferenceModal.tsx b/client/modals/builder/sections/ReferenceModal.tsx deleted file mode 100644 index dc89ecc4..00000000 --- a/client/modals/builder/sections/ReferenceModal.tsx +++ /dev/null @@ -1,171 +0,0 @@ -import { joiResolver } from '@hookform/resolvers/joi'; -import { Add, DriveFileRenameOutline } from '@mui/icons-material'; -import { Button, TextField } from '@mui/material'; -import { Reference, SectionPath } from 'schema'; -import Joi from 'joi'; -import get from 'lodash/get'; -import isEmpty from 'lodash/isEmpty'; -import { useTranslation } from 'next-i18next'; -import { useEffect, useMemo } from 'react'; -import { Controller, useForm } from 'react-hook-form'; - -import BaseModal from '@/components/shared/BaseModal'; -import MarkdownSupported from '@/components/shared/MarkdownSupported'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setModalState } from '@/store/modal/modalSlice'; -import { addItem, editItem } from '@/store/resume/resumeSlice'; - -type FormData = Reference; - -const path: SectionPath = 'sections.references'; - -const defaultState: FormData = { - name: '', - relationship: '', - phone: '', - email: '', - summary: '', -}; - -const schema = Joi.object<FormData>().keys({ - id: Joi.string(), - name: Joi.string().required(), - relationship: Joi.string().required(), - phone: Joi.string().allow(''), - email: Joi.string().allow(''), - summary: Joi.string().allow(''), -}); - -const ReferenceModal: React.FC = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const heading = useAppSelector((state) => get(state.resume.present, `${path}.name`)); - const { open: isOpen, payload } = useAppSelector((state) => state.modal[`builder.${path}`]); - - const item: FormData = get(payload, 'item', null); - const isEditMode = useMemo(() => !!item, [item]); - - const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]); - const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]); - - const { reset, control, handleSubmit } = useForm<FormData>({ - defaultValues: defaultState, - resolver: joiResolver(schema), - }); - - const onSubmit = (formData: FormData) => { - if (isEditMode) { - dispatch(editItem({ path: `${path}.items`, value: formData })); - } else { - dispatch(addItem({ path: `${path}.items`, value: formData })); - } - - handleClose(); - }; - - const handleClose = () => { - dispatch( - setModalState({ - modal: `builder.${path}`, - state: { open: false }, - }), - ); - - reset(defaultState); - }; - - useEffect(() => { - if (!isEmpty(item)) { - reset(item); - } - }, [item, reset]); - - return ( - <BaseModal - icon={isEditMode ? <DriveFileRenameOutline /> : <Add />} - isOpen={isOpen} - handleClose={handleClose} - heading={isEditMode ? editText : addText} - footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>} - > - <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}> - <Controller - name="name" - control={control} - render={({ field, fieldState }) => ( - <TextField - required - autoFocus - label={t('builder.common.form.name.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="relationship" - control={control} - render={({ field, fieldState }) => ( - <TextField - required - label={t('builder.leftSidebar.sections.references.form.relationship.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="phone" - control={control} - render={({ field, fieldState }) => ( - <TextField - label={t('builder.common.form.phone.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="email" - control={control} - render={({ field, fieldState }) => ( - <TextField - label={t('builder.common.form.email.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="summary" - control={control} - render={({ field, fieldState }) => ( - <TextField - multiline - minRows={3} - maxRows={6} - label={t('builder.common.form.summary.label')} - className="col-span-2" - error={!!fieldState.error} - helperText={fieldState.error?.message || <MarkdownSupported />} - {...field} - /> - )} - /> - <input type="submit" style={{ display: 'none' }} /> - </form> - </BaseModal> - ); -}; - -export default ReferenceModal; diff --git a/client/modals/builder/sections/SkillModal.tsx b/client/modals/builder/sections/SkillModal.tsx deleted file mode 100644 index eb55ac0d..00000000 --- a/client/modals/builder/sections/SkillModal.tsx +++ /dev/null @@ -1,178 +0,0 @@ -import { joiResolver } from '@hookform/resolvers/joi'; -import { Add, DriveFileRenameOutline } from '@mui/icons-material'; -import { Button, Slider, TextField } from '@mui/material'; -import Joi from 'joi'; -import get from 'lodash/get'; -import isEmpty from 'lodash/isEmpty'; -import { useTranslation } from 'next-i18next'; -import { useEffect, useMemo } from 'react'; -import { Controller, useForm } from 'react-hook-form'; -import { SectionPath, Skill } from 'schema'; - -import ArrayInput from '@/components/shared/ArrayInput'; -import BaseModal from '@/components/shared/BaseModal'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setModalState } from '@/store/modal/modalSlice'; -import { addItem, editItem } from '@/store/resume/resumeSlice'; - -type FormData = Skill; - -const path: SectionPath = 'sections.skills'; - -const defaultState: FormData = { - name: '', - level: '', - levelNum: 0, - keywords: [], -}; - -const schema = Joi.object<FormData>().keys({ - id: Joi.string(), - name: Joi.string().required(), - level: Joi.string().allow(''), - levelNum: Joi.number().min(0).max(10).required(), - keywords: Joi.array().items(Joi.string().optional()), -}); - -const SkillModal: React.FC = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const heading = useAppSelector((state) => get(state.resume.present, `${path}.name`)); - const { open: isOpen, payload } = useAppSelector((state) => state.modal[`builder.${path}`]); - - const item: FormData = get(payload, 'item', null); - const isEditMode = useMemo(() => !!item, [item]); - - const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]); - const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]); - - const { reset, control, handleSubmit } = useForm<FormData>({ - defaultValues: defaultState, - resolver: joiResolver(schema), - }); - - const onSubmit = (formData: FormData) => { - if (isEditMode) { - dispatch(editItem({ path: `${path}.items`, value: formData })); - } else { - dispatch(addItem({ path: `${path}.items`, value: formData })); - } - - handleClose(); - }; - - const handleClose = () => { - dispatch( - setModalState({ - modal: `builder.${path}`, - state: { open: false }, - }), - ); - - reset(defaultState); - }; - - useEffect(() => { - if (!isEmpty(item)) { - reset(item); - } - }, [item, reset]); - - return ( - <BaseModal - icon={isEditMode ? <DriveFileRenameOutline /> : <Add />} - isOpen={isOpen} - handleClose={handleClose} - heading={isEditMode ? editText : addText} - footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>} - > - <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}> - <Controller - name="name" - control={control} - render={({ field, fieldState }) => ( - <TextField - required - autoFocus - label={t('builder.common.form.name.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="level" - control={control} - render={({ field, fieldState }) => ( - <TextField - label={t('builder.common.form.level.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="levelNum" - control={control} - render={({ field }) => ( - <div className="col-span-2"> - <h4 className="mb-3 font-semibold">{t('builder.common.form.levelNum.label')}</h4> - - <div className="px-3"> - <Slider - name={field.name} - value={field.value} - onChange={(_, value) => field.onChange(value as number)} - marks={[ - { - value: 0, - label: 'Disable', - }, - { - value: 1, - label: 'Beginner', - }, - { - value: 10, - label: 'Expert', - }, - ]} - min={0} - max={10} - defaultValue={0} - color="secondary" - valueLabelDisplay="auto" - aria-label={t('builder.common.form.levelNum.label')} - /> - </div> - </div> - )} - /> - - <Controller - name="keywords" - control={control} - render={({ field, fieldState }) => ( - <ArrayInput - label={t('builder.common.form.keywords.label')} - value={field.value} - onChange={field.onChange} - errors={fieldState.error} - className="col-span-2" - /> - )} - /> - - <input type="submit" style={{ display: 'none' }} /> - </form> - </BaseModal> - ); -}; - -export default SkillModal; diff --git a/client/modals/builder/sections/VolunteerModal.tsx b/client/modals/builder/sections/VolunteerModal.tsx deleted file mode 100644 index 4fb98a13..00000000 --- a/client/modals/builder/sections/VolunteerModal.tsx +++ /dev/null @@ -1,221 +0,0 @@ -import { joiResolver } from '@hookform/resolvers/joi'; -import { Add, DriveFileRenameOutline } from '@mui/icons-material'; -import { Button, TextField } from '@mui/material'; -import { DatePicker } from '@mui/x-date-pickers/DatePicker'; -import { SectionPath, Volunteer } from 'schema'; -import dayjs from 'dayjs'; -import Joi from 'joi'; -import get from 'lodash/get'; -import isEmpty from 'lodash/isEmpty'; -import { useTranslation } from 'next-i18next'; -import { useEffect, useMemo } from 'react'; -import { Controller, useForm } from 'react-hook-form'; - -import BaseModal from '@/components/shared/BaseModal'; -import MarkdownSupported from '@/components/shared/MarkdownSupported'; -import { VALID_URL_REGEX } from '@/constants/index'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setModalState } from '@/store/modal/modalSlice'; -import { addItem, editItem } from '@/store/resume/resumeSlice'; - -type FormData = Volunteer; - -const path: SectionPath = 'sections.volunteer'; - -const defaultState: FormData = { - organization: '', - position: '', - date: { - start: '', - end: '', - }, - url: '', - summary: '', -}; - -const schema = Joi.object<FormData>().keys({ - id: Joi.string(), - organization: Joi.string().required(), - position: Joi.string().required(), - date: Joi.object().keys({ - start: Joi.string().allow(''), - end: Joi.string().allow(''), - }), - url: Joi.string().pattern(VALID_URL_REGEX, { name: 'valid URL' }).allow(''), - summary: Joi.string().allow(''), -}); - -const VolunteerModal: React.FC = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const heading = useAppSelector((state) => get(state.resume.present, `${path}.name`)); - const { open: isOpen, payload } = useAppSelector((state) => state.modal[`builder.${path}`]); - - const item: FormData = get(payload, 'item', null); - const isEditMode = useMemo(() => !!item, [item]); - - const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]); - const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]); - - const { reset, control, handleSubmit } = useForm<FormData>({ - defaultValues: defaultState, - resolver: joiResolver(schema), - }); - - const onSubmit = (formData: FormData) => { - if (isEditMode) { - dispatch(editItem({ path: `${path}.items`, value: formData })); - } else { - dispatch(addItem({ path: `${path}.items`, value: formData })); - } - - handleClose(); - }; - - const handleClose = () => { - dispatch( - setModalState({ - modal: `builder.${path}`, - state: { open: false }, - }), - ); - - reset(defaultState); - }; - - useEffect(() => { - if (!isEmpty(item)) { - reset(item); - } - }, [item, reset]); - - return ( - <BaseModal - icon={isEditMode ? <DriveFileRenameOutline /> : <Add />} - isOpen={isOpen} - handleClose={handleClose} - heading={isEditMode ? editText : addText} - footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>} - > - <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}> - <Controller - name="organization" - control={control} - render={({ field, fieldState }) => ( - <TextField - required - autoFocus - label={t('builder.leftSidebar.sections.volunteer.form.organization.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="position" - control={control} - render={({ field, fieldState }) => ( - <TextField - required - label={t('builder.common.form.position.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="date.start" - control={control} - render={({ field, fieldState }) => ( - <DatePicker - openTo="year" - inputRef={field.ref} - label={t('builder.common.form.start-date.label')} - value={dayjs(field.value)} - views={['year', 'month', 'day']} - slots={{ - textField: (params) => ( - <TextField - {...params} - error={!!fieldState.error} - helperText={fieldState.error?.message || params.inputProps?.placeholder} - /> - ), - }} - onChange={(date: dayjs.Dayjs | null) => { - date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD')); - }} - /> - )} - /> - - <Controller - name="date.end" - control={control} - render={({ field, fieldState }) => ( - <DatePicker - openTo="year" - inputRef={field.ref} - label={t('builder.common.form.end-date.label')} - value={dayjs(field.value)} - views={['year', 'month', 'day']} - slots={{ - textField: (params) => ( - <TextField - {...params} - error={!!fieldState.error} - helperText={fieldState.error?.message || t('builder.common.form.end-date.help-text')} - /> - ), - }} - onChange={(date: dayjs.Dayjs | null) => { - date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD')); - }} - /> - )} - /> - - <Controller - name="url" - control={control} - render={({ field, fieldState }) => ( - <TextField - label={t('builder.common.form.url.label')} - placeholder="https://" - className="col-span-2" - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="summary" - control={control} - render={({ field, fieldState }) => ( - <TextField - multiline - minRows={3} - maxRows={6} - label={t('builder.common.form.summary.label')} - className="col-span-2" - error={!!fieldState.error} - helperText={fieldState.error?.message || <MarkdownSupported />} - {...field} - /> - )} - /> - <input type="submit" style={{ display: 'none' }} /> - </form> - </BaseModal> - ); -}; - -export default VolunteerModal; diff --git a/client/modals/builder/sections/WorkModal.tsx b/client/modals/builder/sections/WorkModal.tsx deleted file mode 100644 index cc5c8781..00000000 --- a/client/modals/builder/sections/WorkModal.tsx +++ /dev/null @@ -1,227 +0,0 @@ -import { joiResolver } from '@hookform/resolvers/joi'; -import { Add, DriveFileRenameOutline } from '@mui/icons-material'; -import { Button, TextField } from '@mui/material'; -import { DatePicker } from '@mui/x-date-pickers/DatePicker'; -import { WorkExperience } from 'schema'; -import dayjs from 'dayjs'; -import Joi from 'joi'; -import get from 'lodash/get'; -import isEmpty from 'lodash/isEmpty'; -import { useTranslation } from 'next-i18next'; -import { useEffect, useMemo } from 'react'; -import { Controller, useForm } from 'react-hook-form'; - -import BaseModal from '@/components/shared/BaseModal'; -import MarkdownSupported from '@/components/shared/MarkdownSupported'; -import { VALID_URL_REGEX } from '@/constants/index'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setModalState } from '@/store/modal/modalSlice'; -import { addItem, editItem } from '@/store/resume/resumeSlice'; - -type FormData = WorkExperience; - -const defaultState: FormData = { - name: '', - position: '', - date: { - start: '', - end: '', - }, - url: '', - summary: '', -}; - -const schema = Joi.object<FormData>().keys({ - id: Joi.string(), - name: Joi.string().required(), - position: Joi.string().required(), - date: Joi.object().keys({ - start: Joi.string().allow(''), - end: Joi.string().allow(''), - }), - url: Joi.string().pattern(VALID_URL_REGEX, { name: 'valid URL' }).allow(''), - summary: Joi.string().allow(''), -}); - -const WorkModal: React.FC = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const { open: isOpen, payload } = useAppSelector((state) => state.modal['builder.sections.work']); - const path: string = get(payload, 'path', 'sections.work'); - const item: FormData = get(payload, 'item', null); - - const heading = useAppSelector((state) => get(state.resume.present, `${path}.name`)); - - const isEditMode = useMemo(() => !!item, [item]); - - const addText = useMemo( - () => - t('builder.common.actions.add', { - token: t(`builder.leftSidebar.${path}.heading`, { defaultValue: heading }), - }), - [t, heading], - ); - const editText = useMemo( - () => - t('builder.common.actions.edit', { - token: t(`builder.leftSidebar.${path}.heading`, { defaultValue: heading }), - }), - [t, heading], - ); - - const { reset, control, handleSubmit } = useForm<FormData>({ - defaultValues: defaultState, - resolver: joiResolver(schema), - }); - - const onSubmit = (formData: FormData) => { - if (isEditMode) { - dispatch(editItem({ path: `${path}.items`, value: formData })); - } else { - dispatch(addItem({ path: `${path}.items`, value: formData })); - } - - handleClose(); - }; - - const handleClose = () => { - dispatch( - setModalState({ - modal: 'builder.sections.work', - state: { open: false }, - }), - ); - - reset(defaultState); - }; - - useEffect(() => { - if (!isEmpty(item)) { - reset(item); - } - }, [item, reset]); - - return ( - <BaseModal - icon={isEditMode ? <DriveFileRenameOutline /> : <Add />} - isOpen={isOpen} - handleClose={handleClose} - heading={isEditMode ? editText : addText} - footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>} - > - <form className="my-2 grid grid-cols-2 gap-4" onSubmit={handleSubmit(onSubmit)}> - <Controller - name="name" - control={control} - render={({ field, fieldState }) => ( - <TextField - required - autoFocus - label={t('builder.leftSidebar.sections.experience.form.name.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="position" - control={control} - render={({ field, fieldState }) => ( - <TextField - required - label={t('builder.common.form.position.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="date.start" - control={control} - render={({ field, fieldState }) => ( - <DatePicker - openTo="year" - inputRef={field.ref} - label={t('builder.common.form.start-date.label')} - value={dayjs(field.value)} - views={['year', 'month', 'day']} - slotProps={{ - textField: { - error: !!fieldState.error, - helperText: fieldState.error?.message || t('builder.common.form.start-date.help-text') - }, - }} - onChange={(date: dayjs.Dayjs | null) => { - date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD')); - }} - /> - )} - /> - - <Controller - name="date.end" - control={control} - render={({ field, fieldState }) => ( - <DatePicker - openTo="year" - inputRef={field.ref} - label={t('builder.common.form.end-date.label')} - value={dayjs(field.value)} - views={['year', 'month', 'day']} - slotProps={{ - textField: { - error: !!fieldState.error, - helperText: fieldState.error?.message || t('builder.common.form.end-date.help-text') - }, - }} - onChange={(date: dayjs.Dayjs | null) => { - date && dayjs(date).isValid() && field.onChange(dayjs(date).format('YYYY-MM-DD')); - }} - /> - )} - /> - - <Controller - name="url" - control={control} - render={({ field, fieldState }) => ( - <TextField - label={t('builder.common.form.url.label')} - placeholder="https://" - className="col-span-2" - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="summary" - control={control} - render={({ field, fieldState }) => ( - <TextField - multiline - minRows={3} - maxRows={6} - label={t('builder.common.form.summary.label')} - className="col-span-2" - error={!!fieldState.error} - helperText={fieldState.error?.message || <MarkdownSupported />} - {...field} - /> - )} - /> - <input type="submit" style={{ display: 'none' }} /> - </form> - </BaseModal> - ); -}; - -export default WorkModal; diff --git a/client/modals/dashboard/CreateResumeModal.tsx b/client/modals/dashboard/CreateResumeModal.tsx deleted file mode 100644 index 8513b988..00000000 --- a/client/modals/dashboard/CreateResumeModal.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import { joiResolver } from '@hookform/resolvers/joi'; -import { Add } from '@mui/icons-material'; -import { Button, FormControlLabel, FormGroup, Switch, TextField } from '@mui/material'; -import { Resume } from 'schema'; -import Joi from 'joi'; -import { useTranslation } from 'next-i18next'; -import { useEffect } from 'react'; -import { Controller, useForm } from 'react-hook-form'; -import { useMutation } from 'react-query'; - -import BaseModal from '@/components/shared/BaseModal'; -import { RESUMES_QUERY } from '@/constants/index'; -import { ServerError } from '@/services/axios'; -import queryClient from '@/services/react-query'; -import { createResume, CreateResumeParams } from '@/services/resume'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setModalState } from '@/store/modal/modalSlice'; - -type FormData = { - name: string; - slug: string; - isPublic: boolean; -}; - -const defaultState: FormData = { - name: '', - slug: '', - isPublic: true, -}; - -const schema = Joi.object({ - name: Joi.string().required(), - slug: Joi.string() - .lowercase() - .min(3) - .regex(/^[a-z0-9-]+$/, 'only lowercase characters, numbers and hyphens') - .required(), - isPublic: Joi.boolean().default(true).required(), -}); - -const CreateResumeModal: React.FC = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const { open: isOpen } = useAppSelector((state) => state.modal['dashboard.create-resume']); - - const { mutateAsync, isLoading } = useMutation<Resume, ServerError, CreateResumeParams>(createResume); - - const { reset, watch, control, setValue, handleSubmit } = useForm<FormData>({ - defaultValues: defaultState, - resolver: joiResolver(schema), - }); - const name = watch('name'); - - useEffect(() => { - const slug = name - ? name - .toLowerCase() - .replace(/[^\w\s]/gi, '') - .replace(/[ ]/gi, '-') - : ''; - - setValue('slug', slug); - }, [name, setValue]); - - const onSubmit = async ({ name, slug, isPublic }: FormData) => { - await mutateAsync({ name, slug, public: isPublic }); - await queryClient.invalidateQueries(RESUMES_QUERY); - - handleClose(); - }; - - const handleClose = () => { - dispatch(setModalState({ modal: 'dashboard.create-resume', state: { open: false } })); - reset(); - }; - - return ( - <BaseModal - isOpen={isOpen} - icon={<Add />} - heading={t('modals.dashboard.create-resume.heading')} - handleClose={handleClose} - footerChildren={ - <Button type="submit" disabled={isLoading} onClick={handleSubmit(onSubmit)}> - {t('modals.dashboard.create-resume.actions.create-resume')} - </Button> - } - > - <p>{t('modals.dashboard.create-resume.body')}</p> - - <form className="grid gap-4"> - <Controller - name="name" - control={control} - render={({ field, fieldState }) => ( - <TextField - autoFocus - label={t('modals.dashboard.create-resume.form.name.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="slug" - control={control} - render={({ field, fieldState }) => ( - <TextField - label={t('modals.dashboard.create-resume.form.slug.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <FormGroup> - <FormControlLabel - label={t('modals.dashboard.create-resume.form.public.label')} - control={ - <Controller - name="isPublic" - control={control} - render={({ field }) => <Switch defaultChecked color="secondary" {...field} />} - /> - } - /> - </FormGroup> - </form> - </BaseModal> - ); -}; - -export default CreateResumeModal; diff --git a/client/modals/dashboard/ImportExternalModal.tsx b/client/modals/dashboard/ImportExternalModal.tsx deleted file mode 100644 index 22d922b0..00000000 --- a/client/modals/dashboard/ImportExternalModal.tsx +++ /dev/null @@ -1,220 +0,0 @@ -import { Code, ImportExport, LinkedIn, TrackChanges, UploadFile } from '@mui/icons-material'; -import { Button, Divider } from '@mui/material'; -import { Integration, Resume } from 'schema'; -import { Trans, useTranslation } from 'next-i18next'; -import { useRef } from 'react'; -import toast from 'react-hot-toast'; -import { useMutation } from 'react-query'; - -import BaseModal from '@/components/shared/BaseModal'; -import { RESUMES_QUERY } from '@/constants/index'; -import { ServerError } from '@/services/axios'; -import { importFromExternal, ImportFromExternalParams } from '@/services/integrations'; -import queryClient from '@/services/react-query'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setModalState } from '@/store/modal/modalSlice'; - -const FILE_UPLOAD_MAX_SIZE = 2000000; // 2 MB - -const ImportExternalModal: React.FC = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const linkedinInputRef = useRef<HTMLInputElement>(null); - const jsonResumeInputRef = useRef<HTMLInputElement>(null); - const reactiveResumeInputRef = useRef<HTMLInputElement>(null); - const reactiveResumeV2InputRef = useRef<HTMLInputElement>(null); - - const { open: isOpen } = useAppSelector((state) => state.modal['dashboard.import-external']); - - const { mutateAsync, isLoading } = useMutation<Resume, ServerError, ImportFromExternalParams>(importFromExternal); - - const handleClose = () => { - dispatch(setModalState({ modal: 'dashboard.import-external', state: { open: false } })); - }; - - const handleClick = (integration: Integration) => { - if (integration === 'linkedin') { - if (linkedinInputRef.current) { - linkedinInputRef.current.click(); - linkedinInputRef.current.value = ''; - } - } else if (integration === 'json-resume') { - if (jsonResumeInputRef.current) { - jsonResumeInputRef.current.click(); - jsonResumeInputRef.current.value = ''; - } - } else if (integration === 'reactive-resume') { - if (reactiveResumeInputRef.current) { - reactiveResumeInputRef.current.click(); - reactiveResumeInputRef.current.value = ''; - } - } else if (integration === 'reactive-resume-v2') { - if (reactiveResumeV2InputRef.current) { - reactiveResumeV2InputRef.current.click(); - reactiveResumeV2InputRef.current.value = ''; - } - } - }; - - const handleChange = async (event: React.ChangeEvent<HTMLInputElement>, integration: Integration) => { - 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-file-size')); - return; - } - - await mutateAsync({ integration, file }); - queryClient.invalidateQueries(RESUMES_QUERY); - - handleClose(); - } - }; - - return ( - <BaseModal - isOpen={isOpen} - icon={<ImportExport />} - heading={t('modals.dashboard.import-external.heading')} - handleClose={handleClose} - > - <div className="grid gap-5"> - <h2 className="inline-flex items-center gap-2 text-lg font-medium"> - <LinkedIn /> - {t('modals.dashboard.import-external.linkedin.heading')} - </h2> - - <p className="mb-2"> - <Trans t={t} i18nKey="modals.dashboard.import-external.linkedin.body"> - You can save time by exporting your data from LinkedIn and using it to auto-fill fields on Reactive Resume. - Head over to the - <a - href="https://www.linkedin.com/psettings/member-data" - className="underline" - rel="noreferrer" - target="_blank" - > - Data Privacy - </a> - section on LinkedIn and request an archive of your data. Once it is available, upload the ZIP file below. - </Trans> - </p> - - <div> - <Button - variant="contained" - disabled={isLoading} - startIcon={<UploadFile />} - onClick={() => handleClick('linkedin')} - > - {t('modals.dashboard.import-external.linkedin.actions.upload-archive')} - </Button> - - <input - hidden - type="file" - ref={linkedinInputRef} - onChange={(event) => handleChange(event, 'linkedin')} - accept="application/zip" - /> - </div> - </div> - - <Divider className="py-2" /> - - <div className="grid gap-5"> - <h2 className="inline-flex items-center gap-2 text-lg font-medium"> - <Code /> - {t('modals.dashboard.import-external.json-resume.heading')} - </h2> - - <p className="mb-2"> - <Trans t={t} i18nKey="modals.dashboard.import-external.json-resume.body"> - If you have a - <a - href="https://github.com/jsonresume/resume-schema" - className="underline" - rel="noreferrer" - target="_blank" - > - validated JSON Resume - </a> - ready to go, you can use it to fast-track your development on Reactive Resume. Click the button below and - upload a valid JSON file to begin. - </Trans> - </p> - - <div> - <Button - variant="contained" - disabled={isLoading} - startIcon={<UploadFile />} - onClick={() => handleClick('json-resume')} - > - {t('modals.dashboard.import-external.json-resume.actions.upload-json')} - </Button> - - <input - hidden - type="file" - ref={jsonResumeInputRef} - onChange={(event) => handleChange(event, 'json-resume')} - accept="application/json" - /> - </div> - </div> - - <Divider className="py-2" /> - - <div className="grid gap-5"> - <h2 className="inline-flex items-center gap-2 text-lg font-medium"> - <TrackChanges /> - {t('modals.dashboard.import-external.reactive-resume.heading')} - </h2> - - <p className="mb-2">{t('modals.dashboard.import-external.reactive-resume.body')}</p> - - <div className="flex gap-4"> - <Button - variant="contained" - disabled={isLoading} - startIcon={<UploadFile />} - onClick={() => handleClick('reactive-resume')} - > - {t('modals.dashboard.import-external.reactive-resume.actions.upload-json')} - </Button> - - <Button - variant="contained" - disabled={isLoading} - startIcon={<UploadFile />} - onClick={() => handleClick('reactive-resume-v2')} - > - {t('modals.dashboard.import-external.reactive-resume.actions.upload-json-v2')} - </Button> - - <input - hidden - type="file" - ref={reactiveResumeInputRef} - onChange={(event) => handleChange(event, 'reactive-resume')} - accept="application/json" - /> - - <input - hidden - type="file" - ref={reactiveResumeV2InputRef} - onChange={(event) => handleChange(event, 'reactive-resume-v2')} - accept="application/json" - /> - </div> - </div> - </BaseModal> - ); -}; - -export default ImportExternalModal; diff --git a/client/modals/dashboard/RenameResumeModal.tsx b/client/modals/dashboard/RenameResumeModal.tsx deleted file mode 100644 index a0e18c42..00000000 --- a/client/modals/dashboard/RenameResumeModal.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import { joiResolver } from '@hookform/resolvers/joi'; -import { DriveFileRenameOutline } from '@mui/icons-material'; -import { Button, TextField } from '@mui/material'; -import { Resume } from 'schema'; -import Joi from 'joi'; -import get from 'lodash/get'; -import noop from 'lodash/noop'; -import { useTranslation } from 'next-i18next'; -import { useEffect } from 'react'; -import { Controller, useForm } from 'react-hook-form'; -import { useMutation } from 'react-query'; - -import BaseModal from '@/components/shared/BaseModal'; -import { RESUMES_QUERY } from '@/constants/index'; -import { ServerError } from '@/services/axios'; -import queryClient from '@/services/react-query'; -import { renameResume, RenameResumeParams } from '@/services/resume'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { ModalState, setModalState } from '@/store/modal/modalSlice'; - -type FormData = { - name: string; - slug: string; -}; - -const schema = Joi.object({ - name: Joi.string().required(), - slug: Joi.string() - .lowercase() - .min(3) - .regex(/^[a-z0-9-]+$/, 'only lowercase characters, numbers and hyphens') - .required(), -}); - -const RenameResumeModal: React.FC = () => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const { open: isOpen, payload } = useAppSelector((state) => state.modal['dashboard.rename-resume']) as ModalState; - const resume: Resume = get(payload, 'item') as Resume; - const onComplete = get(payload, 'onComplete', noop); - - const { mutateAsync, isLoading } = useMutation<Resume, ServerError, RenameResumeParams>(renameResume); - - const { reset, watch, control, setValue, handleSubmit } = useForm<FormData>({ - defaultValues: { - name: resume?.name, - slug: resume?.slug, - }, - resolver: joiResolver(schema), - }); - const name = watch('name'); - - useEffect(() => { - const slug = name - ? name - .toLowerCase() - .replace(/[^\w\s]/gi, '') - .replace(/[ ]/gi, '-') - : ''; - - setValue('slug', slug); - }, [name, setValue]); - - useEffect(() => { - if (!resume) return; - - const { name, slug }: FormData = resume; - - reset({ name, slug }); - }, [resume, reset]); - - const onSubmit = async ({ name, slug }: FormData) => { - if (!resume) return; - - const newResume = await mutateAsync({ id: resume.id, name, slug }); - - onComplete && onComplete(newResume); - - queryClient.invalidateQueries(RESUMES_QUERY); - - handleClose(); - }; - - const handleClose = () => { - dispatch(setModalState({ modal: 'dashboard.rename-resume', state: { open: false } })); - reset(); - }; - - return ( - <BaseModal - icon={<DriveFileRenameOutline />} - isOpen={isOpen} - heading={t('modals.dashboard.rename-resume.heading')} - handleClose={handleClose} - footerChildren={ - <Button type="submit" disabled={isLoading} onClick={handleSubmit(onSubmit)}> - {t('modals.dashboard.rename-resume.actions.rename-resume')} - </Button> - } - > - <form className="grid gap-4"> - <Controller - name="name" - control={control} - render={({ field, fieldState }) => ( - <TextField - autoFocus - label={t('modals.dashboard.rename-resume.form.name.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - - <Controller - name="slug" - control={control} - render={({ field, fieldState }) => ( - <TextField - label={t('modals.dashboard.rename-resume.form.slug.label')} - error={!!fieldState.error} - helperText={fieldState.error?.message} - {...field} - /> - )} - /> - </form> - </BaseModal> - ); -}; - -export default RenameResumeModal; diff --git a/client/modals/index.tsx b/client/modals/index.tsx deleted file mode 100644 index 6a03e0ce..00000000 --- a/client/modals/index.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import { useRouter } from 'next/router'; -import { useEffect } from 'react'; - -import { useAppDispatch } from '@/store/hooks'; -import { ModalName, setModalState } from '@/store/modal/modalSlice'; - -import ForgotPasswordModal from './auth/ForgotPasswordModal'; -import LoginModal from './auth/LoginModal'; -import RegisterModal from './auth/RegisterModal'; -import ResetPasswordModal from './auth/ResetPasswordModal'; -import UserProfileModal from './auth/UserProfileModal'; -import AwardModal from './builder/sections/AwardModal'; -import CertificateModal from './builder/sections/CertificateModal'; -import CustomModal from './builder/sections/CustomModal'; -import EducationModal from './builder/sections/EducationModal'; -import InterestModal from './builder/sections/InterestModal'; -import LanguageModal from './builder/sections/LanguageModal'; -import ProfileModal from './builder/sections/ProfileModal'; -import ProjectModal from './builder/sections/ProjectModal'; -import PublicationModal from './builder/sections/PublicationModal'; -import ReferenceModal from './builder/sections/ReferenceModal'; -import SkillModal from './builder/sections/SkillModal'; -import VolunteerModal from './builder/sections/VolunteerModal'; -import WorkModal from './builder/sections/WorkModal'; -import CreateResumeModal from './dashboard/CreateResumeModal'; -import ImportExternalModal from './dashboard/ImportExternalModal'; -import RenameResumeModal from './dashboard/RenameResumeModal'; - -type QueryParams = { - modal?: ModalName; -}; - -const ModalWrapper: React.FC = () => { - const router = useRouter(); - - const dispatch = useAppDispatch(); - - useEffect(() => { - const { modal, ...rest } = router.query as QueryParams; - - if (!modal) return; - - dispatch(setModalState({ modal, state: { open: true, payload: { item: rest } } })); - }, [router.query, dispatch]); - - return ( - <> - {/* Authentication */} - <LoginModal /> - <RegisterModal /> - <ForgotPasswordModal /> - <ResetPasswordModal /> - <UserProfileModal /> - - {/* Dashboard */} - <CreateResumeModal /> - <ImportExternalModal /> - <RenameResumeModal /> - - {/* Builder */} - - {/* Sections */} - <ProfileModal /> - <WorkModal /> - <EducationModal /> - <AwardModal /> - <CertificateModal /> - <PublicationModal /> - <SkillModal /> - <LanguageModal /> - <InterestModal /> - <VolunteerModal /> - <ProjectModal /> - <ReferenceModal /> - - {/* Custom Sections */} - <CustomModal /> - </> - ); -}; - -export default ModalWrapper; diff --git a/client/next-env.d.ts b/client/next-env.d.ts deleted file mode 100644 index 4f11a03d..00000000 --- a/client/next-env.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -/// <reference types="next" /> -/// <reference types="next/image-types/global" /> - -// NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/client/next-i18next.config.js b/client/next-i18next.config.js deleted file mode 100644 index c2150d5a..00000000 --- a/client/next-i18next.config.js +++ /dev/null @@ -1,56 +0,0 @@ -const path = require('path'); - -const i18nConfig = { - i18n: { - defaultLocale: 'en', - locales: [ - 'am', - 'ar', - 'bg', - 'bn', - 'ca', - 'cs', - 'da', - 'de', - 'el', - 'en', - 'es', - 'fa', - 'fi', - 'fr', - 'he', - 'hi', - 'hu', - 'id', - 'it', - 'ja', - 'km', - 'kn', - 'ko', - 'ml', - 'mr', - 'ne', - 'nl', - 'no', - 'or', - 'pl', - 'pt', - 'pt-BR', - 'ro', - 'ru', - 'sr', - 'sv', - 'ta', - 'tr', - 'uk', - 'vi', - 'zh', - ], - }, - nsSeparator: '.', - returnNull: false, - localePath: path.resolve('./public/locales'), - ns: ['common', 'modals', 'landing', 'dashboard', 'builder'], -}; - -module.exports = i18nConfig; diff --git a/client/next-sitemap.config.js b/client/next-sitemap.config.js deleted file mode 100644 index b82e133c..00000000 --- a/client/next-sitemap.config.js +++ /dev/null @@ -1,6 +0,0 @@ -/** @type {import('next-sitemap').IConfig} */ -module.exports = { - siteUrl: 'https://rxresu.me', - changefreq: 'monthly', - generateIndexSitemap: false, -}; diff --git a/client/next.config.js b/client/next.config.js deleted file mode 100644 index 33494d51..00000000 --- a/client/next.config.js +++ /dev/null @@ -1,50 +0,0 @@ -const { version } = require('../package.json'); -const { i18n } = require('./next-i18next.config'); - -/** @type {import('next').NextConfig} */ -const nextConfig = { - reactStrictMode: true, - - i18n, - - env: { - appVersion: version, - }, - - images: { - domains: ['cdn.rxresu.me', 'www.gravatar.com'], - }, - - // Hack to make Tailwind darkMode 'class' strategy with CSS Modules - // Ref: https://github.com/tailwindlabs/tailwindcss/issues/3258#issuecomment-968368156 - webpack: (config) => { - const rules = config.module.rules.find((r) => !!r.oneOf); - - rules.oneOf.forEach((loaders) => { - if (Array.isArray(loaders.use)) { - loaders.use.forEach((l) => { - if (typeof l !== 'string' && typeof l.loader === 'string' && /(?<!post)css-loader/.test(l.loader)) { - if (!l.options.modules) return; - const { getLocalIdent, ...others } = l.options.modules; - - l.options = { - ...l.options, - modules: { - ...others, - getLocalIdent: (ctx, localIdentName, localName, options) => { - if (localName === 'dark') return localName; - - return getLocalIdent(ctx, localIdentName, localName, options); - }, - }, - }; - } - }); - } - }); - - return config; - }, -}; - -module.exports = nextConfig; diff --git a/client/package.json b/client/package.json deleted file mode 100644 index b95cbb94..00000000 --- a/client/package.json +++ /dev/null @@ -1,89 +0,0 @@ -{ - "name": "client", - "scripts": { - "dev": "react-env --prefix PUBLIC -- next dev", - "lint": "next lint --fix", - "build": "next build", - "start": "react-env --prefix PUBLIC -- next start", - "sitemap": "next-sitemap --config next-sitemap.config.js" - }, - "dependencies": { - "@beam-australia/react-env": "^3.1.1", - "@emotion/css": "^11.11.2", - "@emotion/react": "^11.11.1", - "@emotion/styled": "^11.11.0", - "@fontsource/material-icons": "^5.0.7", - "@hello-pangea/dnd": "^16.3.0", - "@hookform/resolvers": "3.2.0", - "@monaco-editor/react": "^4.5.1", - "@mui/icons-material": "^5.14.3", - "@mui/lab": "^5.0.0-alpha.138", - "@mui/material": "^5.14.3", - "@mui/system": "^5.14.3", - "@mui/x-date-pickers": "6.11.0", - "@radix-ui/react-separator": "^1.0.3", - "@react-oauth/google": "^0.11.1", - "@reduxjs/toolkit": "^1.9.5", - "axios": "^1.4.0", - "clsx": "^2.0.0", - "dayjs": "^1.11.9", - "downloadjs": "^1.4.7", - "joi": "^17.9.2", - "lodash": "^4.17.21", - "md5-hex": "^4.0.0", - "monaco-editor": "^0.41.0", - "nanoid": "^3.3.6", - "next": "13.4.13", - "next-i18next": "^14.0.0", - "react": "^18.2.0", - "react-colorful": "^5.6.1", - "react-dnd": "16.0.1", - "react-dnd-html5-backend": "16.0.1", - "react-dom": "^18.2.0", - "react-github-btn": "^1.4.0", - "react-hook-form": "^7.45.4", - "react-hot-toast": "2.4.1", - "react-icons": "^4.10.1", - "react-markdown": "^8.0.7", - "react-parallax-tilt": "^1.7.157", - "react-query": "^3.39.3", - "react-redux": "^8.1.2", - "react-zoom-pan-pinch": "^3.1.0", - "redux": "^4.2.1", - "redux-persist": "^6.0.0", - "redux-saga": "^1.2.3", - "redux-undo": "^1.1.0", - "rehype-katex": "^6.0.3", - "remark-gfm": "^3.0.1", - "remark-math": "^5.1.1", - "sharp": "^0.32.4", - "tailwind-merge": "^1.14.0", - "uuid": "^9.0.0", - "webfontloader": "^1.6.28" - }, - "devDependencies": { - "@babel/core": "^7.22.9", - "@fontsource/ibm-plex-sans": "^5.0.8", - "@tailwindcss/forms": "^0.5.4", - "@tailwindcss/typography": "^0.5.9", - "@types/downloadjs": "^1.4.3", - "@types/lodash": "^4.14.196", - "@types/node": "^20.4.8", - "@types/react": "^18.2.18", - "@types/react-dom": "^18.2.7", - "@types/react-redux": "^7.1.25", - "@types/uuid": "^9.0.2", - "@types/webfontloader": "^1.6.35", - "autoprefixer": "^10.4.14", - "csstype": "^3.1.2", - "eslint-config-next": "^13.4.13", - "eslint-plugin-tailwindcss": "^3.13.0", - "eslint-plugin-unused-imports": "^3.0.0", - "next-sitemap": "^4.1.8", - "postcss": "^8.4.27", - "sass": "^1.64.2", - "schema": "workspace:*", - "tailwindcss": "^3.3.3", - "typescript": "^5.1.6" - } -} diff --git a/client/pages/[username]/[slug]/build.tsx b/client/pages/[username]/[slug]/build.tsx deleted file mode 100644 index 7049bce3..00000000 --- a/client/pages/[username]/[slug]/build.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import isEmpty from 'lodash/isEmpty'; -import { GetServerSideProps, NextPage } from 'next'; -import Head from 'next/head'; -import { useTranslation } from 'next-i18next'; -import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; -import { useEffect } from 'react'; -import { useQuery } from 'react-query'; -import { Resume } from 'schema'; - -import Center from '@/components/build/Center/Center'; -import LeftSidebar from '@/components/build/LeftSidebar/LeftSidebar'; -import RightSidebar from '@/components/build/RightSidebar/RightSidebar'; -import { fetchResumeByIdentifier } from '@/services/resume'; -import { useAppDispatch } from '@/store/hooks'; -import { setResume } from '@/store/resume/resumeSlice'; -import styles from '@/styles/pages/Build.module.scss'; - -type QueryParams = { - username: string; - slug: string; -}; - -type Props = { - username: string; - slug: string; -}; - -export const getServerSideProps: GetServerSideProps<Props> = async ({ query, locale = 'en' }) => { - const { username, slug } = query as QueryParams; - - return { - props: { username, slug, ...(await serverSideTranslations(locale, ['common', 'modals', 'builder'])) }, - }; -}; - -const Build: NextPage<Props> = ({ username, slug }) => { - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - - const { data: resume } = useQuery<Resume>( - `resume/${username}/${slug}`, - () => fetchResumeByIdentifier({ username, slug }), - { - onSuccess: (resume) => { - dispatch(setResume(resume)); - }, - }, - ); - - useEffect(() => { - if (resume) dispatch(setResume(resume)); - }, [resume, dispatch]); - - if (!resume || isEmpty(resume)) return null; - - return ( - <div className={styles.container}> - <Head> - <title> - {resume.name} | {t('common.title')} - - - - -
- - - ); -}; - -export default Build; diff --git a/client/pages/[username]/[slug]/index.tsx b/client/pages/[username]/[slug]/index.tsx deleted file mode 100644 index eaea2df3..00000000 --- a/client/pages/[username]/[slug]/index.tsx +++ /dev/null @@ -1,148 +0,0 @@ -import { Download, Downloading } from '@mui/icons-material'; -import { ButtonBase } from '@mui/material'; -import clsx from 'clsx'; -import dayjs from 'dayjs'; -import download from 'downloadjs'; -import get from 'lodash/get'; -import isEmpty from 'lodash/isEmpty'; -import { GetServerSideProps, NextPage } from 'next'; -import Link from 'next/link'; -import { useRouter } from 'next/router'; -import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; -import { useEffect } from 'react'; -import toast from 'react-hot-toast'; -import { useMutation, useQuery } from 'react-query'; -import { Resume } from 'schema'; - -import Page from '@/components/build/Center/Page'; -import { DEFAULT_ERROR_MESSAGE } from '@/constants/index'; -import { ServerError } from '@/services/axios'; -import { printResumeAsPdf, PrintResumeAsPdfParams } from '@/services/printer'; -import { fetchResumeByIdentifier } from '@/services/resume'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setResume } from '@/store/resume/resumeSlice'; -import styles from '@/styles/pages/Preview.module.scss'; - -type QueryParams = { - slug: string; - username: string; -}; - -type Props = { - slug: string; - resume?: Resume; - username: string; -}; - -export const getServerSideProps: GetServerSideProps = async ({ query, locale = 'en' }) => { - const { username, slug } = query as QueryParams; - - try { - const resume = await fetchResumeByIdentifier({ username, slug }); - - return { - props: { username, slug, resume, ...(await serverSideTranslations(locale, ['common'])) }, - }; - } catch { - return { props: { username, slug, ...(await serverSideTranslations(locale, ['common'])) } }; - } -}; - -const Preview: NextPage = ({ username, slug, resume: initialData }) => { - const router = useRouter(); - - const dispatch = useAppDispatch(); - - const resume = useAppSelector((state) => state.resume.present); - - useEffect(() => { - if (initialData && !isEmpty(initialData)) { - const errorObj = JSON.parse(JSON.stringify(initialData)); - const statusCode: number | null = get(errorObj, 'statusCode', null); - - if (statusCode === 404) { - toast.error('The resume you were looking for does not exist, or maybe it never did?'); - - router.push('/'); - return; - } - - dispatch(setResume(initialData)); - } - }, [dispatch, initialData]); - - useEffect(() => { - const locale = get(resume, 'metadata.locale', 'en'); - - if (!isEmpty(resume) && router.locale !== locale) { - const { pathname, asPath, query } = router; - - router.push({ pathname, query }, asPath, { locale }); - } - }, [resume, router]); - - useQuery(`resume/${username}/${slug}`, () => fetchResumeByIdentifier({ username, slug }), { - initialData, - onSuccess: (data) => { - dispatch(setResume(data)); - }, - onError: (error) => { - const errorObj = JSON.parse(JSON.stringify(error)); - const statusCode: number = get(errorObj, 'status', 404); - - if (statusCode === 404) { - toast.error('The resume you were looking for does not exist, or maybe it never did?'); - - router.push('/'); - } - }, - }); - - const { mutateAsync, isLoading } = useMutation(printResumeAsPdf); - - if (isEmpty(resume)) return null; - - const layout: string[][][] = get(resume, 'metadata.layout', []); - - const handleDownload = async () => { - try { - const updatedAt = get(resume, 'updatedAt'); - - const url = await mutateAsync({ username, slug, lastUpdated: dayjs(updatedAt).unix().toString() }); - - download(url); - } catch { - toast.error(DEFAULT_ERROR_MESSAGE); - } - }; - - return ( -
- {layout.map((_, pageIndex) => ( - - ))} - -
- - {isLoading ? ( - <> - -

Please wait

- - ) : ( - <> - -

Download PDF

- - )} - -
- -

- Made with Reactive Resume -

-
- ); -}; - -export default Preview; diff --git a/client/pages/[username]/[slug]/printer.tsx b/client/pages/[username]/[slug]/printer.tsx deleted file mode 100644 index 20329ee2..00000000 --- a/client/pages/[username]/[slug]/printer.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import clsx from 'clsx'; -import get from 'lodash/get'; -import isEmpty from 'lodash/isEmpty'; -import { GetServerSideProps, NextPage } from 'next'; -import { useRouter } from 'next/router'; -import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; -import { useEffect } from 'react'; -import { Resume } from 'schema'; - -import Page from '@/components/build/Center/Page'; -import { fetchResumeByIdentifier } from '@/services/resume'; -import { useAppDispatch, useAppSelector } from '@/store/hooks'; -import { setResume } from '@/store/resume/resumeSlice'; -import styles from '@/styles/pages/Printer.module.scss'; - -type QueryParams = { - slug: string; - username: string; - secretKey?: string; -}; - -type Props = { - resume?: Resume; - locale: string; - redirect?: any; -}; - -export const getServerSideProps: GetServerSideProps, QueryParams> = async ({ - query, - locale = 'en', -}) => { - const { username, slug, secretKey } = query as QueryParams; - - try { - if (isEmpty(secretKey)) throw new Error('There is no secret key!'); - - const resume = await fetchResumeByIdentifier({ username, slug, options: { secretKey } }); - const displayLocale = get(resume, 'metadata.locale') ?? locale; - - return { - props: { - resume, - locale: displayLocale, - ...(await serverSideTranslations(displayLocale, ['common'])), - }, - }; - } catch (error) { - return { - redirect: { - permanent: false, - destination: '/', - }, - }; - } -}; - -const Printer: NextPage = ({ resume: initialData, locale }) => { - const router = useRouter(); - - const dispatch = useAppDispatch(); - - const resume = useAppSelector((state) => state.resume.present); - - useEffect(() => { - if (router.locale !== locale) { - const { pathname, asPath, query } = router; - - router.push({ pathname, query }, asPath, { locale }); - } - }, [router, locale]); - - useEffect(() => { - if (initialData) dispatch(setResume(initialData)); - }, [dispatch, initialData]); - - if (!resume || isEmpty(resume)) return null; - - const layout: string[][][] = get(resume, 'metadata.layout', []); - - return ( -
- {layout.map((_, pageIndex) => ( - - ))} -
- ); -}; - -export default Printer; diff --git a/client/pages/_app.tsx b/client/pages/_app.tsx deleted file mode 100644 index 4a3e609a..00000000 --- a/client/pages/_app.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import '@/styles/globals.scss'; -import '@fontsource/material-icons'; -import '@fontsource/ibm-plex-sans/300.css'; -import '@fontsource/ibm-plex-sans/400.css'; -import '@fontsource/ibm-plex-sans/500.css'; -import '@fontsource/ibm-plex-sans/600.css'; -import '@fontsource/ibm-plex-sans/700.css'; - -import env from '@beam-australia/react-env'; -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { GoogleOAuthProvider } from '@react-oauth/google'; -import type { AppProps } from 'next/app'; -import Head from 'next/head'; -import { appWithTranslation } from 'next-i18next'; -import { Toaster } from 'react-hot-toast'; -import { QueryClientProvider } from 'react-query'; -import { Provider as ReduxProvider } from 'react-redux'; -import { PersistGate } from 'redux-persist/integration/react'; - -import Loading from '@/components/shared/Loading'; -import ModalWrapper from '@/modals/index'; -import queryClient from '@/services/react-query'; -import store, { persistor } from '@/store/index'; -import WrapperRegistry from '@/wrappers/index'; - -const App = ({ Component, pageProps }: AppProps): JSX.Element => ( - <> - - Reactive Resume | A free and open source resume builder - - - - - - - - - - - - - - - - - - - - - - - - - -); - -export default appWithTranslation(App); diff --git a/client/pages/_document.tsx b/client/pages/_document.tsx deleted file mode 100644 index 32183bf4..00000000 --- a/client/pages/_document.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { NextPage } from 'next'; -import NextDocument, { DocumentContext, Head, Html, Main, NextScript } from 'next/document'; -import Script from 'next/script'; - -const Document: NextPage = () => ( - - -