diff --git a/pkgs/frontend/.prettierrc.json b/pkgs/frontend/.prettierrc.json new file mode 100644 index 0000000..29fd18b --- /dev/null +++ b/pkgs/frontend/.prettierrc.json @@ -0,0 +1,7 @@ +{ + "endOfLine": "lf", + "semi": true, + "singleQuote": false, + "tabWidth": 2, + "trailingComma": "es5" +} diff --git a/pkgs/frontend/app/components/CommonButton.tsx b/pkgs/frontend/app/components/CommonButton.tsx index 337cab6..3b32311 100644 --- a/pkgs/frontend/app/components/CommonButton.tsx +++ b/pkgs/frontend/app/components/CommonButton.tsx @@ -1,32 +1,32 @@ import { Button, ButtonProps } from "~/components/ui/button"; interface CommonButtonProps extends Omit { - 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 ( - - ); + return ( + + ); }; export default CommonButton; diff --git a/pkgs/frontend/app/components/chakra-provider.tsx b/pkgs/frontend/app/components/chakra-provider.tsx index 0eb68e3..c1d755e 100644 --- a/pkgs/frontend/app/components/chakra-provider.tsx +++ b/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 -} + return ; +}; diff --git a/pkgs/frontend/app/components/color-mode-toggle.tsx b/pkgs/frontend/app/components/color-mode-toggle.tsx index 7ba74a3..36d9723 100644 --- a/pkgs/frontend/app/components/color-mode-toggle.tsx +++ b/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 ( {theme === "light" ? : } - ) + ); } diff --git a/pkgs/frontend/app/components/ui/avatar.tsx b/pkgs/frontend/app/components/ui/avatar.tsx index cd84664..1245f11 100644 --- a/pkgs/frontend/app/components/ui/avatar.tsx +++ b/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 +type ImageProps = React.ImgHTMLAttributes; 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( function Avatar(props, ref) { const { name, src, srcSet, loading, icon, fallback, children, ...rest } = - props + props; return ( @@ -27,18 +27,18 @@ export const Avatar = React.forwardRef( {children} - ) - }, -) + ); + } +); interface AvatarFallbackProps extends ChakraAvatar.FallbackProps { - name?: string - icon?: React.ReactElement + name?: string; + icon?: React.ReactElement; } const AvatarFallback = React.forwardRef( function AvatarFallback(props, ref) { - const { name, icon, children, ...rest } = props + const { name, icon, children, ...rest } = props; return ( {children} @@ -47,28 +47,28 @@ const AvatarFallback = React.forwardRef( {icon} )} - ) - }, -) + ); + } +); 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( function AvatarGroup(props, ref) { - const { size, variant, borderless, ...rest } = props + const { size, variant, borderless, ...rest } = props; return ( - ) - }, -) + ); + } +); diff --git a/pkgs/frontend/app/components/ui/button.tsx b/pkgs/frontend/app/components/ui/button.tsx index 21d5f4b..ce97984 100644 --- a/pkgs/frontend/app/components/ui/button.tsx +++ b/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( function Button(props, ref) { - const { loading, disabled, loadingText, children, ...rest } = props + const { loading, disabled, loadingText, children, ...rest } = props; return ( {loading && !loadingText ? ( @@ -35,6 +35,6 @@ export const Button = React.forwardRef( children )} - ) - }, -) + ); + } +); diff --git a/pkgs/frontend/app/components/ui/checkbox.tsx b/pkgs/frontend/app/components/ui/checkbox.tsx index 2a27c2f..b6c6bf1 100644 --- a/pkgs/frontend/app/components/ui/checkbox.tsx +++ b/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 - rootRef?: React.Ref + icon?: React.ReactNode; + inputProps?: React.InputHTMLAttributes; + rootRef?: React.Ref; } export const Checkbox = React.forwardRef( function Checkbox(props, ref) { - const { icon, children, inputProps, rootRef, ...rest } = props + const { icon, children, inputProps, rootRef, ...rest } = props; return ( @@ -20,6 +20,6 @@ export const Checkbox = React.forwardRef( {children} )} - ) - }, -) + ); + } +); diff --git a/pkgs/frontend/app/components/ui/close-button.tsx b/pkgs/frontend/app/components/ui/close-button.tsx index 8a99007..de4dbe5 100644 --- a/pkgs/frontend/app/components/ui/close-button.tsx +++ b/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< {props.children ?? } - ) -}) + ); +}); diff --git a/pkgs/frontend/app/components/ui/color-mode.tsx b/pkgs/frontend/app/components/ui/color-mode.tsx index a34b968..1f619db 100644 --- a/pkgs/frontend/app/components/ui/color-mode.tsx +++ b/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 ( - ) + ); } 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(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" ? : + const { colorMode } = useColorMode(); + return colorMode === "light" ? : ; } interface ColorModeButtonProps extends Omit {} @@ -43,7 +43,7 @@ export const ColorModeButton = React.forwardRef< HTMLButtonElement, ColorModeButtonProps >(function ColorModeButton(props, ref) { - const { toggleColorMode } = useColorMode() + const { toggleColorMode } = useColorMode(); return ( }> - ) -}) + ); +}); diff --git a/pkgs/frontend/app/components/ui/dialog.tsx b/pkgs/frontend/app/components/ui/dialog.tsx index 89d68a5..e954059 100644 --- a/pkgs/frontend/app/components/ui/dialog.tsx +++ b/pkgs/frontend/app/components/ui/dialog.tsx @@ -1,11 +1,11 @@ -import { Dialog as ChakraDialog, Portal } from "@chakra-ui/react" -import { CloseButton } from "./close-button" -import * as React from "react" +import { Dialog as ChakraDialog, Portal } from "@chakra-ui/react"; +import { CloseButton } from "./close-button"; +import * as React from "react"; interface DialogContentProps extends ChakraDialog.ContentProps { - portalled?: boolean - portalRef?: React.RefObject - backdrop?: boolean + portalled?: boolean; + portalRef?: React.RefObject; + backdrop?: boolean; } export const DialogContent = React.forwardRef< @@ -18,7 +18,7 @@ export const DialogContent = React.forwardRef< portalRef, backdrop = true, ...rest - } = props + } = props; return ( @@ -29,8 +29,8 @@ export const DialogContent = React.forwardRef< - ) -}) + ); +}); export const DialogCloseTrigger = React.forwardRef< HTMLButtonElement, @@ -48,15 +48,15 @@ export const DialogCloseTrigger = React.forwardRef< {props.children} - ) -}) + ); +}); -export const DialogRoot = ChakraDialog.Root -export const DialogFooter = ChakraDialog.Footer -export const DialogHeader = ChakraDialog.Header -export const DialogBody = ChakraDialog.Body -export const DialogBackdrop = ChakraDialog.Backdrop -export const DialogTitle = ChakraDialog.Title -export const DialogDescription = ChakraDialog.Description -export const DialogTrigger = ChakraDialog.Trigger -export const DialogActionTrigger = ChakraDialog.ActionTrigger +export const DialogRoot = ChakraDialog.Root; +export const DialogFooter = ChakraDialog.Footer; +export const DialogHeader = ChakraDialog.Header; +export const DialogBody = ChakraDialog.Body; +export const DialogBackdrop = ChakraDialog.Backdrop; +export const DialogTitle = ChakraDialog.Title; +export const DialogDescription = ChakraDialog.Description; +export const DialogTrigger = ChakraDialog.Trigger; +export const DialogActionTrigger = ChakraDialog.ActionTrigger; diff --git a/pkgs/frontend/app/components/ui/drawer.tsx b/pkgs/frontend/app/components/ui/drawer.tsx index ccb96c8..447c57a 100644 --- a/pkgs/frontend/app/components/ui/drawer.tsx +++ b/pkgs/frontend/app/components/ui/drawer.tsx @@ -1,18 +1,18 @@ -import { Drawer as ChakraDrawer, Portal } from "@chakra-ui/react" -import { CloseButton } from "./close-button" -import * as React from "react" +import { Drawer as ChakraDrawer, Portal } from "@chakra-ui/react"; +import { CloseButton } from "./close-button"; +import * as React from "react"; interface DrawerContentProps extends ChakraDrawer.ContentProps { - portalled?: boolean - portalRef?: React.RefObject - offset?: ChakraDrawer.ContentProps["padding"] + portalled?: boolean; + portalRef?: React.RefObject; + offset?: ChakraDrawer.ContentProps["padding"]; } export const DrawerContent = React.forwardRef< HTMLDivElement, DrawerContentProps >(function DrawerContent(props, ref) { - const { children, portalled = true, portalRef, offset, ...rest } = props + const { children, portalled = true, portalRef, offset, ...rest } = props; return ( @@ -21,8 +21,8 @@ export const DrawerContent = React.forwardRef< - ) -}) + ); +}); export const DrawerCloseTrigger = React.forwardRef< HTMLButtonElement, @@ -38,15 +38,15 @@ export const DrawerCloseTrigger = React.forwardRef< > - ) -}) + ); +}); -export const DrawerTrigger = ChakraDrawer.Trigger -export const DrawerRoot = ChakraDrawer.Root -export const DrawerFooter = ChakraDrawer.Footer -export const DrawerHeader = ChakraDrawer.Header -export const DrawerBody = ChakraDrawer.Body -export const DrawerBackdrop = ChakraDrawer.Backdrop -export const DrawerDescription = ChakraDrawer.Description -export const DrawerTitle = ChakraDrawer.Title -export const DrawerActionTrigger = ChakraDrawer.ActionTrigger +export const DrawerTrigger = ChakraDrawer.Trigger; +export const DrawerRoot = ChakraDrawer.Root; +export const DrawerFooter = ChakraDrawer.Footer; +export const DrawerHeader = ChakraDrawer.Header; +export const DrawerBody = ChakraDrawer.Body; +export const DrawerBackdrop = ChakraDrawer.Backdrop; +export const DrawerDescription = ChakraDrawer.Description; +export const DrawerTitle = ChakraDrawer.Title; +export const DrawerActionTrigger = ChakraDrawer.ActionTrigger; diff --git a/pkgs/frontend/app/components/ui/field.tsx b/pkgs/frontend/app/components/ui/field.tsx index dd3b66f..27eb2ce 100644 --- a/pkgs/frontend/app/components/ui/field.tsx +++ b/pkgs/frontend/app/components/ui/field.tsx @@ -1,17 +1,17 @@ -import { Field as ChakraField } from "@chakra-ui/react" -import * as React from "react" +import { Field as ChakraField } from "@chakra-ui/react"; +import * as React from "react"; export interface FieldProps extends Omit { - label?: React.ReactNode - helperText?: React.ReactNode - errorText?: React.ReactNode - optionalText?: React.ReactNode + label?: React.ReactNode; + helperText?: React.ReactNode; + errorText?: React.ReactNode; + optionalText?: React.ReactNode; } export const Field = React.forwardRef( function Field(props, ref) { const { label, children, helperText, errorText, optionalText, ...rest } = - props + props; return ( {label && ( @@ -28,6 +28,6 @@ export const Field = React.forwardRef( {errorText} )} - ) - }, -) + ); + } +); diff --git a/pkgs/frontend/app/components/ui/input-group.tsx b/pkgs/frontend/app/components/ui/input-group.tsx index 1124a61..131c0e8 100644 --- a/pkgs/frontend/app/components/ui/input-group.tsx +++ b/pkgs/frontend/app/components/ui/input-group.tsx @@ -1,15 +1,15 @@ -import type { BoxProps, InputElementProps } from "@chakra-ui/react" -import { Group, InputElement } from "@chakra-ui/react" -import * as React from "react" +import type { BoxProps, InputElementProps } from "@chakra-ui/react"; +import { Group, InputElement } from "@chakra-ui/react"; +import * as React from "react"; export interface InputGroupProps extends BoxProps { - startElementProps?: InputElementProps - endElementProps?: InputElementProps - startElement?: React.ReactNode - endElement?: React.ReactNode - children: React.ReactElement - startOffset?: InputElementProps["paddingStart"] - endOffset?: InputElementProps["paddingEnd"] + startElementProps?: InputElementProps; + endElementProps?: InputElementProps; + startElement?: React.ReactNode; + endElement?: React.ReactNode; + children: React.ReactElement; + startOffset?: InputElementProps["paddingStart"]; + endOffset?: InputElementProps["paddingEnd"]; } export const InputGroup = React.forwardRef( @@ -23,7 +23,7 @@ export const InputGroup = React.forwardRef( startOffset = "6px", endOffset = "6px", ...rest - } = props + } = props; return ( @@ -45,6 +45,6 @@ export const InputGroup = React.forwardRef( )} - ) - }, -) + ); + } +); diff --git a/pkgs/frontend/app/components/ui/popover.tsx b/pkgs/frontend/app/components/ui/popover.tsx index 3320659..0262a89 100644 --- a/pkgs/frontend/app/components/ui/popover.tsx +++ b/pkgs/frontend/app/components/ui/popover.tsx @@ -1,25 +1,25 @@ -import { Popover as ChakraPopover, Portal } from "@chakra-ui/react" -import { CloseButton } from "./close-button" -import * as React from "react" +import { Popover as ChakraPopover, Portal } from "@chakra-ui/react"; +import { CloseButton } from "./close-button"; +import * as React from "react"; interface PopoverContentProps extends ChakraPopover.ContentProps { - portalled?: boolean - portalRef?: React.RefObject + portalled?: boolean; + portalRef?: React.RefObject; } export const PopoverContent = React.forwardRef< HTMLDivElement, PopoverContentProps >(function PopoverContent(props, ref) { - const { portalled = true, portalRef, ...rest } = props + const { portalled = true, portalRef, ...rest } = props; return ( - ) -}) + ); +}); export const PopoverArrow = React.forwardRef< HTMLDivElement, @@ -29,8 +29,8 @@ export const PopoverArrow = React.forwardRef< - ) -}) + ); +}); export const PopoverCloseTrigger = React.forwardRef< HTMLButtonElement, @@ -47,13 +47,13 @@ export const PopoverCloseTrigger = React.forwardRef< > - ) -}) + ); +}); -export const PopoverTitle = ChakraPopover.Title -export const PopoverDescription = ChakraPopover.Description -export const PopoverFooter = ChakraPopover.Footer -export const PopoverHeader = ChakraPopover.Header -export const PopoverRoot = ChakraPopover.Root -export const PopoverBody = ChakraPopover.Body -export const PopoverTrigger = ChakraPopover.Trigger +export const PopoverTitle = ChakraPopover.Title; +export const PopoverDescription = ChakraPopover.Description; +export const PopoverFooter = ChakraPopover.Footer; +export const PopoverHeader = ChakraPopover.Header; +export const PopoverRoot = ChakraPopover.Root; +export const PopoverBody = ChakraPopover.Body; +export const PopoverTrigger = ChakraPopover.Trigger; diff --git a/pkgs/frontend/app/components/ui/provider.tsx b/pkgs/frontend/app/components/ui/provider.tsx index fd0331b..c1f896c 100644 --- a/pkgs/frontend/app/components/ui/provider.tsx +++ b/pkgs/frontend/app/components/ui/provider.tsx @@ -1,15 +1,12 @@ -"use client" +"use client"; -import { ChakraProvider, defaultSystem } from "@chakra-ui/react" -import { - ColorModeProvider, - type ColorModeProviderProps, -} from "./color-mode" +import { ChakraProvider, defaultSystem } from "@chakra-ui/react"; +import { ColorModeProvider, type ColorModeProviderProps } from "./color-mode"; export function Provider(props: ColorModeProviderProps) { return ( - ) + ); } diff --git a/pkgs/frontend/app/components/ui/radio.tsx b/pkgs/frontend/app/components/ui/radio.tsx index b3919d0..c081aef 100644 --- a/pkgs/frontend/app/components/ui/radio.tsx +++ b/pkgs/frontend/app/components/ui/radio.tsx @@ -1,14 +1,14 @@ -import { RadioGroup as ChakraRadioGroup } from "@chakra-ui/react" -import * as React from "react" +import { RadioGroup as ChakraRadioGroup } from "@chakra-ui/react"; +import * as React from "react"; export interface RadioProps extends ChakraRadioGroup.ItemProps { - rootRef?: React.Ref - inputProps?: React.InputHTMLAttributes + rootRef?: React.Ref; + inputProps?: React.InputHTMLAttributes; } export const Radio = React.forwardRef( function Radio(props, ref) { - const { children, inputProps, rootRef, ...rest } = props + const { children, inputProps, rootRef, ...rest } = props; return ( @@ -17,8 +17,8 @@ export const Radio = React.forwardRef( {children} )} - ) - }, -) + ); + } +); -export const RadioGroup = ChakraRadioGroup.Root +export const RadioGroup = ChakraRadioGroup.Root; diff --git a/pkgs/frontend/app/components/ui/slider.tsx b/pkgs/frontend/app/components/ui/slider.tsx index 37a6dc9..e1644e3 100644 --- a/pkgs/frontend/app/components/ui/slider.tsx +++ b/pkgs/frontend/app/components/ui/slider.tsx @@ -1,23 +1,23 @@ -import { Slider as ChakraSlider, HStack } from "@chakra-ui/react" -import * as React from "react" +import { Slider as ChakraSlider, HStack } from "@chakra-ui/react"; +import * as React from "react"; export interface SliderProps extends ChakraSlider.RootProps { - marks?: Array - label?: React.ReactNode - showValue?: boolean + marks?: Array; + label?: React.ReactNode; + showValue?: boolean; } export const Slider = React.forwardRef( function Slider(props, ref) { - const { marks: marksProp, label, showValue, ...rest } = props - const value = props.defaultValue ?? props.value + const { marks: marksProp, label, showValue, ...rest } = props; + const value = props.defaultValue ?? props.value; const marks = marksProp?.map((mark) => { - if (typeof mark === "number") return { value: mark, label: undefined } - return mark - }) + if (typeof mark === "number") return { value: mark, label: undefined }; + return mark; + }); - const hasMarkLabel = !!marks?.some((mark) => mark.label) + const hasMarkLabel = !!marks?.some((mark) => mark.label); return ( @@ -43,18 +43,18 @@ export const Slider = React.forwardRef( {marks?.length && ( {marks.map((mark, index) => { - const value = typeof mark === "number" ? mark : mark.value - const label = typeof mark === "number" ? undefined : mark.label + const value = typeof mark === "number" ? mark : mark.value; + const label = typeof mark === "number" ? undefined : mark.label; return ( {label} - ) + ); })} )} - ) - }, -) + ); + } +); diff --git a/pkgs/frontend/app/components/ui/tooltip.tsx b/pkgs/frontend/app/components/ui/tooltip.tsx index 644c37c..72c0464 100644 --- a/pkgs/frontend/app/components/ui/tooltip.tsx +++ b/pkgs/frontend/app/components/ui/tooltip.tsx @@ -1,13 +1,13 @@ -import { Tooltip as ChakraTooltip, Portal } from "@chakra-ui/react" -import * as React from "react" +import { Tooltip as ChakraTooltip, Portal } from "@chakra-ui/react"; +import * as React from "react"; export interface TooltipProps extends ChakraTooltip.RootProps { - showArrow?: boolean - portalled?: boolean - portalRef?: React.RefObject - content: React.ReactNode - contentProps?: ChakraTooltip.ContentProps - disabled?: boolean + showArrow?: boolean; + portalled?: boolean; + portalRef?: React.RefObject; + content: React.ReactNode; + contentProps?: ChakraTooltip.ContentProps; + disabled?: boolean; } export const Tooltip = React.forwardRef( @@ -21,9 +21,9 @@ export const Tooltip = React.forwardRef( contentProps, portalRef, ...rest - } = props + } = props; - if (disabled) return children + if (disabled) return children; return ( @@ -41,6 +41,6 @@ export const Tooltip = React.forwardRef( - ) - }, -) + ); + } +); diff --git a/pkgs/frontend/app/emotion/emotion-cache.ts b/pkgs/frontend/app/emotion/emotion-cache.ts index 93fc48c..fe1e573 100644 --- a/pkgs/frontend/app/emotion/emotion-cache.ts +++ b/pkgs/frontend/app/emotion/emotion-cache.ts @@ -1,5 +1,5 @@ -import createCache from "@emotion/cache" +import createCache from "@emotion/cache"; export function createEmotionCache() { - return createCache({ key: "css" }) + return createCache({ key: "css" }); } diff --git a/pkgs/frontend/app/emotion/emotion-client.tsx b/pkgs/frontend/app/emotion/emotion-client.tsx index e7dc815..295d1c3 100644 --- a/pkgs/frontend/app/emotion/emotion-client.tsx +++ b/pkgs/frontend/app/emotion/emotion-client.tsx @@ -1,4 +1,4 @@ -import { CacheProvider, EmotionCache } from "@emotion/react" +import { CacheProvider, EmotionCache } from "@emotion/react"; import { createContext, useContext, @@ -6,66 +6,66 @@ import { useMemo, useRef, useState, -} from "react" -import { createEmotionCache } from "./emotion-cache" +} from "react"; +import { createEmotionCache } from "./emotion-cache"; export interface ClientStyleContextData { - reset: () => void + reset: () => void; } export const ClientStyleContext = createContext({ reset: () => {}, -}) +}); export const useClientStyleContext = () => { - return useContext(ClientStyleContext) -} + return useContext(ClientStyleContext); +}; interface ClientCacheProviderProps { - children: React.ReactNode + children: React.ReactNode; } export function ClientCacheProvider({ children }: ClientCacheProviderProps) { - const [cache, setCache] = useState(createEmotionCache()) + const [cache, setCache] = useState(createEmotionCache()); const context = useMemo( () => ({ reset() { - setCache(createEmotionCache()) + setCache(createEmotionCache()); }, }), - [], - ) + [] + ); return ( {children} - ) + ); } const useSafeLayoutEffect = - typeof window === "undefined" ? () => {} : useLayoutEffect + typeof window === "undefined" ? () => {} : useLayoutEffect; export function useInjectStyles(cache: EmotionCache) { - const styles = useClientStyleContext() - const injectRef = useRef(true) + const styles = useClientStyleContext(); + const injectRef = useRef(true); useSafeLayoutEffect(() => { - if (!injectRef.current) return + if (!injectRef.current) return; - cache.sheet.container = document.head + cache.sheet.container = document.head; - const tags = cache.sheet.tags - cache.sheet.flush() + const tags = cache.sheet.tags; + cache.sheet.flush(); tags.forEach((tag) => { const sheet = cache.sheet as unknown as { - _insertTag: (tag: HTMLStyleElement) => void - } - sheet._insertTag(tag) - }) + _insertTag: (tag: HTMLStyleElement) => void; + }; + sheet._insertTag(tag); + }); - styles.reset() - injectRef.current = false - }, []) + styles.reset(); + injectRef.current = false; + }, []); } diff --git a/pkgs/frontend/app/emotion/emotion-server.tsx b/pkgs/frontend/app/emotion/emotion-server.tsx index 596ea54..6e768c7 100644 --- a/pkgs/frontend/app/emotion/emotion-server.tsx +++ b/pkgs/frontend/app/emotion/emotion-server.tsx @@ -1,39 +1,39 @@ -import { CacheProvider } from "@emotion/react" -import createEmotionServer from "@emotion/server/create-instance" -import { renderToString } from "react-dom/server" -import { ChakraProvider } from "../components/chakra-provider" -import { createEmotionCache } from "./emotion-cache" +import { CacheProvider } from "@emotion/react"; +import createEmotionServer from "@emotion/server/create-instance"; +import { renderToString } from "react-dom/server"; +import { ChakraProvider } from "../components/chakra-provider"; +import { createEmotionCache } from "./emotion-cache"; export function createEmotion() { - const cache = createEmotionCache() - const server = createEmotionServer(cache) + const cache = createEmotionCache(); + const server = createEmotionServer(cache); function injectStyles(html: string) { - const { styles } = server.extractCriticalToChunks(html) + const { styles } = server.extractCriticalToChunks(html); - let stylesHTML = "" + let stylesHTML = ""; styles.forEach(({ key, ids, css }) => { - const emotionKey = `${key} ${ids.join(" ")}` - const newStyleTag = `` - stylesHTML = `${stylesHTML}${newStyleTag}` - }) + const emotionKey = `${key} ${ids.join(" ")}`; + const newStyleTag = ``; + stylesHTML = `${stylesHTML}${newStyleTag}`; + }); // add the emotion style tags after the insertion point meta tag const markup = html.replace( //, - `${stylesHTML}`, - ) + `${stylesHTML}` + ); - return markup + return markup; } function _renderToString(element: React.ReactNode) { return renderToString( {element} - , - ) + + ); } return { @@ -41,5 +41,5 @@ export function createEmotion() { cache, injectStyles, renderToString: _renderToString, - } + }; } diff --git a/pkgs/frontend/app/entry.client.tsx b/pkgs/frontend/app/entry.client.tsx index b476642..1a0662d 100644 --- a/pkgs/frontend/app/entry.client.tsx +++ b/pkgs/frontend/app/entry.client.tsx @@ -1,8 +1,8 @@ -import { RemixBrowser } from "@remix-run/react" -import { StrictMode, startTransition } from "react" -import { hydrateRoot } from "react-dom/client" -import { ChakraProvider } from "./components/chakra-provider" -import { ClientCacheProvider } from "./emotion/emotion-client" +import { RemixBrowser } from "@remix-run/react"; +import { StrictMode, startTransition } from "react"; +import { hydrateRoot } from "react-dom/client"; +import { ChakraProvider } from "./components/chakra-provider"; +import { ClientCacheProvider } from "./emotion/emotion-client"; const hydrate = () => { startTransition(() => { @@ -14,15 +14,15 @@ const hydrate = () => { - , - ) - }) -} + + ); + }); +}; if (typeof requestIdleCallback === "function") { - requestIdleCallback(hydrate) + requestIdleCallback(hydrate); } else { // Safari doesn't support requestIdleCallback // https://caniuse.com/requestidlecallback - setTimeout(hydrate, 1) + setTimeout(hydrate, 1); } diff --git a/pkgs/frontend/app/entry.server.tsx b/pkgs/frontend/app/entry.server.tsx index c3cb911..e7f534f 100644 --- a/pkgs/frontend/app/entry.server.tsx +++ b/pkgs/frontend/app/entry.server.tsx @@ -1,28 +1,28 @@ -import type { EntryContext } from "@remix-run/node" -import { RemixServer } from "@remix-run/react" -import { createEmotion } from "./emotion/emotion-server" +import type { EntryContext } from "@remix-run/node"; +import { RemixServer } from "@remix-run/react"; +import { createEmotion } from "./emotion/emotion-server"; const handleRequest = ( request: Request, responseStatusCode: number, responseHeaders: Headers, - remixContext: EntryContext, + remixContext: EntryContext ) => new Promise((resolve) => { - const { renderToString, injectStyles } = createEmotion() + const { renderToString, injectStyles } = createEmotion(); const html = renderToString( - , - ) + + ); - responseHeaders.set("Content-Type", "text/html") + responseHeaders.set("Content-Type", "text/html"); const response = new Response(`${injectStyles(html)}`, { status: responseStatusCode, headers: responseHeaders, - }) + }); - resolve(response) - }) + resolve(response); + }); -export default handleRequest +export default handleRequest; diff --git a/pkgs/frontend/app/root.tsx b/pkgs/frontend/app/root.tsx index adb300f..2893493 100644 --- a/pkgs/frontend/app/root.tsx +++ b/pkgs/frontend/app/root.tsx @@ -1,21 +1,21 @@ -import { withEmotionCache } from "@emotion/react" +import { withEmotionCache } from "@emotion/react"; import { Links, Meta, Outlet, Scripts, ScrollRestoration, -} from "@remix-run/react" -import { ThemeProvider } from "next-themes" -import { ChakraProvider } from "./components/chakra-provider" -import { useInjectStyles } from "./emotion/emotion-client" +} from "@remix-run/react"; +import { ThemeProvider } from "next-themes"; +import { ChakraProvider } from "./components/chakra-provider"; +import { useInjectStyles } from "./emotion/emotion-client"; interface LayoutProps extends React.PropsWithChildren {} export const Layout = withEmotionCache((props: LayoutProps, cache) => { - const { children } = props + const { children } = props; - useInjectStyles(cache) + useInjectStyles(cache); return ( @@ -35,8 +35,8 @@ export const Layout = withEmotionCache((props: LayoutProps, cache) => { - ) -}) + ); +}); export default function App() { return ( @@ -45,5 +45,5 @@ export default function App() { - ) + ); } diff --git a/pkgs/frontend/app/routes/_index.tsx b/pkgs/frontend/app/routes/_index.tsx index b1c370e..f6b855e 100644 --- a/pkgs/frontend/app/routes/_index.tsx +++ b/pkgs/frontend/app/routes/_index.tsx @@ -1,109 +1,109 @@ import { - Box, - Button, - Checkbox, - ClientOnly, - HStack, - Heading, - Progress, - RadioGroup, - Skeleton, - VStack, + Box, + Button, + Checkbox, + ClientOnly, + HStack, + Heading, + Progress, + RadioGroup, + Skeleton, + VStack, } from "@chakra-ui/react"; import { - DialogActionTrigger, - DialogBody, - DialogCloseTrigger, - DialogFooter, - DialogHeader, - DialogTitle, + DialogActionTrigger, + DialogBody, + DialogCloseTrigger, + DialogFooter, + DialogHeader, + DialogTitle, } from "~/components/ui/dialog"; import type { MetaFunction } from "@remix-run/node"; import { ColorModeToggle } from "../components/color-mode-toggle"; import { CommonDialog } from "~/components/CommonDialog"; export const meta: MetaFunction = () => { - return [ - { title: "New Remix App" }, - { name: "description", content: "Welcome to Remix!" }, - ]; + return [ + { title: "New Remix App" }, + { name: "description", content: "Welcome to Remix!" }, + ]; }; const dialogTriggerReactNode = ; export default function Index() { - return ( - - - chakra logo - - Welcome to Chakra UI v3 + Remix - + return ( + + + chakra logo + + Welcome to Chakra UI v3 + Remix + - - - Dialog Title - - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. -

- - - - - - - - - + + + Dialog Title + + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+ + + + + + + + + - - - - - - - Checkbox - + + + + + + + Checkbox + - - - - - - - Radio - + + + + + + + Radio + - - - - - - Radio - - - + + + + + + Radio + + + - - - - - + + + + + - - - - - + + + + + - - }> - - - - - ); + + }> + + + + + ); } diff --git a/pkgs/frontend/package.json b/pkgs/frontend/package.json index 95ea5d5..c6735228 100644 --- a/pkgs/frontend/package.json +++ b/pkgs/frontend/package.json @@ -9,7 +9,9 @@ "dev": "remix vite:dev", "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .", "start": "remix-serve ./build/server/index.js", - "typecheck": "tsc" + "typecheck": "tsc", + "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json}\"", + "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json}\"" }, "dependencies": { "@chakra-ui/react": "^3.2.0", @@ -40,6 +42,7 @@ "eslint-plugin-react": "^7.34.3", "eslint-plugin-react-hooks": "^4.6.2", "postcss": "^8.4.38", + "prettier": "^3.3.3", "typescript": "^5.6.2", "vite": "^5.3.6", "vite-tsconfig-paths": "^4.3.2" diff --git a/pkgs/frontend/vite.config.ts b/pkgs/frontend/vite.config.ts index 2713971..fc1db80 100644 --- a/pkgs/frontend/vite.config.ts +++ b/pkgs/frontend/vite.config.ts @@ -3,15 +3,15 @@ import { defineConfig } from "vite"; import tsconfigPaths from "vite-tsconfig-paths"; export default defineConfig({ - plugins: [ - remix({ - future: { - v3_fetcherPersist: true, - v3_relativeSplatPath: true, - v3_throwAbortReason: true, - }, - ssr: false, - }), - tsconfigPaths(), - ], + plugins: [ + remix({ + future: { + v3_fetcherPersist: true, + v3_relativeSplatPath: true, + v3_throwAbortReason: true, + }, + ssr: false, + }), + tsconfigPaths(), + ], }); diff --git a/yarn.lock b/yarn.lock index b6e802b..fa04add 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13678,6 +13678,11 @@ prettier@^2.7.1, prettier@^2.8.3: resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da" integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q== +prettier@^3.3.3: + version "3.3.3" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.3.tgz#30c54fe0be0d8d12e6ae61dbb10109ea00d53105" + integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew== + pretty-error@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-4.0.0.tgz#90a703f46dd7234adb46d0f84823e9d1cb8f10d6"