@undp/create-app 0.0.1

package/bin/generateTemplates/templates/configFiles/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/bin/generateTemplates/templates/configFiles/vite-env.txt

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/bin/generateTemplates/templates/configFiles/vite.config.ts.txt

@@ -0,0 +1,109 @@
+import path from 'path';
+
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import eslint from '@nabla/vite-plugin-eslint';
+import { AtRule } from 'postcss';
+import { visualizer } from 'rollup-plugin-visualizer';
+import postcssNested from 'postcss-nested';
+import tailwindcss from '@tailwindcss/postcss';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+
+export default defineConfig({
+  plugins: [
+    react({
+      babel: {
+        plugins: ['babel-plugin-react-compiler'],
+      },
+    }),
+    eslint(),
+    visualizer({ filename: 'stats.html', open: true }),
+    viteStaticCopy({
+      targets: [{ src: 'staticwebapp.config.json', dest: '' }],
+    }),
+  ],
+  css: {
+    postcss: {
+      plugins: [
+        postcssNested(),
+        tailwindcss(),
+        {
+          postcssPlugin: 'remove-layers', // If you want to flatten layers except base layer
+          AtRule: {
+            layer(rule) {
+              if (rule.params !== 'base') {
+                rule.each(child => {
+                  rule.parent.insertAfter(rule, child);
+                });
+                rule.remove();
+              }
+            },
+          },
+        },
+        {
+          postcssPlugin: 'wrap-with-undp-container', // If you want to wrap all the class in .undp-container
+          OnceExit(root) {
+            const skipSelectors = ['html', 'body', ':root', ':host'];
+            root.walkRules(rule => {
+              if (rule.parent && rule.parent.type === 'atrule') {
+                const parent = rule.parent as AtRule;
+                if (parent.name === 'keyframes' || parent.name === 'supports') {
+                  return;
+                }
+              }
+              rule.selectors = rule.selectors.map(selector => {
+                if (selector.startsWith('.undp-container')) return selector;
+                if (skipSelectors.some(skip => selector.startsWith(skip)))
+                  return selector;
+                return `.undp-container ${selector}`;
+              });
+            });
+          },
+        },
+        {
+          postcssPlugin: 'move-media-queries-last', // If you want to reorder media queries to the end
+          OnceExit(root) {
+            const mediaQueries = [];
+
+            // Collect all media queries
+            root.walkAtRules('media', mediaRule => {
+              mediaQueries.push(mediaRule.clone());
+              mediaRule.remove();
+            });
+
+            // Append them at the end
+            mediaQueries.forEach(mediaQuery => {
+              root.append(mediaQuery);
+            });
+          },
+        },
+      ],
+    },
+  },
+  build: {
+    manifest: true,
+    cssCodeSplit: false,
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes('node_modules/react')) return 'react';
+          if (id.includes('@undp/design-system-react')) return 'undp';
+          if (id.includes('@undp/data-viz')) return 'undp';
+        },
+        chunkFileNames: '[name]-[hash].js',
+        assetFileNames: '[name].[ext]',
+        entryFileNames: '[name].js',
+      },
+      treeshake: true,
+    },
+  },
+  server: {
+    cors: {
+      origin: '*',
+      methods: ['GET'],
+      preflightContinue: false,
+      optionsSuccessStatus: 204,
+    },
+  },
+  resolve: { alias: { '@': path.resolve(__dirname, './src') } },
+});

package/bin/generateTemplates/templates/configFiles/viteWithoutPostCss.config.ts.txt

