zmp-cli 3.12.1-rc.2 → 3.14.0-rc.0

package/.vscode/launch.json

@@ -1,21 +1,18 @@
 {
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "pwa-node",
-            "request": "launch",
-            "name": "Launch Program",
-            "skipFiles": [
-                "<node_internals>/**"
-            ],
-            "program": "${workspaceFolder}/index.js",
-            "args": [
-                "init"
-            ],
-            "console": "integratedTerminal"
-        }
-    ]
-}
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "pwa-node",
+      "request": "launch",
+      "name": "Launch Program",
+      "skipFiles": ["<node_internals>/**"],
+      "program": "${workspaceFolder}/index.js",
+      "args": ["sync-config", "--root-element", "#__next", "out/index.html"],
+      "cwd": "${workspaceFolder}/../next-mini-app/",
+      "console": "integratedTerminal"
+    }
+  ]
+}

package/build/dist/index.dev.js

@@ -0,0 +1,217 @@
+#!/usr/bin/env node
+
+/* eslint no-console: off */
+"use strict";
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var chalk = require('chalk');
+
+var ora = require('ora');
+
+var path = require('path');
+
+var _require = require('vite'),
+    build = _require.build;
+
+var dynamicImportVars = require('@rollup/plugin-dynamic-import-vars')["default"];
+
+var _ = require('lodash');
+
+var replace = require('@rollup/plugin-replace');
+
+var log = require('../utils/log');
+
+var fse = require('../utils/fs-extra');
+
+var getAppInfo = require('../utils/get-app-info');
+
+var envUtils = require('../utils/env');
+
+var config = require('../config');
+
+var generatePagesMap = require('../utils/generate-pages-map');
+
+var env = envUtils.getEnv('NODE_ENV') || 'production';
+var waitText = chalk.gray('Building... (Please wait, it can take a while)');
+var frameworkWarning = chalk.yellow('Warning: This CLI version will work better with zmp-framework version 1.5.0 or higher');
+var spinner = ora(env === 'production' ? 'Building for production...' : 'Building development version...');
+
+module.exports = function _callee() {
+  var options,
+      logger,
+      _ref,
+      _ref$exitOnError,
+      exitOnError,
+      cwd,
+      resolvePath,
+      appConfig,
+      errorExit,
+      appId,
+      nextVersion,
+      appInfo,
+      currentVersion,
+      viteConfig,
+      isTypeScriptProject,
+      res,
+      output,
+      jsFiles,
+      cssFiles,
+      appConfigJson,
+      _args = arguments;
+
+  return regeneratorRuntime.async(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          errorExit = function _ref2(err) {
+            log.error(err.stderr || err);
+            if (exitOnError) process.exit(1);
+          };
+
+          options = _args.length > 0 && _args[0] !== undefined ? _args[0] : {};
+          logger = _args.length > 1 ? _args[1] : undefined;
+          _ref = _args.length > 2 && _args[2] !== undefined ? _args[2] : {}, _ref$exitOnError = _ref.exitOnError, exitOnError = _ref$exitOnError === void 0 ? true : _ref$exitOnError;
+          cwd = options.cwd || process.cwd();
+
+          resolvePath = function resolvePath(dir) {
+            return path.join(cwd, dir);
+          };
+
+          appConfig = options.appConfigJson || require(resolvePath(config.filename.appConfig));
+
+          if (!logger) {
+            // eslint-disable-next-line
+            logger = {
+              statusStart: function statusStart() {},
+              statusDone: function statusDone() {},
+              statusError: function statusError() {},
+              text: function text() {},
+              error: function error() {}
+            };
+          }
+
+          logger.text(frameworkWarning);
+          spinner.start();
+          logger.statusStart(waitText);
+          _context.prev = 11;
+          appId = envUtils.getEnv(config.env.appId);
+          nextVersion = options.nextVersion;
+
+          if (nextVersion) {
+            _context.next = 21;
+            break;
+          }
+
+          _context.next = 17;
+          return regeneratorRuntime.awrap(getAppInfo(appId, options));
+
+        case 17:
+          appInfo = _context.sent;
+          currentVersion = appInfo && appInfo.latestVersion && Number(appInfo.latestVersion);
+
+          if (currentVersion === undefined || currentVersion === null) {
+            currentVersion = 0;
+          }
+
+          nextVersion = currentVersion + 1;
+
+        case 21:
+          viteConfig = 'vite.config.js';
+          isTypeScriptProject = fse.existsSync(path.join(cwd, 'vite.config.ts'));
+
+          if (isTypeScriptProject) {
+            viteConfig = 'vite.config.ts';
+          } // eslint-disable-next-line
+
+
+          _context.next = 26;
+          return regeneratorRuntime.awrap(build({
+            configFile: path.join(cwd, viteConfig),
+            root: cwd,
+            base: "".concat(config.zdn_url).concat(appId, "/").concat(nextVersion, "/"),
+            css: {
+              modules: {
+                scopeBehaviour: 'local'
+              }
+            },
+            build: {
+              target: 'es2015',
+              outDir: path.join(cwd, 'www'),
+              assetsInlineLimit: 0,
+              cssCodeSplit: false,
+              cssTarget: ['es2015', 'safari13.1'],
+              rollupOptions: {
+                plugins: [replace({
+                  values: {
+                    ZMP_IMPORT_PAGES: function ZMP_IMPORT_PAGES() {
+                      return generatePagesMap(cwd);
+                    }
+                  }
+                }), dynamicImportVars({
+                  warnOnError: true
+                })],
+                output: {
+                  entryFileNames: 'assets/[name].[hash].module.js',
+                  chunkFileNames: 'assets/[name].[hash].module.js'
+                }
+              }
+            },
+            logLevel: 'error'
+          }));
+
+        case 26:
+          res = _context.sent;
+          output = res.output.map(function (obj) {
+            return _.pick(obj, ['fileName', 'type', 'isEntry', 'isImplicitEntry', 'isDynamicEntry']);
+          });
+          jsFiles = output.filter(function (file) {
+            if (file.type !== 'chunk') return false;
+            return file.isEntry || !file.isDynamicEntry;
+          });
+          cssFiles = output.filter(function (file) {
+            if (file.type !== 'asset' || !file.fileName.endsWith('.css')) return false; // const name = file.fileName.replace(/\.([a-z0-9]{8})\.css$/, '');
+            // if (!jsFiles.find((js) => js.fileName.startsWith(name))) return false;
+
+            return true;
+          });
+          appConfigJson = _objectSpread({}, appConfig, {
+            listCSS: [].concat(_toConsumableArray(Array.isArray(appConfig.listCSS) ? appConfig.listCSS : []), _toConsumableArray(cssFiles.map(function (f) {
+              return f.fileName;
+            }))),
+            listSyncJS: [].concat(_toConsumableArray(Array.isArray(appConfig.listSyncJS) ? appConfig.listSyncJS : []), _toConsumableArray(jsFiles.map(function (f) {
+              return f.fileName;
+            }))),
+            listAsyncJS: _toConsumableArray(Array.isArray(appConfig.listAsyncJS) ? appConfig.listAsyncJS : [])
+          });
+          fse.writeFileSync(resolvePath("www/".concat(config.filename.appConfig)), JSON.stringify(appConfigJson));
+          logger.statusDone("".concat(chalk.bold.green('Build Done!\n')));
+          return _context.abrupt("return", appConfigJson);
+
+        case 36:
+          _context.prev = 36;
+          _context.t0 = _context["catch"](11);
+          logger.statusError('Error building project'); // if (err) logger.error(err.stderr || err);
+
+          errorExit(_context.t0);
+          return _context.abrupt("return");
+
+        case 41:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, null, null, [[11, 36]]);
+};

