format: re-run prettier on codebase

client/app/Sidebar.tsx

@@ -122,7 +122,7 @@ export const Sidebar: FCC = ({ children }) => {
         animate(x, 0);
       }
     },
-    [x]
+    [x],
   );
 
   useEffect(() => {
@@ -148,7 +148,7 @@ export const Sidebar: FCC = ({ children }) => {
       // Auto-focus current active link
       if (sidebarRef.current !== null) {
         let currentLink: HTMLAnchorElement | HTMLButtonElement | null = sidebarRef.current.querySelector(
-          `a[href="${document.location.pathname}"]`
+          `a[href="${document.location.pathname}"]`,
         );
         if (!currentLink) {
           currentLink = buttonRef.current;

client/components/forms/Button.tsx

@@ -431,7 +431,7 @@ function getNormalizedEventCoords(e: React.PointerEvent, frame: DOMRect): Coordi
 function getTranslationCoordinates(
   e: React.PointerEvent | React.KeyboardEvent,
   frame: DOMRect,
-  initialSize: number
+  initialSize: number,
 ): Translation {
   const halfSize = initialSize / 2;
   const start: Coordinates =
@@ -477,7 +477,7 @@ type LinkStyledProps = React.ComponentProps<typeof LinkStyled>;
 function initTransition(
   e: React.PointerEvent | React.KeyboardEvent,
   element: HTMLElement,
-  rounding?: ButtonStyledProps['rounding']
+  rounding?: ButtonStyledProps['rounding'],
 ) {
   const isUnbounded = rounding === 'icon';
   const frame = element.getBoundingClientRect();
@@ -507,7 +507,7 @@ function useMaterialButton(
   ref: React.RefObject<HTMLButtonElement | HTMLAnchorElement>,
   rippleRef: React.RefObject<HTMLSpanElement>,
   rounding: ButtonStyledProps['rounding'],
-  props: any
+  props: any,
 ) {
   // Use timeout to allow for the ripple animation to complete even when we release the button
   const animationTimeout = useRef(0);
@@ -645,7 +645,7 @@ function useMaterialButton(
         }
       },
     }),
-    [ref, onPointerDown, onPointerUp, onKeyDown, onKeyUp, onClick, rounding]
+    [ref, onPointerDown, onPointerUp, onKeyDown, onKeyUp, onClick, rounding],
   );
 
   return [eventHandlers, otherProps];
@@ -654,7 +654,7 @@ function useMaterialButton(
 export const Button = forwardRef<HTMLButtonElement, ButtonStyledProps>(
   (
     { variant = 'contained', tone = 'neutral', size = 'base', rounding = 'normal', children, ...rest },
-    forwardedRef
+    forwardedRef,
   ) => {
     const ref = useShareForwardedRef<HTMLButtonElement>(forwardedRef);
     const rippleRef = useRef<HTMLSpanElement>(null);
@@ -675,13 +675,13 @@ export const Button = forwardRef<HTMLButtonElement, ButtonStyledProps>(
         <ButtonLabel>{children}</ButtonLabel>
       </ButtonStyled>
     );
-  }
+  },
 );
 
 export const AnchorButton = forwardRef<HTMLAnchorElement, AnchorStyledProps>(
   (
     { variant = 'contained', tone = 'neutral', size = 'base', rounding = 'normal', children, ...rest },
-    forwardedRef
+    forwardedRef,
   ) => {
     const ref = useShareForwardedRef<HTMLAnchorElement>(forwardedRef);
     const rippleRef = useRef<HTMLSpanElement>(null);
@@ -699,13 +699,13 @@ export const AnchorButton = forwardRef<HTMLAnchorElement, AnchorStyledProps>(
         <ButtonLabel>{children}</ButtonLabel>
       </AnchorStyled>
     );
-  }
+  },
 );
 
 export const LinkButton = forwardRef<HTMLAnchorElement, LinkStyledProps>(
   (
     { variant = 'contained', tone = 'neutral', size = 'base', rounding = 'normal', children, ...rest },
-    forwardedRef
+    forwardedRef,
   ) => {
     const ref = useShareForwardedRef<HTMLAnchorElement>(forwardedRef);
     const rippleRef = useRef<HTMLSpanElement>(null);
@@ -723,5 +723,5 @@ export const LinkButton = forwardRef<HTMLAnchorElement, LinkStyledProps>(
         <ButtonLabel>{children}</ButtonLabel>
       </LinkStyled>
     );
-  }
+  },
 );

client/components/forms/FilePicker.tsx

@@ -51,14 +51,14 @@ export const FilePicker: React.FC<Props> = ({ disabled, placeholder = 'Select a
       setFiles(
         e.target.files && e.target.files.length
           ? [...Array.from(e.target.files)] // Firefox returns the same array instance each time for some reason
-          : null
+          : null,
       );
 
       if (onChange != null) {
         onChange(e);
       }
     },
-    [onChange]
+    [onChange],
   );
 
   const handleButtonClick = useCallback(() => {

client/components/forms/Selection.tsx

@@ -8,10 +8,10 @@ const UIRadioChecked = 'ui/radio/checked';
 const UISwitch = 'ui/switch';
 
 register(
-  `<symbol id="${UICheckboxChecked}" viewBox="0 0 24 24"><path fill="none" stroke-width="2" stroke="currentColor" d="M19.7 6.3c-.4-.4-1-.4-1.4 0L9 15.6l-3.3-3.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l4 4c.2.2.4.3.7.3s.5-.1.7-.3l10-10c.4-.4.4-1 0-1.4z"></path></svg>`
+  `<symbol id="${UICheckboxChecked}" viewBox="0 0 24 24"><path fill="none" stroke-width="2" stroke="currentColor" d="M19.7 6.3c-.4-.4-1-.4-1.4 0L9 15.6l-3.3-3.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l4 4c.2.2.4.3.7.3s.5-.1.7-.3l10-10c.4-.4.4-1 0-1.4z"></path></svg>`,
 );
 register(
-  `<symbol id="${UICheckboxIndeterminate}" viewBox="0 0 24 24"><path fill="none" stroke-width="2" stroke="currentColor" d="M18 11H6c-.6 0-1 .4-1 1s.4 1 1 1h12c.6 0 1-.4 1-1s-.4-1-1-1z"></path></symbol>`
+  `<symbol id="${UICheckboxIndeterminate}" viewBox="0 0 24 24"><path fill="none" stroke-width="2" stroke="currentColor" d="M18 11H6c-.6 0-1 .4-1 1s.4 1 1 1h12c.6 0 1-.4 1-1s-.4-1-1-1z"></path></symbol>`,
 );
 register(`<symbol id="${UIRadioChecked}" viewBox="-4 -4 8 8"><circle r="2" fill="currentColor"/></symbol>`);
 register(`<symbol id="${UISwitch}" viewBox="-4 -4 8 8"><circle r="3" fill="currentColor"/></symbol>`);

client/components/router/client.tsx

@@ -40,7 +40,7 @@ export function BrowserRouter({ basename, children, window }: BrowserRouterProps
           setState(update);
         });
       }),
-    [history, startTransition]
+    [history, startTransition],
   );
 
   return (
@@ -70,7 +70,7 @@ export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorEle
  */
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function LinkWithRef(
   { onClick, replace = false, state, target, to, ...rest },
-  ref
+  ref,
 ) {
   let href = useHref(to);
   let internalOnClick = useLinkClickHandler(to, { replace, state, target });
@@ -108,7 +108,7 @@ export const NavLink = forwardRef<HTMLAnchorElement, NavLinkProps>(function NavL
     to,
     ...rest
   },
-  ref
+  ref,
 ) {
   let location = useLocation();
   let path = useResolvedPath(to);
@@ -166,7 +166,7 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
     target?: React.HTMLAttributeAnchorTarget;
     replace?: boolean;
     state?: any;
-  } = {}
+  } = {},
 ): (event: React.MouseEvent<E, MouseEvent>) => void {
   let navigate = useNavigate();
   let location = useLocation();
@@ -188,7 +188,7 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
         navigate(to, { replace, state });
       }
     },
