create-ec-app 1.8.0 → 1.10.0

package/templates/targets/webresource/AGENTS.md

@@ -34,13 +34,13 @@ The app supports two modes.
 - Never commit real token values.
 - Never bundle `token.json` into deployment output.
 
-Do not mix the two modes. Do not duplicate runtime detection. Reuse `authService.ts`.
+Do not mix the two modes. Do not duplicate runtime detection. Reuse `AuthService.ts`.
 
 ## Critical Files
 
 | File | Rule |
 |---|---|
-| `src/services/authService.ts` | Single source of truth for runtime detection, base URL, and auth headers. |
+| `src/services/AuthService.ts` | Single source of truth for runtime detection, base URL, and auth headers. |
 | `src/main.tsx` | Preserve bootstrap, providers, and global theme/style imports. |
 | `vite.config.ts` | Preserve Dynamics-friendly output: `base: "./"`, predictable filenames, and `main.css`. |
 | `index.html` | Treat as the Dynamics integration boundary. Preserve `ClientGlobalContext.js.aspx` where present. |
@@ -102,6 +102,7 @@ Preferred shape:
 - one TanStack Query hook when components need it
 - one mutation hook when mutation state or invalidation is needed
 - query keys colocated with the hook when reused for invalidation
+- UI that consumes async data should handle loading, error, empty, and success states when each state affects the workflow
 
 Do not create wrapper chains such as:
 
@@ -134,6 +135,13 @@ Stay consistent with the project's existing UI system.
 - Do not hand-roll custom CSS unless component props and Tailwind are not enough.
 - Keep layouts compact, scannable, responsive, and suitable for embedded Dynamics screens.
 
+## Accessibility
+
+- Use semantic HTML.
+- Use buttons for actions and links for navigation.
+- Keep input labels, accessible names, dialog titles, and keyboard support intact.
+- Do not remove shadcn/Radix or Kendo accessibility behavior while restyling.
+
 ## Code Shape
 
 Prefer:
@@ -143,6 +151,7 @@ Prefer:
 - existing services and components
 - small local helpers only when they remove real duplication or name non-obvious domain logic
 - explicit Dataverse table/field handling over generic frameworks
+- feature folders only when a feature owns multiple pieces such as API, hooks, components, types, or schemas
 
 Avoid:
 
@@ -152,6 +161,39 @@ Avoid:
 - excessive configuration
 - defensive wrappers around every value
 - broad refactors while adding a feature
+- moving code into shared `common` or `lib` before there is a second caller
+
+## Feature and Routing Shape
+
+Keep small apps flat. Use feature folders when a feature owns enough surface area to group its page, UI, data access, hooks, and types.
+
+Example:
+
+```text
+src/
+  features/
+    accounts/
+      pages/
+        accounts-page.tsx
+      components/
+        accounts-table.tsx
+      api/
+        accounts.api.ts
+      hooks/
+        use-accounts.ts
+      types/
+        account.types.ts
+```
+
+Use only folders that contain real files. Flatten the example when the feature is small.
+
+When React Router or another router is present:
+
+- keep route definitions in one obvious place, such as `src/routes.tsx` or `src/router/routes.tsx`
+- keep page components thin; they read route/search params and compose feature components
+- parse URL params at the route/page boundary, then pass typed values down
+- prefer hash/search-param routing for embedded webresources unless the Dynamics host URL is proven to support browser history routing
+- do not add a router for a single screen that local state can handle
 
 ## Error Handling
 
@@ -183,7 +225,7 @@ Do not run broad expensive checks unless the change touches shared infrastructur
 ```ts
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
-import { getApiUrl, getAuthHeaders } from "@/services/authService";
+import { getApiUrl, getAuthHeaders } from "@/services/AuthService";
 
 export interface Account {
   accountid: string;
@@ -234,9 +276,10 @@ export const useUpdateAccount = () => {
   });
 };
 ```
+
 ## Figma MCP
 When using the Figma MCP server, ensure that you are not just blindly copying the designs. Take note and always place a focus on the following:
 
 - Ensure responsiveness on all screen sizes
 - If there are icons as part of the design, use those, don't blindly look for Lucide-React equivalents.
-- Use the exact colours in the design. Don't make up your own.
+- Use the exact colours in the design. Don't make up your own.

package/templates/targets/webresource/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

package/templates/targets/webresource/README.md

@@ -30,7 +30,7 @@ React + TypeScript template for Dynamics 365/Dataverse web resources. Generated
 ## Key Files
 
 - `src/main.tsx`: Sets up React, Tailwind, and TanStack Query. If Kendo UI was selected, imports the chosen theme CSS (`<theme>/dist/all.css`).
-- `src/services/authService.ts`: Utilities to build API URLs and headers based on environment (inside Dynamics vs. local dev).
+- `src/services/AuthService.ts`: Utilities to build API URLs and headers based on environment (inside Dynamics vs. local dev).
 - `token.json`: Local development token store. Build is configured to treat this as external and not bundle it.
 - `index.html`: Injects `ClientGlobalContext.js.aspx` for Dynamics runtime.
 - `vite.config.ts`: Uses base `./`, disables code splitting, emits `main.css`, and places assets at the top of `dist`.