package/config/dist/index.dev.js

@@ -0,0 +1,48 @@
+"use strict";
+
+module.exports = {
+  filename: {
+    appConfig: 'app-config.json',
+    zmpConfig: 'zmp-cli.json',
+    packageJson: 'package.json'
+  },
+  api_domain: 'https://zmp-api.developers.zalo.me/',
+  zdn_url: '//h5.zdn.vn/zapps/',
+  path: {
+    login: 'admin/login',
+    requestLogin: 'admin/request-login',
+    checkLoginStatus: 'admin/get-login-status',
+    // uploadApp: 'admin/upload-app',
+    uploadAppByChunk: 'app/upload-chunk',
+    requestUploadResumable: 'app/request-upload',
+    getAppInfo: 'app/get-info'
+  },
+  dirname: __dirname,
+  root_env: function root_env() {
+    return "".concat(process.cwd(), "/.env");
+  },
+  env: {
+    appId: 'APP_ID',
+    token: 'ZMP_TOKEN',
+    accessToken: 'VITE_ACCESS_TOKEN'
+  },
+  error_code: {
+    app_config_not_found: -1400,
+    permission_denied: -2001,
+    request_timeout: -2003
+  },
+  error_msg: {
+    app_config_not_found: "App config not found. Please re-init project. (Tips: Run 'zmp init')",
+    permission_denied: "Permission denied. Please login again. (Tips: Run 'zmp login')",
+    request_timeout: 'Request Timeout'
+  },
+  resumable_option: {
+    chunkSize: 512 * 1000,
+    // bytes -> 512kb/chunk
+    simultaneousUploads: 4,
+    testChunks: true,
+    throttleProgressCallbacks: 1,
+    method: 'octet',
+    forceChunkSize: false
+  }
+};

