zmp-cli 3.10.0-rc.0 → 3.11.0-rc.2

package/.eslintignore

@@ -1,7 +1,8 @@
 create/templates/react/pages
 create/templates/vue/pages
 create/templates/common
+create/templates/zaui
 ui/src
 ui/www
 node_modules
-example
+example

package/config/index.js

@@ -25,6 +25,7 @@ module.exports = {
   env: {
     appId: 'APP_ID',
     token: 'ZMP_TOKEN',
+    accessToken: 'VITE_ACCESS_TOKEN',
   },
   error_code: {
     app_config_not_found: -1400,

package/create/init-zaui.js

@@ -0,0 +1,221 @@
+#!/usr/bin/env node
+/* eslint no-console: off */
+const exec = require('exec-sh');
+const path = require('path');
+const chalk = require('chalk');
+const logSymbols = require('log-symbols');
+const fse = require('../utils/fs-extra');
+const generatePackageJson = require('./utils/generate-package-json');
+const generateNpmScripts = require('./utils/generate-npm-scripts');
+
+const generateAppConfig = require('./utils/generate-app-config');
+
+const createFolders = require('./templates/create-folders');
+const copyAssets = require('./templates/copy-assets');
+const generateReadme = require('./utils/generate-readme');
+const generateGitignore = require('./utils/generate-gitignore');
+const log = require('../utils/log');
+const config = require('../config');
+
+const waitText = chalk.gray('(Please wait, it can take a while)');
+
+module.exports = async (
+  options = {},
+  logger,
+  { exitOnError = true, iconFile = null } = {}
+) => {
+  const cwd = options.cwd || process.cwd();
+  const isRunningInCwd = cwd === process.cwd();
+  function errorExit(err) {
+    log.error(err.stderr || err);
+    if (exitOnError) process.exit(1);
+  }
+  if (!logger) {
+    // eslint-disable-next-line
+    logger = {
+      statusStart() {},
+      statusDone() {},
+      statusError() {},
+      text() {},
+      error() {},
+    };
+  }
+  // App config
+  logger.statusStart('Generating app-config.json');
+  const appConfig = generateAppConfig(options);
+
+  fse.writeFileSync(
+    path.join(cwd, config.filename.appConfig),
+    appConfig.content
+  );
+  logger.statusDone('Generating app-config.json');
+
+  if (!options.newProject) {
+    const deployScripts = generateNpmScripts(['r']).map((s) => {
+      return `${s.icon} Run "npm run ${s.name}" - ${s.description}`;
+    });
+    logger.text(deployScripts.join('\n'));
+    process.exit(0);
+  }
+
+  // Package
+  logger.statusStart('Generating package.json');
+  const packageJson = generatePackageJson(options);
+  fse.writeFileSync(path.join(cwd, 'package.json'), packageJson.content);
+  fse.writeFileSync(
+    path.join(cwd, config.filename.zmpConfig),
+    JSON.stringify(options, '', 2)
+  );
+
+  logger.statusDone('Generating package.json');
+
+  // Create Folders
+  logger.statusStart('Creating required folders structure');
+  try {
+    createFolders(options);
+  } catch (err) {
+    logger.statusError('Error creating required folders structure');
+    // if (err) logger.error(err.stderr);
+    errorExit(err);
+  }
+  logger.statusDone('Creating required folders structure');
+
+  // Install NPM depenencies
+  logger.statusStart(`${'Installing NPM Dependencies'} ${waitText}`);
+  try {
+    if (!isRunningInCwd) {
+      await exec.promise(
+        `cd ${cwd.replace(
+          / /g,
+          '\\ '
+        )} && 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');
+    // if (err) logger.error(err.stderr);
+    errorExit(err);
+    return;
+  }
+  logger.statusDone('Installing NPM Dependencies');
+  // Install NPM dev depenencies
+  logger.statusStart(`${'Installing NPM Dev Dependencies'} ${waitText}`);
+  try {
+    if (!isRunningInCwd) {
+      await exec.promise(
+        `cd ${cwd.replace(
+          / /g,
+          '\\ '
+        )} && npm install ${packageJson.devDependencies.join(' ')} --save-dev`,
+        true
+      );
+    } else {
+      await exec.promise(
+        `npm install ${packageJson.devDependencies.join(' ')} --save-dev`,
+        true
+      );
+    }
+  } catch (err) {
+    logger.statusError('Error installing NPM Dev Dependencies');
+    // if (err) logger.error(err.stderr);
+    errorExit(err);
+    return;
+  }
+  logger.statusDone('Installing NPM Dev Dependencies');
+
+  if (packageJson.postInstall && packageJson.postInstall.length) {
+    logger.statusStart('Executing NPM Scripts');
+    try {
+      if (!isRunningInCwd) {
+        await exec.promise(
+          `cd ${cwd.replace(/ /g, '\\ ')} && npm run postinstall`,
+          true
+        );
+      } else {
+        await exec.promise('npm run postinstall', true);
+      }
+    } catch (err) {
+      logger.statusError('Error executing NPM Scripts');
+      // if (err) logger.error(err.stderr);
+      errorExit(err);
+      return;
+    }
+    logger.statusDone('Executing NPM Scripts');
+  }
+
+  // Create Project Files
+  logger.statusStart('Creating project files');
+  const filesToCopy = copyAssets(options, iconFile);
+  try {
+    // eslint-disable-next-line
+    await Promise.all(
+      filesToCopy.map((f) => {
+        if (f.from) {
+          return fse.copyFileAsync(f.from, f.to);
+        }
+        if (f.content) {
+          return fse.writeFileAsync(f.to, f.content);
+        }
+        return Promise.resolve();
+      })
+    );
+  } catch (err) {
+    logger.statusError('Error creating project files');
+    // if (err) logger.error(err.stderr || err);
+    errorExit(err);
+    return;
+  }
+
+  // Generate Readme
+  const readMeContent = generateReadme(options);
+  try {
+    fse.writeFileSync(path.join(cwd, 'README.md'), readMeContent);
+  } catch (err) {
+    logger.statusError('Error creating project files');
+    // if (err) logger.error(err.stderr || err);
+    errorExit(err);
+    return;
+  }
+
+  // Generate .gitignore
+  const gitignoreContent = generateGitignore(options);
+  try {
+    fse.writeFileSync(path.join(cwd, '.gitignore'), gitignoreContent);
+  } catch (err) {
+    logger.statusError('Error creating project files');
+    // if (err) logger.error(err.stderr || err);
+    errorExit(err);
+    return;
+  }
+
+  logger.statusDone('Creating project files');
+
+  let npmScripts = generateNpmScripts(['s', 'r']).map((s) => {
+    return `- ${s.icon} Run "npm run ${s.name}" - ${s.description}`;
+  });
+
+  // Final Text
+  const finalText = `
+${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/')}
+  - 📖 Check ${chalk.bold(
+    'README.md'
+  )} in project root folder with further instructions
+    `;
+
+  logger.text(finalText);
+};

package/create/templates/copy-assets.js

@@ -13,11 +13,17 @@ 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');
 module.exports = (options, iconFile) => {
   const cwd = options.cwd || process.cwd();
-  const { framework, theming, cssPreProcessor, customBuild, includeTailwind } =
-    options;
+  const {
+    zaui,
+    framework,
+    theming,
+    cssPreProcessor,
+    customBuild,
+    includeTailwind,
+  } = options;
 
   const srcFolder = 'src';
 
@@ -29,6 +35,9 @@ module.exports = (options, iconFile) => {
   if (framework === 'react-typescript') {
     toCopy.push(...copyReactTsAssets(options));
   }
+  if (zaui) {
+    toCopy.push(...copyZauiAssets(options));
+  }
   if (theming.iconFonts) {
     // Copy Icons CSS
     toCopy.push({

package/create/templates/generate-index.js

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

package/create/templates/generate-scripts.js

@@ -3,12 +3,14 @@ const generateVueScripts = require('./vue/generate-scripts');
 const generateReactScripts = require('./react/generate-scripts');
 const generateSvelteScripts = require('./svelte/generate-scripts');
 const generateReactTsScripts = require('./react-typescript/generate-scripts');
+const generateZauiScripts = require('./zaui/generate-scripts');
 module.exports = (options) => {
-  const { framework } = options;
+  const { framework, zaui } = 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);
   return '';
 };

package/create/templates/generate-styles.js

@@ -2,12 +2,30 @@ const indent = require('../utils/indent');
 const { colorThemeCSSProperties } = require('../utils/colors');
 
 module.exports = (options) => {
-  const { template, theming } = options;
+  const { template, theming, zaui } = options;
   const { customColor, color, fillBars } = theming;
 
   let styles = '';
 
+  if (zaui) {
+    return `
+    *{
+      box-sizing: border-box;
+    }
+    #app{
+      width: 100%;
+      height: 100%;
+    }
+    .page{
+      padding: 16px;
+      min-height: 100%;
+      overflow-y: auto;
+    }
+    `;
+  }
+
   let themeRgb = [0, 122, 255];
+
   if (customColor && color) {
     const customProps = colorThemeCSSProperties(`${color}`);
     themeRgb = customProps['--zmp-theme-color-rgb']
@@ -19,18 +37,18 @@ module.exports = (options) => {
       /* Custom color theme properties */
       :root {
         ${Object.keys(customProps)
-        .filter(
-          (prop) =>
-            prop !== '--zmp-tabbar-fill-link-active-color' &&
-            prop !== '--zmp-tabbar-fill-link-active-border-color'
-        )
-        .map((prop) => `${prop}: ${customProps[prop]};`)
-        .join('\n        ')}
+          .filter(
+            (prop) =>
+              prop !== '--zmp-tabbar-fill-link-active-color' &&
+              prop !== '--zmp-tabbar-fill-link-active-border-color'
+          )
+          .map((prop) => `${prop}: ${customProps[prop]};`)
+          .join('\n        ')}
       }
       :root.theme-dark,:root .theme-dark {
         ${Object.keys(customProps)
-        .map((prop) => `${prop}: ${customProps[prop]};`)
-        .join('\n        ')} 
+          .map((prop) => `${prop}: ${customProps[prop]};`)
+          .join('\n        ')} 
       }
     `
     );

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

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    '@babel/preset-react',
+    [
+      '@babel/preset-env',
+      {
+        modules: false,
+      },
+    ],
+  ],
+  plugins: ['@babel/plugin-transform-runtime'],
+};

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Avatar } from 'zaui';
+
+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>
+  )
+};
+
+UserCard.displayName = 'zmp-user-card'
+
+export default UserCard;

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

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

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

