release: v4.1.0

libs/hooks/.eslintrc.json

@@ -4,7 +4,19 @@
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {}
+      "rules": {
+        // react
+        "react/no-unescaped-entities": "off",
+        "react/jsx-sort-props": [
+          "error",
+          {
+            "reservedFirst": true,
+            "callbacksLast": true,
+            "shorthandFirst": true,
+            "noSortAlphabetically": true
+          }
+        ]
+      }
     },
     {
       "files": ["*.ts", "*.tsx"],

libs/hooks/src/hooks/use-form-field.ts

@@ -1,6 +1,5 @@
 import { createContext, useContext } from "react";
-import { useFormContext } from "react-hook-form";
-import { FieldPath, FieldValues } from "react-hook-form";
+import { FieldPath, FieldValues, useFormContext } from "react-hook-form";
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
@@ -14,16 +13,16 @@ type FormItemContextValue = { id: string };
 export const FormItemContext = createContext<FormItemContextValue>({} as FormItemContextValue);
 
 export const useFormField = () => {
-  const fieldContext = useContext(FormFieldContext);
-  const itemContext = useContext(FormItemContext);
+  const fieldContext = useContext(FormFieldContext) as FormFieldContextValue | undefined;
+  const itemContext = useContext(FormItemContext) as FormItemContextValue | undefined;
   const { getFieldState, formState } = useFormContext();
 
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
+  if (!fieldContext || !itemContext) {
     throw new Error("useFormField should be used within <FormField>");
   }
 
+  const fieldState = getFieldState(fieldContext.name, formState);
+
   const { id } = itemContext;
 
   return {

libs/hooks/src/hooks/use-theme.ts

@@ -5,12 +5,12 @@ const COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)";
 
 type Theme = "system" | "dark" | "light";
 
-interface UseThemeOutput {
+type UseThemeOutput = {
   theme: Theme;
   isDarkMode: boolean;
   toggleTheme: () => void;
   setTheme: Dispatch<SetStateAction<Theme>>;
-}
+};
 
 export const useTheme = (): UseThemeOutput => {
   const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY);
@@ -23,15 +23,18 @@ export const useTheme = (): UseThemeOutput => {
 
   useEffect(() => {
     switch (theme) {
-      case "light":
+      case "light": {
         setDarkMode(false);
         break;
-      case "system":
+      }
+      case "system": {
         setDarkMode(isDarkOS);
         break;
-      case "dark":
+      }
+      case "dark": {
         setDarkMode(true);
         break;
+      }
     }
   }, [theme, isDarkOS]);
 

libs/hooks/vite.config.ts

@@ -1,8 +1,9 @@
 /// <reference types='vitest' />
 
+import path from "node:path";
+
 import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin";
 import react from "@vitejs/plugin-react-swc";
-import * as path from "path";
 import { defineConfig } from "vite";
 import dts from "vite-plugin-dts";
 
@@ -14,7 +15,7 @@ export default defineConfig({
     nxViteTsPaths(),
     dts({
       entryRoot: "src",
-      tsconfigPath: path.join(__dirname, "tsconfig.lib.json"),
+      tsconfigPath: path.join(import.meta.dirname, "tsconfig.lib.json"),
     }),
   ],