Merge pull request #19 from dmytro-komlyk/development

refactor: updated eslint conf and fix lint errors

.vscode/settings.json

@@ -2,8 +2,7 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit",
-    "source.organizeImports": "explicit"
+    "source.fixAll": "explicit"
   },
   "eslint.workingDirectories": [
     {

apps/admin/package.json

@@ -12,7 +12,7 @@
     "lint:fix": "pnpm lint --fix"
   },
   "dependencies": {
-    "@nextui-org/react": "^2.1.13",
+    "@nextui-org/react": "^2.4.1",
     "@nextui-org/system": "^2.0.10",
     "@nextui-org/theme": "^2.1.9",
     "@prisma/nextjs-monorepo-workaround-plugin": "^5.13.0",
@@ -24,7 +24,7 @@
     "@trpc/server": "^10.43.6",
     "cross-env": "^7.0.3",
     "formik": "^2.4.5",
-    "framer-motion": "^10.16.4",
+    "framer-motion": "^10.18.0",
     "http-browserify": "^1.7.0",
     "https-browserify": "^1.0.0",
     "next": "^14.0.2",

apps/client/.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  root: true,
+  extends: ['next', 'next/core-web-vitals', '@repo/eslint-config/next.js'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2021,
+    sourceType: 'module',
+    project: true,
+  },
+};

apps/client/app/(components)/LocaleSwitcher.tsx

@@ -1,16 +1,17 @@
-import { locales } from "@client/config";
-import { useLocale, useTranslations } from "next-intl";
-import LocaleSwitcherSelect from "./LocaleSwitcherSelect";
+import { locales } from '@client/config';
+import { useLocale, useTranslations } from 'next-intl';
+
+import LocaleSwitcherSelect from './LocaleSwitcherSelect';
 
 export default function LocaleSwitcher() {
-  const t = useTranslations("LocaleSwitcher");
+  const t = useTranslations('LocaleSwitcher');
   const locale = useLocale();
 
   return (
-    <LocaleSwitcherSelect defaultValue={locale} label={t("label")}>
+    <LocaleSwitcherSelect defaultValue={locale} label={t('label')}>
       {locales.map((cur) => (
         <option key={cur} value={cur}>
-          {t("locale", { locale: cur })}
+          {t('locale', { locale: cur })}
         </option>
       ))}
     </LocaleSwitcherSelect>

apps/client/app/(components)/LocaleSwitcherSelect.tsx

@@ -1,8 +1,9 @@
-"use client";
+'use client';
 
-import { usePathname, useRouter } from "@client/navigation";
-import clsx from "clsx";
-import { ChangeEvent, ReactNode, useTransition } from "react";
+import { usePathname, useRouter } from '@client/navigation';
+import clsx from 'clsx';
+import type { ChangeEvent, ReactNode } from 'react';
+import { useTransition } from 'react';
 
 type Props = {
   children: ReactNode;
@@ -29,8 +30,8 @@ export default function LocaleSwitcherSelect({
   return (
     <label
       className={clsx(
-        "relative text-black dark:text-white",
-        isPending && "transition-opacity [&:disabled]:opacity-30"
+        'relative text-black dark:text-white',
+        isPending && 'transition-opacity [&:disabled]:opacity-30',
       )}
     >
       <p className="sr-only">{label}</p>

apps/client/app/(components)/ThemeToggle.tsx

@@ -1,9 +1,9 @@
-"use client";
+'use client';
 
-import { Switch } from "@nextui-org/react";
-import { useEffect, useState } from "react";
+import { Switch } from '@nextui-org/react';
+import { useEffect, useState } from 'react';
 
-type Theme = "light" | "dark";
+type Theme = 'light' | 'dark';
 
 export const MoonIcon = (props: any) => (
   <svg
@@ -45,12 +45,12 @@ function ThemeToggle({ initialValue }: { initialValue: Theme }) {
   useEffect(() => {
     if (theme) {
       document.cookie = `theme=${theme};path=/;`;
-      document.querySelector("html")?.classList.toggle("dark");
+      document.querySelector('html')?.classList.toggle('dark');
     } else {
       setTheme(
-        window.matchMedia("(prefers-color-scheme: dark)").matches
-          ? "dark"
-          : "light"
+        window.matchMedia('(prefers-color-scheme: dark)').matches
+          ? 'dark'
+          : 'light',
       );
     }
   }, [theme]);
@@ -61,7 +61,7 @@ function ThemeToggle({ initialValue }: { initialValue: Theme }) {
       size="lg"
       color="success"
       onClick={() => {
-        setTheme(theme === "dark" ? "light" : "dark");
+        setTheme(theme === 'dark' ? 'light' : 'dark');
       }}
       startContent={<SunIcon />}
       endContent={<MoonIcon />}

apps/client/app/(utils)/trpc/Provider.tsx

@@ -1,7 +1,9 @@
 'use client';
+
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { httpBatchLink } from '@trpc/client';
 import React, { useState } from 'react';
+
 import { SERVER_TRPC_URL } from '../../(lib)/constants';
 import { trpc } from './client';
 

apps/client/app/(utils)/trpc/client.ts

@@ -1,5 +1,4 @@
-import { createTRPCReact } from "@trpc/react-query";
-
-import type { AppRouter } from "@server/domain/trpc/trpc.router";
+import type { AppRouter } from '@server/domain/trpc/trpc.router';
+import { createTRPCReact } from '@trpc/react-query';
 
 export const trpc = createTRPCReact<AppRouter>({});

apps/client/app/[locale]/[...rest]/page.tsx

@@ -1,4 +1,4 @@
-import { notFound } from "next/navigation";
+import { notFound } from 'next/navigation';
 
 export default function CatchAllPage() {
   notFound();

apps/client/app/[locale]/error.tsx

@@ -1,23 +1,23 @@
-"use client";
+'use client';
 
-import { useTranslations } from "next-intl";
-import { useEffect } from "react";
+import { useTranslations } from 'next-intl';
+import { useEffect } from 'react';
 
 type Props = {
   error: Error;
   reset(): void;
 };
 
 export default function Error({ error, reset }: Props) {
-  const t = useTranslations("Error");
+  const t = useTranslations('Error');
 
   useEffect(() => {
     console.error(error);
   }, [error]);
 
   return (
     <div>
-      {t.rich("description", {
+      {t.rich('description', {
         p: (chunks) => <p className="mt-4">{chunks}</p>,
         retry: (chunks) => (
           <button

apps/client/app/[locale]/layout.tsx

@@ -1,11 +1,15 @@
-import { locales } from "@client/config";
-import clsx from "clsx";
-import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
-import { Inter } from "next/font/google";
-import { notFound } from "next/navigation";
-import { Providers } from "./providers";
+import { locales } from '@client/config';
+import clsx from 'clsx';
+import { Inter } from 'next/font/google';
+import { notFound } from 'next/navigation';
+import {
+  getTranslations,
+  unstable_setRequestLocale as setRequestLocale,
+} from 'next-intl/server';
 
-const inter = Inter({ subsets: ["latin"] });
+import { Providers } from './providers';
+
+const inter = Inter({ subsets: ['latin'] });
 
 type Props = {
   children: React.ReactNode;
@@ -18,23 +22,23 @@ export function generateStaticParams() {
 
 export async function generateMetadata({
   params: { locale },
-}: Omit<Props, "children">) {
-  const t = await getTranslations({ locale, namespace: "LocaleLayout" });
+}: Omit<Props, 'children'>) {
+  const t = await getTranslations({ locale, namespace: 'LocaleLayout' });
 
   return {
-    title: t("title"),
+    title: t('title'),
   };
 }
 
 export default function LocaleLayout({ children, params: { locale } }: Props) {
   if (!locales.includes(locale as any)) notFound();
 
   // Enable static rendering
-  unstable_setRequestLocale(locale);
+  setRequestLocale(locale);
 
   return (
     <html lang={locale} className="light">
-      <body className={clsx(inter.className, "flex h-full flex-col")}>
+      <body className={clsx(inter.className, 'flex h-full flex-col')}>
         <Providers>{children}</Providers>
       </body>
     </html>

apps/client/app/[locale]/not-found.tsx

@@ -1,10 +1,10 @@
-import { useTranslations } from "next-intl";
+import { useTranslations } from 'next-intl';
 
 // Note that `app/[locale]/[...rest]/page.tsx`
 // is necessary for this page to render.
 
 export default function NotFoundPage() {
-  const t = useTranslations("NotFoundPage");
+  const t = useTranslations('NotFoundPage');
 
-  return <p className="max-w-[460px]">{t("description")}</p>;
+  return <p className="max-w-[460px]">{t('description')}</p>;
 }