@@ -0,0 +1,75 @@
+const path = require('path');
+const generateHomePage = require('./generate-home-page');
+const generateRoot = require('./generate-root');
+const generateRecoil = require('../generate-recoil');
+const copyPages = require('./pages');
+
+module.exports = (options) => {
+  const cwd = options.cwd || process.cwd();
+  const { template, stateManagement } = options;
+  const toCopy = [];
+
+  // Copy Pages
+
+  let pages = [];
+  if (template !== 'blank')
+    pages.push(
+      ...[
+        { fileName: 'about', content: 'copyAbout' },
+        { fileName: 'user', content: 'copyUser' },
+        { fileName: 'form', content: 'copyForm' },
+      ]
+    );
+
+
+  pages.forEach(({ fileName, content }) => {
+    const dest = path.resolve(cwd, 'src', 'pages', `${fileName}.jsx`);
+    toCopy.push({
+      content: copyPages[content](options),
+      to: dest,
+    });
+  });
+
+
+  toCopy.push({
+    content: generateHomePage(options),
+    to: path.resolve(cwd, 'src', 'pages', 'index.jsx'),
+  });
+
+  // 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`);
+    toCopy.push({
+      from: src,
+      to: dest,
+    });
+  });
+
+  toCopy.push({
+    content: generateRoot(options),
+    to: path.resolve(cwd, 'src', 'components', 'app.jsx'),
+  });
+
+  if (stateManagement === 'recoil') {
+    toCopy.push({
+      content: generateRecoil(options),
+      to: path.resolve(cwd, 'src', 'state.js'),
+    });
+  } 
+
+  toCopy.push({
+    from: path.resolve(__dirname, 'vite.config.js'),
+    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

@@ -0,0 +1,43 @@
+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,
+    `
+    import React from 'react';
+    ${
+      template === 'blank'
+        ? `
+    `.trim()
+        : `
+    import {
+      List,
+    } from 'zaui';${stateManagement === 'recoil' ? `
+    import { useRecoilValue } from 'recoil';
+    import { userState } from '../state';` : ''}
+    import UserCard from '../components/user-card';
+    `.trim()
+    }
+
+    const HomePage = () => {
+      ${template !== 'blank' ? (stateManagement === 'recoil' ? "const user = useRecoilValue(userState);" : "const user = useStore('user');") : ''}
+      return (
+        <div name="home" className="page">
+        Hello Zalo Mini APp
+        </div>
+      );
+    }
+    
+    export default HomePage;
+  `
+  ).trim();
+};

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

