adding stylelint to repo

src/components/Blog.module.css

@@ -8,4 +8,4 @@
 
 .container h4 {
   @apply font-medium text-xl;
-}
+}

src/components/builder/center/Artboard.module.css

@@ -4,6 +4,7 @@
     min-height: 297mm;
     overflow: scroll;
     box-shadow: var(--shadow);
+
     @apply my-16 bg-white rounded;
   }
 }

src/components/builder/left/LeftNavbar.module.css

@@ -2,5 +2,6 @@
   width: 75px;
   z-index: 20;
   box-shadow: var(--left-shadow);
+
   @apply px-4 py-6 h-screen flex flex-col items-center;
 }

src/components/builder/left/LeftSidebar.module.css

@@ -1,5 +1,6 @@
 .container {
   z-index: 10;
+
   @apply w-full h-screen overflow-scroll p-8;
   @apply grid gap-8;
-}
+}

src/components/builder/right/RightNavbar.module.css

@@ -2,5 +2,6 @@
   width: 75px;
   z-index: 20;
   box-shadow: var(--right-shadow);
+
   @apply px-4 py-6 h-screen flex flex-col items-center;
 }

src/components/builder/right/RightSidebar.module.css

@@ -1,6 +1,6 @@
 .container {
   z-index: 10;
+
   @apply w-full h-screen overflow-scroll p-8;
   @apply grid gap-8;
 }
-

src/components/builder/right/sections/About.module.css

@@ -8,4 +8,4 @@
 
 .container p {
   @apply text-sm font-medium;
-}
+}

src/components/builder/right/sections/Actions.module.css

@@ -8,4 +8,4 @@
 
 .container p {
   @apply text-sm font-medium;
-}
+}

src/components/builder/right/sections/Colors.js

@@ -26,7 +26,7 @@ const Colors = ({ id }) => {
     <section>
       <Heading id={id} />
 
-      <div className="mb-6 grid grid-cols-8 col-gap-2 row-gap-6">
+      <div className="mb-6 grid grid-cols-8 gap-x-2 gap-y-6">
         {colorOptions.map((color) => (
           <div
             key={color}

src/components/builder/right/sections/Colors.module.css

@@ -8,4 +8,4 @@
 
 .circle:hover {
   @apply opacity-75;
-}
+}

src/components/builder/right/sections/Fonts.module.css

@@ -12,4 +12,4 @@
 
 .font.selected {
   @apply outline-none border border-primary-600;
-}
+}

src/components/builder/right/sections/Settings.module.css

@@ -8,4 +8,4 @@
 
 .container p {
   @apply text-sm font-medium;
-}
+}

src/components/builder/right/sections/Templates.module.css

@@ -8,6 +8,7 @@
 
 .template img {
   height: 240px;
+
   @apply w-full object-cover border border-transparent rounded;
   @apply transition-opacity duration-200 ease-in-out;
 }
@@ -23,4 +24,4 @@
 
 .template span {
   @apply mt-1 text-center text-sm font-semibold;
-}
+}

src/components/dashboard/CreateResume.module.css

@@ -5,6 +5,7 @@
 .resume > .backdrop {
   max-width: 184px;
   height: 260px;
+
   @apply rounded absolute w-full bg-black text-white shadow;
   @apply absolute flex justify-center items-center;
 }