package/config/index.js

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

package/create/templates/dist/generate-styles.dev.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var indent = require('../utils/indent');
+
+var _require = require('../utils/colors'),
+    colorThemeCSSProperties = _require.colorThemeCSSProperties;
+
+module.exports = function (options) {
+  var template = options.template,
+      theming = options.theming;
+  var customColor = theming.customColor,
+      color = theming.color,
+      fillBars = theming.fillBars;
+  var styles = '';
+  var themeRgb = [0, 122, 255];
+
+  if (customColor && color) {
+    var customProps = colorThemeCSSProperties("".concat(color));
+    themeRgb = customProps['--zmp-theme-color-rgb'].split(',').map(function (n) {
+      return n.trim();
+    });
+    styles += indent(0, "\n      /* Custom color theme properties */\n      :root {\n        ".concat(Object.keys(customProps).filter(function (prop) {
+      return prop !== '--zmp-tabbar-fill-link-active-color' && prop !== '--zmp-tabbar-fill-link-active-border-color';
+    }).map(function (prop) {
+      return "".concat(prop, ": ").concat(customProps[prop], ";");
+    }).join('\n        '), "\n      }\n      :root.theme-dark,:root .theme-dark {\n        ").concat(Object.keys(customProps).map(function (prop) {
+      return "".concat(prop, ": ").concat(customProps[prop], ";");
+    }).join('\n        '), "\n      }\n    "));
+  }
+
+  if (fillBars) {
+    styles += indent(0, "\n      /* Invert navigation bars to fill style */\n    ");
+  }
+
+  if (includeTailwind) {
+    styles += indent(0, "\n      @import \"./tailwind.css\";\n      ");
+  }
+
+  if (template === 'split-view') {
+    styles += indent(0, "\n      /* Left Panel right border when it is visible by breakpoint */\n      .panel-left.panel-in-breakpoint:before {\n        position: absolute;\n        right: 0;\n        top: 0;\n        height: 100%;\n        width: 1px;\n        background: rgba(0,0,0,0.1);\n        content: '';\n        z-index: 6000;\n      }\n\n      /* Hide navbar link which opens left panel when it is visible by breakpoint */\n      .panel-left.panel-in-breakpoint ~ .view .navbar .panel-open[data-panel=\"left\"] {\n        display: none;\n      }\n\n      /*\n        Extra borders for main view and left panel for iOS theme when it behaves as panel (before breakpoint size)\n      */\n      .ios .panel-left:not(.panel-in-breakpoint).panel-in ~ .view-main:before,\n      .ios .panel-left:not(.panel-in-breakpoint).panel-closing ~ .view-main:before {\n        position: absolute;\n        left: 0;\n        top: 0;\n        height: 100%;\n        width: 1px;\n        background: rgba(0,0,0,0.1);\n        content: '';\n        z-index: 6000;\n      }\n    ");
+  } else {
+    styles += indent(0, "\n      /* Your app custom styles here */\n    ");
+  }
+
+  return styles.trim();
+};