@@ -0,0 +1,45 @@
+const templateIf = require('../../utils/template-if');
+const indent = require('../../utils/indent');
+const appParameters = require('../app-parameters');
+
+module.exports = (options) => {
+  const { template, theming, stateManagement } = options;
+
+  // Views
+
+
+  return indent(
+    0,
+    `
+    import React from 'react';
+    import {BrowserRouter, Routes, Route} from 'react-router-dom'
+    import HomePage from '../pages';
+    import config from '../config';
+
+    ${['blank', 'single-view'].indexOf(template) >= 0
+      && `
+    import { App } from 'zaui';
+    `.trim()
+    }
+    ${templateIf(stateManagement === 'recoil', () => `import { RecoilRoot } from 'recoil';`,'')}
+
+    const MyApp = () => {
+
+      ${`
+      return (${stateManagement === 'recoil' ? `
+        <RecoilRoot>` : ''}
+        ${indent(stateManagement === 'recoil' ? 2 : 0, `<App ${theming.darkTheme ? 'themeDark' : ''}>`)}
+          <BrowserRouter basename={config.basePath}>
+            <Routes>
+              <Route path="/" element={<HomePage></HomePage>}></Route>
+            </Routes>
+          </BrowserRouter>
+        ${indent(stateManagement === 'recoil' ? 2 : 0, `</App>`)}${stateManagement === 'recoil' ? `
+        </RecoilRoot>` : ''}
+      );
+      `.trim()}
+    }
+    export default MyApp;
+  `
+  ).trim();
+};

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

