zmp-cli 3.8.3-0 → 3.9.0

package/create/templates/app-parameters.js

@@ -2,15 +2,17 @@ const indent = require('../utils/indent');
 const templateIf = require('../utils/template-if');
 
 module.exports = (options) => {
-  const { framework, pkg, name, bundler } = options;
+  const { framework, pkg, name, bundler, stateManagement } = options;
 
   return indent(
     0,
     `
     name: '${name}', // App name
     theme: 'auto', // Automatic theme detection
+    ${templateIf(stateManagement === 'store', () => `
     // App store
     store: store,
+    `)}
     ${templateIf(framework === 'core', () => `el: '#app', // App root element`)}
     ${templateIf(
       framework === 'core' && bundler,
@@ -26,6 +28,6 @@ module.exports = (options) => {
     },
     `
     )}
-  `
+    `
   ).trim();
 };

package/create/templates/copy-assets.js

@@ -43,10 +43,6 @@ module.exports = (options, iconFile) => {
         from: path.resolve(__dirname, 'common', 'tailwind', 'tailwind.css'),
         to: path.resolve(cwd, srcFolder, 'css', 'tailwind.css'),
       },
-      {
-        from: path.resolve(__dirname, 'common', 'tailwind', 'styles.css'),
-        to: path.resolve(cwd, srcFolder, 'css', 'styles.css'),
-      },
       {
         from: path.resolve(
           __dirname,

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/generate-recoil.js

@@ -0,0 +1,56 @@
+const indent = require('../utils/indent');
+const templateIf = require('../utils/template-if');
+
+module.exports = (options) => {
+  const { framework, template } = options;
+
+  const productState = `
+
+export const productsState = atom({
+  key: "products",
+  default: [
+    {
+      id: '1',
+      title: 'Apple iPhone 8',
+      description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi tempora similique reiciendis, error nesciunt vero, blanditiis pariatur dolor, minima sed sapiente rerum, dolorem corrupti hic modi praesentium unde saepe perspiciatis.'
+    },
+    {
+      id: '2',
+      title: 'Apple iPhone 8 Plus',
+      description: 'Velit odit autem modi saepe ratione totam minus, aperiam, labore quia provident temporibus quasi est ut aliquid blanditiis beatae suscipit odio vel! Nostrum porro sunt sint eveniet maiores, dolorem itaque!'
+    },
+    {
+      id: '3',
+      title: 'Apple iPhone X',
+      description: 'Expedita sequi perferendis quod illum pariatur aliquam, alias laboriosam! Vero blanditiis placeat, mollitia necessitatibus reprehenderit. Labore dolores amet quos, accusamus earum asperiores officiis assumenda optio architecto quia neque, quae eum.'
+    },
+  ]
+});`;
+
+  if (framework === 'react-typescript') {
+    return `
+import { atom } from "recoil";
+import { userInfo } from 'zmp-sdk';
+
+export const userState = atom<userInfo>({
+  key: "user",
+  default: {
+    id: '12345678',
+    name: 'Zalo',
+    avatar: 'ZA',
+  }
+})
+${templateIf(template === 'tabs', () => productState)}`;
+  }
+  return `import { atom } from "recoil";
+
+export const userState = atom({
+  key: "user",
+  default: {
+    id: '12345678',
+    name: 'Zalo',
+    avatar: 'ZA',
+  }
+})
+${templateIf(template === 'tabs', () => productState)}`;
+};

package/create/templates/generate-store.js

@@ -42,11 +42,9 @@ module.exports = (options) => {
   const store = createStore({
     state: {
       user: {
-        displayName: 'Zalo',
-        email: 'zte@zalo.me',
+        id: '12345678',
+        name: 'Zalo',
         avatar: 'ZA',
-        online: true,
-        story: true
       },
       products: [
         {

package/create/templates/generate-styles.js

@@ -2,7 +2,7 @@ const indent = require('../utils/indent');
 const { colorThemeCSSProperties } = require('../utils/colors');
 
 module.exports = (options) => {
-  const { template, theming, includeTailwind } = options;
+  const { template, theming } = options;
   const { customColor, color, fillBars } = theming;
 
   let styles = '';
@@ -44,15 +44,6 @@ module.exports = (options) => {
     );
   }
 
-  if (includeTailwind) {
-    styles += indent(
-      0,
-      `
-      @import "./tailwind.css";
-    `
-    );
-  }
-
   if (template === 'split-view') {
     styles += indent(
       0,

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

@@ -4,10 +4,10 @@ import { Avatar, Title } from 'zmp-framework/react';
 const UserCard = ({ user }) => {
   return (
     <div style={{ display: 'flex', width: '100%' }}>
-      <Avatar story={user.story} online={user.online}>{user.avatar}</Avatar>
+      <Avatar story online src={user.avatar.startsWith('http') ? user.avatar : null}>{user.avatar}</Avatar>
       <div style={{ marginLeft: 16 }}>
-        <Title style={{ marginBottom: 0 }}>{user.displayName}</Title>
-        <div>{user.email}</div>
+        <Title style={{ marginBottom: 0 }}>{user.name}</Title>
+        <div>{user.id}</div>
       </div>
     </div>
   )

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

@@ -2,36 +2,45 @@ const path = require('path');
 const generateHomePage = require('./generate-home-page');
 const generateRoot = require('./generate-root');
 const generateStore = require('../generate-store');
+const generateRecoil = require('../generate-recoil');
+const copyPages = require('./pages');
 
 module.exports = (options) => {
   const cwd = options.cwd || process.cwd();
-  const { template } = options;
+  const { template, stateManagement } = options;
   const toCopy = [];
 
   // Copy Pages
+
   let pages = [];
-  if (template !== 'blank') pages.push(...['404', 'about', 'dynamic-route']);
-  if (template !== 'blank' && template !== 'tabs')
-    pages.push(...['user', 'form']);
-  if (template === 'tabs')
-    pages.push(...['catalog', 'settings', 'form-tabs', 'user-tabs']);
-  if (template === 'split-view') pages.push(...['left-page-1', 'left-page-2']);
+  if (template !== 'blank')
+    pages.push(
+      ...[
+        { fileName: '404', content: 'copy404' },
+        { fileName: 'about', content: 'copyAbout' },
+        { fileName: 'dynamic-route', content: 'copyDynamicRoute' },
+        { fileName: 'user', content: 'copyUser' },
+        { fileName: 'form', content: 'copyForm' },
+      ]
+    );
+  if (template === 'tabs') {
+    pages.push(
+      ...[
+        { fileName: 'catalog', content: 'copyCatalog' },
+        { fileName: 'settings', content: 'copySettings' },
+      ]
+    );
+  }
 
-  pages.forEach((p) => {
-    const src = path.resolve(__dirname, 'pages', `${p}.jsx`);
-    let destPage = p;
-    if (p === 'user-tabs') {
-      destPage = 'user';
-    }
-    if (p === 'form-tabs') {
-      destPage = 'form';
-    }
-    const dest = path.resolve(cwd, 'src', 'pages', `${destPage}.jsx`);
+  pages.forEach(({ fileName, content }) => {
+    const dest = path.resolve(cwd, 'src', 'pages', `${fileName}.jsx`);
     toCopy.push({
-      from: src,
+      content: copyPages[content](options),
       to: dest,
     });
   });
+
+
   toCopy.push({
     content: generateHomePage(options),
     to: path.resolve(cwd, 'src', 'pages', 'index.jsx'),
@@ -55,10 +64,17 @@ module.exports = (options) => {
     to: path.resolve(cwd, 'src', 'components', 'app.jsx'),
   });
 
-  toCopy.push({
-    content: generateStore(options),
-    to: path.resolve(cwd, 'src', 'store.js'),
-  });
+  if (stateManagement === 'recoil') {
+    toCopy.push({
+      content: generateRecoil(options),
+      to: path.resolve(cwd, 'src', 'state.js'),
+    });
+  } else {
+    toCopy.push({
+      content: generateStore(options),
+      to: path.resolve(cwd, 'src', 'store.js'),
+    });
+  }
 
   toCopy.push({
     from: path.resolve(__dirname, 'vite.config.js'),

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

@@ -9,14 +9,15 @@ var stylesExtension = require('../../utils/styles-extension');
 module.exports = function (options) {
   var cssPreProcessor = options.cssPreProcessor,
       theming = options.theming,
-      customBuild = options.customBuild;
+      customBuild = options.customBuild,
+      includeTailwind = options.includeTailwind;
   var scripts = '';
-  scripts += indent(0, "\n    // Import React and ReactDOM\n    import React from 'react';\n    import ReactDOM from 'react-dom';\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';\n\n    // Import ZMP Styles\n    ").concat(templateIf(customBuild, function () {
+  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/zmp-bundle.min.css';\n    ";
+    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    ReactDOM.render(\n      React.createElement(App),\n      document.getElementById('app'),\n    );\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/generate-home-page.js

@@ -1,6 +1,6 @@
 const indent = require('../../utils/indent');
 module.exports = (options) => {
-  const { name, template, theming } = options;
+  const { name, template, theming, stateManagement } = options;
   const { fillBars } = theming;
 
   let description = '';
@@ -45,21 +45,21 @@ module.exports = (options) => {
       NavTitleLarge,
       List,
       ListItem,
-      useStore,
       Card,
-    } from 'zmp-framework/react';
+      ${stateManagement === 'store' ? 'useStore,' : ''}
+    } from 'zmp-framework/react';${stateManagement === 'recoil' ? `
+    import { useRecoilValue } from 'recoil';
+    import { userState } from '../state';` : ''}
     import AppItems from '../components/app-items';
     import UserCard from '../components/user-card';
     `.trim()
     }
 
     const HomePage = () => {
-      ${template !== 'blank' ? "const user = useStore('user');" : ''}
+      ${template !== 'blank' ? (stateManagement === 'recoil' ? "const user = useRecoilValue(userState);" : "const user = useStore('user');") : ''}
       return (
-        <Page name="home" ${template === 'tabs' ? '' : 'navbarLarge'}>
-          ${
-            template !== 'tabs'
-              ? `{/* Top Navbar */}
+        <Page name="home" ${template === 'tabs' ? '' : 'navbarLarge'}>${template !== 'tabs' ? `
+          {/* Top Navbar */}
           <Navbar ${fillBars ? 'fill' : ''}>
             <NavTitleLarge>${name}</NavTitleLarge>
           </Navbar>`
@@ -90,10 +90,7 @@ module.exports = (options) => {
           </List>
           `.trim()
               : ''
-          }
-          ${
-            template === 'tabs'
-              ? `
+          }${template === 'tabs' ? `
           {/* Grid apps */}
           <AppItems />
 
@@ -103,9 +100,7 @@ module.exports = (options) => {
             <ListItem title="Default Route (404)" link="/something-that-doesnt-exist" />
             <ListItem title="About" link="/about/" />
           </List>
-          `.trim()
-              : ''
-          }
+          `.trim() : ''}
         </Page>
       );
     }

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

@@ -1,14 +1,15 @@
+const templateIf = require('../../utils/template-if');
 const indent = require('../../utils/indent');
 const appParameters = require('../app-parameters');
 
 module.exports = (options) => {
-  const { template, theming } = options;
+  const { template, theming, stateManagement } = options;
 
   // Views
   let views = '';
   if (template === 'single-view' || template === 'blank') {
     views = indent(
-      12,
+      0,
       `
       {/* Your main view, should have "view-main" class */}
       <View main className="safe-areas" url="/" />
@@ -17,7 +18,7 @@ module.exports = (options) => {
   }
   if (template === 'tabs') {
     views = indent(
-      12,
+      0,
       `
     {/* TabView container */}
     <TabView className="safe-areas">
@@ -45,48 +46,37 @@ module.exports = (options) => {
   return indent(
     0,
     `
-    import React, { useState, useEffect } from 'react';
-    ${
-      ['blank', 'single-view'].indexOf(template) >= 0
-        ? `
-    import {
-      zmp,
-      zmpready,
-      App,
-      View,
-    } from 'zmp-framework/react';
+    import React, { useEffect } from 'react';
+    ${['blank', 'single-view'].indexOf(template) >= 0
+      ? `
+    import { zmpready, App, View } from 'zmp-framework/react';
     `.trim()
-        : `
-    import {
-      zmp,
-      zmpready,
-      App,
-      TabView,
-      View,
-      Tabbar,
-      Link,
-    } from 'zmp-framework/react';
+      : `
+    import { zmpready, App, TabView, View, Tabbar, Link } from 'zmp-framework/react';
     `.trim()
     }
-    import store from '../store';
+    ${templateIf(stateManagement === 'recoil', () => `import { RecoilRoot } from 'recoil';`, () => `import store from '../store';`)}
 
     const MyApp = () => {
       // ZMP Parameters
       const zmpparams = {
-        ${indent(10, appParameters(options)).trim()}
+${indent(8, appParameters(options))}
       };
-      useEffect(()=>{
+      useEffect(() => {
         zmpready(() => {
           // Call ZMP APIs here
         });
+      }, [])
 
-      },[])
-
-      return (
-        <App { ...zmpparams } ${theming.darkTheme ? 'themeDark' : ''}>
-          ${views}
-        </App>
+      ${`
+      return (${stateManagement === 'recoil' ? `
+        <RecoilRoot>` : ''}
+        ${indent(stateManagement === 'recoil' ? 2 : 0, `<App {...zmpparams} ${theming.darkTheme ? 'themeDark' : ''}>`)}
+${indent(stateManagement === 'recoil' ? 12 : 10, views.trim())}
+        ${indent(stateManagement === 'recoil' ? 2 : 0, `</App>`)}${stateManagement === 'recoil' ? `
+        </RecoilRoot>` : ''}
       );
+      `.trim()}
     }
     export default MyApp;
   `

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

@@ -12,7 +12,7 @@ module.exports = (options) => {
     `
     // Import React and ReactDOM
     import React from 'react';
-    import ReactDOM from 'react-dom';
+    import { createRoot } from 'react-dom/client';
 
     // Import ZMP
     import ZMP from '${
@@ -20,16 +20,10 @@ module.exports = (options) => {
     }';
 
     // Import ZMP-React Plugin
-    import ZMPReact from 'zmp-framework/react';
+    import ZMPReact from 'zmp-framework/react';${includeTailwind ? `
 
-    ${templateIf(
-      includeTailwind,
-      () => `    
-      // Import tailwind styles
-      import './css/styles.css';
-        `,
-      () => ''
-    )}
+    // Import tailwind styles
+    import './css/tailwind.css';` : ''}
 
     // Import ZMP Styles
     ${templateIf(
@@ -65,10 +59,8 @@ module.exports = (options) => {
     ZMP.use(ZMPReact)
 
     // Mount React App
-    ReactDOM.render(
-      React.createElement(App),
-      document.getElementById('app'),
-    );
+    const root = createRoot(document.getElementById('app'));
+    root.render(React.createElement(App));
   `
   );
 

package/create/templates/react/pages/404.js

@@ -0,0 +1,27 @@
+const indent = require('../../../utils/indent');
+
+// eslint-disable-next-line no-unused-vars
+module.exports = (options) => {
+  return indent(
+    0,
+    `
+    import React from 'react';
+    import { Page, Card, Title, Box } from 'zmp-framework/react';
+    import NavbarBack from '../components/navbar-back';
+    
+    const NotFoundPage = () => (
+      <Page>
+        <NavbarBack title="Not found" />
+        <Box mt="2">
+          <Card inset>
+            <Title>Sorry</Title>
+            <p>Requested content not found.</p>
+          </Card>
+        </Box>
+      </Page>
+    );
+    
+    export default NotFoundPage;    
+  `
+  ).trim();
+};

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

@@ -0,0 +1,52 @@
+const indent = require('../../../utils/indent');
+
+// eslint-disable-next-line no-unused-vars
+module.exports = (options) => {
+  return indent(
+    0,
+    `
+    import React from 'react'
+    import { Actions, ActionsButton, ActionsGroup, ActionsLabel, Button, Card, Page, Box } from 'zmp-framework/react';
+    import NavbarBack from '../components/navbar-back';
+
+    const AboutPage = (props) => {
+      const [actionSheetOpened, setActionSheetOpened] = React.useState(false);
+
+      return (
+        <Page name="about">
+          <NavbarBack title="About" />
+          <Box mt="2">
+            <Card inset title="About My App">
+              <p>This is a demo ZMP App!</p>
+            </Card>
+          </Box>
+          <Box mb="4">
+            <Button
+              typeName="secondary"
+              responsive
+              onClick={() => setActionSheetOpened(true)}
+            >
+              Back
+            </Button>
+          </Box>
+          <Actions
+            opened={actionSheetOpened}
+            onActionsClosed={() => setActionSheetOpened(false)}
+            id="actions-two-groups"
+          >
+            <ActionsGroup>
+              <ActionsLabel>Are you sure?</ActionsLabel>
+              <ActionsButton  onClick={() => props.zmprouter.back()}>Navigate back</ActionsButton>
+            </ActionsGroup>
+            <ActionsGroup>
+              <ActionsButton>Cancel</ActionsButton>
+            </ActionsGroup>
+          </Actions>
+        </Page>
+      )
+    }
+
+    export default AboutPage;
+  `
+  ).trim();
+};