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