jebamo

v0.0.20

Published

a month ago

Jebamo web component library

0High
0Medium
0Low

pgreen00

web component library typescript stencil jebamo

Jebamo

A modern, framework-agnostic web component library built with Stencil. Jebamo provides a comprehensive set of reusable UI components that work seamlessly across all major frameworks and vanilla JavaScript applications.

🚀 Features

Framework Agnostic: Built with Web Components, works with React, Angular, Vue, or no framework at all
TypeScript Support: Full TypeScript definitions for all components
Accessible: WCAG compliant components with proper ARIA attributes
Customizable: Extensive theming support with CSS custom properties
Lightweight: Tree-shakeable components for optimal bundle sizes
Modern: Built with modern web standards and best practices

📦 Packages

This monorepo contains the following packages:

jebamo - Core web component library
jebamo-angular - Angular-specific wrapper components
jebamo-docs - Documentation site built with Docusaurus
demo - Vite playground

🛠️ Installation

Core Library

npm install jebamo

Angular Integration

npm install jebamo-angular

🎯 Quick Start

Vanilla JavaScript/HTML

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="https://unpkg.com/jebamo@latest/dist/jebamo/jebamo.esm.js"></script>
</head>
<body>
  <je-button color="primary">Click me!</je-button>
</body>
</html>

Angular

// app.config.ts
import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
import { provideRouter, withComponentInputBinding, withViewTransitions } from '@angular/router';
import { routes } from './app.routes';
import { provideJebamo } from 'jebamo-angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideZonelessChangeDetection(),
    provideRouter(routes, withViewTransitions(), withComponentInputBinding()),
    provideJebamo() //<- add jebamo provider
  ]
};

//app.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { JeButton } from 'jebamo-angular';

@Component({
  selector: 'app-root',
  imports: [JeButton],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {

}

<!-- app.html -->
<je-button color="primary" (click)="handleClick()">
  Click me!
</je-button>

React

import 'jebamo/je-button';

function App() {
  return (
    <je-button color="primary" onClick={() => console.log('clicked')}>
      Click me!
    </je-button>
  );
}

📚 Documentation

Visit the documentation site for:

Component API reference
Usage examples
Theming guide
Tutorials
Installation instructions

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Built with Stencil
Documentation powered by Docusaurus
Popovers and tooltips powered by Floating UI
Date and calendar components utilize date-fns

Built with ❤️ by Peter Green