@dhis2/create-app 5.3.0-alpha.3 → 5.3.0-alpha.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/create-app",
-    "version": "5.3.0-alpha.3",
+    "version": "5.3.0-alpha.5",
     "description": "",
     "main": "src/index.js",
     "bin": {

package/src/index.js

@@ -42,13 +42,11 @@ const commandHandler = {
         typescript: {
             description: 'Use TypeScript or JS',
             type: 'boolean',
-            default: true,
             alias: ['ts', 'typeScript'],
         },
         template: {
             description: 'Which template to use (Basic, With React Router)',
             type: 'string',
-            default: 'basic',
         },
         packageManager: {
             description: 'Package Manager',
@@ -58,7 +56,7 @@ const commandHandler = {
     },
 }
 
-const getTemplateFile = (templateName) => {
+const getTemplateDirectory = (templateName) => {
     return templateName === 'react-router'
         ? templates.templateWithReactRouter
         : templates.templateWithList
@@ -85,48 +83,41 @@ const command = {
         }
 
         const selectedOptions = {
-            typeScript: argv.typescript,
-            packageManager: argv.packageManager ?? getPackageManager(),
-            templateName: argv.template,
+            typeScript: argv.typescript ?? true,
+            packageManager:
+                argv.packageManager ?? getPackageManager() ?? 'pnpm',
+            templateName: argv.template ?? 'basic',
         }
 
         if (!useDefauls) {
-            const packageManager = await select({
-                message: 'Select a package manager',
-                default: 'pnpm',
-                choices: [
-                    { name: 'npm', value: 'npm' },
-                    { name: 'pnpm', value: 'pnpm' },
-                    { name: 'yarn 1 (legacy)', value: 'yarn' },
-                ],
-            })
-
-            selectedOptions.packageManager = packageManager
-
-            const language = await select({
-                message: 'Select a language',
-                default: 'ts',
-                choices: [
-                    { name: 'JavaScript', value: 'js' },
-                    { name: 'TypeScript', value: 'ts' },
-                ],
-            })
-
-            selectedOptions.typeScript = language === 'ts'
-
-            const template = await select({
-                message: 'Select a template',
-                default: 'ts',
-                choices: [
-                    { name: 'Basic Template', value: 'basic' },
-                    {
-                        name: 'Template with React Router',
-                        value: 'react-router',
-                    },
-                ],
-            })
+            if (argv.typeScript === undefined) {
+                const language = await select({
+                    message: 'Select a language',
+                    default: 'ts',
+                    choices: [
+                        { name: 'JavaScript', value: 'js' },
+                        { name: 'TypeScript', value: 'ts' },
+                    ],
+                })
+
+                selectedOptions.typeScript = language === 'ts'
+            }
 
-            selectedOptions.templateName = template
+            if (argv.template === undefined) {
+                const template = await select({
+                    message: 'Select a template',
+                    default: 'ts',
+                    choices: [
+                        { name: 'Basic Template', value: 'basic' },
+                        {
+                            name: 'Template with React Router',
+                            value: 'react-router',
+                        },
+                    ],
+                })
+
+                selectedOptions.templateName = template
+            }
         }
 
         reporter.info(
@@ -167,7 +158,7 @@ const command = {
         }
 
         reporter.info('Copying template files')
-        const templateFiles = getTemplateFile(selectedOptions.templateName)
+        const templateFiles = getTemplateDirectory(selectedOptions.templateName)
         fs.copySync(templateFiles, cwd)
 
         const paths = {
@@ -177,6 +168,7 @@ const command = {
             pnpmLock: path.join(cwd, 'pnpm-lock.yaml'),
             pnpmWorkspace: path.join(cwd, 'pnpm-workspace.yaml'),
             appRootFile: path.join(cwd, 'src/App.tsx'),
+            appRootWrapperFile: path.join(cwd, 'src/AppWrapper.tsx'),
             initYarnLock: path.join(__dirname, '../templates/yarn.lock'),
             initNpmLock: path.join(__dirname, '../templates/package-lock.json'),
         }
@@ -190,6 +182,12 @@ const command = {
         // Default template is with PNPM with TypeScript - some modifications here for yarn/npm/JS
         const templateModifications = [
             [paths.package, true, (f) => f.replace('{{template-name}}', name)],
+            [
+                paths.appRootWrapperFile,
+                true,
+                (f) => f.replace('{{template-name}}', name),
+            ],
+
             // [
             //     path.join(paths.base, '.husky/pre-commit'),
             //     !pnpm,
@@ -260,14 +258,14 @@ const command = {
         // convert to JS
         if (!typeScript) {
             reporter.info('Preparing JavaScript template')
-            reporter.info(` running '${pkgManager} install'`)
+            reporter.info(`    Running '${pkgManager} install'`)
 
             await exec({
                 cmd: pkgManager,
                 args: ['install'],
                 cwd: paths.base,
             })
-            reporter.info(' convert template to JS with tsc')
+            reporter.info('    Converting template to JS with tsc')
             await exec({
                 cmd: 'npx',
                 args: [
@@ -285,7 +283,7 @@ const command = {
                 pipe: argv.debug,
             })
 
-            reporter.info(' Deleting TS files')
+            reporter.debug('    Deleting TS files')
             const filePathsToRemove = path.join(paths.base, '/src/**/*.ts[x]')
             const filesToRemove = await fg.glob(filePathsToRemove)
 

package/templates/template-ts-dataelements-react-router/src/App.module.css

@@ -4,7 +4,6 @@
     font-size: 14px;
     grid-template-columns: auto;
     grid-template-rows: auto 1fr auto;
-    overflow: auto;
 }
 
 .sidebar {
@@ -20,17 +19,9 @@
     grid-area: main;
     width: 100%;
     padding-inline-start: 10px;
-    /*height: 100%;
-    display: flex;
-    flex-direction: column;
-    font-size: 1rem;
-    max-width: 1020px;
-    margin: 0px auto;
-    padding-top: 8px; */
 }
 
 .noticeContainer {
-    /* width: 768px; */
     max-width: 340px;
 
     margin: 16px 0;
@@ -45,7 +36,6 @@
         height: 100%;
         grid-template-columns: 250px 1fr;
         grid-template-rows: 1fr auto;
-        overflow: auto;
         min-height: 1000px;
     }
 
@@ -59,3 +49,22 @@
     margin: 8px;
     margin-inline-start: 0;
 }
+
+.footer {
+    display: flex;
+    flex-direction: column;
+    margin-top: 16px;
+    align-items: center;
+    gap: 6px;
+    background-color: rgb(44, 102, 147);
+    padding: 16px;
+    color: white;
+}
+
+.footer a,
+.footer a:visited,
+.footer a:active,
+.footer a:link,
+.footer a:focus {
+    color: white;
+}

package/templates/template-ts-dataelements-react-router/src/AppWrapper.tsx

@@ -22,7 +22,19 @@ const AppWrapper = () => {
                         <Route path="/about" element={<AboutPage />} />
                     </Routes>
                 </div>
-                <div className={classes.footer}>Our App</div>
+                <div className={classes.footer}>
+                    <div>{'{{template-name}}'}</div>
+                    <div>
+                        This web application was created using{' '}
+                        <a
+                            target="_blank"
+                            rel="noreferrer"
+                            href="https://developers.dhis2.org/docs/quickstart/quickstart-web"
+                        >
+                            @dhis2/create-app
+                        </a>
+                    </div>
+                </div>
             </HashRouter>
         </div>
     )