@undp/create-app 0.8.0 → 0.91.0

package/bin/templates/next/basic/biome.json

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.4.8/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.5.15/schema.json",
 	"vcs": {
 		"enabled": true,
 		"clientKind": "git",
@@ -19,7 +19,7 @@
 	"linter": {
 		"enabled": true,
 		"rules": {
-			"recommended": true,
+			"preset": "recommended",
 			"suspicious": {
 				"noExplicitAny": "warn",
 				"noUnassignedVariables": "warn",
@@ -66,5 +66,10 @@
 				"organizeImports": "on"
 			}
 		}
+	},
+	"css": {
+		"parser": {
+			"tailwindDirectives": true
+		}
 	}
 }

package/bin/templates/vite/basic/README.md

@@ -57,19 +57,32 @@ To embed the visualization on an external page, include:
 **HTML Placeholder**
 
 ```html
-<div id="root"></div>
+  <iframe
+    id="my-embed"
+    src="<url of the app>"
+    style="width: 100%; border: 0; display: block;"
+    scrolling="no"
+  />
 ```
 
-**Required `<script>` and `<link>` tags**
+**Required `<script>`**
 
 ```
-<link rel="dns-prefetch" href="{{Visualization URL}}">
-<script defer="defer" type="module" src="{{Visualization URL}}/index.js"></script>
-<link rel="modulepreload" crossorigin href="{{Visualization URL}}/react-{{hash}}.js">
-<link rel="modulepreload" crossorigin href="{{Visualization URL}}/undp-{{hash}}.js">
-<link rel="stylesheet" href="{{Visualization URL}}/style.css"></link>
+  <script>
+    var iframe = document.getElementById('my-embed');
+    window.addEventListener('message', function (e) {
+      if (e.origin !== 'http://localhost:5173') return;
+      if (e.source !== iframe.contentWindow) return;
+      if (e.data && e.data.type === 'iframe-height') {
+        console.log('new height', e.data.height);
+        iframe.style.height = e.data.height + 'px';
+      }
+    });
+  </script>
 ```
 
+_This script listens for height messages from the embedded web app and resizes the iframe to match its content, so the app displays without an inner scrollbar._
+
 ## 📬 Contact us
 
 For questions or feedback, contact us at [data@undp.org](mailto:data@undp.org).

package/bin/templates/vite/basic/biome.json

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.4.8/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.5.15/schema.json",
 	"vcs": {
 		"enabled": true,
 		"clientKind": "git",
@@ -19,7 +19,7 @@
 	"linter": {
 		"enabled": true,
 		"rules": {
-			"recommended": true,
+			"preset": "recommended",
 			"suspicious": {
 				"noExplicitAny": "warn",
 				"noUnassignedVariables": "warn",
@@ -66,5 +66,10 @@
 				"organizeImports": "on"
 			}
 		}
+	},
+	"css": {
+		"parser": {
+			"tailwindDirectives": true
+		}
 	}
 }

package/bin/templates/vite/basic/src/main.tsx

@@ -1,10 +1,19 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
+import React from "react";
+import ReactDOM from "react-dom/client";
 
-import App from './App';
+import App from "./App";
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+const sendHeightForIframes = () =>
+	window.parent.postMessage(
+		{ type: "iframe-height", height: document.documentElement.scrollHeight },
+		"*",
+	);
+
+new ResizeObserver(sendHeightForIframes).observe(document.documentElement);
+window.addEventListener("load", sendHeightForIframes);
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>,
 );

package/bin/templates/vite/basic/src/styles/style.css

@@ -1,3 +1,2 @@
 @import "tailwindcss";
-@import "@undp/design-system-react/style.css";
-@import "@undp/design-system-react/theme.css";
+@import "@undp/design-system-react/tailwind.css";

package/bin/templates/vite/query/README.md

@@ -62,19 +62,32 @@ To embed the visualization on an external page, include:
 **HTML Placeholder**
 
 ```html
-<div id="root"></div>
+  <iframe
+    id="my-embed"
+    src="<url of the app>"
+    style="width: 100%; border: 0; display: block;"
+    scrolling="no"
+  />
 ```
 
-**Required `<script>` and `<link>` tags**
+**Required `<script>`**
 
 ```
-<link rel="dns-prefetch" href="{{Visualization URL}}">
-<script defer="defer" type="module" src="{{Visualization URL}}/index.js"></script>
-<link rel="modulepreload" crossorigin href="{{Visualization URL}}/react-{{hash}}.js">
-<link rel="modulepreload" crossorigin href="{{Visualization URL}}/undp-{{hash}}.js">
-<link rel="stylesheet" href="{{Visualization URL}}/style.css"></link>
+  <script>
+    var iframe = document.getElementById('my-embed');
+    window.addEventListener('message', function (e) {
+      if (e.origin !== 'http://localhost:5173') return;
+      if (e.source !== iframe.contentWindow) return;
+      if (e.data && e.data.type === 'iframe-height') {
+        console.log('new height', e.data.height);
+        iframe.style.height = e.data.height + 'px';
+      }
+    });
+  </script>
 ```
 
