zmp-cli 3.11.0-rc.2 → 3.11.0-rc.3

package/create/index.js

@@ -17,6 +17,7 @@ const generateReadme = require('./utils/generate-readme');
 const generateGitignore = require('./utils/generate-gitignore');
 const log = require('../utils/log');
 const config = require('../config');
+const initZMPUI = require('./init-zmp-ui');
 
 const waitText = chalk.gray('(Please wait, it can take a while)');
 
@@ -25,6 +26,10 @@ module.exports = async (
   logger,
   { exitOnError = true, iconFile = null } = {}
 ) => {
+  if (options.newProject && options.package === 'zmp-ui') {
+    await initZMPUI(options, logger);
+    return;
+  }
   const cwd = options.cwd || process.cwd();
   const isRunningInCwd = cwd === process.cwd();
   function errorExit(err) {

package/create/{init-zaui.js → init-zmp-ui.js}

@@ -91,16 +91,11 @@ module.exports = async (
         )} && npm install ${packageJson.dependencies.join(' ')} --save`,
         true
       );
-      await exec.promise(
-        `cd ${cwd.replace(/ /g, '\\ ')} && npm install  --save`,
-        true
-      );
     } else {
       await exec.promise(
         `npm install ${packageJson.dependencies.join(' ')} --save`,
         true
       );
-      await exec.promise(`npm install  --save`, true);
     }
   } catch (err) {
     logger.statusError('Error installing NPM Dependencies');
@@ -157,6 +152,7 @@ module.exports = async (
   // Create Project Files
   logger.statusStart('Creating project files');
   const filesToCopy = copyAssets(options, iconFile);
+  console.log(filesToCopy);
   try {
     // eslint-disable-next-line
     await Promise.all(

package/create/templates/copy-assets.js

@@ -17,7 +17,7 @@ const copyZauiAssets = require('./zaui/copy-assets');
 module.exports = (options, iconFile) => {
   const cwd = options.cwd || process.cwd();
   const {
-    zaui,
+    package,
     framework,
     theming,
     cssPreProcessor,
@@ -35,7 +35,7 @@ module.exports = (options, iconFile) => {
   if (framework === 'react-typescript') {
     toCopy.push(...copyReactTsAssets(options));
   }
-  if (zaui) {
+  if (package === 'zmp-ui') {
     toCopy.push(...copyZauiAssets(options));
   }
   if (theming.iconFonts) {

package/create/templates/generate-index.js

@@ -2,7 +2,7 @@
 const generateCoreRoot = require('./core/generate-root.js');
 
 module.exports = (options) => {
-  const { name, framework, theming, zaui } = options;
+  const { name, framework, theming, package } = options;
   const srcFolder = '/src/';
   const iconsAssetsFolder = 'static';
 
@@ -10,7 +10,7 @@ module.exports = (options) => {
   const scripts = `
   <!-- built script files will be auto injected -->
   ${
-    zaui || framework === 'react' || framework === 'vue'
+    package === 'zmp-ui' || framework === 'react' || framework === 'vue'
       ? `<script type="module" src="${srcFolder}app.js"></script>`
       : ''
   }

package/create/templates/generate-scripts.js

@@ -5,12 +5,12 @@ const generateSvelteScripts = require('./svelte/generate-scripts');
 const generateReactTsScripts = require('./react-typescript/generate-scripts');
 const generateZauiScripts = require('./zaui/generate-scripts');
 module.exports = (options) => {
-  const { framework, zaui } = options;
+  const { framework, package } = options;
   if (framework === 'core') return generateCoreScripts(options);
   if (framework === 'vue') return generateVueScripts(options);
   if (framework === 'react') return generateReactScripts(options);
   if (framework === 'svelte') return generateSvelteScripts(options);
   if (framework === 'react-typescript') return generateReactTsScripts(options);
-  if (zaui) return generateZauiScripts(options);
+  if (package === 'zmp-ui') return generateZauiScripts(options);
   return '';
 };

package/create/templates/generate-styles.js

@@ -2,25 +2,23 @@ const indent = require('../utils/indent');
 const { colorThemeCSSProperties } = require('../utils/colors');
 
 module.exports = (options) => {
-  const { template, theming, zaui } = options;
+  const { template, theming, package } = options;
   const { customColor, color, fillBars } = theming;
 
   let styles = '';
 
-  if (zaui) {
+  if (package === 'zmp-ui') {
     return `
-    *{
-      box-sizing: border-box;
+    .page {
+      padding: 16px 16px 96px 16px;
     }
-    #app{
-      width: 100%;
-      height: 100%;
-    }
-    .page{
+    
+    .section-container {
       padding: 16px;
-      min-height: 100%;
-      overflow-y: auto;
-    }
+      background: #ffffff;
+      border-radius: 8px;
+      margin-bottom: 24px;
+    }    
     `;
   }
 

package/create/templates/zaui/components/user-card.jsx

@@ -1,18 +1,16 @@
 import React from 'react';
-import { Avatar } from 'zaui';
+import { Avatar, Box, Text } from 'zmp-ui';
 
 const UserCard = ({ user }) => {
   return (
-    <div style={{ display: 'flex', width: '100%' }}>
-      <Avatar story online src={user.avatar.startsWith('http') ? user.avatar : null}>{user.avatar}</Avatar>
-      <div style={{ marginLeft: 16 }}>
-        <div style={{ marginBottom: 0, fontWeight: 'bold', fontSize: '20px' }}>{user.name}</div>
-        <div>{user.id}</div>
-      </div>
-    </div>
+    <Box flex>
+      <Avatar story='default' online src={user.avatar.startsWith('http') ? user.avatar : null}>{user.avatar}</Avatar>
+      <Box ml={4}>
+        <Text.Title>{user.name}</Text.Title>
+        <Text>{user.id}</Text>
+      </Box>
+    </Box>
   )
 };
 
-UserCard.displayName = 'zmp-user-card'
-
 export default UserCard;

package/create/templates/zaui/copy-assets.js

@@ -66,10 +66,6 @@ module.exports = (options) => {
     to: path.resolve(cwd, 'vite.config.js'),
   });
 
-  toCopy.push({
-    from: path.resolve(__dirname, 'config','index.js'),
-    to: path.resolve(cwd, 'src/config','index.js'),
-  });
 
   return toCopy;
 };

package/create/templates/zaui/generate-home-page.js

@@ -1,15 +1,6 @@
 const indent = require('../../utils/indent');
 module.exports = (options) => {
   const { name, template, theming, stateManagement } = options;
-  const { fillBars } = theming;
-
-  let description = '';
-  if (template === 'single-view' || template === 'blank') {
-    description = `
-          <p>Here is your blank ZMP app. Let's see what we have here.</p>
-    `;
-  }
-
   return indent(
     0,
     `
@@ -17,23 +8,49 @@ module.exports = (options) => {
     ${
       template === 'blank'
         ? `
+    import {
+      Page
+    } from 'zmp-ui';
     `.trim()
         : `
     import {
       List,
-    } from 'zaui';${stateManagement === 'recoil' ? `
+      Page,
+      Icon
+    } from 'zmp-ui';${stateManagement === 'recoil' ? `
     import { useRecoilValue } from 'recoil';
     import { userState } from '../state';` : ''}
+    ${template !=='blank' ?`
     import UserCard from '../components/user-card';
+    import { useNavigate } from 'react-router-dom'
+    `:''}
     `.trim()
     }
 
     const HomePage = () => {
       ${template !== 'blank' ? (stateManagement === 'recoil' ? "const user = useRecoilValue(userState);" : "const user = useStore('user');") : ''}
+      ${template !=='blank' &&   `const navigate = useNavigate();`}
       return (
-        <div name="home" className="page">
-        Hello Zalo Mini APp
+        ${template==='blank' ?`<Page name="home" className="page">
+          Hello Zalo Mini App
+        </Page> `.trim():
+        `
+        <Page name="home" className="page">
+        <div className="section-container">
+          <UserCard user={user}/> 
+        </div>
+        <div className="section-container">
+        <List >
+          <List.Item suffix={<Icon icon="zi-arrow-right"/>}>
+            <div  onClick={()=>navigate('/about')}>About</div>
+          </List.Item>
+          <List.Item suffix={<Icon icon="zi-arrow-right"/>}>
+            <div onClick={()=>navigate('/user')}>User</div>
+          </List.Item>
+        </List>
         </div>
+      </Page>`.trim()
+      }
       );
     }
     

package/create/templates/zaui/generate-root.js

@@ -1,24 +1,25 @@
 const templateIf = require('../../utils/template-if');
 const indent = require('../../utils/indent');
-const appParameters = require('../app-parameters');
-
+const { capitalize } = require('../../utils/string')
 module.exports = (options) => {
   const { template, theming, stateManagement } = options;
 
   // Views
 
-
+  const routes = []
+  if(template ==='single-view'){
+    routes.push('about','form','user')
+  }
   return indent(
     0,
     `
     import React from 'react';
-    import {BrowserRouter, Routes, Route} from 'react-router-dom'
+    import { Route} from 'react-router-dom'
     import HomePage from '../pages';
-    import config from '../config';
-
+    ${routes.length && routes.map((route) => `    import ${capitalize(route)} from '../pages/${route}';\n`).join('').trim()}
     ${['blank', 'single-view'].indexOf(template) >= 0
       && `
-    import { App } from 'zaui';
+    import { App, ZMPRouter, AnimationRoutes } from 'zmp-ui';
     `.trim()
     }
     ${templateIf(stateManagement === 'recoil', () => `import { RecoilRoot } from 'recoil';`,'')}
@@ -29,11 +30,16 @@ module.exports = (options) => {
       return (${stateManagement === 'recoil' ? `
         <RecoilRoot>` : ''}
         ${indent(stateManagement === 'recoil' ? 2 : 0, `<App ${theming.darkTheme ? 'themeDark' : ''}>`)}
-          <BrowserRouter basename={config.basePath}>
-            <Routes>
+          <ZMPRouter>
+            <AnimationRoutes>
               <Route path="/" element={<HomePage></HomePage>}></Route>
-            </Routes>
-          </BrowserRouter>
+              ${routes.length && routes.map((route) =>{
+                const pageName = capitalize(route)
+                return `              <Route path="/${route}" element={<${pageName}></${pageName}>}></Route>\n`
+              }).join('').trim()
+            }
+            </AnimationRoutes>
+          </ZMPRouter>
         ${indent(stateManagement === 'recoil' ? 2 : 0, `</App>`)}${stateManagement === 'recoil' ? `
         </RecoilRoot>` : ''}
       );

package/create/templates/zaui/generate-scripts.js

@@ -2,7 +2,7 @@ const indent = require('../../utils/indent');
 const stylesExtension = require('../../utils/styles-extension');
 
 module.exports = (options) => {
-  const { cssPreProcessor, theming, customBuild, includeTailwind } = options;
+  const { cssPreProcessor,  includeTailwind } = options;
 
   let scripts = '';
 
@@ -17,7 +17,7 @@ module.exports = (options) => {
     // Import tailwind styles
     import './css/tailwind.css';` : ''}
 
-    import 'zaui/zaui.css'; 
+    import 'zmp-ui/zaui.css'; 
 
     import './css/app.${stylesExtension(cssPreProcessor)}';
 

package/create/templates/zaui/pages/about.js

@@ -5,14 +5,18 @@ module.exports = (options) => {
   return indent(
     0,
     `
-    import React from 'react'
-    import { Sheet, Button } from 'zaui';
+    import React from "react";
+    import { Sheet, Button, Page, Text } from "zmp-ui";
+    import { useNavigate } from 'react-router-dom'
 
     const AboutPage = (props) => {
       const [actionSheetOpened, setActionSheetOpened] = React.useState(false);
-
+      const navigate = useNavigate()
       return (
-        <div name="page">
+        <Page className="page">
+          <div className="section-container">
+            <Text>This mini app was generated by zmp-cli</Text>
+          </div>
           <div>
             <Button
               type="secondary"
@@ -22,26 +26,42 @@ module.exports = (options) => {
               Back
             </Button>
           </div>
-          <Sheet
+          <Sheet.Actions
             visible={actionSheetOpened}
             onClose={() => setActionSheetOpened(false)}
             id="actions-two-groups"
-            title="Bottom Sheet Modal"
-          >
-          <div style={{padding: '16px'}}>
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's s
-          </div>
-          <div style={{padding: '16px'}}>
-            <Button onClick={ () => setActionSheetOpened(false)}>
-              Cancel
-            </Buton>
-          </div>
-          </Sheet>
-        </div>
-      )
-    }
+            actions={[
+              [
+                {
+                  text: "Go back",
+                  onClick: () => {
+                    navigate(-1);
+                  },
+                },
+                {
+                  text: "Action 1",
+                  close: true,
+                },
+                {
+                  text: "Action 2",
+                  close: true,
+                },
+              ],
+              [
+                {
+                  text: "Close",
+                  close: true,
+                  danger: true,
+                },
+              ],
+            ]}
+          ></Sheet.Actions>
+        </Page>
+      );
+    };
 
     export default AboutPage;
+
   `
   ).trim();
 };

package/create/templates/zaui/pages/form.js

@@ -1,34 +1,32 @@
 const indent = require('../../../utils/indent');
 
 module.exports = (options) => {
-  const { template } = options
     return indent(
       0,
       `
       import React from 'react';
-      import { Button,Input } from 'zaui';
+      import { Button,Input, Box, Page } from 'zmp-ui';
       import { useRecoilState } from 'recoil';
       import { userState } from '../state';
-
+      
       const FormPage = () => {
         const [user, setUser] = useRecoilState(userState)
-
+      
         const [form, setForm] = React.useState({ ...user });
-
+      
         const handleChangeInput = (field, value) => {
           setForm({ ...form, [field]: value })
         }
-
+      
         const handleSubmit = () => {
           alert('saved');
           setUser(form);
-          toast.current.open()
         }
-
+      
         return (
-          <div className="page">
-            <div>
-              <div >
+          <Page className="page">
+            <div className='section-container'>
+              <Box >
                 <Input
                   id="name"
                   label="Name"
@@ -44,17 +42,17 @@ module.exports = (options) => {
                   value={form?.avatar}
                   onChange={(e) => handleChangeInput('avatar', e.target.value)}
                 />
-                <div >
+                <Box mt={4}>
                   <Button size="full-width" type="primary" onClick={handleSubmit}>
                     Submit
                   </Button>
                 </Box>
-              </div>
+              </Box>
             </div>
-          </div>
+          </Page>
         )
       }
-
+      
       export default FormPage;
       `
     ).trim();

package/create/templates/zaui/pages/user.js

@@ -2,43 +2,54 @@ const indent = require('../../../utils/indent');
 
 module.exports = (options) => {
   const { template, stateManagement } = options;
-  const hideNavBar =
-    template === 'tabs'
-      ? `
-          onPageBeforeIn={()=>{
-            //hide navbar
-            zmp.toolbar.hide('#app-tab-bar')
-          }}`
-      : '';
-  const modules = ['Avatar', 'List'];
+  const modules = ['Avatar', 'List', 'Page', 'Box', 'Text'];
 
   return indent(
     0,
     `
-    import React from 'react'
-    import { ${modules.join(', ')} } from 'zaui'
-    '${stateManagement === 'recoil' ? `
-    import { useRecoilValue } from 'recoil';
-    import { userState } from '../state';` : ''}
+    import React from "react";
+    import { Avatar, List, Text, Box, Page, Button, Icon } from "zmp-ui";
+    import {useNavigate} from 'react-router-dom';
+    import { useRecoilValue } from "recoil";
+    import { userState } from "../state";
 
     const UserPage = () => {
-      ${stateManagement === 'recoil' ? 'const user = useRecoilValue(userState);' : `const user = {}`}
-
+      const user = useRecoilValue(userState);
+      const navigate = useNavigate()
       return (
-        <div 
-         className="page"
-        >
-          <div style={{ textAlign: 'center', marginTop: 32 }}>
-            <Avatar story online src={user.avatar.startsWith('http') ? user.avatar : null}>{user.avatar}</Avatar>
-            <h3 style={{ marginTop: 8 }}>{user.name}</h3>
-          </div>
-          <List>
-            <List.Item title="Display name" subtitle={user.name} />
-            <List.Item title="ID" subtitle={user.id} />
-          </List>
-        </div>
-      )
-    }
+        <Page className="page">
+          <Box flex flexDirection="column" justifyContent="center" alignItems="center">
+            <Box>
+              <Avatar
+                story
+                size={96}
+                online
+                src={user.avatar.startsWith("http") ? user.avatar : null}
+              >
+                {user.avatar}
+              </Avatar>
+            </Box>
+            <Box flex flexDirection="row" alignItems="center" ml={8}>
+              <Box>
+              <Text.Title >{user.name}</Text.Title>
+              </Box>
+              <Box ml={4}>
+                <Button onClick={()=>{navigate('/form')}}  size='small' icon={<Icon icon="zi-edit"/>}/>
+              </Box>
+            </Box>
+          </Box>
+          <Box m={0} p={0} mt={4}>
+            <div className="section-container">
+              <List>
+                <List.Item title="Display name" subTitle={user.name} />
+                <List.Item title="ID" subTitle={user.id} />
+              </List>
+            </div>
+          </Box>
+          
+        </Page>
+      );
+    };
 
     export default UserPage;
   `

package/create/utils/generate-package-json.js

@@ -4,15 +4,16 @@ const { generateTailWindScripts } = require('./generate-npm-scripts');
 module.exports = function generatePackageJson(options) {
   const {
     name,
+    package,
     framework,
     cssPreProcessor,
     includeTailwind,
     stateManagement,
-    zaui,
   } = options;
 
   // Dependencies
-  const dependencies = zaui ? [] : ['zmp-framework', 'zmp-sdk', 'swiper'];
+  const dependencies =
+    package === 'zmp-ui' ? ['zmp-ui'] : ['zmp-framework', 'zmp-sdk', 'swiper'];
   const dependenciesVue = ['vue@3', 'zmp-framework'];
   const dependenciesReact = ['react', 'react-dom', 'prop-types'];
   const dependenciesReactTs = ['@types/react', '@types/react-dom'];
@@ -67,8 +68,8 @@ module.exports = function generatePackageJson(options) {
       ...(includeTailwind ? tailwindDependencies : [])
     );
 
-  if (zaui) {
-    dependencies.push('react-router-dom', 'recoil');
+  if (package === 'zmp-ui') {
+    dependencies.push('recoil');
     devDependencies.push(
       ...[devDependenciesReact],
       ...(includeTailwind ? tailwindDependencies : [])
@@ -112,13 +113,7 @@ module.exports = function generatePackageJson(options) {
     "Samsung >= 5"
   ],
   "scripts" : ${JSON.stringify(scripts)},
-  "dependencies": {
-    ${
-      zaui
-        ? `"zaui": "https://stc-zmp.zadn.vn/zaui/zaui-1.0.0-alpha.1.tgz"`
-        : ''
-    }
-  },
+  "dependencies": {},
   "devDependencies": {}
 }
 `.trim();

package/create/utils/get-options.js

@@ -27,11 +27,27 @@ const questions = [
       });
     },
   },
+  {
+    type: 'list',
+    name: 'package',
+    when: (opts) => opts.newProject,
+    message: 'Choose an UI library / UI framework:',
+    choices: [
+      {
+        name: 'zmp-framework',
+        value: 'zmp-framework',
+      },
+      {
+        name: 'zmp-ui (beta)',
+        value: 'zmp-ui',
+      },
+    ],
+  },
   // Framework
   {
     type: 'list',
     name: 'framework',
-    when: (opts) => opts.newProject,
+    when: (opts) => opts.package == 'zmp-framework',
     message: 'What type of framework do you prefer?',
     choices: [
       {
@@ -53,10 +69,28 @@ const questions = [
       },
     ],
   },
+  {
+    type: 'list',
+    name: 'language',
+    when: (opts) => opts.package == 'zmp-ui',
+    message: 'What language do you prefer?',
+    choices: [
+      {
+        name: 'ReactJS',
+        value: 'react',
+      },
+      {
+        name: 'React (TypeScript)',
+        value: 'typescript',
+        disabled: true,
+      },
+    ],
+  },
   {
     type: 'list',
     name: 'useUIKits',
-    when: (opts) => opts.newProject && opts.framework !== 'vue',
+    when: (opts) =>
+      opts.package === 'zmp-framework' && opts.framework !== 'vue',
     message: 'Do you want to use Zalo UI kits style?',
     default: true,
     choices: [
@@ -70,13 +104,15 @@ const questions = [
       },
     ],
   },
-
   // Template
   {
     type: 'list',
     name: 'template',
     when: (opts) =>
-      opts.newProject && opts.useUIKits && opts.framework !== 'vue',
+      opts.newProject &&
+      opts.package === 'zmp-framework' &&
+      opts.useUIKits &&
+      opts.framework !== 'vue',
     message: 'Choose starter template:',
     choices: [
       {
@@ -98,7 +134,10 @@ const questions = [
     type: 'list',
     name: 'template',
     when: (opts) =>
-      opts.newProject && !opts.useUIKits && opts.framework !== 'vue',
+      opts.newProject &&
+      opts.package === 'zmp-framework' &&
+      !opts.useUIKits &&
+      opts.framework !== 'vue',
     message: 'Choose starter template:',
     choices: [
       {
@@ -132,12 +171,28 @@ const questions = [
       },
     ],
   },
-
+  // Template
+  {
+    type: 'list',
+    name: 'template',
+    when: (opts) => opts.package === 'zmp-ui',
+    message: 'Choose starter template:',
+    choices: [
+      {
+        name: 'Blank',
+        value: 'blank',
+      },
+      {
+        name: 'Single View',
+        value: 'single-view',
+      },
+    ],
+  },
   // Color
   {
     type: 'list',
     name: 'themingCustomColor',
-    when: (opts) => opts.newProject,
+    when: (opts) => opts.newProject && opts.package !== 'zmp-ui',
     message: 'Do you want to specify custom theme color?',
     choices: [
       {
@@ -169,7 +224,7 @@ const questions = [
   {
     type: 'list',
     name: 'themingIconFonts',
-    when: (opts) => opts.newProject,
+    when: (opts) => opts.newProject && opts.package !== 'zmp-ui',
     message: 'Do you want to include ZMP Icons and Material Icons icon fonts?',
     default: true,
     choices: [
@@ -238,126 +293,9 @@ const questions = [
     ],
   },
 ];
-const zauiQuestions = [
-  {
-    type: 'list',
-    name: 'newProject',
-    message: 'What action you want to do?',
-    choices: [
-      { name: 'Create a new ZMP project', value: true },
-      { name: 'Using ZMP to deploy only', value: false },
-    ],
-  },
-  {
-    type: 'input',
-    name: 'name',
-    message: 'App (project) name:',
-    default: 'My App',
-    validate(input) {
-      return new Promise((resolve, reject) => {
-        if (!input) reject(new Error('App name is required'));
-        else resolve(true);
-      });
-    },
-  },
-  // Framework
-  {
-    type: 'list',
-    name: 'zaui',
-    when: (opts) => opts.newProject,
-    message: 'What type of framework do you prefer?',
-    choices: [
-      {
-        name: 'ZMP with React',
-        value: 'react',
-      },
-      {
-        name: 'ZMP with React (TypeScript)',
-        value: 'react-typescript',
-        disabled: true,
-      },
-    ],
-  },
 
-  // Template
-  {
-    type: 'list',
-    name: 'template',
-    when: (opts) => opts.newProject,
-    message: 'Choose starter template:',
-    choices: [
-      {
-        name: 'Blank',
-        value: 'blank',
-      },
-      {
-        name: 'Single View',
-        value: 'single-view',
-      },
-    ],
-  },
-  {
-    type: 'list',
-    name: 'cssPreProcessor',
-    when: (opts) => opts.newProject,
-    message: 'Do you want to setup CSS Pre-Processor',
-    default: false,
-    choices: [
-      {
-        name: 'No, i am good with CSS',
-        value: false,
-      },
-      {
-        name: 'Less',
-        value: 'less',
-      },
-      {
-        name: 'SCSS (SASS)',
-        value: 'scss',
-      },
-      {
-        name: 'Stylus',
-        value: 'stylus',
-      },
-    ],
-  },
-  {
-    type: 'list',
-    name: 'moreOptions',
-    when: (opts) => opts.newProject,
-    message: `More Options?\n${moreOptionsText}`,
-    default: false,
-    choices: [
-      {
-        name: 'No, I want to complete initializing process now',
-        value: false,
-      },
-      {
-        name: 'Yes, I want to get more options',
-        value: true,
-      },
-    ],
-  },
-  {
-    type: 'list',
-    name: 'includeTailwind',
-    when: (opts) => opts.moreOptions,
-    message: 'Do you want to include Tailwind CSS?',
-    default: true,
-    choices: [
-      {
-        name: 'Yes, I want to iclude Tailwind CSS',
-        value: true,
-      },
-      {
-        name: 'No',
-        value: false,
-      },
-    ],
-  },
-];
-module.exports = function getOptions(zaui = false) {
-  const listQuestion = zaui ? zauiQuestions : questions;
+module.exports = function getOptions() {
+  const listQuestion = questions;
   return inquirer.prompt(listQuestion).then((options) => {
     options.theming = {
       customColor: options.themingCustomColor,
@@ -375,7 +313,7 @@ module.exports = function getOptions(zaui = false) {
     if (!options.stateManagement) {
       options.stateManagement = 'store';
     }
-    if (options.zaui) {
+    if (options.package === 'zmp-ui') {
       options.stateManagement = 'recoil';
     }
     delete options.themingCustomColor;

package/create/utils/string.js

@@ -0,0 +1,13 @@
+const capitalize = (string) => {
+  if (!string) {
+    return '';
+  }
+  const words = string
+    .split(/[,.\-_\s]/)
+    .map((word) => word[0].toUpperCase() + word.substring(1));
+
+  return words.join('');
+};
+module.exports = {
+  capitalize,
+};

package/index.js

@@ -25,7 +25,6 @@ const os = require('os');
 // const server = require('./ui/server');
 const pkg = require('./package.json');
 const config = require('./config');
-const createAppUsingZaui = require('./create/init-zaui');
 
 const cwd = process.cwd();
 
@@ -82,29 +81,6 @@ program
     process.exit(0);
   });
 
-program
-  .version(pkg.version)
-  .usage('<command> [options]')
-  .command('init-zaui')
-  .option('--skipUpdate', 'Skip checking for update of zmp-cli')
-  .description('Init ZMP project using Zaui UI library')
-  .action(async (options) => {
-    if (!options.skipUpdate) await checkUpdate();
-
-    const currentProject = getCurrentProject(cwd);
-    if (currentProject) {
-      log.text(
-        `${logSymbols.error} ZMP project already set up in current directory`
-      );
-      process.exit(1);
-    }
-    const optsLogin = await getLoginOptions();
-    await loginApp({ cwd, ...optsLogin }, logger);
-    const opts = await getOptions(true);
-    await createAppUsingZaui({ cwd, ...opts }, logger);
-    process.exit(0);
-  });
-
 program
   .usage('<command> [options]')
   .command('login')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zmp-cli",
-  "version": "3.11.0-rc.2",
+  "version": "3.11.0-rc.3",
   "description": "ZMP command line utility (CLI)",
   "main": "index.js",
   "bin": {

package/create/templates/zaui/config/index.js

@@ -1,10 +0,0 @@
-const 	appId = window.APP_ID
-const env = import.meta.env.MODE
-
-const basePath = env === 'development' ? '' : `/zapps/${appId}`
-
-export default {
-	appId,
-	env,
-	basePath
-}