Infoland Component Library

Vue 3 component library with Riot.js wrappers (Vue-mounted).

📦 This library replaces infoland-flex-search

If you're migrating from infoland-flex-search, see the Migration Guide.

🎯 Quick Start

Vue 3

npm install @ambita/infoland-component-library

// main.ts
import { initLibraryConfig } from '@ambita/infoland-component-library/vue'
import '@ambita/infoland-component-library/vue/style.css'

initLibraryConfig({
  environment: import.meta.env.VITE_INFOLAND_ENV
})

<script setup lang="ts">
import { SearchComponent } from '@ambita/infoland-component-library/vue'
</script>

<template>
  <SearchComponent />
</template>

Riot.js (recommended lifecycle helper)

import { initLibraryConfig, useOfsInRiot } from '@ambita/infoland-component-library/riot'
import '@ambita/infoland-component-library/riot/style.css'

initLibraryConfig({
  environment: 'beta'
})

this.on('before-mount', () => {
  this.ofs = useOfsInRiot(this, {
    ref: 'container',
    getProps: () => ({ autofocus: true }),
    onSearchResult: (result) => console.log('OFS result', result),
  })
})

For lower-level/manual lifecycle control, createOfsWrapper and createVueWrapper are still available.

📚 Documentation

• Full Documentation - Complete guide
• Quick Reference - Cheat sheet
• Vue Usage Guide - Using in Vue 3
• Development Guide - Contributing
• npm link Workflow - Local development

🛠️ Development

Available Scripts

npm run dev              # Storybook at http://localhost:6006
npm run build            # Production build (Vue + Riot)
npm run build:vue        # Build Vue only
npm run build:riot       # Build Riot bundle only
npm run build:watch      # Watch mode (Vue + Riot)
npm test                 # Run tests
npm run type-check       # TypeScript check

🎨 Features

• ✅ Vue 3 components with full TypeScript support
• ✅ Riot.js wrappers for Vue components
• ✅ Design System Styling via DS tokens and components
• ✅ Shared Services for API access
• ✅ Tested with Vitest

📦 What's Included

Components

• SearchComponent - Multi-step search interface
• SearchInput - Search input field
• MapComponent - Map display component

Services

• userService
• apiService

Utilities

• Riot.js event helpers (on, onMany, withData, debounce, throttle)
• Vue composables (useApi, useConfig)
• TypeScript types

🧱 Project Structure

src/
├── components/          # Vue 3 components
├── composables/         # Vue composables
├── styles/              # Design system styles and tokens
│   └── components/
├── services/            # API and domain services
├── models/              # Shared models and types
├── config/              # Library configuration
├── utils/               # Shared utilities
└── riot/                # Riot.js wrappers/helpers

🔧 Configuration

Vue and Riot wrappers share the same configuration API:

import { initLibraryConfig } from '@ambita/infoland-component-library/vue'
// or
import { initLibraryConfig } from '@ambita/infoland-component-library/riot'

initLibraryConfig({
  environment: 'beta',
  apiTimeout: 30000,
  enableLogging: true
})

📦 Package Exports

{
  "@ambita/infoland-component-library": "Vue components (default)",
  "@ambita/infoland-component-library/vue": "Vue 3 components",
  "@ambita/infoland-component-library/riot": "Riot.js wrappers",
  "@ambita/infoland-component-library/vue/style.css": "Vue styles",
  "@ambita/infoland-component-library/riot/style.css": "Riot styles"
}

📝 License

MIT