+_This script listens for height messages from the embedded web app and resizes the iframe to match its content, so the app displays without an inner scrollbar._
+
 ## 📬 Contact us
 
 For questions or feedback, contact us at [data@undp.org](mailto:data@undp.org).

package/bin/templates/vite/query/biome.json

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.4.8/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.5.15/schema.json",
 	"vcs": {
 		"enabled": true,
 		"clientKind": "git",
@@ -19,7 +19,7 @@
 	"linter": {
 		"enabled": true,
 		"rules": {
-			"recommended": true,
+			"preset": "recommended",
 			"suspicious": {
 				"noExplicitAny": "warn",
 				"noUnassignedVariables": "warn",
@@ -66,5 +66,10 @@
 				"organizeImports": "on"
 			}
 		}
+	},
+	"css": {
+		"parser": {
+			"tailwindDirectives": true
+		}
 	}
 }

package/bin/templates/vite/query/src/main.tsx

@@ -1,21 +1,26 @@
-import { StrictMode } from 'react';
-import ReactDOM from 'react-dom/client';
+import { StrictMode } from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import * as TanStackQueryProvider from "./integration/tanstack-query";
 
-import * as TanStackQueryProvider from './integration/tanstack-query';
-import App from './App';
+const sendHeightForIframes = () =>
+	window.parent.postMessage(
+		{ type: "iframe-height", height: document.documentElement.scrollHeight },
+		"*",
+	);
 
-import './styles/fonts.css';
-import './styles/style.css';
+new ResizeObserver(sendHeightForIframes).observe(document.documentElement);
+window.addEventListener("load", sendHeightForIframes);
 
 const TanStackQueryProviderContext = TanStackQueryProvider.getContext();
-const rootElement = document.getElementById('root');
+const rootElement = document.getElementById("root");
 if (rootElement) {
-  const root = ReactDOM.createRoot(rootElement);
-  root.render(
-    <StrictMode>
-      <TanStackQueryProvider.Provider {...TanStackQueryProviderContext}>
-        <App />
-      </TanStackQueryProvider.Provider>
-    </StrictMode>,
-  );
+	const root = ReactDOM.createRoot(rootElement);
+	root.render(
+		<StrictMode>
+			<TanStackQueryProvider.Provider {...TanStackQueryProviderContext}>
+				<App />
+			</TanStackQueryProvider.Provider>
+		</StrictMode>,
+	);
 }

package/bin/templates/vite/query/src/styles/style.css

@@ -1,2 +1,2 @@
-@import 'tailwindcss';
-@import '@undp/design-system-react/style.css';
+@import "tailwindcss";
+@import "@undp/design-system-react/tailwind.css";

package/bin/templates/vite/query+router/biome.json

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.4.8/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.5.15/schema.json",
 	"vcs": {
 		"enabled": true,
 		"clientKind": "git",
@@ -19,7 +19,7 @@
 	"linter": {
 		"enabled": true,
 		"rules": {
-			"recommended": true,
+			"preset": "recommended",
 			"suspicious": {
 				"noExplicitAny": "warn",
 				"noUnassignedVariables": "warn",
@@ -66,5 +66,10 @@
 				"organizeImports": "on"
 			}
 		}
+	},
+	"css": {
+		"parser": {
+			"tailwindDirectives": true
+		}
 	}
 }

package/bin/templates/vite/query+router/src/main.tsx

@@ -1,73 +1,72 @@
-import { StrictMode } from 'react';
-import ReactDOM from 'react-dom/client';
 import {
-  Outlet,
-  RouterProvider,
-  createRootRoute,
-  createRoute,
-  createRouter,
-} from '@tanstack/react-router';
+	createRootRoute,
+	createRoute,
+	createRouter,
+	Outlet,
+	RouterProvider,
+} from "@tanstack/react-router";
+import { StrictMode } from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import FooterEl from "./components/Footer";
+import HeaderEl from "./components/Header";
+import * as TanStackQueryProvider from "./integration/tanstack-query";
+import createTanStackQueryDemoRoute from "./routes/queryDemo.route";
 
