ci: prettier stuff

.eslintrc.json

@@ -7,9 +7,9 @@
     "airbnb",
     "airbnb-typescript",
     "prettier",
+    "next/core-web-vitals",
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
-    "next/core-web-vitals",
     "plugin:jsx-a11y/recommended"
   ],
   "plugins": [

.github/workflows/production.yaml

@@ -6,7 +6,7 @@ env:
 on:
   release:
     types: [published]
-    
+
 jobs:
   Deploy-Production:
     runs-on: ubuntu-latest

.github/workflows/staging.yaml

@@ -19,4 +19,4 @@ jobs:
       - name: Build Project Artifacts
         run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
       - name: Deploy Project Artifacts to Vercel
-        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
+        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

.lintstagedrc.js

@@ -1,10 +1,10 @@
 const path = require('path')
- 
+
 const buildEslintCommand = (filenames) =>
   `next lint --fix --file ${filenames
     .map((f) => path.relative(process.cwd(), f))
     .join(' --file ')}`
- 
+
 module.exports = {
   '*.{js,jsx,ts,tsx}': [buildEslintCommand],
-}
+}

.prettierrc.json

@@ -0,0 +1,12 @@
+{
+  "tailwindConfig": "./tailwind.config.ts",
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "pluginSearchDirs": false,
+  "useTabs": false,
+  "tabWidth": 2,
+  "printWidth": 80,
+  "semi": false,
+  "trailingComma": "es5",
+  "jsxSingleQuote": true,
+  "singleQuote": true
+}

commitsense.config.json

@@ -12,8 +12,6 @@
     "chore",
     "revert"
   ],
-  "skip_ci_types": [
-    "docs"
-  ],
+  "skip_ci_types": ["docs"],
   "version": 1
-}
+}

package.json

@@ -42,8 +42,9 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.2",
     "postcss": "^8",
-    "prettier": "3.2.4",
+    "prettier": "^3.2.4",
     "prettier-plugin-tailwind": "^2.2.12",
+    "prettier-plugin-tailwindcss": "^0.5.11",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   },

src/_lib/colors.ts

@@ -1,46 +1,43 @@
 export const hexToRgb = (hex: string) => {
-  const hexValue = hex.replace("#", "");
+  const hexValue = hex.replace('#', '')
 
-  const r = parseInt(hexValue.substring(0, 2), 16);
-  const g = parseInt(hexValue.substring(2, 4), 16);
-  const b = parseInt(hexValue.substring(4, 6), 16);
+  const r = parseInt(hexValue.substring(0, 2), 16)
+  const g = parseInt(hexValue.substring(2, 4), 16)
+  const b = parseInt(hexValue.substring(4, 6), 16)
 
-  return { r, g, b };
-};
+  return { r, g, b }
+}
 
 export const calculateLuminance = (rgb: {
-  r: number;
-  g: number;
-  b: number;
+  r: number
+  g: number
+  b: number
 }) => {
-  const { r, g, b } = rgb;
+  const { r, g, b } = rgb
 
-  const rsrgb = r / 255;
-  const gsrgb = g / 255;
-  const bsrgb = b / 255;
+  const rsrgb = r / 255
+  const gsrgb = g / 255
+  const bsrgb = b / 255
 
-  const rL =
-    rsrgb <= 0.04045 ? rsrgb / 12.92 : ((rsrgb + 0.055) / 1.055) ** 2.4;
-  const gL =
-    gsrgb <= 0.04045 ? gsrgb / 12.92 : ((gsrgb + 0.055) / 1.055) ** 2.4;
-  const bL =
-    bsrgb <= 0.04045 ? bsrgb / 12.92 : ((bsrgb + 0.055) / 1.055) ** 2.4;
+  const rL = rsrgb <= 0.04045 ? rsrgb / 12.92 : ((rsrgb + 0.055) / 1.055) ** 2.4
+  const gL = gsrgb <= 0.04045 ? gsrgb / 12.92 : ((gsrgb + 0.055) / 1.055) ** 2.4
+  const bL = bsrgb <= 0.04045 ? bsrgb / 12.92 : ((bsrgb + 0.055) / 1.055) ** 2.4
 
-  const luminance = 0.2126 * rL + 0.7152 * gL + 0.0722 * bL;
+  const luminance = 0.2126 * rL + 0.7152 * gL + 0.0722 * bL
 
-  return luminance;
-};
+  return luminance
+}
 
 export const calculateRGBsContrast = (text: string, background: string) => {
-  const rgbText = hexToRgb(text);
-  const rgbBackground = hexToRgb(background);
+  const rgbText = hexToRgb(text)
+  const rgbBackground = hexToRgb(background)
 
-  const luminanceText = calculateLuminance(rgbText);
-  const luminanceBackground = calculateLuminance(rgbBackground);
+  const luminanceText = calculateLuminance(rgbText)
+  const luminanceBackground = calculateLuminance(rgbBackground)
 
   const contrast =
     (Math.max(luminanceText, luminanceBackground) + 0.05) /
-    (Math.min(luminanceText, luminanceBackground) + 0.05);
+    (Math.min(luminanceText, luminanceBackground) + 0.05)
 
-  return +contrast.toFixed(2);
-};
+  return +contrast.toFixed(2)
+}

