If you want to use our awesome Gravitee components to your webapp
npm install --save @gravitee/ui-componentsOur 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 useor install withnvm installthe node version declared in.nvmrc -
Then install node modules with:
npm installIf you wanna start the storybook on dev mode :
npm run serveIf you wanna generate docs :
npm run docsIf you wanna run test:
npm run testIf you wanna run test with coverage:
npm run test -- --collect-coverageIf you wanna build storybook:
npm run buildIf you wanna start storybook on prod mode :
npm run serve:prodIf you wanna build components to use them in your project:
npm run generate:distIf you wanna build icons component from svg files:
npm run generate:iconsIf you wanna lint :
npm run lintIf you wanna fix lint :
npm run lint:fixIf you wanna generate theme :
npm run generate:themeIf you wanna link for use in other local project as dependency:
npm link
cd ../my-project
npm link @gravitee/ui-componentsIf you wanna link the prod version in other local project:
npm run build
cd dist
npm link
cd ../my-project
npm link @gravitee/ui-componentsYou 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.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent