Merge pull request #180 from hackdays-io/feature/prettier

Feature/prettier

pkgs/frontend/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "endOfLine": "lf",
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

pkgs/frontend/app/components/CommonButton.tsx

@@ -1,32 +1,32 @@
 import { Button, ButtonProps } from "~/components/ui/button";
 
 interface CommonButtonProps extends Omit<ButtonProps, "width"> {
-	children: React.ReactNode;
-	width?: "full" | number;
-	size?: "sm" | "md" | "lg";
-	backgroundColor?: string;
-	color?: string;
+  children: React.ReactNode;
+  width?: "full" | number;
+  size?: "sm" | "md" | "lg";
+  backgroundColor?: string;
+  color?: string;
 }
 
 export const CommonButton = ({
-	children,
-	width = "full",
-	size = "md",
-	backgroundColor,
-	color,
-	...props
+  children,
+  width = "full",
+  size = "md",
+  backgroundColor,
+  color,
+  ...props
 }: CommonButtonProps) => {
-	return (
-		<Button
-			w={width === "full" ? "100%" : width}
-			size={size}
-			backgroundColor={backgroundColor}
-			color={color}
-			{...props}
-		>
-			{children}
-		</Button>
-	);
+  return (
+    <Button
+      w={width === "full" ? "100%" : width}
+      size={size}
+      backgroundColor={backgroundColor}
+      color={color}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
 };
 
 export default CommonButton;

pkgs/frontend/app/components/chakra-provider.tsx

@@ -1,5 +1,5 @@
-import { ChakraProvider as Provider, defaultSystem } from "@chakra-ui/react"
+import { ChakraProvider as Provider, defaultSystem } from "@chakra-ui/react";
 
 export const ChakraProvider = (props: { children: React.ReactNode }) => {
-  return <Provider value={defaultSystem} {...props} />
-}
+  return <Provider value={defaultSystem} {...props} />;
+};

pkgs/frontend/app/components/color-mode-toggle.tsx

@@ -1,15 +1,15 @@
-import { IconButton } from "@chakra-ui/react"
-import { Moon, Sun } from "lucide-react"
-import { useTheme } from "next-themes"
+import { IconButton } from "@chakra-ui/react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
 
 export function ColorModeToggle() {
-  const { theme, setTheme } = useTheme()
+  const { theme, setTheme } = useTheme();
   const toggleColorMode = () => {
-    setTheme(theme === "light" ? "dark" : "light")
-  }
+    setTheme(theme === "light" ? "dark" : "light");
+  };
   return (
     <IconButton aria-label="toggle color mode" onClick={toggleColorMode}>
       {theme === "light" ? <Moon /> : <Sun />}
     </IconButton>
-  )
+  );
 }

pkgs/frontend/app/components/ui/avatar.tsx

@@ -1,24 +1,24 @@
-"use client"
+"use client";
 
-import type { GroupProps, SlotRecipeProps } from "@chakra-ui/react"
-import { Avatar as ChakraAvatar, Group } from "@chakra-ui/react"
-import * as React from "react"
+import type { GroupProps, SlotRecipeProps } from "@chakra-ui/react";
+import { Avatar as ChakraAvatar, Group } from "@chakra-ui/react";
+import * as React from "react";
 
-type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>
+type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
 
 export interface AvatarProps extends ChakraAvatar.RootProps {
-  name?: string
-  src?: string
-  srcSet?: string
-  loading?: ImageProps["loading"]
-  icon?: React.ReactElement
-  fallback?: React.ReactNode
+  name?: string;
+  src?: string;
+  srcSet?: string;
+  loading?: ImageProps["loading"];
+  icon?: React.ReactElement;
+  fallback?: React.ReactNode;
 }
 
 export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
   function Avatar(props, ref) {
     const { name, src, srcSet, loading, icon, fallback, children, ...rest } =
-      props
+      props;
     return (
       <ChakraAvatar.Root ref={ref} {...rest}>
         <AvatarFallback name={name} icon={icon}>
@@ -27,18 +27,18 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
         <ChakraAvatar.Image src={src} srcSet={srcSet} loading={loading} />
         {children}
       </ChakraAvatar.Root>
-    )
-  },
-)
+    );
+  }
+);
 
 interface AvatarFallbackProps extends ChakraAvatar.FallbackProps {
-  name?: string
-  icon?: React.ReactElement
+  name?: string;
+  icon?: React.ReactElement;
 }
 
 const AvatarFallback = React.forwardRef<HTMLDivElement, AvatarFallbackProps>(
   function AvatarFallback(props, ref) {
-    const { name, icon, children, ...rest } = props
+    const { name, icon, children, ...rest } = props;
     return (
       <ChakraAvatar.Fallback ref={ref} {...rest}>
         {children}
@@ -47,28 +47,28 @@ const AvatarFallback = React.forwardRef<HTMLDivElement, AvatarFallbackProps>(
           <ChakraAvatar.Icon asChild={!!icon}>{icon}</ChakraAvatar.Icon>
         )}
       </ChakraAvatar.Fallback>
-    )
-  },
-)
+    );
+  }
+);
 
 function getInitials(name: string) {
-  const names = name.trim().split(" ")
-  const firstName = names[0] != null ? names[0] : ""
-  const lastName = names.length > 1 ? names[names.length - 1] : ""
+  const names = name.trim().split(" ");
+  const firstName = names[0] != null ? names[0] : "";
+  const lastName = names.length > 1 ? names[names.length - 1] : "";
   return firstName && lastName
     ? `${firstName.charAt(0)}${lastName.charAt(0)}`
-    : firstName.charAt(0)
+    : firstName.charAt(0);
 }
 
 interface AvatarGroupProps extends GroupProps, SlotRecipeProps<"avatar"> {}
 
 export const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
   function AvatarGroup(props, ref) {
-    const { size, variant, borderless, ...rest } = props
+    const { size, variant, borderless, ...rest } = props;
     return (
       <ChakraAvatar.PropsProvider value={{ size, variant, borderless }}>
         <Group gap="0" spaceX="-3" ref={ref} {...rest} />
       </ChakraAvatar.PropsProvider>
-    )
-  },
-)
+    );
+  }
+);

pkgs/frontend/app/components/ui/button.tsx

@@ -1,22 +1,22 @@
-import type { ButtonProps as ChakraButtonProps } from "@chakra-ui/react"
+import type { ButtonProps as ChakraButtonProps } from "@chakra-ui/react";
 import {
   AbsoluteCenter,
   Button as ChakraButton,
   Span,
   Spinner,
-} from "@chakra-ui/react"
-import * as React from "react"
+} from "@chakra-ui/react";
+import * as React from "react";
 
 interface ButtonLoadingProps {
-  loading?: boolean
-  loadingText?: React.ReactNode
+  loading?: boolean;
+  loadingText?: React.ReactNode;
 }
 
 export interface ButtonProps extends ChakraButtonProps, ButtonLoadingProps {}
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   function Button(props, ref) {
-    const { loading, disabled, loadingText, children, ...rest } = props
+    const { loading, disabled, loadingText, children, ...rest } = props;
     return (
       <ChakraButton disabled={loading || disabled} ref={ref} {...rest}>
         {loading && !loadingText ? (
@@ -35,6 +35,6 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           children
         )}
       </ChakraButton>
-    )
-  },
-)
+    );
+  }
+);

pkgs/frontend/app/components/ui/checkbox.tsx

@@ -1,15 +1,15 @@
-import { Checkbox as ChakraCheckbox } from "@chakra-ui/react"
-import * as React from "react"
+import { Checkbox as ChakraCheckbox } from "@chakra-ui/react";
+import * as React from "react";
 
 export interface CheckboxProps extends ChakraCheckbox.RootProps {
-  icon?: React.ReactNode
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
-  rootRef?: React.Ref<HTMLLabelElement>
+  icon?: React.ReactNode;
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  rootRef?: React.Ref<HTMLLabelElement>;
 }
 
 export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
   function Checkbox(props, ref) {
-    const { icon, children, inputProps, rootRef, ...rest } = props
+    const { icon, children, inputProps, rootRef, ...rest } = props;
     return (
       <ChakraCheckbox.Root ref={rootRef} {...rest}>
         <ChakraCheckbox.HiddenInput ref={ref} {...inputProps} />
@@ -20,6 +20,6 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
           <ChakraCheckbox.Label>{children}</ChakraCheckbox.Label>
         )}
       </ChakraCheckbox.Root>
