@reactionary/source 0.0.31 → 0.0.33

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

@@ -1,73 +0,0 @@
-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

@@ -1,6 +0,0 @@
-<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

@@ -1,18 +0,0 @@
-: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

@@ -1,49 +0,0 @@
-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

@@ -1,14 +0,0 @@
-@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

@@ -1,11 +0,0 @@
-: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

@@ -1,42 +0,0 @@
-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

@@ -1,35 +0,0 @@
-<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>

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

@@ -1,129 +0,0 @@
-:host {
-    display: grid;
-    gap: 0.5rem;
-    grid-template-columns: 300px 1fr;
-    color: rgb(205, 214, 244);
-  }
-  
-  details[open] {
-    summary:after {
-      content: '-';
-    }
-  }
-  
-  details {
-    position: relative;
-    background: rgb(49, 50, 68);
-    border-radius: 0.5rem;
-  }
-  
-  summary {
-    font-weight: bold;
-    text-transform: capitalize;
-    list-style: none;
-    padding: 0.5rem;
-  
-    &::-webkit-details-marker {
-      display: none;
-    }
-  
-    &::after {
-      position: absolute;
-      top: 0.5rem;
-      right: 0.5rem;
-      content: '+';
-      line-height: 1;
-    }
-  }
-  
-  aside {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-auto-rows: min-content;
-    gap: 0.25rem;
-  
-    .content {
-      display: grid;
-      grid-template-columns: 1fr min-content min-content;
-      grid-auto-rows: min-content;
-      padding: 0.5rem;
-      gap: 0.5rem;
-  
-      label {
-        grid-column: span 3;
-        display: grid;
-        grid-template-columns: subgrid;
-        align-items: center;
-        gap: 0.5rem;
-  
-        input {
-          width: 1.5rem;
-          height: 1.5rem;
-          background: rgb(147, 153, 178);
-          border-radius: 0.125rem;
-  
-          &:checked {
-              background: rgb(137, 220, 235);
-          }
-        }
-      }
-    }
-  }
-  
-  section {
-    justify-content: center;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    grid-auto-rows: min-content;
-    gap: 0.5rem;
-  }
-  
-  article {
-    background: rgb(49, 50, 68);
-    border-radius: 0.25rem;
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr min-content;
-    gap: 1rem;
-  
-    h3 {
-      line-height: 1.2;
-      font-size: 1rem;
-      text-align: center;
-      margin-bottom: 1rem;
-    }
-  
-    img {
-      object-fit: contain;
-      border-radius: inherit;
-      max-width: 100%;
-      width: 100%;
-    }
-  }
-  
-  footer {
-    grid-column: 2;
-    margin: 0.5rem;
-    gap: 0.25rem;
-    display: grid;
-    grid-template-columns: min-content min-content;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  button {
-    display: grid;
-    justify-content: center;
-    align-items: center;
-  
-    height: 3rem;
-    background: rgb(49, 50, 68);
-    color: rgb(205, 214, 244);
-    aspect-ratio: 1 / 1;
-    border-radius: 0.25rem;
-  
-    &:disabled {
-      opacity: 0.5;
-    }
-  }
-  

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

@@ -1,50 +0,0 @@
-import { Component, computed, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { SearchService } from '../services/search.service';
-import { FacetValueIdentifier } from '@reactionary/core';
-import { RouterModule } from '@angular/router';
-import { TRPC } from '../services/trpc.client';
-
-@Component({
-  selector: 'app-search',
-  imports: [CommonModule, RouterModule],
-  templateUrl: './search.component.html',
-  styleUrl: './search.component.scss',
-})
-export class SearchComponent {
-  protected service = inject(SearchService);
-  protected client = inject(TRPC);
-
-  protected hasNext = computed(() => {
-    return this.service.page() >= (this.service.search()?.pages || 0) - 1;
-  });
-
-  protected hasPrevious = computed(() => {
-    return !(this.service.page() > 0);
-  });
-
-  protected previousPage() {
-    this.service.page.update((old) => old - 1);
-  }
-
-  protected nextPage() {
-    this.service.page.update((old) => old + 1);
-  }
-
-  protected toggleFacet(value: FacetValueIdentifier) {
-    this.service.facets.update((old) => {
-      const existingIndex = old.findIndex(
-        (x) => JSON.stringify(x) === JSON.stringify(value)
-      );
-
-      if (existingIndex > -1) {
-        const updated = [...old];
-        updated.splice(existingIndex, 1);
-
-        return updated;
-      } else {
-        return [...old, value];
-      }
-    });
-  }
-}

package/examples/angular/src/app/services/product.service.ts

@@ -1,35 +0,0 @@
-import { inject, Injectable, resource } from '@angular/core';
-import { TRPC } from './trpc.client';
-import { ActivationEnd, Router } from '@angular/router';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { filter, map } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class ProductService {
-  protected client = inject(TRPC);
-  protected router = inject(Router);
-  protected slug = toSignal(
-    this.router.events.pipe(filter(x => x instanceof ActivationEnd), map(x => x.snapshot.params['slug'])),
-    { initialValue: '' }
-  );
-
-  public productResource = resource({
-    request: () => ({
-      slug: this.slug(),
-    }),
-    loader: async ({ request }) => {
-      if (request.slug) {
-        const results = await this.client.client.product.query([{
-          query: 'slug',
-          slug: request.slug,
-        }]);
-
-        return results[0];
-      } else {
-        return undefined;
-      }
-    },
-  });
-}

package/examples/angular/src/app/services/search.service.ts

@@ -1,48 +0,0 @@
-import { inject, Injectable, linkedSignal, resource, signal } from '@angular/core';
-import { FacetValueIdentifier, SearchResult } from '@reactionary/core';
-import { TRPC } from './trpc.client';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class SearchService {
-  protected client = inject(TRPC);
-
-  public pageSize = signal(20);
-  public page = signal(0);
-  public term = signal('glass');
-  public facets = signal(new Array<FacetValueIdentifier>());
-
-  protected searchResource = resource({
-    request: () => ({
-      pageSize: this.pageSize(),
-      page: this.page(),
-      term: this.term(),
-      facets: this.facets(),
-    }),
-    loader: async ({ request }) => {
-      const result = await this.client.client.search.query([{
-        query: 'term',
-        search: {
-          ...request
-        }
-      }]);
-
-      return result[0];
-    },
-  });
-
-  public search = linkedSignal<
-    SearchResult | undefined,
-    SearchResult | undefined
-  >({
-    source: () => this.searchResource.value(),
-    computation: (source, previous) => {
-      if (source) {
-        return source;
-      }
-
-      return previous?.value;
-    },
-  }).asReadonly();
-}

package/examples/angular/src/app/services/trpc.client.ts

@@ -1,27 +0,0 @@
-import { Injectable } from "@angular/core";
-import { createTRPCClient, httpBatchLink } from "@trpc/client";
-
-// FIXME: move the router to a buildable library, to allow importing it
-// eslint-disable-next-line @nx/enforce-module-boundaries 
-import type { RouterType } from '../../../../trpc-node/src/router-instance';
-import superjson from "superjson";
-
-@Injectable({
-    providedIn: 'root',
-  })
-  export class TRPC {
-    public client = createTRPCClient<RouterType>({
-      links: [
-        httpBatchLink({
-          url: 'http://localhost:3000/trpc',
-          transformer: superjson,
-          fetch(url, options) {
-            return fetch(url, {
-              ...options,
-              credentials: 'include',
-            });
-          },
-        }),
-      ],
-    });
-  }

package/examples/angular/src/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>examples-angular</title>
-    <base href="/" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-  </head>
-  <body>
-    <app-root></app-root>
-  </body>
-</html>

package/examples/angular/src/main.ts

@@ -1,7 +0,0 @@
-import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
-import { AppComponent } from './app/app.component';
-
-bootstrapApplication(AppComponent, appConfig).catch((err) =>
-  console.error(err)
-);

package/examples/angular/src/styles.scss

@@ -1,17 +0,0 @@
-a,
-input,
-h3,
-button {
-  all: unset;
-  box-sizing: border-box;
-}
-
-* {
-    box-sizing: border-box;
-}
-
-body {
-    margin: 0;
-    padding: 0;
-    background: rgb(17, 17, 27);
-}

package/examples/angular/src/test-setup.ts

@@ -1,6 +0,0 @@
-import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
-
-setupZoneTestEnv({
-  errorOnUnknownElements: true,
-  errorOnUnknownProperties: true,
-});

package/examples/angular/tsconfig.app.json

@@ -1,10 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "types": ["node"]
-  },
-  "files": ["src/main.ts"],
-  "include": ["src/**/*.d.ts"],
-  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
-}

