Download the PHP package arkecosystem/ui without Composer

On this page you can find all versions of the php package arkecosystem/ui. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Example code of arkecosystem/ui

Informations about the package ui

Laravel UI

User-Interface Scaffolding for Laravel. Powered by TailwindCSS.

List of the available components

Prerequisites

Since this package relies on a few 3rd party packages, you will need to have the following installed and configured in your project:

Installation

  1. Require with composer: composer require arkecosystem/ui
  2. Publish all the assets / views with php artisan vendor:publish --provider="ARKEcosystem\UserInterface\UserInterfaceServiceProvider" --tag="css" --tag="fonts" --force. If you need custom pagination, then also run php artisan vendor:publish --provider="ARKEcosystem\UserInterface\UserInterfaceServiceProvider" --tag="pagination"
  3. Import the vendor css assets in your app.css file
  4. Import the vendor tailwind.config.js file in your own tailwind config and build on top of that if you need additional changes
  5. Use the components in your project with <x-ark-component>
  6. Add the following snippet to your webpack.mix.js file to be able to use the @ui alias:

Protip: instead of running step 3 manually, you can add the following to your post-autoload-dump property in composer.json:

Protip: you can publish individual assets by using their tag, e.g. --tag="css", --tag="images", etc

Protip 2: in order to lazy-load icons, you will need to publish them by using their tag, e.g. --tag=\"icons\"

Navbar / Avatar Component

The navigation bar makes use of our own PHP implementation of picasso to generate a default avatar (in line with the Desktop Wallet). You will need to set this up in your project as follows:

  1. Pass an $identifier value to the navbar component be used as seed for the generation of the image

Clipboard

  1. Add clipboard to Laravel Mix config

  2. Add clipboard to any pages that need it

  3. Install tippy.js

  4. Add the following snippet to your resources/app.js

Modals

  1. Install body-scroll-lock

  2. Import the modal script in your resources/js/app.js file

WYSIWYG Markdown editor

  1. Install the npm dependencies

  2. Ensure to import the markdown script inside the <head> tag of your template.

Assigning to the window object is now done in the markdown script itself, therefore there is no need to import and assign this script manually!

  1. Configure webpack.mix with the markdown plugin

  2. Add the markdown component to your form

  3. You can change the height and the toolbar preset:

  4. You can choose to limit the characters to be inserted:

Accepts full for all the plugins and basic for only text related buttons.

  1. If you use the image upload plugin your page will need to have the csrf_token in the metadata.

Tags input

  1. Add taggle dependency yarn add taggle and ensure to copy the scripts to the public directory:

  2. Add the Tags script to the main js file

  3. Ensure to import the taggle scripts

  4. Use the component like the rest of the components. It accepts tags and allowed-tags props.

User tagger input

  1. Add tributejs dependency yarn add tributejs and ensure to copy the scripts to the public directory:

  2. Import the user tagger script into the main js file and import the styles in your css file

  3. Ensure to import the tributejs scripts in the places where the component will be used

  4. Use the component like you use the textarea input

  5. This component makes a GET request to the /api/users/autocomplete endpoint with the query as q, that query should be used to search the users and should return them in the following format:

Note: You can change the the URL by using the endpoint prop.

  1. The component accepts a usersInContext prop that expects an array of usernames. These usernames will be sent in the search query request as context and can be used to show those users first in the response. Useful to show the user in the conversation first.

Honeypot

  1. Install dependency

  2. Setup honeypot

  3. Database Migration

Livewire modals

To use the Livewire modals, use the ARKEcosystem\UserInterface\Http\Livewire\Concerns\HasModal trait in your component class. The trait adds the closeModal and openModal methods that toggle the modalShown property that is the one you should use to whether show or hide the modal.

Important: If you need to use a different variable to close the modal, or you can't make use of the trait for a reason, make sure to emit the modalClosed event as that is required for proper handling of the modals on the frontend! If you fail to emit this event, the browser window will not be scrollable after the modal disappears.

Alpine modals

Important: for the modals to work properly, they expect a nav element inside a header element to be used for the header component. If you use the navbar from the UI lib (see navbar.blade.php) these elements are already used, but for custom navbars you may need to make adjustments.

There's a few ways you can make use of the new modals in conjunction with Alpine:

For JS-only modals, you need to use the <x-ark-js-modal /> component. You need to initiate the modal with a name (using the name attribute) and it can be opened by calling Livewire.emit('openModal', 'name-of-my-modal')

