Skip to content

codebase-summary.md

Latest commit

 

History

History
525 lines (443 loc) · 13.7 KB

codebase-summary.md

File metadata and controls

525 lines (443 loc) · 13.7 KB

Codebase Summary

Project Statistics

Metric Value
Total Source LOC 917 lines
Vue Components 8 files
TypeScript Files 4 files
CSS Files 1 file
JSON Fixtures 2+ files
Build Tool Vite 6
Framework Vue 3.5.22
Package Manager npm

Directory Structure

ds-prototype-template/
├── src/                          # Application source (917 LOC)
│   ├── pages/                    # Route-level page components
│   │   ├── HomePage.vue          # Landing/overview page
│   │   ├── OrderListPage.vue     # Table with filters
│   │   └── OrderDetailPage.vue   # Single order detail
│   │
│   ├── components/               # Reusable components
│   │   ├── AppLayout.vue         # Main layout wrapper
│   │   ├── AppSidebar.vue        # Left navigation
│   │   ├── AppTopbar.vue         # Top header bar
│   │   └── OrderFilterBar.vue    # Filter & search UI
│   │
│   ├── layouts/                  # Layout components (wrapper)
│   │   └── AppLayout.vue         # (redirects to components/)
│   │
│   ├── data/                     # Static data fixtures
│   │   ├── orders.json           # Sample order data
│   │   ├── order-statuses.json   # Status options
│   │   └── types.ts              # TypeScript interfaces
│   │
│   ├── styles/                   # CSS design tokens
│   │   └── design-tokens.css     # CSS custom properties
│   │
│   ├── App.vue                   # Root component
│   ├── main.ts                   # App entry point & initialization
│   ├── router.ts                 # Vue Router configuration
│   ├── env.d.ts                  # TypeScript environment types
│   └── llms-component-catalog.md # Full DS component reference
│
├── .github/
│
├── .devcontainer/                # GitHub Codespaces config
│   ├── Dockerfile
│   ├── docker-compose.yml
│   └── devcontainer.json
│
├── public/                       # Static assets
├── docs/                         # Documentation (this folder)
├── dist/                         # Build output (generated)
├── node_modules/                 # Dependencies
│
├── vite.config.ts                # Vite build configuration
├── tsconfig.json                 # TypeScript configuration
├── tsconfig.node.json            # TypeScript (Node tooling)
├── package.json                  # Dependencies & scripts
├── package-lock.json             # Locked dependency versions
├── index.html                    # HTML entry point
├── .npmrc                        # npm configuration
├── .prettierrc                   # Code formatter config
├── .gitignore                    # Git ignore rules
├── README.md                     # Quick start guide
├── CLAUDE.md                     # AI assistant reference
└── (This docs folder)

Key Files Overview

Application Entry Point

src/main.ts

// Initializes Vue app and mounts to DOM
- Imports Vue 3 core
- Registers Ankorstore Design System components
- Loads design tokens CSS
- Creates and mounts root App component
- Initializes Vue Router

LOC: ~12

Router Configuration

src/router.ts

// Defines application routes
- Route 1: / → HomePage
- Route 2: /orders → OrderListPage
- Route 3: /orders/:id → OrderDetailPage
- Uses createWebHistory() for HTML5 mode

LOC: ~26

Layout & Navigation

src/layouts/AppLayout.vue

// Main layout wrapper (sidebar + topbar + router-view)
- Flexbox layout: sidebar (fixed left) + main (flex)
- AppSidebar: navigation menu
- AppTopbar: header with branding
- router-view: page content area

LOC: ~20

src/components/AppSidebar.vue

// Left navigation sidebar
- Navigation items array (mapped from routes)
- Each item: path, label, icon
- Active route highlighting
- Uses AkLink for navigation

LOC: ~40

src/components/AppTopbar.vue

// Top header bar
- Branding with AkLogoAKS
- Title/breadcrumb (optional)
- Fixed height, full width

LOC: ~20

Page Components

src/pages/HomePage.vue

// Landing/overview page
- Welcome message
- Link to main sections (Orders)
- Static content (no fixture data)

LOC: ~20

src/pages/OrderListPage.vue

