chore: simplify TypeScript config

packages/blog/src/BlogPostContent.tsx

@@ -11,7 +11,7 @@ import remarkMath from "remark-math"
 
 import { Link } from "@repo/i18n/navigation"
 import "katex/dist/katex.min.css"
-import { BlogPostComments } from "./BlogPostComments"
+import { BlogPostComments } from "./BlogPostComments.tsx"
 
 const Heading: React.FC<
   React.DetailedHTMLProps<

packages/blog/src/BlogPostUI.tsx

@@ -3,8 +3,8 @@ import "katex/dist/katex.min.css"
 
 import { Typography } from "@repo/ui/Design/Typography"
 import { MainLayout } from "@repo/ui/Layout/MainLayout"
-import type { BlogPost } from "./BlogPost"
-import { BlogPostContent } from "./BlogPostContent"
+import type { BlogPost } from "./BlogPost.tsx"
+import { BlogPostContent } from "./BlogPostContent.tsx"
 
 export interface BlogPostUIProps {
   blogPost: BlogPost

packages/blog/src/BlogPosts.tsx

@@ -2,7 +2,7 @@ import { Link } from "@repo/i18n/navigation"
 import { Typography } from "@repo/ui/Design/Typography"
 import { Section, SectionContent } from "@repo/ui/Layout/Section"
 import { getISODate } from "@repo/utils/dates"
-import type { BlogPost } from "./BlogPost"
+import type { BlogPost } from "./BlogPost.tsx"
 
 export interface BlogPostsProps {
   posts: BlogPost[]

packages/blog/src/blog.ts

@@ -2,7 +2,7 @@ import fs from "node:fs"
 import path from "node:path"
 
 import matter from "gray-matter"
-import type { BlogPost, FrontMatter } from "./BlogPost"
+import type { BlogPost, FrontMatter } from "./BlogPost.tsx"
 
 export const BLOG_POSTS_PATH = path.join(
   process.cwd(),

packages/blog/src/stories/BlogPostUI.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { BLOG_POST_MOCK } from "../BlogPost"
-import { BlogPostUI as BlogPostUIComponent } from "../BlogPostUI"
+import { BLOG_POST_MOCK } from "../BlogPost.ts"
+import { BlogPostUI as BlogPostUIComponent } from "../BlogPostUI.tsx"
 
 const meta = {
   title: "Blog/BlogPostUI",

packages/blog/src/stories/BlogPosts.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { BLOG_POST_MOCK } from "../BlogPost"
-import { BlogPosts as BlogPostsComponent } from "../BlogPosts"
+import { BLOG_POST_MOCK } from "../BlogPost.ts"
+import { BlogPosts as BlogPostsComponent } from "../BlogPosts.tsx"
 
 const meta = {
   title: "Blog/BlogPosts",

packages/blog/tsconfig.json

@@ -1,18 +1,11 @@
 {
   "extends": "@repo/config-typescript/tsconfig.json",
   "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "resolveJsonModule": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "types": [
       "@total-typescript/ts-reset",
-      "@repo/i18n/messages.d.ts",
-      "@types/node"
-    ],
-    "jsx": "preserve",
-
-    "noEmit": true
+      "@types/node",
+      "@repo/i18n/messages.d.ts"
+    ]
   }
 }

packages/config-eslint/.eslintrc.json

@@ -1,3 +1,25 @@
 {
-  "extends": ["conventions"]
+  "extends": ["conventions"],
+  "plugins": ["import-x"],
+  "rules": {
+    "import-x/no-absolute-path": "error",
+    "import-x/no-webpack-loader-syntax": "error",
+    "import-x/no-self-import": "error",
+    "import-x/no-useless-path-segments": "error",
+    "import-x/export": "error",
+    "import-x/no-duplicates": "error",
+    "import-x/no-named-default": "error",
+    "import-x/no-empty-named-blocks": "error",
+    "import-x/no-anonymous-default-export": "error",
+    "import-x/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "ts": "always",
+        "tsx": "always",
+        "js": "never",
+        "jsx": "never"
+      }
+    ]
+  }
 }

packages/config-eslint/nextjs/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": [
-    "conventions",
+    "../.eslintrc.json",
     "next/core-web-vitals",
     "plugin:tailwindcss/recommended",
     "plugin:storybook/recommended"

packages/config-eslint/package.json

