Improve Cratis Web template with @cratis/components, proper Workbench-style configuration, and complete sample feature

Cratis.Templates.csproj

@@ -13,6 +13,7 @@
         <License>MIT</License>
         <IncludeContentInPack>true</IncludeContentInPack>
         <NoWarn>$(NoWarn);CS8805;CS0103;IDE0073;SA1512;SA1515;SA1005</NoWarn>
+        <IncludeBuildOutput>false</IncludeBuildOutput>
     </PropertyGroup>
 
     <ItemGroup>

Templates/Cratis/.template.config/template.json

@@ -136,52 +136,7 @@
         },
         {
             "condition": "(EnableFrontend)",
-            "description": "Add frontend runtime dependencies.",
-            "manualInstructions": [
-                {
-                    "text": "Run 'yarn add react react-dom'"
-                }
-            ],
-            "actionId": "3A7C4B45-1F5D-4A30-959A-51B88E82B5D2",
-            "args": {
-                "executable": "yarn",
-                "args": "add react react-dom"
-            },
-            "continueOnError": true
-        },
-        {
-            "condition": "(EnableFrontend)",
-            "description": "Add frontend development dependencies.",
-            "manualInstructions": [
-                {
-                    "text": "Run 'yarn add --dev @types/react @types/react-dom @vitejs/plugin-react typescript vite'"
-                }
-            ],
-            "actionId": "3A7C4B45-1F5D-4A30-959A-51B88E82B5D2",
-            "args": {
-                "executable": "yarn",
-                "args": "add --dev @types/react @types/react-dom @vitejs/plugin-react typescript vite"
-            },
-            "continueOnError": true
-        },
-        {
-            "condition": "(EnableFrontend)",
-            "description": "Add latest Cratis packages.",
-            "manualInstructions": [
-                {
-                    "text": "Run 'yarn add @cratis/arc @cratis/arc.react'"
-                }
-            ],
-            "actionId": "3A7C4B45-1F5D-4A30-959A-51B88E82B5D2",
-            "args": {
-                "executable": "yarn",
-                "args": "add @cratis/arc @cratis/arc.react"
-            },
-            "continueOnError": true
-        },
-        {
-            "condition": "(EnableFrontend)",
-            "description": "Install frontend dependencies with yarn.",
+            "description": "Install all frontend dependencies with yarn.",
             "manualInstructions": [
                 {
                     "text": "Run 'yarn install'"

Templates/Cratis/App.css

@@ -2,13 +2,4 @@
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
-  text-align: center;
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
 }

Templates/Cratis/App.tsx

@@ -1,25 +1,18 @@
-import { useState } from 'react'
-import './App.css'
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { DialogComponents } from '@cratis/arc.react/dialogs';
+import { BusyIndicatorDialog, ConfirmationDialog } from '@cratis/components/Dialogs';
+import { SomeFeature } from './Features/SomeFeature';
 
 function App() {
-  const [count, setCount] = useState(0)
-
-  return (
-    <>
-      <h1>CratisApp</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Built with Cratis Arc and Chronicle
-      </p>
-    </>
-  )
+    return (
+        <DialogComponents confirmation={ConfirmationDialog} busyIndicator={BusyIndicatorDialog}>
+            <BrowserRouter>
+                <Routes>
+                    <Route path='/' element={<SomeFeature />} />
+                </Routes>
+            </BrowserRouter>
+        </DialogComponents>
+    );
 }
 
-export default App
+export default App;

Templates/Cratis/Bindings.ts

@@ -0,0 +1,7 @@
+import { Bindings as ApplicationModelBindings } from '@cratis/arc.react.mvvm';
+
+export class Bindings {
+    static initialize() {
+        ApplicationModelBindings.initialize();
+    }
+}

Templates/Cratis/CratisApp.csproj

@@ -10,4 +10,9 @@
         <CratisProxiesSkipOutputDeletion>true</CratisProxiesSkipOutputDeletion>
         <CratisProxiesSkipCommandNameInRoute>true</CratisProxiesSkipCommandNameInRoute>
     </PropertyGroup>
+
+    <ItemGroup>
+        <Content Remove="package.json" />
+        <None Remove="package.json" />
+    </ItemGroup>
 </Project>

Templates/Cratis/Features/SomeFeature/Listing/AllListings.ts

@@ -0,0 +1,47 @@
+// @generated - This file is automatically generated by the Cratis proxy generator. Do not edit manually.
+
+/* eslint-disable sort-imports */
+import { ObservableQueryFor, QueryResultWithState, Sorting, Paging } from '@cratis/arc/queries';
+import { useObservableQuery, useObservableQueryWithPaging, SetSorting, SetPage, SetPageSize } from '@cratis/arc.react/queries';
+import { ParameterDescriptor } from '@cratis/arc/reflection';
+import { Listing } from './Listing';
+
+class AllListingsSortBy {
+    constructor(readonly query: AllListings) {}
+}
+
+class AllListingsSortByWithoutQuery {}
+
+export class AllListings extends ObservableQueryFor<Listing[]> {
+    readonly route: string = '/api/some-feature/listing/all-listings';
+    readonly defaultValue: Listing[] = [];
+    private readonly _sortBy: AllListingsSortBy;
+    private static readonly _sortBy: AllListingsSortByWithoutQuery = new AllListingsSortByWithoutQuery();
+
+    constructor() {
+        super(Listing, true);
+        this._sortBy = new AllListingsSortBy(this);
+    }
+
+    get requiredRequestParameters(): string[] {
+        return [];
+    }
+
+    readonly parameterDescriptors: ParameterDescriptor[] = [];
+
+    get sortBy(): AllListingsSortBy {
+        return this._sortBy;
+    }
+
+    static get sortBy(): AllListingsSortByWithoutQuery {
+        return this._sortBy;
+    }
+
+    static use(sorting?: Sorting): [QueryResultWithState<Listing[]>, SetSorting] {
+        return useObservableQuery<Listing[], AllListings>(AllListings, undefined, sorting);
+    }
+
+    static useWithPaging(pageSize: number, sorting?: Sorting): [QueryResultWithState<Listing[]>, SetSorting, SetPage, SetPageSize] {
+        return useObservableQueryWithPaging<Listing[], AllListings>(AllListings, new Paging(0, pageSize), undefined, sorting);
+    }
+}

Templates/Cratis/Features/SomeFeature/Listing/Listing.cs

@@ -1,16 +1,18 @@
-using AnApp.Features.SomeFeature.Registration;
+using CratisApp.Features.SomeFeature.Registration;
+using MongoDB.Driver;
 
-namespace AnApp.Features.SomeFeature.Listing;
+namespace CratisApp.Features.SomeFeature.Listing;
 
-[ReadModel, FromEvent<Registered>]
-public record Listing(string Name, [SetFromContext<Registered>]EventSourceId EventSourceId)
+[ReadModel]
+public record Listing(SomeName Name, EventSourceId EventSourceId)
 {
-    public static Task<Listing> GetByEventSourceId(EventSourceId eventSourceId, IReadModels readModels)
-        => readModels.GetInstanceById<Listing>(eventSourceId);
+    public static ISubject<IEnumerable<Listing>> AllListings(IMongoCollection<Listing> collection) =>
+        collection.Observe();
+}
 
-    // public static ISubject<Listing> ObserveAll(IReadModels readModels)
-    //     => ClientObservable< readModels.Watch<Listing>();
-
-    public static Task<IEnumerable<Listing>> GetAll(IReadModels readModels)
-        => readModels.GetInstances<Listing>();
-}
+public class ListingProjection : IProjectionFor<Listing>
+{
+    public void Define(IProjectionBuilderFor<Listing> builder) => builder
+        .AutoMap()
+        .From<Registered>();
+}

Templates/Cratis/Features/SomeFeature/Listing/Listing.ts

@@ -0,0 +1,12 @@
+// @generated - This file is automatically generated by the Cratis proxy generator. Do not edit manually.
+
+/* eslint-disable sort-imports */
+import { field } from '@cratis/fundamentals';
+
+export class Listing {
+    @field(String)
+    name!: string;
+
+    @field(String)
+    eventSourceId!: string;
+}

Templates/Cratis/Features/SomeFeature/Registration/Register.ts

@@ -0,0 +1,51 @@
+// @generated - This file is automatically generated by the Cratis proxy generator. Do not edit manually.
+
+/* eslint-disable sort-imports */
+/* eslint-disable @typescript-eslint/no-empty-interface */
+import { Command, CommandValidator } from '@cratis/arc/commands';
+import { useCommand, SetCommandValues, ClearCommandValues } from '@cratis/arc.react/commands';
+import { PropertyDescriptor } from '@cratis/arc/reflection';
+import { Guid } from '@cratis/fundamentals';
+
+export interface IRegister {
+    name?: string;
+}
+
+export class RegisterValidator extends CommandValidator<IRegister> {
+    constructor() {
+        super();
+    }
+}
+
+export class Register extends Command<IRegister, Guid> implements IRegister {
+    readonly route: string = '/api/some-feature/registration';
+    readonly validation: CommandValidator = new RegisterValidator();
+    readonly propertyDescriptors: PropertyDescriptor[] = [
+        new PropertyDescriptor('name', String, false),
+    ];
+
+    private _name!: string;
+
+    constructor() {
+        super(Guid, false);
+    }
+
+    get requestParameters(): string[] {
+        return [];
+    }
+
+    get name(): string {
+        return this._name;
+    }
+
+    set name(value: string) {
+        this._name = value;
+        this.propertyChanged('name');
+    }
+
+    static use(initialValues?: IRegister): [Register, SetCommandValues<IRegister>, ClearCommandValues] {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        return useCommand<Register, IRegister>(Register, initialValues);
+    }
+}

Templates/Cratis/Features/SomeFeature/SomeFeature.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import { DataTableForObservableQuery } from '@cratis/components/DataTables';
+import { CommandDialog } from '@cratis/components/CommandDialog';
+import { InputTextField } from '@cratis/components/CommandForm';
+import { AllListings } from 'Api/SomeFeature/Listing/AllListings';
+import { Register } from 'Api/SomeFeature/Registration/Register';
+
+export const SomeFeature = () => {
+    const [showRegister, setShowRegister] = useState(false);
+
+    return (
+        <div className='p-4'>
+            <div className='flex justify-between items-center mb-4'>
+                <h1 className='text-2xl font-bold'>SomeFeature</h1>
+                <Button
+                    label='Register'
+                    icon='pi pi-plus'
+                    onClick={() => setShowRegister(true)} />
+            </div>
+            <DataTableForObservableQuery
+                query={AllListings}
+                dataKey='eventSourceId'
+                emptyMessage='No items registered yet.'>
+                <Column field='name' header='Name' />
+                <Column field='eventSourceId' header='Id' />
+            </DataTableForObservableQuery>
+            <CommandDialog
+                command={Register}
+                visible={showRegister}
+                header='Register'
+                confirmLabel='Register'
+                cancelLabel='Cancel'
+                onConfirm={result => { if (result.isSuccess) setShowRegister(false); }}
+                onCancel={() => setShowRegister(false)}>
+                <InputTextField<Register>
+                    value={c => c.name}
+                    title='Name'
+                    icon={<i className='pi pi-pencil' />} />
+            </CommandDialog>
+        </div>
+    );
+};

Templates/Cratis/Features/SomeFeature/SomeName.cs

@@ -1,3 +1,3 @@
-namespace AnApp.Features.SomeFeature;
+namespace CratisApp.Features.SomeFeature;
 
 public record SomeName(string Value) : ConceptAs<string>(Value);

Templates/Cratis/Features/SomeFeature/index.ts

@@ -0,0 +1 @@
+export * from './SomeFeature';

Templates/Cratis/GlobalUsings.cs

@@ -0,0 +1,11 @@
+global using System.Reactive.Subjects;
+global using Cratis.Arc.Commands;
+global using Cratis.Arc.Commands.ModelBound;
+global using Cratis.Arc.Queries;
+global using Cratis.Arc.Queries.ModelBound;
+global using Cratis.Chronicle.Events;
+global using Cratis.Chronicle.Keys;
+global using Cratis.Chronicle.Projections;
+global using Cratis.Chronicle.ReadModels;
+global using Cratis.Concepts;
+global using MongoDB.Driver;

Templates/Cratis/Program.cs

@@ -1,3 +1,4 @@
+using CratisApp.Features.SomeFeature.Registration;
 using Cratis.Arc.MongoDB;
 
 var builder = WebApplication.CreateBuilder(args);