Merge pull request #8 from ilbertt/add-prettier-rules-and-pre-commit

prettier config and pre commit hook

.husky/pre-commit

@@ -0,0 +1 @@
+cd src/fortune-wheel-booth-frontend/ && pnpm format

package.json

@@ -6,12 +6,13 @@
     "prebuild": "pnpm run -r prebuild",
     "pretest": "pnpm run -r prebuild",
     "start": "pnpm run -r start",
-    "test": "pnpm run -r test"
+    "test": "pnpm run -r test",
+    "prepare": "husky"
   },
   "type": "module",
   "engines": {
     "node": "^20",
     "pnpm": "^9",
     "npm": "please use pnpm"
   }
-}
+}

src/fortune-wheel-booth-frontend/.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

src/fortune-wheel-booth-frontend/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "trailingComma": "es5",
+  "semi": true,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

src/fortune-wheel-booth-frontend/package.json

@@ -8,7 +8,8 @@
     "start": "vite --port 3000",
     "prebuild": "dfx generate",
     "build": "tsc && vite build",
-    "format": "prettier --write \"src/**/*.{json,js,jsx,ts,tsx,css,scss}\""
+    "format": "prettier --write \"src/**/*.{json,js,jsx,ts,tsx,css,scss}\"",
+    "prepare": "husky"
   },
   "dependencies": {
     "@dfinity/auth-client": "^1.3.0",
@@ -25,17 +26,19 @@
   },
   "devDependencies": {
     "@types/node": "^20.12.12",
-    "prettier": "^3.2.5",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@vitejs/plugin-react": "^4.0.1",
     "autoprefixer": "^10.4.19",
     "dotenv": "^16.3.1",
+    "husky": "^9.0.11",
     "postcss": "^8.4.38",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.14",
     "sass": "^1.63.6",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.1.3",
     "vite": "^4.3.9",
     "vite-plugin-environment": "^1.1.3"
   }
-}
+}

src/fortune-wheel-booth-frontend/src/App.tsx

@@ -2,7 +2,6 @@ import { Scanner } from '@yudiel/react-qr-scanner';
 import { useEffect, useState } from 'react';
 import { _SERVICE } from 'declarations/fortune-wheel-booth-backend/fortune-wheel-booth-backend.did';
 import { Principal } from '@dfinity/principal';
-import icpItChLogo from './assets/hub-logo-light.svg';
 import icpMainLogo from './assets/icp-main-logo.svg';
 import useIcState from './hooks/useIcState';
 

src/fortune-wheel-booth-frontend/src/components/Fireworks.tsx

@@ -1,16 +1,16 @@
 // comments from https://github.com/tsparticles/react
 
-import { useEffect, useMemo, useState } from "react";
-import Particles, { initParticlesEngine } from "@tsparticles/react";
+import { useEffect, useMemo, useState } from 'react';
+import Particles, { initParticlesEngine } from '@tsparticles/react';
 import {
   type Container,
   type ISourceOptions,
   MoveDirection,
   OutMode,
-} from "@tsparticles/engine";
+} from '@tsparticles/engine';
 // import { loadAll } from "@tsparticles/all"; // if you are going to use `loadAll`, install the "@tsparticles/all" package too.
 // import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
