muhsenmaqsudi/laratify

Laratify is a Laravel 7 UI Library with beautifully handcrafted components using TailwindCSS & AlpineJS

v0.2.0 2020-05-05 12:34 UTC

Requires

• php: ^7.2.5
• ext-json: *
• laravel/framework: ^7.0
• laravel/ui: ^2.0

Requires (Dev)

• orchestra/testbench: ^5.1

MIT

• muhsenmaqsudi

README

Laratify is a Laravel 7 package which includes essential components to make creating forms, table and custom ui's for your laravel blade base application a breeze.
This package requires Node.js to be installed in order to run npm commands and It Uses TailwindCSS as It's UI CSS styles, and it's backed with AlpineJS as it's javascript reactive power.

Useful links:

• Support: GitHub Issues
• Contribute: GitHub Pulls

Installation

Require Laratify:

composer require muhsenmaqsudi/laratify

Publishing Vendor Assets

php artisan vendor:publish --tag="laratify-config"
php artisan vendor:publish --tag="laratify-views"

Add TailwindCSS & AlpineJS UI Preset Scaffolding

php artisan laratify:ui

With Authentication Scaffolding

php artisan laratify:ui --auth

Installing TailwindCSS & AlpineJS and compiling them

npm install && npm run dev

Laratify Components

Laratify offers useful components to make building your app ui fast & easy. See below examples of each component.

Available Colors:

All of the default TailwindCSS color pallets are available for all the components where color matters.

Black, White, Gray, Red, Orange, Yellow, Green, Teal, Blue, Indigo, Purple & Pink

All the colors except Black & White comes with a 100 to 900 color shades that you can use like this {color-name}-{shade-no}

Alert:

    <x-laratify-alert text-color="black"
                      bg-color="green-500">
        Your alert message goes here
    </x-laratify-alert>

Badge:

    <x-laratify-badge text-color="gray-700"
                      bg-color="teal-200"
                      rounded>
        Your text goes here
    </x-laratify-badge>

Button:

    <x-laratify-button variant="pink-500"
                       size="lg"
                       outline
                       rounded
                       :events="['onclick' => 'alert(\'clicked\')']"
>
        Button Title
    </x-laratify-button>

• Note: available sizes: 'sm', 'md', 'lg'

Input:

    <x-laratify-input name="email"
                      type="email"
                      label="Email:"
                      id="email_id"
                      placeholder="Enter your email"
                      :value="old('email', $data->email ?? '')">
    </x-laratify-input>

• for disabling the input set disabled attributes, for readonly input set readonly attribute**

    <x-laratify-input disabled readonly></x-laratify-input>

Checkbox:

    <x-laratify-checkbox name="terms"
                         label="accept terms & conditions"
                         checkbox-label="accept"
                         id="terms_id"
                         :value="old('terms', $data->terms ?? '')">
    </x-laratify-checkbox>

• for disabling the checkbox set disabled attributes \
• checkbox attributes should have boolean migration columns.

Select:

    <x-laratify-select name="option"
                       label="Option Label:"
                       first-option="Select your option"
                       :options="[1 => 'option1', 2 => 'option2']"
                       :value="old('option', $data->option ?? '')">
    </x-laratify-select>

• if the options are an associative array, the keys are used as the labels and the values as the values. For sequential arrays, the values are used for both the labels and values.
• :options="['option1', 'option2', 'option3']" => options with sequential array
• :options="[1 => 'option1', 2 => 'option2']" => options with associate array

File:

    <x-laratify-file name="avatar"
                     id="upload"
                     label="Upload your avatar"
                     variant="indigo-500">
    </x-laratify-file>

Textarea:

    <x-laratify-textarea name="body"
                         label="Text Body:"
                         placeholder="Your text body goes here"
                         :value="old('body', $data->body ?? '')">
    </x-laratify-textarea>