@@ -0,0 +1,58 @@
+import path from 'path';
+
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import eslint from '@nabla/vite-plugin-eslint';
+import { visualizer } from 'rollup-plugin-visualizer';
+import postcssNested from 'postcss-nested';
+import tailwindcss from '@tailwindcss/postcss';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+
+export default defineConfig({
+  plugins: [
+    react({
+      babel: {
+        plugins: ['babel-plugin-react-compiler'],
+      },
+    }),
+    eslint(),
+    visualizer({ filename: 'stats.html', open: true }),
+    viteStaticCopy({
+      targets: [{ src: 'staticwebapp.config.json', dest: '' }],
+    }),
+  ],
+  css: {
+    postcss: {
+      plugins: [
+        postcssNested(),
+        tailwindcss(),
+      ],
+    },
+  },
+  build: {
+    manifest: true,
+    cssCodeSplit: false,
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes('node_modules/react')) return 'react';
+          if (id.includes('@undp/design-system-react')) return 'undp';
+          if (id.includes('@undp/data-viz')) return 'undp';
+        },
+        chunkFileNames: '[name]-[hash].js',
+        assetFileNames: '[name].[ext]',
+        entryFileNames: '[name].js',
+      },
+      treeshake: true,
+    },
+  },
+  server: {
+    cors: {
+      origin: '*',
+      methods: ['GET'],
+      preflightContinue: false,
+      optionsSuccessStatus: 204,
+    },
+  },
+  resolve: { alias: { '@': path.resolve(__dirname, './src') } },
+});

package/bin/generateTemplates/templates/css/fonts.css