@@ -0,0 +1,10 @@
+module.exports = (options) => {
+  const { template } = options;
+
+  if (template === 'blank') {
+    return [];
+  }
+  const routes = ['/user', '/form', '/dynamic-route', '/about', '/404']; 
+
+  return routes;
+};

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

@@ -0,0 +1,39 @@
+const indent = require('../../utils/indent');
+const stylesExtension = require('../../utils/styles-extension');
+
+module.exports = (options) => {
+  const { cssPreProcessor, theming, customBuild, includeTailwind } = options;
+
+  let scripts = '';
+
+  scripts += indent(
+    0,
+    `
+    // Import React and ReactDOM
+    import React from 'react';
+    import { createRoot } from 'react-dom/client';
+    ${includeTailwind ? `
+
+    // Import tailwind styles
+    import './css/tailwind.css';` : ''}
+
+    import 'zaui/zaui.css'; 
+
+    import './css/app.${stylesExtension(cssPreProcessor)}';
+
+    // Import App Component
+    import App from './components/app.jsx';
+    import appConfig from '../app-config.json';
+
+    if (!window.APP_CONFIG) {
+      window.APP_CONFIG = appConfig;
+    }
+
+    // Mount React App
+    const root = createRoot(document.getElementById('app'));
+    root.render(React.createElement(App));
+  `
+  );
+
+  return scripts.trim();
+};

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

@@ -0,0 +1,47 @@
+const indent = require('../../../utils/indent');
+
+// eslint-disable-next-line no-unused-vars
+module.exports = (options) => {
+  return indent(
+    0,
+    `
+    import React from 'react'
+    import { Sheet, Button } from 'zaui';
+
+    const AboutPage = (props) => {
+      const [actionSheetOpened, setActionSheetOpened] = React.useState(false);
+
+      return (
+        <div name="page">
+          <div>
+            <Button
+              type="secondary"
+              size="full-width"
+              onClick={() => setActionSheetOpened(true)}
+            >
+              Back
+            </Button>
+          </div>
+          <Sheet
+            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>
+      )
+    }
+
+    export default AboutPage;
+  `
+  ).trim();
+};

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

@@ -0,0 +1,62 @@
+const indent = require('../../../utils/indent');
+
+module.exports = (options) => {
+  const { template } = options
+    return indent(
+      0,
+      `
+      import React from 'react';
+      import { Button,Input } from 'zaui';
+      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 >
+                <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)}
+                />
+                <div >
+                  <Button size="full-width" type="primary" onClick={handleSubmit}>
+                    Submit
+                  </Button>
+                </Box>
+              </div>
+            </div>
+          </div>
+        )
+      }
+
+      export default FormPage;
+      `
+    ).trim();
+
+};

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

@@ -0,0 +1,9 @@
+const copyUser = require('./user');
+const copyForm = require('./form');
+const copyAbout = require('./about');
+
+module.exports = {
+  copyUser,
+  copyForm,
+  copyAbout,
+};

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

@@ -0,0 +1,46 @@
+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'];
+
+  return indent(
+    0,
+    `
+    import React from 'react'
+    import { ${modules.join(', ')} } from 'zaui'
+    '${stateManagement === 'recoil' ? `
+    import { useRecoilValue } from 'recoil';
+    import { userState } from '../state';` : ''}
+
+    const UserPage = () => {
+      ${stateManagement === 'recoil' ? 'const user = useRecoilValue(userState);' : `const user = {}`}
+
+      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>
+      )
+    }
+
+    export default UserPage;
+  `
+  ).trim();
+};

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

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import reactRefresh from '@vitejs/plugin-react-refresh'
+
+// https://vitejs.dev/config/
+export default () => {
+  return defineConfig({
+    root: './src',
+    base: '',
+    plugins: [reactRefresh()],
+  })
+}

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