@@ -17,6 +17,7 @@
     "eslint-config-next": "catalog:",
     "eslint-plugin-storybook": "catalog:",
     "eslint-plugin-tailwindcss": "catalog:",
+    "eslint-plugin-import-x": "catalog:",
     "typescript": "catalog:"
   }
 }

packages/config-tailwind/tsconfig.json

@@ -1,10 +1,6 @@
 {
   "extends": "@repo/config-typescript/tsconfig.json",
   "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-
-    "noEmit": true
+    "lib": ["ESNext"]
   }
 }

packages/config-typescript/tsconfig.json

@@ -6,15 +6,28 @@
     "noFallthroughCasesInSwitch": true,
     "noImplicitOverride": true,
     "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
     "noPropertyAccessFromIndexSignature": true,
     "noUncheckedIndexedAccess": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
 
+    "verbatimModuleSyntax": true,
     "isolatedModules": true,
     "esModuleInterop": true,
+    "allowImportingTsExtensions": true,
     "skipLibCheck": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "noEmit": true,
+
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true
   }
 }

packages/i18n/package.json

@@ -16,6 +16,7 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@repo/utils": "workspace:*",
     "deepmerge": "catalog:",
     "next": "catalog:",
     "next-intl": "catalog:",

packages/i18n/src/config.tsx

@@ -1,10 +1,6 @@
+import type { Locale } from "@repo/utils/constants"
 import type { RichTranslationValues } from "next-intl"
 
