Update React

Author: mythz

MyApp/_posts/2025-11-12_react.md

@@ -101,6 +101,179 @@ Switch to Dark Mode to see how all components looks in Dark Mode:
     </a>
 </div>
 
----
-
 ServiceStack's first-class React support positions your applications at the forefront of AI-assisted development. With declarative APIs, complete type safety, and minimal boilerplate, you can leverage AI code generation with confidence while maintaining the quality and maintainability your production systems demand.
+
+## TypeScript Data Models
+
+As AI Models are not as adept at generating C# APIs or Migrations yet, they excel at generating TypeScript code, which our 
+[TypeScript Data Models](https://docs.servicestack.net/autoquery/okai-models) feature can take advantage of by generating all the C# AutoQuery CRUD APIs and DB Migrations needing to support it.
+
+With just a TypeScript Definition:
+
+- [Bookings.d.ts](https://github.com/NetCoreTemplates/react-vite/blob/main/MyApp.ServiceModel/Bookings.d.ts)
+
+We can generate all the AutoQuery CRUD APIs and DB Migrations needed to enable a CRUD UI with:
+
+:::copy
+npx okai Bookings.d.ts
+:::
+
+This is enough to generate a complete CRUD UI to manage Bookings 
+in your React App with the [React AutoQueryGrid Component](https://react.servicestack.net/gallery/autoquerygrid).
+or with ServiceStack's built-in [Locode UI](https://docs.servicestack.net/locode/):
+
+:::{.wideshot}
+[![](/img/posts/react/bookings-locode.webp)](https://docs.servicestack.net/locode/)
+:::
+
+### Cheat Sheet
+
+We'll quickly cover the common dev workflow for this feature. 
+
+To create a new Table use `init <Table>`, e.g:
+
+:::copy
+npx okai init Transaction
+:::
+
+This will generate an empty `MyApp.ServiceModel/<Table>.d.ts` file along with stub AutoQuery APIs and DB Migration implementations. 
+
+#### Regenerate AutoQuery APIs and DB Migrations
+
+After modifying the TypeScript Data Model to include the desired fields, you can re-run the `okai` tool to generate the AutoQuery APIs and DB Migrations 
+(which can be run anywhere within your Solution):
+
+:::copy
+npx okai Transaction.d.ts
+:::
+
+After you're happy with your Data Model you can run DB Migrations to run the DB Migration and create your RDBMS Table:
+
+:::copy
+npm run migrate
+:::
+
+#### Making changes after first migration
+
+If you want to make further changes to your Data Model, you can re-run the `okai` tool to update the AutoQuery APIs and DB Migrations, then run the `rerun:last` npm script to drop and re-run the last migration:
+
+:::copy
+npm run rerun:last
+:::
+
+#### Removing a Data Model and all generated code
+
+If you changed your mind and want to get rid of the RDBMS Table you can revert the last migration:
+
+:::copy
+npm run revert:last
+:::
+
+Which will drop the table and then you can get rid of the AutoQuery APIs, DB Migrations and TypeScript Data model with:
+
+:::copy
+npx okai rm Transaction.d.ts
+:::
+
+## AI-First Example
+
+There are a number of options for starting with an AI generated Application, with all the Instant AI App Generators like 
+[Google's App Studio](https://aistudio.google.com/apps) able to provide a great starting point. Although currently Professional Developers tend to use 
+[Cursor](https://cursor.com/), [Claude Code](https://www.claude.com/product/claude-code) or 
+[Codex](https://openai.com/codex/) as their day-to-day tools of choice. 
+
+### Use GitHub Copilot when creating a new Repository
+
+If you're using [GitHub Copilot](https://copilot.github.com/) you can also use it to generate a new App 
+[from the Vite React template ](https://github.com/new?template_name=react-vite&template_owner=NetCoreTemplates):
+
+[![](/img/posts/react/react-new-repo.webp)](https://github.com/new?template_name=react-vite&template_owner=NetCoreTemplates)
+
+For the example, I've started with a useful App that I've never created before, a Budget Planner App, using the prompt:
+
+### Budget Planner Prompt
+
+```
+- React 19, TypeScript, TailwindCSS v4
+- Persistence in IndexedDB/localStorage
+- Recharts
+- Vitest with React Testing Library
+
+## Features
+Dashboard
+- Overview of total income, expenses, and remaining budget
+- Monthly summary chart (line graph)
+- Expense categories (pie chart)
+
+Transactions
+- Add/Edit/Delete income or expenses
+- Date filtering/sorting
+
+Budgets
+- Set monthly budget goals per category
+- Progress bars for spending vs. budget
+
+Reports
+- View past months
+- Export
+```
+
+The generated source code for the App was uploaded to: [github.com/mythz/budgets.apps.cafe](https://github.com/mythz/budgets.apps.cafe)
+
+### Budgent Planner App
+
+After a few minutes Copilot creates a PR with what we asked for, even things that we didn't specify in the prompt but could be inferred from the Project Template like **Dark Mode** support where it made use of the existing `<DarkModeToggle />`.
+
+<screenshots-gallery :images="{
+  'Dashboard': '/img/posts/react/budget/dashboard.webp',
+  'Dashboard - Dark Mode': '/img/posts/react/budget/dashboard-dark.webp',
+  'Transactions List - Dark Mode': '/img/posts/react/budget/transactions-list-dark.webp',
+  'Transactions - Add Expense': '/img/posts/react/budget/transactions-expense.webp',
+  'Transactions - Add Expense - Dark Mode': '/img/posts/react/budget/transactions-expense-dark.webp',
+  'Transactions - Add Income - Dark Mode': '/img/posts/react/budget/transactions-income-dark.webp',
+  'Budgets - Dark Mode': '/img/posts/react/budget/budgets-dark.webp',
+  'Reports': '/img/posts/react/budget/reports.webp',
+  'Reports - Dark Mode': '/img/posts/react/budget/reports-dark.webp',
+}"></screenshots-gallery>
+
+### Prompt AI to add new Features
+
+AI Assistance doesn't end after the initial implementation as AI Models and tools are more than capable to
+create 100% of the React UI now, including new features, fixes and other improvements. For this example I used
+Claude Code to Implement Category Auto-Tagging with this prompt:
+
+    Implement Category Auto-Tagging
+
+    Allow specifying tags when creating a new transaction.
+    When users add a transaction, try to predict the tag from the Description, e.g:
+
+    Input: “Starbucks latte” → Suggests category: Food & Drinks
+    Input: “Uber to work” → Suggests category: Transport
+
+    Implementation:
+
+    Maintain a small local list of common keywords + categories.
+    Pre-fill category in the transaction form as the user types in the Description.
+
+Which resulted in [this commit](https://github.com/mythz/budgets.apps.cafe/commit/e45a17b8dfd2b5983971554ced3e52ded6fa050e) which sees the feature available in the UI:
+
+:::{.shadow}
+![](/img/posts/react/budget/expense-tags-dark.webp)
+:::
+
+Along with different seed data, tailored for Income and Expenses:
+ - [categoryAutoTag.ts](https://github.com/mythz/budgets.apps.cafe/blob/main/MyApp.Client/src/lib/categoryAutoTag.ts)
+ 
+And 19 passing tests to verify a working implementation:
+ 
+ - [categoryAutoTag.test.ts](https://github.com/mythz/budgets.apps.cafe/blob/main/MyApp.Client/src/lib/categoryAutoTag.test.ts)
+
+Combined with Vite's instant hot-reload, this creates a remarkably fluid development experience where
+we get to watch our prompts materialize into working features in real-time.
+
+All this to say that this new development model exists today, and given its significant productivity gains, it's 
+very likely to become the future of software development, especially for UIs. Since developers are no longer
+the primary authors of code, our UI choices swing from Developer preferences to UI technologies that AI models
+excel at.
+
+So whilst we have a preference for Vue given it's more readable syntax and progressive enhancement capabalities, and whilst .NET ecosystem has a strong bias towards Blazor, we're even more excited for the future of React and are committed to providing the best possible support for it.

MyApp/wwwroot/css/app.css

@@ -425,6 +425,9 @@
   .top-2\/3 {
     top: calc(2/3 * 100%);
   }
+  .top-4 {
+    top: calc(var(--spacing) * 4);
+  }
   .top-8 {
     top: calc(var(--spacing) * 8);
   }
@@ -455,12 +458,18 @@
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
+  .right-4 {
+    right: calc(var(--spacing) * 4);
+  }
   .right-full {
     right: 100%;
   }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
+  .bottom-4 {
+    bottom: calc(var(--spacing) * 4);
+  }
   .bottom-full {
     bottom: 100%;
   }
@@ -929,6 +938,9 @@
   .aspect-\[9\/10\] {
     aspect-ratio: 9/10;
   }
+  .aspect-\[2048\/2158\] {
+    aspect-ratio: 2048/2158;
+  }
   .aspect-video {
     aspect-ratio: var(--aspect-video);
   }
@@ -1045,6 +1057,9 @@
   .max-h-\[72px\] {
     max-height: 72px;
   }
+  .max-h-\[90vh\] {
+    max-height: 90vh;
+  }
   .max-h-\[130px\] {
     max-height: 130px;
   }
@@ -1365,6 +1380,10 @@
     --tw-translate-y: calc(var(--spacing) * 4);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-y-full {
+    --tw-translate-y: 100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .scale-95 {
     --tw-scale-x: 95%;
     --tw-scale-y: 95%;
@@ -1852,6 +1871,22 @@
   .bg-black {
     background-color: var(--color-black);
   }
+  .bg-black\/50 {
+    background-color: color-mix(in srgb, #000 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
+      }
+    }
+  }
+  .bg-black\/95 {
+    background-color: color-mix(in srgb, #000 95%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        background-color: color-mix(in oklab, var(--color-black) 95%, transparent);
+      }
+    }
+  }
   .bg-blue-50 {
     background-color: var(--color-blue-50);
   }
@@ -2100,6 +2135,16 @@
     --tw-gradient-from: var(--color-white);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .via-black\/20 {
+    --tw-gradient-via: color-mix(in srgb, #000 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        --tw-gradient-via: color-mix(in oklab, var(--color-black) 20%, transparent);
+      }
+    }
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
   .via-slate-200 {
     --tw-gradient-via: var(--color-slate-200);
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
@@ -2210,6 +2255,9 @@
       }
     }
   }
+  .object-contain {
+    object-fit: contain;
+  }
   .object-cover {
     object-fit: cover;
   }
@@ -3122,6 +3170,24 @@
       }
     }
   }
+  .group-hover\:translate-y-0 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        --tw-translate-y: calc(var(--spacing) * 0);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
+  .group-hover\:scale-110 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        --tw-scale-x: 110%;
+        --tw-scale-y: 110%;
+        --tw-scale-z: 110%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+  }
   .group-hover\:rotate-12 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -3668,6 +3734,18 @@
       }
     }
   }
+  .hover\:bg-white\/10 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #fff 10%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          & {
+            background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+          }
+        }
+      }
+    }
+  }
   .hover\:bg-white\/20 {
     &:hover {
       @media (hover: hover) {
@@ -3734,6 +3812,13 @@
       }
     }
   }
+  .hover\:text-gray-300 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-gray-300);
+      }
+    }
+  }
   .hover\:text-gray-500 {
     &:hover {
       @media (hover: hover) {
@@ -6202,6 +6287,16 @@
       background-color: var(--color-gray-900);
     }
   }
+  .dark\:bg-gray-900\/90 {
+    &:where(.dark, .dark *) {
+      background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 90%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        & {
+          background-color: color-mix(in oklab, var(--color-gray-900) 90%, transparent);
+        }
+      }
+    }
+  }
   .dark\:bg-green-200 {
     &:where(.dark, .dark *) {
       background-color: var(--color-green-200);