-    [location, navigate, path, replaceProp, state, target, to]
+    [location, navigate, path, replaceProp, state, target, to],
   );
 }
 
@@ -219,7 +219,7 @@ export function useSearchParams(defaultInit?: URLSearchParamsInit) {
     (nextInit: URLSearchParamsInit, navigateOptions?: { replace?: boolean; state?: any }) => {
       navigate('?' + createSearchParams(nextInit), navigateOptions);
     },
-    [navigate]
+    [navigate],
   );
 
   return [searchParams, setSearchParams] as const;
@@ -257,6 +257,6 @@ export function createSearchParams(init: URLSearchParamsInit = ''): URLSearchPar
       : Object.keys(init).reduce((memo, key) => {
           let value = init[key];
           return memo.concat(Array.isArray(value) ? value.map((v) => [key, v]) : [[key, value]]);
-        }, [] as ParamKeyValuePair[])
+        }, [] as ParamKeyValuePair[]),
   );
 }

client/components/router/index.tsx

@@ -147,7 +147,7 @@ export function Router({
   let basename = normalizePathname(basenameProp);
   let navigationContext = useMemo(
     () => ({ basename, navigator, static: staticProp, pending }),
-    [basename, navigator, staticProp, pending]
+    [basename, navigator, staticProp, pending],
   );
 
   if (typeof locationProp === 'string') {
@@ -321,7 +321,7 @@ export function useNavigate(): NavigateFunction {
 
       (!!options.replace ? navigator.replace : navigator.push)(path, options.state);
     },
-    [basename, navigator, routePathnamesJson, locationPathname]
+    [basename, navigator, routePathnamesJson, locationPathname],
   );
 
   return navigate;
@@ -362,7 +362,7 @@ export function useResolvedPath(to: To): Path {
 
   return useMemo(
     () => resolveTo(to, JSON.parse(routePathnamesJson), locationPathname),
-    [to, routePathnamesJson, locationPathname]
+    [to, routePathnamesJson, locationPathname],
   );
 }
 
@@ -405,9 +405,9 @@ export function useRoutes(routes: RouteObject[], locationArg?: Partial<Location>
           pathname: joinPaths([parentPathnameBase, match.pathname]),
           pathnameBase:
             match.pathnameBase === '/' ? parentPathnameBase : joinPaths([parentPathnameBase, match.pathnameBase]),
-        })
+        }),
       ),