package/create/templates/react/dist/generate-scripts.dev.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var templateIf = require('../../utils/template-if');
+
+var indent = require('../../utils/indent');
+
+var stylesExtension = require('../../utils/styles-extension');
+
+module.exports = function (options) {
+  var cssPreProcessor = options.cssPreProcessor,
+      theming = options.theming,
+      customBuild = options.customBuild,
+      includeTailwind = options.includeTailwind;
+  var scripts = '';
+  scripts += indent(0, "\n    // Import React and ReactDOM\n    import React from 'react';\n    import { createRoot } from 'react-dom/client';\n\n    // Import ZMP\n    import ZMP from '".concat(customBuild ? './zmp-custom.js' : 'zmp-framework/core/lite-bundle', "';\n\n    // Import ZMP-React Plugin\n    import ZMPReact from 'zmp-framework/react';").concat(includeTailwind ? "\n\n    // Import tailwind styles\n    import './css/tailwind.css';\n    " : '', "\n\n    // Import ZMP Styles\n    ").concat(templateIf(customBuild, function () {
+    return "\n    import './css/zmp-custom.less';\n    ";
+  }, function () {
+    return "\n    import 'zmp-framework/".concat(theming.useUiKits ? 'zmp-bundle.min.css' : 'zmp.min.css', "';\n    ");
+  }), "\n\n    // Import Icons and App Custom Styles\n    ").concat(templateIf(theming.iconFonts, function () {
+    return "\n    import './css/icons.css';\n    ";
+  }), "\n    import './css/app.").concat(stylesExtension(cssPreProcessor), "';\n\n    // Import App Component\n    import App from './components/app.jsx';\n    import appConfig from '../app-config.json';\n\n    if (!window.APP_CONFIG) {\n      window.APP_CONFIG = appConfig;\n    }\n\n    // Init ZMP React Plugin\n    ZMP.use(ZMPReact)\n\n    // Mount React App\n    const root = createRoot(document.getElementById('app'));\n    root.render(React.createElement(App));\n  "));
+  return scripts.trim();
+};

package/create/templates/react-typescript/dist/generate-scripts.dev.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var templateIf = require('../../utils/template-if');
+
+var indent = require('../../utils/indent');
+
+var stylesExtension = require('../../utils/styles-extension');
+
+module.exports = function (options) {
+  var cssPreProcessor = options.cssPreProcessor,
+      theming = options.theming,
+      customBuild = options.customBuild,
+      includeTailwind = options.includeTailwind;
+  var scripts = '';
+  scripts += indent(0, "\n    // Import React and ReactDOM\n    import React from 'react';\n    import { createRoot } from 'react-dom/client';\n\n    // Import ZMP\n    import ZMP from '".concat(customBuild ? './zmp-custom.js' : 'zmp-framework/core/lite-bundle', "';\n\n    // Import ZMP-React Plugin\n    import ZMPReact from 'zmp-framework/react';").concat(includeTailwind ? "\n\n    // Import tailwind styles\n    import './css/tailwind.css';\n    " : '', "\n\n    // Import ZMP Styles\n    ").concat(templateIf(customBuild, function () {
+    return "\n    import './css/zmp-custom.less';\n    ";
+  }, function () {
+    return "\n    import 'zmp-framework/".concat(theming.useUiKits ? 'zmp-bundle.min.css' : 'zmp.min.css', "';\n    ");
+  }), "\n\n    // Import Icons and App Custom Styles\n    ").concat(templateIf(theming.iconFonts, function () {
+    return "\n    import './css/icons.css';\n    ";
+  }), "\n    import './css/app.").concat(stylesExtension(cssPreProcessor), "';\n\n    // Import App Component\n    import App from './components/app';\n    import appConfig from '../app-config.json';\n\n    if (!(window as any).APP_CONFIG) {\n      (window as any).APP_CONFIG = appConfig\n    }\n\n    // Init ZMP React Plugin\n    ZMP.use(ZMPReact)\n\n    // Mount React App\n    const root = createRoot(document.getElementById('app')!);\n    root.render(React.createElement(App));\n  "));
+  return scripts.trim();
+};

package/create/utils/dist/get-options.dev.js

