@reactionary/source 0.0.27

package/eslint.config.mjs

@@ -0,0 +1,46 @@
+import nx from '@nx/eslint-plugin';
+
+export default [
+  ...nx.configs['flat/base'],
+  ...nx.configs['flat/typescript'],
+  ...nx.configs['flat/javascript'],
+  {
+    ignores: [
+      '**/dist',
+      '**/vite.config.*.timestamp*',
+      '**/vitest.config.*.timestamp*',
+    ],
+  },
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx', '**/*.vue'],
+    rules: {
+      '@nx/enforce-module-boundaries': [
+        'error',
+        {
+          enforceBuildableLibDependency: true,
+          allow: ['^.*/eslint(\\.base)?\\.config\\.[cm]?js$'],
+          depConstraints: [
+            {
+              sourceTag: '*',
+              onlyDependOnLibsWithTags: ['*'],
+            },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    files: [
+      '**/*.ts',
+      '**/*.tsx',
+      '**/*.cts',
+      '**/*.mts',
+      '**/*.js',
+      '**/*.jsx',
+      '**/*.cjs',
+      '**/*.mjs',
+    ],
+    // Override or add rules here
+    rules: {},
+  },
+];

package/examples/angular/e2e/example.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test('displays search results', async ({ page }) => {
+  await page.goto('/');
+
+  await page.waitForSelector('article', { state: 'visible' });
+
+  expect(await page.locator('article').count()).toBe(20);
+});

package/examples/angular/eslint.config.mjs

@@ -0,0 +1,41 @@
+import playwright from 'eslint-plugin-playwright';
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+  playwright.configs['flat/recommended'],
+  ...baseConfig,
+  ...nx.configs['flat/angular'],
+  ...nx.configs['flat/angular-template'],
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'app',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'app',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    // Override or add rules here
+    rules: {},
+  },
+  {
+    files: ['**/*.ts', '**/*.js'],
+    // Override or add rules here
+    rules: {},
+  },
+];

package/examples/angular/playwright.config.ts

@@ -0,0 +1,38 @@
+import { defineConfig, devices } from '@playwright/test';
+import { nxE2EPreset } from '@nx/playwright/preset';
+import { workspaceRoot } from '@nx/devkit';
+
+// For CI, you may want to set BASE_URL to the deployed application.
+const baseURL = process.env['BASE_URL'] || 'http://localhost:4200';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  ...nxE2EPreset(__filename, { testDir: './e2e' }),
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    baseURL,
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npx nx serve examples-angular',
+    url: 'http://localhost:4200',
+    reuseExistingServer: !process.env.CI,
+    cwd: workspaceRoot,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});

package/examples/angular/project.json

@@ -0,0 +1,86 @@
+{
+  "name": "examples-angular",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "prefix": "app",
+  "sourceRoot": "examples/angular/src",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@angular-devkit/build-angular:application",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/examples/angular",
+        "index": "examples/angular/src/index.html",
+        "browser": "examples/angular/src/main.ts",
+        "polyfills": [],
+        "tsConfig": "examples/angular/tsconfig.app.json",
+        "inlineStyleLanguage": "scss",
+        "assets": [
+          {
+            "glob": "**/*",
+            "input": "examples/angular/public"
+          }
+        ],
+        "styles": ["examples/angular/src/styles.scss"],
+        "scripts": []
+      },
+      "configurations": {
+        "production": {
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "500kb",
+              "maximumError": "1mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "4kb",
+              "maximumError": "8kb"
+            }
+          ],
+          "outputHashing": "all"
+        },
+        "development": {
+          "optimization": false,
+          "extractLicenses": false,
+          "sourceMap": true
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "serve": {
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "configurations": {
+        "production": {
+          "buildTarget": "examples-angular:build:production"
+        },
+        "development": {
+          "buildTarget": "examples-angular:build:development"
+        }
+      },
+      "defaultConfiguration": "development",
+      "continuous": true,
+      "dependsOn": [
+        { "projects": ["trpc-node"], "target": "serve" }
+      ]
+    },
+    "extract-i18n": {
+      "executor": "@angular-devkit/build-angular:extract-i18n",
+      "options": {
+        "buildTarget": "examples-angular:build"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    },
+    "serve-static": {
+      "executor": "@nx/web:file-server",
+      "options": {
+        "buildTarget": "examples-angular:build",
+        "staticFilePath": "dist/examples/angular/browser",
+        "spa": true
+      }
+    }
+  }
+}

package/examples/angular/src/app/app.component.html

@@ -0,0 +1,6 @@
+<header>
+    <input (keydown)="this.service.term.set(inputTerm.value)" #inputTerm/>
+</header>
+<main>
+    <router-outlet></router-outlet>
+</main>

package/examples/angular/src/app/app.component.scss

