4.2.3 • Published 2 days ago

@gravitee/ui-components v4.2.3

Weekly downloads
1
License
Apache-2.0
Repository
github
Last release
2 days ago

Welcome to Gravitee.io UI Components

User guide

To use the Gravitee.io component library in your app just run:

npm install --save @gravitee/ui-components
# Or
yarn add @gravitee/ui-components

Configuration

The 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/"
          }
        ]
      }
    }
  }
}

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();

Using in Angular app

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>

Upgrade

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

Developers guide

Install

  • Install nvm
  • Use with nvm use or install with nvm install the node version declared in .nvmrc
  • Then install node modules with: npm install

Tasks

The available NPM scripts are:

  • npm run serve: start Storybook in dev mode
  • npm run lint: run eslint and prettier
  • npm run lint:fix: run eslint with autofix and prettier in write mode
  • npm run test: run the unit tests
  • npm run test -- --collect-coverage: run the unit tests with coverage
  • npm run docs: generate the documentation
  • npm run build: build storybook
  • npm run serve:prod: start Storybook in prod mode
  • npm run generate:dist: build components to use them in your project
  • npm run generate:icons: build icons files from svg files
  • npm run generate:theme: generate theme file based on css custom properties defined in each component file

If you want link for use in other local project as dependency:

npm link
cd ../my-project
npm link @gravitee/ui-components

If you want link the prod version in other local project:

npm run build
cd dist
npm link
cd ../my-project
npm link @gravitee/ui-components

Renovate

Some components are based on third party libraries, for integration into a web component, we extract the css from its libraries as assets.

WARNING: When codemirror, highlight.js or github-markdown-css are updated, we must run npm run build task to update the css.

Contributing

You think Gravitee.io is awesome and want to contribute to the project? Here are few guidelines that should help you get started.

Copyright

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.

Changelog

Refer to the CHANGELOG for a complete list of changes.

4.2.3

2 months ago

4.2.2

2 months ago

4.2.1

2 months ago

4.2.0

2 months ago

4.1.1

3 months ago

4.1.0

3 months ago

4.0.0

4 months ago

3.45.6

5 months ago

3.44.0

10 months ago

3.45.0

6 months ago

3.45.1

6 months ago

3.45.2

6 months ago

3.45.3

5 months ago

3.45.4

5 months ago

3.45.5

5 months ago

3.43.0

10 months ago

3.42.0

10 months ago

3.41.1

11 months ago

3.41.0

11 months ago

3.40.0

11 months ago

3.39.5

12 months ago

3.39.6

12 months ago

3.39.0

12 months ago

3.39.1

12 months ago

3.39.2

12 months ago

3.39.3

12 months ago

3.39.4

12 months ago

3.38.11

1 year ago

3.38.12

1 year ago

3.38.10

1 year ago

3.38.9

1 year ago

3.38.8

1 year ago

3.38.6

1 year ago

3.38.7

1 year ago

3.38.5

1 year ago

3.38.0

1 year ago

3.38.1

1 year ago

3.38.2

1 year ago

3.38.3

1 year ago

3.38.4

1 year ago

3.37.0

1 year ago

3.37.1

1 year ago

3.36.0

2 years ago

3.36.1

2 years ago

3.36.2

2 years ago

3.35.2

2 years ago

3.35.3

2 years ago

3.35.0

2 years ago

3.35.1

2 years ago

3.34.0

2 years ago

3.28.5

2 years ago

3.28.8

2 years ago

3.28.7

2 years ago

3.28.0

2 years ago

3.28.2

2 years ago

3.28.1

2 years ago

3.28.4

2 years ago

3.28.3

2 years ago

3.29.4

2 years ago

3.29.1

2 years ago

3.29.0

2 years ago

3.29.3

2 years ago

3.29.2

2 years ago

3.26.0

2 years ago

3.27.1

2 years ago

3.27.0

2 years ago

3.27.3

2 years ago

3.27.2

2 years ago

3.25.4

2 years ago

3.33.0

2 years ago

3.33.1

2 years ago

3.31.0

2 years ago

3.31.1

2 years ago

3.31.2

2 years ago

3.31.3

2 years ago

3.32.0

