Skip to main content

Component Inventory

Drop Frontend — Component Inventory

Auto-generatedProject: from{{PROJECT_NAME}} sourceVersion: code{{VERSION}} analysis.Date: All{{DATE}} fileAuthor: paths{{AUTHOR}} relativeStatus: toDraft src/drop-app/src/.| In Review | Approved Reviewers: {{REVIEWERS}}

Document

Custom ComponentsHistory

BottomNav

  • File: components/bottom-nav.tsx
  • Props: None
  • Description: Fixed bottom navigation bar with 5 tabs. Uses usePathname() for active state detection. Active tab: text-[#0B6E35], inactive: text-[#9CA3AF].
  • Navigation Items: Initial
    LabelVersion RouteDate IconAuthorChanges
    Hjem0.1 /dashboard{{DATE}} Home (lucide)
    Aktivitet{{AUTHOR}} /history Clock (lucide)
    Skann/scanIconQrScan (custom)
    Kontoer/accountsLandmark (lucide)
    Profil/profileUser (lucide)draft

  • 1. Overview

    UsedTotal in:components: dashboard,{{N}} accounts,Library history, profile, scan pages

  • File:location: src/components/drop-logo.tsx:5
  • Props:Storybook: { size?: number; className?: string {https://storybook.PROJECT_NAME.example.com}} (LogoProps)
    • Design
  • Description: Forward D SVG mark — letter "d" with stem sweeping into gold arrow. Default size 40. Colors: #0B6E35 (green body), #D4A017 (gold arrow).

DropWordmark

  • File: components/drop-logo.tsx:30
  • Props:source: {{Figma size?:file number; className?: string URL}} (LogoProps)
    • Owner
  • Description: Text "drop" rendered in Fraunces font, bold, color #1A1A1A. Default size 24 (font-size).

DropLogoFull

  • File: components/drop-logo.tsx:44
  • Props:team: { size?: number; className?: string {TEAM_NAME}}

    (LogoProps)

    • This

  • inventory tracks every reusable component in Description:{{PROJECT_NAME}}. CombinesIt DropLogofollows markAtomic +Design DropWordmarkcategorization: sideatoms by→ side.molecules Default→ sizeorganisms 40.→ Usedtemplates on marketing/landing→ pages.

DropAppIcon

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

CookieConsent

  • File: components/cookie-consent.tsx
  • Props: None
  • 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
  • Used in: Root layout

PrePaymentDisclosure

  • File: components/pre-payment-disclosure.tsx
  • Props: { amount, fee, exchangeRate, receiveAmount, receiveCurrency, estimatedDelivery, onConfirm, onCancel }
  • Description: PSD2-compliant pre-payment disclosure modal for remittance. Shows full breakdown: amount, fee (with %), exchange rate, recipient gets, total cost, estimated delivery. Explicit confirm/cancel buttons. Norwegian language.
  • Components used: Info (lucide)
  • Used in: /send page (remittance flow)

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

Custom2. IconsComponent (Hierarchy Diagram

drop-icons.tsxgraph 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
)

File:TODO: components/drop-icons.tsxUpdate Shareddiagram Propsto Interface:reflect IconPropsactual {component size?:tree.

number;
className?:

3. stringAtoms }(Primitive Style:Components)

Outlined, 2px

3.1 stroke, round linecap/linejoin, currentColor fill for theming.

Button

ExportProperty DescriptionDefault SizeNotesValue
IconSendMoneyCategory Arrow going up-right from horizontal line24Atom
IconQrScanStatus QR code frame with scan corners24`{{Done
IconVirtualCardFile path Credit card outline24src/components/ui/Button/Button.tsx
IconShieldStorybook Shield with checkmark24{{URL}}
IconFastTransferDesign ref Lightning{{Figma boltframe URL}}

Props API:

—
PropTypeDefaultRequiredDescription
variant 24'primary' | 'secondary' | 'ghost' | 'danger' | 'link' 'primary'NoVisual style variant
IconCorridorssize Globe'sm' with| meridians'md' | 'lg' 24'md' NoButton size
IconWalletdisabled Wallet outlineboolean 24false UnusedNo Disables no wallet in pass-through modelinteraction
IconHistoryloading Clock with arrowboolean 24false NoShows spinner, disables click
IconTopUpleftIcon PlusReactNodeundefinedNoIcon before label
rightIconReactNodeundefinedNoIcon after label
onClick(e: MouseEvent) => voidundefinedNoClick handler
type'button' | 'submit' | 'reset''button'NoHTML button type
fullWidthbooleanfalseNo100% width

Variants & States: primary, secondary, ghost, danger, link × default, hover, focus, active, disabled, loading

Accessibility:

  • Renders as <button> — never <div> or <span>
  • 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 component

3.2 Input

PropertyValue
CategoryAtom
Status{{Status}}
File pathsrc/components/ui/Input/Input.tsx
Storybook{{URL}}

Props API:

PropTypeDefaultRequiredDescription
type'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url''text'NoInput type
valuestring—Yes (controlled)Input value
onChange(e: ChangeEvent) => void—YesChange handler
placeholderstring''NoPlaceholder text
disabledbooleanfalseNoDisabled state
errorbooleanfalseNoTriggers error visual state
errorMessagestringundefinedNoError text (also sets aria-describedby)
leftAdornmentReactNodeundefinedNoIcon or element left of input
rightAdornmentReactNodeundefinedNoIcon or element right of input
size'sm' | 'md' | 'lg''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
CategoryAtom
Status{{Status}}
File pathsrc/components/ui/Badge/Badge.tsx

Props API:

PropTypeDefaultRequiredDescription
variant'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 (configurable 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

—inpass-throughmodel
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 circleelement 24Modal, Drawer
useToast Unusedsrc/hooks/useToast.ts Trigger notoast top-upnotifications Global
usePermissionsrc/hooks/usePermission.tsCheck user permissionsAuth-gated components
{{HOOK_NAME}}{{PATH}}{{PURPOSE}}{{CONSUMERS}}

shadcn/ui7. ComponentsThird-Party Component Usage

Directory: components/ui/

All are standard shadcn/ui primitives built on Radix UI. Styled via Tailwind + CSS variables defined in globals.css.

ComponentFileRadix Primitive
Alertui/alert.tsx— (div-based)
Avatarui/avatar.tsx@radix-ui/react-avatar
Badgeui/badge.tsx— (span-based, cva variants)
Buttonui/button.tsx@radix-ui/react-slot
Cardui/card.tsx— (div-based)
Dialogui/dialog.tsx@radix-ui/react-dialog
Inputui/input.tsx— (input element)
ScrollAreaui/scroll-area.tsx@radix-ui/react-scroll-area
Selectui/select.tsx@radix-ui/react-select
Separatorui/separator.tsx@radix-ui/react-separator
Sheetui/sheet.tsx@radix-ui/react-dialog (side panel)
Skeletonui/skeleton.tsx— (div with pulse animation)
Sonnerui/sonner.tsxsonner (toast library)
Tabsui/tabs.tsx@radix-ui/react-tabs

External Dependencies (UI-related)

libraryLock,optimization navigation
Package UsageVersionComponents UsedWrapping Strategy
lucide-react{{@radix-ui/react-dialog}} Icon{{1.x}} Modal (Mail,base Wrapped Eye,in EyeOff,src/components/ui/Modal ArrowRight,— Home,custom 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)styling
next/image{{@radix-ui/react-select}} Image{{2.x}} Select baseWrapped in src/components/ui/Select
next/link{{react-hook-form}} Client-side{{7.x}} Form stateUsed directly + FormField wrapper
next/navigation{{recharts}} useRouter, usePathname
class-variance-authority{{2.x}} Component variant system (cva)
clsx + tailwind-mergeCharts ClassWrapped name merging viain cn()src/components/charts/ utility

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

8. Component Deprecation Process

Active → Deprecated (soft) → Deprecated (hard) → Removed
StageAction Required
Deprecated (soft)Add @deprecated JSDoc comment, console warning in dev, migration guide in Storybook
Deprecated (hard)TypeScript @deprecated annotation triggers IDE warning, added to removal milestone
RemovedDelete component, update CHANGELOG, run codemod if available

Deprecation notice minimum period: 2 sprint cycles before hard removal.

Approval

RoleNameDateSignature
Author
Frontend Lead
Design System Owner
Back to top