zmp-cli 3.11.4 → 3.12.0-rc.1

package/create/index.js

@@ -220,7 +220,7 @@ ${chalk.bold(logSymbols.success)} ${chalk.bold('Done!')} 💪
 
 ${chalk.bold(logSymbols.info)} ${chalk.bold('Next steps:')}
   ${npmScripts.join('\n  ')}
-  - 📖 Visit documentation at ${chalk.bold('https://zmp.io/docs/')}
+  - 📖 Visit documentation at ${chalk.bold('https://mini.zalo.me/')}
   - 📖 Check ${chalk.bold(
     'README.md'
   )} in project root folder with further instructions

package/create/init-zmp-ui.js

@@ -206,7 +206,7 @@ ${chalk.bold(logSymbols.success)} ${chalk.bold('Done!')} 💪
 
 ${chalk.bold(logSymbols.info)} ${chalk.bold('Next steps:')}
   ${npmScripts.join('\n  ')}
-  - 📖 Visit documentation at ${chalk.bold('https://zmp.io/docs/')}
+  - 📖 Visit documentation at ${chalk.bold('https://mini.zalo.me/')}
   - 📖 Check ${chalk.bold(
     'README.md'
   )} in project root folder with further instructions

package/create/templates/copy-assets.js

@@ -1,19 +1,16 @@
 const path = require('path');
 const fse = require('../../utils/fs-extra');
 const stylesExtension = require('../utils/styles-extension');
-const copyCoreAssets = require('./core/copy-assets');
 const copyVueAssets = require('./vue/copy-assets');
 const copyReactAssets = require('./react/copy-assets');
-const copySvelteAssets = require('./svelte/copy-assets');
 const copyReactTsAssets = require('./react-typescript/copy-assets');
 const generateIndex = require('./generate-index');
 const generateStyles = require('./generate-styles');
 const generateScripts = require('./generate-scripts');
-const generateRoutes = require('./generate-routes');
-const generateManifest = require('./generate-manifest');
-const generateServiceWorker = require('./generate-service-worker');
 const generateZMPCustom = require('./generate-zmp-custom');
 const copyZauiAssets = require('./zaui/copy-assets');
