chore: migrate from ESLint/Prettier to Oxc

2026-02-20 03:09:20 +01:00 · 2026-02-17 01:23:03 +01:00
parent 57026d652c
commit d0cde4538c
83 changed files with 2569 additions and 4342 deletions
--- a/packages/blog/eslint.config.js
+++ b/packages/blog/eslint.config.js
@@ -1,14 +0,0 @@
-import typescriptESLint from "typescript-eslint"
-import { defineConfig } from "eslint/config"
-import config from "@repo/config-eslint"
-
-export default defineConfig(...config, {
-  files: ["**/*.ts", "**/*.tsx"],
-  languageOptions: {
-    parser: typescriptESLint.parser,
-    parserOptions: {
-      projectService: true,
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
--- a/packages/blog/package.json
+++ b/packages/blog/package.json
@@ -9,46 +9,42 @@
    "./BlogPostUI": "./src/BlogPostUI.tsx"
  },
  "scripts": {
-    "lint:eslint": "eslint src --max-warnings 0",
    "lint:typescript": "tsc --noEmit"
  },
  "dependencies": {
+    "@giscus/react": "catalog:",
+    "@mdx-js/mdx": "catalog:",
    "@repo/config-tailwind": "workspace:*",
-    "@repo/utils": "workspace:*",
    "@repo/i18n": "workspace:*",
    "@repo/ui": "workspace:*",
-    "@giscus/react": "catalog:",
+    "@repo/utils": "workspace:*",
    "@shikijs/rehype": "catalog:",
-    "@mdx-js/mdx": "catalog:",
    "gray-matter": "catalog:",
    "katex": "catalog:",
+    "next": "catalog:",
+    "next-intl": "catalog:",
+    "next-mdx-remote": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "react-icons": "catalog:",
    "rehype-katex": "catalog:",
    "rehype-raw": "catalog:",
    "rehype-slug": "catalog:",
    "remark-gfm": "catalog:",
    "remark-math": "catalog:",
-    "shiki": "catalog:",
-    "next": "catalog:",
-    "next-mdx-remote": "catalog:",
-    "next-intl": "catalog:",
-    "react": "catalog:",
-    "react-dom": "catalog:",
-    "react-icons": "catalog:"
+    "shiki": "catalog:"
  },
  "devDependencies": {
-    "@repo/config-eslint": "workspace:*",
    "@repo/config-typescript": "workspace:*",
+    "@storybook/nextjs": "catalog:",
+    "@tailwindcss/postcss": "catalog:",
+    "@total-typescript/ts-reset": "catalog:",
    "@types/node": "catalog:",
    "@types/react": "catalog:",
    "@types/react-dom": "catalog:",
-    "@total-typescript/ts-reset": "catalog:",
-    "storybook": "catalog:",
-    "@storybook/nextjs": "catalog:",
-    "eslint": "catalog:",
    "postcss": "catalog:",
+    "storybook": "catalog:",
    "tailwindcss": "catalog:",
-    "@tailwindcss/postcss": "catalog:",
-    "typescript-eslint": "catalog:",
    "typescript": "catalog:"
  }
 }
--- a/packages/blog/posts/clean-code.md
+++ b/packages/blog/posts/clean-code.md
@@ -173,10 +173,7 @@ We have to keep it as simple as possible, not to implement features that are not
 import fs from "node:fs"
 import path from "node:path"

-const createFile = async (
-    name: string,
-    isTemporary: boolean = false,
-): Promise<void> => {
+const createFile = async (name: string, isTemporary: boolean = false): Promise<void> => {
    if (isTemporary) {
        return await fs.promises.writeFile(path.join("temporary", name), "")
    }
--- a/packages/blog/src/BlogPost.ts
+++ b/packages/blog/src/BlogPost.ts
@@ -17,8 +17,7 @@ export const BLOG_POST_MOCK = {
    "\nHello, world! 👋\n\n## Introduction\n\nThis blog is here to document my journey of learning computer science.",
  frontmatter: {
    title: "👋 Hello, world!",
-    description:
-      "First post of the blog, introduction and explanation of how this blog is made.",
+    description: "First post of the blog, introduction and explanation of how this blog is made.",
    isPublished: true,
    publishedOn: "2022-02-20T08:00:18.758Z",
  },
--- a/packages/blog/src/BlogPostContent.tsx
+++ b/packages/blog/src/BlogPostContent.tsx
@@ -14,10 +14,9 @@ import "katex/dist/katex.min.css"
 import { BlogPostComments } from "./BlogPostComments.tsx"

 const Heading: React.FC<
-  React.DetailedHTMLProps<
-    React.HTMLAttributes<HTMLHeadingElement>,
-    HTMLHeadingElement
-  > & { as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" }
+  React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> & {
+    as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+  }
 > = (props) => {
  const { children, as, id = "", ...rest } = props

@@ -37,9 +36,7 @@ export interface BlogPostContentProps {
  content: string
 }

-export const BlogPostContent: React.FC<BlogPostContentProps> = async (
-  props,
-) => {
+export const BlogPostContent: React.FC<BlogPostContentProps> = async (props) => {
  const { content } = props

  return (
@@ -90,13 +87,7 @@ export const BlogPostContent: React.FC<BlogPostContentProps> = async (
              const source = src.replace("../../../apps/website/public/", "/")
              return (
                <span className="flex flex-col items-center justify-center">
-                  <Image
-                    src={source}
-                    alt={alt}
-                    width={1000}
-                    height={1000}
-                    className="size-auto"
-                  />
+                  <Image src={source} alt={alt} width={1000} height={1000} className="size-auto" />
                </span>
              )
            },
@@ -109,9 +100,7 @@ export const BlogPostContent: React.FC<BlogPostContentProps> = async (
              if (hrefString.startsWith("../posts/")) {
                return (
                  <Link
-                    href={hrefString
-                      .replace("../posts/", "/blog/")
-                      .replace(".md", "")}
+                    href={hrefString.replace("../posts/", "/blog/").replace(".md", "")}
                    {...rest}
                  />
                )
--- a/packages/blog/src/BlogPostUI.tsx
+++ b/packages/blog/src/BlogPostUI.tsx
@@ -19,9 +19,7 @@ export const BlogPostUI: React.FC<BlogPostUIProps> = (props) => {
        <Typography variant="h2" as="h1">
          {blogPost.frontmatter.title}
        </Typography>
-        <p className="mt-2">
-          {getISODate(new Date(blogPost.frontmatter.publishedOn))}
-        </p>
+        <p className="mt-2">{getISODate(new Date(blogPost.frontmatter.publishedOn))}</p>
      </div>
      <BlogPostContent content={blogPost.content} />
    </MainLayout>
--- a/packages/blog/src/BlogPosts.tsx
+++ b/packages/blog/src/BlogPosts.tsx
@@ -14,9 +14,7 @@ export const BlogPosts: React.FC<BlogPostsProps> = (props) => {
  return (
    <ul className="list-none">
      {posts.map((post) => {
-        const postPublishedOn = getISODate(
-          new Date(post.frontmatter.publishedOn),
-        )
+        const postPublishedOn = getISODate(new Date(post.frontmatter.publishedOn))

        return (
          <li key={post.slug}>
--- a/packages/blog/src/blog.ts
+++ b/packages/blog/src/blog.ts
@@ -4,14 +4,7 @@ import path from "node:path"
 import matter from "gray-matter"
 import type { BlogPost, FrontMatter } from "./BlogPost.tsx"

-export const BLOG_POSTS_PATH = path.join(
-  process.cwd(),
-  "..",
-  "..",
-  "packages",
-  "blog",
-  "posts",
-)
+export const BLOG_POSTS_PATH = path.join(process.cwd(), "..", "..", "packages", "blog", "posts")

 export const getBlogPosts = async (): Promise<BlogPost[]> => {
  const blogPosts = await fs.promises.readdir(BLOG_POSTS_PATH)
@@ -48,9 +41,7 @@ export const getBlogPosts = async (): Promise<BlogPost[]> => {
  return blogPostsSortedByPublicationDate
 }

-export const getBlogPostBySlug = async (
-  slug: string,
-): Promise<BlogPost | undefined> => {
+export const getBlogPostBySlug = async (slug: string): Promise<BlogPost | undefined> => {
  const blogPosts = await getBlogPosts()
  const blogPost = blogPosts.find((blogPost) => {
    return blogPost.slug === slug
--- a/packages/blog/tsconfig.json
+++ b/packages/blog/tsconfig.json
@@ -2,10 +2,6 @@
  "extends": "@repo/config-typescript/tsconfig.json",
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "types": [
-      "@total-typescript/ts-reset",
-      "@types/node",
-      "@repo/i18n/messages.d.ts"
-    ]
+    "types": ["@total-typescript/ts-reset", "@types/node", "@repo/i18n/messages.d.ts"]
  }
 }
--- a/packages/i18n/eslint.config.js
+++ b/packages/i18n/eslint.config.js
@@ -1,14 +0,0 @@
-import typescriptESLint from "typescript-eslint"
-import { defineConfig } from "eslint/config"
-import config from "@repo/config-eslint"
-
-export default defineConfig(...config, {
-  files: ["**/*.ts", "**/*.tsx"],
-  languageOptions: {
-    parser: typescriptESLint.parser,
-    parserOptions: {
-      projectService: true,
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -10,7 +10,6 @@
    "./routing": "./src/routing.ts"
  },
  "scripts": {
-    "lint:eslint": "eslint src --max-warnings 0",
    "lint:typescript": "tsc --noEmit"
  },
  "dependencies": {
@@ -21,13 +20,10 @@
    "react-dom": "catalog:"
  },
  "devDependencies": {
-    "@repo/config-eslint": "workspace:*",
    "@repo/config-typescript": "workspace:*",
+    "@total-typescript/ts-reset": "catalog:",
    "@types/react": "catalog:",
    "@types/react-dom": "catalog:",
-    "@total-typescript/ts-reset": "catalog:",
-    "eslint": "catalog:",
-    "typescript-eslint": "catalog:",
    "typescript": "catalog:"
  }
 }
--- a/packages/i18n/src/request.ts
+++ b/packages/i18n/src/request.ts
@@ -8,18 +8,11 @@ import { deepMerge } from "@repo/utils/objects"

 export default getRequestConfig(async ({ requestLocale }) => {
  const requested = await requestLocale
-  const locale = hasLocale(routing.locales, requested)
-    ? requested
-    : routing.defaultLocale
+  const locale = hasLocale(routing.locales, requested) ? requested : routing.defaultLocale

  const userMessages = (await import(`./translations/${locale}.json`)).default
-  const defaultMessages = (
-    await import(`./translations/${LOCALE_DEFAULT}.json`)
-  ).default
-  const messages = deepMerge<AbstractIntlMessages>(
-    defaultMessages,
-    userMessages,
-  )
+  const defaultMessages = (await import(`./translations/${LOCALE_DEFAULT}.json`)).default
+  const messages = deepMerge<AbstractIntlMessages>(defaultMessages, userMessages)

  return {
    locale,
--- a/packages/i18n/src/routing.ts
+++ b/packages/i18n/src/routing.ts
@@ -23,11 +23,5 @@ export const routing = defineRouting({
  localePrefix: LOCALE_PREFIX,
 })

-export const {
-  Link,
-  redirect,
-  usePathname,
-  useRouter,
-  getPathname,
-  permanentRedirect,
-} = createNavigation(routing)
+export const { Link, redirect, usePathname, useRouter, getPathname, permanentRedirect } =
+  createNavigation(routing)
--- a/packages/i18n/src/translations/curriculum-vitae.fr-FR.legacy.jsonc
+++ b/packages/i18n/src/translations/curriculum-vitae.fr-FR.legacy.jsonc
@@ -164,13 +164,7 @@
      "name": "Backend",
    },
    {
-      "keywords": [
-        "GNU/Linux",
-        "Arch Linux",
-        "Visual Studio Code",
-        "Git",
-        "Docker",
-      ],
+      "keywords": ["GNU/Linux", "Arch Linux", "Visual Studio Code", "Git", "Docker"],
      "name": "Logiciels et outils",
    },
    {
--- a/packages/ui/eslint.config.js
+++ b/packages/ui/eslint.config.js
@@ -1,14 +0,0 @@
-import typescriptESLint from "typescript-eslint"
-import { defineConfig } from "eslint/config"
-import config from "@repo/config-eslint"
-
-export default defineConfig(...config, {
-  files: ["**/*.ts", "**/*.tsx"],
-  languageOptions: {
-    parser: typescriptESLint.parser,
-    parserOptions: {
-      projectService: true,
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -23,14 +23,12 @@
    "./Layout/Section": "./src/Layout/Section/Section.tsx"
  },
  "scripts": {
-    "lint:eslint": "eslint src --max-warnings 0",
    "lint:typescript": "tsc --noEmit"
  },
  "dependencies": {
    "@repo/config-tailwind": "workspace:*",
-    "@repo/utils": "workspace:*",
    "@repo/i18n": "workspace:*",
-    "cva": "catalog:",
+    "@repo/utils": "workspace:*",
    "next": "catalog:",
    "next-intl": "catalog:",
    "next-themes": "catalog:",
@@ -39,18 +37,15 @@
    "react-icons": "catalog:"
  },
  "devDependencies": {
-    "@repo/config-eslint": "workspace:*",
    "@repo/config-typescript": "workspace:*",
+    "@storybook/nextjs": "catalog:",
+    "@tailwindcss/postcss": "catalog:",
+    "@total-typescript/ts-reset": "catalog:",
    "@types/react": "catalog:",
    "@types/react-dom": "catalog:",
-    "@total-typescript/ts-reset": "catalog:",
-    "storybook": "catalog:",
-    "@storybook/nextjs": "catalog:",
-    "eslint": "catalog:",
    "postcss": "catalog:",
+    "storybook": "catalog:",
    "tailwindcss": "catalog:",
-    "@tailwindcss/postcss": "catalog:",
-    "typescript-eslint": "catalog:",
    "typescript": "catalog:"
  }
 }
--- a/packages/ui/src/CurriculumVitae/CurriculumVitaeEducation.tsx
+++ b/packages/ui/src/CurriculumVitae/CurriculumVitaeEducation.tsx
@@ -4,9 +4,7 @@ import { CurriculumVitaeSection } from "./CurriculumVitaeSection.tsx"

 export interface CurriculumVitaeEducationProps {}

-export const CurriculumVitaeEducation: React.FC<
-  CurriculumVitaeEducationProps
-> = () => {
+export const CurriculumVitaeEducation: React.FC<CurriculumVitaeEducationProps> = () => {
  const t = useTranslations()

  const educations = [
@@ -27,20 +25,15 @@ export const CurriculumVitaeEducation: React.FC<
          title: t("curriculum-vitae.education.iut.years.2021-2022.title"),
          courses: [
            t("curriculum-vitae.education.iut.years.2021-2022.courses.java"),
-            t(
-              "curriculum-vitae.education.iut.years.2021-2022.courses.systems-c",
-            ),
+            t("curriculum-vitae.education.iut.years.2021-2022.courses.systems-c"),
            // t(
            //   "curriculum-vitae.education.iut.years.2021-2022.courses.windows-forms",
            // ),
-            t.rich(
-              "curriculum-vitae.education.iut.years.2021-2022.courses.sql",
-              {
-                strong: (children) => {
-                  return <strong>{children}</strong>
-                },
+            t.rich("curriculum-vitae.education.iut.years.2021-2022.courses.sql", {
+              strong: (children) => {
+                return <strong>{children}</strong>
              },
-            ),
+            }),
          ],
        },
        {
@@ -48,49 +41,35 @@ export const CurriculumVitaeEducation: React.FC<
          title: t("curriculum-vitae.education.iut.years.2022-2023.title"),
          courses: [
            t("curriculum-vitae.education.iut.years.2022-2023.courses.web"),
-            t.rich(
-              "curriculum-vitae.education.iut.years.2022-2023.courses.tests",
-              {
-                strong: (children) => {
-                  return <strong>{children}</strong>
-                },
+            t.rich("curriculum-vitae.education.iut.years.2022-2023.courses.tests", {
+              strong: (children) => {
+                return <strong>{children}</strong>
              },
-            ),
-            t.rich(
-              "curriculum-vitae.education.iut.years.2022-2023.courses.clean-code",
-              {
-                strong: (children) => {
-                  return <strong>{children}</strong>
-                },
+            }),
+            t.rich("curriculum-vitae.education.iut.years.2022-2023.courses.clean-code", {
+              strong: (children) => {
+                return <strong>{children}</strong>
              },
-            ),
+            }),
            // t("curriculum-vitae.education.iut.years.2022-2023.courses.sql-security"),
-            t.rich(
-              "curriculum-vitae.education.iut.years.2022-2023.courses.systems-c",
-              {
-                strong: (children) => {
-                  return <strong>{children}</strong>
-                },
+            t.rich("curriculum-vitae.education.iut.years.2022-2023.courses.systems-c", {
+              strong: (children) => {
+                return <strong>{children}</strong>
              },
-            ),
+            }),
          ],
        },
        {
          year: t("curriculum-vitae.education.iut.years.2023-2024.description"),
          title: t("curriculum-vitae.education.iut.years.2023-2024.title"),
          courses: [
-            t.rich(
-              "curriculum-vitae.education.iut.years.2023-2024.courses.web",
-              {
-                strong: (children) => {
-                  return <strong>{children}</strong>
-                },
+            t.rich("curriculum-vitae.education.iut.years.2023-2024.courses.web", {
+              strong: (children) => {
+                return <strong>{children}</strong>
              },
-            ),
+            }),
            t("curriculum-vitae.education.iut.years.2023-2024.courses.ci-cd"),
-            t(
-              "curriculum-vitae.education.iut.years.2023-2024.courses.complexity-algorithms",
-            ),
+            t("curriculum-vitae.education.iut.years.2023-2024.courses.complexity-algorithms"),
            t("curriculum-vitae.education.iut.years.2023-2024.courses.no-sql"),
          ],
        },
--- a/packages/ui/src/CurriculumVitae/CurriculumVitaeInterests.tsx
+++ b/packages/ui/src/CurriculumVitae/CurriculumVitaeInterests.tsx
@@ -4,9 +4,7 @@ import { CurriculumVitaeSection } from "./CurriculumVitaeSection.tsx"

 export interface CurriculumVitaeInterestsProps {}

-export const CurriculumVitaeInterests: React.FC<
-  CurriculumVitaeInterestsProps
-> = () => {
+export const CurriculumVitaeInterests: React.FC<CurriculumVitaeInterestsProps> = () => {
  const t = useTranslations()

  const interests = [
@@ -16,22 +14,14 @@ export const CurriculumVitaeInterests: React.FC<
      },
      "link-github": (children) => {
        return (
-          <a
-            href="https://github.com/theoludwig"
-            target="_blank"
-            className="font-semibold"
-          >
+          <a href="https://github.com/theoludwig" target="_blank" className="font-semibold">
            {children}
          </a>
        )
      },
      "link-leon": (children) => {
        return (
-          <a
-            href="https://github.com/leon-ai/leon"
-            target="_blank"
-            className="font-semibold"
-          >
+          <a href="https://github.com/leon-ai/leon" target="_blank" className="font-semibold">
            {children}
          </a>
        )
--- a/packages/ui/src/CurriculumVitae/CurriculumVitaeProfile.tsx
+++ b/packages/ui/src/CurriculumVitae/CurriculumVitaeProfile.tsx
@@ -6,9 +6,7 @@ import { Locales } from "../Layout/Header/Locales/Locales.tsx"

 export interface CurriculumVitaeProfileProps {}

-export const CurriculumVitaeProfile: React.FC<
-  CurriculumVitaeProfileProps
-> = () => {
+export const CurriculumVitaeProfile: React.FC<CurriculumVitaeProfileProps> = () => {
  const t = useTranslations()

  return (
@@ -30,9 +28,7 @@ export const CurriculumVitaeProfile: React.FC<
          <h1 className="h3 my-1!">
            <strong>{t("meta.title")}</strong>
          </h1>
-          <h2 className="text-muted h5 font-semibold">
-            {t("curriculum-vitae.description")}
-          </h2>
+          <h2 className="text-muted h5 font-semibold">{t("curriculum-vitae.description")}</h2>
          <h2 className="text-muted h5">
            <BirthDate />
          </h2>
--- a/packages/ui/src/CurriculumVitae/CurriculumVitaeSection.tsx
+++ b/packages/ui/src/CurriculumVitae/CurriculumVitaeSection.tsx
@@ -4,9 +4,7 @@ export interface CurriculumVitaeSectionProps extends React.PropsWithChildren {
  title: string
 }

-export const CurriculumVitaeSection: React.FC<CurriculumVitaeSectionProps> = (
-  props,
-) => {
+export const CurriculumVitaeSection: React.FC<CurriculumVitaeSectionProps> = (props) => {
  const { id, icon, title, children } = props

  return (
--- a/packages/ui/src/CurriculumVitae/CurriculumVitaeSkills.tsx
+++ b/packages/ui/src/CurriculumVitae/CurriculumVitaeSkills.tsx
@@ -1,16 +1,11 @@
 import { useTranslations } from "next-intl"
 import { FaToolbox } from "react-icons/fa"
-import {
-  SKILL_CATEGORIES,
-  SKILL_NAMES_BY_CATEGORY,
-} from "../Home/Skills/skills.ts"
+import { SKILL_CATEGORIES, SKILL_NAMES_BY_CATEGORY } from "../Home/Skills/skills.ts"
 import { CurriculumVitaeSection } from "./CurriculumVitaeSection.tsx"

 export interface CurriculumVitaeSkillsProps {}

-export const CurriculumVitaeSkills: React.FC<
-  CurriculumVitaeSkillsProps
-> = () => {
+export const CurriculumVitaeSkills: React.FC<CurriculumVitaeSkillsProps> = () => {
  const t = useTranslations()

  const skills = [
@@ -23,11 +18,7 @@ export const CurriculumVitaeSkills: React.FC<
    }),
    {
      category: "others",
-      skillNames: [
-        t("fr-FR-main"),
-        t("locales.en-US"),
-        t("home.skills.driving-license"),
-      ],
+      skillNames: [t("fr-FR-main"), t("locales.en-US"), t("home.skills.driving-license")],
    },
  ] as const

--- a/packages/ui/src/Design/Button/Button.stories.tsx
+++ b/packages/ui/src/Design/Button/Button.stories.tsx
@@ -136,10 +136,7 @@ export const LinkWithIcons: Story = {
        <Button leftIcon={<FaCheck size={18} />} {...(args as ButtonLinkProps)}>
          Link Left Icon
        </Button>
-        <Button
-          rightIcon={<FaCheck size={18} />}
-          {...(args as ButtonLinkProps)}
-        >
+        <Button rightIcon={<FaCheck size={18} />} {...(args as ButtonLinkProps)}>
          Link Right Icon
        </Button>
      </ButtonContainer>
--- a/packages/ui/src/Design/Button/Button.tsx
+++ b/packages/ui/src/Design/Button/Button.tsx
@@ -1,32 +1,37 @@
 import { classNames } from "@repo/config-tailwind/classNames"
 import { Link as NextLink } from "@repo/i18n/routing"
-import type { VariantProps } from "cva"
-import { cva } from "cva"

 import { Spinner } from "../Spinner/Spinner.tsx"
 import { Ripple } from "./Ripple.tsx"

-const buttonVariants = cva({
-  base: "relative inline-flex items-center justify-center overflow-hidden rounded-md text-base font-semibold transition duration-150 ease-in-out focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-  variants: {
-    variant: {
-      solid: "bg-primary hover:bg-primary/80 text-white",
-      outline:
-        "dark:border-primary-dark/60 dark:text-primary-dark dark:hover:border-primary-dark border-primary/60 text-primary hover:border-primary hover:bg-primary border bg-transparent hover:text-white",
-    },
-    size: {
-      small: "h-9 rounded-md px-3",
-      medium: "h-10 px-4 py-2",
-      large: "h-11 rounded-md px-8",
-    },
-  },
-  defaultVariants: {
-    variant: "solid",
-    size: "medium",
-  },
-})
+const BUTTON_VARIANTS = ["solid", "outline"] as const
+type ButtonVariant = (typeof BUTTON_VARIANTS)[number]
+
+const BUTTON_SIZES = ["small", "medium", "large"] as const
+type ButtonSize = (typeof BUTTON_SIZES)[number]
+
+const buttonVariants = (options?: { variant?: ButtonVariant; size?: ButtonSize }): string => {
+  const { variant = "solid", size = "medium" } = options ?? {}
+  return classNames(
+    "relative inline-flex items-center justify-center overflow-hidden rounded-md text-base font-semibold transition duration-150 ease-in-out focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+    {
+      "bg-primary text-white hover:bg-primary/80": variant === "solid",
+
+      "border border-primary/60 bg-transparent text-primary hover:border-primary hover:bg-primary hover:text-white dark:border-primary-dark/60 dark:text-primary-dark dark:hover:border-primary-dark":
+        variant === "outline",
+    },
+    {
+      "h-9 rounded-md px-3": size === "small",
+      "h-10 px-4 py-2": size === "medium",
+      "h-11 rounded-md px-8": size === "large",
+    },
+  )
+}
+
+interface ButtonBaseProps {
+  variant?: ButtonVariant
+  size?: ButtonSize

-interface ButtonBaseProps extends VariantProps<typeof buttonVariants> {
  leftIcon?: React.ReactNode
  rightIcon?: React.ReactNode
  disabled?: boolean
@@ -34,14 +39,10 @@ interface ButtonBaseProps extends VariantProps<typeof buttonVariants> {
 }

 interface ButtonElementProps extends React.ComponentPropsWithoutRef<"button"> {}
-interface LinkElementProps extends React.ComponentPropsWithoutRef<
-  typeof NextLink
-> {}
+interface LinkElementProps extends React.ComponentPropsWithoutRef<typeof NextLink> {}

-export type ButtonLinkProps = ButtonBaseProps &
-  LinkElementProps & { href: string }
-export type ButtonButtonProps = ButtonBaseProps &
-  ButtonElementProps & { href?: never }
+export type ButtonLinkProps = ButtonBaseProps & LinkElementProps & { href: string }
+export type ButtonButtonProps = ButtonBaseProps & ButtonElementProps & { href?: never }

 export type ButtonProps = ButtonButtonProps | ButtonLinkProps

@@ -51,18 +52,13 @@ export type ButtonProps = ButtonButtonProps | ButtonLinkProps
 * @returns
 */
 export const Button: React.FC<ButtonProps> = (props) => {
-  const rippleColor =
-    props.variant === "outline" ? "rgb(30, 64, 175)" : "rgb(229, 231, 235)"
+  const rippleColor = props.variant === "outline" ? "rgb(30, 64, 175)" : "rgb(229, 231, 235)"

  if (typeof props.href === "string") {
-    const { variant, size, leftIcon, rightIcon, className, children, ...rest } =
-      props
+    const { variant, size, leftIcon, rightIcon, className, children, ...rest } = props

    return (
-      <NextLink
-        className={classNames(buttonVariants({ variant, size }), className)}
-        {...rest}
-      >
+      <NextLink className={classNames(buttonVariants({ variant, size }), className)} {...rest}>
        {leftIcon != null ? <span className="mr-2">{leftIcon}</span> : null}
        <span>{children}</span>
        {rightIcon != null ? <span className="ml-2">{rightIcon}</span> : null}
@@ -98,13 +94,9 @@ export const Button: React.FC<ButtonProps> = (props) => {
      disabled={isDisabled}
      {...rest}
    >
-      {leftIconElement != null ? (
-        <span className="mr-2">{leftIconElement}</span>
-      ) : null}
+      {leftIconElement != null ? <span className="mr-2">{leftIconElement}</span> : null}
      <span>{children}</span>
-      {rightIcon != null && !isLoading ? (
-        <span className="ml-2">{rightIcon}</span>
-      ) : null}
+      {rightIcon != null && !isLoading ? <span className="ml-2">{rightIcon}</span> : null}

      <Ripple color={rippleColor} />
    </button>
--- a/packages/ui/src/Design/Link/Link.tsx
+++ b/packages/ui/src/Design/Link/Link.tsx
@@ -17,7 +17,7 @@ export const Link: React.FC<LinkProps> = (props) => {
  return (
    <NextLink
      className={classNames(
-        "text-primary dark:text-primary-dark inline-flex items-center gap-1 font-semibold hover:underline focus:rounded-md focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+        "inline-flex items-center gap-1 font-semibold text-primary hover:underline focus:rounded-md focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none dark:text-primary-dark",
        className,
      )}
      target={target}
@@ -25,11 +25,7 @@ export const Link: React.FC<LinkProps> = (props) => {
    >
      {children}

-      {target === "_blank" && isExternal ? (
-        <FiExternalLink size={16} strokeWidth={2.5} />
-      ) : (
-        <></>
-      )}
+      {target === "_blank" && isExternal ? <FiExternalLink size={16} strokeWidth={2.5} /> : <></>}
    </NextLink>
  )
 }
--- a/packages/ui/src/Design/Spinner/Spinner.tsx
+++ b/packages/ui/src/Design/Spinner/Spinner.tsx
@@ -20,7 +20,7 @@ export const Spinner: React.FC<SpinnerProps> = (props) => {
        height: size,
      }}
      className={classNames(
-        "text-primary dark:text-primary-dark flex animate-spin rounded-full border-2 border-current border-t-transparent",
+        "flex animate-spin rounded-full border-2 border-current border-t-transparent text-primary dark:text-primary-dark",
        className,
      )}
      role="status"
--- a/packages/ui/src/Design/Typography/Typography.stories.tsx
+++ b/packages/ui/src/Design/Typography/Typography.stories.tsx
@@ -67,8 +67,7 @@ export const Variants: Story = {
        </Typography>

        <Typography as="p" variant="text1">
-          <abbr title="Cascading Style Sheets">CSS</abbr> (Abbreviation or
-          Acronym)
+          <abbr title="Cascading Style Sheets">CSS</abbr> (Abbreviation or Acronym)
        </Typography>

        <Typography as="p" variant="text1">
@@ -76,8 +75,8 @@ export const Variants: Story = {
        </Typography>

        <Typography as="p" variant="text1">
-          A <dfn id="def-validator">validator</dfn> is a program that checks for
-          syntax errors in code or documents. (Definition)
+          A <dfn id="def-validator">validator</dfn> is a program that checks for syntax errors in
+          code or documents. (Definition)
        </Typography>

        <Typography as="blockquote" variant="text1">
--- a/packages/ui/src/Design/Typography/Typography.tsx
+++ b/packages/ui/src/Design/Typography/Typography.tsx
@@ -1,26 +1,27 @@
 import { classNames } from "@repo/config-tailwind/classNames"
-import type { VariantProps } from "cva"
-import { cva } from "cva"

-const typographyVariants = cva({
-  variants: {
-    variant: {
-      h1: "text-primary dark:text-primary-dark text-4xl font-semibold",
-      h2: "text-primary dark:text-primary-dark text-3xl font-semibold",
-      h3: "text-primary dark:text-primary-dark text-2xl font-semibold",
-      h4: "text-primary dark:text-primary-dark text-xl font-semibold",
-      h5: "text-primary dark:text-primary-dark text-xl font-medium",
-      h6: "text-primary dark:text-primary-dark text-lg font-medium",
-      text1: "text-base break-words",
-      text2: "text-sm break-words",
-    },
-  },
-})
+const TYPOGRAPHY_VARIANTS = ["h1", "h2", "h3", "h4", "h5", "h6", "text1", "text2"] as const
+type TypographyVariant = (typeof TYPOGRAPHY_VARIANTS)[number]
+
+const typographyVariants = (options?: { variant?: TypographyVariant }): string => {
+  const { variant = "text1" } = options ?? {}
+  return classNames({
+    "text-4xl font-semibold text-primary dark:text-primary-dark": variant === "h1",
+    "text-3xl font-semibold text-primary dark:text-primary-dark": variant === "h2",
+    "text-2xl font-semibold text-primary dark:text-primary-dark": variant === "h3",
+    "text-xl font-semibold text-primary dark:text-primary-dark": variant === "h4",
+    "text-xl font-medium text-primary dark:text-primary-dark": variant === "h5",
+    "text-lg font-medium text-primary dark:text-primary-dark": variant === "h6",
+    "text-base wrap-break-word": variant === "text1",
+    "text-sm wrap-break-word": variant === "text2",
+  })
+}

 export type TypographyProps<Component extends React.ElementType = "p"> = {
  as?: Component
-} & React.ComponentPropsWithoutRef<Component> &
-  VariantProps<typeof typographyVariants>
+} & React.ComponentPropsWithoutRef<Component> & {
+    variant?: TypographyVariant
+  }

 /**
 * Typography and styling abstraction component used to ensure consistency and standardize text throughout your application.
@@ -35,10 +36,7 @@ export const Typography = <Component extends React.ElementType = "p">(
  const ComponentAs = as

  return (
-    <ComponentAs
-      className={classNames(typographyVariants({ variant }), className)}
-      {...rest}
-    >
+    <ComponentAs className={classNames(typographyVariants({ variant }), className)} {...rest}>
      {children}
    </ComponentAs>
  )
--- a/packages/ui/src/Errors/ErrorNotFound/ErrorNotFound.tsx
+++ b/packages/ui/src/Errors/ErrorNotFound/ErrorNotFound.tsx
@@ -17,8 +17,7 @@ export const ErrorNotFound: React.FC<ErrorNotFoundProps> = () => {
        </Typography>

        <Typography variant="text1" as="p" className="mt-4">
-          {t("errors.page-doesnt-exist")}{" "}
-          <Link href="/">{t("errors.return-to-home-page")}</Link>
+          {t("errors.page-doesnt-exist")} <Link href="/">{t("errors.return-to-home-page")}</Link>
        </Typography>
      </Section>
    </MainLayout>
--- a/packages/ui/src/Home/About/AboutDescription.tsx
+++ b/packages/ui/src/Home/About/AboutDescription.tsx
@@ -8,7 +8,7 @@ export const AboutDescription: React.FC<AboutDescriptionProps> = () => {
  const t = useTranslations()

  return (
-    <div className="dark:text-gray-lighter my-6 max-w-md text-center text-black">
+    <div className="my-6 max-w-md text-center text-black dark:text-gray-lighter">
      <Typography as="p" variant="text1" className="my-6">
        {t.rich("home.about.description", {
          strong: (children) => {
--- a/packages/ui/src/Home/About/AboutList/AboutItem.tsx
+++ b/packages/ui/src/Home/About/AboutList/AboutItem.tsx
@@ -9,10 +9,8 @@ export const AboutItem: React.FC<AboutItemProps> = (props) => {

  return (
    <li className="flex items-center justify-between sm:justify-start">
-      <strong className="w-24 text-sm text-black lg:w-32 dark:text-white">
-        {label}
-      </strong>
-      <span className="dark:text-gray-lighter block text-sm font-normal text-black">
+      <strong className="w-24 text-sm text-black lg:w-32 dark:text-white">{label}</strong>
+      <span className="block text-sm font-normal text-black dark:text-gray-lighter">
        {link != null ? (
          <a className="hover:underline" href={link}>
            {value}
--- a/packages/ui/src/Home/About/AboutList/AboutList.tsx
+++ b/packages/ui/src/Home/About/AboutList/AboutList.tsx
@@ -9,14 +9,8 @@ export const AboutList: React.FC<AboutListProps> = () => {

  return (
    <ul className="my-6 list-none space-y-3">
-      <AboutItem
-        label={t("home.about.pronouns.label")}
-        value={t("home.about.pronouns.value")}
-      />
-      <AboutItem
-        label={t("home.about.birth-date.label")}
-        value={<BirthDate />}
-      />
+      <AboutItem label={t("home.about.pronouns.label")} value={t("home.about.pronouns.value")} />
+      <AboutItem label={t("home.about.birth-date.label")} value={<BirthDate />} />
      <AboutItem
        label={t("home.about.nationality.label")}
        value={t("home.about.nationality.value")}
--- a/packages/ui/src/Home/About/AboutLogo.tsx
+++ b/packages/ui/src/Home/About/AboutLogo.tsx
@@ -8,13 +8,7 @@ export const AboutLogo: React.FC<AboutLogoProps> = () => {

  return (
    <div className="max-h-[370px] max-w-[370px] px-2 py-6">
-      <Image
-        src="/images/logo.webp"
-        alt={t("meta.title")}
-        width={800}
-        height={800}
-        priority
-      />
+      <Image src="/images/logo.webp" alt={t("meta.title")} width={800} height={800} priority />
    </div>
  )
 }
--- a/packages/ui/src/Home/About/SocialMediaList/SocialMediaIcons/Icon.tsx
+++ b/packages/ui/src/Home/About/SocialMediaList/SocialMediaIcons/Icon.tsx
@@ -7,10 +7,7 @@ export const Icon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
-      className={classNames(
-        "size-8 fill-current text-black dark:text-white",
-        className,
-      )}
+      className={classNames("size-8 fill-current text-black dark:text-white", className)}
      {...rest}
    >
      {children}
--- a/packages/ui/src/Home/About/SocialMediaList/SocialMediaList.tsx
+++ b/packages/ui/src/Home/About/SocialMediaList/SocialMediaList.tsx
@@ -24,24 +24,15 @@ export const SocialMediaList: React.FC<SocialMediaListProps> = () => {
        <NPMIcon />
      </SocialMediaItem>

-      <SocialMediaItem
-        link="https://twitter.com/theoludwig_"
-        ariaLabel="X/Twitter"
-      >
+      <SocialMediaItem link="https://twitter.com/theoludwig_" ariaLabel="X/Twitter">
        <TwitterIcon />
      </SocialMediaItem>

-      <SocialMediaItem
-        link="https://www.youtube.com/@theo_ludwig"
-        ariaLabel="YouTube"
-      >
+      <SocialMediaItem link="https://www.youtube.com/@theo_ludwig" ariaLabel="YouTube">
        <YouTubeIcon />
      </SocialMediaItem>

-      <SocialMediaItem
-        link="https://www.twitch.tv/theoludwig"
-        ariaLabel="Twitch"
-      >
+      <SocialMediaItem link="https://www.twitch.tv/theoludwig" ariaLabel="Twitch">
        <TwitchIcon />
      </SocialMediaItem>

--- a/packages/ui/src/Home/Interests/InterestItem.tsx
+++ b/packages/ui/src/Home/Interests/InterestItem.tsx
@@ -14,11 +14,7 @@ export const InterestItem: React.FC<InterestItemProps> = (props) => {
        {title}
      </Typography>

-      <Typography
-        as="p"
-        variant="text1"
-        className="dark:text-gray-lighter my-2 text-black"
-      >
+      <Typography as="p" variant="text1" className="my-2 text-black dark:text-gray-lighter">
        {description}
      </Typography>
    </div>
--- a/packages/ui/src/Home/Interests/Interests.tsx
+++ b/packages/ui/src/Home/Interests/Interests.tsx
@@ -2,11 +2,7 @@ import { GIT_REPO_LINK } from "@repo/utils/constants"
 import { useTranslations } from "next-intl"
 import { FaGit, FaMicrochip } from "react-icons/fa"
 import { Link } from "../../Design/Link/Link.tsx"
-import {
-  Section,
-  SectionContent,
-  SectionTitle,
-} from "../../Layout/Section/Section.tsx"
+import { Section, SectionContent, SectionTitle } from "../../Layout/Section/Section.tsx"
 import { InterestItem } from "./InterestItem.tsx"

 export interface InterestsProps {}
@@ -59,13 +55,7 @@ export const Interests: React.FC<InterestsProps> = () => {
      <SectionContent shadowContainer>
        <div className="max-w-full">
          {items.map((item) => {
-            return (
-              <InterestItem
-                key={item.id}
-                title={item.title}
-                description={item.description}
-              />
-            )
+            return <InterestItem key={item.id} title={item.title} description={item.description} />
          })}
        </div>

@@ -74,7 +64,7 @@ export const Interests: React.FC<InterestsProps> = () => {
            {items.map((item) => {
              return (
                <li className="m-2 size-8" key={item.id} title={item.title}>
-                  <item.Icon className="text-primary dark:text-primary-dark block size-full" />
+                  <item.Icon className="block size-full text-primary dark:text-primary-dark" />
                </li>
              )
            })}
--- a/packages/ui/src/Home/OpenSource/OpenSource.tsx
+++ b/packages/ui/src/Home/OpenSource/OpenSource.tsx
@@ -1,9 +1,5 @@
 import { useTranslations } from "next-intl"
-import {
-  Section,
-  SectionDescription,
-  SectionTitle,
-} from "../../Layout/Section/Section.tsx"
+import { Section, SectionDescription, SectionTitle } from "../../Layout/Section/Section.tsx"
 import { Repository } from "./Repository.tsx"

 export interface OpenSourceProps {}
@@ -14,9 +10,7 @@ export const OpenSource: React.FC<OpenSourceProps> = () => {
  return (
    <Section verticalSpacing horizontalSpacing id="open-source">
      <SectionTitle>{t("home.open-source.title")}</SectionTitle>
-      <SectionDescription>
-        {t("home.open-source.description")}
-      </SectionDescription>
+      <SectionDescription>{t("home.open-source.description")}</SectionDescription>

      <div className="flex max-w-full flex-col items-center">
        <ul className="grid list-none grid-cols-1 gap-6 md:w-10/12 md:grid-cols-2">
--- a/packages/ui/src/Home/OpenSource/Repository.tsx
+++ b/packages/ui/src/Home/OpenSource/Repository.tsx
@@ -20,9 +20,7 @@ export const Repository: React.FC<RepositoryProps> = (props) => {
        >
          <Typography as="h3" variant="text1" className="flex items-center">
            <GitHubIcon className="mr-2 h-6" />
-            <span className="text-primary dark:text-primary-dark font-semibold">
-              {name}
-            </span>
+            <span className="font-semibold text-primary dark:text-primary-dark">{name}</span>
          </Typography>
          <p className="mt-4">{description}</p>
        </SectionContent>
--- a/packages/ui/src/Home/Portfolio/PortfolioItem.tsx
+++ b/packages/ui/src/Home/Portfolio/PortfolioItem.tsx
@@ -26,10 +26,7 @@ export const PortfolioItem: React.FC<PortfolioItemProps> = (props) => {
        href={link}
        aria-label={title}
      >
-        <SectionContent
-          className="relative cursor-pointer items-center p-0 sm:p-0"
-          shadowContainer
-        >
+        <SectionContent className="relative cursor-pointer items-center p-0 sm:p-0" shadowContainer>
          <div className="flex justify-center">
            <Image
              className="size-[300px] rounded-xl transition-opacity duration-500 group-hover:opacity-15 dark:group-hover:opacity-5"
--- a/packages/ui/src/Layout/Footer/Footer.tsx
+++ b/packages/ui/src/Layout/Footer/Footer.tsx
@@ -13,19 +13,14 @@ export const Footer: React.FC<FooterProps> = (props) => {
  const t = useTranslations()

  return (
-    <footer className="bg-background dark:bg-background-dark border-gray-darker dark:border-gray-darker-dark flex flex-col items-center justify-center border-t-2 p-6 text-lg">
+    <footer className="flex flex-col items-center justify-center border-t-2 border-gray-darker bg-background p-6 text-lg dark:border-gray-darker-dark dark:bg-background-dark">
      <p>
-        <Link href="/">{t("meta.title")}</Link> |{" "}
-        {t("footer.all-rights-reserved")}
+        <Link href="/">{t("meta.title")}</Link> | {t("footer.all-rights-reserved")}
      </p>

      <p>
        Version{" "}
-        <Link
-          href={`${GIT_REPO_LINK}/releases/tag/v${version}`}
-          target="_blank"
-          isExternal={false}
-        >
+        <Link href={`${GIT_REPO_LINK}/releases/tag/v${version}`} target="_blank" isExternal={false}>
          {version}
        </Link>
      </p>
--- a/packages/ui/src/Layout/Header/Header.tsx
+++ b/packages/ui/src/Layout/Header/Header.tsx
@@ -10,7 +10,7 @@ export const Header: React.FC<HeaderProps> = () => {
  const t = useTranslations()

  return (
-    <header className="bg-background dark:bg-background-dark border-gray-darker dark:border-gray-darker-dark sticky top-0 z-50 flex w-full justify-between gap-4 border-b-2 px-6 py-2">
+    <header className="sticky top-0 z-50 flex w-full justify-between gap-4 border-b-2 border-gray-darker bg-background px-6 py-2 dark:border-gray-darker-dark dark:bg-background-dark">
      <h1>
        <Link href="/" className="flex items-center justify-center">
          <Image
@@ -21,9 +21,7 @@ export const Header: React.FC<HeaderProps> = () => {
            alt={`${t("meta.title")} Logo`}
            priority
          />
-          <strong className="ml-1 hidden sm:block sm:text-xl">
-            {t("meta.title")}
-          </strong>
+          <strong className="ml-1 hidden sm:block sm:text-xl">{t("meta.title")}</strong>
        </Link>
      </h1>

--- a/packages/ui/src/Layout/Header/Locales/Arrow.tsx
+++ b/packages/ui/src/Layout/Header/Locales/Arrow.tsx
@@ -1,12 +1,6 @@
 export const Arrow: React.FC = () => {
  return (
-    <svg
-      width="12"
-      height="8"
-      viewBox="0 0 12 8"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        className="fill-current text-black dark:text-white"
        d="M9.8024 0.292969L5.61855 4.58597L1.43469 0.292969L0.0566406 1.70697L5.61855 7.41397L11.1805 1.70697L9.8024 0.292969Z"
--- a/packages/ui/src/Layout/Header/Locales/Locales.tsx
+++ b/packages/ui/src/Layout/Header/Locales/Locales.tsx
@@ -17,11 +17,7 @@ export const Locales: React.FC<LocalesProps> = () => {
  const pathname = usePathname()
  const localeCurrent = useLocale()

-  const {
-    value: isVisibleMenu,
-    toggle: toggleMenu,
-    setFalse: hideMenu,
-  } = useBoolean()
+  const { value: isVisibleMenu, toggle: toggleMenu, setFalse: hideMenu } = useBoolean()
  const languageClickRef = useRef<HTMLButtonElement | null>(null)

  useEffect(() => {
@@ -47,18 +43,14 @@ export const Locales: React.FC<LocalesProps> = () => {

  return (
    <div className="flex flex-col items-center justify-center">
-      <button
-        ref={languageClickRef}
-        className="flex items-center"
-        onClick={toggleMenu}
-      >
+      <button ref={languageClickRef} className="flex items-center" onClick={toggleMenu}>
        <LocaleFlag locale={localeCurrent} />
        <Arrow />
      </button>

      <ul
        className={classNames(
-          "shadow-lightFlag dark:shadow-darkFlag bg-background dark:bg-background-dark absolute top-14 z-10 mt-2 flex w-32 list-none flex-col items-center justify-center rounded-lg p-0",
+          "absolute top-14 z-10 mt-2 flex w-32 list-none flex-col items-center justify-center rounded-lg bg-background p-0 shadow-lightFlag dark:bg-background-dark dark:shadow-darkFlag",
          { hidden: !isVisibleMenu },
        )}
      >
--- a/packages/ui/src/Layout/Header/SwitchTheme.tsx
+++ b/packages/ui/src/Layout/Header/SwitchTheme.tsx
@@ -3,10 +3,7 @@
 import { classNames } from "@repo/config-tailwind/classNames"
 import type { Theme } from "@repo/utils/constants"
 import { THEME_DEFAULT } from "@repo/utils/constants"
-import {
-  ThemeProvider as NextThemeProvider,
-  useTheme as useNextTheme,
-} from "next-themes"
+import { ThemeProvider as NextThemeProvider, useTheme as useNextTheme } from "next-themes"
 import { useEffect, useState } from "react"

 export interface ThemeProviderProps extends React.PropsWithChildren {
@@ -38,7 +35,6 @@ export const useTheme = (): UseThemeOutput => {
  const [isMounted, setIsMounted] = useState(false)

  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
    setIsMounted(true)
  }, [])

@@ -73,9 +69,7 @@ export const SwitchTheme: React.FC<SwitchThemeProps> = () => {
              },
            )}
          >
-            <span className="relative flex size-[10px] items-center justify-center">
-              🌜
-            </span>
+            <span className="relative flex size-[10px] items-center justify-center">🌜</span>
          </div>
          <div
            className={classNames(
@@ -86,9 +80,7 @@ export const SwitchTheme: React.FC<SwitchThemeProps> = () => {
              },
            )}
          >
-            <span className="relative flex size-[10px] items-center justify-center">
-              🌞
-            </span>
+            <span className="relative flex size-[10px] items-center justify-center">🌞</span>
          </div>
        </div>
        <div
--- a/packages/ui/src/Layout/Section/RevealFade.tsx
+++ b/packages/ui/src/Layout/Section/RevealFade.tsx
@@ -9,8 +9,7 @@ export const RevealFade: React.FC<RevealFadeProps> = (props) => {

  const htmlElement = useRef<HTMLDivElement | null>(null)

-  const className =
-    "opacity-100 visible translate-y-0 transition-all duration-700 ease-in-out"
+  const className = "opacity-100 visible translate-y-0 transition-all duration-700 ease-in-out"

  useEffect(() => {
    const observer = new window.IntersectionObserver(
--- a/packages/ui/src/Layout/Section/Section.tsx
+++ b/packages/ui/src/Layout/Section/Section.tsx
@@ -10,12 +10,7 @@ export interface SectionProps extends React.ComponentPropsWithoutRef<"section">
 }

 export const Section: React.FC<SectionProps> = (props) => {
-  const {
-    className,
-    verticalSpacing = false,
-    horizontalSpacing = false,
-    ...rest
-  } = props
+  const { className, verticalSpacing = false, horizontalSpacing = false, ...rest } = props

  return (
    <section
@@ -48,9 +43,7 @@ export const SectionTitle: React.FC<SectionTitleProps> = (props) => {

 export interface SectionDescriptionProps extends TypographyProps<"p"> {}

-export const SectionDescription: React.FC<SectionDescriptionProps> = (
-  props,
-) => {
+export const SectionDescription: React.FC<SectionDescriptionProps> = (props) => {
  const { className, ...rest } = props

  return (
@@ -75,7 +68,7 @@ export const SectionContent: React.FC<SectionContentProps> = (props) => {
      className={classNames(
        "size-full max-w-full px-6 py-4 break-words sm:px-16",
        {
-          "shadow-light dark:shadow-dark max-w-full rounded-2xl border border-solid border-black":
+          "max-w-full rounded-2xl border border-solid border-black shadow-light dark:shadow-dark":
            shadowContainer,
        },
        className,
--- a/packages/utils/eslint.config.js
+++ b/packages/utils/eslint.config.js
@@ -1,14 +0,0 @@
-import typescriptESLint from "typescript-eslint"
-import { defineConfig } from "eslint/config"
-import config from "@repo/config-eslint"
-
-export default defineConfig(...config, {
-  files: ["**/*.ts", "**/*.tsx"],
-  languageOptions: {
-    parser: typescriptESLint.parser,
-    parserOptions: {
-      projectService: true,
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -12,17 +12,13 @@
    "./urls": "./src/urls.ts"
  },
  "scripts": {
-    "lint:eslint": "eslint src --max-warnings 0",
    "lint:typescript": "tsc --noEmit",
    "test": "node --test"
  },
  "devDependencies": {
-    "@repo/config-eslint": "workspace:*",
    "@repo/config-typescript": "workspace:*",
-    "@types/node": "catalog:",
    "@total-typescript/ts-reset": "catalog:",
-    "eslint": "catalog:",
-    "typescript-eslint": "catalog:",
+    "@types/node": "catalog:",
    "typescript": "catalog:"
  }
 }
--- a/packages/utils/src/constants.ts
+++ b/packages/utils/src/constants.ts
@@ -18,8 +18,7 @@ export const TIMEZONE = process.env["TZ"] ?? "Europe/Paris"
 export const BIRTH_DATE_DAY = "31"
 export const BIRTH_DATE_MONTH = "03"
 export const BIRTH_DATE_YEAR = "2003"
-export const BIRTH_DATE_STRING =
-  `${BIRTH_DATE_DAY}/${BIRTH_DATE_MONTH}/${BIRTH_DATE_YEAR}` as const
+export const BIRTH_DATE_STRING = `${BIRTH_DATE_DAY}/${BIRTH_DATE_MONTH}/${BIRTH_DATE_YEAR}` as const
 export const BIRTH_DATE_ISO_8601 =
  `${BIRTH_DATE_YEAR}-${BIRTH_DATE_MONTH}-${BIRTH_DATE_DAY}` as const
 export const BIRTH_DATE = new Date(BIRTH_DATE_ISO_8601)
--- a/packages/utils/src/objects.ts
+++ b/packages/utils/src/objects.ts
@@ -1,7 +1,4 @@
-export const deepMerge = <
-  Object1 extends object,
-  Object2 extends object = Object1,
->(
+export const deepMerge = <Object1 extends object, Object2 extends object = Object1>(
  object1: Object1,
  object2: Object2,
 ): Object1 & Object2 => {
--- a/packages/utils/src/types.ts
+++ b/packages/utils/src/types.ts
@@ -1,14 +1,7 @@
 /**
 * Matches any [primitive value](https://developer.mozilla.org/en-US/docs/Glossary/Primitive).
 */
-export type Primitive =
-  | null
-  | undefined
-  | string
-  | number
-  | boolean
-  | symbol
-  | bigint
+export type Primitive = null | undefined | string | number | boolean | symbol | bigint

 export type Satisfies<U, T extends U> = T