@@ -0,0 +1,213 @@
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: normal;
+  font-weight: 100;
+  src: url('./fonts/proximanova-thin-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: italic;
+  font-weight: 100;
+  src: url('./fonts/proximanova-thinit-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: normal;
+  font-weight: 200;
+  src: url('./fonts/proximanova-light-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: italic;
+  font-weight: 200 300;
+  src: url('./fonts/proximanova-lightit-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: normal;
+  font-weight: 400;
+  src: url('./fonts/proximanova-regular-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: italic;
+  font-weight: 400;
+  src: url('./fonts/proximanova-regularit-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: normal;
+  font-weight: 500;
+  src: url('./fonts/proximanova-medium-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: italic;
+  font-weight: 500;
+  src: url('./fonts/proximanova-mediumit-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: normal;
+  font-weight: 600;
+  src: url('./fonts/proximanova-semibold-webfont-2.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: italic;
+  font-weight: 600;
+  src: url('./fonts/proximanova-semiboldit-webfont-2.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: normal;
+  font-weight: 700;
+  src: url('./fonts/proximanova-bold-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: italic;
+  font-weight: 700;
+  src: url('./fonts/proximanova-boldit-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: normal;
+  font-weight: 800;
+  src: url('./fonts/proximanova-extrabold-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: italic;
+  font-weight: 800;
+  src: url('./fonts/proximanova-extraboldit-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: normal;
+  font-weight: 900;
+  src: url('./fonts/proximanova-black-webfont.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'ProximaNova';
+  font-style: italic;
+  font-weight: 900;
+  src: url('./fonts/proximanova-blackit-webfont.woff2') format('woff2');
+}
+
+/* SohneBreit */
+@font-face {
+  font-display: swap;
+  font-family: 'SohneBreit';
+  font-style: normal;
+  font-weight: 100 700;
+  src: url('./fonts/soehne-breit-web-dreiviertelfett.woff2') format('woff2');
+  unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+2070-209F;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'SohneBreit';
+  font-style: italic;
+  font-weight: 100 700;
+  src: url('./fonts/soehne-breit-web-dreiviertelfett-kursiv.woff2')
+    format('woff2');
+  unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+2070-209F;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'SohneBreit';
+  font-style: normal;
+  font-weight: 800 900;
+  src: url('./fonts/soehne-breit-web-fett.woff2') format('woff2');
+  unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+2070-209F;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'SohneBreit';
+  font-style: italic;
+  font-weight: 800 900;
+  src: url('./fonts/soehne-breit-web-fett-kursiv.woff2') format('woff2');
+  unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-20CF;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'UNBangla';
+  font-style: normal;
+  font-weight: 100 300;
+  src: url('./fonts/UNBangla-Thin.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'UNBangla';
+  font-style: italic;
+  font-weight: 100 300;
+  src: url('./fonts/UNBangla-ThinItalic.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'UNBangla';
+  font-style: normal;
+  font-weight: 400;
+  src: url('./fonts/UNBangla-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'UNBangla';
+  font-style: italic;
+  font-weight: 400;
+  src: url('./fonts/UNBangla-Italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'UNBangla';
+  font-style: normal;
+  font-weight: 500 900;
+  src: url('./fonts/UNBangla-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'UNBangla';
+  font-style: italic;
+  font-weight: 500 900;
+  src: url('./fonts/UNBangla-BoldItalic.woff2') format('woff2');
+}

package/bin/generateTemplates/templates/query/App.txt

@@ -0,0 +1,57 @@
+import { H3 } from '@undp/design-system-react';
+import { useQuery } from '@tanstack/react-query';
+
+import '@/styles/fonts.css';
+import '@/styles/style.css';
+import undpLogo from './assets/undp-logo-blue.svg';
+
+function useTodoData() {
+  return useQuery({
+    queryKey: ['todos'],
+    queryFn: () =>
+      Promise.resolve([
+        { id: 1, name: 'Alice' },
+        { id: 2, name: 'Bob' },
+        { id: 3, name: 'Charlie' },
+      ]),
+    initialData: [],
+  });
+}
+
+function App() {
+  const { data, isLoading, isError } = useTodoData();
+
+  if (isLoading) return <Spinner size='lg' className='my-20 m-auto' />;
+
+  if (isError)
+    return (
+      <div className='px-4 mx-auto'>
+        <div>Error</div>
+      </div>
+    );
+  return (
+    <div className='m-5'>
+      <div>
+        <img
+          src={undpLogo}
+          className='logo react mb-8'
+          alt='React logo'
+          width='72px'
+          style={{ marginLeft: 'auto', marginRight: 'auto' }}
+        />
+      </div>
+      <H3 className='text-center'>
+        This is template for building visualization and frontend project
+        maintained by UNDP&apos;s DAI Hub.
+        <br />
+        <br />
+        Contact us at data@undp.org if you have any feedback or questions.
+        <br />
+        <br />
+        {data.length} elements in the query
+      </H3>
+    </div>
+  );
+}
+
+export default App;

package/bin/generateTemplates/templates/query/AppWithContainer.txt

@@ -0,0 +1,67 @@
+import { H3 } from '@undp/design-system-react';
+import { useQuery } from '@tanstack/react-query';
+
+import '@/styles/fonts.css';
+import '@/styles/style.css';
+import undpLogo from './assets/undp-logo-blue.svg';
+
+function useTodoData() {
+  return useQuery({
+    queryKey: ['todos'],
+    queryFn: () =>
+      Promise.resolve([
+        { id: 1, name: 'Alice' },
+        { id: 2, name: 'Bob' },
+        { id: 3, name: 'Charlie' },
+      ]),
+    initialData: [],
+  });
+}
+
+function App() {
+  const { data, isLoading, isError } = useTodoData();
+
+  if (isLoading) 
+    return (
+      <div className='undp-container'>
+        <Spinner size='lg' className='my-20 m-auto' />
+      </div>
+    );
+
+  if (isError)
+    return (
+      <div className='undp-container'>
+        <div className='px-4 mx-auto'>
+          <div>Error</div>
+        </div>
+      </div>
+    );
+    
+  return (
+    <div className='undp-container'>
+      <div className='m-5'>
+        <div>
+          <img
+            src={undpLogo}
+            className='logo react mb-8'
+            alt='React logo'
+            width='72px'
+            style={{ marginLeft: 'auto', marginRight: 'auto' }}
+          />
+        </div>
+        <H3 className='text-center'>
+          This is template for building visualization and frontend project
+          maintained by UNDP&apos;s DAI Hub.
+          <br />
+          <br />
+          Contact us at data@undp.org if you have any feedback or questions.
+          <br />
+          <br />
+          {data.length} elements in the query
+        </H3>
+      </div>
+    </div>
+  );
+}
+
+export default App;

package/bin/generateTemplates/templates/query/main.txt

@@ -0,0 +1,29 @@
+import { StrictMode } from 'react';
+import ReactDOM from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+import './styles/fonts.css';
+import './styles/style.css';
+
+import App from './App';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 60 * 24, // how long fetched data is considered “fresh” before it becomes “stale” 🡢 24 hrs
+      gcTime: 1000 * 60 * 60 * 24, // how long inactive (unused) query data stays in memory before being deleted 🡢 24 hrs
+    },
+  },
+});
+
+const rootElement = document.getElementById('app');
+if (rootElement && !rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(
+    <StrictMode>
+      <QueryClientProvider client={queryClient}>
+        <App />
+      </QueryClientProvider>
+    </StrictMode>,
+  );
+}

package/bin/generateTemplates/templates/router/App.txt

@@ -0,0 +1,30 @@
+import { H3 } from '@undp/design-system-react';
+
+import '@/styles/fonts.css';
+import '@/styles/style.css';
+import undpLogo from './assets/undp-logo-blue.svg';
+
+function App() {
+  return (
+    <div className='m-5'>
+      <div>
+        <img
+          src={undpLogo}
+          className='logo react mb-8'
+          alt='React logo'
+          width='72px'
+          style={{ marginLeft: 'auto', marginRight: 'auto' }}
+        />
+      </div>
+      <H3 className='text-center'>
+        This is template for building visualization and frontend project
+        maintained by UNDP&apos;s DAI Hub.
+        <br />
+        <br />
+        Contact us at data@undp.org if you have any feedback or questions.
+      </H3>
+    </div>
+  );
+}
+
+export default App;

package/bin/generateTemplates/templates/router/components/Footer.txt

@@ -0,0 +1,20 @@
+import {
+  Footer,
+  FooterLogoUnit,
+  FooterCopyrightUnit,
+} from '@undp/design-system-react/Footer';
+
+
+
+export default function Header() {
+  return (
+    <Footer>
+      <FooterLogoUnit>
+        subscribe to email
+      </FooterLogoUnit>
+      <FooterCopyrightUnit>
+        Footnote can be added here
+      </FooterCopyrightUnit>
+    </Footer>
+  )
+}

package/bin/generateTemplates/templates/router/components/Header.txt

@@ -0,0 +1,29 @@
+import {
+  Header,
+  HeaderLogoUnit,
+  HeaderMainNavUnit,
+  HeaderMenuUnit,
+} from '@undp/design-system-react/Header';
+import { Link } from '@tanstack/react-router';
+
+export default function Header() {
+  return (
+    <Header>
+      <HeaderLogoUnit
+      hyperlink="./"
+      siteName="Site name"
+      siteSubName="Sub-site name"
+      />
+      <HeaderMainNavUnit>
+        <HeaderMenuUnit>
+          <Link to='/'>
+            Home
+          </Link>
+          <Link to='/about'>
+            About
+          </Link>
+        </HeaderMenuUnit>
+      </HeaderMainNavUnit>
+    </Header>
+  )
+}

package/bin/generateTemplates/templates/router/main.txt

@@ -0,0 +1,60 @@
+import { StrictMode } from 'react';
+import ReactDOM from 'react-dom/client';
+import {
+  Outlet,
+  RouterProvider,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '@tanstack/react-router';
+
+import About from './routes/About.tsx';
+import Header from './components/Header';
+import Footer from './components/Footer';
+
+import './styles/fonts.css';
+import './styles/style.css';
+
+import App from './App';
+
+const rootRoute = createRootRoute({
+  component: () => (
+    <>
+      <Header />
+      <Outlet />
+      <Footer />
+    </>
+  ),
+});
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: App,
+});
+
+const routeTree = rootRoute.addChildren([indexRoute, About(rootRoute)]);
+
+const router = createRouter({
+  routeTree,
+  defaultPreload: 'intent',
+  scrollRestoration: true,
+  defaultStructuralSharing: true,
+  defaultPreloadStaleTime: 0,
+});
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+const rootElement = document.getElementById('app');
+if (rootElement && !rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(
+    <StrictMode>
+      <RouterProvider router={router} />
+    </StrictMode>,
+  );
+}