-import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
+import { loadSlim } from '@tsparticles/slim'; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
 // import { loadBasic } from "@tsparticles/basic"; // if you are going to use `loadBasic`, install the "@tsparticles/basic" package too.
 
 export default function Fireworks() {
@@ -42,11 +42,11 @@ export default function Fireworks() {
         events: {
           onClick: {
             enable: true,
-            mode: "push",
+            mode: 'push',
           },
           onHover: {
             enable: true,
-            mode: "repulse",
+            mode: 'repulse',
           },
         },
         modes: {
@@ -61,10 +61,10 @@ export default function Fireworks() {
       },
       particles: {
         color: {
-          value: "#ffffff",
+          value: '#ffffff',
         },
         links: {
-          color: "#ffffff",
+          color: '#ffffff',
           distance: 150,
           enable: true,
           opacity: 0.5,
@@ -90,21 +90,21 @@ export default function Fireworks() {
           value: 0.5,
         },
         shape: {
-          type: "circle",
+          type: 'circle',
         },
         size: {
           value: { min: 1, max: 5 },
         },
       },
       detectRetina: true,
     }),
-    [],
+    []
   );
 
   if (init) {
     return (
       <Particles
-        id="tsparticles"
+        id='tsparticles'
         particlesLoaded={particlesLoaded}
         options={options}
       />

src/fortune-wheel-booth-frontend/src/components/FortuneWheel.tsx

@@ -16,7 +16,7 @@ export default function FortuneWheel({
   mustSpin,
 }: FortuneWheelProps) {
   return (
-    <div className="relative wheel-container">
+    <div className='wheel-container relative'>
       <Wheel
         mustStartSpinning={mustSpin}
         prizeNumber={prizeNumber}
@@ -27,13 +27,13 @@ export default function FortuneWheel({
         outerBorderWidth={0}
         pointerProps={{
           src: Pointer,
-          style: { transform: "translate(-22%, 20%) rotate(250deg)" },
+          style: { transform: 'translate(-22%, 20%) rotate(250deg)' },
         }}
       />
       <img
-        className="absolute z-10 h-[10vw] w-[10vw] left-0 right-0 top-2/4 bottom-2/4"
+        className='absolute bottom-2/4 left-0 right-0 top-2/4 z-10 h-[10vw] w-[10vw]'
         src={IcpLogo}
-        alt="icp logo"
+        alt='icp logo'
       />
     </div>
   );

src/fortune-wheel-booth-frontend/src/components/ModalPrize.tsx

@@ -1,7 +1,7 @@
-import Fireworks from "./Fireworks";
-import CloseIcon from "../assets/close.svg";
-import { PRIZES, PRIZES_VALUES_MAPPING } from "../costants";
-import { Dispatch, SetStateAction, useMemo } from "react";
+import Fireworks from './Fireworks';
+import CloseIcon from '../assets/close.svg';
+import { PRIZES, PRIZES_VALUES_MAPPING } from '../costants';
+import { Dispatch, SetStateAction, useMemo } from 'react';
 
 interface ModalPrizeProps {
   prizeNumber: number;
@@ -24,27 +24,27 @@ export default function ModalPrize({
   );
 
   return (
-    <div className="absolute flex justify-center items-center backdrop-blur-2xl h-full w-full z-20 flex-col">
+    <div className='absolute z-20 flex h-full w-full flex-col items-center justify-center backdrop-blur-2xl'>
       <button
         onClick={() => {
           setShowModalPrize(false);
           setMustSpin(false);
         }}
-        className='absolute top-5 right-5 bg-white rounded-full p-1 cursor-pointer flex justify-center items-center'
+        className='absolute right-5 top-5 flex cursor-pointer items-center justify-center rounded-full bg-white p-1'
       >
-        <img src={CloseIcon} className="h-[3vw]" alt="Close Icon"></img>
+        <img src={CloseIcon} className='h-[3vw]' alt='Close Icon'></img>
       </button>
       <Fireworks />
-      <div className="flex flex-col justify-center items-center gap-4">
-        <p className="text-[6vw] font-bold text-white uppercase">You won!</p>
-        <div className="prize-container-animation">
+      <div className='flex flex-col items-center justify-center gap-4'>
+        <p className='text-[6vw] font-bold uppercase text-white'>You won!</p>
+        <div className='prize-container-animation'>
           <img
             src={wonPrize.image?.uri}
-            alt="prize"
-            className="prize-animation h-30"
+            alt='prize'
+            className='prize-animation h-30'
           />
         </div>
-        <p className="text-[3vw] font-bold text-white uppercase prize-value-animation bg-dfinity-gradient-dark rounded-2xl p-2 px-4">
+        <p className='prize-value-animation rounded-2xl bg-dfinity-gradient-dark p-2 px-4 text-[3vw] font-bold uppercase text-white'>
           {wonPrizeValue}
         </p>
       </div>

src/fortune-wheel-booth-frontend/src/index.scss

@@ -41,7 +41,7 @@ form {
   align-items: baseline;
 }
 
-button[type="submit"] {
+button[type='submit'] {
   padding: 5px 20px;
   margin: 10px auto;
   float: right;

src/fortune-wheel-booth-frontend/src/main.tsx

@@ -1,10 +1,10 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
-import "./index.scss";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.scss';
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
+  </React.StrictMode>
 );