Update formatting

demospace-ai · May 30, 2024 · e3de3fe · e3de3fe
1 parent 59b823c
commit e3de3fe
Show file tree

Hide file tree

Showing 19 changed files with 4,686 additions and 318 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,11 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": [".*"]
+      }
+    ]
+  }
+}
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "semi": true,
+  "printWidth": 120
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,26 +1,18 @@
-import "./globals.css";
+import "@/app/globals.css";
 
-const defaultUrl = process.env.VERCEL_URL
-  ? `https://${process.env.VERCEL_URL}`
-  : "http://localhost:3000";
+const defaultUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "http://localhost:3000";
 
 export const metadata = {
   metadataBase: new URL(defaultUrl),
   title: "Demospace",
   description: "The AI-powered product expert that scales.",
 };
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <body className="bg-background text-foreground">
-        <main className="min-h-screen flex flex-col items-center">
-          {children}
-        </main>
+        <main className="min-h-screen flex flex-col items-center">{children}</main>
       </body>
     </html>
   );

diff --git a/app/login/client.tsx b/app/login/client.tsx
@@ -7,11 +7,7 @@ type Props = ComponentProps<"button"> & {
   pendingText?: string;
 };
 
-export const SubmitButton: React.FC<Props> = ({
-  children,
-  pendingText,
-  ...props
-}) => {
+export const SubmitButton: React.FC<Props> = ({ children, pendingText, ...props }) => {
   const { pending, action } = useFormStatus();
 
   const isPending = pending && action === props.formAction;

diff --git a/app/login/page.tsx b/app/login/page.tsx
@@ -1,14 +1,10 @@
+import { SubmitButton } from "@/app/login/client";
 import { createClient } from "@/utils/supabase/server";
 import { headers } from "next/headers";
 import Link from "next/link";
 import { redirect } from "next/navigation";
-import { SubmitButton } from "./client";
 
-export default function Login({
-  searchParams,
-}: {
-  searchParams: { message: string };
-}) {
+export default function Login({ searchParams }: { searchParams: { message: string } }) {
   const signIn = async (formData: FormData) => {
     "use server";
 
@@ -109,9 +105,7 @@ export default function Login({
           Sign Up
         </SubmitButton>
         {searchParams?.message && (
-          <p className="mt-4 p-4 bg-foreground/10 text-foreground text-center">
-            {searchParams.message}
-          </p>
+          <p className="mt-4 p-4 bg-foreground/10 text-foreground text-center">{searchParams.message}</p>
         )}
       </form>
     </div>

diff --git a/components/ActiveCallDetail.tsx b/components/ActiveCallDetail.tsx
@@ -17,20 +17,11 @@ export const ActiveCallDetail: React.FC<{
   );
 };
 
-const AssistantSpeechIndicator: React.FC<{ isSpeaking: boolean }> = ({
-  isSpeaking,
-}) => {
+const AssistantSpeechIndicator: React.FC<{ isSpeaking: boolean }> = ({ isSpeaking }) => {
   return (
     <div className="flex items-center mb-2">
-      <div
-        className={cn(
-          "w-5 h-5 mr-2 rounded",
-          isSpeaking ? "bg-[#3ef07c]" : "bg-[#f03e3e]"
-        )}
-      />
-      <p className="bg-slate-50 m-0">
-        {isSpeaking ? "Assistant speaking" : "Assistant not speaking"}
-      </p>
+      <div className={cn("w-5 h-5 mr-2 rounded", isSpeaking ? "bg-[#3ef07c]" : "bg-[#f03e3e]")} />
+      <p className="bg-slate-50 m-0">{isSpeaking ? "Assistant speaking" : "Assistant not speaking"}</p>
     </div>
   );
 };
diff --git a/components/Demi.tsx b/components/Demi.tsx
@@ -2,7 +2,7 @@
 
 import { ActiveCallDetail } from "@/components/ActiveCallDetail";
 import { Button } from "@/components/button/Button";
-import { Loading } from "@/components/button/loading/Loading";
+import { Loading } from "@/components/loading/Loading";
 import { AssistantOptions } from "@/utils/vapi/config";
 import Vapi from "@vapi-ai/web";
 import { useEffect, useState } from "react";
@@ -54,14 +54,9 @@ export const Demi: React.FC = () => {
   return (
     <>
       {!connected ? (
-        <Button onClick={startCallInline}>
-          {connecting ? <Loading className="mx-auto" light /> : "Start Demo"}
-        </Button>
+        <Button onClick={startCallInline}>{connecting ? <Loading className="mx-auto" light /> : "Start Demo"}</Button>
       ) : (
-        <ActiveCallDetail
-          assistantIsSpeaking={assistantIsSpeaking}
-          onEndCallClick={endCall}
-        />
+        <ActiveCallDetail assistantIsSpeaking={assistantIsSpeaking} onEndCallClick={endCall} />
       )}
     </>
   );

diff --git a/components/AuthButton.tsx → components/auth/AuthButton.tsx b/components/AuthButton.tsx → components/auth/AuthButton.tsx
diff --git a/components/button/Button.tsx b/components/button/Button.tsx
@@ -3,64 +3,46 @@
 import { cn } from "@/utils/classnames";
 import { TrashIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/navigation";
-import React, {
-  InputHTMLAttributes,
-  MouseEvent,
-  MouseEventHandler,
-  Ref,
-  forwardRef,
-} from "react";
+import React, { InputHTMLAttributes, MouseEvent, MouseEventHandler, Ref, forwardRef } from "react";
 
 interface ButtonProps extends InputHTMLAttributes<HTMLButtonElement> {
   onClick?: MouseEventHandler<HTMLButtonElement> | (() => void);
   type?: "button" | "submit" | "reset";
 }
 
-export const Button: React.FC<ButtonProps & { ref?: Ref<HTMLButtonElement> }> =
-  forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-    const {
-      onClick,
-      type = "button",
-      className,
-      children,
-      ...remaining
-    } = props;
-
-    const buttonStyle = cn(
-      "text-white bg-blue-950 hover:bg-blue-900",
-      "py-1 px-4 cursor-pointer font-semibold shadow-none rounded-md tracking-[1px] transition select-none",
-      props.disabled &&
-        "text-slate-600 bg-slate-300 hover:bg-slate-300 cursor-not-allowed",
-      props.className
-    );
-    return (
-      <button
-        className={buttonStyle}
-        type={type}
-        ref={ref}
-        onClick={props.onClick}
-        {...remaining}
-      >
-        {props.children}
-      </button>
-    );
-  });
+export const Button: React.FC<ButtonProps & { ref?: Ref<HTMLButtonElement> }> = forwardRef<
+  HTMLButtonElement,
+  ButtonProps
+>((props, ref) => {
+  const { onClick, type = "button", className, children, ...remaining } = props;
+
+  const buttonStyle = cn(
+    "text-white bg-blue-950 hover:bg-blue-900",
+    "py-1 px-4 cursor-pointer font-semibold shadow-none rounded-md tracking-[1px] transition select-none",
+    props.disabled && "text-slate-600 bg-slate-300 hover:bg-slate-300 cursor-not-allowed",
+    props.className,
+  );
+  return (
+    <button className={buttonStyle} type={type} ref={ref} onClick={props.onClick} {...remaining}>
+      {props.children}
+    </button>
+  );
+});
+
+Button.displayName = "Button";
 
 type LinkButtonProps = {
   href: string;
   className?: string;
   children: React.ReactNode;
 };
 
-export const LinkButton: React.FC<LinkButtonProps> = forwardRef<
-  HTMLAnchorElement,
-  LinkButtonProps
->((props, ref) => {
+export const LinkButton: React.FC<LinkButtonProps> = forwardRef<HTMLAnchorElement, LinkButtonProps>((props, ref) => {
   const { href, className, children, ...remaining } = props;
 
   const buttonStyle = cn(
     "flex items-center justify-center text-white bg-blue-950 hover:bg-blue-900 tracking-[1px] py-1 px-4 cursor-pointer font-bold shadow-none rounded-md transition select-none",
-    props.className
+    props.className,
   );
   return (
     <a className={buttonStyle} ref={ref} href={props.href} {...remaining}>
@@ -69,6 +51,8 @@ export const LinkButton: React.FC<LinkButtonProps> = forwardRef<
   );
 });
 
+LinkButton.displayName = "LinkButton";
+
 type FormButtonProps = {
   className?: string;
   children: React.ReactNode;
@@ -77,7 +61,7 @@ type FormButtonProps = {
 export const FormButton: React.FC<FormButtonProps> = (props) => {
   const buttonStyle = cn(
     "text-white bg-blue-950 hover:bg-blue-900 py-1 px-4 cursor-pointer font-bold shadow-none rounded-md tracking-[1px] transition select-none",
-    props.className
+    props.className,
   );
   return (
     <button className={buttonStyle} type="submit">
@@ -86,9 +70,7 @@ export const FormButton: React.FC<FormButtonProps> = (props) => {
   );
 };
 
-export const BackButton: React.FC<InputHTMLAttributes<HTMLDivElement>> = (
-  props
-) => {
+export const BackButton: React.FC<InputHTMLAttributes<HTMLDivElement>> = (props) => {
   const router = useRouter();
 
   const onClick = (e: MouseEvent<HTMLDivElement>) => {
@@ -101,10 +83,7 @@ export const BackButton: React.FC<InputHTMLAttributes<HTMLDivElement>> = (
 
   return (
     <div
-      className={cn(
-        "cursor-pointer select-none text-sm font-[500] hover:text-slate-600 w-fit",
-        props.className
-      )}
+      className={cn("cursor-pointer select-none text-sm font-[500] hover:text-slate-600 w-fit", props.className)}
       onClick={onClick}
     >
       {String.fromCharCode(8592)} Back
@@ -119,17 +98,14 @@ type IconButtonProps = {
   children?: React.ReactNode;
   disabled?: boolean;
 };
-export const IconButton: React.FC<IconButtonProps> = forwardRef<
-  HTMLButtonElement,
-  IconButtonProps
->((props, ref) => {
+export const IconButton: React.FC<IconButtonProps> = forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => {
   const { onClick, className, children, ...remaining } = props;
   const buttonStyle = cn(
     "font-semibold flex ",
     "py-1 px-4 cursor-pointer font-bold shadow-none rounded-md tracking-[1px] transition select-none",
     !props.disabled && "hover:bg-slate-100",
     props.disabled && "text-slate-400 cursor-not-allowed",
-    props.className
+    props.className,
   );
   return (
     <button
@@ -146,6 +122,8 @@ export const IconButton: React.FC<IconButtonProps> = forwardRef<
   );
 });
 
+IconButton.displayName = "IconButton";
+
 export const DeleteButton = (props: Omit<IconButtonProps, "icon">) => (
   <IconButton {...props} icon={<TrashIcon className="w-5 h-5" />} />
 );