@@ -2,11 +2,17 @@ const generateNpmScripts = require('./generate-npm-scripts');
 const { generateTailWindScripts } = require('./generate-npm-scripts');
 
 module.exports = function generatePackageJson(options) {
-  const { name, framework, cssPreProcessor, includeTailwind, stateManagement } =
-    options;
+  const {
+    name,
+    framework,
+    cssPreProcessor,
+    includeTailwind,
+    stateManagement,
+    zaui,
+  } = options;
 
   // Dependencies
-  const dependencies = ['zmp-framework', 'zmp-sdk', 'swiper'];
+  const dependencies = zaui ? [] : ['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'];
@@ -43,7 +49,7 @@ module.exports = function generatePackageJson(options) {
   // DevDependencies
   const devDependenciesCore = ['zmp-loader'];
   const devDependenciesReact = ['@vitejs/plugin-react-refresh'];
-  const devDependenciesVue = ['@vitejs/plugin-vue', '@vue/compiler-sfc'];
+  const devDependenciesVue = ['@vitejs/plugin-vue@2.3.3', '@vue/compiler-sfc'];
 
   if (framework === 'react' || framework === 'react-typescript')
     devDependencies.push(
@@ -61,6 +67,13 @@ module.exports = function generatePackageJson(options) {
       ...(includeTailwind ? tailwindDependencies : [])
     );
 
+  if (zaui) {
+    dependencies.push('react-router-dom', 'recoil');
+    devDependencies.push(
+      ...[devDependenciesReact],
+      ...(includeTailwind ? tailwindDependencies : [])
+    );
+  }
   // Scripts
   const scripts = {};
   generateNpmScripts().forEach((s) => {
@@ -99,7 +112,13 @@ module.exports = function generatePackageJson(options) {
     "Samsung >= 5"
   ],
   "scripts" : ${JSON.stringify(scripts)},
-  "dependencies": {},
+  "dependencies": {
+    ${
+      zaui
+        ? `"zaui": "https://stc-zmp.zadn.vn/zaui/zaui-1.0.0-alpha.1.tgz"`
+        : ''
+    }
+  },
   "devDependencies": {}
 }
 `.trim();

package/create/utils/get-options.js

@@ -2,7 +2,9 @@
 const inquirer = require('inquirer');
 var chalk = require('chalk');
 
-const moreOptionsText = chalk.italic(`\t- Including Tailwind CSS\n\t- Including Recoil (React only)`);
+const moreOptionsText = chalk.italic(
+  `\t- Including Tailwind CSS\n\t- Including Recoil (React only)`
+);
 const questions = [
   {
     type: 'list',
@@ -219,7 +221,9 @@ const questions = [
   {
     type: 'list',
     name: 'stateManagement',
-    when: (opts) => opts.moreOptions && (opts.framework === 'react' || opts.framework === 'react-typescript'),
+    when: (opts) =>
+      opts.moreOptions &&
+      (opts.framework === 'react' || opts.framework === 'react-typescript'),
     message: 'Which state management library would you like to use?',
     default: 'store',
     choices: [
@@ -234,9 +238,127 @@ 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,
+      },
+    ],
+  },
 
-module.exports = function getOptions() {
-  return inquirer.prompt(questions).then((options) => {
+  // 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;
+  return inquirer.prompt(listQuestion).then((options) => {
     options.theming = {
       customColor: options.themingCustomColor,
       color:
@@ -253,6 +375,9 @@ module.exports = function getOptions() {
     if (!options.stateManagement) {
       options.stateManagement = 'store';
     }
+    if (options.zaui) {
+      options.stateManagement = 'recoil';
+    }
     delete options.themingCustomColor;
     delete options.themingColor;
     delete options.themingIconFonts;

package/index.js

@@ -25,6 +25,7 @@ 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();
 
@@ -81,6 +82,29 @@ 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/login/index.js

@@ -114,6 +114,7 @@ module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
                 clearInterval(intervalCheckLogin);
                 const token = resData.data && resData.data.jwt;
                 envUtils.setEnv(config.env.token, token);
+                envUtils.setEnv(config.env.accessToken, token);
                 logger.statusDone('Login Success!');
                 return resolve();
               }
@@ -148,6 +149,7 @@ module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
               const dataDecoded = jwt.decode(token);
               envUtils.setEnv(config.env.appId, dataDecoded.appId);
               envUtils.setEnv(config.env.token, token);
+              envUtils.setEnv(config.env.accessToken, options.token);
             } catch (error) {
               return reject(error);
             }

package/package.json

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