chore: better types (#21)

Author: ImLunaHey

.gitignore

@@ -26,3 +26,4 @@ dist-ssr
 # generated files
 html
 dist
+coverage

package-lock.json

@@ -7,13 +7,14 @@
     "dev": "vite",
     "build": "vite build",
     "test": "vitest",
-    "lint": "eslint .",
+    "lint": "eslint src",
     "preview": "vite preview"
   },
   "dependencies": {
     "@ariakit/react": "^0.4.15",
     "@atproto/api": "^0.12.2",
     "@hookform/resolvers": "^3.9.1",
+    "@sinclair/typebox": "^0.34.13",
     "@stdlib/error-to-json": "^0.2.2",
     "@tanstack/react-query": "^5.24.1",
     "@tanstack/react-query-devtools": "^5.62.3",
@@ -49,6 +50,7 @@
     "@types/react": "^18.3.17",
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^2.1.8",
     "@vitest/ui": "^2.1.8",
     "autoprefixer": "^10.4.18",
     "eslint": "^9.9.1",
@@ -62,6 +64,7 @@
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.3.0",
     "vite": "^5.4.2",
-    "vitest": "^2.1.8"
+    "vitest": "^2.1.8",
+    "zod-validation-error": "^3.4.0"
   }
 }

package.json

@@ -1,10 +1,10 @@
-import { useForm } from "react-hook-form";
-import { useCreatePost } from "../lib/bluesky/hooks/useCreatePost";
-import { Button } from "./ui/Button";
+import { useForm } from 'react-hook-form';
+import { useCreatePost } from '../lib/bluesky/hooks/useCreatePost';
+import { Button } from './ui/Button';
 
-interface PostFormData {
+type PostFormData = {
   text: string;
-}
+};
 
 export function CreatePost() {
   const createPost = useCreatePost();
@@ -22,27 +22,20 @@ export function CreatePost() {
   };
 
   return (
-    <form
-      onSubmit={handleSubmit(onSubmit)}
-      className="bg-black p-4 rounded-lg shadow mb-4"
-    >
+    <form onSubmit={handleSubmit(onSubmit)} className="bg-black p-4 rounded-lg shadow mb-4">
       <textarea
-        {...register("text", { required: "Post content is required" })}
+        {...register('text', { required: 'Post content is required' })}
         placeholder="What's on your mind?"
         className="w-full p-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-md focus:ring-2 focus:ring-gray-400 focus:border-gray-400"
         rows={3}
       />
-      {errors.text && (
-        <p className="mt-1 text-sm text-red-500">{errors.text.message}</p>
-      )}
+      {errors.text && <p className="mt-1 text-sm text-red-500">{errors.text.message}</p>}
       <div className="mt-2 flex justify-end">
         <Button type="submit" disabled={createPost.isPending}>
-          {createPost.isPending ? "Posting..." : "Post"}
+          {createPost.isPending ? 'Posting...' : 'Post'}
         </Button>
       </div>
-      {createPost.error && (
-        <p className="mt-2 text-red-500 text-sm">{createPost.error.message}</p>
-      )}
+      {createPost.error && <p className="mt-2 text-red-500 text-sm">{createPost.error.message}</p>}
     </form>
   );
 }

src/components/CreatePost.tsx

@@ -3,16 +3,16 @@ import { TFunction } from 'i18next';
 import { Component, ErrorInfo, ReactNode } from 'react';
 import { withTranslation } from 'react-i18next';
 
-interface Props {
+type Props = {
   children: ReactNode;
   fallback?: ReactNode;
   t: TFunction<['error'], undefined>;
-}
+};
 
-interface State {
+type State = {
   hasError: boolean;
   error?: Error;
-}
+};
 
 class ErrorBoundaryInner extends Component<Props, State> {
   public state: State = {