Fix readme and warnings

Author: djhi

packages/create-react-admin/src/ProjectState.ts

@@ -21,5 +21,5 @@ export const InitialProjectConfiguration: ProjectConfiguration = {
     dataProvider: '',
     authProvider: '',
     resources: [],
-    installer: 'npm',
+    installer: '',
 };

packages/create-react-admin/src/app.tsx

@@ -42,26 +42,26 @@ const stepReducer = (
                 ...state,
                 step:
                     state.dataProvider === 'ra-data-fakerest'
-                        ? 'generate'
+                        ? 'install'
                         : 'resources',
                 authProvider: action.value,
             };
         case 'resources':
             return {
                 ...state,
-                step: 'generate',
+                step: 'install',
                 resources: action.value,
             };
-        case 'generate':
+        case 'install':
             return {
                 ...state,
-                step: 'install',
+                installer: action.value,
+                step: 'generate',
             };
-        case 'install':
+        case 'generate':
             return {
                 ...state,
-                installer: action.value,
-                step: action.value ? 'run-install' : 'finish',
+                step: state.installer ? 'run-install' : 'finish',
             };
         case 'run-install':
             return {
@@ -98,16 +98,16 @@ export default function App({ name = 'my-admin' }: Props) {
     if (state.step === 'resources') {
         return <StepResources onSubmit={handleSubmit} />;
     }
+    if (state.step === 'install') {
+        return <StepInstall onSubmit={handleSubmit} />;
+    }
     if (state.step === 'generate') {
         generateProject(state).then(messages => {
             helpMessages.current = messages;
             dispatch({});
         });
         return <Text>Generating your application...</Text>;
     }
-    if (state.step === 'install') {
-        return <StepInstall onSubmit={handleSubmit} />;
-    }
     if (state.step === 'run-install') {
         installDeps(state).then(() => {
             dispatch({});
@@ -125,16 +125,33 @@ export default function App({ name = 'my-admin' }: Props) {
             <Text>
                 To start working, run <Text bold>cd {state.name}</Text>.
             </Text>
-            <Text>
-                Start the app in development mode by running{' '}
-                <Text bold>
-                    {state.installer === 'npm' ? 'npm run' : 'yarn'} dev
+            {state.installer ? (
+                <Text>
+                    Start the app in development mode by running{' '}
+                    <Text bold>
+                        {state.installer === 'npm' ? 'npm run' : 'yarn'} dev
+                    </Text>
+                    .
                 </Text>
-                .
-            </Text>
+            ) : (
+                <Box>
+                    <Box>
+                        <Text>
+                            Install the dependencies using your favorite package
+                            manager.
+                        </Text>
+                    </Box>
+                    <Box>
+                        <Text>
+                            Run the <Text bold>dev</Text> command to start the
+                            app.
+                        </Text>
+                    </Box>
+                </Box>
+            )}
             <Box marginBottom={1}>
-                {helpMessages.current.map(line => (
-                    <Text key={line}>{line}</Text>
+                {helpMessages.current.map((line, index) => (
+                    <Text key={index}>{line}</Text>
                 ))}
             </Box>
         </>

packages/create-react-admin/src/generateProject.ts

@@ -255,7 +255,7 @@ const generateReadme = (
     const dataProviderReadme = getTemplateReadme(state.dataProvider);
     const authProviderReadme = getTemplateReadme(state.authProvider);
 
-    let readme = replaceTokens(defaultReadme, state);
+    let readme = `${defaultReadme}`;
 
     if (dataProviderReadme) {
         readme += `\n${dataProviderReadme}`;
@@ -266,7 +266,10 @@ const generateReadme = (
     }
 
     if (readme) {
-        fs.writeFileSync(path.join(projectDirectory, 'README.md'), readme);
+        fs.writeFileSync(
+            path.join(projectDirectory, 'README.md'),
+            replaceTokens(`${readme}\n`, state)
+        );
     }
 };
 
@@ -288,9 +291,32 @@ const getTemplateReadme = (template: string) => {
 };
 
 const replaceTokens = (content: string, state: ProjectConfiguration) => {
+    let installCommand;
+    let devCommand;
+    let buildCommand;
+
+    switch (state.installer) {
+        case 'npm':
+            installCommand = 'npm install';
+            devCommand = 'npm run dev';
+            buildCommand = 'npm run build';
+            break;
+        case 'yarn':
+            installCommand = 'yarn';
+            devCommand = 'yarn dev';
+            buildCommand = 'yarn build';
+            break;
+        default:
+            installCommand = 'npm install\n# or\nyarn install';
+            devCommand = 'npm run dev\n# or\nyarn dev';
+            buildCommand = 'npm run build\n# or\nyarn build';
+    }
+
     return content
         .replace(`{{name}}`, state.name)
-        .replace(`{{pkgManager}}`, state.installer);
+        .replace(`{{installCommand}}`, installCommand)
+        .replace(`{{devCommand}}`, devCommand)
+        .replace(`{{buildCommand}}`, buildCommand);
 };
 
 const replaceTokensInFile = (filePath: string, state: ProjectConfiguration) => {

packages/create-react-admin/templates/common/README.md

@@ -5,21 +5,21 @@
 Install the application dependencies by running:
 
 ```sh
-{{pkgManager}} install
+{{installCommand}}
 ```
 
 ## Development
 
 Start the application in development mode by running:
 
 ```sh
-{{pkgManager}} run dev
+{{devCommand}}
 ```
 
 ## Production
 
 Build the application in production mode by running:
 
 ```sh
-{{pkgManager}} run build
+{{buildCommand}}
 ```