If you want to use our awesome Gravitee components to your webapp
npm install --save @gravitee/ui-components
Our components are based on a set of files to manage icons, images, i18n or even for CSS.
When we publish the dist folder, we also publish the assets, you can get them in folder @gravitee/ui-components/assets
.
To use them in an application, it’s necessary to add some configuration to expose the folders on the correct paths
webpack.conf.js
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
plugins: [
new CopyPlugin({
patterns: [
{ from: "node_modules/@gravitee/ui-components/assets/images", to: "images" },
{ from: "node_modules/@gravitee/ui-components/assets/css", to: "css" },
{ from: "node_modules/@gravitee/ui-components/assets/svg", to: "svg" },
{ from: "node_modules/@gravitee/ui-components/assets/i18n", to: "i18n" },
],
}),
],
};
angular.json
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"index": "src/index.html",
"main": "src/main.ts",
"assets": [
"src/favicon.ico",
"src/favicon.png",
"src/assets",
{
"glob": "**/*",
"input": "node_modules/@gravitee/ui-components/assets/images",
"output": "images/"
},
{
"glob": "**/*.css",
"input": "node_modules/@gravitee/ui-components/assets/css",
"output": "css/"
},
{
"glob": "**/*.svg",
"input": "node_modules/@gravitee/ui-components/assets/icons",
"output": "icons/"
},
{
"glob": "**/*.json",
"input": "node_modules/@gravitee/ui-components/assets/i18n",
"output": "i18n/"
}
Some components use i18n, if you didn’t need it, you can load the default EN
translations when your app starts.
import { loadDefaultTranslations } from '@gravitee/ui-components/src/lib/i18n';
loadDefaultTranslations();
First import the component
import { FormGroup, FormControl } from '@angular/forms';
import '@gravitee/ui-components/wc/gv-input';
import '@gravitee/ui-components/wc/gv-button';
Use in template, like an simple HTML element
<form [formGroup]="loginForm" (ngSubmit)="login()">
<div>
<gv-input
autofocus
name="username"
formControlName="username"
ngDefaultControl
gvControl
icon-left="communication:shield-user">
</gv-input>
<gv-input
type="password"
name="password"
formControlName="password"
ngDefaultControl
gvControl
icon-left="general:shield-protected">
</gv-input>
</div>
<div>
<gv-button
class="signin"
primary
icon="navigation:sign-in"
type="submit">Login</gv-button>
</div>
</form>
-
Install nvm
-
Use with
nvm use
or install withnvm install
the node version declared in.nvmrc
-
Then install node modules with:
npm install
If you wanna start the storybook on dev mode :
npm run serve
If you wanna generate docs :
npm run docs
If you wanna run test:
npm run test
If you wanna run test with coverage:
npm run test -- --collect-coverage
If you wanna build storybook:
npm run build
If you wanna start storybook on prod mode :
npm run serve:prod
If you wanna build components to use them in your project:
npm run generate:dist
If you wanna build icons component from svg files:
npm run generate:icons
If you wanna lint :
npm run lint
If you wanna fix lint :
npm run lint:fix
If you wanna generate theme :
npm run generate:theme
If you wanna link for use in other local project as dependency:
npm link
cd ../my-project
npm link @gravitee/ui-components
If you wanna link the prod version in other local project:
npm run build
cd dist
npm link
cd ../my-project
npm link @gravitee/ui-components
You think Gravitee.io is awesome and want to contribute to the project? Here are few guidelines that should help you get started.
Copyright © 2015 The Gravitee team (http://gravitee.io) Licensed under the Apache License, Version 2.0 (the "License");
See the LICENSE file for details.
Refer to the CHANGELOG for a complete list of changes.