-    parentMatches
+    parentMatches,
   );
 }
 
@@ -515,7 +515,7 @@ export interface RouteMatch<ParamKey extends string = string> {
 export function matchRoutes(
   routes: RouteObject[],
   locationArg: Partial<Location> | string,
-  basename = '/'
+  basename = '/',
 ): RouteMatch[] | null {
   let location = typeof locationArg === 'string' ? parsePath(locationArg) : locationArg;
 
@@ -552,7 +552,7 @@ function flattenRoutes(
   routes: RouteObject[],
   branches: RouteBranch[] = [],
   parentsMeta: RouteMeta[] = [],
-  parentPath = ''
+  parentPath = '',
 ): RouteBranch[] {
   routes.forEach((route, index) => {
     let meta: RouteMeta = {
@@ -593,8 +593,8 @@ function rankRouteBranches(branches: RouteBranch[]): void {
       ? b.score - a.score // Higher score first
       : compareIndexes(
           a.routesMeta.map((meta) => meta.childrenIndex),
-          b.routesMeta.map((meta) => meta.childrenIndex)
-        )
+          b.routesMeta.map((meta) => meta.childrenIndex),
+        ),
   );
 }
 
@@ -622,7 +622,7 @@ function computeScore(path: string, index: boolean | undefined): number {
     .reduce(
       (score, segment) =>
         score + (paramRe.test(segment) ? dynamicSegmentValue : segment === '' ? emptySegmentValue : staticSegmentValue),
-      initialScore
+      initialScore,
     );
 }
 
@@ -644,7 +644,7 @@ function matchRouteBranch<ParamKey extends string = string>(
   branch: RouteBranch,
   // TODO: attach original route object inside routesMeta so we don't need this arg
   routesArg: RouteObject[],
-  pathname: string
+  pathname: string,
 ): RouteMatch<ParamKey>[] | null {
   let routes = routesArg;
   let { routesMeta } = branch;
@@ -691,28 +691,31 @@ export function renderMatches(matches: RouteMatch[] | null): React.ReactElement
 function _renderMatches(matches: RouteMatch[] | null, parentMatches: RouteMatch[] = []): React.ReactElement | null {
   if (matches == null) return null;
 
-  return matches.reduceRight((outlet, match, index) => {
-    // const children = match.route.element ? (
-    //   isValidElement(match.route.element) ? (
-    //     match.route.element
-    //   ) : (
-    //     //@ts-expect-error
-    //     createElement(match.route.element)
-    //   )
-    // ) : (
-    //   <Outlet />
-    // );
-
-    return (
-      <RouteContext.Provider
-        children={match.route.element !== undefined ? match.route.element : <Outlet />}
-        value={{
-          outlet,
-          matches: parentMatches.concat(matches.slice(0, index + 1)),
-        }}
-      />
-    );
-  }, null as React.ReactElement | null);
+  return matches.reduceRight(
+    (outlet, match, index) => {
+      // const children = match.route.element ? (
+      //   isValidElement(match.route.element) ? (
+      //     match.route.element
+      //   ) : (
+      //     //@ts-expect-error
+      //     createElement(match.route.element)
+      //   )
+      // ) : (
+      //   <Outlet />
+      // );
+
+      return (
+        <RouteContext.Provider
+          children={match.route.element !== undefined ? match.route.element : <Outlet />}
+          value={{
+            outlet,
+            matches: parentMatches.concat(matches.slice(0, index + 1)),
+          }}
+        />
+      );
+    },
+    null as React.ReactElement | null,
+  );
 }
 
 /**
@@ -770,7 +773,7 @@ type Mutable<T> = {
  */
 export function matchPath<ParamKey extends string = string>(
   pattern: PathPattern | string,
-  pathname: string
+  pathname: string,
 ): PathMatch<ParamKey> | null {
   if (typeof pattern === 'string') {
     pattern = { path: pattern, caseSensitive: false, end: true };

client/components/ui/NavProgress.tsx

@@ -189,9 +189,12 @@ export function NavProgress() {
         step = 0.5;
       }
 
-      trickleTimeoutId.current = setTimeout(() => {
-        dispatch({ type: 'progress', payload: progress >= PERC_MAX ? PERC_MAX : progress + step });
-      }, 200 + Math.floor(400 * Math.random()));
+      trickleTimeoutId.current = setTimeout(
+        () => {
+          dispatch({ type: 'progress', payload: progress >= PERC_MAX ? PERC_MAX : progress + step });
+        },
+        200 + Math.floor(400 * Math.random()),
+      );
     }
   }, [state.progress]);
 

client/hooks/useCSS.ts

@@ -12,7 +12,7 @@ export function useCSS(href: string) {
       () => {
         css.media = 'screen';
       },
-      { once: true }
+      { once: true },
     );
 
     document.head.append(css);

client/hooks/useComponentSize.ts

@@ -24,7 +24,7 @@ export function useComponentSize(ref: React.RefObject<HTMLElement>) {
         setComponentSize(getSize(ref.current));
       }
     },
-    [ref]
+    [ref],
   );
 
   useLayoutEffect(() => {

client/hooks/useContentVisibility.ts

@@ -39,7 +39,7 @@ function init() {
         }
       });
     },
-    { rootMargin: '50px 0px 100px 0px' }
+    { rootMargin: '50px 0px 100px 0px' },
   );
 
   resizeObservers = new ResizeObserver((entries: ResizeObserverEntry[]) => {

client/hooks/useEventCallback.ts

@@ -10,7 +10,7 @@ export function useEventCallback(fn: Function, dependencies: Array<any>) {
       ref.current = fn;
     },
     // eslint-disable-next-line
-    [fn, ...dependencies]
+    [fn, ...dependencies],
   );
 
   return useCallback(() => {