@undp/create-app 0.9.0 → 0.91.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/generateFiles/generateLayoutForNext.js +16 -11
- package/bin/generateFiles/generatePackageJson.js +7 -9
- package/bin/generateFiles/generateStylesCss.js +2 -3
- package/bin/generateFiles/generateViteConfig.js +31 -19
- package/bin/generateFiles/index.js +10 -10
- package/bin/index.js +142 -101
- package/bin/templates/next/auth/app/globals.css +2 -1
- package/bin/templates/next/auth/app/layout.tsx +20 -22
- package/bin/templates/next/basic/app/globals.css +3 -1
- package/bin/templates/next/basic/app/layout.tsx +20 -23
- package/bin/templates/vite/basic/README.md +19 -7
- package/bin/templates/vite/basic/src/main.tsx +16 -7
- package/bin/templates/vite/basic/src/styles/style.css +1 -2
- package/bin/templates/vite/query/README.md +19 -7
- package/bin/templates/vite/query/src/main.tsx +20 -15
- package/bin/templates/vite/query/src/styles/style.css +2 -2
- package/bin/templates/vite/query+router/src/main.tsx +52 -53
- package/bin/templates/vite/query+router/src/styles/style.css +2 -2
- package/bin/templates/vite/router/src/main.tsx +46 -47
- package/bin/templates/vite/router/src/styles/style.css +1 -2
- package/bin/templates/viteWithLanguage/basic/src/styles/style.css +1 -2
- package/bin/templates/viteWithLanguage/query/src/styles/style.css +1 -2
- package/bin/templates/viteWithLanguage/query+router/src/main.tsx +70 -71
- package/bin/templates/viteWithLanguage/query+router/src/styles/style.css +1 -2
- package/bin/templates/viteWithLanguage/router/src/main.tsx +62 -66
- package/bin/templates/viteWithLanguage/router/src/styles/style.css +1 -2
- package/package.json +1 -1
|
@@ -1,10 +1,19 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import ReactDOM from
|
|
1
|
+
import React from "react";
|
|
2
|
+
import ReactDOM from "react-dom/client";
|
|
3
3
|
|
|
4
|
-
import App from
|
|
4
|
+
import App from "./App";
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
const sendHeightForIframes = () =>
|
|
7
|
+
window.parent.postMessage(
|
|
8
|
+
{ type: "iframe-height", height: document.documentElement.scrollHeight },
|
|
9
|
+
"*",
|
|
10
|
+
);
|
|
11
|
+
|
|
12
|
+
new ResizeObserver(sendHeightForIframes).observe(document.documentElement);
|
|
13
|
+
window.addEventListener("load", sendHeightForIframes);
|
|
14
|
+
|
|
15
|
+
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
|
|
16
|
+
<React.StrictMode>
|
|
17
|
+
<App />
|
|
18
|
+
</React.StrictMode>,
|
|
10
19
|
);
|
|
@@ -62,19 +62,31 @@ To embed the visualization on an external page, include:
|
|
|
62
62
|
**HTML Placeholder**
|
|
63
63
|
|
|
64
64
|
```html
|
|
65
|
-
<
|
|
65
|
+
<iframe
|
|
66
|
+
id="my-embed"
|
|
67
|
+
src="<url of the app>"
|
|
68
|
+
style="width: 100%; border: 0; display: block;"
|
|
69
|
+
scrolling="no"
|
|
70
|
+
/>
|
|
66
71
|
```
|
|
67
72
|
|
|
68
|
-
**Required `<script
|
|
73
|
+
**Required `<script>`**
|
|
69
74
|
|
|
70
75
|
```
|
|
71
|
-
<
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
+
<script>
|
|
77
|
+
var iframe = document.getElementById('my-embed');
|
|
78
|
+
window.addEventListener('message', function (e) {
|
|
79
|
+
if (e.origin !== 'http://localhost:5173') return;
|
|
80
|
+
if (e.source !== iframe.contentWindow) return;
|
|
81
|
+
if (e.data && e.data.type === 'iframe-height') {
|
|
82
|
+
iframe.style.height = e.data.height + 'px';
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
</script>
|
|
76
86
|
```
|
|
77
87
|
|
|
88
|
+
_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._
|
|
89
|
+
|
|
78
90
|
## 📬 Contact us
|
|
79
91
|
|
|
80
92
|
For questions or feedback, contact us at [data@undp.org](mailto:data@undp.org).
|
|
@@ -1,21 +1,26 @@
|
|
|
1
|
-
import { StrictMode } from
|
|
2
|
-
import ReactDOM from
|
|
1
|
+
import { StrictMode } from "react";
|
|
2
|
+
import ReactDOM from "react-dom/client";
|
|
3
|
+
import App from "./App";
|
|
4
|
+
import * as TanStackQueryProvider from "./integration/tanstack-query";
|
|
3
5
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
+
const sendHeightForIframes = () =>
|
|
7
|
+
window.parent.postMessage(
|
|
8
|
+
{ type: "iframe-height", height: document.documentElement.scrollHeight },
|
|
9
|
+
"*",
|
|
10
|
+
);
|
|
6
11
|
|
|
7
|
-
|
|
8
|
-
|
|
12
|
+
new ResizeObserver(sendHeightForIframes).observe(document.documentElement);
|
|
13
|
+
window.addEventListener("load", sendHeightForIframes);
|
|
9
14
|
|
|
10
15
|
const TanStackQueryProviderContext = TanStackQueryProvider.getContext();
|
|
11
|
-
const rootElement = document.getElementById(
|
|
16
|
+
const rootElement = document.getElementById("root");
|
|
12
17
|
if (rootElement) {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
const root = ReactDOM.createRoot(rootElement);
|
|
19
|
+
root.render(
|
|
20
|
+
<StrictMode>
|
|
21
|
+
<TanStackQueryProvider.Provider {...TanStackQueryProviderContext}>
|
|
22
|
+
<App />
|
|
23
|
+
</TanStackQueryProvider.Provider>
|
|
24
|
+
</StrictMode>,
|
|
25
|
+
);
|
|
21
26
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@import
|
|
2
|
-
@import
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
@import "@undp/design-system-react/tailwind.css";
|
|
@@ -1,73 +1,72 @@
|
|
|
1
|
-
import { StrictMode } from 'react';
|
|
2
|
-
import ReactDOM from 'react-dom/client';
|
|
3
1
|
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
} from
|
|
2
|
+
createRootRoute,
|
|
3
|
+
createRoute,
|
|
4
|
+
createRouter,
|
|
5
|
+
Outlet,
|
|
6
|
+
RouterProvider,
|
|
7
|
+
} from "@tanstack/react-router";
|
|
8
|
+
import { StrictMode } from "react";
|
|
9
|
+
import ReactDOM from "react-dom/client";
|
|
10
|
+
import App from "./App";
|
|
11
|
+
import FooterEl from "./components/Footer";
|
|
12
|
+
import HeaderEl from "./components/Header";
|
|
13
|
+
import * as TanStackQueryProvider from "./integration/tanstack-query";
|
|
14
|
+
import createTanStackQueryDemoRoute from "./routes/queryDemo.route";
|
|
10
15
|
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import FooterEl from './components/Footer';
|
|
14
|
-
import App from './App';
|
|
15
|
-
import createTanStackQueryDemoRoute from './routes/queryDemo.route';
|
|
16
|
-
|
|
17
|
-
import './styles/fonts.css';
|
|
18
|
-
import './styles/style.css';
|
|
16
|
+
import "./styles/fonts.css";
|
|
17
|
+
import "./styles/style.css";
|
|
19
18
|
|
|
20
19
|
const rootRoute = createRootRoute({
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
20
|
+
component: () => (
|
|
21
|
+
<div className="flex flex-col gap-0 min-h-screen">
|
|
22
|
+
<HeaderEl />
|
|
23
|
+
<main className="grow flex flex-col justify-center">
|
|
24
|
+
<div className="flex flex-col justify-center">
|
|
25
|
+
<Outlet />
|
|
26
|
+
</div>
|
|
27
|
+
</main>
|
|
28
|
+
<FooterEl />
|
|
29
|
+
</div>
|
|
30
|
+
),
|
|
32
31
|
});
|
|
33
32
|
|
|
34
33
|
const indexRoute = createRoute({
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
34
|
+
getParentRoute: () => rootRoute,
|
|
35
|
+
path: "/",
|
|
36
|
+
component: App,
|
|
38
37
|
});
|
|
39
38
|
|
|
40
39
|
const routeTree = rootRoute.addChildren([
|
|
41
|
-
|
|
42
|
-
|
|
40
|
+
indexRoute,
|
|
41
|
+
createTanStackQueryDemoRoute(rootRoute),
|
|
43
42
|
]);
|
|
44
43
|
|
|
45
44
|
const TanStackQueryProviderContext = TanStackQueryProvider.getContext();
|
|
46
45
|
const router = createRouter({
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
46
|
+
routeTree,
|
|
47
|
+
context: {
|
|
48
|
+
...TanStackQueryProviderContext,
|
|
49
|
+
},
|
|
50
|
+
defaultPreload: "intent",
|
|
51
|
+
scrollRestoration: true,
|
|
52
|
+
defaultStructuralSharing: true,
|
|
53
|
+
defaultPreloadStaleTime: 0,
|
|
55
54
|
});
|
|
56
55
|
|
|
57
|
-
declare module
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
56
|
+
declare module "@tanstack/react-router" {
|
|
57
|
+
interface Register {
|
|
58
|
+
router: typeof router;
|
|
59
|
+
}
|
|
61
60
|
}
|
|
62
61
|
|
|
63
|
-
const rootElement = document.getElementById(
|
|
62
|
+
const rootElement = document.getElementById("root");
|
|
64
63
|
if (rootElement) {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
64
|
+
const root = ReactDOM.createRoot(rootElement);
|
|
65
|
+
root.render(
|
|
66
|
+
<StrictMode>
|
|
67
|
+
<TanStackQueryProvider.Provider {...TanStackQueryProviderContext}>
|
|
68
|
+
<RouterProvider router={router} />
|
|
69
|
+
</TanStackQueryProvider.Provider>
|
|
70
|
+
</StrictMode>,
|
|
71
|
+
);
|
|
73
72
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@import
|
|
2
|
-
@import
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
@import "@undp/design-system-react/tailwind.css";
|
|
@@ -1,66 +1,65 @@
|
|
|
1
|
-
import { StrictMode } from 'react';
|
|
2
|
-
import ReactDOM from 'react-dom/client';
|
|
3
1
|
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
} from
|
|
2
|
+
createRootRoute,
|
|
3
|
+
createRoute,
|
|
4
|
+
createRouter,
|
|
5
|
+
Outlet,
|
|
6
|
+
RouterProvider,
|
|
7
|
+
} from "@tanstack/react-router";
|
|
8
|
+
import { StrictMode } from "react";
|
|
9
|
+
import ReactDOM from "react-dom/client";
|
|
10
|
+
import App from "./App";
|
|
11
|
+
import FooterEl from "./components/Footer";
|
|
12
|
+
import HeaderEl from "./components/Header";
|
|
13
|
+
import createAboutRoute from "./routes/about.route";
|
|
10
14
|
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import App from './App';
|
|
14
|
-
import createAboutRoute from './routes/about.route';
|
|
15
|
-
|
|
16
|
-
import './styles/fonts.css';
|
|
17
|
-
import './styles/style.css';
|
|
15
|
+
import "./styles/fonts.css";
|
|
16
|
+
import "./styles/style.css";
|
|
18
17
|
|
|
19
18
|
const rootRoute = createRootRoute({
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
19
|
+
component: () => (
|
|
20
|
+
<div className="flex flex-col gap-0 min-h-screen">
|
|
21
|
+
<HeaderEl />
|
|
22
|
+
<main className="grow flex flex-col justify-center">
|
|
23
|
+
<div className="flex flex-col justify-center">
|
|
24
|
+
<Outlet />
|
|
25
|
+
</div>
|
|
26
|
+
</main>
|
|
27
|
+
<FooterEl />
|
|
28
|
+
</div>
|
|
29
|
+
),
|
|
31
30
|
});
|
|
32
31
|
|
|
33
32
|
const indexRoute = createRoute({
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
getParentRoute: () => rootRoute,
|
|
34
|
+
path: "/",
|
|
35
|
+
component: App,
|
|
37
36
|
});
|
|
38
37
|
|
|
39
38
|
const routeTree = rootRoute.addChildren([
|
|
40
|
-
|
|
41
|
-
|
|
39
|
+
indexRoute,
|
|
40
|
+
createAboutRoute(rootRoute),
|
|
42
41
|
]);
|
|
43
42
|
|
|
44
43
|
const router = createRouter({
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
44
|
+
routeTree,
|
|
45
|
+
defaultPreload: "intent",
|
|
46
|
+
scrollRestoration: true,
|
|
47
|
+
defaultStructuralSharing: true,
|
|
48
|
+
defaultPreloadStaleTime: 0,
|
|
50
49
|
});
|
|
51
50
|
|
|
52
|
-
declare module
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
51
|
+
declare module "@tanstack/react-router" {
|
|
52
|
+
interface Register {
|
|
53
|
+
router: typeof router;
|
|
54
|
+
}
|
|
56
55
|
}
|
|
57
56
|
|
|
58
|
-
const rootElement = document.getElementById(
|
|
57
|
+
const rootElement = document.getElementById("root");
|
|
59
58
|
if (rootElement) {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
59
|
+
const root = ReactDOM.createRoot(rootElement);
|
|
60
|
+
root.render(
|
|
61
|
+
<StrictMode>
|
|
62
|
+
<RouterProvider router={router} />
|
|
63
|
+
</StrictMode>,
|
|
64
|
+
);
|
|
66
65
|
}
|
|
@@ -1,95 +1,94 @@
|
|
|
1
|
-
import { StrictMode } from 'react';
|
|
2
|
-
import ReactDOM from 'react-dom/client';
|
|
3
|
-
import { I18nextProvider } from 'react-i18next';
|
|
4
1
|
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
} from
|
|
2
|
+
createRootRoute,
|
|
3
|
+
createRoute,
|
|
4
|
+
createRouter,
|
|
5
|
+
Outlet,
|
|
6
|
+
RouterProvider,
|
|
7
|
+
} from "@tanstack/react-router";
|
|
8
|
+
import { StrictMode } from "react";
|
|
9
|
+
import ReactDOM from "react-dom/client";
|
|
10
|
+
import { I18nextProvider } from "react-i18next";
|
|
11
|
+
import App from "./App";
|
|
12
|
+
import FooterEl from "./components/Footer";
|
|
13
|
+
import HeaderEl from "./components/Header";
|
|
14
|
+
import { DEFAULT_LANGUAGE, LANGUAGES } from "./constants";
|
|
15
|
+
import i18n from "./i18n";
|
|
16
|
+
import * as TanStackQueryProvider from "./integration/tanstack-query";
|
|
17
|
+
import createTanStackQueryDemoRoute from "./routes/queryDemo.route";
|
|
11
18
|
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import FooterEl from './components/Footer';
|
|
15
|
-
import App from './App';
|
|
16
|
-
import createTanStackQueryDemoRoute from './routes/queryDemo.route';
|
|
17
|
-
import i18n from './i18n';
|
|
18
|
-
import { DEFAULT_LANGUAGE, LANGUAGES } from './constants';
|
|
19
|
-
|
|
20
|
-
import './styles/fonts.css';
|
|
21
|
-
import './styles/style.css';
|
|
19
|
+
import "./styles/fonts.css";
|
|
20
|
+
import "./styles/style.css";
|
|
22
21
|
|
|
23
22
|
const rootRoute = createRootRoute({
|
|
24
|
-
|
|
23
|
+
component: () => <Outlet />,
|
|
25
24
|
});
|
|
26
25
|
|
|
27
26
|
const localeRoute = createRoute({
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
27
|
+
getParentRoute: () => rootRoute,
|
|
28
|
+
path: "/{-$locale}",
|
|
29
|
+
beforeLoad: async ({ params }) => {
|
|
30
|
+
const locale =
|
|
31
|
+
params.locale && LANGUAGES.map((d) => d.id).includes(params.locale)
|
|
32
|
+
? params.locale
|
|
33
|
+
: DEFAULT_LANGUAGE;
|
|
35
34
|
|
|
36
|
-
|
|
35
|
+
await i18n.changeLanguage(locale);
|
|
37
36
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
37
|
+
return { locale };
|
|
38
|
+
},
|
|
39
|
+
component: () => (
|
|
40
|
+
<div className="flex flex-col gap-0 min-h-screen">
|
|
41
|
+
<HeaderEl />
|
|
42
|
+
<main className="grow flex flex-col justify-center">
|
|
43
|
+
<div className="flex flex-col justify-center">
|
|
44
|
+
<Outlet />
|
|
45
|
+
</div>
|
|
46
|
+
</main>
|
|
47
|
+
<FooterEl />
|
|
48
|
+
</div>
|
|
49
|
+
),
|
|
51
50
|
});
|
|
52
51
|
|
|
53
52
|
const indexRoute = createRoute({
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
53
|
+
getParentRoute: () => localeRoute,
|
|
54
|
+
path: "/",
|
|
55
|
+
component: App,
|
|
57
56
|
});
|
|
58
57
|
|
|
59
58
|
const routeTree = rootRoute.addChildren([
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
59
|
+
localeRoute.addChildren([
|
|
60
|
+
indexRoute,
|
|
61
|
+
createTanStackQueryDemoRoute(localeRoute),
|
|
62
|
+
]),
|
|
64
63
|
]);
|
|
65
64
|
|
|
66
65
|
const TanStackQueryProviderContext = TanStackQueryProvider.getContext();
|
|
67
66
|
const router = createRouter({
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
67
|
+
routeTree,
|
|
68
|
+
context: {
|
|
69
|
+
...TanStackQueryProviderContext,
|
|
70
|
+
},
|
|
71
|
+
defaultPreload: "intent",
|
|
72
|
+
scrollRestoration: true,
|
|
73
|
+
defaultStructuralSharing: true,
|
|
74
|
+
defaultPreloadStaleTime: 0,
|
|
76
75
|
});
|
|
77
76
|
|
|
78
|
-
declare module
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
77
|
+
declare module "@tanstack/react-router" {
|
|
78
|
+
interface Register {
|
|
79
|
+
router: typeof router;
|
|
80
|
+
}
|
|
82
81
|
}
|
|
83
82
|
|
|
84
|
-
const rootElement = document.getElementById(
|
|
83
|
+
const rootElement = document.getElementById("root");
|
|
85
84
|
if (rootElement) {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
}
|
|
85
|
+
ReactDOM.createRoot(rootElement).render(
|
|
86
|
+
<StrictMode>
|
|
87
|
+
<I18nextProvider i18n={i18n}>
|
|
88
|
+
<TanStackQueryProvider.Provider {...TanStackQueryProviderContext}>
|
|
89
|
+
<RouterProvider router={router} />
|
|
90
|
+
</TanStackQueryProvider.Provider>
|
|
91
|
+
</I18nextProvider>
|
|
92
|
+
</StrictMode>,
|
|
93
|
+
);
|
|
94
|
+
}
|