Added Zustand and state management option

Author: theblondealex

.changeset/twenty-chefs-burn.md

@@ -0,0 +1,9 @@
+---
+'create-expo-stack': minor
+---
+
+Added a StateManagement Question with zustand to start and potentially more to follow
+
+- setup with a question prompt just before the internationalization prompt
+- --zustand flag to skip the prompt
+- Adds a StateManagement folder to the project with a zustandStore.ts file to start with

cli/src/commands/create-expo-stack.ts

@@ -296,6 +296,15 @@ const command: GluegunCommand = {
           });
         }
 
+        // State Management packages
+        if (options.zustand) {
+          // Add zustand package
+          cliResults.packages.push({
+            name: 'zustand',
+            type: 'state-management'
+          });
+        }
+
         // Internalization packages
         if (options.i18next) {
           cliResults.packages.push({
@@ -354,6 +363,12 @@ const command: GluegunCommand = {
                 script += '--drawer+tabs ';
               }
             }
+
+            const stateManagementPackage = cliResults.packages.find((p) => p.type === 'state-management');
+
+            if (stateManagementPackage) {
+              script += `--${stateManagementPackage.name} `;
+            }
           } else {
             // Add the packages
             cliResults.packages.forEach((p) => {
@@ -408,6 +423,9 @@ const command: GluegunCommand = {
         const internalizationPackage = packages.find((p) => p.type === 'internationalization');
         const analyticsPackage = packages.find((p) => p.type === 'analytics');
 
+        //add the state management package if it is selected
+        const stateManagementPackage = packages.find((p) => p.type === 'state-management') || undefined;
+
         let files: string[] = [];
 
         files = configureProjectFiles(
@@ -418,7 +436,8 @@ const command: GluegunCommand = {
           analyticsPackage,
           toolbox,
           cliResults,
-          internalizationPackage
+          internalizationPackage,
+          stateManagementPackage
         );
 
         // Once all the files are defined, format and generate them
@@ -434,7 +453,8 @@ const command: GluegunCommand = {
           packageManager,
           stylingPackage,
           toolbox,
-          internalizationPackage
+          internalizationPackage,
+          stateManagementPackage
         );
 
         await printOutput(cliResults, formattedFiles, toolbox, stylingPackage);

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

@@ -67,6 +67,10 @@
         "@react-native-community/slider": "4.5.2",
       <% } %>
     <% } %>
+
+    <% if (props.stateManagementPackage?.name === "zustand") { %>
+      "zustand": "^4.5.1",
+    <% } %>
     
     <% if (props.stylingPackage?.name === "restyle") { %>
       "@shopify/restyle": "^2.4.2",

cli/src/templates/packages/zustand/store/store.ts.ejs

@@ -0,0 +1,15 @@
+import { create } from 'zustand'
+
+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 }),
+  updateBears: (newBears) => set({ bears: newBears }),
+}))

cli/src/types.ts

@@ -26,6 +26,7 @@ export const availablePackages = [
   'restyle',
   'unistyles',
   'i18next',
+  'zustand',
   'vexo-analytics'
 ] as const;
 
@@ -39,6 +40,8 @@ export type StylingSelect = 'nativewind' | 'restyle' | 'stylesheet' | 'tamagui'
 
 export type PackageManager = 'yarn' | 'npm' | 'pnpm' | 'bun';
 
+export type StateManagementSelect = 'zustand' | undefined;
+
 export type Internalization = 'i18next';
 
 export type Analytics = 'vexo-analytics';
@@ -59,7 +62,7 @@ export type SelectedComponents =
 
 export type AvailablePackages = {
   name: (typeof availablePackages)[number];
-  type: 'navigation' | 'styling' | 'authentication' | 'internationalization' | 'analytics';
+  type: 'navigation' | 'styling' | 'authentication' | 'internationalization' | 'state-management' | 'analytics';
   options?: { selectedComponents?: SelectedComponents[]; type?: NavigationTypes };
 };
 

cli/src/utilities/configureProjectFiles.ts

@@ -21,7 +21,8 @@ export function configureProjectFiles(
   analyticsPackage: AvailablePackages | undefined,
   toolbox: Toolbox,
   cliResults: CliResults,
-  internalizationPackage: AvailablePackages | undefined
+  internalizationPackage: AvailablePackages | undefined,
+  stateManagementPackage: AvailablePackages | undefined
 ): string[] {
   // Define the files common to all templates to be generated
   let baseFiles = [
@@ -349,6 +350,12 @@ export function configureProjectFiles(
     }
   }
 
+  // add state management files if needed
+  if (stateManagementPackage?.name === 'zustand') {
+    const zustandFiles = ['packages/zustand/store/store.ts.ejs'];
+    files = [...files, ...zustandFiles];
+  }
+
   // Add npmrc file if user is using pnpm
   if (packageManager === 'pnpm') {
     files.push('base/.npmrc.ejs');

cli/src/utilities/generateProjectFiles.ts

@@ -11,7 +11,8 @@ export function generateProjectFiles(
   packageManager: PackageManager,
   stylingPackage: AvailablePackages | undefined,
   toolbox: Toolbox,
-  internalizationPackage: AvailablePackages | undefined
+  internalizationPackage: AvailablePackages | undefined,
+  stateManagementPackage: AvailablePackages | undefined
 ) {
   const { projectName, packages, flags } = cliResults;
 
@@ -27,6 +28,11 @@ export function generateProjectFiles(
       target = target.replace('packages/firebase/', '');
     }
 
+    //state management
+    if (stateManagementPackage?.name === 'zustand') {
+      target = target.replace('packages/zustand/', '');
+    }
+
     target = target.replace('base/', '');
 
     if (stylingPackage?.name === 'tamagui') {
@@ -79,7 +85,8 @@ export function generateProjectFiles(
         packageManager,
         packages,
         stylingPackage,
-        internalizationPackage
+        internalizationPackage,
+        stateManagementPackage
       }
     });
 

cli/src/utilities/runCLI.ts

@@ -5,6 +5,7 @@ import { semver } from 'gluegun';
 import { bunInstallationError, defaultOptions, nativeWindUIOptions } from '../constants';
 import {
   AuthenticationSelect,
+  StateManagementSelect,
   CliResults,
   NavigationSelect,
   NavigationTypes,
@@ -327,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: [

docs/src/content/docs/en/installation.md

@@ -73,5 +73,6 @@ bun create expo-stack myapp --expo-router --nativewind --bun
 | `--tamagui`          | Use Tamagui for styling                                                        |
 | `--restyle`          | Use Restyle for styling                                                        |
 | `--stylesheet`       | Use StyleSheet for styling, used by default                                    |
+| `--zustand`          | Use Zustand for state management                                               |
 | `--i18next`          | Use i18next for internationalization                                           |
 | `-i`, `--ignite`     | Initialize an opinionated starter using Infinite Red's Ignite                  |