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

Author: satnaing

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>