refactor: enforce consistency and code quality (#198)

* refactor: replace interfaces with types for props

* refactor: reorganize and rename context providers

* refactor: rename authStore to auth-store for consistent kebab-case naming

src/assets/custom/icon-dir.tsx

@@ -1,12 +1,12 @@
 import { type SVGProps } from 'react'
 import { cn } from '@/lib/utils'
-import { type Direction } from '@/context/direction-context'
+import { type Direction } from '@/context/direction-provider'
 
-interface Props extends SVGProps<SVGSVGElement> {
+type IconDirProps = SVGProps<SVGSVGElement> & {
   dir: Direction
 }
 
-export function IconDir({ dir, className, ...props }: Props) {
+export function IconDir({ dir, className, ...props }: IconDirProps) {
   return (
     <svg
       data-name={`icon-dir-${dir}`}

src/components/bulk-actions-toolbar.tsx

@@ -11,7 +11,7 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip'
 
-interface BulkActionsToolbarProps<TData> {
+type BulkActionsToolbarProps<TData> = {
   table: Table<TData>
   entityName: string
   children: React.ReactNode

src/components/command-menu.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { useNavigate } from '@tanstack/react-router'
 import { ArrowRight, ChevronRight, Laptop, Moon, Sun } from 'lucide-react'
-import { useSearch } from '@/context/search-context'
-import { useTheme } from '@/context/theme-context'
+import { useSearch } from '@/context/search-provider'
+import { useTheme } from '@/context/theme-provider'
 import {
   CommandDialog,
   CommandEmpty,

src/components/config-drawer.tsx

@@ -12,9 +12,9 @@ import { IconThemeDark } from '@/assets/custom/icon-theme-dark'
 import { IconThemeLight } from '@/assets/custom/icon-theme-light'
 import { IconThemeSystem } from '@/assets/custom/icon-theme-system'
 import { cn } from '@/lib/utils'
-import { useDirection } from '@/context/direction-context'
-import { type Collapsible, useLayout } from '@/context/layout-context'
-import { useTheme } from '@/context/theme-context'
+import { useDirection } from '@/context/direction-provider'
+import { type Collapsible, useLayout } from '@/context/layout-provider'
+import { useTheme } from '@/context/theme-provider'
 import { Button } from '@/components/ui/button'
 import {
   Sheet,

src/components/confirm-dialog.tsx

@@ -10,7 +10,7 @@ import {
 } from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
 
-interface ConfirmDialogProps {
+type ConfirmDialogProps = {
   open: boolean
   onOpenChange: (open: boolean) => void
   title: React.ReactNode

src/components/date-picker.tsx

@@ -8,7 +8,7 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover'
 
-interface Props {
+type DatePickerProps = {
   selected: Date | undefined
   onSelect: (date: Date | undefined) => void
   placeholder?: string
@@ -18,7 +18,7 @@ export function DatePicker({
   selected,
   onSelect,
   placeholder = 'Pick a date',
-}: Props) {
+}: DatePickerProps) {
   return (
     <Popover>
       <PopoverTrigger asChild>

src/components/layout/app-sidebar.tsx

@@ -1,4 +1,4 @@
-import { useLayout } from '@/context/layout-context'
+import { useLayout } from '@/context/layout-provider'
 import { Sidebar } from '@/components/ui/sidebar'
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {

src/components/layout/authenticated-layout.tsx

@@ -1,8 +1,8 @@
 import { Outlet } from '@tanstack/react-router'
 import { getCookie } from '@/lib/cookies'
 import { cn } from '@/lib/utils'
-import { LayoutProvider } from '@/context/layout-context'
-import { SearchProvider } from '@/context/search-context'
+import { LayoutProvider } from '@/context/layout-provider'
+import { SearchProvider } from '@/context/search-provider'
 import {
   SidebarContent,
   SidebarFooter,
@@ -18,11 +18,11 @@ import { NavGroup } from './nav-group'
 import { NavUser } from './nav-user'
 import { TeamSwitcher } from './team-switcher'
 
-interface Props {
+type AuthenticatedLayoutProps = {
   children?: React.ReactNode
 }
 
-export function AuthenticatedLayout({ children }: Props) {
+export function AuthenticatedLayout({ children }: AuthenticatedLayoutProps) {
   const defaultOpen = getCookie('sidebar_state') !== 'false'
   return (
     <SearchProvider>

src/components/layout/header.tsx

@@ -1,17 +1,17 @@
-import React from 'react'
+import { useEffect, useState } from 'react'
 import { cn } from '@/lib/utils'
 import { Separator } from '@/components/ui/separator'
 import { SidebarTrigger } from '@/components/ui/sidebar'
 
-interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
+type HeaderProps = React.HTMLAttributes<HTMLElement> & {
   fixed?: boolean
   ref?: React.Ref<HTMLElement>
 }
 
 export function Header({ className, fixed, children, ...props }: HeaderProps) {
-  const [offset, setOffset] = React.useState(0)
+  const [offset, setOffset] = useState(0)
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onScroll = () => {
       setOffset(document.body.scrollTop || document.documentElement.scrollTop)
     }

src/components/layout/main.tsx

@@ -1,7 +1,6 @@
-import React from 'react'
 import { cn } from '@/lib/utils'
 
-interface MainProps extends React.HTMLAttributes<HTMLElement> {
+type MainProps = React.HTMLAttributes<HTMLElement> & {
   fixed?: boolean
   fluid?: boolean
   ref?: React.Ref<HTMLElement>

src/components/layout/nav-group.tsx

@@ -30,10 +30,10 @@ import {
   type NavCollapsible,
   type NavItem,
   type NavLink,
-  type NavGroup,
+  type NavGroup as NavGroupProps,
 } from './types'
 
-export function NavGroup({ title, items }: NavGroup) {
+export function NavGroup({ title, items }: NavGroupProps) {
   const { state, isMobile } = useSidebar()
   const href = useLocation({ select: (location) => location.href })
   return (

src/components/layout/nav-user.tsx

@@ -24,15 +24,15 @@ import {
   useSidebar,
 } from '@/components/ui/sidebar'
 
-export function NavUser({
-  user,
-}: {
+type NavUserProps = {
   user: {
     name: string
     email: string
     avatar: string
   }
-}) {
+}
+
+export function NavUser({ user }: NavUserProps) {
   const { isMobile } = useSidebar()
 
   return (

src/components/layout/team-switcher.tsx

@@ -16,15 +16,15 @@ import {
   useSidebar,
 } from '@/components/ui/sidebar'
 
-export function TeamSwitcher({
-  teams,
-}: {
+type TeamSwitcherProps = {
   teams: {
     name: string
     logo: React.ElementType
     plan: string
   }[]
-}) {
+}
+
+export function TeamSwitcher({ teams }: TeamSwitcherProps) {
   const { isMobile } = useSidebar()
   const [activeTeam, setActiveTeam] = React.useState(teams[0])
 

src/components/layout/top-nav.tsx

@@ -9,7 +9,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 
-interface TopNavProps extends React.HTMLAttributes<HTMLElement> {
+type TopNavProps = React.HTMLAttributes<HTMLElement> & {
   links: {
     title: string
     href: string

src/components/layout/types.ts

@@ -1,18 +1,18 @@
 import { type LinkProps } from '@tanstack/react-router'
 
-interface User {
+type User = {
   name: string
   email: string
   avatar: string
 }
 
-interface Team {
+type Team = {
   name: string
   logo: React.ElementType
   plan: string
 }
 
-interface BaseNavItem {
+type BaseNavItem = {
   title: string
   badge?: string
   icon?: React.ElementType
@@ -30,12 +30,12 @@ type NavCollapsible = BaseNavItem & {
 
 type NavItem = NavCollapsible | NavLink
 
-interface NavGroup {
+type NavGroup = {
   title: string
   items: NavItem[]
 }
 
-interface SidebarData {
+type SidebarData = {
   user: User
   teams: Team[]
   navGroups: NavGroup[]

src/components/learn-more.tsx

@@ -8,7 +8,7 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover'
 
-interface Props extends React.ComponentProps<typeof Root> {
+type LearnMoreProps = React.ComponentProps<typeof Root> & {
   contentProps?: React.ComponentProps<typeof Content>
   triggerProps?: React.ComponentProps<typeof Trigger>
 }
@@ -18,7 +18,7 @@ export function LearnMore({
   contentProps,
   triggerProps,
   ...props
-}: Props) {
+}: LearnMoreProps) {
   return (
     <Popover {...props}>
       <PopoverTrigger

src/components/long-text.tsx

@@ -12,7 +12,7 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip'
 
-interface Props {
+type LongTextProps = {
   children: React.ReactNode
   className?: string
   contentClassName?: string
@@ -22,7 +22,7 @@ export function LongText({
   children,
   className = '',
   contentClassName = '',
-}: Props) {
+}: LongTextProps) {
   const ref = useRef<HTMLDivElement>(null)
   const [isOverflown, setIsOverflown] = useState(false)
 

src/components/search.tsx

@@ -1,15 +1,18 @@
 import { SearchIcon } from 'lucide-react'
 import { cn } from '@/lib/utils'
-import { useSearch } from '@/context/search-context'
+import { useSearch } from '@/context/search-provider'
 import { Button } from './ui/button'
 
-interface Props {
+type SearchProps = {
   className?: string
   type?: React.HTMLInputTypeAttribute
   placeholder?: string
 }
 
-export function Search({ className = '', placeholder = 'Search' }: Props) {
+export function Search({
+  className = '',
+  placeholder = 'Search',
+}: SearchProps) {
   const { setOpen } = useSearch()
   return (
     <Button

src/components/select-dropdown.tsx

@@ -9,7 +9,7 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 
-interface SelectDropdownProps {
+type SelectDropdownProps = {
   onValueChange?: (value: string) => void
   defaultValue: string | undefined
   placeholder?: string

src/components/theme-switch.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 import { Check, Moon, Sun } from 'lucide-react'
 import { cn } from '@/lib/utils'
-import { useTheme } from '@/context/theme-context'
+import { useTheme } from '@/context/theme-provider'
 import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,

src/components/ui/sonner.tsx

@@ -1,5 +1,5 @@
 import { Toaster as Sonner, ToasterProps } from 'sonner'
-import { useTheme } from '@/context/theme-context'
+import { useTheme } from '@/context/theme-provider'
 
 export function Toaster({ ...props }: ToasterProps) {
   const { theme = 'system' } = useTheme()

src/context/direction-context.tsx → src/context/direction-provider.tsx

@@ -8,19 +8,14 @@ const DEFAULT_DIRECTION = 'ltr'
 const DIRECTION_COOKIE_NAME = 'dir'
 const DIRECTION_COOKIE_MAX_AGE = 60 * 60 * 24 * 365 // 1 year
 
-interface DirectionContextType {
+type DirectionContextType = {
   defaultDir: Direction
   dir: Direction
   setDir: (dir: Direction) => void
   resetDir: () => void
 }
 
-const DirectionContext = createContext<DirectionContextType>({
-  defaultDir: DEFAULT_DIRECTION,
-  dir: DEFAULT_DIRECTION,
-  setDir: () => {},
-  resetDir: () => {},
-})
+const DirectionContext = createContext<DirectionContextType | null>(null)
 
 export function DirectionProvider({ children }: { children: React.ReactNode }) {
   const [dir, _setDir] = useState<Direction>(

src/context/font-context.tsx → src/context/font-provider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useState } from 'react'
+import { createContext, useContext, useEffect, useState } from 'react'
 import { fonts } from '@/config/fonts'
 import { getCookie, setCookie, removeCookie } from '@/lib/cookies'
 
@@ -7,17 +7,15 @@ type Font = (typeof fonts)[number]
 const FONT_COOKIE_NAME = 'font'
 const FONT_COOKIE_MAX_AGE = 60 * 60 * 24 * 365 // 1 year
 
-interface FontContextType {
+type FontContextType = {
   font: Font
   setFont: (font: Font) => void
   resetFont: () => void
 }
 
-const FontContext = createContext<FontContextType | undefined>(undefined)
+const FontContext = createContext<FontContextType | null>(null)
 
-export const FontProvider: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
+export function FontProvider({ children }: { children: React.ReactNode }) {
   const [font, _setFont] = useState<Font>(() => {
     const savedFont = getCookie(FONT_COOKIE_NAME)
     return fonts.includes(savedFont as Font) ? (savedFont as Font) : fonts[0]

src/context/layout-context.tsx → src/context/layout-provider.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect, useState } from 'react'
+import { createContext, useContext, useState } from 'react'
 import { getCookie, setCookie } from '@/lib/cookies'
 
 export type Collapsible = 'offcanvas' | 'icon' | 'none'
@@ -13,7 +13,7 @@ const LAYOUT_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 // 7 days
 const DEFAULT_VARIANT = 'inset'
 const DEFAULT_COLLAPSIBLE = 'icon'
 
-interface LayoutContextType {
+type LayoutContextType = {
   resetLayout: () => void
 
   defaultCollapsible: Collapsible
@@ -25,63 +25,53 @@ interface LayoutContextType {
   setVariant: (variant: Variant) => void
 }
 
-const LayoutContext = createContext<LayoutContextType>({
-  resetLayout: () => {},
-  defaultCollapsible: DEFAULT_COLLAPSIBLE,
-  collapsible: DEFAULT_COLLAPSIBLE,
-  setCollapsible: () => {},
+const LayoutContext = createContext<LayoutContextType | null>(null)
 
-  defaultVariant: DEFAULT_VARIANT,
-  variant: DEFAULT_VARIANT,
-  setVariant: () => {},
-})
-
-interface LayoutProviderProps {
+type LayoutProviderProps = {
   children: React.ReactNode
 }
 
 export function LayoutProvider({ children }: LayoutProviderProps) {
-  const [collapsible, setCollapsible] = useState<Collapsible>(
-    () =>
-      (getCookie(LAYOUT_COLLAPSIBLE_COOKIE_NAME) as Collapsible) ||
-      DEFAULT_COLLAPSIBLE
-  )
-  const [variant, setVariant] = useState<Variant>(
-    () => (getCookie(LAYOUT_VARIANT_COOKIE_NAME) as Variant) || DEFAULT_VARIANT
-  )
-
-  useEffect(() => {
+  const [collapsible, _setCollapsible] = useState<Collapsible>(() => {
+    const saved = getCookie(LAYOUT_COLLAPSIBLE_COOKIE_NAME)
+    return (saved as Collapsible) || DEFAULT_COLLAPSIBLE
+  })
+
+  const [variant, _setVariant] = useState<Variant>(() => {
+    const saved = getCookie(LAYOUT_VARIANT_COOKIE_NAME)
+    return (saved as Variant) || DEFAULT_VARIANT
+  })
+
+  const setCollapsible = (newCollapsible: Collapsible) => {
+    _setCollapsible(newCollapsible)
     setCookie(
       LAYOUT_COLLAPSIBLE_COOKIE_NAME,
-      collapsible,
+      newCollapsible,
       LAYOUT_COOKIE_MAX_AGE
     )
-  }, [collapsible])
+  }
 
-  useEffect(() => {
-    setCookie(LAYOUT_VARIANT_COOKIE_NAME, variant, LAYOUT_COOKIE_MAX_AGE)
-  }, [variant])
+  const setVariant = (newVariant: Variant) => {
+    _setVariant(newVariant)
+    setCookie(LAYOUT_VARIANT_COOKIE_NAME, newVariant, LAYOUT_COOKIE_MAX_AGE)
+  }
 
   const resetLayout = () => {
     setCollapsible(DEFAULT_COLLAPSIBLE)
     setVariant(DEFAULT_VARIANT)
   }
 
-  return (
-    <LayoutContext
-      value={{
-        defaultCollapsible: DEFAULT_COLLAPSIBLE,
-        defaultVariant: DEFAULT_VARIANT,
-        resetLayout,
-        collapsible,
-        setCollapsible,
-        variant,
-        setVariant,
-      }}
-    >
-      {children}
-    </LayoutContext>
-  )
+  const contextValue: LayoutContextType = {
+    resetLayout,
+    defaultCollapsible: DEFAULT_COLLAPSIBLE,
+    collapsible,
+    setCollapsible,
+    defaultVariant: DEFAULT_VARIANT,
+    variant,
+    setVariant,
+  }
+
+  return <LayoutContext value={contextValue}>{children}</LayoutContext>
 }
 
 // Define the hook for the provider

src/context/search-context.tsx → src/context/search-provider.tsx

@@ -1,21 +1,21 @@
-import React from 'react'
+import { createContext, useContext, useEffect, useState } from 'react'
 import { CommandMenu } from '@/components/command-menu'
 
-interface SearchContextType {
+type SearchContextType = {
   open: boolean
   setOpen: React.Dispatch<React.SetStateAction<boolean>>
 }
 
-const SearchContext = React.createContext<SearchContextType | null>(null)
+const SearchContext = createContext<SearchContextType | null>(null)
 
-interface Props {
+type SearchProviderProps = {
   children: React.ReactNode
 }
 
-export function SearchProvider({ children }: Props) {
-  const [open, setOpen] = React.useState(false)
+export function SearchProvider({ children }: SearchProviderProps) {
+  const [open, setOpen] = useState(false)
 
-  React.useEffect(() => {
+  useEffect(() => {
     const down = (e: KeyboardEvent) => {
       if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
         e.preventDefault()
@@ -36,7 +36,7 @@ export function SearchProvider({ children }: Props) {
 
 // eslint-disable-next-line react-refresh/only-export-components
 export const useSearch = () => {
-  const searchContext = React.useContext(SearchContext)
+  const searchContext = useContext(SearchContext)
 
   if (!searchContext) {
     throw new Error('useSearch has to be used within SearchProvider')

src/context/theme-context.tsx → src/context/theme-provider.tsx

@@ -27,7 +27,7 @@ const initialState: ThemeProviderState = {
   resolvedTheme: 'light',
   theme: DEFAULT_THEME,
   setTheme: () => null,
-  resetTheme: () => {},
+  resetTheme: () => null,
 }
 
 const ThemeContext = createContext<ThemeProviderState>(initialState)
@@ -104,8 +104,7 @@ export function ThemeProvider({
 export const useTheme = () => {
   const context = useContext(ThemeContext)
 
-  if (context === undefined)
-    throw new Error('useTheme must be used within a ThemeProvider')
+  if (!context) throw new Error('useTheme must be used within a ThemeProvider')
 
   return context
 }

src/features/auth/auth-layout.tsx

@@ -1,8 +1,8 @@
-interface Props {
+type AuthLayoutProps = {
   children: React.ReactNode
 }
 
-export function AuthLayout({ children }: Props) {
+export function AuthLayout({ children }: AuthLayoutProps) {
   return (
     <div className='container grid h-svh max-w-none items-center justify-center'>
       <div className='mx-auto flex w-full flex-col justify-center space-y-2 py-8 sm:w-[480px] sm:p-8'>

src/features/auth/forgot-password/components/forgot-password-form.tsx

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, useState } from 'react'
+import { useState } from 'react'
 import { z } from 'zod'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -14,15 +14,16 @@ import {
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 
-type ForgotFormProps = HTMLAttributes<HTMLFormElement>
-
 const formSchema = z.object({
   email: z.email({
     error: (iss) => (iss.input === '' ? 'Please enter your email' : undefined),
   }),
 })
 
-export function ForgotPasswordForm({ className, ...props }: ForgotFormProps) {
+export function ForgotPasswordForm({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLFormElement>) {
   const [isLoading, setIsLoading] = useState(false)
 
   const form = useForm<z.infer<typeof formSchema>>({

src/features/auth/otp/components/otp-form.tsx

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, useState } from 'react'
+import { useState } from 'react'
 import { z } from 'zod'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -21,12 +21,15 @@ import {
   InputOTPSeparator,
 } from '@/components/ui/input-otp'
 
-type OtpFormProps = HTMLAttributes<HTMLFormElement>
-
 const formSchema = z.object({
-  otp: z.string().min(6, 'Please enter your otp code.'),
+  otp: z
+    .string()
+    .min(6, 'Please enter the 6-digit code.')
+    .max(6, 'Please enter the 6-digit code.'),
 })
 
+type OtpFormProps = React.HTMLAttributes<HTMLFormElement>
+
 export function OtpForm({ className, ...props }: OtpFormProps) {
   const navigate = useNavigate()
   const [isLoading, setIsLoading] = useState(false)

src/features/auth/sign-in/components/user-auth-form.tsx

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, useState } from 'react'
+import { useState } from 'react'
 import { z } from 'zod'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -17,8 +17,6 @@ import {
 import { Input } from '@/components/ui/input'
 import { PasswordInput } from '@/components/password-input'
 
-type UserAuthFormProps = HTMLAttributes<HTMLFormElement>
-
 const formSchema = z.object({
   email: z.email({
     error: (iss) => (iss.input === '' ? 'Please enter your email' : undefined),
@@ -29,7 +27,10 @@ const formSchema = z.object({
     .min(7, 'Password must be at least 7 characters long'),
 })
 
-export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
+export function UserAuthForm({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLFormElement>) {
   const [isLoading, setIsLoading] = useState(false)
 
   const form = useForm<z.infer<typeof formSchema>>({

src/features/auth/sign-up/components/sign-up-form.tsx

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, useState } from 'react'
+import { useState } from 'react'
 import { z } from 'zod'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -16,8 +16,6 @@ import {
 import { Input } from '@/components/ui/input'
 import { PasswordInput } from '@/components/password-input'
 
-type SignUpFormProps = HTMLAttributes<HTMLFormElement>
-
 const formSchema = z
   .object({
     email: z.email({
@@ -35,7 +33,10 @@ const formSchema = z
     path: ['confirmPassword'],
   })
 
-export function SignUpForm({ className, ...props }: SignUpFormProps) {
+export function SignUpForm({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLFormElement>) {
   const [isLoading, setIsLoading] = useState(false)
 
   const form = useForm<z.infer<typeof formSchema>>({

src/features/chats/components/new-chat.tsx

@@ -21,12 +21,12 @@ import { type ChatUser } from '../data/chat-types'
 
 type User = Omit<ChatUser, 'messages'>
 
-type Props = {
+type NewChatProps = {
   users: User[]
   open: boolean
   onOpenChange: (open: boolean) => void
 }
-export function NewChat({ users, onOpenChange, open }: Props) {
+export function NewChat({ users, onOpenChange, open }: NewChatProps) {
   const [selectedUsers, setSelectedUsers] = useState<User[]>([])
 
   const handleSelectUser = (user: User) => {

src/features/errors/general-error.tsx

@@ -2,7 +2,7 @@ import { useNavigate, useRouter } from '@tanstack/react-router'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 
-interface GeneralErrorProps extends React.HTMLAttributes<HTMLDivElement> {
+type GeneralErrorProps = React.HTMLAttributes<HTMLDivElement> & {
   minimal?: boolean
 }
 

src/features/settings/appearance/appearance-form.tsx

@@ -5,8 +5,8 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { fonts } from '@/config/fonts'
 import { cn } from '@/lib/utils'
 import { showSubmittedData } from '@/utils/show-submitted-data'
-import { useFont } from '@/context/font-context'
-import { useTheme } from '@/context/theme-context'
+import { useFont } from '@/context/font-provider'
+import { useTheme } from '@/context/theme-provider'
 import { Button, buttonVariants } from '@/components/ui/button'
 import {
   Form,

src/features/settings/components/content-section.tsx

@@ -1,6 +1,6 @@
 import { Separator } from '@/components/ui/separator'
 
-interface ContentSectionProps {
+type ContentSectionProps = {
   title: string
   desc: string
   children: React.JSX.Element

src/features/settings/components/sidebar-nav.tsx

@@ -12,7 +12,7 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 
-interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
+type SidebarNavProps = React.HTMLAttributes<HTMLElement> & {
   items: {
     href: string
     title: string

src/features/tasks/components/data-table-bulk-actions.tsx

@@ -20,7 +20,7 @@ import { priorities, statuses } from '../data/data'
 import { type Task } from '../data/schema'
 import { TasksMultiDeleteDialog } from './tasks-multi-delete-dialog'
 
-interface DataTableBulkActionsProps<TData> {
+type DataTableBulkActionsProps<TData> = {
   table: Table<TData>
 }
 

src/features/tasks/components/data-table-column-header.tsx

@@ -15,11 +15,11 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 
-interface DataTableColumnHeaderProps<TData, TValue>
-  extends React.HTMLAttributes<HTMLDivElement> {
-  column: Column<TData, TValue>
-  title: string
-}
+type DataTableColumnHeaderProps<TData, TValue> =
+  React.HTMLAttributes<HTMLDivElement> & {
+    column: Column<TData, TValue>
+    title: string
+  }
 
 export function DataTableColumnHeader<TData, TValue>({
   column,

src/features/tasks/components/data-table-faceted-filter.tsx

@@ -20,7 +20,7 @@ import {
 } from '@/components/ui/popover'
 import { Separator } from '@/components/ui/separator'
 
-interface DataTableFacetedFilterProps<TData, TValue> {
+type DataTableFacetedFilterProps<TData, TValue> = {
   column?: Column<TData, TValue>
   title?: string
   options: {

src/features/tasks/components/data-table-pagination.tsx

@@ -14,7 +14,7 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 
-interface DataTablePaginationProps<TData> {
+type DataTablePaginationProps<TData> = {
   table: Table<TData>
 }
 

src/features/tasks/components/data-table-row-actions.tsx

@@ -15,11 +15,11 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { useTasks } from '../context/tasks-context'
 import { labels } from '../data/data'
 import { taskSchema } from '../data/schema'
+import { useTasks } from './tasks-provider'
 
-interface DataTableRowActionsProps<TData> {
+type DataTableRowActionsProps<TData> = {
   row: Row<TData>
 }
 

src/features/tasks/components/data-table-toolbar.tsx

@@ -6,7 +6,7 @@ import { DataTableViewOptions } from '../components/data-table-view-options'
 import { priorities, statuses } from '../data/data'
 import { DataTableFacetedFilter } from './data-table-faceted-filter'
 
-interface DataTableToolbarProps<TData> {
+type DataTableToolbarProps<TData> = {
   table: Table<TData>
 }
 

src/features/tasks/components/data-table-view-options.tsx

@@ -10,7 +10,7 @@ import {
   DropdownMenuSeparator,
 } from '@/components/ui/dropdown-menu'
 
-interface DataTableViewOptionsProps<TData> {
+type DataTableViewOptionsProps<TData> = {
   table: Table<TData>
 }
 

src/features/tasks/components/data-table.tsx

@@ -21,16 +21,16 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table'
-import { DataTablePagination } from '../components/data-table-pagination'
-import { DataTableToolbar } from '../components/data-table-toolbar'
 import { DataTableBulkActions } from './data-table-bulk-actions'
+import { DataTablePagination } from './data-table-pagination'
+import { DataTableToolbar } from './data-table-toolbar'
 
-interface DataTableProps<TData, TValue> {
+type DataTableProps<TData, TValue> = {
   columns: ColumnDef<TData, TValue>[]
   data: TData[]
 }
 
-export function DataTable<TData, TValue>({
+export function TasksTable<TData, TValue>({
   columns,
   data,
 }: DataTableProps<TData, TValue>) {

src/features/tasks/components/columns.tsx → src/features/tasks/components/tasks-columns.tsx

@@ -6,7 +6,7 @@ import { type Task } from '../data/schema'
 import { DataTableColumnHeader } from './data-table-column-header'
 import { DataTableRowActions } from './data-table-row-actions'
 
-export const columns: ColumnDef<Task>[] = [
+export const tasksColumns: ColumnDef<Task>[] = [
   {
     id: 'select',
     header: ({ table }) => (

src/features/tasks/components/tasks-dialogs.tsx

@@ -1,8 +1,8 @@
 import { showSubmittedData } from '@/utils/show-submitted-data'
 import { ConfirmDialog } from '@/components/confirm-dialog'
-import { useTasks } from '../context/tasks-context'
 import { TasksImportDialog } from './tasks-import-dialog'
 import { TasksMutateDrawer } from './tasks-mutate-drawer'
+import { useTasks } from './tasks-provider'
 
 export function TasksDialogs() {
   const { open, setOpen, currentRow, setCurrentRow } = useTasks()

src/features/tasks/components/tasks-import-dialog.tsx

@@ -34,12 +34,15 @@ const formSchema = z.object({
     ),
 })
 
-interface Props {
+type TaskImportDialogProps = {
   open: boolean
   onOpenChange: (open: boolean) => void
 }
 
-export function TasksImportDialog({ open, onOpenChange }: Props) {
+export function TasksImportDialog({
+  open,
+  onOpenChange,
+}: TaskImportDialogProps) {
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: { file: undefined },

src/features/tasks/components/tasks-multi-delete-dialog.tsx

@@ -10,7 +10,7 @@ import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { ConfirmDialog } from '@/components/confirm-dialog'
 
-interface Props<TData> {
+type TaskMultiDeleteDialogProps<TData> = {
   open: boolean
   onOpenChange: (open: boolean) => void
   table: Table<TData>
@@ -22,7 +22,7 @@ export function TasksMultiDeleteDialog<TData>({
   open,
   onOpenChange,
   table,
-}: Props<TData>) {
+}: TaskMultiDeleteDialogProps<TData>) {
   const [value, setValue] = useState('')
 
   const selectedRows = table.getFilteredSelectedRowModel().rows

src/features/tasks/components/tasks-mutate-drawer.tsx

@@ -25,7 +25,7 @@ import {
 import { SelectDropdown } from '@/components/select-dropdown'
 import { type Task } from '../data/schema'
 
-interface Props {
+type TaskMutateDrawerProps = {
   open: boolean
   onOpenChange: (open: boolean) => void
   currentRow?: Task
@@ -37,12 +37,16 @@ const formSchema = z.object({
   label: z.string().min(1, 'Please select a label.'),
   priority: z.string().min(1, 'Please choose a priority.'),
 })
-type TasksForm = z.infer<typeof formSchema>
+type TaskForm = z.infer<typeof formSchema>
 
-export function TasksMutateDrawer({ open, onOpenChange, currentRow }: Props) {
+export function TasksMutateDrawer({
+  open,
+  onOpenChange,
+  currentRow,
+}: TaskMutateDrawerProps) {
   const isUpdate = !!currentRow
 
-  const form = useForm<TasksForm>({
+  const form = useForm<TaskForm>({
     resolver: zodResolver(formSchema),
     defaultValues: currentRow ?? {
       title: '',
@@ -52,7 +56,7 @@ export function TasksMutateDrawer({ open, onOpenChange, currentRow }: Props) {
     },
   })
 
-  const onSubmit = (data: TasksForm) => {
+  const onSubmit = (data: TaskForm) => {
     // do something with the form data
     onOpenChange(false)
     form.reset()

src/features/tasks/components/tasks-primary-buttons.tsx

@@ -1,6 +1,6 @@
 import { Download, Plus } from 'lucide-react'
 import { Button } from '@/components/ui/button'
-import { useTasks } from '../context/tasks-context'
+import { useTasks } from './tasks-provider'
 
 export function TasksPrimaryButtons() {
   const { setOpen } = useTasks()

src/features/tasks/context/tasks-context.tsx → src/features/tasks/components/tasks-provider.tsx

@@ -4,7 +4,7 @@ import { type Task } from '../data/schema'
 
 type TasksDialogType = 'create' | 'update' | 'delete' | 'import'
 
-interface TasksContextType {
+type TasksContextType = {
   open: TasksDialogType | null
   setOpen: (str: TasksDialogType | null) => void
   currentRow: Task | null
@@ -16,6 +16,7 @@ const TasksContext = React.createContext<TasksContextType | null>(null)
 export function TasksProvider({ children }: { children: React.ReactNode }) {
   const [open, setOpen] = useDialogState<TasksDialogType>(null)
   const [currentRow, setCurrentRow] = useState<Task | null>(null)
+
   return (
     <TasksContext value={{ open, setOpen, currentRow, setCurrentRow }}>
       {children}

src/features/tasks/index.tsx

@@ -4,11 +4,11 @@ import { Main } from '@/components/layout/main'
 import { ProfileDropdown } from '@/components/profile-dropdown'
 import { Search } from '@/components/search'
 import { ThemeSwitch } from '@/components/theme-switch'
-import { columns } from './components/columns'
-import { DataTable } from './components/data-table'
+import { TasksTable } from './components/data-table'
+import { tasksColumns } from './components/tasks-columns'
 import { TasksDialogs } from './components/tasks-dialogs'
 import { TasksPrimaryButtons } from './components/tasks-primary-buttons'
-import { TasksProvider } from './context/tasks-context'
+import { TasksProvider } from './components/tasks-provider'
 import { tasks } from './data/tasks'
 
 export function Tasks() {
@@ -34,7 +34,7 @@ export function Tasks() {
           <TasksPrimaryButtons />
         </div>
         <div className='-mx-4 flex-1 overflow-auto px-4 py-1 lg:flex-row lg:space-y-0 lg:space-x-12'>
-          <DataTable data={tasks} columns={columns} />
+          <TasksTable data={tasks} columns={tasksColumns} />
         </div>
       </Main>
 

src/features/users/components/data-table-bulk-actions.tsx

@@ -13,7 +13,7 @@ import { BulkActionsToolbar } from '@/components/bulk-actions-toolbar'
 import { type User } from '../data/schema'
 import { UsersMultiDeleteDialog } from './users-multi-delete-dialog'
 
-interface DataTableBulkActionsProps<TData> {
+type DataTableBulkActionsProps<TData> = {
   table: Table<TData>
 }
 

src/features/users/components/data-table-column-header.tsx

@@ -15,11 +15,11 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 
-interface DataTableColumnHeaderProps<TData, TValue>
-  extends React.HTMLAttributes<HTMLDivElement> {
-  column: Column<TData, TValue>
-  title: string
-}
+type DataTableColumnHeaderProps<TData, TValue> =
+  React.HTMLAttributes<HTMLDivElement> & {
+    column: Column<TData, TValue>
+    title: string
+  }
 
 export function DataTableColumnHeader<TData, TValue>({
   column,

src/features/users/components/data-table-faceted-filter.tsx

@@ -20,7 +20,7 @@ import {
 } from '@/components/ui/popover'
 import { Separator } from '@/components/ui/separator'
 
-interface DataTableFacetedFilterProps<TData, TValue> {
+type DataTableFacetedFilterProps<TData, TValue> = {
   column?: Column<TData, TValue>
   title?: string
   options: {

src/features/users/components/data-table-pagination.tsx

@@ -14,7 +14,7 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 
-interface DataTablePaginationProps<TData> {
+type DataTablePaginationProps<TData> = {
   table: Table<TData>
 }
 

src/features/users/components/data-table-row-actions.tsx

@@ -10,10 +10,10 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { useUsers } from '../context/users-context'
 import { type User } from '../data/schema'
+import { useUsers } from './users-provider'
 
-interface DataTableRowActionsProps {
+type DataTableRowActionsProps = {
   row: Row<User>
 }
 

src/features/users/components/data-table-toolbar.tsx

@@ -6,7 +6,7 @@ import { roles } from '../data/data'
 import { DataTableFacetedFilter } from './data-table-faceted-filter'
 import { DataTableViewOptions } from './data-table-view-options'
 
-interface DataTableToolbarProps<TData> {
+type DataTableToolbarProps<TData> = {
   table: Table<TData>
 }
 

src/features/users/components/data-table-view-options.tsx

@@ -10,7 +10,7 @@ import {
   DropdownMenuSeparator,
 } from '@/components/ui/dropdown-menu'
 
-interface DataTableViewOptionsProps<TData> {
+type DataTableViewOptionsProps<TData> = {
   table: Table<TData>
 }
 

src/features/users/components/users-action-dialog.tsx

@@ -93,13 +93,17 @@ const formSchema = z
   )
 type UserForm = z.infer<typeof formSchema>
 
-interface Props {
+type UserActionDialogProps = {
   currentRow?: User
   open: boolean
   onOpenChange: (open: boolean) => void
 }
 
-export function UsersActionDialog({ currentRow, open, onOpenChange }: Props) {
+export function UsersActionDialog({
+  currentRow,
+  open,
+  onOpenChange,
+}: UserActionDialogProps) {
   const isEdit = !!currentRow
   const form = useForm<UserForm>({
     resolver: zodResolver(formSchema),

src/features/users/components/users-columns.tsx

@@ -8,7 +8,7 @@ import { type User } from '../data/schema'
 import { DataTableColumnHeader } from './data-table-column-header'
 import { DataTableRowActions } from './data-table-row-actions'
 
-export const columns: ColumnDef<User>[] = [
+export const usersColumns: ColumnDef<User>[] = [
   {
     id: 'select',
     header: ({ table }) => (

src/features/users/components/users-delete-dialog.tsx

@@ -9,13 +9,17 @@ import { Label } from '@/components/ui/label'
 import { ConfirmDialog } from '@/components/confirm-dialog'
 import { type User } from '../data/schema'
 
-interface Props {
+type UserDeleteDialogProps = {
   open: boolean
   onOpenChange: (open: boolean) => void
   currentRow: User
 }
 
-export function UsersDeleteDialog({ open, onOpenChange, currentRow }: Props) {
+export function UsersDeleteDialog({
+  open,
+  onOpenChange,
+  currentRow,
+}: UserDeleteDialogProps) {
   const [value, setValue] = useState('')
 
   const handleDelete = () => {

src/features/users/components/users-dialogs.tsx

@@ -1,7 +1,7 @@
-import { useUsers } from '../context/users-context'
 import { UsersActionDialog } from './users-action-dialog'
 import { UsersDeleteDialog } from './users-delete-dialog'
 import { UsersInviteDialog } from './users-invite-dialog'
+import { useUsers } from './users-provider'
 
 export function UsersDialogs() {
   const { open, setOpen, currentRow, setCurrentRow } = useUsers()

src/features/users/components/users-invite-dialog.tsx

@@ -34,14 +34,18 @@ const formSchema = z.object({
   role: z.string().min(1, 'Role is required.'),
   desc: z.string().optional(),
 })
+
 type UserInviteForm = z.infer<typeof formSchema>
 
-interface Props {
+type UserInviteDialogProps = {
   open: boolean
   onOpenChange: (open: boolean) => void
 }
 
-export function UsersInviteDialog({ open, onOpenChange }: Props) {
+export function UsersInviteDialog({
+  open,
+  onOpenChange,
+}: UserInviteDialogProps) {
   const form = useForm<UserInviteForm>({
     resolver: zodResolver(formSchema),
     defaultValues: { email: '', role: '', desc: '' },

src/features/users/components/users-multi-delete-dialog.tsx

@@ -10,7 +10,7 @@ import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { ConfirmDialog } from '@/components/confirm-dialog'
 
-interface Props<TData> {
+type UserMultiDeleteDialogProps<TData> = {
   open: boolean
   onOpenChange: (open: boolean) => void
   table: Table<TData>
@@ -22,7 +22,7 @@ export function UsersMultiDeleteDialog<TData>({
   open,
   onOpenChange,
   table,
-}: Props<TData>) {
+}: UserMultiDeleteDialogProps<TData>) {
   const [value, setValue] = useState('')
 
   const selectedRows = table.getFilteredSelectedRowModel().rows

src/features/users/components/users-primary-buttons.tsx

@@ -1,6 +1,6 @@
 import { MailPlus, UserPlus } from 'lucide-react'
 import { Button } from '@/components/ui/button'
-import { useUsers } from '../context/users-context'
+import { useUsers } from './users-provider'
 
 export function UsersPrimaryButtons() {
   const { setOpen } = useUsers()

src/features/users/context/users-context.tsx → src/features/users/components/users-provider.tsx

@@ -4,7 +4,7 @@ import { type User } from '../data/schema'
 
 type UsersDialogType = 'invite' | 'add' | 'edit' | 'delete'
 
-interface UsersContextType {
+type UsersContextType = {
   open: UsersDialogType | null
   setOpen: (str: UsersDialogType | null) => void
   currentRow: User | null

src/features/users/components/users-table.tsx

@@ -2,7 +2,6 @@ import { useState } from 'react'
 import {
   type ColumnDef,
   type ColumnFiltersState,
-  type RowData,
   type SortingState,
   type VisibilityState,
   flexRender,
@@ -30,12 +29,12 @@ import { DataTableToolbar } from './data-table-toolbar'
 
 declare module '@tanstack/react-table' {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  interface ColumnMeta<TData extends RowData, TValue> {
+  interface ColumnMeta<TData, TValue> {
     className: string
   }
 }
 
-interface DataTableProps {
+type DataTableProps = {
   columns: ColumnDef<User>[]
   data: User[]
 }

src/features/users/index.tsx

@@ -3,11 +3,11 @@ import { Main } from '@/components/layout/main'
 import { ProfileDropdown } from '@/components/profile-dropdown'
 import { Search } from '@/components/search'
 import { ThemeSwitch } from '@/components/theme-switch'
-import { columns } from './components/users-columns'
+import { usersColumns } from './components/users-columns'
 import { UsersDialogs } from './components/users-dialogs'
 import { UsersPrimaryButtons } from './components/users-primary-buttons'
+import { UsersProvider } from './components/users-provider'
 import { UsersTable } from './components/users-table'
-import { UsersProvider } from './context/users-context'
 import { userListSchema } from './data/schema'
 import { users } from './data/users'
 
@@ -36,7 +36,7 @@ export function Users() {
           <UsersPrimaryButtons />
         </div>
         <div className='-mx-4 flex-1 overflow-auto px-4 py-1 lg:flex-row lg:space-y-0 lg:space-x-12'>
-          <UsersTable data={userList} columns={columns} />
+          <UsersTable data={userList} columns={usersColumns} />
         </div>
       </Main>
 

src/main.tsx

@@ -8,11 +8,11 @@ import {
 } from '@tanstack/react-query'
 import { RouterProvider, createRouter } from '@tanstack/react-router'
 import { toast } from 'sonner'
-import { useAuthStore } from '@/stores/authStore'
+import { useAuthStore } from '@/stores/auth-store'
 import { handleServerError } from '@/utils/handle-server-error'
-import { DirectionProvider } from './context/direction-context'
-import { FontProvider } from './context/font-context'
-import { ThemeProvider } from './context/theme-context'
+import { DirectionProvider } from './context/direction-provider'
+import { FontProvider } from './context/font-provider'
+import { ThemeProvider } from './context/theme-provider'
 // Generated Routes
 import { routeTree } from './routeTree.gen'
 // Styles

src/routes/clerk/_authenticated/user-management.tsx

@@ -14,11 +14,11 @@ import { Main } from '@/components/layout/main'
 import { LearnMore } from '@/components/learn-more'
 import { Search } from '@/components/search'
 import { ThemeSwitch } from '@/components/theme-switch'
-import { columns } from '@/features/users/components/users-columns'
+import { usersColumns } from '@/features/users/components/users-columns'
 import { UsersDialogs } from '@/features/users/components/users-dialogs'
 import { UsersPrimaryButtons } from '@/features/users/components/users-primary-buttons'
+import { UsersProvider } from '@/features/users/components/users-provider'
 import { UsersTable } from '@/features/users/components/users-table'
-import { UsersProvider } from '@/features/users/context/users-context'
 import { userListSchema } from '@/features/users/data/schema'
 import { users } from '@/features/users/data/users'
 
@@ -90,7 +90,7 @@ function UserManagement() {
               <UsersPrimaryButtons />
             </div>
             <div className='-mx-4 flex-1 overflow-auto px-4 py-1 lg:flex-row lg:space-y-0 lg:space-x-12'>
-              <UsersTable data={userList} columns={columns} />
+              <UsersTable data={userList} columns={usersColumns} />
             </div>
           </Main>