Radios:

    <x-laratify-radios name="option"
                       :options="['option1', 'option2', 'option3']"
                       :value="old('option', $data->option ?? '')">
    </x-laratify-radios>

• :options="['option1', 'option2', 'option3']" => options with sequential array
• :options="[1 => 'option1', 2 => 'option2']" => options with associate array

Dropdown:

    <x-laratify-dropdown name="My Dropdown" :links="[
        'URL link' => '/auth/login', '|', 'Google' => 'https://google.com', 'Login' => 'login'
    ]"
                         bg-color="teal-500"
    >
    </x-laratify-dropdown>

• '|' is the separator in the drop down list, so use it when you want to separate links

Dialog:

    <x-laratify-dialog size="lg" scrollable no-transition no-header no-footer no-close close-title="Cancel" ok-title="Submit">
        <x-slot name="activator">
            <x-laratify-button :events="['click' => 'toggleDialog()']" variant="red-500" outline>Open Dialog</x-laratify-button>
        </x-slot>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad architecto aut enim eos error eveniet explicabo
        ipsa ipsam laudantium minima nisi obcaecati omnis quam qui reprehenderit sapiente sunt, tenetur veniam.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet blanditiis deserunt, dolore harum maxime nam
        nulla quasi voluptate? Adipisci error illum laudantium magnam praesentium quibusdam sit ut. Dolor, dolore,
        rem.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aperiam, autem corporis deserunt dolores ea
        eligendi et impedit magni mollitia natus necessitatibus odio quae recusandae reiciendis sunt suscipit vel
        voluptas?
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias, aspernatur atque aut
        consequuntur cumque deleniti distinctio dolorum et facere fugit iusto labore maxime nemo quam quas
        repellendus, reprehenderit voluptatibus!

        <x-slot name="footer">
            <x-laratify-button :events="['click' => 'toggleDialog()']" variant="green-500" rounded>Save</x-laratify-button>
        </x-slot>
    </x-laratify-dialog>

Tooltip:

    <x-laratify-button id="elButton">Element</x-laratify-button>
    <x-laratify-button id="idButton">Id</x-laratify-button>
    <x-laratify-tooltip content="Tooltip with id" placement="left" append-to="button" no-arrow />
    <x-laratify-tooltip content="Tooltip with element" placement="top-start" append-to="#idButton" />

Available placements:

• top, bottom, right, left,
• {top,bottom,right,left}-start, {top,bottom,right,left}-end'

Note: remember to put tooltip after the parent element

Grids & Grid

    <x-laratify-grids :cols="['all' => 3, 'sm' => 2]" :rows="['all' => 5, 'md' => 3]" :gaps="['all'=> 2, 'md' => 20]">
        <x-laratify-grid :col-start="['all' => 1, 'md'=>2]" :col-end="['all' => 2, 'sm' => 1]" :row-start="['all' => 2, 'lg' => 4]" :row-end="['all' => 4]">
            <div class="h-full bg-blue-500">2</div>
        </x-laratify-grid>
        <x-laratify-grid>
            <div class="h-full bg-red-500">1</div>
        </x-laratify-grid>
        <x-laratify-grid>
            <div class="h-full bg-black">3</div>
        </x-laratify-grid>
        <x-laratify-grid>
            <div class="h-full bg-gray-500">4</div>
        </x-laratify-grid>
    </x-laratify-grids>

Container, Col & Row

    <x-laratify-container class="py-5">
        <x-laratify-row class="h-64 border border-2 border-blue-500" flex-dir="col" align="center" justify="end">
            <x-laratify-col class="px-8" cols="6" md="4" xl="4">
                <div class="text-center bg-blue-400 p-2">1</div>
            </x-laratify-col>
            <x-laratify-col cols="6" md="4" xl="4" order="first">
                <div class="text-center bg-green-300 p-2">2</div>
            </x-laratify-col>
            <x-laratify-col cols="6" md="4" xl="4" flex="grow">
                <div class="text-center bg-green-200 p-2">3</div>
            </x-laratify-col>
        </x-laratify-row>
        <x-laratify-row class="h-64 my-4 border border-2 border-blue-500" align="center" justify="center">
            <x-laratify-col cols="3">
                <div class="text-center bg-yellow-400 p-2">A</div>
            </x-laratify-col>
            <x-laratify-col cols="3" align-self="end">
                <div class="text-center bg-indigo-400 p-2">B</div>
            </x-laratify-col>
            <x-laratify-col cols="3">
                <div class="text-center bg-teal-400 p-2">C</div>
            </x-laratify-col>
        </x-laratify-row>
    </x-laratify-container>

• flex options: initial,1,auto,none,grow,grow-0,shrink,shrink-0,
• order options: 1,2,3,4,5,6,7,8,9,10,11,12, first,last,none
• align-self options: auto, start, center, end, stretch
• flex-dir options: row, row-reverse, col, col-reverse
• align option: stretch, start, center, end, baseline (flex's align-items)
• justify options: start, center, end, between, around
• align-content options: start, center, end, between, around

Card

    <x-laratify-container class="py-5">
        <x-laratify-row class="h-full my-4" wrap-cols>
            <x-laratify-col cols="full" sm="6" md="4" class="p-2" flex="shrink-0">
                <x-laratify-card title="Card Title" subtitle="Card Subtitle" title-class="text-center" subtitle-class="text-center">
                    <x-slot name="title">
                        <div class="text-blue-500">Card Title</div>
                    </x-slot>
                    <div class="text-sm leading-5 text-black px-4 py-5">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores cumque eos exercitationem
                        ipsam
                        quasi ratione? At consequatur deleniti exercitationem in labore laudantium odit quod repellat.
                        Deleniti
                        illo quod repellat.
                    </div>
                </x-laratify-card>
            </x-laratify-col>
            <x-laratify-col cols="full" sm="6" md="4" class="p-2" flex="shrink-0">
                <x-laratify-card title="Card Title" subtitle="Card Subtitle">
                    <div class="text-sm leading-5 text-gray-600 px-4 py-5">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores cumque eos exercitationem
                        ipsam
                        quasi ratione? At consequatur deleniti exercitationem in labore laudantium odit quod repellat.
                        Deleniti
                        illo quod repellat.
                    </div>
                </x-laratify-card>
            </x-laratify-col>
            <x-laratify-col cols="full" sm="6" md="4" class="p-2" flex="shrink-0">
                <x-laratify-card title="Card Title" subtitle="Card Subtitle">
                    <div class="text-sm leading-5 text-gray-600 px-4 py-5">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores cumque eos exercitationem
                        ipsam
                        quasi ratione? At consequatur deleniti exercitationem in labore laudantium odit quod repellat.
                        Deleniti
                        illo quod repellat.
                    </div>
                </x-laratify-card>
            </x-laratify-col>
        </x-laratify-row>
        
        <x-laratify-card title="Card Title" subtitle="Card Subtitle">
            <dl>
                <div class="bg-gray-100 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm leading-5 font-medium text-gray-500">
                        Full name
                    </dt>
                    <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
                        Muhsen Maqsudi
                    </dd>
                </div>
                <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm leading-5 font-medium text-gray-500">
                        Job Title
                    </dt>
                    <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
                        Backend Developer
                    </dd>
                </div>
            </dl>
        </x-laratify-card>
    </x-laratify-container>

Navbar

    <x-laratify-navbar :links="['URL link' => '/auth/login', 'Google' => 'https://google.com', 'Login' => 'login']">
        <x-slot name="logo">
            <img class="block lg:hidden h-8 w-auto"
                 src="https://tailwindui.com//img/logos/workflow-mark-on-dark.svg" alt=""/>
            <img class="hidden lg:block h-8 w-auto"
                 src="https://tailwindui.com/img/logos/workflow-logo-on-dark.svg" alt=""/>
        </x-slot>
        <x-slot name="profileDropdown">
            <a href="#"
               class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Your
                Profile</a>
            <a href="#"
               class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Settings</a>
            <a href="#"
               class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out">Sign
                out</a>
        </x-slot>
    </x-laratify-navbar>

Table

    <x-laratify-table stripped hover 
        :columns="[
            'name' => 'Name',
            'title' => 'Title',
            'status' => 'Status',
            'role' => 'Role'
         ]"
        :rows="[
            [
                'id' => 1,
                'name' => 'Bernard Lane',
                'title' => 'Human Resources',
                'status' => 'Active',
                'role' => 'Owner'
            ],
            [
                'id' => 2,
                'name' => 'Muhsen Maqsudi',
                'title' => 'Backend Developer',
                'status' => 'Inactive',
                'role' => 'Admin'
            ],
            [
                'id' => 3,
                'name' => 'Muhsen Maqsudi',
                'title' => 'Backend Developer',
                'status' => 'Inactive',
                'role' => 'Admin'
            ],
         ]"
        :actions="[
                'show' => 'get_view_route_name',
                'edit' => 'get_edit_route_name',
                'delete' => 'get_edit_route_delete'
         ]"
         actions-custom-view="components.partials.my-action"
    >
    </x-laratify-table>

Tabs & Tab

    <x-laratify-tabs :navs="['first', 'second', 'third']">
        <x-laratify-tab id="first">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor odit rerum voluptatibus. Ad alias
            aperiam beatae culpa delectus, dolor eligendi ipsam minus necessitatibus nihil numquam odit provident ut
            vitae voluptatibus?
        </x-laratify-tab>
        <x-laratify-tab id="second">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aperiam aut dicta dolore dolorem
            eligendi expedita in ipsa, ipsum labore maiores porro ratione rem rerum sed sit tempora velit
            voluptatum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, commodi, delectus dicta dignissimos
            dolorum eaque error excepturi expedita nam neque non nulla praesentium quae quaerat quo rerum saepe
            veritatis, voluptatum.
        </x-laratify-tab>
        <x-laratify-tab id="third">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aperiam aut dicta dolore dolorem
            eligendi expedita in ipsa, ipsum labore maiores porro ratione rem rerum sed sit tempora velit
            voluptatum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, commodi, delectus dicta dignissimos
            dolorum eaque error excepturi expedita nam neque non nulla praesentium quae quaerat quo rerum saepe
            veritatis, voluptatum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, aliquam asperiores assumenda at corporis
            cum dolor ea id, impedit ipsa laborum nobis obcaecati ratione rem reprehenderit, unde voluptatem
            voluptatum. Quaerat!
        </x-laratify-tab>
    </x-laratify-tabs>

Collapse

        <x-laratify-collapse class="w-1/2 m-2">
            <x-slot name="activator">
                <button
                    class="bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1"
                    @click="isOpen = !isOpen">
                    Collapse
                </button>
            </x-slot>
            <x-laratify-card title="Card Title" subtitle="Card Subtitle">
                <div class="text-sm leading-5 text-gray-600 px-4 py-5">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab asperiores cumque eos exercitationem
                    ipsam
                    quasi ratione? At consequatur deleniti exercitationem in labore laudantium odit quod repellat.
                    Deleniti
                    illo quod repellat.
                </div>
            </x-laratify-card>
        </x-laratify-collapse>

Package Config

For publishing package's config file run the bellow command

php artisan vendor:publish --tag="laratify-config"

    // app/config.php
    return [
        'text-base-color' => 'white', // changing the app text base color
        'background-base-color' => 'blue-500' // changing the app background base color
    ];  

Packages Used

Composer packages:

• laravel/ui

NPM packages:

• tailwindcss
• @tailwindcss/custom-forms
• laravel-mix-purgecss
• laravel-mix-tailwind
• alpinejs
• tippyjs