@@ -12,6 +13,7 @@
 .resume > .page {
   max-width: 184px;
   height: 260px;
+
   @apply rounded absolute w-full bg-primary-100 text-primary-400;
   @apply transition-opacity duration-200 ease-in-out;
   @apply cursor-pointer absolute flex justify-center items-center;
@@ -23,6 +25,7 @@
 
 .resume > .meta {
   margin-top: 260px;
+
   @apply text-center;
 }
 

src/components/dashboard/ResumePreview.module.css

@@ -5,18 +5,21 @@
 .resume > .backdrop {
   max-width: 184px;
   height: 260px;
+
   @apply rounded absolute w-full bg-black shadow;
 }
 
 .resume > .backdrop img {
   max-width: 184px;
   height: 260px;
+
   @apply w-full object-cover rounded;
 }
 
 .resume > .page {
   max-width: 184px;
   height: 260px;
+
   @apply rounded absolute w-full bg-black;
   @apply opacity-0 transition-opacity duration-200 ease-in-out;
   @apply absolute text-primary-500 flex flex-col justify-evenly items-center;
@@ -28,6 +31,7 @@
 
 .resume > .meta {
   margin-top: 260px;
+
   @apply flex flex-col text-center items-center;
 }
 

src/components/dashboard/TopNavbar.module.css

@@ -1,6 +1,7 @@
 .navbar {
   height: 65px;
   box-shadow: var(--bottom-shadow);
+
   @apply w-full;
 }
 

src/components/landing/Screenshots.module.css

@@ -1,14 +1,16 @@
 .screenshot {
   filter: grayscale(100%);
+
   @apply shadow-xl rounded border-2 border-primary-100 ml-10;
   @apply transition-all duration-200 ease-in-out;
 }
 
 .screenshot:hover {
   filter: grayscale(0%);
+
   @apply transition-all duration-200 ease-in-out;
 }
 
 .screenshot:first-child {
   @apply ml-0;
-}
+}

src/components/shared/Button.module.css

@@ -1,6 +1,7 @@
 .container {
   font-size: 11px;
   padding: 6px 18px;
+
   @apply relative flex items-center cursor-pointer rounded font-semibold bg-primary-900 border border-primary-900 text-primary-50;
   @apply transition-colors duration-200 ease-in-out;
 }
@@ -40,4 +41,4 @@
 
 .container.delete:focus {
   @apply outline-none;
-}
+}

src/components/shared/Input.module.css

@@ -1,5 +1,6 @@
 .circle {
   left: 14px;
+
   @apply absolute bg-primary-900 rounded-full w-6 h-6;
 }
 

src/components/shared/Logo.module.css

@@ -1,5 +1,6 @@
 .logo {
   box-shadow: var(--shadow);
+
   @apply rounded;
 }
 

src/components/shared/PhotoUpload.module.css

@@ -2,6 +2,7 @@
   width: 60px;
   height: 60px;
   flex: 0 0 60px;
+
   @apply flex items-center justify-center cursor-pointer bg-primary-200 text-primary-500 rounded-full;
   @apply transition-opacity duration-200 ease-in-out;
 }

src/i18n/locales/en.json

@@ -60,7 +60,8 @@
     "toasts": {
       "formErrors": "You might need to fill up all the required fields before submitting this form.",
       "doesNotExist": "The resume you were looking for does not exist anymore... or maybe it never did?",
-      "loadDemoData": "Not sure where to begin? Try loading demo data to see what Reactive Resume has to offer."
+      "loadDemoData": "Not sure where to begin? Try loading demo data to see what Reactive Resume has to offer.",
+      "printError": "The cloud function is running into some trouble, please try again later or use the browser print feature."
     },
     "sections": {
       "heading": "Heading",

src/modals/BaseModal.module.css

@@ -4,6 +4,7 @@
 
 .modal {
   width: min(600px, calc(100vw - 100px));
+
   @apply p-8 rounded bg-primary-50 outline-none;
 }
 

src/modals/sections/ExportModal.js

@@ -4,6 +4,7 @@ import { clone } from 'lodash';
 import React, { memo, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaPrint } from 'react-icons/fa';
+import { toast } from 'react-toastify';
 import Button from '../../components/shared/Button';
 import ModalContext from '../../contexts/ModalContext';
 import { useSelector } from '../../contexts/ResumeContext';
@@ -31,22 +32,22 @@ const ExportModal = () => {
     }
   };
 
