lemaur/ui

This package is abandoned and no longer maintained. No replacement package was suggested.

User Interface for Laravel

0.1.2 2022-01-23 14:53 UTC

Requires

• php: ^8.0
• illuminate/contracts: ^8.37|^9.0
• spatie/laravel-package-tools: ^1.4.3

Requires (Dev)

• brianium/paratest: ^6.4
• nunomaduro/collision: ^5.3|^6.0
• orchestra/testbench: ^6.15|^7.0
• phpunit/phpunit: ^9.3
• spatie/laravel-ray: ^1.9
• spatie/phpunit-snapshot-assertions: ^4.2
• vimeo/psalm: ^4.4

MIT

• Maurizio

• components
• view
• laravel
• user interface
• blade
• lemaur

README

🚧 Under development - Don't use it in production!

Install

This package conveys only default configuration and doesn't install any frontend related dependencies. To help you keep up and running, this package provides instructions to install and configure your frontend dependencies.

1. Install TailwindCss, its plugins, postcss and autoprefixer.

$ npm i -D  \
    tailwindcss@latest \
    @tailwindcss/aspect-ratio \
    @tailwindcss/forms \
    @tailwindcss/typography \
    @tailwindcss/line-clamp \
    postcss-import@latest \
    postcss@latest \
    autoprefixer@latest \
    mapbox-gl

1. Configure your webpack.mix.js file

mix
    
    // add @ui alias to be used on js files
    .webpackConfig({
        resolve: {
            alias: {
                '@ui': path.resolve(__dirname, 'vendor/lemaur/ui/resources/assets/js')
            }
        },
    })

    // configure postCss
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import')({
            path: ["vendor/lemaur/ui/resources/assets/css"],
        }),
        require('tailwindcss'),
        require('autoprefixer'),
    ])

1. Configure your tailwind.config.js file.

module.exports = {
    presets: [
        require('./vendor/lemaur/ui/resources/assets/js/tailwindcss/tailwind.preset'),
    ],
    theme: {
        extend: {},
    }
}

1. Configure your /resources/css/app.css file.

/**
 * Tailwindcss
 */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/**
 * Defaults from UI library
 */
@import "default";
@import "focus";

/**
 * Your custom CSS files
 */
@import "homepage"; /* <- example */
@import "forms"; /* <- example */

1. Configure your resoruces/js/app/js file.

/**
 * Import Alpine and its plugins 
 */
import Alpine from "alpinejs"
import intersect from "@alpinejs/intersect"
import persist from "@alpinejs/persist"
import focus from "@alpinejs/focus"

/**
 * Import Alpine custom plugins, components, etc from UI library
 */
import navigation from "@ui/alpinejs/navigation.js"

/**
 * Define Alpine Plugins
 */
Alpine.plugin(intersect)
Alpine.plugin(persist)
Alpine.plugin(focus)

/**
 * Define Alpine Components
 */
Alpine.data('navigation', navigation)

/**
 * Make Alpine available as global object
 */
window.Alpine = Alpine

Alpine.start()