@@ -40,7 +40,7 @@ React + TypeScript template for Dynamics 365/Dataverse web resources. Generated
 The app auto-detects whether it runs inside Dynamics 365 (uses `window.Xrm` and does not add an Authorization header) or locally (reads a bearer token from `token.json`).
 
 ```ts
-// src/services/authService.ts
+// src/services/AuthService.ts
 export const getApiUrl = (): string => {
   if (window.parent && window.parent.Xrm) {
     const clientUrl = window.Xrm.Utility.getGlobalContext().getClientUrl();
@@ -72,7 +72,7 @@ export const getAuthHeaders = async (): Promise<HeadersInit> => {
 Example usage:
 
 ```ts
-import { getApiUrl, getAuthHeaders } from "@/services/authService";
+import { getApiUrl, getAuthHeaders } from "@/services/AuthService";
 
 const res = await fetch(`${getApiUrl()}/accounts?$top=10`, {
   headers: await getAuthHeaders(),
@@ -139,7 +139,7 @@ The following example shows a minimal data service and hooks to fetch and update
 Create `src/services/accounts.ts`:
 
 ```ts
-import { getApiUrl, getAuthHeaders } from "@/services/authService";
+import { getApiUrl, getAuthHeaders } from "@/services/AuthService";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 export interface Account {
@@ -232,7 +232,7 @@ export function AccountsList() {
   <Button>Click me</Button>;
   ```
 
-- Shadcn/ui: Components are installed and available under the `@/components` alias. Example:
+- Shadcn/ui: Components are copied from the committed template snapshot and available under the `@/components` alias. Example:
 
   ```tsx
   import { Button } from "@/components/ui/button";

package/templates/ui/kendo/package.patch.json

@@ -1,7 +1,7 @@
 {
 	"dependencies": {
 		"@progress/kendo-licensing": "^1.11.2",
-		"@progress/kendo-react-buttons": "^13.3.0",
-		"@progress/kendo-theme-fluent": "^12.3.0"
+		"@progress/kendo-react-buttons": "^15.0.0",
+		"@progress/kendo-theme-fluent": "^14.1.0"
 	}
 }

package/templates/ui/shadcn-ui/SHADCN_TEMPLATE.md

@@ -0,0 +1,20 @@
+# shadcn Template Snapshot
+
+This template contains committed shadcn component source.
+
+Generated with:
+
+- shadcn CLI: 4.12.0
+- style: radix-nova
+- base color: neutral
+- Tailwind: v4
+- generated by: `npm run refresh:shadcn-template`
+
+Normal `create-ec-app` scaffolding does not run `npx shadcn`.
+To refresh this snapshot, run:
+
+```bash
+npm run refresh:shadcn-template
+```
+
+After refreshing, generate a test app and run a build before committing.

package/templates/ui/shadcn-ui/package.patch.json

@@ -1,13 +1,22 @@
 {
 	"dependencies": {
-		"class-variance-authority": "^0.7.1",
-		"clsx": "^2.1.1",
-		"lucide-react": "^1.17.0",
-		"radix-ui": "^1.4.3",
-		"shadcn": "^4.10.0",
-		"tailwind-merge": "^3.6.0"
-	},
-	"devDependencies": {
-		"tw-animate-css": "^1.4.0"
+		"@base-ui/react": "1.6.0",
+		"@shadcn/react": "0.1.0",
+		"class-variance-authority": "0.7.1",
+		"clsx": "2.1.1",
+		"cmdk": "1.1.1",
+		"date-fns": "4.4.0",
+		"embla-carousel-react": "8.6.0",
+		"input-otp": "1.4.2",
+		"lucide-react": "1.21.0",
+		"next-themes": "0.4.6",
+		"radix-ui": "1.6.0",
+		"react-day-picker": "10.0.1",
+		"react-resizable-panels": "4.12.0",
+		"recharts": "3.8.0",
+		"shadcn": "4.12.0",
+		"sonner": "2.0.7",
+		"tailwind-merge": "3.6.0",
+		"vaul": "1.1.2"
 	}
 }

package/templates/ui/shadcn-ui/src/components/ui/accordion.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function Accordion({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--radix-accordion-content-height) pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/templates/ui/shadcn-ui/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,199 @@
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { usePortalContainer } from "@/runtime/PortalContainer"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  const portalContainer = usePortalContainer()
+  return (
+    <AlertDialogPrimitive.Portal container={portalContainer ?? undefined} data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}

package/templates/ui/shadcn-ui/src/components/ui/alert.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2 right-2", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }

package/templates/ui/shadcn-ui/src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import { AspectRatio as AspectRatioPrimitive } from "radix-ui"
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+}
+
+export { AspectRatio }