codevicecompany/laravel-ui-kit

This is my package laravel-ui-kit

1.0.2 2022-04-22 15:24 UTC

Requires

• php: ^8.1
• blade-ui-kit/blade-heroicons: ^1.3
• blade-ui-kit/blade-icons: ^1.2
• blade-ui-kit/blade-ui-kit: ^0.3.3
• illuminate/contracts: ^9.0
• spatie/laravel-package-tools: ^1.9.2

Requires (Dev)

• gajus/dindent: ^2.0
• nunomaduro/collision: ^6.0
• nunomaduro/larastan: ^2.0.1
• orchestra/testbench: ^7.0
• pestphp/pest: ^1.21
• pestphp/pest-plugin-laravel: ^1.1
• phpstan/extension-installer: ^1.1
• phpstan/phpstan-deprecation-rules: ^1.0
• phpstan/phpstan-phpunit: ^1.0
• phpunit/phpunit: ^9.5
• spatie/laravel-ray: ^1.29

MIT

• Amine TIYAL

• laravel
• CodeviceCompany
• laravel-ui-kit

README

This is where your description should go. Limit it to a paragraph or two. Consider adding a small example.

Installation

You can install the package via composer:

composer require codevicecompany/laravel-ui-kit

resources/js/app.js

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

tailwind.config.js

const defaultTheme = require("tailwindcss/defaultTheme");
const colors = require("tailwindcss/colors");

module.exports = {
    mode: "jit",
    
    content: [
        // vendors
        "./vendor/codevicecompany/laravel-ui-kit/resources/views/**/*.blade.php",
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ["Inter", ...defaultTheme.fontFamily.sans],
            },
            colors: {
                cyan: colors.cyan,
                facebook: "#4867aa",
                instagram: "#bc2a8d",
                twitter: "#2eb6f1",
                linkedin: "#1a77b5",
            },
            backgroundPosition: {
                "left-2": "left 0.5rem center",
                "right-2": "right 0.5rem center",
            },
        },
    },
};

You can publish the config file with:

php artisan vendor:publish --tag="laravel-ui-kit-config"

This is the contents of the published config file:

return [
];

Optionally, you can publish the views using

php artisan vendor:publish --tag="laravel-ui-kit-views"

Usage

<x-ui-app title="Page title">
    {{-- Your content here --}}
</x-ui-app>

Buttons

<x-ui-button icon="heroicon-o-user" href="#" hide-text-on-mobile>Click Me</x-ui-button>
<x-ui-button.default>Click Me</x-ui-button.default>
<x-ui-button.primary>Click Me</x-ui-button.primary>
<x-ui-button.success>Click Me</x-ui-button.success>
<x-ui-button.warning>Click Me</x-ui-button.warning>
<x-ui-button.danger>Click Me</x-ui-button.danger>
<x-ui-button.dark>Click Me</x-ui-button.dark>

Forms

The form wrapper

<x-ui-form-group
    name="website"
    label="Website"
    suffix=".com"
    prefix="www."
    prefixClass="class"
    hint="Hint"
    required
    bag="default"
    for="id"
>
    {{-- x-ui-input / x-ui-textarea / x-ui-select --}}
</x-ui-form-group>

<ui-input bag="bag" />

<ui-select bag="bag">
    <option value=""></option>
</ui-select>

<ui-textarea bag="bag">{{-- text --}}</ui-textarea>

@isset($name)
<x-ui-error :field="$name" :bag="$bag" id="{{$for}}-error">
    <ul>
        @foreach ($component->messages($errors) as $error)
        <li class="mt-2 text-sm text-red-600">{{ $error }}</li>
        @endforeach
    </ul>
</x-ui-error>
@endisset

Modal

<x-ui-button.primary x-on:click="$dispatch('openModal','modal-id')">Open</x-ui-button.primary>

<x-ui-modal id="modal-id">
    <x-slot name="footer"> Foorter </x-slot>
    {{-- Modal content --}}
</x-ui-modal>

Layouts

Sidebar

<x-ui-layout.sidebar title="Page">
    <x-slot name="actions"></x-slot>
    {{-- Your content here --}}
</x-ui-layout.sidebar>

to edit navs or profile dropdown publish the views then edit:

• resources/views/vendor/ui-kit/layout/sidebar/nav.blade.php
• resources/views/vendor/ui-kit/layout/sidebar/profile-dropdown.blade.php

Testing

composer test

License

The MIT License (MIT). Please see License File for more information.