release: v4.1.0

libs/ui/.eslintrc.json

@@ -11,7 +11,19 @@
           "config": "tailwind.config.js"
         }
       },
-      "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/ui/postcss.config.js

@@ -1,10 +1,10 @@
-const { join } = require("path");
+const path = require("node:path");
 
 module.exports = {
   plugins: {
     "postcss-import": {},
     "tailwindcss/nesting": {},
-    tailwindcss: { config: join(__dirname, "tailwind.config.js") },
+    tailwindcss: { config: path.join(__dirname, "tailwind.config.js") },
     autoprefixer: {},
   },
 };

libs/ui/src/components/alert-dialog.tsx

@@ -40,7 +40,7 @@ export const AlertDialogContent = forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded border bg-background p-6 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] md:w-full",
+        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded border bg-background p-6 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] md:w-full",
         className,
       )}
       {...props}

libs/ui/src/components/alert.tsx

@@ -4,9 +4,7 @@ import { forwardRef } from "react";
 
 import { alertVariants } from "../variants/alert";
 
-interface AlertProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof alertVariants> {}
+type AlertProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>;
 
 export const Alert = forwardRef<HTMLDivElement, AlertProps>(
   ({ className, variant, ...props }, ref) => (

libs/ui/src/components/badge-input.tsx

@@ -47,7 +47,9 @@ export const BadgeInput = forwardRef<HTMLInputElement, BadgeInputProps>(
         ref={ref}
         value={label}
         onKeyDown={onKeyDown}
-        onChange={(event) => setLabel(event.target.value)}
+        onChange={(event) => {
+          setLabel(event.target.value);
+        }}
       />
     );
   },

libs/ui/src/components/badge.tsx

@@ -3,9 +3,7 @@ import { type VariantProps } from "class-variance-authority";
 
 import { badgeVariants } from "../variants/badge";
 
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+export type BadgeProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants>;
 
 export const Badge = ({ className, variant, outline, ...props }: BadgeProps) => (
   <div className={cn(badgeVariants({ variant, outline }), className)} {...props} />

libs/ui/src/components/button.tsx

@@ -5,11 +5,10 @@ import { forwardRef } from "react";
 
 import { buttonVariants } from "../variants/button";
 
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+export type ButtonProps = {
   asChild?: boolean;
-}
+} & React.ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants>;
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {

libs/ui/src/components/combobox.tsx

@@ -13,10 +13,10 @@ import {
 } from "./command";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover";
 
-export interface ComboboxOption {
+export type ComboboxOption = {
   value: string;
   label: React.ReactNode;
-}
+};
 
 type ComboboxPropsSingle = {
   options: ComboboxOption[];

libs/ui/src/components/dialog.tsx

@@ -38,7 +38,7 @@ export const DialogContent = forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-sm translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 duration-200 focus:outline-none focus:ring-1 focus:ring-secondary focus:ring-offset-1 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:max-w-xl sm:rounded-sm md:w-full",
+        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-sm -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 duration-200 focus:outline-none focus:ring-1 focus:ring-secondary focus:ring-offset-1 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:max-w-xl sm:rounded-sm md:w-full",
         className,
       )}
       {...props}

libs/ui/src/components/dropdown-menu.tsx

@@ -41,7 +41,7 @@ export const DropdownMenuSubContent = forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 >(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
+  <DropdownMenuPortal>
     <DropdownMenuPrimitive.SubContent
       ref={ref}
       className={cn(
@@ -50,7 +50,7 @@ export const DropdownMenuSubContent = forwardRef<
       )}
       {...props}
     />
-  </DropdownMenuPrimitive.Portal>
+  </DropdownMenuPortal>
 ));
 
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;

libs/ui/src/components/form.tsx

@@ -3,12 +3,10 @@ import { Slot } from "@radix-ui/react-slot";
 import { FormFieldContext, FormItemContext, useFormField } from "@reactive-resume/hooks";
 import { cn } from "@reactive-resume/utils";
 import { forwardRef, useId } from "react";
-import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider } from "react-hook-form";
+import { Controller, ControllerProps, FieldPath, FieldValues } from "react-hook-form";
 
 import { Label } from "./label";
 
-export const Form = FormProvider;
-
 export const FormField = <
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
@@ -63,7 +61,7 @@ export const FormControl = forwardRef<
       ref={ref}
       id={formItemId}
       aria-invalid={!!error}
-      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+      aria-describedby={error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId}
       {...props}
     />
   );
@@ -94,7 +92,7 @@ export const FormMessage = forwardRef<
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message) : children;
+  const body = error ? String(error.message) : children;
 
   if (!body) {
     return null;
@@ -113,3 +111,5 @@ export const FormMessage = forwardRef<
 });
 
 FormMessage.displayName = "FormMessage";
