fix: types and packagejson

Author: dannyhw

cli/src/templates/base/package.json.ejs

@@ -66,9 +66,10 @@
       <% if (props.stylingPackage?.options.selectedComponents.includes('slider')) { %>
         "@react-native-community/slider": "4.5.2",
       <% } %>
-      <% if (props.stateManagementPackage?.name === "zustand") { %>
-        "zustand": "^4.5.1",
-      <% } %>
+    <% } %>
+
+    <% if (props.stateManagementPackage?.name === "zustand") { %>
+      "zustand": "^4.5.1",
     <% } %>
     
     <% if (props.stylingPackage?.name === "restyle") { %>

cli/src/templates/packages/zustand/StateManagement/zustandStore.ts.ejs renamed to cli/src/templates/packages/zustand/store/store.ts.ejs

@@ -1,6 +1,13 @@
 import { create } from 'zustand'
 
-const useStore = create((set) => ({
+export interface BearState {
+  bears: number
+  increasePopulation: () => void
+  removeAllBears: () => void
+  updateBears: (newBears: number) => void
+}
+
+export const useStore = create<BearState>((set) => ({
   bears: 0,
   increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
   removeAllBears: () => set({ bears: 0 }),

cli/src/utilities/configureProjectFiles.ts

@@ -352,7 +352,7 @@ export function configureProjectFiles(
 
   // add state management files if needed
   if (stateManagementPackage?.name === 'zustand') {
-    const zustandFiles = ['packages/zustand/StateManagement/zustandStore.ts.ejs'];
+    const zustandFiles = ['packages/zustand/store/store.ts.ejs'];
     files = [...files, ...zustandFiles];
   }
 

cli/src/utilities/runCLI.ts

@@ -328,6 +328,32 @@ export async function runCLI(toolbox: Toolbox, projectName: string): Promise<Cli
     );
   }
 
+  const stateManagementSelect = await select({
+    message: 'What would you like to use for state management?',
+    options: [
+      { value: undefined, label: 'None' },
+      { value: 'zustand', label: 'Zustand' }
+      // { value: 'mobx', label: 'MobX' },
+      // { value: 'redux', label: 'Redux' },
+    ]
+  });
+
+  if (isCancel(stateManagementSelect)) {
+    cancel('Cancelled... 👋');
+    return process.exit(0);
+  }
+
+  if (stateManagementSelect) {
+    cliResults.packages.push({
+      name: stateManagementSelect as StateManagementSelect,
+      type: 'state-management'
+    });
+
+    success(`You'll be using ${stateManagementSelect} for state management.`);
+  } else {
+    success(`No problem, skipping state management for now.`);
+  }
+
   const authenticationSelect = await select({
     message: 'What would you like to use for authentication?',
     options: [
@@ -341,6 +367,7 @@ export async function runCLI(toolbox: Toolbox, projectName: string): Promise<Cli
     cancel('Cancelled... 👋');
     return process.exit(0);
   }
+
   if (authenticationSelect) {
     cliResults.packages.push({ name: authenticationSelect as AuthenticationSelect, type: 'authentication' });
   } else {
@@ -364,32 +391,6 @@ export async function runCLI(toolbox: Toolbox, projectName: string): Promise<Cli
     success(`No problem, skipping eas for now.`);
   }
 
-  const stateManagementSelect = await select({
-    message: 'What would you like to use for state management?',
-    options: [
-      { value: undefined, label: 'None' },
-      { value: 'zustand', label: 'Zustand' }
-      // { value: 'mobx', label: 'MobX' },
-      // { value: 'redux', label: 'Redux' },
-    ]
-  });
-
-  if (isCancel(stateManagementSelect)) {
-    cancel('Cancelled... 👋');
-    return process.exit(0);
-  }
-
-  if (stateManagementSelect) {
-    cliResults.packages.push({
-      name: stateManagementSelect as StateManagementSelect,
-      type: 'state-management'
-    });
-
-    success(`You'll be using ${stateManagementSelect} for state management.`);
-  } else {
-    success(`No problem, skipping state management for now.`);
-  }
-
   // Offer user ability to save configuration
   const shouldSaveConfig = await confirm({
     message: 'Would you like to save this configuration for future use?',