@@ -0,0 +1,22 @@
+:host {
+  display: block;
+}
+
+header {
+  padding: 0.5rem;
+
+  input {
+    padding-inline: 1rem;
+    color: rgb(205, 214, 244);
+    background: rgb(88, 91, 112);
+    width: 100%;
+    height: 3rem;
+    border-radius: 0.5rem;
+  }
+}
+
+main {
+  display: block;
+  width: 100%;
+  padding-inline: 0.5rem;
+}

package/examples/angular/src/app/app.component.ts

@@ -0,0 +1,14 @@
+import { Component, inject } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { SearchService } from './services/search.service';
+import { TRPC } from './services/trpc.client';
+
+@Component({
+  imports: [RouterModule],
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.scss',
+})
+export class AppComponent {
+  protected service = inject(SearchService);
+}

package/examples/angular/src/app/app.config.ts

@@ -0,0 +1,16 @@
+import { ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { NoPreloading, provideRouter, withPreloading, withRouterConfig } from '@angular/router';
+import { appRoutes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideExperimentalZonelessChangeDetection(),
+    provideRouter(
+      appRoutes,
+      withPreloading(NoPreloading),
+      withRouterConfig({
+        onSameUrlNavigation: 'ignore'
+      })
+    )
+  ],
+};

package/examples/angular/src/app/app.routes.ts

@@ -0,0 +1,25 @@
+import { Route } from '@angular/router';
+
+export const appRoutes: Route[] = [
+    {
+        path: 'search',
+        loadComponent: () => import('./search/search.component').then(x => x.SearchComponent)
+    },
+    {
+        path: 'product/:slug',
+        loadComponent: () => import('./product/product.component').then(x => x.ProductComponent)
+    },
+    {
+        path: 'identity',
+        loadComponent: () => import('./identity/identity.component').then(x => x.IdentityComponent)
+    },
+    {
+        path: 'cart',
+        loadComponent: () => import('./cart/cart.component').then(x => x.CartComponent)
+    },
+    {
+        path: '**',
+        pathMatch: 'prefix',
+        redirectTo: 'search'
+    }
+];

package/examples/angular/src/app/cart/cart.component.html

@@ -0,0 +1,4 @@
+<pre>{{ cart() | json }}</pre>
+<button (click)="add()">Add</button>
+<button (click)="adjust()">Adjust</button>
+<button (click)="remove()">Remove</button>

package/examples/angular/src/app/cart/cart.component.scss

