Travix UI Components' repository.
Take a look at: https://travix-international.github.io/travix-ui-kit/
npm i react travix-ui-kit -S
install as a dependency
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",
}
}
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>
);
}
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
- 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
- nodejs v4 or higher
git clone
this reponpm i
to install dependenciesnpm run build
to build theme, styles and javascript
npm run styleguide:build
to build web service with living style guidenpm run styleguide:server
to run web service with living style guide- open localhost:6060
npm run build:watch
to build the themes, styles and javascript on each file changenpm 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 changesnpm run styleguide:dev
to run bothstyguide:build
andstyleguide:server
npm run test
to run unit testnpm run update-snapshots
to update current unit test snapshotsnpm run lint
to check ES-lint errors
- Developer must follow the sturcture of the project
- every component must contain own directory with its own
.js
,.scss
and.md
files
- every component must contain own directory with its own
- 100% unit test coverage of components and helpers
- 0 ES lint errors