npm - @undp/create-app - Versions diffs - 0.2.1 → 0.2.3 - Mend

@undp/create-app 0.2.1 → 0.2.3

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.

Files changed (279) hide show

package/bin/templates/next/auth/stores/counter.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import { create } from 'zustand';
+type Actions = {
+  increment: (d?: number) => void;
+  decrement: (d?: number) => void;
+};
+type Store = {
+  count: number;
+  actions: Actions;
+};
+export const useCounterStore = create<Store>(set => ({
+  count: 0,
+  actions: {
+    increment: (d = 1) => set(state => ({ count: state.count + d })),
+    decrement: (d = 1) => set(state => ({ count: state.count - d })),
+  },
+}));
+export const useCounter = () => useCounterStore(s => s.count);
+export const useCounterActions = () => useCounterStore(s => s.actions);

package/bin/templates/next/basic/app/about/page.tsx ADDED Viewed

@@ -0,0 +1,51 @@
+'use client';
+import { P } from '@undp/design-system-react/Typography';
+import Image from 'next/image';
+export default function About() {
+  return (
+    <>
+      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
+        <Image
+          className='dark:invert'
+          src='/imgs/next.svg'
+          alt='Next.js logo'
+          width={100}
+          height={20}
+          priority
+        />
+        <P marginBottom='none'>&</P>
+        <Image
+          className='dark:invert'
+          src='/imgs/Tailwind_CSS_Logo.svg'
+          alt='Tailwind logo'
+          width={40}
+          height={20}
+          priority
+        />
+        <P marginBottom='none'>&</P>
+        <Image
+          className='dark:invert'
+          src='/imgs/Zustand-logo.svg'
+          alt='Zustand logo'
+          width={40}
+          height={20}
+          priority
+        />
+        <P marginBottom='none'>&</P>
+        <Image
+          className='dark:invert'
+          src='/imgs/undp-logo-blue.svg'
+          alt='UNDP logo'
+          width={40}
+          height={20}
+          priority
+        />
+      </div>
+      <P marginBottom='xl' className='text-center'>
+        To edit this page, edit the page.tsx file in the about folder.
+      </P>
+    </>
+  );
+}

package/bin/templates/next/{withDataViz/basic → basic}/app/layout.tsx RENAMED Viewed

@@ -1,4 +1,5 @@
 import type { Metadata } from 'next';
+import { ReactNode } from 'react';
 import HeaderEl from '@/components/Header';
 import FooterEl from '@/components/Footer';
@@ -15,7 +16,7 @@ export const metadata: Metadata = {
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: ReactNode;
 }>) {
   return (
     <html lang='en'>

package/bin/templates/next/basic/app/page.tsx ADDED Viewed

@@ -0,0 +1,75 @@
+'use client';
+import { P } from '@undp/design-system-react/Typography';
+import { Button } from '@undp/design-system-react/Button';
+import Image from 'next/image';
+import { useCounterActions, useCounter } from '@/stores/counter';
+export default function Home() {
+  const count = useCounter();
+  const { increment, decrement } = useCounterActions();
+  return (
+    <>
+      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
+        <Image
+          className='dark:invert'
+          src='/imgs/next.svg'
+          alt='Next.js logo'
+          width={100}
+          height={20}
+          priority
+        />
+        <P marginBottom='none'>&</P>
+        <Image
+          className='dark:invert'
+          src='/imgs/Tailwind_CSS_Logo.svg'
+          alt='Tailwind logo'
+          width={40}
+          height={20}
+          priority
+        />
+        <P marginBottom='none'>&</P>
+        <Image
+          className='dark:invert'
+          src='/imgs/Zustand-logo.svg'
+          alt='Zustand logo'
+          width={40}
+          height={20}
+          priority
+        />
+        <P marginBottom='none'>&</P>
+        <Image
+          className='dark:invert'
+          src='/imgs/undp-logo-blue.svg'
+          alt='UNDP logo'
+          width={40}
+          height={20}
+          priority
+        />
+      </div>
+      <P marginBottom='xl' className='text-center'>
+        To get started, edit the App.tsx file.{' '}
+        <span className='font-bold'>Count: {count}</span>
+      </P>
+      <div className='flex gap-4 justify-center'>
+        <Button
+          variant='tertiary'
+          onClick={() => {
+            increment();
+          }}
+        >
+          Increase counter
+        </Button>
+        <Button
+          variant='tertiary'
+          onClick={() => {
+            decrement();
+          }}
+        >
+          Decrease counter
+        </Button>
+      </div>
+    </>
+  );
+}