Add prettier

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  semi: true,
+  trailingComma: 'all',
+  singleQuote: true,
+  printWidth: 80,
+  tabWidth: 2,
+};

app/start/page.tsx

@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import { NextPage } from "next";
-import * as z from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import _ from "lodash";
+import { NextPage } from 'next';
+import * as z from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import _ from 'lodash';
 import {
   Form,
   FormControl,
@@ -13,26 +13,26 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@/components/ui/form";
-import { Textarea } from "@/components/ui/textarea";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { useCallback, useState } from "react";
-import { QrGenerateRequest, QrGenerateResponse } from "@/utils/service";
-import { QrCard } from "@/components/QrCard";
-import { AlertCircle } from "lucide-react";
-import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
-import LoadingDots from "@/components/ui/loadingdots";
-import downloadQrCode from "@/utils/downloadQrCode";
-import va from "@vercel/analytics";
-import { useRouter } from "next/navigation";
-import { PromptSuggestion } from "@/components/PromptSuggestion";
+} from '@/components/ui/form';
+import { Textarea } from '@/components/ui/textarea';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { useCallback, useState } from 'react';
+import { QrGenerateRequest, QrGenerateResponse } from '@/utils/service';
+import { QrCard } from '@/components/QrCard';
+import { AlertCircle } from 'lucide-react';
+import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
+import LoadingDots from '@/components/ui/loadingdots';
+import downloadQrCode from '@/utils/downloadQrCode';
+import va from '@vercel/analytics';
+import { useRouter } from 'next/navigation';
+import { PromptSuggestion } from '@/components/PromptSuggestion';
 
 const promptSuggestions = [
-  "A city view with clouds",
-  "A beautiful glacier",
-  "A forest overlooking a mountain",
-  "A saharan desert",
+  'A city view with clouds',
+  'A beautiful glacier',
+  'A forest overlooking a mountain',
+  'A saharan desert',
 ];
 
 const generateFormSchema = z.object({
@@ -50,20 +50,20 @@ const GeneratePage: NextPage = () => {
 
   const form = useForm<GenerateFormValues>({
     resolver: zodResolver(generateFormSchema),
-    mode: "onChange",
+    mode: 'onChange',
 
     // Set default values so that the form inputs are controlled components.
     defaultValues: {
-      url: "",
-      prompt: "",
+      url: '',
+      prompt: '',
     },
   });
 
   const handleSuggestionClick = useCallback(
     (suggestion: string) => {
-      form.setValue("prompt", suggestion);
+      form.setValue('prompt', suggestion);
     },
-    [form]
+    [form],
   );
 
   const handleSubmit = useCallback(async (values: GenerateFormValues) => {
@@ -76,8 +76,8 @@ const GeneratePage: NextPage = () => {
         url: values.url,
         prompt: values.prompt,
       };
-      const response = await fetch("/api/generate", {
-        method: "POST",
+      const response = await fetch('/api/generate', {
+        method: 'POST',
         body: JSON.stringify(request),
       });
 
@@ -90,13 +90,13 @@ const GeneratePage: NextPage = () => {
       const data = await response.json();
       setResponse(data);
 
-      va.track("Generated QR Code", {
+      va.track('Generated QR Code', {
         prompt: values.prompt,
       });
 
       // router.push(`/s/${data.id}`);
     } catch (error) {
-      va.track("Failed to generate", {
+      va.track('Failed to generate', {
         prompt: values.prompt,
       });
       if (error instanceof Error) {
@@ -171,7 +171,7 @@ const GeneratePage: NextPage = () => {
                   className="inline-flex justify-center
                  max-w-[200px] mx-auto w-full"
                 >
-                  {isLoading ? <LoadingDots color="white" /> : "Generate"}
+                  {isLoading ? <LoadingDots color="white" /> : 'Generate'}
                 </Button>
 
                 {error && (
@@ -206,7 +206,7 @@ const GeneratePage: NextPage = () => {
                   <div className="flex justify-center gap-5 mt-4">
                     <Button
                       onClick={() =>
-                        downloadQrCode(response.image_url, "qrCode")
+                        downloadQrCode(response.image_url, 'qrCode')
                       }
                     >
                       Download

components.json

@@ -13,4 +13,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
+}

components/PromptSuggestion.tsx

@@ -17,7 +17,7 @@ export const PromptSuggestion: React.FC<PromptSuggestionProps> = ({
       onClick={() => onClick()}
       disabled={isLoading}
       className={`border p-2 rounded-2xl ${
-        !isLoading ? "cursor-pointer" : "cursor-not-allowed"
+        !isLoading ? 'cursor-pointer' : 'cursor-not-allowed'
       } hover:bg-gray-100 transition`}
     >
       {suggestion}

components/ui/alert.tsx

@@ -16,7 +16,7 @@ const alertVariants = cva(
     defaultVariants: {
       variant: 'default',
     },
-  }
+  },
 );
 
 const Alert = React.forwardRef<

components/ui/button.tsx

@@ -30,7 +30,7 @@ const buttonVariants = cva(
       variant: 'default',
       size: 'default',
     },
-  }
+  },
 );
 
 export interface ButtonProps
@@ -49,7 +49,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       />
     );
-  }
+  },
 );
 Button.displayName = 'Button';
 

components/ui/form.tsx

@@ -17,18 +17,18 @@ const Form = FormProvider;
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
   name: TName;
 };
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
+  {} as FormFieldContextValue,
 );
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
   ...props
 }: ControllerProps<TFieldValues, TName>) => {
@@ -67,7 +67,7 @@ type FormItemContextValue = {
 };
 
 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
+  {} as FormItemContextValue,
 );
 
 const FormItem = React.forwardRef<

components/ui/input.tsx

@@ -12,13 +12,13 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         type={type}
         className={cn(
           'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground  disabled:cursor-not-allowed disabled:opacity-50',
-          className
+          className,
         )}
         ref={ref}
         {...props}
       />
     );
-  }
+  },
 );
 Input.displayName = 'Input';
 

components/ui/label.tsx

@@ -7,7 +7,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/utils/utils';
 
 const labelVariants = cva(
-  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
 );
 
 const Label = React.forwardRef<

components/ui/textarea.tsx

@@ -11,13 +11,13 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       <textarea
         className={cn(
           'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
-          className
+          className,
         )}
         ref={ref}
         {...props}
       />
     );
-  }
+  },
 );
 Textarea.displayName = 'Textarea';
 

package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "format": "prettier --write ."
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.1",
@@ -29,6 +30,7 @@
     "nanoid": "^5.0.1",
     "next": "^13.5.2",
     "postcss": "8.4.29",
+    "prettier": "^3.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.46.1",

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

utils/ReplicateClient.ts

@@ -15,7 +15,7 @@ export class ReplicateClient {
    * Generate a QR code.
    */
   generateQrCode = async (
-    request: QrCodeControlNetRequest
+    request: QrCodeControlNetRequest,
   ): Promise<string> => {
     const output = (await this.replicate.run(
       'zylim0702/qr_code_controlnet:628e604e13cf63d8ec58bd4d238474e8986b054bc5e1326e50995fdbc851c557',
@@ -28,7 +28,7 @@ export class ReplicateClient {
           guidance_scale: request.guidance_scale,
           negative_prompt: request.negative_prompt,
         },
-      }
+      },
     )) as QrCodeControlNetResponse;
 
     if (!output) {

utils/utils.ts

@@ -8,5 +8,5 @@ export function cn(...inputs: ClassValue[]) {
 
 export const nanoid = customAlphabet(
   '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
-  7
+  7,
 );