https://github.com/hydrospheredata/hydro-serving-ui-kit

UI Kit for the Hydrosphere.io project.
https://github.com/hydrospheredata/hydro-serving-ui-kit

Last synced: 28 days ago
JSON representation

UI Kit for the Hydrosphere.io project.

• Host: GitHub
• URL: https://github.com/hydrospheredata/hydro-serving-ui-kit
• Owner: Hydrospheredata
• License: apache-2.0
• Created: 2021-08-19T12:35:22.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-01-18T12:52:44.000Z (almost 3 years ago)
• Last Synced: 2024-04-14T07:52:51.788Z (9 months ago)
• Language: TypeScript
• Homepage:
• Size: 3.65 MB
• Stars: 0
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
#  HydroServing Ui Kit

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

![](projects/hs-ui-kit/src/assets/images/Storybook.gif)

## 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```.