Add packages pages

Make the "dashboard" list some dummy packages, which you can click
through to build.

Also:

* Rename some files to be what they are
* Add Redux and Immutable.js
* Add tsd (to manage TypeScript type definitions)
* Add sign up link in the header
* Add clean npm tasks

web/.gitignore

@@ -3,3 +3,5 @@ app/**/*.js.map
 *.css
 *.css.map
 node_modules
+npm-debug.log
+typings

web/app/AppComponent.ts

@@ -0,0 +1,48 @@
+import {AppStore} from "./AppStore";
+import {Component, Inject} from "angular2/core";
+import {DashboardComponent} from "./dashboard/DashboardComponent";
+import {HomeComponent} from "./home/HomeComponent";
+import {PackageComponent} from "./package/PackageComponent";
+import {Router, RouteConfig, ROUTER_DIRECTIVES} from "angular2/router";
+import {SignInComponent} from "./sign-in/SignInComponent";
+import {UserNavComponent} from "./user-nav/UserNavComponent";
+import {routeChange} from "./actions";
+
+@Component({
+  directives: [ROUTER_DIRECTIVES, UserNavComponent],
+  selector: "bldr",
+  template: `
+    <div class="bldr-container">
+      <header class="bldr-header">
+        <h1>bldr</h1>
+        <nav class="bldr-header-user">
+          <user-nav></user-nav>
+        </nav>
+      </header>
+      <section class="bldr-main">
+        <router-outlet></router-outlet>
+      </section>
+      <footer class="bldr-footer">
+        <p>&copy; {{now}} Chef Software, Inc. All Rights Reserved.</p>
+      </footer>
+    </div>
+  `,
+})
+
+@RouteConfig([
+  { path: "/", name: "Home", component: HomeComponent },
+  { path: "/dashboard", name: "Dashboard", component: DashboardComponent },
+  { path: "/sign-in", name: "Sign In", component: SignInComponent },
+  { path: "/packages/:derivation/:id", name: "Package", component: PackageComponent },
+])
+
+export class AppComponent {
+  constructor(private router: Router, private store: AppStore) {
+    this.router.subscribe(value => this.store.dispatch(routeChange(value)));
+    store.subscribe(state => console.log('new state received ', state.toObject())); 
+  }
+
+  get now() {
+    return this.store.getState().currentYear;
+  }
+}

web/app/AppStore.ts

@@ -0,0 +1,22 @@
+import {Injectable} from "angular2/core";
+import {createStore} from "redux";
+import {rootReducer} from "./rootReducer"
+
+const appStore = createStore(rootReducer);
+
+@Injectable()
+export class AppStore {
+  private store = appStore;
+
+  getState() {
+    return this.store.getState();
+  }
+
+  dispatch(action) {
+    this.store.dispatch(action);
+  }
+
+  subscribe(listener: Function) {
+    this.store.subscribe(() => listener(this.getState()));
+  }
+}

web/app/actions.ts

@@ -0,0 +1,42 @@
+export const ROUTE_CHANGE = "ROUTE_CHANGE";
+export const SIGN_IN_ATTEMPT = "SIGN_IN_ATTEMPT";
+export const SIGN_UP_ATTEMPT = "SIGN_UP_ATTEMPT";
+export const SIGN_OUT = "SIGN_OUT";
+export const TOGGLE_USER_NAV_MENU = "TOGGLE_USER_NAV_MENU";
+
+export function attemptSignIn(username) {
+  return {
+    type: SIGN_IN_ATTEMPT,
+    payload: { username: username },
+  };
+}
+
+export function attemptSignUp(username, email, password) {
+  return {
+    type: SIGN_UP_ATTEMPT,
+    payload: {
+      username: username,
+      email: email,
+      password: password,
+    }
+  };
+}
+
+export function routeChange(newRoute) {
+  return {
+    type: ROUTE_CHANGE,
+    payload: newRoute,
+  };
+}
+
+export function toggleUserNavMenu() {
+  return {
+    type: TOGGLE_USER_NAV_MENU
+  };
+}
+
+export function signOut() {
+  return {
+    type: SIGN_OUT
+  };
+}

web/app/app.scss

@@ -2,7 +2,10 @@
 @import "base/base";
 @import "neat";
 
+@import "dashboard/dashboard";
 @import "home/home";
+@import "package/package";
+@import "sign-in/sign-in";
 @import "sign-up-form/sign-up-form";
 @import "user-nav/user-nav";
 
@@ -15,7 +18,7 @@
   margin-bottom: 3rem;
 
   h1 {
-    @include span-columns(10);
+    @include span-columns(9);
     display: inline;
   }
 }

web/app/boot.ts

@@ -1,9 +1,9 @@
-import {AppComponent} from "./app.component";
-import appState from "./app-state";
+import {AppComponent} from "./AppComponent";
+import {AppStore} from "./AppStore";
 import {ROUTER_PROVIDERS} from "angular2/router";
-import {bootstrap}    from "angular2/platform/browser";
+import {bootstrap} from "angular2/platform/browser";
 
-// Expose the app state on the window so we can inspect it in a console.
-window["appState"] = appState;
-
-bootstrap(AppComponent, [ROUTER_PROVIDERS]);
+bootstrap(AppComponent, [
+  AppStore,
+  ROUTER_PROVIDERS,
+]);

web/app/dashboard/DashboardComponent.ts

@@ -0,0 +1,41 @@
+import {AppStore} from "../AppStore";
+import {Component} from "angular2/core";
+import {Router, RouterLink} from "angular2/router";
+
+@Component({
+  directives: [RouterLink],
+  template: `
+  <div class="bldr-dashboard">
+    <h2>Packages</h2>
+    <ul class="bldr-dashboard-plan-list">
+      <li *ngIf="packages.length === 0">
+        You have no packages. Here's how to create one: &hellip;
+      </li>
+      <li *ngFor="#package of packages">
+        <a [routerLink]="['Package', { id: package.name, derivation: package.derivation }]">
+          {{index}}
+          {{username}}/{{package.name}}
+        </a>
+      </li>
+    </ul>
+  </div>
+  `
+})
+
+export class DashboardComponent {
+  constructor(private router: Router, private store: AppStore) {}
+
+  get packages() {
+    return this.store.getState().packages;
+  }
+
+  get username() {
+    return this.store.getState().username;
+  }
+
+  ngOnInit() {
+    if (!this.store.getState().isSignedIn) {
+      this.router.navigate(["Home"])
+    }
+  }
+}

web/app/dashboard/_dashboard.scss

@@ -0,0 +1,12 @@
+.bldr-dashboard {
+  &-plan-list {
+    li {
+      a {
+        margin-bottom: 1em;
+        padding: 1em;
+        border: 1px solid;
+        display: block;
+      }
+    }
+  }
+}

web/app/home/home.component.ts → web/app/home/HomeComponent.ts

@@ -1,7 +1,7 @@
-import appState from "../app-state";
 import {Component} from "angular2/core";
 import {Router} from "angular2/router";
-import {SignUpFormComponent} from "../sign-up-form/sign-up-form.component";
+import {SignUpFormComponent} from "../sign-up-form/SignUpFormComponent";
+import {AppStore} from "../AppStore";
 
 @Component({
   directives: [SignUpFormComponent],
@@ -12,18 +12,16 @@ import {SignUpFormComponent} from "../sign-up-form/sign-up-form.component";
         <h3>Build, deploy, and run your applications well.</h3>
         <h4>For containers, for the cloud, for the data center.</h4>
       </div>
-      <div class="bldr-sign-up-form">
-        <sign-up-form></sign-up-form>
-      </div>
+      <sign-up-form></sign-up-form>
     </div>
   `,
 })
 
 export class HomeComponent {
-  constructor(private router: Router) {}
+  constructor(private router: Router, private store: AppStore) {}
 
   ngOnInit() {
-    if (appState.get("signed-in")) {
+    if (this.store.getState().isSignedIn) {
       this.router.navigate(["Dashboard"])
     }
   }

web/app/package/PackageComponent.ts

@@ -0,0 +1,63 @@
+import {AppStore} from "../AppStore";
+import {Component} from "angular2/core";
+import {Router, RouterLink} from "angular2/router";
+
+@Component({
+  directives: [RouterLink],
+  template: `
+    <div class="bldr-package">
+      <h2>
+        <a [routerLink]="['Dashboard']">{{package.derivation}}</a>
+        /
+        {{package.name}}
+      </h2>
+      <div class="bldr-package-info">
+        <dl>
+          <dt>Maintainer</dt>
+          <dd>{{package.maintainer}}</dd>
+          <dt>License</dt>
+          <dd>{{package.license}}</dd>
+          <dt>Source URL</dt>
+          <dd><a href="{{package.source}}">{{package.source}}</a></dd>
+        </dl>
+      </div>
+      <div class="bldr-package-version-info">
+        <h3>Current Release</h3>
+        <dl>
+          <dt>Version</dt>
+          <dd>{{package.version}}</dd>
+          <dt>Release</dt>
+          <dd>{{package.release}}</dd>
+          <dt>SHA</dt>
+          <dd>{{package.sha}}</dd>
+        </dl>
+      </div>
+      <div class="bldr-package-deps">
+        <h3>Dependencies</h3>
+        <div class="bldr-package-deps-build">
+          <h4>Build Dependencies</h4>
+          <p>None</p>
+        </div>
+        <div class="bldr-package-deps-runtime">
+          <h4>Runtime Dependencies</h4>
+          <p>None</p>
+        </div>
+      </div>
+    </div>
+  `,
+})
+
+export class PackageComponent {
+  constructor (private router: Router, private store: AppStore) {}
+
+  get currentPackage() {
+    let parts = window.location.pathname.split("/")
+    return `${parts[2]}/${parts[3]}`;
+  }
+
+  get package () {
+    return this.store.getState().packages.filter((pkg, index) => {
+      return pkg.identifier === this.currentPackage;
+    })[0];
+  }
+}

web/app/package/_package.scss

@@ -0,0 +1,15 @@
+.bldr-package {
+  &-info {
+  }
+
+  &-version-info {
+  }
+
+  &-deps {
+    &-build {
+    }
+
+    &-runtime {
+    }
+  }
+}