Hydrospheredata/hydro-serving-ui-kit

UI Kit for the Hydrosphere.io project.

HydroServing Ui Kit

UI Kit for the Hydrosphere.io project, containing the common UI components and integrated with the Storybook.

Getting Started

1. Run the following command:

npm install @hydrosphere/hs-ui-kit

2. Import HsUiKitModule in your main module.

app.module.ts

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { HsUiKitModule } from '@hydrosphere/hs-ui-kit';
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';

  @NgModule({
    declarations: [
      AppComponent,
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      HsUiKitModule,
      // ...
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule {
  }

3. To add icons to your project include IconsRegistryService to providers of main module and register icons you need in the constructor.

app.module.ts

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { HsUiKitModule, IconsRegistryService, hsIconsIconSearch } from '@hydrosphere/hs-ui-kit';
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';

  @NgModule({
    declarations: [
      AppComponent,
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      HsUiKitModule,
      // ...
    ],
    providers: [IconsRegistryService],
    bootstrap: [AppComponent]
  })
  export class AppModule {
    constructor(private iconRegistry: IconsRegistryService) {
      this.iconRegistry.registerIcons([hsIconsIconSearch]);
    }
  }

4. To start storybook run the following command in the root directory:

  npm run storybook

This will start a local webpack server on port 6006 and you can visit the generated storybook by going to http://localhost:6006/.

How to publish new versions

Run the following commands:

• ng build hs-ui-kit --prod;
• cd dist/hs-ui-kit;
• npm publish --access public.