Alternatively, if you wrap the modal inside another Alpine component, you can use the Modal.alpine() method to init the modal (don't forget to call the init method on x-init).

The Modal.alpine() method accepts an object as the first argument. This object will be merged with the original Modal data.

Inside that component, you can use the show() method to show the modal:

Note that it is also possible to hook into the lifecycle methods of the modal. You can override the onBeforeHide, onBeforeShow, onHidden, and onShown properties with custom methods if you require so.

Tooltips

  1. Install tippy.js

  2. Add to webpack mix

  3. Add tippy to any pages that need it

Slider

  1. Install swiper

  2. Add swiper to Laravel Mix config

  3. Add swiper to any pages that need it

  4. Include swiper CSS

  5. Add the following to the app.js file:

Date Picker

  1. Install pikaday

  2. Include pikaday CSS

Notifications Indicator

  1. Add this to your user migration table

  2. Register the component in your LivewireServiceProvider file

Prism Codeblock

  1. Add prism js to Laravel webpack mix

  2. Add prism to any pages that need it

  3. Include prism CSS

  4. Install prism.js

  5. Add the following snippet to resources/prism.js

Image Collection Sortable

  1. Install Livewire Sortable

  2. Add the following snippet to your resources/app.js

  3. Add imagesReordered method to handle index reordering when an image is sorted.

  4. Then, you can use upload-image-collection component with sortable functionality.

Tabs

Add the following to the app.js file:

For the available parameters, please refer to the EXAMPLE.md

Error Pages

There are also default error pages you can use for your Laravel project

  1. Run php artisan vendor:publish --provider="ARKEcosystem\UserInterface\UserInterfaceServiceProvider" --tag="error-pages"

  2. Add the following snippet to your menus.php lang file:

  3. Please test if the pages work by manually going to a url that should throw an error

Available Components

See the example file for more in-depth usage examples

Livewire Pagination Scroll

  1. Add the following to app.js file:

  2. Use the HasPagination trait on Livewire Components:

  3. Add event trigger at the bottom of the component template:

Pagination

  1. Publish the pagination assets

php artisan vendor:publish --provider="ARKEcosystem\UserInterface\UserInterfaceServiceProvider" --tag="pagination"

  1. Add the following to the app.js file:

  2. All set, now you can use the pagination component

Footer

Add the following snippet to your urls.php lang file:

Available Styles

It's advised to make use of the styles for generic components so we keep them similar throughout projects

In-progress

Blade Support

Avatar

In config/app.php under aliases, add the following entry:

Date Format

In config/app.php under aliases, add the following entry:

Format Read Time method for blade (generally used for blog date/time output)

In config/app.php under providers, add the following entry:

SVG Lazy-Loading Icons

In config/app.php under providers, add the following entry:

This will initiate the svgLazy directive and allow you to load icons from the arkecosystem/ui package. For example:

This will insert the following HTML:

Protip: You will need lazy.js in order for this to work

Development

If components require changes or if you want to create additional components, you can do so as follows:

Vendor folder

This approach is recommended to test out smaller changes. You can publish the views by running php artisan vendor:publish --tag=views, and they will show up in the views/vendor/ark folder. From there you can edit them to your liking and your project will make use of these modified files. Make sure to later commit them to this repository when you have made your changes to keep the files throughout projects in sync.

Components Folder

When you create a views/components folder, you can create new blade files inside it and they will automatically become available through <x-your-component> to be used in your project. This way you can create new components, test them, and then copy them to the arkecosystem/ui repo when finished.

Afterwards you can add new components to the local package and use it in your project for testing.

Icons

If you need to add, replace or delete an icon:

Tailwind Configuration

There are a few tailwind configuration additions on which the components rely (e.g. colors and additional shadows) and are therefore expected to use the tailwind config in this repository as basis (you can import it and extend it further if needed).

All versions of ui with dependencies

PHP Build Version
Package Version
Requires php Version ^8.0
illuminate/bus Version ^8.0
illuminate/contracts Version ^8.0
illuminate/http Version ^8.0
illuminate/mail Version ^8.0
illuminate/support Version ^8.0
illuminate/view Version ^8.0
livewire/livewire Version ^2.0
google/recaptcha Version ^1.2
pragmarx/google2fa-laravel Version ^1.3
spatie/laravel-schemaless-attributes Version ^1.8
spatie/laravel-flash Version ^1.7
ruafozy/mersenne-twister Version ^1.3
spatie/laravel-package-tools Version ^1.9
spatie/regex Version ^2.0
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package arkecosystem/ui contains the following files

Loading the files please wait ....