@xplor-education/core-stencil-components

v3.2.7

Published

a month ago

Xplor Design System - Professional Stencil web components library with advanced datatable, forms, and UI components

0High
0Medium
0Low

drleewarden

stencil web-components datatable component-library design-system ui-components pagination forms react vue angular

Xplor Component Library

A comprehensive, production-ready web components library built with Stencil. Features advanced components including a powerful datatable with pagination, sorting, and selection capabilities.

🚀 Features

✨ 50+ Components - Buttons, forms, modals, datatables, and more
📊 Advanced Datatable - Sorting, pagination, row selection, and custom cell rendering
🎨 Framework Agnostic - Works with React, Vue, Angular, or vanilla JavaScript
🔧 TypeScript Support - Full type definitions included
📱 Responsive - Mobile-friendly components
♿ Accessible - WCAG compliant
🎭 Customizable - Themeable with CSS variables
📦 Tree Shakeable - Import only what you need

📦 Installation

npm install @xplor-education/component-library

yarn add @xplor-education/component-library

🔨 Usage

Vanilla JavaScript / HTML

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="https://unpkg.com/@xplor-education/[email protected]/dist/xplor-component-library/xplor-component-library.esm.js"></script>
</head>
<body>
  <xplor-button text="Click Me" type="primary"></xplor-button>
</body>
</html>

React

npm install @xplor-education/component-library xplor-component-library-react

import { XplorButton } from 'xplor-component-library-react';

function App() {
  return <XplorButton text="Click Me" type="primary" />;
}

Vue 3

npm install @xplor-education/component-library xplor-component-library-vue

<template>
  <xplor-button text="Click Me" type="primary"></xplor-button>
</template>

<script>
import { defineCustomElements } from '@xplor-education/component-library/loader';

defineCustomElements();
</script>

Angular

npm install @xplor-education/component-library xplor-component-library-angular

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { defineCustomElements } from '@xplor-education/component-library/loader';

defineCustomElements();

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

🎯 Component Examples

Datatable with Pagination (New in v2.0!)

<xplor-datatable id="myTable" can-select="true" striped="true"></xplor-datatable>

<script>
  const table = document.getElementById('myTable');
  
  table.headers = [
    { text: 'Name', value: 'name', sortable: true },
    { text: 'Email', value: 'email', sortable: true },
    { text: 'Status', value: 'status', align: 'center' }
  ];
  
  table.items = [
    { name: 'John Doe', email: '[email protected]', status: 'Active' },
    { name: 'Jane Smith', email: '[email protected]', status: 'Pending' }
  ];
  
  table.pagination = {
    page: 1,
    perpage: 10,
    total: 50
  };
  
  table.addEventListener('xplorSelectionChange', (e) => {
    console.log('Selected items:', e.detail);
  });
  
  table.addEventListener('paginationChange', (e) => {
    console.log('Page changed:', e.detail);
  });
</script>

Buttons

<xplor-button text="Primary" type="primary"></xplor-button>
<xplor-button text="Secondary" type="secondary"></xplor-button>
<xplor-button text="Ghost" type="ghost"></xplor-button>

Form Inputs

<xplor-input-text label="Email" placeholder="Enter your email" type="email"></xplor-input-text>
<xplor-input-text-area label="Message" placeholder="Type your message"></xplor-input-text-area>
<xplor-checkbox label="Accept terms"></xplor-checkbox>
<xplor-input-select label="Country" placeholder="Select country"></xplor-input-select>

Autocomplete & Combobox

<xplor-autocomplete id="autocomplete" label="Search" clearable="true"></xplor-autocomplete>
<xplor-combobox id="combobox" label="Tags" multiple="true"></xplor-combobox>

<script>
  document.getElementById('autocomplete').items = [
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' }
  ];
</script>

Date & Time Pickers

<xplor-date-picker label="Select Date" clearable="true"></xplor-date-picker>
<xplor-time-picker label="Select Time" show-seconds="true"></xplor-time-picker>

Modals & Dialogs

<xplor-button text="Open Modal" onclick="document.getElementById('myModal').open = true"></xplor-button>
<xplor-modal id="myModal" title="My Modal">
  <p>Modal content goes here</p>
</xplor-modal>

📚 Available Components

Layout & Display Components

xplor-section-card - Card container
xplor-section-heading - Section headers
xplor-avatar - User avatars
xplor-avatar-and-name - Combined avatar and name display
xplor-text-bubble - Message bubbles
xplor-badge-* - Status badges (active, inactive, archived, etc.)
xplor-links - Navigation links
xplor-tooltip - Tooltips

Interactive Components

xplor-dropdown - Dropdown menus
xplor-table - Basic data table
xplor-modal - Modal dialogs
xplor-modal-persistent - Non-dismissible modals
xplor-alert-dialog - Alert dialogs
xplor-alert-message - Alert messages
xplor-assistant - AI assistant widget
xplor-chat-widget - Chat interface

Form Components

xplor-input-text - Text input
xplor-input-text-secondary - Rounded text input
xplor-input-text-area - Multi-line text
xplor-input-title - Title input
xplor-input-select - Select dropdown
xplor-input-search - Search input
xplor-input-send - Send input with button
xplor-input-file - File upload
xplor-checkbox - Checkbox
xplor-inline-checkbox - Inline checkbox
xplor-inline-switch - Toggle switch
xplor-autocomplete - Searchable select
xplor-combobox - Combo box with custom values
xplor-date-picker - Date selection
xplor-time-picker - Time selection
xplor-inline-date-picker - Inline date picker
xplor-file-upload - Advanced file upload

Navigation & Organization

xplor-expansion-panels - Accordion panels
xplor-nav-tabs - Navigation tabs
xplor-btn-toggle-group - Toggle button groups

Advanced Datatable ⭐ NEW in v2.0

xplor-datatable - Full-featured data table with:
- ✅ Sorting (ascending/descending)
- ✅ Pagination with configurable items per page
- ✅ Row selection with checkboxes
- ✅ Loading states with skeleton loader
- ✅ Fixed/sticky headers
- ✅ Horizontal and striped row styles
- ✅ Custom column configuration (width, alignment, sortable)
- ✅ Empty state handling
- ✅ Comprehensive event system
- ✅ Server-side data support

🎨 Theming

Components can be customized using CSS variables:

xplor-button {
  --button-primary-bg: #008480;
  --button-primary-text: white;
  --button-border-radius: 8px;
}

xplor-datatable {
  --datatable-border-color: #e3e4e5;
  --datatable-header-bg: #f7f8f9;
  --datatable-row-hover: #f5f5f5;
  --datatable-selected-bg: rgba(0, 132, 128, 0.08);
  --datatable-primary-color: #008480;
}

📖 Documentation

For detailed documentation on each component, see the component's readme file in the src/components directory.

🔧 Development

# Install dependencies
npm install

# Start development server
npm start

# Build for production
npm run build

# Run Storybook
npm run storybook

📦 Building and Publishing

# Build the library
npm run build

# Create tarball for testing
npm run pack

# Publish to npm
npm run publish:npm

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines before submitting PRs.

📝 License

🔗 Links

📋 Changelog

See CHANGELOG.md for version history.

Built with ❤️ using Stencil