-    )
-  },
-)
+    );
+  }
+);

pkgs/frontend/app/components/ui/close-button.tsx

@@ -1,7 +1,7 @@
-import type { ButtonProps as ChakraCloseButtonProps } from "@chakra-ui/react"
-import { IconButton as ChakraIconButton } from "@chakra-ui/react"
-import * as React from "react"
-import { LuX } from "react-icons/lu"
+import type { ButtonProps as ChakraCloseButtonProps } from "@chakra-ui/react";
+import { IconButton as ChakraIconButton } from "@chakra-ui/react";
+import * as React from "react";
+import { LuX } from "react-icons/lu";
 
 export interface CloseButtonProps extends ChakraCloseButtonProps {}
 
@@ -13,5 +13,5 @@ export const CloseButton = React.forwardRef<
     <ChakraIconButton variant="ghost" aria-label="Close" ref={ref} {...props}>
       {props.children ?? <LuX />}
     </ChakraIconButton>
-  )
-})
+  );
+});

pkgs/frontend/app/components/ui/color-mode.tsx

@@ -1,40 +1,40 @@
-"use client"
+"use client";
 
-import type { IconButtonProps } from "@chakra-ui/react"
-import { ClientOnly, IconButton, Skeleton } from "@chakra-ui/react"
-import { ThemeProvider, useTheme } from "next-themes"
-import type { ThemeProviderProps } from "next-themes"
-import * as React from "react"
-import { LuMoon, LuSun } from "react-icons/lu"
+import type { IconButtonProps } from "@chakra-ui/react";
+import { ClientOnly, IconButton, Skeleton } from "@chakra-ui/react";
+import { ThemeProvider, useTheme } from "next-themes";
+import type { ThemeProviderProps } from "next-themes";
+import * as React from "react";
+import { LuMoon, LuSun } from "react-icons/lu";
 
 export interface ColorModeProviderProps extends ThemeProviderProps {}
 
 export function ColorModeProvider(props: ColorModeProviderProps) {
   return (
     <ThemeProvider attribute="class" disableTransitionOnChange {...props} />
-  )
+  );
 }
 
 export function useColorMode() {
-  const { resolvedTheme, setTheme } = useTheme()
+  const { resolvedTheme, setTheme } = useTheme();
   const toggleColorMode = () => {
-    setTheme(resolvedTheme === "light" ? "dark" : "light")
-  }
+    setTheme(resolvedTheme === "light" ? "dark" : "light");
+  };
   return {
     colorMode: resolvedTheme,
     setColorMode: setTheme,
     toggleColorMode,
-  }
+  };
 }
 
 export function useColorModeValue<T>(light: T, dark: T) {
-  const { colorMode } = useColorMode()
-  return colorMode === "light" ? light : dark
+  const { colorMode } = useColorMode();
+  return colorMode === "light" ? light : dark;
 }
 
 export function ColorModeIcon() {
-  const { colorMode } = useColorMode()
-  return colorMode === "light" ? <LuSun /> : <LuMoon />
+  const { colorMode } = useColorMode();
+  return colorMode === "light" ? <LuSun /> : <LuMoon />;
 }
 
 interface ColorModeButtonProps extends Omit<IconButtonProps, "aria-label"> {}
@@ -43,7 +43,7 @@ export const ColorModeButton = React.forwardRef<
   HTMLButtonElement,
   ColorModeButtonProps
 >(function ColorModeButton(props, ref) {
-  const { toggleColorMode } = useColorMode()
+  const { toggleColorMode } = useColorMode();
   return (
     <ClientOnly fallback={<Skeleton boxSize="8" />}>
       <IconButton
@@ -63,5 +63,5 @@ export const ColorModeButton = React.forwardRef<
         <ColorModeIcon />
       </IconButton>
     </ClientOnly>
-  )
-})
+  );
+});