-export const LOCALES = ["en-US", "fr-FR"] as const
-export type Locale = (typeof LOCALES)[number]
-export const LOCALE_DEFAULT = "en-US" satisfies Locale
-export const LOCALE_PREFIX = "never"
-
 export interface LocaleProps {
   params: {
     locale: Locale

packages/i18n/src/i18n.ts

@@ -3,8 +3,9 @@ import type { AbstractIntlMessages } from "next-intl"
 import { getRequestConfig } from "next-intl/server"
 import { notFound } from "next/navigation"
 
-import type { Locale } from "./config"
-import { defaultTranslationValues, LOCALE_DEFAULT, LOCALES } from "./config"
+import type { Locale } from "@repo/utils/constants"
+import { LOCALE_DEFAULT, LOCALES } from "@repo/utils/constants"
+import { defaultTranslationValues } from "./config.tsx"
 
 export default getRequestConfig(async ({ locale }) => {
   if (!LOCALES.includes(locale as Locale)) {

packages/i18n/src/navigation.ts

@@ -1,6 +1,6 @@
 import { createSharedPathnamesNavigation } from "next-intl/navigation"
 
-import { LOCALES, LOCALE_PREFIX } from "./config"
+import { LOCALES, LOCALE_PREFIX } from "@repo/utils/constants"
 
 export const { Link, redirect, usePathname, useRouter, permanentRedirect } =
   createSharedPathnamesNavigation({

packages/i18n/tsconfig.json

@@ -1,14 +1,7 @@
 {
   "extends": "@repo/config-typescript/tsconfig.json",
   "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "resolveJsonModule": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "types": ["@total-typescript/ts-reset"],
-    "jsx": "preserve",
-
-    "noEmit": true
+    "types": ["@total-typescript/ts-reset"]
   }
 }

packages/react-hooks/src/tests/useBoolean.test.ts

@@ -1,7 +1,7 @@
 import { act, renderHook } from "@testing-library/react"
 
 import { describe, expect, it } from "vitest"
-import { useBoolean } from "../useBoolean"
+import { useBoolean } from "../useBoolean.ts"
 
 describe("useBoolean", () => {
   const initialValues = [true, false]

packages/react-hooks/src/tests/useIsMounted.test.ts

@@ -1,7 +1,7 @@
 import { renderHook } from "@testing-library/react"
 
 import { describe, expect, it } from "vitest"
-import { useIsMounted } from "../useIsMounted"
+import { useIsMounted } from "../useIsMounted.ts"
 
 describe("useIsMounted", () => {
   it("should return true", () => {

packages/react-hooks/tsconfig.json

@@ -1,17 +1,7 @@
 {
   "extends": "@repo/config-typescript/tsconfig.json",
   "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "resolveJsonModule": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "types": [
-      "@total-typescript/ts-reset",
-      "@vitest/browser/providers/playwright"
-    ],
-    "jsx": "preserve",
-
-    "noEmit": true
+    "types": ["@total-typescript/ts-reset"]
   }
 }

packages/ui/src/CurriculumVitae/CurriculumVitae.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { CurriculumVitae as CurriculumVitaeComponent } from "./CurriculumVitae"
+import { CurriculumVitae as CurriculumVitaeComponent } from "./CurriculumVitae.tsx"
 
 const meta = {
   title: "Curriculum Vitae/CurriculumVitae",

packages/ui/src/CurriculumVitae/CurriculumVitae.tsx

@@ -1,9 +1,9 @@
-import { CurriculumVitaeAbout } from "./CurriculumVitaeAbout"
-import { CurriculumVitaeEducation } from "./CurriculumVitaeEducation"
-import { CurriculumVitaeInterests } from "./CurriculumVitaeInterests"
-import { CurriculumVitaeProfile } from "./CurriculumVitaeProfile"
-import { CurriculumVitaeSkills } from "./CurriculumVitaeSkills"
-import { CurriculumVitaeWork } from "./CurriculumVitaeWork"
+import { CurriculumVitaeAbout } from "./CurriculumVitaeAbout.tsx"
+import { CurriculumVitaeEducation } from "./CurriculumVitaeEducation.tsx"
+import { CurriculumVitaeInterests } from "./CurriculumVitaeInterests.tsx"
+import { CurriculumVitaeProfile } from "./CurriculumVitaeProfile.tsx"
+import { CurriculumVitaeSkills } from "./CurriculumVitaeSkills.tsx"
+import { CurriculumVitaeWork } from "./CurriculumVitaeWork.tsx"
 
 export interface CurriculumVitaeProps {}
 

packages/ui/src/CurriculumVitae/CurriculumVitaeAbout.tsx

@@ -1,6 +1,6 @@
 import { useTranslations } from "next-intl"
 import { FaUser } from "react-icons/fa"
-import { CurriculumVitaeSection } from "./CurriculumVitaeSection"
+import { CurriculumVitaeSection } from "./CurriculumVitaeSection.tsx"
 
 export interface CurriculumVitaeAboutProps {}
 

packages/ui/src/CurriculumVitae/CurriculumVitaeEducation.tsx

@@ -1,6 +1,6 @@
 import { useTranslations } from "next-intl"
 import { FaGraduationCap } from "react-icons/fa"
-import { CurriculumVitaeSection } from "./CurriculumVitaeSection"
+import { CurriculumVitaeSection } from "./CurriculumVitaeSection.tsx"
 
 export interface CurriculumVitaeEducationProps {}
 

packages/ui/src/CurriculumVitae/CurriculumVitaeInterests.tsx

@@ -1,6 +1,6 @@
 import { useTranslations } from "next-intl"
 import { FaHeart } from "react-icons/fa"
-import { CurriculumVitaeSection } from "./CurriculumVitaeSection"
+import { CurriculumVitaeSection } from "./CurriculumVitaeSection.tsx"
 
 export interface CurriculumVitaeInterestsProps {}
 

packages/ui/src/CurriculumVitae/CurriculumVitaeProfile.tsx

@@ -1,8 +1,8 @@
 import { Link } from "@repo/i18n/navigation"
 import { useTranslations } from "next-intl"
 import Image from "next/image"
-import { BirthDate } from "../Home/About/AboutList/BirthDate"
-import { Locales } from "../Layout/Header/Locales/Locales"
+import { BirthDate } from "../Home/About/AboutList/BirthDate.tsx"
+import { Locales } from "../Layout/Header/Locales/Locales.tsx"
 
 export interface CurriculumVitaeProfileProps {}
 

packages/ui/src/CurriculumVitae/CurriculumVitaeSkills.tsx

@@ -3,8 +3,8 @@ import { FaToolbox } from "react-icons/fa"
 import {
   SKILL_CATEGORIES,
   SKILL_NAMES_BY_CATEGORY,
-} from "../Home/Skills/skills"
-import { CurriculumVitaeSection } from "./CurriculumVitaeSection"
+} from "../Home/Skills/skills.ts"
+import { CurriculumVitaeSection } from "./CurriculumVitaeSection.tsx"
 
 export interface CurriculumVitaeSkillsProps {}
 

packages/ui/src/CurriculumVitae/CurriculumVitaeWork.tsx

@@ -1,6 +1,6 @@
 import { useTranslations } from "next-intl"
 import { MdWork } from "react-icons/md"
-import { CurriculumVitaeSection } from "./CurriculumVitaeSection"
+import { CurriculumVitaeSection } from "./CurriculumVitaeSection.tsx"
 
 export interface CurriculumVitaeWorkProps {}
 

packages/ui/src/Design/Button/Button.stories.tsx

@@ -2,8 +2,8 @@ import type { Meta, StoryObj } from "@storybook/react"
 import { expect, fn, userEvent, within } from "@storybook/test"
 import { FaCheck } from "react-icons/fa"
 
-import type { ButtonLinkProps } from "./Button"
-import { Button } from "./Button"
+import type { ButtonLinkProps } from "./Button.tsx"
+import { Button } from "./Button.tsx"
 
 const meta = {
   title: "Design System/Button",

packages/ui/src/Design/Button/Button.tsx

@@ -3,8 +3,8 @@ import { Link as NextLink } from "@repo/i18n/navigation"
 import type { VariantProps } from "cva"
 import { cva } from "cva"
 
-import { Spinner } from "../Spinner/Spinner"
-import { Ripple } from "./Ripple"
+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:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",

packages/ui/src/Design/Link/Link.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { Link } from "./Link"
+import { Link } from "./Link.tsx"
 
 const meta = {
   title: "Design System/Link",

packages/ui/src/Design/Spinner/Spinner.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { Spinner } from "./Spinner"
+import { Spinner } from "./Spinner.tsx"
 
 const meta = {
   title: "Design System/Spinner",

packages/ui/src/Design/Typography/Typography.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import type { TypographyProps } from "./Typography"
-import { Typography } from "./Typography"
+import type { TypographyProps } from "./Typography.tsx"
+import { Typography } from "./Typography.tsx"
 
 const meta = {
   title: "Design System/Typography",

packages/ui/src/Errors/ErrorNotFound/ErrorNotFound.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { ErrorNotFound as ErrorNotFoundComponent } from "./ErrorNotFound"
+import { ErrorNotFound as ErrorNotFoundComponent } from "./ErrorNotFound.tsx"
 
 const meta = {
   title: "Errors/ErrorNotFound",

packages/ui/src/Errors/ErrorNotFound/ErrorNotFound.tsx

@@ -1,8 +1,8 @@
 import { useTranslations } from "next-intl"
-import { Link } from "../../Design/Link/Link"
-import { Typography } from "../../Design/Typography/Typography"
-import { MainLayout } from "../../Layout/MainLayout/MainLayout"
-import { Section } from "../../Layout/Section/Section"
+import { Link } from "../../Design/Link/Link.tsx"
+import { Typography } from "../../Design/Typography/Typography.tsx"
+import { MainLayout } from "../../Layout/MainLayout/MainLayout.tsx"
+import { Section } from "../../Layout/Section/Section.tsx"
 
 export interface ErrorNotFoundProps {}
 

packages/ui/src/Errors/ErrorServer/ErrorServer.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { expect, fn, userEvent, within } from "@storybook/test"
 
-import { ErrorServer as ErrorServerComponent } from "./ErrorServer"
+import { ErrorServer as ErrorServerComponent } from "./ErrorServer.tsx"
 
 const meta = {
   title: "Errors/ErrorServer",

packages/ui/src/Errors/ErrorServer/ErrorServer.tsx

@@ -2,10 +2,10 @@
 
 import { useTranslations } from "next-intl"
 import { useEffect } from "react"
-import { Button } from "../../Design/Button/Button"
-import { Typography } from "../../Design/Typography/Typography"
-import { MainLayout } from "../../Layout/MainLayout/MainLayout"
-import { Section } from "../../Layout/Section/Section"
+import { Button } from "../../Design/Button/Button.tsx"
+import { Typography } from "../../Design/Typography/Typography.tsx"
+import { MainLayout } from "../../Layout/MainLayout/MainLayout.tsx"
+import { Section } from "../../Layout/Section/Section.tsx"
 
 export interface ErrorServerProps {
   error: Error & { digest?: string }

packages/ui/src/Home/About/About.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { About as AboutComponent } from "./About"
+import { About as AboutComponent } from "./About.tsx"
 
 const meta = {
   title: "Home/About",

packages/ui/src/Home/About/About.tsx

@@ -1,9 +1,9 @@
-import { Section, SectionContent } from "../../Layout/Section/Section"
-import { AboutDescription } from "./AboutDescription"
-import { AboutIntroduction } from "./AboutIntroduction"
-import { AboutList } from "./AboutList/AboutList"
-import { AboutLogo } from "./AboutLogo"
-import { SocialMediaList } from "./SocialMediaList/SocialMediaList"
+import { Section, SectionContent } from "../../Layout/Section/Section.tsx"
+import { AboutDescription } from "./AboutDescription.tsx"
+import { AboutIntroduction } from "./AboutIntroduction.tsx"
+import { AboutList } from "./AboutList/AboutList.tsx"
+import { AboutLogo } from "./AboutLogo.tsx"
+import { SocialMediaList } from "./SocialMediaList/SocialMediaList.tsx"
 
 export interface AboutProps {}
 

packages/ui/src/Home/About/AboutDescription.tsx

@@ -1,6 +1,6 @@
 import { useTranslations } from "next-intl"
-import { Button } from "../../Design/Button/Button"
-import { Typography } from "../../Design/Typography/Typography"
+import { Button } from "../../Design/Button/Button.tsx"
+import { Typography } from "../../Design/Typography/Typography.tsx"
 
 export interface AboutDescriptionProps {}
 

packages/ui/src/Home/About/AboutIntroduction.tsx

@@ -1,5 +1,5 @@
 import { useTranslations } from "next-intl"
-import { Typography } from "../../Design/Typography/Typography"
+import { Typography } from "../../Design/Typography/Typography.tsx"
 
 export interface AboutIntroductionProps {}
 

packages/ui/src/Home/About/AboutList/AboutList.tsx

@@ -1,6 +1,6 @@
 import { useTranslations } from "next-intl"
-import { AboutItem } from "./AboutItem"
-import { BirthDate } from "./BirthDate"
+import { AboutItem } from "./AboutItem.tsx"
+import { BirthDate } from "./BirthDate.tsx"
 
 export interface AboutListProps {}
 

packages/ui/src/Home/About/SocialMediaList/SocialMediaIcons/EmailIcon.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "./Icon"
+import { Icon } from "./Icon.tsx"
 
 export const EmailIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
   return (

packages/ui/src/Home/About/SocialMediaList/SocialMediaIcons/GitHubIcon.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "./Icon"
+import { Icon } from "./Icon.tsx"
 
 export const GitHubIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
   return (

packages/ui/src/Home/About/SocialMediaList/SocialMediaIcons/GitLabIcon.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "./Icon"
+import { Icon } from "./Icon.tsx"
 
 export const GitLabIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
   return (

packages/ui/src/Home/About/SocialMediaList/SocialMediaIcons/NPMIcon.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "./Icon"
+import { Icon } from "./Icon.tsx"
 
 export const NPMIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
   return (

packages/ui/src/Home/About/SocialMediaList/SocialMediaIcons/TwitchIcon.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "./Icon"
+import { Icon } from "./Icon.tsx"
 
 export const TwitchIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
   return (

packages/ui/src/Home/About/SocialMediaList/SocialMediaIcons/TwitterIcon.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "./Icon"
+import { Icon } from "./Icon.tsx"
 
 export const TwitterIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
   return (

packages/ui/src/Home/About/SocialMediaList/SocialMediaIcons/YouTubeIcon.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "./Icon"
+import { Icon } from "./Icon.tsx"
 
 export const YouTubeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
   return (

packages/ui/src/Home/About/SocialMediaList/SocialMediaList.tsx

@@ -1,11 +1,11 @@
-import { EmailIcon } from "./SocialMediaIcons/EmailIcon"
-import { GitHubIcon } from "./SocialMediaIcons/GitHubIcon"
-import { GitLabIcon } from "./SocialMediaIcons/GitLabIcon"
-import { NPMIcon } from "./SocialMediaIcons/NPMIcon"
-import { TwitchIcon } from "./SocialMediaIcons/TwitchIcon"
-import { TwitterIcon } from "./SocialMediaIcons/TwitterIcon"
-import { YouTubeIcon } from "./SocialMediaIcons/YouTubeIcon"
-import { SocialMediaItem } from "./SocialMediaItem"
+import { EmailIcon } from "./SocialMediaIcons/EmailIcon.tsx"
+import { GitHubIcon } from "./SocialMediaIcons/GitHubIcon.tsx"
+import { GitLabIcon } from "./SocialMediaIcons/GitLabIcon.tsx"
+import { NPMIcon } from "./SocialMediaIcons/NPMIcon.tsx"
+import { TwitchIcon } from "./SocialMediaIcons/TwitchIcon.tsx"
+import { TwitterIcon } from "./SocialMediaIcons/TwitterIcon.tsx"
+import { YouTubeIcon } from "./SocialMediaIcons/YouTubeIcon.tsx"
+import { SocialMediaItem } from "./SocialMediaItem.tsx"
 
 export interface SocialMediaListProps {}
 

packages/ui/src/Home/Interests/InterestItem.tsx

@@ -1,4 +1,4 @@
-import { Typography } from "../../Design/Typography/Typography"
+import { Typography } from "../../Design/Typography/Typography.tsx"
 
 export interface InterestItemProps {
   title: string

packages/ui/src/Home/Interests/Interests.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { Interests as InterestsComponent } from "./Interests"
+import { Interests as InterestsComponent } from "./Interests.tsx"
 
 const meta = {
   title: "Home/Interests",

packages/ui/src/Home/Interests/Interests.tsx

@@ -1,13 +1,13 @@
 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"
+import { Link } from "../../Design/Link/Link.tsx"
 import {
   Section,
   SectionContent,
   SectionTitle,
-} from "../../Layout/Section/Section"
-import { InterestItem } from "./InterestItem"
+} from "../../Layout/Section/Section.tsx"
+import { InterestItem } from "./InterestItem.tsx"
 
 export interface InterestsProps {}
 

packages/ui/src/Home/OpenSource/OpenSource.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { OpenSource as OpenSourceComponent } from "./OpenSource"
+import { OpenSource as OpenSourceComponent } from "./OpenSource.tsx"
 
 const meta = {
   title: "Home/OpenSource",

packages/ui/src/Home/OpenSource/OpenSource.tsx

@@ -3,8 +3,8 @@ import {
   Section,
   SectionDescription,
   SectionTitle,
-} from "../../Layout/Section/Section"
-import { Repository } from "./Repository"
+} from "../../Layout/Section/Section.tsx"
+import { Repository } from "./Repository.tsx"
 
 export interface OpenSourceProps {}
 

packages/ui/src/Home/OpenSource/Repository.tsx

@@ -1,6 +1,6 @@
-import { Typography } from "../../Design/Typography/Typography"
-import { SectionContent } from "../../Layout/Section/Section"
-import { GitHubIcon } from "../About/SocialMediaList/SocialMediaIcons/GitHubIcon"
+import { Typography } from "../../Design/Typography/Typography.tsx"
+import { SectionContent } from "../../Layout/Section/Section.tsx"
+import { GitHubIcon } from "../About/SocialMediaList/SocialMediaIcons/GitHubIcon.tsx"
 
 export interface RepositoryProps {
   name: string

packages/ui/src/Home/Portfolio/Portfolio.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { Portfolio as PortfolioComponent } from "./Portfolio"
+import { Portfolio as PortfolioComponent } from "./Portfolio.tsx"
 
 const meta = {
   title: "Home/Portfolio",

packages/ui/src/Home/Portfolio/Portfolio.tsx

@@ -1,6 +1,6 @@
 import { useTranslations } from "next-intl"
-import { Section, SectionTitle } from "../../Layout/Section/Section"
-import { PortfolioItem, type PortfolioProject } from "./PortfolioItem"
+import { Section, SectionTitle } from "../../Layout/Section/Section.tsx"
+import { PortfolioItem, type PortfolioProject } from "./PortfolioItem.tsx"
 
 export interface PortfolioProps {}
 

packages/ui/src/Home/Portfolio/PortfolioItem.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image"
-import { Typography } from "../../Design/Typography/Typography"
-import { SectionContent } from "../../Layout/Section/Section"
+import { Typography } from "../../Design/Typography/Typography.tsx"
+import { SectionContent } from "../../Layout/Section/Section.tsx"
 
 export interface PortfolioProject {
   id: string

packages/ui/src/Home/Skills/SkillItem.tsx

@@ -2,10 +2,10 @@
 
 import Image from "next/image"
 import { useMemo } from "react"
-import { Link } from "../../Design/Link/Link"
-import { useTheme } from "../../Layout/Header/SwitchTheme"
-import type { SkillName } from "./skills"
-import { SKILLS } from "./skills"
+import { Link } from "../../Design/Link/Link.tsx"
+import { useTheme } from "../../Layout/Header/SwitchTheme.tsx"
+import type { SkillName } from "./skills.ts"
+import { SKILLS } from "./skills.ts"
 
 export interface SkillItemProps {
   skillName: SkillName

packages/ui/src/Home/Skills/Skills.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { Skills as SkillsComponent } from "./Skills"
+import { Skills as SkillsComponent } from "./Skills.tsx"
 
 const meta = {
   title: "Home/Skills",

packages/ui/src/Home/Skills/Skills.tsx

@@ -1,8 +1,8 @@
 import { useTranslations } from "next-intl"
-import { Section, SectionTitle } from "../../Layout/Section/Section"
-import { SkillItem } from "./SkillItem"
-import { SkillsSection } from "./SkillsSection"
-import { SKILL_CATEGORIES, SKILL_NAMES_BY_CATEGORY } from "./skills"
+import { Section, SectionTitle } from "../../Layout/Section/Section.tsx"
+import { SkillItem } from "./SkillItem.tsx"
+import { SkillsSection } from "./SkillsSection.tsx"
+import { SKILL_CATEGORIES, SKILL_NAMES_BY_CATEGORY } from "./skills.ts"
 
 export interface SkillsProps {}
 

packages/ui/src/Home/Skills/SkillsSection.tsx

@@ -1,5 +1,5 @@
-import { Typography } from "../../Design/Typography/Typography"
-import { SectionContent } from "../../Layout/Section/Section"
+import { Typography } from "../../Design/Typography/Typography.tsx"
+import { SectionContent } from "../../Layout/Section/Section.tsx"
 
 export interface SkillsSectionProps extends React.PropsWithChildren {
   title: string

packages/ui/src/Layout/Footer/Footer.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { Footer as FooterComponent } from "./Footer"
+import { Footer as FooterComponent } from "./Footer.tsx"
 
 const meta = {
   title: "Layout/Footer",

packages/ui/src/Layout/Footer/Footer.tsx

@@ -1,7 +1,7 @@
 import { useTranslations } from "next-intl"
 
 import { GIT_REPO_LINK } from "@repo/utils/constants"
-import { Link } from "../../Design/Link/Link"
+import { Link } from "../../Design/Link/Link.tsx"
 
 export interface FooterProps {
   version: string

packages/ui/src/Layout/Header/Header.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { Header as HeaderComponent } from "./Header"
+import { Header as HeaderComponent } from "./Header.tsx"
 
 const meta = {
   title: "Layout/Header",

packages/ui/src/Layout/Header/Header.tsx

@@ -1,8 +1,8 @@
 import { useTranslations } from "next-intl"
 import Image from "next/image"
-import { Link } from "../../Design/Link/Link"
-import { Locales } from "./Locales/Locales"
-import { SwitchTheme } from "./SwitchTheme"
+import { Link } from "../../Design/Link/Link.tsx"
+import { Locales } from "./Locales/Locales.tsx"
+import { SwitchTheme } from "./SwitchTheme.tsx"
 
 export interface HeaderProps {}
 

packages/ui/src/Layout/Header/Locales/LocaleFlag.tsx

@@ -1,4 +1,4 @@
-import type { Locale } from "@repo/i18n/config"
+import type { Locale } from "@repo/utils/constants"
 import { useTranslations } from "next-intl"
 import Image from "next/image"
 

packages/ui/src/Layout/Header/Locales/Locales.tsx

@@ -1,15 +1,15 @@
 "use client"
 
 import { classNames } from "@repo/config-tailwind/classNames"
-import type { Locale } from "@repo/i18n/config"
-import { LOCALES } from "@repo/i18n/config"
 import { usePathname, useRouter } from "@repo/i18n/navigation"
+import type { Locale } from "@repo/utils/constants"
+import { LOCALES } from "@repo/utils/constants"
 import { useLocale } from "next-intl"
 import { useEffect, useRef } from "react"
 
 import { useBoolean } from "@repo/react-hooks/useBoolean"
-import { Arrow } from "./Arrow"
-import { LocaleFlag } from "./LocaleFlag"
+import { Arrow } from "./Arrow.tsx"
+import { LocaleFlag } from "./LocaleFlag.tsx"
 
 export interface LocalesProps {}
 

packages/ui/src/Layout/Header/SwitchTheme.tsx

@@ -2,15 +2,13 @@
 
 import { classNames } from "@repo/config-tailwind/classNames"
 import { useIsMounted } from "@repo/react-hooks/useIsMounted"
+import type { Theme } from "@repo/utils/constants"
+import { THEME_DEFAULT } from "@repo/utils/constants"
 import {
   ThemeProvider as NextThemeProvider,
   useTheme as useNextTheme,
 } from "next-themes"
 
-export const THEMES = ["light", "dark"] as const
-export type Theme = (typeof THEMES)[number]
-export const THEME_DEFAULT = "dark" as Theme
-
 export interface ThemeProviderProps extends React.PropsWithChildren {
   forcedTheme?: Theme
 }

packages/ui/src/Layout/Section/Section.tsx

@@ -1,8 +1,8 @@
 import { classNames } from "@repo/config-tailwind/classNames"
-import type { TypographyProps } from "../../Design/Typography/Typography"
-import { Typography } from "../../Design/Typography/Typography"
+import type { TypographyProps } from "../../Design/Typography/Typography.tsx"
+import { Typography } from "../../Design/Typography/Typography.tsx"
 
-export * from "./RevealFade"
+export * from "./RevealFade.tsx"
 
 export interface SectionProps
   extends React.ComponentPropsWithoutRef<"section"> {

packages/ui/tsconfig.json

@@ -1,14 +1,7 @@
 {
   "extends": "@repo/config-typescript/tsconfig.json",
   "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "resolveJsonModule": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "types": ["@total-typescript/ts-reset", "@repo/i18n/messages.d.ts"],
-    "jsx": "preserve",
-
-    "noEmit": true
+    "types": ["@total-typescript/ts-reset", "@repo/i18n/messages.d.ts"]
   }
 }

packages/utils/src/constants.ts

@@ -7,6 +7,15 @@ export const VERSION =
 
 export const GIT_REPO_LINK = "https://github.com/theoludwig/theoludwig"
 
+export const LOCALES = ["en-US", "fr-FR"] as const
+export type Locale = (typeof LOCALES)[number]
+export const LOCALE_DEFAULT = "en-US" satisfies Locale
+export const LOCALE_PREFIX = "never"
+
+export const THEMES = ["light", "dark"] as const
+export type Theme = (typeof THEMES)[number]
+export const THEME_DEFAULT = "light" as Theme
+
 export const BIRTH_DATE_DAY = "31"
 export const BIRTH_DATE_MONTH = "03"
 export const BIRTH_DATE_YEAR = "2003"

packages/utils/src/tests/constants.test.ts

@@ -12,7 +12,7 @@ describe("VERSION", () => {
     vi.stubEnv("NODE_ENV", "development")
 
     // Act - When
-    const { VERSION } = await import("../constants.js")
+    const { VERSION } = await import("../constants.ts")
 
     // Assert - Then
     const expected = "0.0.0-development"
@@ -27,7 +27,7 @@ describe("VERSION", () => {
     })
 
     // Act - When
-    const { VERSION } = await import("../constants.js")
+    const { VERSION } = await import("../constants.ts")
 
     // Assert - Then
     const expected = "1.0.0"

packages/utils/src/tests/dates.test.ts

@@ -1,6 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
 
-import { getAge, getISODate } from "../dates.js"
+import { getAge, getISODate } from "../dates.ts"
 
 describe("getISODate", () => {
   it("should return the correct date in ISO format (e.g: 2012-05-23)", () => {

packages/utils/src/tests/strings.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest"
 
-import { capitalize } from "../strings.js"
+import { capitalize } from "../strings.ts"
 
 describe("capitalize", () => {
   it("should capitalize the first letter of a string", () => {

packages/utils/tsconfig.json

@@ -1,13 +1,7 @@
 {
   "extends": "@repo/config-typescript/tsconfig.json",
   "compilerOptions": {
-    "target": "ESNext",
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "resolveJsonModule": true,
     "lib": ["ESNext"],
-    "types": ["@types/node", "@total-typescript/ts-reset"],
-
-    "noEmit": true
+    "types": ["@types/node", "@total-typescript/ts-reset"]
   }
 }