Maxill UI⚡️

Maxill UI is a component library based on the "Web Components" architecture (more specifically, Custom Elements) that runs in all browsers and in all libraries and frameworks such as: React, Angular, Svelte, Vue, etc.

This library with styles from bootstrap v 5.3

Getting Started

Project repository https://github.com/MarioTavarezMaxill/maxill-ui

List of internal project commands

Run Develop Mode 💻

npm run start

Storybook 🎨

npm run storybook

Unit Testing 🧪

npm run test

Build Component Library 🏗️

npm run build

Install Library 🚀

npm install --save maxill-ui@latest

Documentation

Maxill UI components

https://63adaf79cb9e1198036f2190-mgcokwbftn.chromatic.com/?path=/story/example-introduction--page

Docs

https://maxims.atlassian.net/wiki/spaces/H2/pages/118292567/Web+Components+Library+Maxill+UI

Usage and Installation 🧑🏻‍💻 👩🏻‍💻

To start using the components, please follow these steps:

🎨 Angular

1. Open the file main.ts and import defineCustomElements

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

import { defineCustomElements } from 'maxill-ui/loader';

platformBrowserDynamic()
	.bootstrapModule(AppModule)
	.catch(err => err);

defineCustomElements(window);

2. Add the respective Types of each component. When importing the library, it shows that the Type Sizes is being imported, which contains the types: "Xs", "Small" , "Medium" and "Large"

import { Component } from '@angular/core';
import { Sizes } from 'maxill-ui/dist/types/components/atoms/Button/Button.types';

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.scss'],
})
export class AppComponent {
	title = 'boilerplate';
	size: keyof typeof Sizes = 'Small';

	onSave() {
		alert('Say Hi 👋');
	}
}

3. Add your element to your .html component

<button-maxll [size]="size" (click)="onSave()">Click Me</button-maxll>

License

---

No License for the moment