Travix-ui-kit NPM

Travix UI-kit

Travix UI Components' repository.

UI-Kit

Take a look at: https://travix-ui-kit.netlify.com/

How to install and setup

npm i react travix-ui-kit -S install as a dependency

Usage

CLI

The UI Kit comes with a CLI tool to help you build your UI bundles (JS and CSS).

To see the options available:

$ node_modules/.bin/travix-ui-kit -h

  Usage: travix-ui-kit [options]

  Options:

    -h, --help                       output usage information
    -V, --version                    output the version number
    -c, --css-dir <directory>        Destination directory of the ui-kit.css
    -e, --environment <environment>  Environment in which to run the build
    -j, --js-dir <directory>         Destination directory of the ui-kit.js
    -t, --theme-file <path>          Path to a theme file to override default UI Kit styles
    -w, --watch                      Enables file-watcher functionality

For example, if we want to generate our UI Bundles, with the default styling, on ./js/ and ./css/ folders, we do:

$ node_modules/.bin/travix-ui-kit -j ./js/ -c ./css/

If we want to pass our own YAML file for styling, we also can do it:

$ node_modules/.bin/travix-ui-kit -j ./js/ -c ./css/ -t ./myDefaultStyle.yml

And for development purposes, we tend to want to watch for changes on the files. That's possible too:

$ node_modules/.bin/travix-ui-kit -j ./js/ -c ./css/ -t ./myDefaultStyle.yml -w

For simplicity purposes we suggest to add a task/script to your package.json, which simplifies the usage of the CLI. E.g.:

{
  "scripts": {
    "build:ui": "travix-ui-kit -j ./js/ -c ./css/ -t ./myDefaultStyle.yml",
    "build:ui-watch": "travix-ui-kit -j ./js/ -c ./css/ -t ./myDefaultStyle.yml -w",
  }
}

The components

JS

const Button = require('travix-ui-kit').Button;
// or
import { Button } from 'travix-ui-kit';

function renderSomething({onAdd}) {
  return (
    <Button size="s" onClick={onAdd}>Add value</Button>
  );
}

CSS

use file node_modules/travix-ui-kit/dist/ui-bundle.css

you can create an alias in your webpack plugin
or inject it in your page current styles bundle
or copy to public folder and add as separate style file with <link>

Warning: Directly using file components/index.scss not recommended. We're not promising that we will use SCSS in future or will keep file's structure

Living style guide

Before installation

Soon we will add a public web service. For now you need to install it on your local machine
We are using default styling theme. If you need to adjust it, you can do it by passing proper theme YAML file as env var: THEME_PATH=/some/path/to/theme.yaml npm run build

How install

Prereqs

nodejs v4 or higher

Installing

git clone this repo
npm ci to install dependencies
npm run build to build theme, styles and javascript

How to run living style guide

npm run styleguide:build to build web service with living style guide
npm run styleguide:server to run web service with living style guide
open localhost:6060

Development

Start developing

npm run build:watch to build the themes, styles and javascript on each file change
npm run build:watch -- -t "./path/to/my/theme.yml" to build using a custom theme (also can use the other options as well).
npm run styleguide:server to run web service with livingstyle guide and review changes
npm run styleguide:dev to run both styguide:build and styleguide:server

Testing

npm test to run unit test
npm run update-snapshots to update current unit test snapshots
npm run lint to check ES-lint errors

Requirements

Developer must follow the sturcture of the project
- every component must contain own directory with its own .js, .scss and .md files
100% unit test coverage of components and helpers
0 ES lint errors