package/examples/angular/tsconfig.editor.json

@@ -1,6 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "include": ["src/**/*.ts"],
-  "compilerOptions": {},
-  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
-}

package/examples/angular/tsconfig.json

@@ -1,32 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2022",
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.editor.json"
-    },
-    {
-      "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ],
-  "extends": "../../tsconfig.base.json",
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  }
-}

package/examples/node/src/initialize-algolia.spec.ts

@@ -1,29 +0,0 @@
-import { buildClient } from '@reactionary/core';
-import { withAlgoliaCapabilities } from '@reactionary/provider-algolia';
-
-describe('initialize algolia', () => {
-  it('should be able to search against algolia', async () => {
-    const client = buildClient([
-      withAlgoliaCapabilities(
-        {
-          apiKey: process.env['ALGOLIA_API_KEY'] || '',
-          appId: process.env['ALGOLIA_APP_ID'] || '',
-          indexName: process.env['ALGOLIA_INDEX'] || '',
-        },
-        { product: true, search: true }
-      ),
-    ]);
-
-    expect(client.search).toBeDefined();
-
-    const result = await client.search.get({
-      term: 'glass',
-      page: 0,
-      pageSize: 10,
-      facets: []
-    });
-
-    expect(result.identifier.term).toBe('glass');
-    expect(result.products.length).toBeGreaterThan(0);
-  });
-});