src/_lib/compliance.ts

@@ -2,7 +2,7 @@ export const calculateWCAGCompliance = (contrast: number) => {
   const thresholds = {
     AA: { normal: 4.5, large: 3.0, components: 3.0 },
     AAA: { normal: 7.0, large: 4.5 },
-  };
+  }
 
   return {
     AA: {
@@ -14,20 +14,20 @@ export const calculateWCAGCompliance = (contrast: number) => {
       normal: contrast >= thresholds.AAA.normal,
       large: contrast >= thresholds.AAA.large,
     },
-  };
-};
+  }
+}
 
 export const generateComplianceColor = (
   smallCompliant: boolean,
-  largeCompliant: boolean,
+  largeCompliant: boolean
 ) => {
   if (smallCompliant && largeCompliant) {
-    return { backgroundColor: "#bdffc0", color: "#005704" };
+    return { backgroundColor: '#bdffc0', color: '#005704' }
   }
 
   if (largeCompliant || smallCompliant) {
-    return { backgroundColor: "#fddeaf", color: "#6b3600" };
+    return { backgroundColor: '#fddeaf', color: '#6b3600' }
   }
 
-  return { backgroundColor: "#ffb3b3", color: "#6b0000" };
-};
+  return { backgroundColor: '#ffb3b3', color: '#6b0000' }
+}

src/app/layout.tsx

@@ -1,36 +1,31 @@
-import "../styles/globals.css";
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import '../styles/globals.css'
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
 
-import DarkModeProvider from "@/components/theme/DarkModeProvider";
-import Navbar from "@/components/navbar/Navbar";
-import Footer from "@/components/footer/Footer";
+import DarkModeProvider from '@/components/theme/DarkModeProvider'
+import Navbar from '@/components/navbar/Navbar'
+import Footer from '@/components/footer/Footer'
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: "Swift Contrast",
+  title: 'Swift Contrast',
   description:
-    "A lightweight color picker with real-time WCAG contrast analysis for accessible and inclusive design decisions.",
-};
+    'A lightweight color picker with real-time WCAG contrast analysis for accessible and inclusive design decisions.',
+}
 
-const RootLayout = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) =>
-  (
-  <html className="dark" lang="en" style={{ colorScheme: "dark" }}>
+const RootLayout = ({ children }: { children: React.ReactNode }) => (
+  <html className='dark' lang='en' style={{ colorScheme: 'dark' }}>
     <body className={inter.className}>
       <DarkModeProvider>
         <Navbar />
-        <main id="main" className="p-2">
+        <main id='main' className='p-2'>
           {children}
         </main>
         <Footer />
       </DarkModeProvider>
     </body>
   </html>
-);
+)
 
-export default RootLayout;
+export default RootLayout

src/app/page.tsx

@@ -1,17 +1,17 @@
-import ColorContrast from "@/components/contrast/ColorContrast";
-import ContrastCheckerGuide from "@/components/guides/ContrastCheckerGuide";
+import ColorContrast from '@/components/contrast/ColorContrast'
+import ContrastCheckerGuide from '@/components/guides/ContrastCheckerGuide'
 
 const Home = () => (
-  <section id="home">
+  <section id='home'>
     <title>Swift Contrast - WCAG Contrast Checker</title>
-    <h1 className="block whitespace-nowrap text-xl lg:text-3xl font-semibold text-center">
+    <h1 className='block whitespace-nowrap text-center text-xl font-semibold lg:text-3xl'>
       Swift Contrast
     </h1>
 
-    <ColorContrast /> 
-    
+    <ColorContrast />
+
     <ContrastCheckerGuide />
   </section>
-);
+)
 
-export default Home;
+export default Home