@undp/create-app 0.2.1 → 0.2.3

package/bin/templates/vite/{withDataViz/query → basic}/src/App.tsx

@@ -1,28 +1,14 @@
-import { H6, P } from '@undp/design-system-react/Typography';
-import { Spinner } from '@undp/design-system-react/Spinner';
-import { useQuery } from '@tanstack/react-query';
+import { P } from '@undp/design-system-react/Typography';
+import { Button } from '@undp/design-system-react/Button';
+
+import { useCounterActions, useCounter } from './stores/counter';
 
 import '@/styles/fonts.css';
 import '@/styles/style.css';
 
-function useTodoData() {
-  return useQuery({
-    queryKey: ['todos'],
-    queryFn: () =>
-      Promise.resolve([
-        { id: 1, name: 'Alice' },
-        { id: 2, name: 'Bob' },
-        { id: 3, name: 'Charlie' },
-      ]),
-  });
-}
-
 function App() {
-  const { data, isLoading, isError } = useTodoData();
-
-  if (isLoading) return <Spinner size='lg' className='my-20 m-auto' />;
-
-  if (isError) return <>Error</>;
+  const count = useCounter();
+  const { increment, decrement } = useCounterActions();
   return (
     <div className=' min-h-screen flex flex-col justify-center'>
       <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
@@ -41,8 +27,8 @@ function App() {
         />
         <P marginBottom='none'>&</P>
         <img
-          src='./imgs/logo-color-600.png'
-          alt='tanstack logo'
+          src='./imgs/Zustand-logo.svg'
+          alt='Zustand logo'
           width='72px'
           style={{ marginLeft: 'auto', marginRight: 'auto' }}
         />
@@ -54,15 +40,28 @@ function App() {
           style={{ marginLeft: 'auto', marginRight: 'auto' }}
         />
       </div>
-      <H6 marginBottom='xl' className='text-center'>
-        To get started, edit the App.tsx file.
-      </H6>
-      <H6 marginBottom='xl' className='text-center'>
-        Data loaded successfully
-        <br />
-        <br />
-        {data?.length} elements in the query
-      </H6>
+      <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>
     </div>
   );
 }

package/bin/templates/vite/{withDataViz/basic → basic}/src/main.tsx

@@ -7,4 +7,4 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-);
+);

package/bin/templates/vite/basic/src/stores/counter.ts

@@ -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);