// Table view of all orders
- Imports orders.json fixture
- OrderFilterBar component
- AkTable with columns: reference, brand, status, total
- AkPagination for pagination
- Computed properties: filteredOrders, paginatedOrders
- Interactions: search, filter by status, pagination, drill-down

LOC: ~80

src/pages/OrderDetailPage.vue

// Single order detail view
- Route param :id to find order
- Order details in cards (info layout)
- Item breakdown table
- Back button to list
- Status badge with color mapping

LOC: ~70

src/components/OrderFilterBar.vue

// Filters & search for order list
- AkInput: search by reference
- AkSelect: filter by status
- AkButton: reset filters
- Emits: filterChange event
- Props: currentStatus, currentSearch

LOC: ~50

Data Models & Fixtures

src/data/types.ts

// TypeScript interfaces for type safety
- Order interface: id, reference, brandName, retailerName, status, total, currency, itemCount, createdAt
- OrderStatus interface: value, label, color

LOC: ~18

src/data/orders.json

// Sample order data (fixture)
- Array of Order objects
- Used in OrderListPage and OrderDetailPage
- Mock data for prototyping

LOC: ~50+ (variable)

src/data/order-statuses.json

// Status options (fixture)
- Array of OrderStatus objects
- Colors mapped to DS badge colors

LOC: ~15

Styling

src/styles/design-tokens.css

// CSS custom properties (design tokens)
- Spacing scale: --space-0 to --space-10
- Typography: --text-xs to --text-5xl, --leading-*
- Border radius: --radius-xs to --radius-2xl
- Font family: --font-family
- Colors: loaded from design-system.css

LOC: ~100

Root Components

src/App.vue

// Root component (mounted to #app)
- Simple wrapper
- router-view for page rendering
- AppLayout wraps all content

LOC: ~10

index.html

// HTML entry point
- <div id="app"></div> mount point
- Loads main.ts via <script>
- Poppins font via Google Fonts

LOC: ~20

Component Dependency Graph

main.ts
  ├── App.vue
  │   └── AppLayout.vue
  │       ├── AppSidebar.vue
  │       │   └── (navigation via AkLink)
  │       ├── AppTopbar.vue
  │       └── router-view
  │           ├── HomePage.vue
  │           ├── OrderListPage.vue
  │           │   ├── OrderFilterBar.vue
  │           │   ├── AkTable (DS)
  │           │   └── AkPagination (DS)
  │           └── OrderDetailPage.vue
  │               └── AkBadge (DS)
  │
  └── router.ts
      └── (route definitions)

Design Tokens CSS
  └── (imported in main.ts)

Design System CSS
  └── (imported in main.ts, provides Ak* components)

Data Flow Diagram

orders.json (fixture)
    │
    ▼
OrderListPage.vue
    │
    ├─ ref<orders> ← Loaded fixture
    │
    ├─ computed<filteredOrders>
    │   ├─ Filter by searchQuery
    │   └── Filter by statusFilter
    │
    ├─ computed<paginatedOrders>
    │   └─ Slice by currentPage
    │
    └─ Template renders
       ├─ OrderFilterBar (emits: filterChange)
       ├─ AkTable (renders paginatedOrders)
       └─ AkPagination (emits: pageChange)

User Interactions:
  ├─ Type in search → Updates searchQuery.value
  ├─ Select status → Updates statusFilter.value
  ├─ Click page → Updates currentPage.value
  └─ Click table row → Navigates to /orders/:id

Build Configuration

vite.config.ts

// Vite build configuration
- Vue plugin enabled
- @ alias → src/
- Dev server port: 3000
- Base: './' (GitHub Pages) or '/' (dev)

tsconfig.json

// TypeScript configuration
- Strict mode enabled
- Target: ES2020
- Module: ESNext
- Composite build support
- @ alias → src/

package.json

// Dependencies
{
  "dependencies": {
    "vue": "^3.5.22",
    "@ankorstore/design-system": "^28.4.0",
    "vue-router": "^4.5.0",
    "@ankorstore/vue-click-outside": "^2.0.1",
    "@splidejs/vue-splide": "^0.6.12",
    "floating-vue": "^5",
    "focus-trap": "^7.4.0",
    "vuedraggable": "^4.1.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.0",
    "typescript": "^5.7.0",
    "vite": "^6.0.0",
    "vue-tsc": "^2.2.0"
  },
  "scripts": {
    "dev": "vite --port 3000",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "deploy": "npm run build && gh-pages -d dist",
    "upgrade-ds": "npm update @ankorstore/design-system"
  }
}

