chore(refactor): extract notification wrapper

- organizing imports with star and removing `default`s

Author: kuroji-fusky

apps/web/src/components/Avatar.tsx

@@ -1,16 +1,13 @@
 import Image from "next/image"
 
-export default function Avatar({
-  className,
-  username,
-  src,
-  size = 36
-}: {
+interface AvatarProps {
   className?: string
   username?: string
   src: string
   size?: number
-}) {
+}
+
+export function Avatar({ className, username, src, size = 36 }: AvatarProps) {
   return (
     <div
       data-avatar=""

apps/web/src/components/Containers/ItemIterator.tsx

@@ -14,15 +14,17 @@ export interface ItemIteratorType {
   matchStartingRoute?: boolean
 }
 
-export default function ItemIterator({
-  as: Component = "div",
-  items,
-  baseUrl = "/"
-}: {
+interface ItemIteratorProps {
   as?: keyof HTMLElementTagNameMap | React.ComponentType
   items: ItemIteratorType[]
   baseUrl?: string
-}) {
+}
+
+export function ItemIterator({
+  as: Component = "div",
+  items,
+  baseUrl = "/"
+}: ItemIteratorProps) {
   const path = usePathname()
 
   return (

apps/web/src/components/Containers/TransitionWrapper.tsx

@@ -1,6 +1,6 @@
 import { Transition } from "@headlessui/react"
 
-export default function TransitionWrapper({
+export function TransitionWrapper({
   children
 }: {
   children?: React.ReactNode
@@ -13,6 +13,7 @@ export default function TransitionWrapper({
       leave="transition duration-[200ms] ease"
       leaveTo="transform -translate-y-1 opacity-0"
       leaveFrom="transform translate-y-0 opacity-100"
+      // @ts-expect-error: headlessui/react doesn't support this prop
       className="translate-x-0"
     >
       {children}

apps/web/src/components/Containers/index.tsx

@@ -1,3 +1,5 @@
 export * from "./MarginClamp"
 export * from "./GridResponsive"
 export * from "./Field"
+export * from "./ItemIterator"
+export * from "./TransitionWrapper"

apps/web/src/components/Folders/FolderItem.tsx

@@ -13,7 +13,7 @@ import {
   LuFolderPlus as FolderPlus
 } from "react-icons/lu"
 
-export default function FolderItem({
+export function FolderItem({
   children,
   name,
   open = false,
@@ -36,8 +36,8 @@ export default function FolderItem({
   const [isExpand, setIsExpand] = useState(expanded)
   const [expandedHeight, setExpandedHeight] = useState(0)
 
-  const collapsibleRef = useRef<React.ElementRef<"div">>(null)
-  const toggleButtonRef = useRef<React.ElementRef<"button">>(null)
+  const collapsibleRef = useRef<React.ComponentRef<"div">>(null)
+  const toggleButtonRef = useRef<React.ComponentRef<"button">>(null)
 
   const DynamicFolderIcon = children
     ? !isExpand

apps/web/src/components/Folders/FolderShelf.tsx

@@ -7,10 +7,10 @@ import {
   LuPanelLeftClose as PanelLeftClose,
   LuPanelLeftOpen as PanelLeftOpen
 } from "react-icons/lu"
-import FolderItem from "./FolderItem"
+import { FolderItem } from "./FolderItem"
 import { useFolderViewContext } from "./FolderView"
 
-export default function FolderShelf({
+export function FolderShelf({
   children,
   defaultName
 }: {

apps/web/src/components/Folders/FolderView.tsx

@@ -5,25 +5,21 @@ import { createContext, useContext, useState } from "react"
 const FolderViewContext = createContext<{
   folderWidth: number
   setFolderWidth: React.Dispatch<React.SetStateAction<number>>
-}>({
-  folderWidth: 270,
-  // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
-  setFolderWidth: () => {}
-})
+} | null>(null)
 
 export function useFolderViewContext() {
   const ctx = useContext(FolderViewContext)
 
   if (!ctx) {
     throw new Error(
-      "The useFolderViewContext must be used within the FolderViewProvider, you dumbass"
+      "The useFolderViewContext must be used within the FolderViewProvider"
     )
   }
 
   return ctx
 }
 
-export default function FolderView({
+export function FolderView({
   children
 }: {
   children?: React.ReactNode

apps/web/src/components/Folders/index.tsx

@@ -1,8 +1,8 @@
 "use client"
 
-import FolderItem from "./FolderItem"
-import FolderShelf from "./FolderShelf"
-import FolderView from "./FolderView"
+import { FolderItem } from "./FolderItem"
+import { FolderShelf } from "./FolderShelf"
+import { FolderView } from "./FolderView"
 
 const FolderContents = ({ children }: { children: React.ReactNode }) => (
   <div className="w-full">{children}</div>

apps/web/src/components/Forms/Checkbox.tsx

@@ -1,7 +1,7 @@
-import cn from "@/utils/cn"
+import { cn } from "@/utils/cn"
 import { kebabCase } from "lodash"
 
-export default function Checkbox({
+export function Checkbox({
   inputName,
   label,
   checked,

apps/web/src/components/layouts/Note.tsx apps/web/src/components/Note.tsxapps/web/src/components/layouts/Note.tsx renamed to apps/web/src/components/Note.tsx

@@ -1,4 +1,4 @@
-import type { Variants as NoteVariants, PartialRecord } from "@/types/utils"
+import type { PartialRecord } from "@/types/utils"
 import { cn } from "@mav/shared/utils"
 import type { IconType } from "react-icons"
 import {
@@ -8,22 +8,20 @@ import {
   LuXCircle
 } from "react-icons/lu"
 
-type NoteStatus = Extract<
-  NoteVariants,
-  "success" | "warning" | "error" | "info"
->
+type NoteStatus = "success" | "warning" | "error" | "info"
 
-export default function Note({
+interface NoteProps {
+  type: NoteStatus
+  heading?: string
+  inline?: true
+}
+
+export function Note({
   children,
   type,
   heading,
   inline
-}: {
-  children?: React.ReactNode
-  type: NoteStatus
-  heading?: string
-  inline?: boolean
-}) {
+}: React.PropsWithChildren<NoteProps>) {
   if (inline && heading) {
     throw new Error(
       "Can't use both `inline` and `heading` at the same time. Pass the message inside the element instead, otherwise, remove the `inline` prop."