-import * as TanStackQueryProvider from './integration/tanstack-query';
-import HeaderEl from './components/Header';
-import FooterEl from './components/Footer';
-import App from './App';
-import createTanStackQueryDemoRoute from './routes/queryDemo.route';
-
-import './styles/fonts.css';
-import './styles/style.css';
+import "./styles/fonts.css";
+import "./styles/style.css";
 
 const rootRoute = createRootRoute({
-  component: () => (
-    <div className='flex flex-col gap-0 min-h-screen'>
-      <HeaderEl />
-      <main className='grow-1 flex flex-col justify-center'>
-        <div className='flex flex-col justify-center'>
-          <Outlet />
-        </div>
-      </main>
-      <FooterEl />
-    </div>
-  ),
+	component: () => (
+		<div className="flex flex-col gap-0 min-h-screen">
+			<HeaderEl />
+			<main className="grow flex flex-col justify-center">
+				<div className="flex flex-col justify-center">
+					<Outlet />
+				</div>
+			</main>
+			<FooterEl />
+		</div>
+	),
 });
 
 const indexRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: '/',
-  component: App,
+	getParentRoute: () => rootRoute,
+	path: "/",
+	component: App,
 });
 
 const routeTree = rootRoute.addChildren([
-  indexRoute,
-  createTanStackQueryDemoRoute(rootRoute),
+	indexRoute,
+	createTanStackQueryDemoRoute(rootRoute),
 ]);
 
 const TanStackQueryProviderContext = TanStackQueryProvider.getContext();
 const router = createRouter({
-  routeTree,
-  context: {
-    ...TanStackQueryProviderContext,
-  },
-  defaultPreload: 'intent',
-  scrollRestoration: true,
-  defaultStructuralSharing: true,
-  defaultPreloadStaleTime: 0,
+	routeTree,
+	context: {
+		...TanStackQueryProviderContext,
+	},
+	defaultPreload: "intent",
+	scrollRestoration: true,
+	defaultStructuralSharing: true,
+	defaultPreloadStaleTime: 0,
 });
 
-declare module '@tanstack/react-router' {
-  interface Register {
-    router: typeof router;
-  }
+declare module "@tanstack/react-router" {
+	interface Register {
+		router: typeof router;
+	}
 }
 
-const rootElement = document.getElementById('root');
+const rootElement = document.getElementById("root");
 if (rootElement) {
-  const root = ReactDOM.createRoot(rootElement);
-  root.render(
-    <StrictMode>
-      <TanStackQueryProvider.Provider {...TanStackQueryProviderContext}>
-        <RouterProvider router={router} />
-      </TanStackQueryProvider.Provider>
-    </StrictMode>,
-  );
+	const root = ReactDOM.createRoot(rootElement);
+	root.render(
+		<StrictMode>
+			<TanStackQueryProvider.Provider {...TanStackQueryProviderContext}>
+				<RouterProvider router={router} />
+			</TanStackQueryProvider.Provider>
+		</StrictMode>,
+	);
 }

package/bin/templates/vite/query+router/src/styles/style.css

@@ -1,2 +1,2 @@
-@import 'tailwindcss';
-@import '@undp/design-system-react/style.css';
+@import "tailwindcss";
+@import "@undp/design-system-react/tailwind.css";

package/bin/templates/vite/router/biome.json

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.4.8/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.5.15/schema.json",
 	"vcs": {
 		"enabled": true,
 		"clientKind": "git",
@@ -19,7 +19,7 @@
 	"linter": {
 		"enabled": true,
 		"rules": {
-			"recommended": true,
+			"preset": "recommended",
 			"suspicious": {
 				"noExplicitAny": "warn",
 				"noUnassignedVariables": "warn",
@@ -66,5 +66,10 @@
 				"organizeImports": "on"
 			}
 		}
+	},
+	"css": {
+		"parser": {
+			"tailwindDirectives": true
+		}
 	}
 }

package/bin/templates/vite/router/src/main.tsx

@@ -1,66 +1,65 @@
-import { StrictMode } from 'react';
-import ReactDOM from 'react-dom/client';
 import {
-  Outlet,
-  RouterProvider,
-  createRootRoute,
-  createRoute,
-  createRouter,
-} from '@tanstack/react-router';
+	createRootRoute,
+	createRoute,
+	createRouter,
+	Outlet,
+	RouterProvider,
+} from "@tanstack/react-router";
+import { StrictMode } from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import FooterEl from "./components/Footer";
+import HeaderEl from "./components/Header";
+import createAboutRoute from "./routes/about.route";
 
