chore: installed and configured @eslint and @prettier

Author: ladunjexa

.eslintignore

@@ -0,0 +1,3 @@
+/.next
+/.git
+node_modules

.eslintrc.json

@@ -1,3 +1,9 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": [
+    "next/core-web-vitals",
+    "standard",
+    "plugin:tailwindcss/recommended",
+    "prettier"
+  ],
+  "ignorePatterns": ["/components/ui/*"]
 }

.prettierignore

@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/prettierrc",
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 100,
+  "proseWrap": "always",
+  "quoteProps": "as-needed",
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "endOfLine": "auto"
+}

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "always",
+    "source.addMissingImports": "always"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

.vscode/settings.json

@@ -70,11 +70,7 @@ export const handleCanvasMouseDown = ({
   canvas.isDrawingMode = false;
 
   // if target is the selected shape or active selection, set isDrawing to false
-  if (
-    target &&
-    (target.type === selectedShapeRef.current ||
-      target.type === "activeSelection")
-  ) {
+  if (target && (target.type === selectedShapeRef.current || target.type === "activeSelection")) {
     isDrawing.current = false;
 
     // set active object to target
@@ -89,10 +85,7 @@ export const handleCanvasMouseDown = ({
     isDrawing.current = true;
 
     // create custom fabric object/shape and set it to shapeRef
-    shapeRef.current = createSpecificShape(
-      selectedShapeRef.current,
-      pointer as any
-    );
+    shapeRef.current = createSpecificShape(selectedShapeRef.current, pointer as any);
 
     // if shapeRef is not null, add it to canvas
     if (shapeRef.current) {
@@ -215,10 +208,7 @@ export const handleCanvasObjectModified = ({
 };
 
 // update shape in storage when path is created when in freeform mode
-export const handlePathCreated = ({
-  options,
-  syncShapeInStorage,
-}: CanvasPathCreated) => {
+export const handlePathCreated = ({ options, syncShapeInStorage }: CanvasPathCreated) => {
   // get path object
   const path = options.path;
   if (!path) return;
@@ -233,11 +223,7 @@ export const handlePathCreated = ({
 };
 
 // check how object is moving on canvas and restrict it to canvas boundaries
-export const handleCanvasObjectMoving = ({
-  options,
-}: {
-  options: fabric.IEvent;
-}) => {
+export const handleCanvasObjectMoving = ({ options }: { options: fabric.IEvent }) => {
   // get target object which is moving
   const target = options.target as fabric.Object;
 
@@ -251,21 +237,15 @@ export const handleCanvasObjectMoving = ({
   if (target && target.left) {
     target.left = Math.max(
       0,
-      Math.min(
-        target.left,
-        (canvas.width || 0) - (target.getScaledWidth() || target.width || 0)
-      )
+      Math.min(target.left, (canvas.width || 0) - (target.getScaledWidth() || target.width || 0))
     );
   }
 
   // restrict object to canvas boundaries (vertical)
   if (target && target.top) {
     target.top = Math.max(
       0,
-      Math.min(
-        target.top,
-        (canvas.height || 0) - (target.getScaledHeight() || target.height || 0)
-      )
+      Math.min(target.top, (canvas.height || 0) - (target.getScaledHeight() || target.height || 0))
     );
   }
 };
@@ -327,19 +307,15 @@ export const handleCanvasObjectScaling = ({
     ? selectedElement?.height! * selectedElement?.scaleY
     : selectedElement?.height;
 
-  setElementAttributes((prev) => ({
+  setElementAttributes(prev => ({
     ...prev,
     width: scaledWidth?.toFixed(0).toString() || "",
     height: scaledHeight?.toFixed(0).toString() || "",
   }));
 };
 
 // render canvas objects coming from storage on canvas
-export const renderCanvas = ({
-  fabricRef,
-  canvasObjects,
-  activeObjectRef,
-}: RenderCanvas) => {
+export const renderCanvas = ({ fabricRef, canvasObjects, activeObjectRef }: RenderCanvas) => {
   // clear canvas
   fabricRef.current?.clear();
 
@@ -357,7 +333,7 @@ export const renderCanvas = ({
     fabric.util.enlivenObjects(
       [objectData],
       (enlivenedObjects: fabric.Object[]) => {
-        enlivenedObjects.forEach((enlivenedObj) => {
+        enlivenedObjects.forEach(enlivenedObj => {
           // if element is active, keep it in active state so that it can be edited further
           if (activeObjectRef.current?.objectId === objectId) {
             fabricRef.current?.setActiveObject(enlivenedObj);

lib/canvas.ts

@@ -1,4 +1,4 @@
-import jsPDF from "jspdf";
+import JsPDF from "jspdf";
 import { twMerge } from "tailwind-merge";
 import { type ClassValue, clsx } from "clsx";
 import { COLORS } from "@/app/api/liveblocks/auth";
@@ -40,8 +40,7 @@ export function cn(...inputs: ClassValue[]) {
 }
 
 export function generateRandomName(): string {
-  const randomAdjective =
-    adjectives[Math.floor(Math.random() * adjectives.length)];
+  const randomAdjective = adjectives[Math.floor(Math.random() * adjectives.length)];
   const randomAnimal = animals[Math.floor(Math.random() * animals.length)];
 
   return `${randomAdjective} ${randomAnimal}`;
@@ -120,7 +119,7 @@ export const exportToPdf = (fileName: string = DEFAULT_PDF_FILE_NAME) => {
   if (!canvas) return;
 
   // use jspdf
-  const doc = new jsPDF({
+  const doc = new JsPDF({
     orientation: "landscape",
     unit: "px",
     format: [canvas.width, canvas.height],