feat(react,vue,angular): Overhaul env, improve angular layouts

packages/create-angular/angular.json

@@ -46,7 +46,13 @@
             "development": {
               "optimization": false,
               "extractLicenses": false,
-              "sourceMap": true
+              "sourceMap": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.development.ts"
+                }
+              ]
             }
           },
           "defaultConfiguration": "production"

packages/create-angular/src/app/app.component.ts

@@ -7,6 +7,4 @@ import { RouterOutlet } from '@angular/router';
   imports: [RouterOutlet],
   template: `<router-outlet />`,
 })
-export class AppComponent {
-  title = 'create-angular';
-}
+export class AppComponent {}

packages/create-angular/src/app/components/app-layout.component.ts

@@ -3,9 +3,10 @@ import { RouterOutlet } from '@angular/router';
 import { AppContextService } from '../services/app-context.service';
 
 @Component({
-  selector: 'app-app-layout',
+  selector: 'app-layout',
   standalone: true,
   imports: [RouterOutlet],
+  host: { id: 'root' },
   template: `
     <header class="app-bar">
       <img
@@ -33,9 +34,7 @@ import { AppContextService } from '../services/app-context.service';
     >Sign out</RouterLink
   > -->
     </header>
-    <div class="container">
-      <router-outlet />
-    </div>
+    <router-outlet />
   `,
 })
 export class AppLayoutComponent {

packages/create-angular/src/app/components/card-collapsible.component.ts

@@ -0,0 +1,18 @@
+import { booleanAttribute, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-card-collapsible',
+  standalone: true,
+  template: `
+    <details class="card" [open]="open">
+      <summary class="card-summary">
+        <span class="body1 card-summary-title">{{ title }}</span>
+      </summary>
+      <div class="card-content"><ng-content /></div>
+    </details>
+  `,
+})
+export class CardCollapsibleComponent {
+  @Input({ required: true }) title = '';
+  @Input({ transform: booleanAttribute }) open = true;
+}

packages/create-angular/src/app/components/card.component.ts

@@ -1,26 +1,12 @@
-import { Component } from '@angular/core';
+import { booleanAttribute, Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-card',
   standalone: true,
-  imports: [],
   template: `
-    @if (title) {
-      <section class="card">
-        <div class="card-content"><ng-content /></div>
-      </section>
-    } @else {
-      <details class="card" [open]="open">
-        <summary class="card-summary">
-          <span class="body1 card-summary-title">{{ title }}</span>
-        </summary>
-        <div class="card-content"><ng-content /></div>
-      </details>
-    }
+    <section class="card">
+      <div class="card-content"><ng-content /></div>
+    </section>
   `,
 })
-export class CardComponent {
-  public title?: string;
-  public className = '';
-  public open = true;
-}
+export class CardComponent {}

packages/create-angular/src/app/components/layers.component.ts

@@ -1,15 +1,42 @@
-import { Component } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Layer } from '@deck.gl/core';
+import { CardComponent } from './card.component';
+import { CardCollapsibleComponent } from './card-collapsible.component';
 
+/**
+ * Layer list and visibility controller.
+ */
 @Component({
   selector: 'app-layers',
   standalone: true,
-  imports: [],
+  imports: [CardCollapsibleComponent],
   template: `
-    <p>
-      layers works!
-    </p>
-  `
+    <aside class="layers">
+      <app-card-collapsible title="Layers" [open]="open">
+        TODO:LayersComponent
+        <!--<label v-for="layer in layers" class="body2" :key="layer.id">
+        <input
+          type="checkbox"
+          :checked="layer.props.visible"
+          @input="
+            ({ target }) =>
+              setVisibility(layer.id, (target as HTMLInputElement).checked)
+          "
+        />{{ layer.id }}
+      </label>-->
+      </app-card-collapsible>
+    </aside>
+  `,
 })
 export class LayersComponent {
-
+  /** Whether the layer list is open (default) or closed. */
+  @Input() open = true;
+  /** List of deck.gl layers. */
+  @Input() layers: Layer[] = [];
+  /** Layer visibility state. Object keys are layer names, values are boolean visibility. */
+  @Input() layerVisibility: Record<string, boolean> = {};
+  /** Callback to be invoked by the Layers component if a layer's visibility is toggled. */
+  @Output() layerVisibilityChanged = new EventEmitter<
+    Record<string, boolean>
+  >();
 }

packages/create-angular/src/app/components/views/cell-towers-view.component.ts

@@ -1,10 +1,37 @@
-import { Component } from '@angular/core';
+import { Component, ContentChild } from '@angular/core';
+import { Map } from 'maplibre-gl';
+import { AccessorFunction, Deck, MapViewState, Color } from '@deck.gl/core';
+import { colorCategories, VectorTileLayer } from '@deck.gl/carto';
+import { vectorQuerySource, Filter } from '@carto/api-client';
 import { CardComponent } from '../card.component';
+import { LayersComponent } from '../layers.component';
+import { CardCollapsibleComponent } from '../card-collapsible.component';
 
+const MAP_STYLE =
+  'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json';
+
+const INITIAL_VIEW_STATE: MapViewState = {
+  latitude: 37.0902,
+  longitude: -95.7129,
+  zoom: 3.5,
+};
+
+// TODO: Fetch categories from Widgets API?
+const RADIO_DOMAIN = ['LTE', 'UMTS', 'CDMA', 'GSM', 'NR'];
+const RADIO_COLORS: AccessorFunction<unknown, Color> = colorCategories({
+  attr: 'radio',
+  domain: RADIO_DOMAIN,
+  colors: 'Bold',
+});
+
+/**
+ * Example application page, showing world-wide cell towers and a few widgets.
+ */
 @Component({
   selector: 'app-cell-towers-view',
   standalone: true,
-  imports: [CardComponent],
+  imports: [CardComponent, CardCollapsibleComponent, LayersComponent],
+  host: { class: 'container' },
   template: `
     <aside class="sidebar">
       <app-card>
@@ -23,14 +50,51 @@ import { CardComponent } from '../card.component';
         </p>
       </app-card>
       <span class="flex-space"></span>
-      <app-card title="Tower count"> widget </app-card>
-      <app-card title="Towers by radio"> widget </app-card>
+      <app-card-collapsible title="Tower count">widget</app-card-collapsible>
+      <app-card-collapsible title="Towers by radio"
+        >widget</app-card-collapsible
+      >
     </aside>
     <main class="map">
-      map layers
-      <app-card title="Legend" class="legend"> legend </app-card>
+      <div
+        id="maplibre-container"
+        style="position: absolute; width: 100%; height: 100%"
+      ></div>
+      <canvas
+        id="deck-canvas"
+        style="position: absolute; width: 100%; height: 100%"
+      ></canvas>
+      <app-layers></app-layers>
+      <app-card-collapsible title="Legend" class="legend"
+        >todo: legend</app-card-collapsible
+      >
       <aside class="map-footer">footer aside TODO</aside>
     </main>
   `,
 })
-export class CellTowersViewComponent {}
+export class CellTowersViewComponent {
+  @ContentChild('maplibre-container', { static: true })
+  maplibreContainer?: HTMLDivElement;
+  @ContentChild('deck-canvas', { static: true }) deckCanvas?: HTMLCanvasElement;
+
+  private map: Map = null!;
+  private deck: Deck = null!;
+
+  ngOnInit() {
+    this.map = new Map({
+      container: 'maplibre-container',
+      style: MAP_STYLE,
+      interactive: false,
+    });
+
+    this.deck = new Deck({
+      canvas: 'deck-canvas',
+      initialViewState: INITIAL_VIEW_STATE,
+      controller: true,
+      layers: [],
+      // onViewStateChange: ({ viewState: _viewState }) => {
+      //   viewState.value = _viewState;
+      // },
+    });
+  }
+}

packages/create-angular/src/app/components/views/population-view.component.ts

@@ -4,12 +4,7 @@ import { Component } from '@angular/core';
   selector: 'app-population-view',
   standalone: true,
   imports: [],
-  template: `
-    <p>
-      population-view works!
-    </p>
-  `
+  host: { class: 'container' },
+  template: ` <p>population-view works!</p> `,
 })
-export class PopulationViewComponent {
-
-}
+export class PopulationViewComponent {}

packages/create-angular/src/app/services/app-context.service.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { environment } from '../../environments/environment';
 
 export interface AppContextProps {
   title: string;
@@ -25,26 +26,24 @@ export interface AppContextProps {
   };
 }
 
-console.log('title', import.meta.env.VITE_APP_TITLE);
-
 @Injectable({
   providedIn: 'root',
 })
 export class AppContextService implements AppContextProps {
-  readonly title = import.meta.env.VITE_APP_TITLE;
+  readonly title = environment.APP_TITLE;
   readonly subtitle = 'Discover the power of developing with Angular';
   readonly logo = {
     src: 'carto.svg',
     alt: 'CARTO logo',
   };
-  accessToken = import.meta.env.VITE_CARTO_ACCESS_TOKEN;
+  accessToken = environment.ACCESS_TOKEN;
   readonly apiBaseUrl = 'https://gcp-us-east1.api.carto.com';
   readonly accountsUrl = 'http://app.carto.com/';
   readonly oauth = {
-    enabled: import.meta.env.VITE_CARTO_AUTH_ENABLED === 'true',
-    domain: 'auth.carto.com',
-    clientId: import.meta.env.VITE_CARTO_AUTH_CLIENT_ID,
-    organizationId: import.meta.env.VITE_CARTO_AUTH_ORGANIZATION_ID, // Required for SSO.
+    enabled: environment.AUTH_ENABLED,
+    clientId: environment.AUTH_CLIENT_ID,
+    organizationId: environment.AUTH_ORGANIZATION_ID, // Required for SSO.
+    domain: environment.AUTH_DOMAIN,
     namespace: 'http://app.carto.com/',
     scopes: [
       'read:current_user',

packages/create-angular/src/environments/environment.development.ts

@@ -0,0 +1,12 @@
+// TODO: In a newly-created project, this will override the correct injected
+// value from environment.ts, for only the Angular apps... need a way around.
+export const environment = {
+  APP_TITLE: 'Angular template',
+  ACCESS_TOKEN:
+    'eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfNDd1dW5tZWciLCJqdGkiOiJhZjRlM2QxMSJ9.e1GDIOtg3Jy2zcwbFpAxsvK38RqycRrWII1NVTH7KtQ',
+
+  AUTH_ENABLED: false,
+  AUTH_CLIENT_ID: 'Rsco0zdjNo3S2DoOAfOWLr6FfrtsHQKT',
+  AUTH_ORGANIZATION_ID: '',
+  AUTH_DOMAIN: 'auth.carto.com',
+};

packages/create-angular/src/environments/environment.ts

@@ -0,0 +1,10 @@
+export const environment = {
+  APP_TITLE: '$title',
+  ACCESS_TOKEN: '$accessToken',
+
+  // @ts-expect-error Replaced in template setup.
+  AUTH_ENABLED: '$authEnabled' === 'true',
+  AUTH_CLIENT_ID: '$authClientID',
+  AUTH_ORGANIZATION_ID: '$authOrganizationID',
+  AUTH_DOMAIN: '$authDomain',
+};

packages/create-angular/src/index.html

@@ -7,6 +7,6 @@
     <title>$title</title>
   </head>
   <body>
-    <app-root id="root"></app-root>
+    <app-root></app-root>
   </body>
 </html>

packages/create-common/src/constants.ts

@@ -7,6 +7,7 @@ export const TEMPLATE_EXCLUDE_PATHS = [
   '.vscode',
   '.yarn',
   '.env.local',
+  '.env.development',
 ];
 
 /** List of dependencies in the template to be _removed_ from new projects. */
@@ -35,8 +36,10 @@ export const TEMPLATE_EXCLUDE_PKG_FIELDS = [
  * such as `<!-- replace:title:begin -->`.
  */
 export const TEMPLATE_UPDATE_PATHS = [
-  'index.html',
-  'src/context.ts',
-  'src/main.{ts,tsx}',
-  '.env',
+  'index.html', // react, vue, angular
+  'src/context.ts', // react, vue
+  'src/main.{ts,tsx}', // react
+  'src/environments/environment.ts', // angular
+  'src/environments/environment.*.ts', // angular
+  '.env', // react, vue
 ];