create-ec-app 1.2.0 → 1.4.0

package/templates/pcf/base/package.json

@@ -12,9 +12,9 @@
     "push": "pcf-scripts push"
   },
   "devDependencies": {
-    "@types/powerapps-component-framework": "^1.3.14",
-    "pcf-start": "^1.48.2",
-    "pcf-scripts": "^1.48.2",
+    "@types/powerapps-component-framework": "^1.3.18",
+    "pcf-start": "^1.51.1",
+    "pcf-scripts": "^1.51.1",
     "typescript": "^5.9.3"
   }
 }

package/templates/targets/power-pages/src/App.patch.tsx

@@ -4,7 +4,7 @@ function App() {
 	const { isAuthenticated, user } = useAuth(); //INFO: User is where the token information is stored (user?.idToken)
 
 	return (
-		<div className="flex flex-col items-center justify-center h-screen gap-4">
+		<div className="ec:flex ec:flex-col ec:items-center ec:justify-center ec:h-screen ec:gap-4">
 			{isAuthenticated ? (
 				<div>You are logged in</div>
 			) : (

package/templates/targets/swa/package.patch.json

@@ -1,5 +1,5 @@
 {
   "devDependencies": {
-    "@azure/static-web-apps-cli": "^2.0.7"
+    "@azure/static-web-apps-cli": "^2.0.9"
   }
 }

package/templates/targets/webresource/README.md

@@ -270,19 +270,20 @@ Basic flow:
 npm run build
 ```
 
-2. Run the generator against the current project directory:
+2. Run the generator and point `--pcf-dir` at the generated PCF project directory:
 
 ```bash
-npx create-ec-app --pcf-dir . --namespace EC --constructor FusionNotebookHost
+npx create-ec-app@latest --pcf-dir ./pcf/{{ControlName}} namespace {{EC}} --constructor {{ControlName}} --display-name "Control Name"
 ```
 
-If you are not inside the webresource folder, point `--pcf-dir` at that folder explicitly:
+3. Install dependencies inside that generated PCF directory:
 
 ```bash
-npx create-ec-app --pcf-dir /path/to/my-webresource --namespace EC --constructor FusionNotebookHost
+cd ./pcf/{{ControlName}}
+npm install
 ```
 
-This writes a standalone PCF project to `pcf/FusionNotebookHost` by default. The generated control:
+This writes a standalone PCF project to the `--pcf-dir` folder. The generated control:
 
 - imports `src/App.tsx` directly instead of wrapping built HTML in an iframe
 - reuses the built stylesheet from `dist/main.css`
@@ -295,7 +296,7 @@ Typical conversion flow from inside a generated webresource project:
 ```bash
 npm install
 npm run build
-npx create-ec-app --pcf-dir . --namespace EC --constructor FusionNotebookHost --display-name "Fusion Notebook Host"
+npx create-ec-app@latest --pcf-dir ./pcf/FusionNotebookHost namespace EC --constructor FusionNotebookHost --display-name "Fusion Notebook Host"
 cd pcf/FusionNotebookHost
 npm install
 npm run build

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

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

package/templates/ui/kendo/src/main.patch.tsx

@@ -4,6 +4,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import "@progress/kendo-theme-fluent/dist/all.css";
 import "./index.css";
 import App from "./App.tsx";
+import { EcAppShell } from "./runtime/EcAppShell.tsx";
 
 const queryClient = new QueryClient({
 	defaultOptions: {
@@ -23,7 +24,9 @@ const root = createRoot(document.getElementById("root")!);
 root.render(
 	<StrictMode>
 		<QueryClientProvider client={queryClient}>
-			<App />
+			<EcAppShell>
+				<App />
+			</EcAppShell>
 		</QueryClientProvider>
 	</StrictMode>
 );

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

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://ui.shadcn.com/schema.json",
-	"style": "new-york",
+	"style": "radix-nova",
 	"rsc": false,
 	"tsx": true,
 	"tailwind": {
@@ -8,9 +8,10 @@
 		"css": "src/index.css",
 		"baseColor": "neutral",
 		"cssVariables": true,
-		"prefix": ""
+		"prefix": "ec"
 	},
 	"iconLibrary": "lucide",
+	"rtl": false,
 	"aliases": {
 		"components": "@/components",
 		"utils": "@/lib/utils",
@@ -18,5 +19,7 @@
 		"lib": "@/lib",
 		"hooks": "@/hooks"
 	},
+	"menuColor": "default",
+	"menuAccent": "subtle",
 	"registries": {}
 }

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

@@ -2,49 +2,12 @@
 	"dependencies": {
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
-		"lucide-react": "^0.555.0",
-		"tailwind-merge": "^3.4.0",
-		"@hookform/resolvers": "^5.2.2",
-		"@radix-ui/react-accordion": "^1.2.12",
-		"@radix-ui/react-alert-dialog": "^1.1.15",
-		"@radix-ui/react-aspect-ratio": "^1.1.8",
-		"@radix-ui/react-avatar": "^1.1.11",
-		"@radix-ui/react-checkbox": "^1.3.3",
-		"@radix-ui/react-collapsible": "^1.1.12",
-		"@radix-ui/react-context-menu": "^2.2.16",
-		"@radix-ui/react-dialog": "^1.1.15",
-		"@radix-ui/react-dropdown-menu": "^2.1.16",
-		"@radix-ui/react-hover-card": "^1.1.15",
-		"@radix-ui/react-label": "^2.1.8",
-		"@radix-ui/react-menubar": "^1.1.16",
-		"@radix-ui/react-navigation-menu": "^1.2.14",
-		"@radix-ui/react-popover": "^1.1.15",
-		"@radix-ui/react-progress": "^1.1.8",
-		"@radix-ui/react-radio-group": "^1.3.8",
-		"@radix-ui/react-scroll-area": "^1.2.10",
-		"@radix-ui/react-select": "^2.2.6",
-		"@radix-ui/react-separator": "^1.1.8",
-		"@radix-ui/react-slider": "^1.3.6",
-		"@radix-ui/react-slot": "^1.2.4",
-		"@radix-ui/react-switch": "^1.2.6",
-		"@radix-ui/react-tabs": "^1.1.13",
-		"@radix-ui/react-toggle": "^1.1.10",
-		"@radix-ui/react-toggle-group": "^1.1.11",
-		"@radix-ui/react-tooltip": "^1.2.8",
-		"cmdk": "^1.1.1",
-		"date-fns": "^4.1.0",
-		"embla-carousel-react": "^8.6.0",
-		"input-otp": "^1.4.2",
-		"next-themes": "^0.4.6",
-		"react-day-picker": "^9.11.3",
-		"react-hook-form": "^7.67.0",
-		"react-resizable-panels": "^3.0.6",
-		"recharts": "^2.15.4",
-		"sonner": "^2.0.7",
-		"vaul": "^1.1.2"
+		"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"
 	}
 }
-

package/templates/ui/shadcn-ui/src/index.patch.css

@@ -1,8 +1,12 @@
-@import "tailwindcss";
-@import "tw-animate-css";
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme) prefix(ec) important;
+@import "tailwindcss/utilities.css" layer(utilities) prefix(ec) important;
+@import "tw-animate-css/prefix";
+@import "shadcn/tailwind.css";
 
 @custom-variant hover (&:hover);
-@custom-variant dark (&:is(.dark *));
+@custom-variant dark (&:is(.ec-app.dark *, .ec-app .dark *));
 
 @theme inline {
   --radius-sm: calc(var(--radius) - 4px);
@@ -42,7 +46,7 @@
   --color-sidebar-ring: var(--sidebar-ring);
 }
 
-:root {
+.ec-app[data-ec-app-id="{{APP_NAME}}"] {
   --radius: 0.625rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
@@ -75,9 +79,13 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
+
+  background: var(--background);
+  color: var(--foreground);
 }
 
-.dark {
+.ec-app[data-ec-app-id="{{APP_NAME}}"].dark,
+.ec-app[data-ec-app-id="{{APP_NAME}}"] .dark {
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.205 0 0);
@@ -112,10 +120,20 @@
 }
 
 @layer base {
-  * {
-    @apply border-border outline-ring/50;
+  :where(.ec-app, .ec-app *, .ec-app *::before, .ec-app *::after) {
+    box-sizing: border-box;
+  }
+
+  :where(.ec-app *) {
+    border-color: var(--border);
+    outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
   }
-  body {
-    @apply bg-background text-foreground;
+
+  :where(.ec-app button, .ec-app input, .ec-app select, .ec-app textarea) {
+    font: inherit;
+  }
+
+  :where(.ec-app button:not(:disabled), .ec-app [role="button"]:not(:disabled)) {
+    cursor: pointer;
   }
 }

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

@@ -1,64 +0,0 @@
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Accordion({
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
-}
-
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn("border-b last:border-b-0", 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(
-          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  )
-}
-
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
-      {...props}
-    >
-      <div className={cn("pt-0 pb-4", className)}>{children}</div>
-    </AccordionPrimitive.Content>
-  )
-}
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

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

@@ -1,155 +0,0 @@
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
-
-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>) {
-  return (
-    <AlertDialogPrimitive.Portal 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(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  )
-}
-
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn("text-lg font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogAction({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  return (
-    <AlertDialogPrimitive.Action
-      className={cn(buttonVariants(), className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogCancel({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
-  return (
-    <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: "outline" }), className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-}

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

@@ -1,66 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
-  {
-    variants: {
-      variant: {
-        default: "bg-card text-card-foreground",
-        destructive:
-          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
-      },
-    },
-    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(
-        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDescription({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-description"
-      className={cn(
-        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Alert, AlertTitle, AlertDescription }

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

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

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

@@ -1,51 +0,0 @@
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
-
-import { cn } from "@/lib/utils"
-
-function Avatar({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      className={cn(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarImage({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn("aspect-square size-full", className)}
-      {...props}
-    />
-  )
-}
-
-function AvatarFallback({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        "bg-muted flex size-full items-center justify-center rounded-full",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Avatar, AvatarImage, AvatarFallback }

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

@@ -1,46 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span"
-
-  return (
-    <Comp
-      data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-export { Badge, badgeVariants }