Next

.gitignore

@@ -2,8 +2,9 @@
 
 # Custom
 .nx
-playground
-.playgrounds
+apps/dev/angular
+apps/dev/react
+apps/dev/web
 NOTES.md
 /test-results
 __screenshots__
@@ -67,4 +68,4 @@ devenv.local.nix
 vite.config.*.timestamp*
 vitest.config.*.timestamp*
 .cursor/rules/nx-rules.mdc
-.github/instructions/nx.instructions.md
+.github/instructions/nx.instructions.md

.nxignore

@@ -1,2 +1,4 @@
-!playground
 **/.*/
+!apps/dev/web
+!apps/dev/react
+!apps/dev/angular

.templates/angular/.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["../../.eslintrc.json"],
+  "extends": ["../../../.eslintrc.json"],
   "ignorePatterns": ["!**/*"],
   "overrides": [
     {

.templates/angular/project.json

@@ -1,34 +1,34 @@
 {
-  "name": "angular",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "name": "angular-dev",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "prefix": "abgov",
-  "sourceRoot": "playground/angular/src",
+  "sourceRoot": "apps/dev/angular/src",
   "tags": [],
   "targets": {
     "build": {
       "executor": "@angular-devkit/build-angular:application",
       "outputs": ["{options.outputPath}"],
       "options": {
-        "outputPath": "dist/playground/angular",
-        "index": "playground/angular/src/index.html",
-        "browser": "playground/angular/src/main.ts",
+        "outputPath": "dist/apps/dev/angular",
+        "index": "apps/dev/angular/src/index.html",
+        "browser": "apps/dev/angular/src/main.ts",
         "polyfills": ["zone.js"],
-        "tsConfig": "playground/angular/tsconfig.app.json",
+        "tsConfig": "apps/dev/angular/tsconfig.app.json",
         "assets": [
-          "playground/angular/src/favicon.ico",
-          "playground/angular/src/assets"
+          "apps/dev/angular/src/favicon.ico",
+          "apps/dev/angular/src/assets"
         ],
-        "styles": ["playground/angular/src/styles.css"],
+        "styles": ["apps/dev/angular/src/styles.css"],
         "scripts": []
       },
       "configurations": {
         "production": {
           "budgets": [
             {
               "type": "initial",
-              "maximumWarning": "500kb",
-              "maximumError": "1mb"
+              "maximumWarning": "2mb",
+              "maximumError": "3mb"
             },
             {
               "type": "anyComponentStyle",
@@ -50,18 +50,18 @@
       "executor": "@angular-devkit/build-angular:dev-server",
       "configurations": {
         "production": {
-          "buildTarget": "angular:build:production"
+          "buildTarget": "angular-dev:build:production"
         },
         "development": {
-          "buildTarget": "angular:build:development"
+          "buildTarget": "angular-dev:build:development"
         }
       },
       "defaultConfiguration": "development"
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "buildTarget": "angular:build"
+        "buildTarget": "angular-dev:build"
       }
     },
     "lint": {

.templates/angular/src/app/app-routing.module.ts

@@ -1,13 +1,11 @@
 import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
-import { ComponentWrapperPageComponent } from "./component-wrapper";
+import { PlaygroundComponent } from "./playground";
 
-const routes: Routes = [
-  { path: "/", component: ComponentWrapperPageComponent },
-];
+const routes: Routes = [{ path: "", component: PlaygroundComponent }];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

.templates/angular/src/app/app.component.ts

@@ -1,8 +1,11 @@
-import {Component, OnInit} from "@angular/core";
+import { Component, OnInit } from "@angular/core";
+import { RouterOutlet } from "@angular/router";
 
 @Component({
-  selector: "goab-root",
-  template: "<abgov-component-wrapper></abgov-component-wrapper>"
+  selector: "abgov-root",
+  template: "<router-outlet></router-outlet>",
+  standalone: true,
+  imports: [RouterOutlet],
 })
 export class AppComponent implements OnInit {
   ngOnInit() {

.templates/angular/src/app/app.module.ts

@@ -6,17 +6,18 @@ import { AngularComponentsModule } from "@abgov/angular-components";
 import { NoopAnimationsModule } from "@angular/platform-browser/animations";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { NgForOf, NgIf } from "@angular/common";
-import { ComponentWrapperPageComponent } from "./component-wrapper";
+import { PlaygroundComponent } from "./playground";
+import { AppRoutingModule } from "./app-routing.module";
 import "@abgov/web-components";
 
 @NgModule({
-  declarations: [
-    AppComponent,
-  ],
+  declarations: [],
   imports: [
+    AppComponent,
     AngularComponentsModule,
-    ComponentWrapperPageComponent,
+    PlaygroundComponent,
     BrowserModule,
+    AppRoutingModule,
     FormsModule,
     NgForOf,
     NgIf,
@@ -27,4 +28,4 @@ import "@abgov/web-components";
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
-export class AppModule { }
+export class AppModule {}

.templates/angular/src/app/playground.ts

@@ -0,0 +1,24 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import {
+  GoabInput,
+  /* Import components here */
+} from "@abgov/angular-components";
+
+@Component({
+  standalone: true,
+  selector: "abgov-app",
+  template: `
+    <div style="width: 1024px; margin: 0 auto;">
+      <goab-input placeholder="Hello, World!" />
+    </div>
+  `,
+
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [
+    CommonModule,
+    GoabInput,
+    // add test components here
+  ],
+})
+export class PlaygroundComponent {}

.templates/angular/src/index.html

@@ -12,7 +12,7 @@
 </head>
 
 <body>
-  <goab-root></goab-root>
+  <abgov-root></abgov-root>
 </body>
 
 </html>

.templates/angular/src/styles.css

@@ -1,5 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
-@import "../../../dist/libs/web-components/index.css";
+@import "../../../../dist/libs/web-components/index.css";
 
 :root {
   --goa-space-fill: 32ch;

.templates/angular/tsconfig.app.json

@@ -1,7 +1,7 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
+    "outDir": "../../../dist/out-tsc",
     "types": []
   },
   "files": ["src/main.ts"],

.templates/angular/tsconfig.json

@@ -20,7 +20,7 @@
       "path": "./tsconfig.editor.json"
     }
   ],
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../../tsconfig.base.json",
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,

.templates/react/.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "extends": ["plugin:@nx/react", "../../../.eslintrc.json"],
   "ignorePatterns": ["!**/*"],
   "overrides": [
     {

.templates/react/project.json

@@ -1,15 +1,15 @@
 {
-  "name": "react",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "playground/react/src",
+  "name": "react-dev",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/dev/react/src",
   "projectType": "application",
   "targets": {
     "build": {
       "executor": "@nx/vite:build",
       "outputs": ["{options.outputPath}"],
       "defaultConfiguration": "production",
       "options": {
-        "outputPath": "dist/playground/react"
+        "outputPath": "dist/apps/dev/react"
       },
       "configurations": {
         "development": {
@@ -24,15 +24,15 @@
       "executor": "@nx/vite:dev-server",
       "defaultConfiguration": "development",
       "options": {
-        "buildTarget": "react:build"
+        "buildTarget": "react-dev:build"
       },
       "configurations": {
         "development": {
-          "buildTarget": "react:build:development",
+          "buildTarget": "react-dev:build:development",
           "hmr": true
         },
         "production": {
-          "buildTarget": "react:build:production",
+          "buildTarget": "react-dev:build:production",
           "hmr": false
         }
       }
@@ -41,14 +41,14 @@
       "executor": "@nx/vite:preview-server",
       "defaultConfiguration": "development",
       "options": {
-        "buildTarget": "react:build"
+        "buildTarget": "react-dev:build"
       },
       "configurations": {
         "development": {
-          "buildTarget": "react:build:development"
+          "buildTarget": "react-dev:build:development"
         },
         "production": {
-          "buildTarget": "react:build:production"
+          "buildTarget": "react-dev:build:production"
         }
       }
     },