README

NsipeUI - PHP UI Component Library

NsipeUI is a comprehensive PHP-based UI component library that provides a simple, fluent interface for building modern web interfaces. Built with a component-based architecture, it offers pre-styled Bootstrap 5 compatible components with additional advanced features. It is a package for Machinjiri Framework

Features

· Bootstrap 5 Integration - All components are styled with Bootstrap 5 · Component-Based Architecture - Modular and reusable UI components · Responsive Layout System - Built-in grid and layout components · Fluent Interface - Chainable methods for easy configuration · Quick Form Building - Rapid form creation with validation · Data Tables - Interactive tables with search functionality · Notification System - Alerts, toasts, and notifications · File Upload Components - Upload with preview functionality · Modal System - Dynamic modal forms and dialogs · Page Builder - Structured page layout system

Installation

# Ensure Composer is installed
composer require mlangeni/machinjiri-nsipeui

Quick Start

use Mlangeni\Machinjiri\NsipeUI\NsipeUI;

// Create a simple button
echo NsipeUI::button('Click Me');

// Create a primary button
echo NsipeUI::primaryButton('Submit');

// Create an alert
echo NsipeUI::alert('Welcome message!');

Basic Components

Buttons

NsipeUI::button('Click Me', ['class' => 'btn-lg']);
NsipeUI::primaryButton('Submit');

Forms and Inputs

NsipeUI::textInput('username', 'Username');
NsipeUI::emailInput('email', 'Email Address');
NsipeUI::passwordInput('password', 'Password');
NsipeUI::textarea('message', 'Your Message');
NsipeUI::select('country', ['options' => ['US' => 'USA', 'UK' => 'United Kingdom']]);

Cards

NsipeUI::card()
    ->title('Card Title')
    ->text('Card content goes here')
    ->render();

Alerts

NsipeUI::alert('Information message');
NsipeUI::successAlert('Operation successful!');

Layout System

Containers

NsipeUI::container(); // Fixed container
NsipeUI::fluidContainer(); // Full-width container
NsipeUI::responsiveContainer('md'); // Responsive container

Grid System

echo NsipeUI::grid()
    ->row([
        NsipeUI::column(['md' => 6])->addContent('Left Column'),
        NsipeUI::column(['md' => 6])->addContent('Right Column')
    ])
    ->render();

Pre-defined Layouts

NsipeUI::twoColumnLayout(['left' => 'Content', 'right' => 'Sidebar']);
NsipeUI::threeColumnLayout(['left' => 'Left', 'middle' => 'Main', 'right' => 'Right']);
NsipeUI::heroLayout(['title' => 'Hero Title', 'subtitle' => 'Hero subtitle']);
NsipeUI::formLayout(['fields' => $fields]);
NsipeUI::cardGridLayout(['cards' => $cardsArray]);

Advanced Components

File Upload

NsipeUI::fileUpload('document', 'Upload Document');
NsipeUI::multiFileUpload('documents', 'Multiple Files');
NsipeUI::fileUploadWithPreview('image', 'Upload Image');

Notifications

NsipeUI::notification('User created successfully', 'success');
NsipeUI::toast('New Message', 'You have a new notification', 'info');

Data Tables

$headers = ['ID', 'Name', 'Email'];
$data = [
    [1, 'John Doe', 'john@example.com'],
    [2, 'Jane Smith', 'jane@example.com']
];

NsipeUI::dataTable($headers, $data);
NsipeUI::searchableDataTable($headers, $data);

Quick Form Builder

$fields = [
    ['name' => 'name', 'label' => 'Full Name', 'type' => 'text'],
    ['name' => 'email', 'label' => 'Email', 'type' => 'email'],
    ['name' => 'country', 'label' => 'Country', 'type' => 'select', 
     'options' => ['US' => 'USA', 'UK' => 'UK']]
];

NsipeUI::quickForm($fields, '/submit', 'post');

Modal Forms

$fields = [
    ['name' => 'username', 'label' => 'Username'],
    ['name' => 'password', 'label' => 'Password', 'type' => 'password']
];

NsipeUI::modalForm('loginModal', 'Login', $fields, [
    'submitText' => 'Login',
    'action' => '/login'
]);

Page Builder

$sections = [
    [
        'type' => 'hero',
        'content' => NsipeUI::heroLayout(['title' => 'Welcome'])->render(),
        'classes' => 'mb-5'
    ],
    [
        'type' => 'content',
        'content' => '<p>Main content here</p>'
    ]
];

NsipeUI::page($sections, ['container' => 'fluid']);

Action Cards

NsipeUI::actionCard(
    'User Profile',
    'Manage your profile settings',
    [
        ['label' => 'Edit', 'type' => 'primary', 'url' => '/edit'],
        ['label' => 'Delete', 'type' => 'danger', 'url' => '/delete']
    ]
);

Breadcrumb Builder

NsipeUI::breadcrumbBuilder([
    'Home' => '/',
    'Products' => '/products',
    'Category' => '/products/category'
], 'Current Product');

Requirements

· PHP 7.4 or higher · Bootstrap 5 CSS & JS (included via CDN or local assets) · jQuery (optional, for some interactive components) · Composer for autoloading

Dependencies

The library requires the following internal components:

· Mlangeni\Machinjiri\Components\ComponentsFactory · Mlangeni\Machinjiri\Components\Layout\Layout

Browser Support

· Chrome (latest) · Firefox (latest) · Safari (latest) · Edge (latest) · Opera (latest)

Contributing

Fork the repository
Create a feature branch
Commit your changes
Push to the branch
Create a Pull Request

License

MIT

Support

For issues, questions, or feature requests, please:

Check the documentation
Search existing issues
Create a new issue with details

Complete Example

<?php
require_once 'vendor/autoload.php';

use Mlangeni\Machinjiri\NsipeUI\NsipeUI;

// Build a complete page
$page = NsipeUI::container()
    ->addContent(
        NsipeUI::heroLayout([
            'title' => 'Welcome to NsipeUI',
            'subtitle' => 'Build beautiful interfaces quickly'
        ])->render()
    )
    ->addContent(
        NsipeUI::row([
            NsipeUI::column(['md' => 4])->addContent(
                NsipeUI::card()->title('Feature 1')->text('Description')->render()
            ),
            NsipeUI::column(['md' => 4])->addContent(
                NsipeUI::card()->title('Feature 2')->text('Description')->render()
            ),
            NsipeUI::column(['md' => 4])->addContent(
                NsipeUI::card()->title('Feature 3')->text('Description')->render()
            )
        ])->render()
    )
    ->render();

echo $page;

Notes

· All components are escape-safe (using htmlspecialchars where appropriate) · Components are designed to be accessible (ARIA attributes included) · The library is extensible - you can create custom components by extending the base classes · Styles can be customized by overriding Bootstrap 5 CSS variables

For more detailed API documentation, refer to the source code comments.

machinjiri / nsipe-ui

Maintainers

Package info

Statistics

Security

README