@lbc/ui-components

LBC UI Component Library - Vue 3 + Quasar components for LBC applications

📦 Installation

npm install @lbc/ui-components
# or
yarn add @lbc/ui-components
# or
pnpm add @lbc/ui-components

🛠️ Setup

1. Install Peer Dependencies

npm install vue@^3.4.0 quasar@^2.16.0 @quasar/extras@^1.16.0 pinia@^3.0.0 vue-router@^4.0.0 axios@^1.2.0

2. Quick Setup with Vue Plugin (Recommended)

// main.js - Automatic component registration
import { createApp } from 'vue';
import { LbcUIPlugin } from '@lbc/ui-components';
import '@lbc/ui-components/dist/style.css';

const app = createApp(App);

// Register all LBC components automatically
app.use(LbcUIPlugin, {
  // Optional: Configure asset base URL if needed
  assetBaseUrl: '/your-custom-assets-path',
  // Optional: Add prefix to component names
  prefix: 'My',
  // Optional: Register only specific components
  components: ['LbcCarousel', 'LbcBookingFlow', 'LbcFaq'],
});

app.mount('#app');

3. Manual Component Import (Tree-shaking)

// Import individual components for tree-shaking
import { LbcCarousel, LbcBookingFlow, LbcFaq } from '@lbc/ui-components';
import '@lbc/ui-components/dist/style.css';

// In your component
export default {
  components: {
    LbcCarousel,
    LbcBookingFlow,
    LbcFaq,
  },
};

4. Assets and Images Setup

The library includes sample images that work out of the box:

// Import sample data with images
import {
  sampleCarouselImages,           // For development - direct paths
  sampleCarouselImagesLibrary,    // For library consumers - asset paths
  configureLbcAssets
} from '@lbc/ui-components';

// For development/standalone use:
<LbcCarousel :images="sampleCarouselImages" />

// For library consumers (configure assets first):
configureLbcAssets('/your-assets-folder');
<LbcCarousel :images="sampleCarouselImagesLibrary" />

5. TypeScript Support

// Full TypeScript support included
import type {
  LbcUIPluginOptions,
  BookingTypes,
  ConsigneeTypes,
  ShipperTypes,
} from '@lbc/ui-components';

🎯 Available Components

Customer-Facing Components

• LbcCarousel - Image slideshow with auto-play
• LbcRateCalculator - Shipping rate calculator
• LbcBookingFlow - Complete booking workflow
• LbcBranchFinder - Location finder with maps
• LbcGoogleReviews - Customer reviews display
• LbcProhibited - Restricted items list
• LbcFaq - Frequently asked questions
• LbcTracking - Package tracking

Navigation Components

• LbcUnifiedHeader - Unified header with auth

Internal Components

• LbcBookingMain - Core booking component
• LbcPickupDetails - Pickup details form
• LbcBookingCompleted - Booking confirmation
• LbcPickupDateList - Date selection

💡 Usage Examples

Quick Start - Complete Setup

// main.js - Complete setup example
import { createApp } from 'vue';
import { Quasar } from 'quasar';
import { createPinia } from 'pinia';
import { createRouter, createWebHistory } from 'vue-router';
import { LbcUIPlugin } from '@lbc/ui-components';

// Import required styles
import '@quasar/extras/material-icons/material-icons.css';
import 'quasar/src/css/index.sass';
import '@lbc/ui-components/dist/style.css';

import App from './App.vue';

const app = createApp(App);

// Setup Quasar
app.use(Quasar, {
  plugins: {}, // import Quasar plugins and add here
});

// Setup Pinia for state management
app.use(createPinia());

// Setup Vue Router
const router = createRouter({
  history: createWebHistory(),
  routes: [
    // your routes here
  ],
});
app.use(router);

// Setup LBC UI Components (all components auto-registered)
app.use(LbcUIPlugin);

app.mount('#app');

Basic Carousel with Sample Images

<template>
  <LbcCarousel
    :images="sampleCarouselImages"
    :auto-play-interval="5000"
    :show-arrows="true"
    :show-indicators="true"
    @slide-change="handleSlideChange"
  />
</template>

<script setup>
// Components are auto-registered via plugin, no import needed!
// Or import manually: import { LbcCarousel, sampleCarouselImages } from '@lbc/ui-components';
import { sampleCarouselImages } from '@lbc/ui-components';

const handleSlideChange = (index) => {
  console.log('Slide changed to:', index);
};
</script>

Complete Service Center

<template>
  <div class="service-center">
    <!-- All-in-one service center component -->
    <LbcInfoToolbar
      :show-rate-calculator="true"
      :show-booking="true"
      :show-branch-finder="true"
      :show-tracking="true"
      :show-faq="true"
      :show-prohibited="true"
      :show-reviews="true"
    />
  </div>
</template>

<script setup>
// No imports needed - components auto-registered via plugin!
</script>

Booking Flow

<template>
  <LbcBookingFlow
    :zip-code="userZipCode"
    :shipper="shipperData"
    :user="userData"
    :initially-expanded="false"
    @booking-completed="onBookingCompleted"
  />
</template>

<script setup>
import { LbcBookingFlow } from '@lbc/ui-components';

const userZipCode = '94080';
const shipperData = {
  /* shipper data */
};
const userData = {
  /* user data */
};

const onBookingCompleted = (data) => {
  console.log('Booking completed:', data);
};
</script>

FAQ Component

<template>
  <LbcFaq :faqs="faqData" :show-contact="true" @item-toggled="onFaqToggled" />
</template>

<script setup>
import { LbcFaq } from '@lbc/ui-components';

const faqData = [
  {
    question: 'How do I track my package?',
    answer: 'Use our tracking component with your tracking number.',
  },
];

const onFaqToggled = (index, expanded) => {
  console.log(`FAQ ${index} ${expanded ? 'opened' : 'closed'}`);
};
</script>

🖼️ Assets and Images

Included Sample Assets

The library includes sample images for quick prototyping:

• Carousel Images: image1.jpg, image2.jpg, image3.jpg
• LBC Logo: lbclogo.png

Using Sample Images

import { sampleCarouselImages, getAssetPath } from '@lbc/ui-components';

// Use predefined sample images
<LbcCarousel :images="sampleCarouselImages" />

// Or create custom image data with helper
const customImages = [
  {
    src: getAssetPath('image1.jpg'),
    alt: 'Custom alt text',
    title: 'Custom title'
  }
];

Custom Asset Configuration

import { configureLbcAssets } from '@lbc/ui-components';

// Configure custom asset path (before using components)
configureLbcAssets('/your-custom-assets-folder');

// Or configure via plugin
app.use(LbcUIPlugin, {
  assetBaseUrl: '/your-custom-assets-folder',
});

🎨 Styling

The components come with built-in SCSS styles that use CSS custom properties for easy theming:

:root {
  --lbc-red: #dc2626;
  --lbc-red-dark: #b91c1c;
  --text-dark: #111827;
  --text-muted: #4b5563;
}

LBCUI CSS Classes

All components use prefixed CSS classes to avoid conflicts:

.lbcui-carousel {
  /* Carousel styles */
}
.lbcui-booking-flow {
  /* Booking flow styles */
}
.lbcui-rate-calculator {
  /* Calculator styles */
}
/* And many more... */

📋 Requirements

Peer Dependencies (Auto-installed with library)

• Vue: ^3.4.0
• Quasar: ^2.16.0
• @quasar/extras: ^1.16.0
• Pinia: ^3.0.0 (for state management)
• Vue Router: ^4.0.0 (for navigation components)
• Axios: ^1.2.0 (for API calls)
• Firebase: ^11.0.0 (for authentication)
• FontAwesome: ^6.7.0 (for icons)

Environment

• Node.js: ^18 || ^20 || ^22 || ^24 || ^26 || ^28

What's Included

✅ Self-contained: All API endpoints configured
✅ Assets included: Sample images for prototyping
✅ TypeScript: Full type definitions
✅ Vue plugin: Auto-registration of components
✅ Tree-shakable: Import only what you need
✅ No configuration: Works out of the box

🔧 Development

For component library development:

# Clone the repository
git clone https://github.com/your-org/lbc-ui.git
cd lbc-ui

# Install dependencies
npm install

# Start development server
npm run dev

# Build library for distribution
npm run build:lib

# Lint code
npm run lint

# Format code
npm run format

📝 License

MIT © Hugo Bonilla

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📞 Support

For support, please contact: [email protected]

Made with ❤️ for LBC applications