feat(app): cards styling

apps/ng-lab-demo/src/app/app.component.html

@@ -63,8 +63,12 @@ <h3 class="ui-sidebar__title">Packages</h3>
   <router-outlet></router-outlet>
 </ui-layout-area>
 
-<p class="ui-card ui-alert">
-  Responsive Breakpoint: {{ (responsive$ | async)?.key }} with size -
-  {{ (responsive$ | async)?.width }} <br />
-  <i>Resize your window to see breakpoints</i>
-</p>
+<div class="ui-card ui-alert">
+  <div class="ui-card__description">
+    <span *ngIf="(responsive$ | async) as responsive">
+      Responsive Breakpoint: {{ responsive?.key }} with size - {{ responsive?.width }}
+    </span>
+    <br />
+    <i>Resize your window to see breakpoints</i>
+  </div>
+</div>

apps/ng-lab-demo/src/app/app.config.ts

@@ -21,6 +21,9 @@ export const CONFIG = {
     POSTS: {
       LIST: '@api:/posts',
       SINGLE: '@api:/posts/:id'
+    },
+    HOME: {
+      FETCH: '@local:/assets/data/home.json'
     }
   }
 };

apps/ng-lab-demo/src/app/app.module.ts

@@ -2,18 +2,26 @@ import { NgModule, ApplicationRef } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppComponent } from './app.component';
-import { RouterModule } from '@angular/router';
+import { NgxsModule } from '@ngxs/store';
+import { NgxsDataPluginModule } from '@ngxs-labs/data';
+import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
 import { ApplicationRoutingModule } from './app.routing';
 import { ApplicationProvisionModule } from './app.provision';
 import { ConfiguratorService } from '@ng-lab/configurator';
+import { environment } from '@ng-lab/app/environments/environment';
 
 @NgModule({
   declarations: [AppComponent],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     ApplicationRoutingModule,
-    ApplicationProvisionModule
+    ApplicationProvisionModule,
+    NgxsModule.forRoot([], { developmentMode: !environment.production }),
+    NgxsDataPluginModule.forRoot(),
+    NgxsReduxDevtoolsPluginModule.forRoot({
+      disabled: environment.production
+    })
   ],
   providers: [],
   bootstrap: [AppComponent],

apps/ng-lab-demo/src/app/app.routing.ts

@@ -22,7 +22,7 @@ const ROUTES: Routes = [
 @NgModule({
   imports: [
     RouterModule.forRoot(ROUTES, {
-      enableTracing: true,
+      enableTracing: false,
       initialNavigation: 'enabled',
       useHash: false
     })

apps/ng-lab-demo/src/app/pages/home/home-resolver.ts

@@ -0,0 +1,14 @@
+import { Resolve } from '@angular/router';
+import { Injectable } from '@angular/core';
+import { HomeState } from './state/home.state';
+
+@Injectable()
+export class HomeResolver implements Resolve<any> {
+  constructor(
+    private homeState: HomeState
+  ) { }
+
+  public resolve() {
+    return this.homeState.getContent();
+  }
+}

apps/ng-lab-demo/src/app/pages/home/home-routing.module.ts

@@ -1,16 +1,21 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { HomeComponent } from './home.component';
+import { HomeResolver } from './home-resolver';
 
 const routes: Routes = [
   {
     component: HomeComponent,
-    path: ''
+    path: '',
+    resolve: {
+      content: HomeResolver
+    }
   }
 ];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
+  providers: [HomeResolver],
   exports: [RouterModule]
 })
 export class HomeRoutingModule {}

apps/ng-lab-demo/src/app/pages/home/home-service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import { HttpUrlService } from '@ng-lab/http/url';
+import { HttpClient } from '@angular/common/http';
+import { map } from 'rxjs/operators';
+import { HomeModel } from './state/home-model';
+
+@Injectable()
+export class HomeService {
+  constructor(
+    private readonly urlService: HttpUrlService,
+    private readonly httpService: HttpClient
+  ) { }
+
+  public fetchAll() {
+    const url = this.urlService.get('HOME.FETCH');
+
+    return this.httpService.get<{data: HomeModel}>(url).pipe(
+      map(response => response.data)
+    );
+  }
+}

apps/ng-lab-demo/src/app/pages/home/home.component.html

@@ -11,4 +11,22 @@ <h1 class="ui-hero__title">Welcome to @ng-lab packages.</h1>
     packages.
   </p>
 </div>
-<section class="ui-section"></section>
+<section class="ui-section">
+  <div class="ui-card">
+    <div class="ui-card__header">Configurator</div>
+    <div class="ui-card__media">
+      <img src="./assets/cg-logo.svg" alt="configurator" />
+    </div>
+    <div class="ui-card__description">
+      Configurator is an angular service where you can set/get all options or
+      configs as a root (singleton) for all your app.
+    </div>
+    <div class="ui-card__footer">
+      <a class="btn btn-sm btn-link" href="">Read more</a>
+      <img
+        alt="@ng-lab/configurator"
+        src="https://img.shields.io/npm/v/@ng-lab/configurator.svg?style=social"
+      />
+    </div>
+  </div>
+</section>

apps/ng-lab-demo/src/app/pages/home/home.component.spec.ts

@@ -4,6 +4,7 @@ import { HomeComponent } from './home.component';
 import { HttpUrlModule } from '@ng-lab/http/url';
 import { ConfiguratorModule } from '@ng-lab/configurator';
 import { CONFIG } from '../app.config';
+import { HomeService } from './home-service';
 
 describe('HomeComponent', () => {
   let component: HomeComponent;
@@ -12,6 +13,7 @@ describe('HomeComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [HttpUrlModule, ConfiguratorModule.forRoot(CONFIG)],
+      providers: [HomeService],
       declarations: [ HomeComponent ]
     })
     .compileComponents();

apps/ng-lab-demo/src/app/pages/home/home.module.ts

@@ -3,9 +3,17 @@ import { CommonModule } from '@angular/common';
 
 import { HomeComponent } from './home.component';
 import { HomeRoutingModule } from './home-routing.module';
+import { HomeService } from './home-service';
+import { NgxsModule } from '@ngxs/store';
+import { HomeState } from './state/home.state';
 
 @NgModule({
   declarations: [HomeComponent],
-  imports: [CommonModule, HomeRoutingModule]
+  providers: [HomeService],
+  imports: [
+    CommonModule,
+    HomeRoutingModule,
+    NgxsModule.forFeature([HomeState])
+  ]
 })
 export class HomeModule {}

apps/ng-lab-demo/src/app/pages/home/state/home-model.ts

@@ -0,0 +1,4 @@
+export interface HomeModel {
+  title: string;
+  description: string;
+}

apps/ng-lab-demo/src/app/pages/home/state/home.state.ts

@@ -0,0 +1,27 @@
+import { action, NgxsDataRepository, StateRepository } from '@ngxs-labs/data';
+import { Injectable } from '@angular/core';
+import { HomeModel } from './home-model';
+import { State } from '@ngxs/store';
+import { HomeService } from '../home-service';
+import { tap } from 'rxjs/operators';
+
+@StateRepository()
+@State({
+  name: 'home',
+  defaults: {}
+})
+@Injectable()
+export class HomeState extends NgxsDataRepository<HomeModel> {
+  constructor(
+    private readonly homeService: HomeService
+  ) {
+    super();
+  }
+
+  @action()
+  public getContent() {
+    return this.homeService.fetchAll().pipe(
+      tap(content => this.ctx.setState(state => ({...state, ...content})))
+    );
+  }
+}

apps/ng-lab-demo/src/assets/data/home.json

@@ -0,0 +1,6 @@
+{
+  "data": {
+    "title": "Welcome to @ng-lab packages.",
+    "description": "@ng-lab packages are functional libraries to help you on logic, decision tasks, tools, structures, browser features. This packages can go from directives, services and components (very few), that will have an opinated API to you to use to maintain repeated task, wrapper browser features and others things where you can use in more friendly, innovated and angular way. You will find from configuration, url resolver, screen responsive, jwt and other things as describe in this website, demonstrating the usage of those packages."
+  }
+}

apps/ng-lab-demo/src/assets/data/packages.json

@@ -0,0 +1,84 @@
+{
+  "data": [
+    {
+      "id": 1,
+      "title": "Configurator",
+      "slug": "configurator",
+      "logo": "./assets/cg-logo.svg",
+      "description": "Configurator is an angular service where you can set/get all options or configs as a root (singleton) for all your app.",
+      "namespace": "@ng-lab/configurator",
+      "badge": "https://img.shields.io/npm/v/@ng-lab/configurator.svg?style=social",
+      "href": ""
+    },
+    {
+      "id": 2,
+      "title": "Support",
+      "slug": "support",
+      "logo": "./assets/support-logo.svg",
+      "description": "Support is a collection of common functions to help you and continues grow, also it is used on other ng-lab packages as a dependency.",
+      "namespace": "@ng-lab/support",
+      "badge": "https://img.shields.io/npm/v/@ng-lab/support.svg?style=social",
+      "href": ""
+    },
+    {
+      "id": 3,
+      "title": "JWT",
+      "slug": "jwt",
+      "logo": "./assets/jwt-logo.svg",
+      "description": "JWT is an angular service to help you on decode valid token and also checking expiration to provide renovation mecanism.",
+      "namespace": "@ng-lab/jwt",
+      "badge": "https://img.shields.io/npm/v/@ng-lab/jwt.svg?style=social",
+      "href": ""
+    },
+    {
+      "id": 4,
+      "title": "Responsive",
+      "slug": "responsive",
+      "logo": "./assets/responsive-logo.svg",
+      "description": "Responsive is an angular directive to define media breakpoints, listen for changes and trigger event when resize happens on the page.",
+      "namespace": "@ng-lab/responsive",
+      "badge": "https://img.shields.io/npm/v/@ng-lab/responsive.svg?style=social",
+      "href": ""
+    },
+    {
+      "id": 5,
+      "title": "Hub",
+      "slug": "hub",
+      "logo": "./assets/hu-logo.svg",
+      "description": "Hub is an angular service pub/sub where you can register channels and dispatch/listen custom events.",
+      "namespace": "@ng-lab/hub",
+      "badge": "https://img.shields.io/npm/v/@ng-lab/hub.svg?style=social",
+      "href": ""
+    },
+    {
+      "id": 6,
+      "title": "Http-Script",
+      "slug": "http-script",
+      "logo": "./assets/hs-logo.svg",
+      "description": "Http-Script is an angular service to register and load external javascript libraries.",
+      "namespace": "@ng-lab/http-script",
+      "badge": "https://img.shields.io/npm/v/@ng-lab/http-script.svg?style=social",
+      "href": ""
+    },
+    {
+      "id": 7,
+      "title": "Http-Url",
+      "slug": "http-url",
+      "logo": "./assets/hu-logo.svg",
+      "description": "Http-Url is an angular service to define urls and resolve them with or without parameters.",
+      "namespace": "@ng-lab/http-url",
+      "badge": "https://img.shields.io/npm/v/@ng-lab/http-url.svg?style=social",
+      "href": ""
+    },
+    {
+      "id": 8,
+      "title": "Layout",
+      "slug": "layout",
+      "logo": "./assets/hu-logo.svg",
+      "description": "Component to create flex container elements. Usefull for layout areas and many stuff (boxes, containers etc...)",
+      "namespace": "@ng-lab/layout",
+      "badge": "https://img.shields.io/npm/v/@ng-lab/layout.svg?style=social",
+      "href": ""
+    }
+  ]
+}

apps/ng-lab-demo/src/styles.scss

@@ -14,11 +14,12 @@ body {
     'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
     'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   overflow: hidden;
+  background-color: #f8f6f7;
 }
 
 code[class*='language-'],
 pre[class*='language-'] {
-  background-color: #f4f4f4;
+  background-color: #333333;
   border-radius: 3px;
 }
 
@@ -39,13 +40,63 @@ pre[class*='language-'] {
   position: relative;
   display: flex;
   padding: 10px;
+  flex-direction: row;
+  align-items: stretch;
+
+  .ui-card {
+    width: 25%;
+  }
+  .ui-card__media {
+    display: flex;
+    justify-content: center;
+    > img {
+      width: 50%;
+    }
+  }
 }
 
 .ui-card {
   box-shadow: 0px 0px 8px 0px rgba(209, 209, 209, 1);
   border-radius: 10px;
   background-color: #fff;
-  padding: 10px;
+  display: flex;
+  flex-direction: column;
+
+  &__header {
+    border-bottom: 1px solid #ededed;
+    color: #000;
+    font-size: 0.75rem;
+    font-weight: 200;
+    letter-spacing: normal;
+    padding: 0.5rem 0.75rem;
+  }
+
+  &__media {
+    > img {
+      display: block;
+      height: auto;
+      width: 100%;
+      max-width: 900px;
+    }
+  }
+
+  &__description {
+    border-bottom: 1px solid #ededed;
+    padding: 0.5rem 0.75rem;
+
+    &__title {
+      margin-top: 0;
+      margin-bottom: 0.5rem;
+      color: #000;
+      font-size: 0.75rem;
+      font-weight: 200;
+      letter-spacing: normal;
+    }
+  }
+
+  &__footer {
+    padding: 0.5rem 0.75rem;
+  }
 }
 
 .ui-alert {