@@ -0,0 +1,14 @@
+:host {
+  display: grid;
+  grid-template-columns: 600px;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+pre {
+  color: white;
+}
+
+input, button {
+  height: 3rem;
+}

package/examples/angular/src/app/cart/cart.component.ts

@@ -0,0 +1,73 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  signal,
+  ViewEncapsulation,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TRPC } from '../services/trpc.client';
+import { Cart } from '@reactionary/core';
+
+@Component({
+  selector: 'app-cart',
+  imports: [CommonModule],
+  templateUrl: './cart.component.html',
+  styleUrl: './cart.component.scss',
+  encapsulation: ViewEncapsulation.ShadowDom,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CartComponent {
+  protected trpc = inject(TRPC);
+  protected cart = signal<Cart | undefined>(undefined);
+
+  protected async add() {
+    const c = await this.trpc.client.cartMutation.mutate([
+      {
+        mutation: 'add',
+        cart: {
+          key: this.cart()?.identifier.key || '',
+        },
+        product: {
+          key: 'ad153f54-6ae9-4800-8e5e-b40a07eb87b4',
+        },
+        quantity: 2,
+      },
+    ]);
+
+    this.cart.set(c);
+  }
+
+  protected async adjust() {
+    const existing = this.cart();
+
+    if (existing) {
+      const c = await this.trpc.client.cartMutation.mutate([
+        {
+          mutation: 'adjustQuantity',
+          cart: existing.identifier,
+          item: existing.items[0].identifier,
+          quantity: existing.items[0].quantity + 1,
+        },
+      ]);
+
+      this.cart.set(c);
+    }
+  }
+
+  protected async remove() {
+    const existing = this.cart();
+
+    if (existing) {
+      const c = await this.trpc.client.cartMutation.mutate([
+        {
+          mutation: 'remove',
+          cart: existing.identifier,
+          item: existing.items[0].identifier,
+        },
+      ]);
+
+      this.cart.set(c);
+    }
+  }
+}

package/examples/angular/src/app/identity/identity.component.html

@@ -0,0 +1,6 @@
+<pre>{{ identity() | json }}</pre>
+<input #username />
+<input #password />
+<button (click)="login(username.value, password.value)">Log in</button>
+<button (click)="logout()">Logout</button>
+<button (click)="refresh()">Refresh</button>

package/examples/angular/src/app/identity/identity.component.scss

@@ -0,0 +1,18 @@
+:host {
+  display: grid;
+  grid-template-columns: 600px;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+pre {
+  color: white;
+}
+
+input, button {
+  height: 3rem;
+}
+
+h2 {
+  color: white;
+}

package/examples/angular/src/app/identity/identity.component.ts

@@ -0,0 +1,49 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  signal,
+  ViewEncapsulation,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TRPC } from '../services/trpc.client';
+import { Identity } from '@reactionary/core';
+
+@Component({
+  selector: 'app-identity',
+  imports: [CommonModule],
+  templateUrl: './identity.component.html',
+  styleUrl: './identity.component.scss',
+  encapsulation: ViewEncapsulation.ShadowDom,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class IdentityComponent {
+  protected trpc = inject(TRPC);
+  protected identity = signal<Identity | undefined>(undefined);
+  
+  protected async login(username: string, password: string) {
+    const res = await this.trpc.client.identityMutation.mutate([
+      {
+        mutation: 'login',
+        username,
+        password
+    }
+    ]);
+
+    this.identity.set(res);
+  }
+
+  protected async logout() {
+    const res = await this.trpc.client.identityMutation.mutate([{
+      mutation: 'logout'
+    }])
+
+    this.identity.set(res);
+  }
+
+  protected async refresh() {
+    const res = await this.trpc.client.identity.query([{ query: 'self' }])
+
+    this.identity.set(res[0]);
+  }
+}

package/examples/angular/src/app/product/product.component.html

@@ -0,0 +1,14 @@
+@if (service.productResource.value(); as product) {
+    <section>
+        <img [src]="product.image" [alt]="product.name" />
+    </section>
+    <section>
+        <h2>{{ product.name }}</h2>
+        <h3>{{ product.description }}</h3>
+        <ol>
+            @for (attribute of product.attributes; track $index) {
+                ${{ attribute | json }}
+            }
+        </ol>
+    </section>
+}

package/examples/angular/src/app/product/product.component.scss

@@ -0,0 +1,11 @@
+:host {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    color: rgb(205, 214, 244);
+}
+
+img {
+    width: 100%;
+    border-radius: 0.5rem;
+}

package/examples/angular/src/app/product/product.component.ts

@@ -0,0 +1,42 @@
+import { Component, effect, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ProductService } from '../services/product.service';
+import { TRPC } from '../services/trpc.client';
+
+@Component({
+  selector: 'app-product',
+  imports: [CommonModule],
+  templateUrl: './product.component.html',
+  styleUrl: './product.component.scss',
+})
+export class ProductComponent {
+  protected service = inject(ProductService);
+  protected trpc = inject(TRPC);
+
+  constructor() {
+    effect(async () => {
+      const product = this.service.productResource.value();
+
+      console.log('product: ', product);
+
+      if (product && product.skus.length > 0) {
+        const inventory = await this.trpc.client.inventory.query([{
+          query: 'sku',
+          sku: product.skus[0].identifier.key,
+        }]);
+        console.log('inventory: ', inventory);
+
+        const prices = await this.trpc.client.price.query([
+          { sku: product.skus[0].identifier, query: 'sku' },
+        ]);
+        console.log('price: ', prices);
+
+        const pricesWithUnknownSku = await this.trpc.client.price.query([
+          { sku: product.skus[0].identifier, query: 'sku' },
+          { sku: { key: '123456' }, query: 'sku' },
+        ]);
+        console.log('pricesWithUnknownSku: ', pricesWithUnknownSku);
+      }
+    });
+  }
+}

package/examples/angular/src/app/search/search.component.html

@@ -0,0 +1,35 @@
+<aside>
+    @for (facet of service.search()?.facets; track $index) {
+        <details [open]="true">
+            <summary>{{ facet.name }}</summary>
+            
+            <div class="content">
+                @for (value of facet.values; track $index) {
+                    <label>
+                        <span>{{ value.name }}</span>
+                        <span>{{ value.count }}</span>
+                        <input type="checkbox" (click)="toggleFacet(value.identifier)" [checked]="value.active"/>
+                    </label>
+                }
+            </div>
+        </details>
+    }
+</aside>
+<section>
+    @for (product of service.search()?.products; track $index) {
+        <a [routerLink]="['/', 'product', product.slug]">
+            <article>
+                <img [src]="product.image.replace('w_200', 'w_200,h_200,')" [alt]="product.name" />
+                <h3>{{ product.name }}</h3>
+            </article>
+        </a>
+    }
+</section>
+<footer>
+    <button (click)="previousPage()" [disabled]="hasPrevious()">
+        &lt;
+    </button>
+    <button (click)="nextPage()" [disabled]="hasNext()">
+        &gt;
+    </button>
+</footer>