@@ -0,0 +1,277 @@
+"use strict";
+
+/* eslint no-param-reassign: ["off"] */
+var inquirer = require('inquirer');
+
+var chalk = require('chalk');
+
+var moreOptionsText = chalk.italic("\t- Including Tailwind CSS\n\t- Including Recoil (React only)");
+var questions = [{
+  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: function validate(input) {
+    return new Promise(function (resolve, reject) {
+      if (!input) reject(new Error('App name is required'));else resolve(true);
+    });
+  }
+}, {
+  type: 'list',
+  name: 'package',
+  when: function when(opts) {
+    return opts.newProject;
+  },
+  message: 'Choose an UI library / UI framework:',
+  choices: [{
+    name: 'zmp-ui',
+    value: 'zmp-ui'
+  }]
+}, // Framework
+{
+  type: 'list',
+  name: 'framework',
+  when: function when(opts) {
+    return 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: function when(opts) {
+    return opts["package"] == 'zmp-ui';
+  },
+  message: 'What language do you prefer?',
+  choices: [{
+    name: 'ReactJS',
+    value: 'react'
+  }]
+}, {
+  type: 'list',
+  name: 'useUIKits',
+  when: function when(opts) {
+    return 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
+  }, {
+    name: 'No, i want to use only styles with minimal required set of components',
+    value: false
+  }]
+}, // Template
+{
+  type: 'list',
+  name: 'template',
+  when: function when(opts) {
+    return 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: function when(opts) {
+    return opts.newProject && opts["package"] === 'zmp-framework' && !opts.useUIKits && opts.framework !== 'vue';
+  },
+  message: 'Choose starter template:',
+  choices: [{
+    name: 'Blank',
+    value: 'blank'
+  }]
+}, {
+  type: 'list',
+  name: 'cssPreProcessor',
+  when: function when(opts) {
+    return 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'
+  }]
+}, // Template
+{
+  type: 'list',
+  name: 'template',
+  when: function when(opts) {
+    return 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: function when(opts) {
+    return opts.newProject && opts["package"] !== 'zmp-ui';
+  },
+  message: 'Do you want to specify custom theme color?',
+  choices: [{
+    name: 'No, use default color theme',
+    value: false
+  }, {
+    name: 'Yes, i want to specify my brand color',
+    value: true
+  }]
+}, {
+  type: 'input',
+  name: 'themingColor',
+  message: 'Enter custom theme color in HEX format (e.g. ff0000)',
+  when: function when(opts) {
+    return opts.themingCustomColor === true;
+  },
+  validate: function validate(input) {
+    return new Promise(function (resolve, reject) {
+      var num = input.replace(/#/g, '');
+      if (num.length === 3 || num.length === 6) resolve(true);else reject(new Error("It doesn't look like a correct HEX number"));
+    });
+  },
+  filter: function filter(input) {
+    return input.replace(/#/g, '');
+  }
+}, {
+  type: 'list',
+  name: 'themingIconFonts',
+  when: function when(opts) {
+    return 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',
+  when: function when(opts) {
+    return opts.newProject;
+  },
+  message: "More Options?\n".concat(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: function when(opts) {
+    return 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
+  }]
+}, {
+  type: 'list',
+  name: 'stateManagement',
+  when: function when(opts) {
+    return 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() {
+  var listQuestion = questions;
+  return inquirer.prompt(listQuestion).then(function (options) {
+    options.theming = {
+      customColor: options.themingCustomColor,
+      color: options.themingCustomColor && options.themingColor ? "#".concat(options.themingColor) : '#007aff',
+      darkTheme: false,
+      iconFonts: options.themingIconFonts,
+      fillBars: false,
+      useUiKits: options.useUIKits
+    };
+    options.customBuild = false;
+    options.includeTailwind = options.moreOptions && options.includeTailwind;
+
+    if (!options.stateManagement) {
+      options.stateManagement = 'store';
+    }
+
+    if (options["package"] === 'zmp-ui') {
+      options.stateManagement = 'recoil';
+    }
+
+    delete options.themingCustomColor;
+    delete options.themingColor;
+    delete options.themingIconFonts;
+    delete options.useUIKits;
+    delete options.moreOptions;
+    return Promise.resolve(options);
+  });
+};