@reactionary/source 0.0.27

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

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

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

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

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

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

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

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

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

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

package/examples/angular/tsconfig.app.json

@@ -0,0 +1,10 @@
+{
+  "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

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

package/examples/angular/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "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/README.md

@@ -0,0 +1,11 @@
+# examples-node
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build examples-node` to build the library.
+
+## Running unit tests
+
+Run `nx test examples-node` to execute the unit tests via [Jest](https://jestjs.io).

package/examples/node/eslint.config.mjs

@@ -0,0 +1,22 @@
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+  ...baseConfig,
+  {
+    files: ['**/*.json'],
+    rules: {
+      '@nx/dependency-checks': [
+        'error',
+        {
+          ignoredFiles: [
+            '{projectRoot}/eslint.config.{js,cjs,mjs}',
+            '{projectRoot}/esbuild.config.{js,ts,mjs,mts}',
+          ],
+        },
+      ],
+    },
+    languageOptions: {
+      parser: await import('jsonc-eslint-parser'),
+    },
+  },
+];

package/examples/node/jest.config.ts

@@ -0,0 +1,10 @@
+export default {
+  displayName: 'examples-node',
+  preset: '../../jest.preset.js',
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../coverage/examples/node',
+};

package/examples/node/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@reactionary/examples-node",
+  "version": "0.0.1",
+  "private": true,
+  "dependencies": {
+    "@reactionary/provider-algolia": "0.0.1",
+    "@reactionary/core": "0.0.1",
+    "zod": "4.0.0-beta.20250430T185432"
+  }
+}

package/examples/node/project.json

@@ -0,0 +1,20 @@
+{
+  "name": "examples-node",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "examples/node/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/esbuild:esbuild",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/examples/node",
+        "main": "examples/node/src/index.ts",
+        "tsConfig": "examples/node/tsconfig.lib.json",
+        "assets": ["examples/node/*.md"],
+        "format": ["esm"]
+      }
+    }
+  }
+}

package/examples/node/src/index.ts

@@ -0,0 +1,2 @@
+// FIXME: Convert from a library to an application. This is required due to it being a package...
+export const FOO = 42;

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

@@ -0,0 +1,29 @@
+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);
+  });
+});

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

@@ -0,0 +1,31 @@
+import { buildClient } from '@reactionary/core';
+import { withCommercetoolsCapabilities } from '@reactionary/provider-commercetools';
+
+describe('initialize commercetools', () => {
+  it('should be able to search against commercetools', async () => {
+    const client = buildClient([
+      withCommercetoolsCapabilities(
+        {
+          apiUrl: process.env['COMMERCETOOLS_API_URL'] || '',
+          authUrl: process.env['COMMERCETOOLS_AUTH_URL'] || '',
+          clientId: process.env['COMMERCETOOLS_CLIENT_ID'] || '',
+          clientSecret: process.env['COMMERCETOOLS_CLIENT_SECRET'] || '',
+          projectKey: process.env['COMMERCETOOLS_PROJECT_KEY'] || '',
+        },
+        { 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);
+  });
+});

package/examples/node/src/initialize-extended-providers.spec.ts

@@ -0,0 +1,38 @@
+import { buildClient, Session } from '@reactionary/core';
+import { CustomAlgoliaProductProvider } from './providers/custom-algolia-product.provider';
+
+
+describe('initialize extended providers', () => {
+  it('should be able to extend a provider with a custom schema with a default value', async () => {
+    const session: Session = {
+      id: '1234',
+      identity: {
+        id: '1234',
+        issued: new Date(),
+        expiry: new Date(),
+        token: '',
+        type: 'Anonymous'
+      }
+    }
+
+    const provider = new CustomAlgoliaProductProvider({
+      apiKey: process.env['ALGOLIA_API_KEY'] || '',
+      appId: process.env['ALGOLIA_APP_ID'] || '',
+      indexName: process.env['ALGOLIA_INDEX'] || '',
+    });
+
+    const client = buildClient([
+      {
+        product: provider
+      }
+    ]);
+
+    const product = await client.product.query([{
+      id: '4d28f98d-c446-446e-b59a-d9f718e5b98a',
+      query: 'id'
+    }], session);
+
+    expect(product[0].gtin).toBe('missingggg');
+    expect(product[0].name).toBe('SUNNAI GLASS BOWL');
+  });
+});

package/examples/node/src/initialize-mixed-providers.spec.ts

@@ -0,0 +1,36 @@
+import { buildClient } from '@reactionary/core';
+import { withAlgoliaCapabilities } from '@reactionary/provider-algolia';
+import { withCommercetoolsCapabilities } from '@reactionary/provider-commercetools';
+
+describe('initialize mixed providers', () => {
+  it('should be able to handle a mixture of providers', async () => {
+    const client = buildClient([
+      withAlgoliaCapabilities(
+        {
+          apiKey: process.env['ALGOLIA_API_KEY'] || '',
+          appId: process.env['ALGOLIA_APP_ID'] || '',
+          indexName: process.env['ALGOLIA_INDEX'] || '',
+        },
+        { search: true }
+      ),
+      withCommercetoolsCapabilities(
+        {
+          apiUrl: process.env['COMMERCETOOLS_API_URL'] || '',
+          authUrl: process.env['COMMERCETOOLS_AUTH_URL'] || '',
+          clientId: process.env['COMMERCETOOLS_CLIENT_ID'] || '',
+          clientSecret: process.env['COMMERCETOOLS_CLIENT_SECRET'] || '',
+          projectKey: process.env['COMMERCETOOLS_PROJECT_KEY'] || '',
+        },
+        { product: true }
+      ),
+    ]);
+
+    const search = await client.search.get({ term: 'glass', page: 0, pageSize: 10, facets: [] });
+
+    expect(search.products.length).toBeGreaterThan(0);
+
+    const product = await client.product.get({ id: search.products[0].identifier.key });
+
+    expect(product.identifier.key).toBe(search.products[0].identifier.key);
+  });
+});

package/examples/node/src/providers/custom-algolia-product.provider.ts

@@ -0,0 +1,18 @@
+import { AlgoliaConfiguration, AlgoliaProductProvider } from '@reactionary/provider-algolia';
+import { CustomProduct, CustomProductSchema } from '../schemas/custom-product.schema';
+import { ProductMutationSchema, ProductQuerySchema } from '@reactionary/core';
+
+export class CustomAlgoliaProductProvider extends AlgoliaProductProvider<CustomProduct> {    
+    constructor(config: AlgoliaConfiguration) {
+        super(config, CustomProductSchema, ProductQuerySchema, ProductMutationSchema);
+      }
+    
+    public parse(data: any): CustomProduct {
+        const result = super.newModel();
+
+        result.gtin = data.ean8 ?? data.ean13 ?? data.partNumber ?? 'missingggg';
+        result.name = result.name.toUpperCase();
+
+        return result;
+    }
+}

package/examples/node/src/schemas/custom-product.schema.ts

@@ -0,0 +1,8 @@
+import { z } from 'zod';
+import { ProductSchema } from '@reactionary/core';
+
+export const CustomProductSchema = ProductSchema.extend({
+  gtin: z.string().min(8),
+});
+
+export type CustomProduct = z.infer<typeof CustomProductSchema>;

package/examples/node/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "importHelpers": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noPropertyAccessFromIndexSignature": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

package/examples/node/tsconfig.lib.json

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