To use the Gravitee.io component library in your app just run:
npm install --save @gravitee/ui-components
# Or
yarn add @gravitee/ui-componentsThe 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 is necessary to add some configuration to expose the folders on the correct paths.
When working with Webpack directly you need to update the configuration:
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' },
],
}),
],
};When working with Angular then update your angular.json file:
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>Read the changelog and be careful with breaking changes or notes about upgrade of dependencies.
To install the desired version:
npm install --save @gravitee/ui-components@{version}
TIP: You can clean the package-lock.json and remove duplicate dependencies with npm dedupe
- Install nvm
- Use with
nvm useor install withnvm installthe node version declared in.nvmrc - Then install node modules with:
yarn install
The available scripts are:
yarn serve: start Storybook in dev modeyarn lint: run eslint and prettieryarn lint:fix: run eslint with autofix and prettier in write modeyarn test: run the unit testsyarn test --collect-coverage: run the unit tests with coverageyarn docs: generate the documentationyarn build: build storybookyarn serve:prod: start Storybook in prod modeyarn generate:dist: build components to use them in your projectyarn generate:icons: build icons files from svg filesyarn generate:theme: generate theme file based on css custom properties defined in each component fileyarn compile: compile source filesyarn compile:watch: compile source files on each change
If you want link for use in other local project as dependency:
yarn build
cd dist
npm link --ignore-scripts
cd ~/my-project
npm link @gravitee/ui-componentsIf you want to run hot-reload with npm link
yarn compile:watchSome components are based on third party libraries, for integration into a web component, we extract the css from its libraries as assets.
WARNING: When highlight.js or github-markdown-css are updated, we must run yarn build task to update the css.
You think Gravitee.io is awesome and want to contribute to the project? Here are few guidelines that should help you get started.
Copyright (C) 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent