@mtrdesign/krait-ui
v1.0.9
Published
VueJS Datatable components for Laravel.
Downloads
194
Readme
Krait UI Library
Krait UI Library is a VueJS-based project for handling the Krait DataTable components front-end functionality.
Overview
This project contains VueJS and Bootstrap-based components for handling the Datatable Logic and Appearance features.
Usage
Although krait-ui
is a separate NPM package (it can be installed and used as a stand-alone library,
its purpose is the integration with the main krait
Laravel package. The package serves as a helper service to the Laravel codebase.
Dev Note: Changes in the back-end package will be reflected in this package as well.
Local Setup
- Ensure that you have
git
installed
- Confirm installation via the following command:
$ git --version
Clone the repository
git clone [email protected]:mtrdesign/krait.git
Change your current directory to the local clone of the
krait-ui
foldercd krait/krait-ui
Install NVM and NodeJS
- install them by following their official guide
After NVM is installed, install the project specific NodeJS version
nvm install
Dev Note: Ensure that you are running this command inside the krait-ui
directory as
the node version is documented in the .nvmrc
file.
- Activate the corresponding NodeJS environment
nvm use
Dev Note: Again - ensure that you are running this command inside the krait-ui
directory.
- Install all dependencies
npm ci
Local Development
We have integrated Storybook to facilitate the visualization and development of features on local environments. All backend functionalities are mocked, enabling independent development of this package without the need for local installation and integration with the primary 'krait' Laravel setup.
First, start the local dev
server:
npm run dev
Then, start the storybook local server:
npm run storybook
Code structure
The repository contains the following core directories:
/src
- the main source code/src/actions
- all the API actions grouped asevents
that can be dispatched from all modules in the app/src/components
- the Vue components/src/framework
- the core framework utils (Request, Response, Validation, etc.)/src/mixins
- the Vue mixins (similar to React hooks) that are shared across all components/src/types
- the more generic types
/scripts
- local development helper scripts.storybook
- the Storybook configurations (all mocking functionality is there as well)
Helper scripts
Generate Table Response
Converts CSV file to an example back-end response (as a JSON file).
generate-table-response {path to the file goes here}
Lint Check
Checks for lint-related issues.
npm run lint
Lint Fix
Checks and fixes some lint-related issues.
npm run lint:fix
Prettier Check
Checks for formatting-related issues.
npm run prettier
Prettier Fix
Checks and fixes some formatting-related issues.
npm run prettier:fix