+
+export { FormProvider as Form } from "react-hook-form";

libs/ui/src/components/input.tsx

@@ -1,9 +1,9 @@
 import { cn } from "@reactive-resume/utils";
 import { forwardRef } from "react";
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export type InputProps = {
   hasError?: boolean;
-}
+} & React.InputHTMLAttributes<HTMLInputElement>;
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, hasError = false, ...props }, ref) => (

libs/ui/src/components/rich-input.tsx

@@ -85,7 +85,7 @@ const InsertImageForm = ({ onInsert }: InsertImageProps) => {
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
+      <form className="space-y-3" onSubmit={form.handleSubmit(onSubmit)}>
         <p className="prose prose-sm prose-zinc dark:prose-invert">
           Insert an image from an external URL and use it on your resume.
         </p>
@@ -97,7 +97,7 @@ const InsertImageForm = ({ onInsert }: InsertImageProps) => {
             <FormItem>
               <FormLabel>URL</FormLabel>
               <FormControl>
-                <Input placeholder="http://..." {...field} />
+                <Input placeholder="https://..." {...field} />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -347,8 +347,8 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           size="sm"
           variant="ghost"
           className="px-2"
-          onClick={() => editor.chain().focus().liftListItem("listItem").run()}
           disabled={!editor.can().chain().focus().liftListItem("listItem").run()}
+          onClick={() => editor.chain().focus().liftListItem("listItem").run()}
         >
           <TextOutdent />
         </Button>
@@ -359,8 +359,8 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           size="sm"
           variant="ghost"
           className="px-2"
-          onClick={() => editor.chain().focus().sinkListItem("listItem").run()}
           disabled={!editor.can().chain().focus().sinkListItem("listItem").run()}
+          onClick={() => editor.chain().focus().sinkListItem("listItem").run()}
         >
           <TextIndent />
         </Button>
@@ -384,8 +384,8 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           size="sm"
           variant="ghost"
           className="px-2"
-          onClick={() => editor.chain().focus().setHardBreak().run()}
           disabled={!editor.can().chain().focus().setHardBreak().run()}
+          onClick={() => editor.chain().focus().setHardBreak().run()}
         >
           <KeyReturn />
         </Button>
@@ -396,8 +396,8 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           size="sm"
           variant="ghost"
           className="px-2"
-          onClick={() => editor.chain().focus().setHorizontalRule().run()}
           disabled={!editor.can().chain().focus().setHorizontalRule().run()}
+          onClick={() => editor.chain().focus().setHorizontalRule().run()}
         >
           <Minus />
         </Button>
@@ -430,18 +430,14 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
   );
 };
 
-interface RichInputProps
-  extends Omit<
-    EditorContentProps,
-    "ref" | "editor" | "content" | "value" | "onChange" | "className"
-  > {
+type RichInputProps = {
   content?: string;
   onChange?: (value: string) => void;
   hideToolbar?: boolean;
   className?: string;
   editorClassName?: string;
   footer?: (editor: Editor) => React.ReactNode;
-}
+} & Omit<EditorContentProps, "ref" | "editor" | "content" | "value" | "onChange" | "className">;
 
 export const RichInput = forwardRef<Editor, RichInputProps>(
   (

libs/ui/src/components/sheet.tsx

@@ -34,11 +34,10 @@ export const SheetOverlay = forwardRef<
 
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
-export interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {
+export type SheetContentProps = {
   showClose?: boolean;
-}
+} & React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> &
+  VariantProps<typeof sheetVariants>;
 
 export const SheetContent = forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,

libs/ui/src/components/shortcut.tsx

@@ -20,8 +20,13 @@ export const KeyboardShortcut = ({
   const { value, setValue } = useBoolean(defaultValue);
 
   useEffect(() => {
-    const onKeyDown = (e: KeyboardEvent) => e.key === "Control" && setValue(true);
-    const onKeyUp = (e: KeyboardEvent) => e.key === "Control" && setValue(false);
+    const onKeyDown = (e: KeyboardEvent) => {
+      e.key === "Control" && setValue(true);
+    };
+
+    const onKeyUp = (e: KeyboardEvent) => {
+      e.key === "Control" && setValue(false);
+    };
 
     document.addEventListener("keydown", onKeyDown);
     document.addEventListener("keyup", onKeyUp);

libs/ui/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, searchForWorkspaceRoot } from "vite";
 import dts from "vite-plugin-dts";
 
@@ -18,7 +19,7 @@ export default defineConfig({
     nxViteTsPaths(),
     dts({
       entryRoot: "src",
-      tsconfigPath: path.join(__dirname, "tsconfig.lib.json"),
+      tsconfigPath: path.join(import.meta.dirname, "tsconfig.lib.json"),
     }),
   ],