-import HeaderEl from './components/Header';
-import FooterEl from './components/Footer';
-import App from './App';
-import createAboutRoute from './routes/about.route';
-
-import './styles/fonts.css';
-import './styles/style.css';
+import "./styles/fonts.css";
+import "./styles/style.css";
 
 const rootRoute = createRootRoute({
-  component: () => (
-    <div className='flex flex-col gap-0 min-h-screen'>
-      <HeaderEl />
-      <main className='grow-1 flex flex-col justify-center'>
-        <div className='flex flex-col justify-center'>
-          <Outlet />
-        </div>
-      </main>
-      <FooterEl />
-    </div>
-  ),
+	component: () => (
+		<div className="flex flex-col gap-0 min-h-screen">
+			<HeaderEl />
+			<main className="grow flex flex-col justify-center">
+				<div className="flex flex-col justify-center">
+					<Outlet />
+				</div>
+			</main>
+			<FooterEl />
+		</div>
+	),
 });
 
 const indexRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: '/',
-  component: App,
+	getParentRoute: () => rootRoute,
+	path: "/",
+	component: App,
 });
 
 const routeTree = rootRoute.addChildren([
-  indexRoute,
-  createAboutRoute(rootRoute),
+	indexRoute,
+	createAboutRoute(rootRoute),
 ]);
 
 const router = createRouter({
-  routeTree,
-  defaultPreload: 'intent',
-  scrollRestoration: true,
-  defaultStructuralSharing: true,
-  defaultPreloadStaleTime: 0,
+	routeTree,
+	defaultPreload: "intent",
+	scrollRestoration: true,
+	defaultStructuralSharing: true,
+	defaultPreloadStaleTime: 0,
 });
 
-declare module '@tanstack/react-router' {
-  interface Register {
-    router: typeof router;
-  }
+declare module "@tanstack/react-router" {
+	interface Register {
+		router: typeof router;
+	}
 }
 
-const rootElement = document.getElementById('root');
+const rootElement = document.getElementById("root");
 if (rootElement) {
-  const root = ReactDOM.createRoot(rootElement);
-  root.render(
-    <StrictMode>
-      <RouterProvider router={router} />
-    </StrictMode>,
-  );
+	const root = ReactDOM.createRoot(rootElement);
+	root.render(
+		<StrictMode>
+			<RouterProvider router={router} />
+		</StrictMode>,
+	);
 }

package/bin/templates/vite/router/src/styles/style.css

@@ -1,3 +1,2 @@
 @import "tailwindcss";
-@import "@undp/design-system-react/style.css";
-@import "@undp/design-system-react/theme.css";
+@import "@undp/design-system-react/tailwind.css";

package/bin/templates/viteWithLanguage/basic/biome.json

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.4.8/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.5.15/schema.json",
 	"vcs": {
 		"enabled": true,
 		"clientKind": "git",
@@ -19,7 +19,7 @@
 	"linter": {
 		"enabled": true,
 		"rules": {
-			"recommended": true,
+			"preset": "recommended",
 			"suspicious": {
 				"noExplicitAny": "warn",
 				"noUnassignedVariables": "warn",
@@ -66,5 +66,10 @@
 				"organizeImports": "on"
 			}
 		}
+	},
+	"css": {
+		"parser": {
+			"tailwindDirectives": true
+		}
 	}
 }

package/bin/templates/viteWithLanguage/basic/src/styles/style.css

@@ -1,3 +1,2 @@
 @import "tailwindcss";
-@import "@undp/design-system-react/style.css";
-@import "@undp/design-system-react/theme.css";
+@import "@undp/design-system-react/tailwind.css";

package/bin/templates/viteWithLanguage/query/biome.json

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.4.8/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.5.15/schema.json",
 	"vcs": {
 		"enabled": true,
 		"clientKind": "git",
@@ -19,7 +19,7 @@
 	"linter": {
 		"enabled": true,
 		"rules": {
-			"recommended": true,
+			"preset": "recommended",
 			"suspicious": {
 				"noExplicitAny": "warn",
 				"noUnassignedVariables": "warn",
@@ -66,5 +66,10 @@
 				"organizeImports": "on"
 			}
 		}
+	},
+	"css": {
+		"parser": {
+			"tailwindDirectives": true
+		}
 	}
 }

package/bin/templates/viteWithLanguage/query/src/styles/style.css

@@ -1,3 +1,2 @@
 @import "tailwindcss";
-@import "@undp/design-system-react/style.css";
-@import "@undp/design-system-react/theme.css";
+@import "@undp/design-system-react/tailwind.css";

package/bin/templates/viteWithLanguage/query+router/biome.json

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.4.8/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.5.15/schema.json",
 	"vcs": {
 		"enabled": true,
 		"clientKind": "git",
@@ -19,7 +19,7 @@
 	"linter": {
 		"enabled": true,
 		"rules": {
-			"recommended": true,
+			"preset": "recommended",
 			"suspicious": {
 				"noExplicitAny": "warn",
 				"noUnassignedVariables": "warn",
@@ -66,5 +66,10 @@
 				"organizeImports": "on"
 			}
 		}
+	},
+	"css": {
+		"parser": {
+			"tailwindDirectives": true
+		}
 	}
 }