npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@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

  1. Ensure that you have git installed
  • Confirm installation via the following command: $ git --version
  1. Clone the repository

    git clone [email protected]:mtrdesign/krait.git
  2. Change your current directory to the local clone of the krait-ui folder

    cd krait/krait-ui
  3. Install NVM and NodeJS

  1. 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.

  1. Activate the corresponding NodeJS environment
    nvm use

Dev Note: Again - ensure that you are running this command inside the krait-ui directory.

  1. 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 as events 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