+const { projectFramework } = require('../../utils/constants');
+
 module.exports = (options, iconFile) => {
   const cwd = options.cwd || process.cwd();
   const {
@@ -28,14 +25,15 @@ module.exports = (options, iconFile) => {
   const srcFolder = 'src';
 
   const toCopy = [];
-  if (framework === 'core') toCopy.push(...copyCoreAssets(options));
-  if (framework === 'vue') toCopy.push(...copyVueAssets(options));
-  if (framework === 'react') toCopy.push(...copyReactAssets(options));
-  if (framework === 'svelte') toCopy.push(...copySvelteAssets(options));
-  if (framework === 'react-typescript') {
-    toCopy.push(...copyReactTsAssets(options));
-  }
-  if (package === 'zmp-ui') {
+  if (package !== 'zmp-ui') {
+    if (framework === projectFramework.VUE)
+      toCopy.push(...copyVueAssets(options));
+    if (framework === projectFramework.REACT)
+      toCopy.push(...copyReactAssets(options));
+    if (framework === projectFramework.REACT_TYPESCRIPT) {
+      toCopy.push(...copyReactTsAssets(options));
+    }
+  } else {
     toCopy.push(...copyZauiAssets(options));
   }
   if (theming.iconFonts) {

package/create/templates/generate-index.js

@@ -1,8 +1,9 @@
 /* eslint curly: off */
+const { projectFramework } = require('../../utils/constants');
 const generateCoreRoot = require('./core/generate-root.js');
 
 module.exports = (options) => {
-  const { name, framework, theming, package } = options;
+  const { name, framework, theming } = options;
   const srcFolder = '/src/';
   const iconsAssetsFolder = 'static';
 
@@ -10,12 +11,12 @@ module.exports = (options) => {
   const scripts = `
   <!-- built script files will be auto injected -->
   ${
-    package === 'zmp-ui' || framework === 'react' || framework === 'vue'
+    framework === projectFramework.REACT || framework === projectFramework.VUE
       ? `<script type="module" src="${srcFolder}app.js"></script>`
       : ''
   }
   ${
-    framework === 'react-typescript'
+    framework === projectFramework.REACT_TYPESCRIPT
       ? `<script type="module" src="${srcFolder}app.ts"></script>`
       : ''
   }

package/create/templates/generate-scripts.js

@@ -6,11 +6,11 @@ const generateReactTsScripts = require('./react-typescript/generate-scripts');
 const generateZauiScripts = require('./zaui/generate-scripts');
 module.exports = (options) => {
   const { framework, package } = options;
+  if (package === 'zmp-ui') return generateZauiScripts(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 (package === 'zmp-ui') return generateZauiScripts(options);
   return '';
 };

package/create/templates/zaui/_tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "target": "es6", 
+    "module": "esnext", 
+    "noImplicitAny": false,
+    "preserveConstEnums": true,
+    "jsx": "react", 
+    "lib": ["dom", "es5", "es6", "es7", "es2017"],
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "allowJs": true,
+    "skipLibCheck": true, 
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": false,
+    "strict": true,
+    "strictFunctionTypes": false,
+    "pretty": true,
+    "removeComments": true,
+    "sourceMap": true,
+    "resolveJsonModule": true
+  },
+  "exclude": ["node_modules"],
+  "include": ["src"]
+}

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

@@ -2,15 +2,20 @@ const path = require('path');
 const generateHomePage = require('./generate-home-page');
 const generateRoot = require('./generate-root');
 const generateRecoil = require('../generate-recoil');
+const generateUserCard = require('./generate-user-card');
 const copyPages = require('./pages');
+const { projectFramework } = require('../../../utils/constants');
+const fse = require('../../../utils/fs-extra');
 
 module.exports = (options) => {
   const cwd = options.cwd || process.cwd();
-  const { template, stateManagement } = options;
+  const { template, stateManagement, framework } = options;
   const toCopy = [];
 
   // Copy Pages
 
+  const ext = framework === projectFramework.REACT_TYPESCRIPT ?'tsx': 'jsx'
+
   let pages = [];
   if (template !== 'blank')
     pages.push(
@@ -23,7 +28,7 @@ module.exports = (options) => {
 
 
   pages.forEach(({ fileName, content }) => {
-    const dest = path.resolve(cwd, 'src', 'pages', `${fileName}.jsx`);
+    const dest = path.resolve(cwd, 'src', 'pages', `${fileName}.${ext}`);
     toCopy.push({
       content: copyPages[content](options),
       to: dest,
@@ -33,39 +38,53 @@ module.exports = (options) => {
 
   toCopy.push({
     content: generateHomePage(options),
-    to: path.resolve(cwd, 'src', 'pages', 'index.jsx'),
+    to: path.resolve(cwd, 'src', 'pages', `index.${ext}`),
   });
 
-  // Copy compoents
-  const components = [
-    ...(template !== 'blank' ? ['user-card'] : []),
-  ];
-  components.forEach((name) => {
-    const src = path.resolve(__dirname, 'components', `${name}.jsx`);
-    const dest = path.resolve(cwd, 'src', 'components', `${name}.jsx`);
+  if(template !== 'blank') {
     toCopy.push({
-      from: src,
-      to: dest,
-    });
-  });
+      content: generateUserCard(options),
+      to: path.resolve(cwd, 'src','components', `user-card.${ext}`)
+    })
+  }
+
 
   toCopy.push({
     content: generateRoot(options),
-    to: path.resolve(cwd, 'src', 'components', 'app.jsx'),
+    to: path.resolve(cwd, 'src', 'components', `app.${ext}`),
   });
 
-  if (stateManagement === 'recoil') {
-    toCopy.push({
-      content: generateRecoil(options),
-      to: path.resolve(cwd, 'src', 'state.js'),
-    });
-  } 
+  if(framework === projectFramework.REACT_TYPESCRIPT){
+    if (stateManagement === 'recoil') {
+      toCopy.push({
+        content: generateRecoil(options),
+        to: path.resolve(cwd, 'src', 'state.ts'),
+      });
+    } 
+
+  
+  }else {
+    if (stateManagement === 'recoil') {
+      toCopy.push({
+        content: generateRecoil(options),
+        to: path.resolve(cwd, 'src', 'state.js'),
+      });
+    } 
+  
+  }
+  const isTs = framework === projectFramework.REACT_TYPESCRIPT
 
   toCopy.push({
-    from: path.resolve(__dirname, 'vite.config.js'),
-    to: path.resolve(cwd, 'vite.config.js'),
+    content: fse.readFileSync(path.resolve(__dirname, 'vite.config.js'),'utf8'),
+    to: path.resolve(cwd, `vite.config.${isTs ? 'ts':'js'}`),
   });
 
+  if(framework === projectFramework.REACT_TYPESCRIPT){
+    toCopy.push({
+      from: path.resolve(__dirname, '_tsconfig.json'),
+      to: path.resolve(cwd, 'tsconfig.json')
+    })
+  }
 
   return toCopy;
 };

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

@@ -1,6 +1,66 @@
+const { projectFramework } = require('../../../utils/constants');
 const indent = require('../../utils/indent');
 module.exports = (options) => {
-  const { name, template, theming, stateManagement } = options;
+  const { name, template, framework, stateManagement } = options;
+  if(framework === projectFramework.REACT_TYPESCRIPT){
+    return indent(
+      0,
+      `
+      import React from 'react';
+      ${
+        template === 'blank'
+          ? `
+      import {
+        Page
+      } from 'zmp-ui';
+      `.trim()
+          : `
+      import {
+        List,
+        Page,
+        Icon
+      } from 'zmp-ui';${stateManagement === 'recoil' ? `
+      import { useRecoilValue } from 'recoil';
+      import { userInfo } from "zmp-sdk";
+      import { userState } from '../state';` : ''}
+      ${template !=='blank' ?`
+      import UserCard from '../components/user-card';
+      import { useNavigate } from 'react-router-dom'
+      `:''}
+      `.trim()
+      }
+  
+      const HomePage:React.FunctionComponent = () => {
+        ${template !== 'blank' ? (stateManagement === 'recoil' ? "const user = useRecoilValue<userInfo>(userState);" : "const user = useStore('user');") : ''}
+        ${template !=='blank' ?   `const navigate = useNavigate()`:''}
+        return (
+          ${template==='blank' ?`<Page className="page">
+            Hello Zalo Mini App
+          </Page> `.trim():
+          `
+          <Page  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()
+        }
+        );
+      }
+      
+      export default HomePage;
+    `
+    ).trim(); 
+  }
   return indent(
     0,
     `
@@ -29,13 +89,13 @@ module.exports = (options) => {
 
     const HomePage = () => {
       ${template !== 'blank' ? (stateManagement === 'recoil' ? "const user = useRecoilValue(userState);" : "const user = useStore('user');") : ''}
-      ${template !=='blank' &&   `const navigate = useNavigate();`}
+      ${template !=='blank' ?   `const navigate = useNavigate()`:''}
       return (
-        ${template==='blank' ?`<Page name="home" className="page">
+        ${template==='blank' ?`<Page className="page">
           Hello Zalo Mini App
         </Page> `.trim():
         `
-        <Page name="home" className="page">
+        <Page className="page">
         <div className="section-container">
           <UserCard user={user}/> 
         </div>

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

@@ -15,31 +15,33 @@ module.exports = (options) => {
     `
     import React from 'react';
     import { Route} from 'react-router-dom'
-    import HomePage from '../pages';
-    ${routes.length && routes.map((route) => `    import ${capitalize(route)} from '../pages/${route}';\n`).join('').trim()}
     ${['blank', 'single-view'].indexOf(template) >= 0
-      && `
-    import { App, ZMPRouter, AnimationRoutes } from 'zmp-ui';
-    `.trim()
-    }
+    ? `
+    import { App, ZMPRouter, AnimationRoutes, SnackbarProvider } from 'zmp-ui';
+    `.trim(): ''
+    } 
     ${templateIf(stateManagement === 'recoil', () => `import { RecoilRoot } from 'recoil';`,'')}
+    import HomePage from '../pages';
+    ${routes.length>0 ? routes.map((route) => `    import ${capitalize(route)} from '../pages/${route}';\n`).join('').trim():''}
 
-    const MyApp = () => {
 
+    const MyApp = () => {
       ${`
       return (${stateManagement === 'recoil' ? `
         <RecoilRoot>` : ''}
         ${indent(stateManagement === 'recoil' ? 2 : 0, `<App ${theming.darkTheme ? 'themeDark' : ''}>`)}
-          <ZMPRouter>
-            <AnimationRoutes>
-              <Route path="/" element={<HomePage></HomePage>}></Route>
-              ${routes.length && routes.map((route) =>{
-                const pageName = capitalize(route)
-                return `              <Route path="/${route}" element={<${pageName}></${pageName}>}></Route>\n`
-              }).join('').trim()
-            }
-            </AnimationRoutes>
-          </ZMPRouter>
+          <SnackbarProvider>
+            <ZMPRouter>
+              <AnimationRoutes>
+                <Route path="/" element={<HomePage></HomePage>}></Route>
+                ${routes.length>0 ? routes.map((route) =>{
+                  const pageName = capitalize(route)
+                  return `              <Route path="/${route}" element={<${pageName}></${pageName}>}></Route>\n`
+                }).join('').trim(): ''
+              }
+              </AnimationRoutes>
+            </ZMPRouter>
+          </SnackbarProvider>
         ${indent(stateManagement === 'recoil' ? 2 : 0, `</App>`)}${stateManagement === 'recoil' ? `
         </RecoilRoot>` : ''}
       );

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

@@ -22,7 +22,7 @@ module.exports = (options) => {
     import './css/app.${stylesExtension(cssPreProcessor)}';
 
     // Import App Component
-    import App from './components/app.jsx';
+    import App from './components/app';
     import appConfig from '../app-config.json';
 
     if (!window.APP_CONFIG) {

package/create/templates/zaui/generate-user-card.js

@@ -0,0 +1,55 @@
+const indent = require('../../utils/indent');
+const {projectFramework} = require('../../../utils/constants')
+// eslint-disable-next-line no-unused-vars
+module.exports = (options) => {
+  const {framework} = options
+  if(framework === projectFramework.REACT_TYPESCRIPT){
+    return  indent(
+      0,
+      `
+  import React from 'react';
+  import { Avatar, Box, Text } from 'zmp-ui';
+  import { userInfo } from 'zmp-sdk';
+  
+  interface UserProps{
+    user: userInfo
+  }
+  
+  const UserCard: React.FunctionComponent<UserProps> = ({ user }) => {
+    return (
+      <Box flex>
+        <Avatar story='default' online src={user.avatar.startsWith('http') ? user.avatar : undefined}>{user.avatar}</Avatar>
+        <Box ml={4}>
+          <Text.Title>{user.name}</Text.Title>
+          <Text>{user.id}</Text>
+        </Box>
+      </Box>
+    )
+  };
+  
+  export default UserCard;
+    `
+    ).trim(); 
+  }
+  return indent(
+    0,
+    `
+  import React from 'react';
+  import { Avatar, Box, Text } from 'zmp-ui';
+
+  const UserCard = ({ user }) => {
+    return (
+      <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>
+    )
+  };
+
+  export default UserCard;    
+  `
+  ).trim();
+};

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

@@ -1,7 +1,72 @@
 const indent = require('../../../utils/indent');
+const {projectFramework} = require('../../../../utils/constants')
 
 // eslint-disable-next-line no-unused-vars
 module.exports = (options) => {
+  const {framework} = options
+
+  if(framework === projectFramework.REACT_TYPESCRIPT){
+    return indent(
+      0,
+      `
+  import React from "react";
+  import { Sheet, Button, Page, Text } from "zmp-ui";
+  import { useNavigate } from 'react-router-dom'
+  
+  const AboutPage: React.FunctionComponent = (props) => {
+    const [actionSheetOpened, setActionSheetOpened] = React.useState(false);
+    const navigate = useNavigate()
+    return (
+      <Page className="page">
+        <div className="section-container">
+          <Text>This mini app was generated by zmp-cli</Text>
+        </div>
+        <div>
+          <Button
+            variant='secondary'
+            fullWidth
+            onClick={() => setActionSheetOpened(true)}
+          >
+            Back
+          </Button>
+        </div>
+        <Sheet.Actions
+          visible={actionSheetOpened}
+          onClose={() => setActionSheetOpened(false)}
+          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();
+  }
   return indent(
     0,
     `
@@ -18,18 +83,17 @@ module.exports = (options) => {
             <Text>This mini app was generated by zmp-cli</Text>
           </div>
           <div>
-            <Button
-              type="secondary"
-              size="full-width"
-              onClick={() => setActionSheetOpened(true)}
-            >
-              Back
-            </Button>
+          <Button
+            variant='secondary'
+            fullWidth
+            onClick={() => setActionSheetOpened(true)}
+          >
+            Back
+          </Button>
           </div>
           <Sheet.Actions
             visible={actionSheetOpened}
             onClose={() => setActionSheetOpened(false)}
-            id="actions-two-groups"
             actions={[
               [
                 {

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

@@ -1,25 +1,88 @@
 const indent = require('../../../utils/indent');
+const {projectFramework} = require('../../../../utils/constants');
 
 module.exports = (options) => {
+  const { framework } = options
+
+  if(framework === projectFramework.REACT_TYPESCRIPT){
+    return indent(
+      0,
+      `
+  import React from 'react';
+  import { Button, Input, Box, Page, useSnackbar } from 'zmp-ui';
+  import { useRecoilState } from 'recoil';
+  import { userInfo } from 'zmp-sdk';
+  import { userState } from '../state';
+  
+  type UserForm = Omit<userInfo, "id">
+  
+  const FormPage: React.FunctionComponent = () => {
+    const [user, setUser] = useRecoilState<userInfo>(userState)
+    const [form, setForm] = React.useState<UserForm>({ name: user.name, avatar: user.avatar, birthday: user.birthday, gender: user.gender });
+    const snackbar = useSnackbar()
+
+    const handleChangeInput = (field, value) => {
+      setForm({ ...form, [field]: value })
+    }
+  
+    const handleSubmit = () => {
+      snackbar.openSnackbar({duration: 3000, text: 'saved', type: 'success'});
+      setUser((user) => ({ ...user, ...form }));
+    }
+  
+    return (
+      <Page className="page">
+        <div className='section-container'>
+          <Box >
+            <Input
+              id="name"
+              label="Name"
+              type="text"
+              placeholder="Zalo"
+              value={form?.name}
+              onChange={(e) => handleChangeInput('name', e.target.value)}
+            />
+            <Input
+              label="Avatar"
+              type="text"
+              placeholder="zalo@zalo.me"
+              value={form?.avatar}
+              onChange={(e) => handleChangeInput('avatar', e.target.value)}
+            />
+            <Box mt={4}>
+              <Button fullWidth variant='primary' onClick={handleSubmit}>
+                Submit
+              </Button>
+            </Box>
+          </Box>
+        </div>
+      </Page>
+    )
+  }
+  
+  export default FormPage;
+      `
+    ).trim(); 
+  }
     return indent(
       0,
       `
       import React from 'react';
-      import { Button,Input, Box, Page } from 'zmp-ui';
+      import { Button,Input, Box, Page, useSnackbar } 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 snackbar = useSnackbar()
+
         const handleChangeInput = (field, value) => {
           setForm({ ...form, [field]: value })
         }
       
         const handleSubmit = () => {
-          alert('saved');
+          snackbar.openSnackbar({duration: 3000, text: 'saved', type: 'success'})
           setUser(form);
         }
       
@@ -43,9 +106,9 @@ module.exports = (options) => {
                   onChange={(e) => handleChangeInput('avatar', e.target.value)}
                 />
                 <Box mt={4}>
-                  <Button size="full-width" type="primary" onClick={handleSubmit}>
-                    Submit
-                  </Button>
+                <Button fullWidth variant='primary' onClick={handleSubmit}>
+                  Submit
+                </Button>
                 </Box>
               </Box>
             </div>

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

@@ -1,8 +1,62 @@
 const indent = require('../../../utils/indent');
+const { projectFramework } = require('../../../../utils/constants')
 
 module.exports = (options) => {
-  const { template, stateManagement } = options;
-  const modules = ['Avatar', 'List', 'Page', 'Box', 'Text'];
+  const { framework } = options;
+
+  if(framework === projectFramework.REACT_TYPESCRIPT){
+    return indent(
+      0,
+      `
+  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";
+  import { userInfo } from "zmp-sdk";
+  
+  const UserPage = () => {
+    const user = useRecoilValue<userInfo>(userState);
+    const navigate = useNavigate()
+    return (
+      <Page className="page">
+        <Box flex flexDirection="column" justifyContent="center" alignItems="center">
+          <Box>
+            <Avatar
+              story='default'
+              size={96}
+              online
+              src={user.avatar.startsWith("http") ? user.avatar : undefined}
+            >
+              {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;
+    `
+    ).trim();
+  }
 
   return indent(
     0,

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

@@ -13,7 +13,9 @@ module.exports = function generatePackageJson(options) {
 
   // Dependencies
   const dependencies =
-    package === 'zmp-ui' ? ['zmp-ui'] : ['zmp-framework', 'zmp-sdk', 'swiper'];
+    package === 'zmp-ui'
+      ? ['zmp-ui', 'zmp-sdk']
+      : ['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'];

package/create/utils/get-options.js

@@ -1,6 +1,7 @@
 /* eslint no-param-reassign: ["off"] */
 const inquirer = require('inquirer');
 var chalk = require('chalk');
+const { projectFramework } = require('../../utils/constants');
 
 const moreOptionsText = chalk.italic(
   `\t- Including Tailwind CSS\n\t- Including Recoil (React only)`
@@ -31,7 +32,7 @@ const questions = [
     type: 'list',
     name: 'package',
     when: (opts) => opts.newProject,
-    message: 'Choose an UI library / UI framework:',
+    message: 'Choose an UI library',
     choices: [
       {
         name: 'zmp-ui',
@@ -40,103 +41,24 @@ const questions = [
     ],
   },
   // Framework
+
   {
     type: 'list',
     name: 'framework',
-    when: (opts) => opts.package == 'zmp-framework',
-    message: 'What type of framework do you prefer?',
-    choices: [
-      {
-        name: 'ZMP with React',
-        value: 'react',
-      },
-      {
-        name: 'ZMP with React (TypeScript)',
-        value: 'react-typescript',
-      },
-      {
-        name: 'ZMP with Vue.js',
-        value: 'vue',
-      },
-      {
-        name: 'ZMP Core',
-        value: 'core',
-        disabled: true,
-      },
-    ],
-  },
-  {
-    type: 'list',
-    name: 'language',
     when: (opts) => opts.package == 'zmp-ui',
-    message: 'What language do you prefer?',
+    message: 'What type of framework/library do you prefer?',
     choices: [
       {
         name: 'ReactJS',
-        value: 'react',
-      },
-    ],
-  },
-  {
-    type: 'list',
-    name: 'useUIKits',
-    when: (opts) =>
-      opts.package === 'zmp-framework' && opts.framework !== 'vue',
-    message: 'Do you want to use Zalo UI kits style?',
-    default: true,
-    choices: [
-      {
-        name: 'Yes, i want to use UI kits style',
-        value: true,
+        value: projectFramework.REACT,
       },
       {
-        name: 'No, i want to use only styles with minimal required set of components',
-        value: false,
+        name: 'React Typescript',
+        value: projectFramework.REACT_TYPESCRIPT,
       },
     ],
   },
   // Template
-  {
-    type: 'list',
-    name: 'template',
-    when: (opts) =>
-      opts.newProject &&
-      opts.package === 'zmp-framework' &&
-      opts.useUIKits &&
-      opts.framework !== 'vue',
-    message: 'Choose starter template:',
-    choices: [
-      {
-        name: 'Blank',
-        value: 'blank',
-      },
-      {
-        name: 'Single View',
-        value: 'single-view',
-      },
-      {
-        name: 'Tabs Layout',
-        value: 'tabs',
-      },
-    ],
-  },
-  // Template
-  {
-    type: 'list',
-    name: 'template',
-    when: (opts) =>
-      opts.newProject &&
-      opts.package === 'zmp-framework' &&
-      !opts.useUIKits &&
-      opts.framework !== 'vue',
-    message: 'Choose starter template:',
-    choices: [
-      {
-        name: 'Blank',
-        value: 'blank',
-      },
-    ],
-  },
   {
     type: 'list',
     name: 'cssPreProcessor',
@@ -212,23 +134,6 @@ const questions = [
       return input.replace(/#/g, '');
     },
   },
-  {
-    type: 'list',
-    name: 'themingIconFonts',
-    when: (opts) => opts.newProject && opts.package !== 'zmp-ui',
-    message: 'Do you want to include ZMP Icons and Material Icons icon fonts?',
-    default: true,
-    choices: [
-      {
-        name: 'Yes, include icon fonts',
-        value: true,
-      },
-      {
-        name: 'No, i want to use my own custom icons',
-        value: false,
-      },
-    ],
-  },
   {
     type: 'list',
     name: 'moreOptions',
@@ -264,25 +169,6 @@ const questions = [
       },
     ],
   },
-  {
-    type: 'list',
-    name: 'stateManagement',
-    when: (opts) =>
-      opts.moreOptions &&
-      (opts.framework === 'react' || opts.framework === 'react-typescript'),
-    message: 'Which state management library would you like to use?',
-    default: 'store',
-    choices: [
-      {
-        name: 'ZMP Store (Redux pattern)',
-        value: 'store',
-      },
-      {
-        name: 'Recoil',
-        value: 'recoil',
-      },
-    ],
-  },
 ];
 
 module.exports = function getOptions() {

package/package.json

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

package/utils/constants.js

@@ -3,6 +3,13 @@ const versionStatus = {
   TESTING: 2,
 };
 
+const projectFramework = {
+  REACT: 'react',
+  REACT_TYPESCRIPT: 'react-typescript',
+  VUE: 'vue',
+};
+
 module.exports = {
   versionStatus,
+  projectFramework,
 };