2 years ago

3.30.0

2 years ago

3.30.1

2 years ago

0.0.0

2 years ago

3.25.3

2 years ago

3.25.2

2 years ago

3.25.1

2 years ago

3.25.0

2 years ago

3.24.5

2 years ago

3.24.0

2 years ago

3.24.2

2 years ago

3.24.1

2 years ago

3.24.4

2 years ago

3.24.3

2 years ago

3.21.1

2 years ago

3.21.3

2 years ago

3.21.2

2 years ago

3.21.5

2 years ago

3.21.4

2 years ago

3.21.7

2 years ago

3.21.6

2 years ago

3.22.0

2 years ago

3.23.0

2 years ago

3.20.2

3 years ago

3.21.0

3 years ago

3.20.0

3 years ago

3.20.1

3 years ago

3.17.6

3 years ago

3.17.5

3 years ago

3.17.7

3 years ago

3.17.2

3 years ago

3.17.1

3 years ago

3.17.4

3 years ago

3.17.3

3 years ago

3.18.1

3 years ago

3.18.0

3 years ago

3.19.0

3 years ago

3.19.1

3 years ago

3.17.0

3 years ago

3.16.1

3 years ago

3.14.0

3 years ago

3.15.0

3 years ago

3.16.0

3 years ago

3.13.2

3 years ago

3.13.1

3 years ago

3.13.0

3 years ago

3.12.1

3 years ago

3.12.0

3 years ago

3.11.2

3 years ago

3.11.0

3 years ago

3.11.1

3 years ago

3.10.5

3 years ago

3.10.6

3 years ago

3.10.4

3 years ago

3.10.3

3 years ago

3.10.1

3 years ago

3.9.2

3 years ago

3.9.1

3 years ago

3.10.0

3 years ago

3.9.0

3 years ago

3.8.2

3 years ago

3.8.1

3 years ago

3.8.0

3 years ago

3.6.0

3 years ago

3.7.0

3 years ago

3.5.0

3 years ago

3.4.0

3 years ago

3.4.1

3 years ago

3.2.0

3 years ago

3.0.1

3 years ago

2.9.1

3 years ago

3.0.0

3 years ago

3.3.0

3 years ago

3.1.0

3 years ago

2.4.0

3 years ago

2.6.0

3 years ago

2.8.0

3 years ago

2.5.0

3 years ago

2.7.0

3 years ago

2.3.4

3 years ago

2.9.0

3 years ago

2.3.5

3 years ago

2.3.2

3 years ago

2.3.3

3 years ago

2.3.1

3 years ago

2.3.0

3 years ago

2.2.2

3 years ago

2.2.1

3 years ago

2.2.0

3 years ago

2.1.1

3 years ago

2.1.0

3 years ago

1.4.1

3 years ago

1.4.0

3 years ago

2.0.0

3 years ago

1.3.3

3 years ago

1.3.2

3 years ago

1.3.1

3 years ago

1.3.0

3 years ago

1.2.0

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.0.26-alpha.0

3 years ago

1.0.25

3 years ago

1.0.26-SNAPSHOT

3 years ago

1.0.24

3 years ago

1.0.25-SNAPSHOT

3 years ago

1.0.24-SNAPSHOT

3 years ago

1.0.23

3 years ago

1.0.22-SNAPSHOT

3 years ago

1.0.22

3 years ago

1.0.21

3 years ago

1.0.23-SNAPSHOT

3 years ago

1.0.21-SNAPSHOT

3 years ago

1.0.20

3 years ago

1.0.20-SNAPSHOT

3 years ago

1.0.19

3 years ago

1.0.19-SNAPSHOT

3 years ago

1.0.18

3 years ago

1.0.17

3 years ago

1.0.16

3 years ago

1.0.15

3 years ago

1.0.14

3 years ago

1.0.13

3 years ago

1.0.12

3 years ago

1.0.11

3 years ago

1.0.11-SNAPSHOT

4 years ago

1.0.10

4 years ago

1.0.10-SNAPSHOT

4 years ago

1.0.9

4 years ago

1.0.9-SNAPSHOT

4 years ago

1.0.8

4 years ago

1.0.8-SNAPSHOT

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago