build(deps): update to Angular 18 (#36) (#37)

* chore(main): release composables 0.2.2 (#25) * build(deps): update nx * build(deps): update angular to 17.1 * chore: use signal based inputs in example * feat(composables): make event composable internal * chore: sync buttons via signals * build(deps): update to angular 18 & nx 19 * build(composables): allow angular 18 * build(deps): update @ngxs/store & typedoc * chore(composables): fix peer dependencies * test(demo): fix button tests --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
bynaryDE · Jul 11, 2024 · 300e7e2 · 300e7e2
1 parent 71a949a
commit 300e7e2
Show file tree

Hide file tree

Showing 25 changed files with 10,966 additions and 9,264 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,22 +1,11 @@
 {
     "root": true,
-    "ignorePatterns": [
-        "**/*"
-    ],
-    "plugins": [
-        "@nx"
-    ],
-    "extends": [
-        "@bynary/eslint-config/angular"
-    ],
+    "ignorePatterns": ["**/*"],
+    "plugins": ["@nx"],
+    "extends": ["@bynary/eslint-config/angular"],
     "overrides": [
         {
-            "files": [
-                "*.ts",
-                "*.tsx",
-                "*.js",
-                "*.jsx"
-            ],
+            "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
             "rules": {
                 "@nx/enforce-module-boundaries": [
                     "error",
@@ -26,42 +15,31 @@
                         "depConstraints": [
                             {
                                 "sourceTag": "*",
-                                "onlyDependOnLibsWithTags": [
-                                    "*"
-                                ]
+                                "onlyDependOnLibsWithTags": ["*"]
                             }
                         ]
                     }
                 ]
             }
         },
         {
-            "files": [
-                "*.ts",
-                "*.tsx"
-            ],
-            "extends": [
-                "plugin:@nx/typescript"
-            ],
-            "rules": {}
+            "files": ["*.ts", "*.tsx"],
+            "extends": ["plugin:@nx/typescript"],
+            "rules": {
+                "@typescript-eslint/no-extra-semi": "error",
+                "no-extra-semi": "off"
+            }
         },
         {
-            "files": [
-                "*.js",
-                "*.jsx"
-            ],
-            "extends": [
-                "plugin:@nx/javascript"
-            ],
-            "rules": {}
+            "files": ["*.js", "*.jsx"],
+            "extends": ["plugin:@nx/javascript"],
+            "rules": {
+                "@typescript-eslint/no-extra-semi": "error",
+                "no-extra-semi": "off"
+            }
         },
         {
-            "files": [
-                "*.spec.ts",
-                "*.spec.tsx",
-                "*.spec.js",
-                "*.spec.jsx"
-            ],
+            "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],
             "env": {
                 "jest": true
             },

diff --git a/.gitignore b/.gitignore
@@ -42,3 +42,4 @@ Thumbs.db
 .angular
 
 .nx/cache
+.nx/workspace-data
diff --git a/.prettierignore b/.prettierignore
@@ -3,3 +3,5 @@
 /coverage
 /.nx/cache
 .angular
+
+/.nx/workspace-data
diff --git a/apps/demo/project.json b/apps/demo/project.json
@@ -81,8 +81,7 @@
             }
         },
         "lint": {
-            "executor": "@nx/eslint:lint",
-            "outputs": ["{options.outputFile}"]
+            "executor": "@nx/eslint:lint"
         },
         "test": {
             "executor": "@nx/jest:jest",

diff --git a/apps/demo/src/app/app.component.html b/apps/demo/src/app/app.component.html
@@ -10,17 +10,17 @@ <h1>{{ title() }}</h1>
                 <legend>State</legend>
                 <label>
                     <input
-                        #disabled
+                        #disabledControl
                         type="checkbox"
-                        (change)="button.isDisabled.set(disabled.checked); oldButton.isDisabled = disabled.checked"
+                        (change)="disabled.set(disabledControl.checked); oldButton.disabled = disabledControl.checked"
                     />
                     Disabled
                 </label>
                 <label>
                     <input
-                        #loading
+                        #loadingControl
                         type="checkbox"
-                        (change)="button.isLoading.set(loading.checked); oldButton.isLoading = loading.checked"
+                        (change)="loading.set(loadingControl.checked); oldButton.loading = loadingControl.checked"
                     />
                     Loading
                 </label>
@@ -54,26 +54,26 @@ <h1>{{ title() }}</h1>
                     <input
                         type="radio"
                         name="appearance"
-                        [checked]="!button.appearance()"
-                        (change)="button.appearance.set(undefined); oldButton.appearance = undefined"
+                        [checked]="!appearance()"
+                        (change)="appearance.set(undefined); oldButton.appearance = undefined"
                     />
                     Default
                 </label>
                 <label>
                     <input
                         type="radio"
                         name="appearance"
-                        [checked]="button.appearance() === 'outline'"
-                        (change)="button.appearance.set('outline'); oldButton.appearance = 'outline'"
+                        [checked]="appearance() === 'outline'"
+                        (change)="appearance.set('outline'); oldButton.appearance = 'outline'"
                     />
                     Outline
                 </label>
                 <label>
                     <input
                         type="radio"
                         name="appearance"
-                        [checked]="button.appearance() === 'solid'"
-                        (change)="button.appearance.set('solid'); oldButton.appearance = 'solid'"
+                        [checked]="appearance() === 'solid'"
+                        (change)="appearance.set('solid'); oldButton.appearance = 'solid'"
                     />
                     Solid
                 </label>
@@ -85,26 +85,26 @@ <h1>{{ title() }}</h1>
                     <input
                         type="radio"
                         name="appearance"
-                        [checked]="!button.color()"
-                        (change)="button.color.set(undefined); oldButton.color = undefined"
+                        [checked]="!color()"
+                        (change)="color.set(undefined); oldButton.color = undefined"
                     />
                     Default
                 </label>
                 <label>
                     <input
                         type="radio"
                         name="appearance"
-                        [checked]="button.color() === 'red'"
-                        (change)="button.color.set('red'); oldButton.color = 'red'"
+                        [checked]="color() === 'red'"
+                        (change)="color.set('red'); oldButton.color = 'red'"
                     />
                     Red
                 </label>
                 <label>
                     <input
                         type="radio"
                         name="appearance"
-                        [checked]="button.color() === 'green'"
-                        (change)="button.color.set('green'); oldButton.color = 'green'"
+                        [checked]="color() === 'green'"
+                        (change)="color.set('green'); oldButton.color = 'green'"
                     />
                     Green
                 </label>
@@ -123,7 +123,17 @@ <h2>Old</h2>
                 >)
             </p>
         </header>
-        <demo-old-button #oldButton type="submit" (click)="incrementCounter()">Button</demo-old-button>
+        <demo-old-button
+            #oldButton
+            type="submit"
+            [disabled]="disabled()"
+            [loading]="loading()"
+            [appearance]="appearance()"
+            [color]="color()"
+            (click)="incrementCounter()"
+        >
+            Button
+        </demo-old-button>
     </div>
 
     <div class="card output">
@@ -137,6 +147,16 @@ <h2>New</h2>
                 >)
             </p>
         </header>
-        <demo-button #button type="submit" (click)="incrementCounter()">Button</demo-button>
+        <demo-button
+            #button
+            type="submit"
+            [disabled]="disabled()"
+            [loading]="loading()"
+            [appearance]="appearance()"
+            [color]="color()"
+            (click)="incrementCounter()"
+        >
+            Button
+        </demo-button>
     </div>
 </main>
diff --git a/apps/demo/src/app/app.component.ts b/apps/demo/src/app/app.component.ts
@@ -2,7 +2,7 @@ import { Component, computed, signal } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { bindTitle } from '@bynary/composables/title';
 
-import { ButtonComponent } from './components/button/button.component';
+import { ButtonAppearance, ButtonColor, ButtonComponent } from './components/button/button.component';
 import { ColorSchemeSwitchComponent } from './components/color-scheme-switch/color-scheme-switch.component';
 import { OldButtonComponent } from './components/old-button/old-button.component';
 
@@ -19,6 +19,11 @@ export class AppComponent {
         computed(() => (this.counter() ? `@bynary/composables - Clicks: ${this.counter()}` : '@bynary/composables'))
     );
 
+    readonly disabled = signal(false);
+    readonly loading = signal(false);
+    readonly appearance = signal<ButtonAppearance>('solid');
+    readonly color = signal<ButtonColor>(undefined);
+
     incrementCounter() {
         this.counter.update((value) => value + 1);
     }

diff --git a/apps/demo/src/app/components/button/button.component.html b/apps/demo/src/app/components/button/button.component.html
@@ -1,2 +1,2 @@
-<div class="c-button__loading-indicator" *ngIf="isLoading()"></div>
+<div class="c-button__loading-indicator" *ngIf="loading()"></div>
 <ng-content></ng-content>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -42,3 +42,4 @@ Thumbs.db
		.angular

		.nx/cache
		.nx/workspace-data