-  const handleSinglePageDownload = async () => {
-    setLoadingSingle(true);
-    const printResume = firebase.functions().httpsCallable('printResume');
-    const { data } = await printResume({ id: state.id, type: 'single' });
-    const blob = b64toBlob(data, 'application/pdf');
-    download(blob, `RxResume-${state.id}.pdf`, 'application/pdf');
-    setLoadingSingle(false);
-  };
+  const handleDownload = async (isSinglePDF) => {
+    isSinglePDF ? setLoadingSingle(true) : setLoadingMulti(true);
 
-  const handleMultiPageDownload = async () => {
-    setLoadingMulti(true);
-    const printResume = firebase.functions().httpsCallable('printResume');
-    const { data } = await printResume({ id: state.id, type: 'multi' });
-    const blob = b64toBlob(data, 'application/pdf');
-    download(blob, `RxResume-${state.id}.pdf`, 'application/pdf');
-    setLoadingMulti(false);
+    try {
+      const printResume = firebase.functions().httpsCallable('printResume');
+      const { data } = await printResume({
+        id: state.id,
+        type: isSinglePDF ? 'single' : 'multi',
+      });
+      const blob = b64toBlob(data, 'application/pdf');
+      download(blob, `RxResume-${state.id}.pdf`, 'application/pdf');
+    } catch (error) {
+      toast(t('builder.toasts.printError'));
+    } finally {
+      isSinglePDF ? setLoadingSingle(false) : setLoadingMulti(false);
+    }
   };
 
   const handleExportToJson = () => {
@@ -93,14 +94,14 @@ const ExportModal = () => {
           <div className="flex">
             <Button
               isLoading={isLoadingSingle}
-              onClick={handleSinglePageDownload}
+              onClick={() => handleDownload(true)}
             >
               {t('modals.export.downloadPDF.buttons.single')}
             </Button>
             <Button
               className="ml-8"
               isLoading={isLoadingMulti}
-              onClick={handleMultiPageDownload}
+              onClick={() => handleDownload(false)}
             >
               {t('modals.export.downloadPDF.buttons.multi')}
             </Button>

src/pages/app/builder.module.css

@@ -5,6 +5,7 @@
 .left {
   width: calc(100vw / 4);
   box-shadow: var(--left-shadow);
+
   @apply bg-primary-50 absolute top-0 bottom-0 left-0 z-10;
 }
 
@@ -15,5 +16,6 @@
 .right {
   width: calc(100vw / 4);
   box-shadow: var(--right-shadow);
+
   @apply bg-primary-50 absolute top-0 bottom-0 right-0 z-10;
 }

src/pages/index.js

@@ -33,7 +33,7 @@ const Home = () => {
 
         <Screenshots />
 
-        <div className="pt-8 grid lg:grid-cols-2 lg:col-gap-10">
+        <div className="pt-8 grid lg:grid-cols-2 lg:gap-x-10">
           <Feature
             icon={IoIosRocket}
             title="Create a resume that’s worthy of who you are."

src/pages/r/view.module.css

@@ -1,15 +1,17 @@
 @media screen {
   .container {
     background-color: #212121;
+
     @apply col-span-5 flex flex-col items-center;
   }
 
   .page {
     width: 800px;
+
     @apply block my-16 rounded shadow-2xl;
   }
-  
+
   .footer {
     @apply mb-16 text-white text-center opacity-50 leading-loose;
   }
-}
+}

src/styles/global.css

@@ -2,6 +2,7 @@ html,
 body {
   font-size: 12px;
   font-family: 'Montserrat', sans-serif;
+
   @apply text-primary-900 bg-primary-50;
   @apply transition-colors duration-200 ease-in-out;
 }
@@ -42,7 +43,7 @@ section {
   100% {
     transform: rotate(360deg);
   }
-}w
+}
 
 .markdown {
   @apply leading-relaxed whitespace-pre-wrap;

src/styles/tailwind.css

@@ -1,5 +1,3 @@
 @tailwind base;
-
 @tailwind components;
-
 @tailwind utilities;

src/styles/toastify.css

@@ -10,5 +10,6 @@
 
 .Toastify__toast-body {
   font-family: "Montserrat", sans-serif;
+
   @apply font-medium;
 }

src/templates/blocks/Skills/SkillsA.js

@@ -15,7 +15,7 @@ const SkillsA = () => {
   return safetyCheck(data.skills) ? (
     <div>
       <Heading>{data.skills.heading}</Heading>
-      <div className="grid grid-cols-2 row-gap-2 col-gap-4">
+      <div className="grid grid-cols-2 gap-y-2 gap-x-4">
         {data.skills.items.map(SkillItem)}
       </div>
     </div>