Code Quality Metrics

Aspect Status Notes
Type Safety ✓ Strict All interfaces defined, minimal any usage
Component Size ✓ Good All components < 100 LOC
Code Organization ✓ Clear Consistent file structure, semantic naming
CSS Approach ✓ Scoped All styles scoped, CSS custom properties used
Component Library ✓ DS Only 100% Ankorstore DS components, no raw HTML
State Management ✓ Simple ref/computed only, no Pinia/Vuex
Testing — N/A Static prototype, no unit tests required

Dependencies Analysis

Production Dependencies (7)

Package Version Purpose
vue ^3.5.22 Core framework
@ankorstore/design-system ^28.4.0 Component library
vue-router ^4.5.0 Routing
@ankorstore/vue-click-outside ^2.0.1 Click-outside directive (DS dependency)
@splidejs/vue-splide ^0.6.12 Carousel (DS dependency)
floating-vue ^5 Popovers (DS dependency)
focus-trap ^7.4.0 Focus management (DS dependency)
vuedraggable ^4.1.0 Drag-and-drop (DS dependency)

Dev Dependencies (4)

Package Version Purpose
@vitejs/plugin-vue ^5.2.0 Vite Vue support
typescript ^5.7.0 TypeScript compiler
vite ^6.0.0 Build tool
vue-tsc ^2.2.0 Vue TypeScript checker

Total Dependencies: 11 (lean stack) Bundle Size: ~150KB gzipped (production build)

Source Code Statistics

By File Type

Type Count Total LOC Avg LOC/File
.vue 8 470 59
.ts 4 80 20
.css 1 100 100
.json 2+ 65+ 33+
Total 15+ 915+ 61+

By Category

Category LOC Purpose
Pages 170 Route-level components
Components 130 Reusable UI components
Layout 20 Main layout wrapper
Router 26 Route configuration
Entry Point 12 App initialization
Data 80+ TypeScript interfaces, fixtures
Styles 100 CSS custom properties
Total 938 —

Common Patterns Used

1. Fixture Loading Pattern

// In page components
import orders from '@/data/orders.json'
import type { Order } from '@/data/types'

const orderList = ref<Order[]>(orders)

2. Computed Filtering Pattern

const filteredOrders = computed(() => {
  return orderList.value.filter(order =>
    order.reference.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
})

3. Component Communication Pattern

// Parent component
const handleFilterChange = (status: string) => {
  statusFilter.value = status
}

// Child component (OrderFilterBar)
const emit = defineEmits<{ filterChange: [status: string] }>()
emit('filterChange', selectedStatus)

4. Router Navigation Pattern

// In component or AppSidebar
router.push(`/orders/${order.id}`)

// Or via AkLink
<AkLink href="/orders">Orders</AkLink>

5. Design Token Usage Pattern

<style scoped>
.card {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
</style>

Development Workflow

Code Generation

  1. Create new page: src/pages/MyPage.vue
  2. Add route: src/router.ts
  3. Add nav item: src/components/AppSidebar.vue
  4. Add fixture (if needed): src/data/my-data.json
  5. Add interface: src/data/types.ts

Type Checking

npm run build  # Runs vue-tsc --noEmit
# Reports all TypeScript errors

Development & Testing

npm run dev     # Hot reload dev server
npm run preview # Test production build

Deployment

npm run deploy  # Builds and deploys to gh-pages branch
# Runs: npm run build && gh-pages -d dist

Future Extensibility

Adding New Pages (Scalable)

  • Create new .vue in src/pages/
  • Add route to router.ts
  • Add nav item (optional)
  • Reuse existing components
  • No impact on build time (all static)

Adding New Data (Scalable)

  • Create .json fixture
  • Add TypeScript interface
  • Import in component
  • No API layer needed (static prototype)

Component Reusability

  • OrderFilterBar usable in other list views
  • AppLayout used consistently
  • Ak* components globally available
  • Design tokens applied everywhere

Last Updated: 2026-03-27 Codebase Health: Excellent (clean, modular, maintainable) Maintenance: Low overhead (static data, no API, no state management library)