Skip to main content

Component Inventory

Component Inventory

Project: {{PROJECT_NAME}}Drop — Fintech Payment App Version: {{VERSION}}0.1.0 Date: {{DATE}}2026-02-23 Author: {{AUTHOR}}John (AI Director, ALAI) Status: Draft | In Review | Approved Reviewers: {{REVIEWERS}}Alem Bašić (CEO)

Document History

Version Date Author Changes
0.1 {{DATE}}2026-02-23 {{AUTHOR}}John Initial draft from source code analysis (src/drop-app/src/)

1. Overview

All file paths are relative to src/drop-app/src/.

Total custom components: {{N}}13 (including sub-exports) Libraryshadcn/ui location:components: src/components/14 Storybook:Custom icons: {{https://storybook.PROJECT_NAME.example.com}} Design source: {{Figma file URL}} Owner team: {{TEAM_NAME}}

This inventory tracks every reusable component in {{PROJECT_NAME}}. It follows Atomic Design categorization: atoms → molecules → organisms → templates → pages.9

2.1. ComponentCustom Hierarchy DiagramComponents

BottomNav

graph
    
TB
    subgraph Pages
        PageLogin["LoginPage"]
        PageDashboard["DashboardPage"]
    end
    subgraph Templates
        TplAuth["AuthLayout"]
        TplApp["AppLayout"]
    end
    subgraph Organisms
        OrgNavbar["Navbar"]
        OrgSidebar["Sidebar"]
        OrgDataTable["DataTable"]
        OrgUserForm["UserForm"]
    end
    subgraph Molecules
        MolFormField["FormField"]
        MolCard["Card"]
        MolSearchBar["SearchBar"]
        MolDropdown["Dropdown"]
        MolPagination["Pagination"]
    end
    subgraph Atoms
        AtomButton["Button"]
        AtomInput["Input"]
        AtomBadge["Badge"]
        AtomSpinner["Spinner"]
        AtomAvatar["Avatar"]
        AtomIcon["Icon"]
    end

    Pages --> Templates
    Templates --> Organisms
    Organisms --> Molecules
    Molecules --> Atoms

  • TODO:File: Updatecomponents/bottom-nav.tsx
    • diagram
  • Props: None
  • Description: Fixed bottom navigation bar with 5 tabs. Uses usePathname() for active state detection. Active tab: text-[#0B6E35], inactive: text-[#9CA3AF]. Fixed to reflectviewport actualbottom componentwith tree.

    h-16
    border-t

    3.bg-white.

    • Atoms
  • Navigation (PrimitiveItems:
    • Components)

    3.1 Button

    frame
    PropertyLabel ValueRouteIcon
    CategoryHjem Atom/dashboardHome (lucide)
    StatusAktivitet `{{Done/historyClock (lucide)
    File pathSkann src/components/ui/Button/Button.tsx/scanIconQrScan (custom)
    StorybookKontoer {{URL}}/accountsLandmark (lucide)
    Design refProfil {{Figma/profile User URL}}(lucide)
    • Used in: dashboard, accounts, history, profile, scan, notifications pages
    • Requirements: Pages using BottomNav must add pb-24 to content container
    • File: components/drop-logo.tsx (line 5)
    • Export: DropLogo
    • Props: { size?: number; className?: string } (LogoProps)
    • Description: Forward-D SVG mark — letter "d" with stem sweeping into gold arrow. Default size 40.
    • Colors: #0B6E35 (green body), #D4A017 (gold arrow)
    • Used in: dashboard page header

    DropWordmark

    • File: components/drop-logo.tsx (line 30)
    • Export: DropWordmark
    • Props: { size?: number; className?: string } (LogoProps)
    • Description: Text "drop" (always lowercase) rendered in Fraunces font, bold, color #1A1A1A. Default size 24 (font-size).
    • Logo rules: Always lowercase "drop" — never "Drop" or "DROP" in logo context

    DropLogoFull

    • File: components/drop-logo.tsx (line 44)
    • Export: DropLogoFull
    • Props: { size?: number; className?: string } (LogoProps)
    • Description: Combines DropLogo mark + DropWordmark side by side. Default size 40.
    • Used in: / (marketing page) header

    DropAppIcon

    • File: components/drop-logo.tsx (line 57)
    • Export: DropAppIcon
    • Props: { size?: number; className?: string } (LogoProps)
    • Description: App icon — rounded green square with dollar sign and circular arrows. Default size 64.
    • Used in: / (marketing page), favicon/app launcher

    CookieConsent

    • File: components/cookie-consent.tsx
    • Props: None (self-contained)
    • Description: GDPR cookie consent banner and modal. Manages localStorage consent preferences: necessary, analytics, marketing. Shows banner on first visit. "Tilpass" button opens modal for granular control. Saves consent to /api/consents endpoint.
    • State: visible, showModal, preferences: CookiePreferences
    • Components used: X (lucide), Dialog components
    • Storage: localStorage key for consent preferences
    • Used in: Root layout (app/layout.tsx)
    • Compliance: GDPR — required for all EU users

    PrePaymentDisclosure

    • File: components/pre-payment-disclosure.tsx
    • Props: 
      {
  amount: number;
  fee: number;
  exchangeRate: number;
  receiveAmount: number;
  receiveCurrency: string;
  estimatedDelivery: string;
  onConfirm: () => void;
  onCancel: () => void;
}
    • Description: PSD2-compliant pre-payment disclosure modal for remittance. Shows full breakdown: amount, fee (with %), exchange rate, recipient receives, total cost, estimated delivery. Explicit confirm/cancel buttons. Norwegian language.
    • Components used: Info (lucide)
    • Used in: /send page (remittance flow, step before confirmation)
    • Compliance: PSD2 PISP — required before initiating payment

    PWARegister

    • File: components/pwa-register.tsx
    • Props: None
    • Description: Service Worker registration component. Registers /sw.js on mount. Silent registration (console logs only). Returns null (no UI).
    • Used in: Root layout (app/layout.tsx)

    2. Custom Icons (drop-icons.tsx)

    File: components/drop-icons.tsx

    Shared Props API:Interface:

    interface IconProps {
  size?: number;    // Default: 24
  className?: string;
}

    Style: Outlined, 2px stroke, round linecap/linejoin, currentColor fill for theming.

    Unused Unused
    PropExport TypeDescription Default Size RequiredDescriptionStatus
    variantIconSendMoney 'primary'Arrow |going 'secondary'up-right |from 'ghost'horizontal | 'danger' | 'link'line 'primary'24 NoVisual style variantActive
    sizeIconQrScan 'sm'QR |code 'md'frame |with 'lg'scan corners 'md'24 NoButton sizeActive
    disabledIconVirtualCard booleanCredit card outline false24 NoDisables interactionActive
    loadingIconShield booleanShield with checkmark false24 NoShows spinner, disables clickActive
    leftIconIconFastTransfer ReactNodeLightning bolt undefined24 NoIcon before labelActive
    rightIconIconCorridors ReactNodeGlobe with meridians undefined24 NoIcon after labelActive
    onClickIconWallet (e:Wallet MouseEvent) => voidoutline undefined24 No Click— handlerno wallet in pass-through model
    typeIconHistory 'button'Clock |with 'submit' | 'reset'arrow 'button'24 NoHTML button typeActive
    fullWidthIconTopUp booleanPlus inside circle false24 No 100%— widthno top-up in pass-through model

    3. shadcn/ui Components

    Variants & States:Directory: primary, secondary, ghost, danger, link × default, hover, focus, active, disabled, loadingcomponents/ui/

    Accessibility:

    All
      are
    • Rendersstandard asshadcn/ui primitives built on Radix UI. Styled via Tailwind + CSS variables defined in <button>globals.css. The --primary —token neveris <div>#0B6E35 or(Drop <span>
      • Forest
    • loading state: aria-busy="true", spinner has aria-label="Loading"
    • disabled: aria-disabled="true", not removed from tab order
    • Focus ring: 2px offset, brand color

    Dependencies: Icon component, Spinner componentGreen).

    3.2 Input

    PropertyComponent ValueFileRadix PrimitiveUsed In
    CategoryAlert Atomui/alert.tsx— (div-based)Accounts page (PSD2 info banner)
    StatusAvatar {{Status}}ui/avatar.tsx@radix-ui/react-avatarProfile pages
    File pathBadge src/components/ui/Input/Input.badge.tsx— (cva variants)Accounts (isPrimary), Security (2FA status)
    StorybookButton {{URL}}

    Props API:

    All CookieConsent,Cards Dashboard(transactions Complaints,Language, Sidepanel Loading Toast
    PropTypeDefaultRequiredDescription
    typeui/button.tsx 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url'@radix-ui/react-slot 'text' NoInput typepages
    valueCard stringui/card.tsx — (div-based) YesAccounts (controlled)Input valuepage
    DialogonChangeui/dialog.tsx (e: ChangeEvent) => void@radix-ui/react-dialog — Yes Change handler(feature-flagged)
    Inputplaceholderui/input.tsx string— (input element) ''NoPlaceholder textForms
    ScrollAreadisabledui/scroll-area.tsx boolean@radix-ui/react-scroll-area false No Disabled statelist)
    Selecterrorui/select.tsx boolean@radix-ui/react-select false No Triggers error visual stateWithdrawal
    SeparatorerrorMessageui/separator.tsx string@radix-ui/react-separator undefinedNoError text (also sets aria-describedby)Dividers
    SheetleftAdornmentui/sheet.tsx ReactNode@radix-ui/react-dialog undefined No Icon(if or element left of inputused)
    SkeletonrightAdornmentui/skeleton.tsx ReactNode— (pulse animation) undefined NoIcon or element right of inputstates
    Sonnersizeui/sonner.tsx 'sm'sonner |toast 'md' | 'lg'library 'md' NoInput height/font size

    Variants & States: default, focused, error, disabled, with-left-icon, with-right-icon

    Accessibility:

    • Must always be paired with <label> (use FormField molecule)
    • Error: aria-invalid="true" + aria-describedby pointing to error message id
    • Password: toggle visibility button must have aria-label

    3.3 Badge

    PropertyValue
    CategoryAtomnotifications
    StatusTabs {{Status}}
    File pathsrc/components/ui/Badge/Badge.tabs.tsx

    Props API:

    PropTypeDefaultRequiredDescription
    variant@radix-ui/react-tabs 'success' | 'warning' | 'error' | 'info' | 'neutral''neutral'NoSemantic color variant
    size'sm' | 'md''md'NoBadge size
    dotbooleanfalseNoShows colored dot instead of text
    childrenReactNode—YesBadge content

    TODO: Add remaining atom components following the same pattern (Select, Checkbox, Radio, Toggle, Textarea, Avatar, Tooltip, Spinner, Divider).

    4. Molecules (Composite Components)

    4.1 FormField

    PropertyValue
    CategoryMolecule
    Status{{Status}}
    File pathsrc/components/ui/FormField/FormField.tsx
    ComposesInput, Label, ErrorMessage, HelpText

    Props API:

    PropTypeDefaultRequiredDescription
    labelstring—YesVisible label text
    htmlForstring—YesLinks label to input id
    errorstringundefinedNoError message text
    helpTextstringundefinedNoHelper text below input
    requiredbooleanfalseNoShows required indicator
    childrenReactNode—YesInput component

    Accessibility: Label always associated with input via htmlFor/id pair.

    4.2 Card

    PropertyValue
    CategoryMolecule
    Status{{Status}}
    File pathsrc/components/ui/Card/Card.tsx

    Props API:

    PropTypeDefaultRequiredDescription
    variant'default' | 'bordered' | 'elevated''default'NoVisual style
    padding'sm' | 'md' | 'lg' | 'none''md'NoInternal padding
    asElementType'div'NoPolymorphic render element
    childrenReactNode—YesCard content

    Sub-components: Card.Header, Card.Body, Card.Footer

    TODO: Add remaining molecule components: Modal, Dropdown, Table, Pagination, Toast, SearchBar, Breadcrumb, Tabs, Accordion, DatePicker.

    5. Organisms (Complex Components)

    5.1 DataTable

    PropertyValue
    CategoryOrganism
    Status{{Status}}
    File pathsrc/components/features/DataTable/DataTable.tsx
    DependenciesTable (molecule), Pagination, SearchBar, Spinner, Badge

    Features:

    • Sortable columns (client + server-side)
    • Pagination (configurableTransactions page sizes)
    • Row selection (single + multi)
    • Column visibility toggle
    • Export action slot
    • Loading skeleton state
    • Empty state slot
    • Row action slot (per-row dropdown)

    TODO: Document full props API for DataTable.

    5.2 Navigation / Sidebar

    PropertyValue
    CategoryOrganism
    Status{{Status}}
    File pathsrc/components/layouts/Sidebar/Sidebar.tsx

    TODO: Add remaining organism components.

    6. Shared Hooks / Composables Inventory

    HookFilePurposeUsed By
    useDebouncesrc/hooks/useDebounce.tsDebounce value changesSearchBar, Input
    useLocalStoragesrc/hooks/useLocalStorage.tsPersistent local stateTheme, preferences
    useMediaQuerysrc/hooks/useMediaQuery.tsResponsive breakpoint checksLayout components
    useClickOutsidesrc/hooks/useClickOutside.tsClose on outside clickDropdown, Modal
    useFocusTrapsrc/hooks/useFocusTrap.tsTrap focus inside elementModal, Drawer
    useToastsrc/hooks/useToast.tsTrigger toast notificationsGlobal
    usePermissionsrc/hooks/usePermission.tsCheck user permissionsAuth-gated components
    {{HOOK_NAME}}{{PATH}}{{PURPOSE}}{{CONSUMERS}}filters)

    7.4. Third-PartyExternal ComponentDependencies Usage(UI-Related)

    variant
    Package Version Components UsedWrapping StrategyUsage
    {{@radix-ui/react-dialog}}lucide-react {{1.x}}Latest ModalIcon baseWrapped in src/components/ui/Modallibrary — customMail, stylingLock, Eye, EyeOff, ArrowRight, Home, Clock, User, Landmark, Bell, LogOut, ChevronRight, Shield, Settings, HelpCircle, CreditCard, Plus, X, Check, ArrowLeft, ChevronDown, Copy, RefreshCw, Smartphone, Globe, Zap, Store, QrCode, TrendingUp, DollarSign, BarChart3, Download, Camera
    {{@radix-ui/react-select}}next/image Next.js 15Image optimization
    {{2.x}}next/link SelectNext.js base15 WrappedClient-side innavigation
    next/navigationNext.js 15useRouter, src/components/ui/SelectusePathname
    {{react-hook-form}}class-variance-authority {{7.x}}Latest FormComponent state Usedsystem directly + FormField wrapper(cva)
    {{recharts}}clsx LatestClass name conditional merging
    {{2.x}}tailwind-merge ChartsLatest WrappedTailwind inclass deduplication
    src/components/charts/@radix-ui/*LatestHeadless UI primitives (via shadcn)
    sonnerLatestToast notification library

    Policy: Never use third-party components directly in feature code — always wrap in local component to control API surface and allow future swap.

    8.5. Page-Level Component DeprecationUsage ProcessMap

    Active → Deprecated (soft) → Deprecated (hard) → Removed
    StagePage ActionKey RequiredComponents Used
    Deprecated/ (soft)marketing) AddDropLogoFull, @deprecatedDropAppIcon, JSDocIconSendMoney, comment,IconQrScan, consoleIconVirtualCard, warningIconShield, inIconFastTransfer, dev, migration guide in StorybookIconCorridors
    Deprecated (hard)/login TypeScriptButton, @deprecatedInput annotation(Mail, triggersLock, IDEEye, warning,EyeOff, addedArrowRight tolucide removal milestoneicons)
    Removed/register DeleteButton, component,Input update(ArrowLeft, CHANGELOG,ArrowRight, runCheck, codemodEye, ifEyeOff, availablePhone, Mail, User, Calendar, Lock lucide)
    /dashboardDropLogo, BottomNav, ScrollArea, Bell, LogOut (lucide)
    /accountsBottomNav, Card, ArrowLeft, Landmark, Plus, ChevronRight (lucide), Alert
    /transactionsBottomNav, Tabs, TabsList, TabsTrigger, ArrowLeft, Clock (lucide)
    /scanBottomNav, Button, ArrowLeft, Camera, Check, X, Store (lucide)
    /sendButton, PrePaymentDisclosure, ArrowLeft, ArrowRight, Check, ChevronDown, Globe, User (lucide)
    /profileBottomNav, ArrowLeft, ChevronRight, LogOut, Settings, Shield, HelpCircle, Bell, CreditCard, Landmark (lucide)
    /profile/personalBottomNav, ChevronLeft, ShieldCheck (lucide)
    /profile/securityBottomNav, ChevronLeft, ChevronRight, Lock, Smartphone, Laptop (lucide)
    /profile/notificationsBottomNav, ChevronLeft, Bell, Mail (lucide)
    /profile/languageBottomNav, ChevronLeft, Check (lucide)
    /notificationsBottomNav, ArrowLeft, Bell, ArrowUpRight, ScanLine, Smartphone, TrendingUp (lucide)
    /cardsButton, Dialog (feature-flagged — all flags false by default)
    /complaintsMessageSquare, CheckCircle, ChevronLeft, ExternalLink (lucide)
    /withdrawalChevronLeft, RotateCcw, CheckCircle (lucide)
    /feesChevronLeft, Receipt (lucide)
    /privacyChevronLeft, Shield (lucide)
    /termsChevronLeft, FileText (lucide)

    Deprecation

    notice

    6. Component Standards

    Naming Conventions

    • Custom Drop components: PascalCase, descriptive (DropLogoFull, BottomNav, PrePaymentDisclosure)
    • Custom icons: Icon prefix + domain name (IconSendMoney, IconQrScan)
    • shadcn/ui components: PascalCase matching shadcn convention (Button, Dialog, Tabs)

    File Organization

    • One component per file (except drop-logo.tsx which exports 4 related logo variants)
    • Custom icons grouped in single file drop-icons.tsx
    • shadcn/ui components in components/ui/ directory

    Accessibility Baseline

    • All interactive elements: keyboard accessible, visible focus ring (focus:ring-[#0B6E35])
    • Touch targets: minimum period:44×44px 2(buttons sprinth-12 cycles= before48px, hardinputs removal.

      h-11
      • to
    • Icons: CHANGELOG.mdaria-hidden="true" forwhen trackeddecorative, deprecations.

      aria-label when meaningful
    • Form inputs: always associated <label> elements

    Approval

    Role Name Date Signature
    Author John (AI Director) 2026-02-23
    Frontend Lead
    DesignTech System OwnerLead
    Back to top