zmp-cli 3.7.1 → 3.8.0-0

package/create/templates/react/pages/user-tabs.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import { Avatar, zmp, List, ListItem, Page, Title, useStore } from 'zmp-framework/react'
+import NavbarBack from '../components/navbar-back'
+
+const UserPage = () => {
+  const user = useStore('user')
+
+  return (
+    <Page name="user" onPageBeforeIn={()=>{
+      // hide navbar
+      zmp.toolbar.hide('#app-tab-bar')
+    }}>
+      <NavbarBack
+        title="User info"
+        linkRight="/form"
+        labelRight="Edit"
+      />
+      <div style={{ textAlign: 'center', marginTop: 32 }}>
+        <Avatar story online size={96}>{user.avatar}</Avatar>
+        <Title style={{ marginTop: 8 }}>{user.displayName}</Title>
+      </div>
+      <List>
+        <ListItem title="Display name" after={user.displayName} />
+        <ListItem title="Email" after={user.email} />
+      </List>
+    </Page>
+  )
+}
+
+export default UserPage;

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

@@ -23,6 +23,14 @@ module.exports = (options) => {
         { fileName: 'form', content: 'copyForm' },
       ]
     );
+  if (template === 'tabs') {
+    pages.push(
+      ...[
+        { fileName: 'catalog', content: 'copyCatalog' },
+        { fileName: 'settings', content: 'copySettings' },
+      ]
+    );
+  }
 
   pages.forEach(({ fileName, content }) => {
     const dest = path.resolve(cwd, 'src', 'pages', `${fileName}.tsx`);

package/create/templates/react-typescript/generate-home-page.js

@@ -1,5 +1,4 @@
 const indent = require('../../utils/indent');
-
 module.exports = (options) => {
   const { name, template, theming } = options;
   const { fillBars } = theming;
@@ -21,9 +20,7 @@ module.exports = (options) => {
   }
   if (template === 'tabs') {
     description = `
-          <p>This is an example of tabs-layout application. The main point of such tabbed layout is that each tab contains independent view with its own routing and navigation.</p>
-
-          <p>Each tab/view may have different layout, different navbar type (dynamic, fixed or static) or without navbar like this tab.</p>
+          <p>Here is your blank ZMP app with tabs-layout. Let's see what we have here.</p>
     `;
   }
 
@@ -59,17 +56,21 @@ module.exports = (options) => {
     const HomePage = () => {
       ${template !== 'blank' ? "const user = useStore('user');" : ''}
       return (
-        <Page name="home" navbarLarge>
-          {/* Top Navbar */}
+        <Page name="home" ${template === 'tabs' ? '' : 'navbarLarge'}>
+          ${
+            template !== 'tabs'
+              ? `{/* Top Navbar */}
           <Navbar ${fillBars ? 'fill' : ''}>
             <NavTitleLarge>${name}</NavTitleLarge>
-          </Navbar>
+          </Navbar>`
+              : ''
+          }
           {/* Page content */}
           <Card inset>
             ${description.trim()}
           </Card>
           ${
-            template !== 'blank'
+            template !== 'blank' && template !== 'tabs'
               ? `
           {/* User info */}
           <List>
@@ -84,6 +85,22 @@ module.exports = (options) => {
           {/* Route */}
           <List>
             <ListItem title="Dynamic (Component) Route" link="/dynamic-route/?blog=45&post=125&foo=bar" />
+            <ListItem title="Default Route (404)" link="/something-that-doesnt-exist" />
+            <ListItem title="About" link="/about/" />
+          </List>
+          `.trim()
+              : ''
+          }
+          ${
+            template === 'tabs'
+              ? `
+          {/* Grid apps */}
+          <AppItems />
+
+          {/* Route */}
+          <List>
+            <ListItem title="Dynamic (Component) Route" link="/dynamic-route/?blog=45&post=125&foo=bar" />
+            <ListItem title="Default Route (404)" link="/something-that-doesnt-exist" />
             <ListItem title="About" link="/about/" />
           </List>
           `.trim()
@@ -92,6 +109,7 @@ module.exports = (options) => {
         </Page>
       );
     }
+    
     export default HomePage;
   `
   ).trim();

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

@@ -18,18 +18,59 @@ module.exports = (options) => {
   `
     ).trim();
   }
+  if (template === 'tabs') {
+    views = indent(
+      12,
+      `
+    {/* TabView container */}
+    <TabView className="safe-areas">
+      {/* Tabbar for switching Tab*/}
+      <Tabbar bottom id="app-tab-bar">
+        <Link tabLink="#view-home" iconZMP="zi-home" tabLinkActive>
+          Home
+        </Link>
+        <Link tabLink="#view-catalog" iconZMP="zi-list-1">
+          Catalog
+        </Link>
+        <Link tabLink="#view-settings" iconZMP="zi-setting">
+          Settings
+        </Link>
+      </Tabbar>
+
+      <View id="view-home" main tab tabActive url="/" />
+      <View id="view-catalog" name="catalog" tab url="/catalog/" />
+      <View id="view-settings" name="settings" tab url="/settings/" />
+    </TabView>
+    `
+    );
+  }
+
   return indent(
     0,
     `
     import React from 'react';
-    ${`
+   ${
+     ['blank', 'single-view'].indexOf(template) >= 0
+       ? `
+    import {
+      zmp,
+      zmpready,
+      App,
+      View,
+    } from 'zmp-framework/react';
+    `.trim()
+       : `
     import {
       zmp,
       zmpready,
       App,
+      TabView,
       View,
+      Tabbar,
+      Link,
     } from 'zmp-framework/react';
-    `.trim()}
+    `.trim()
+   }
     import store from '../store';
 
     const MyApp = () => {

package/create/templates/react-typescript/generate-routes.js

@@ -5,6 +5,8 @@ module.exports = (options) => {
     return [];
   }
   const routes = ['/user', '/form', '/dynamic-route', '/about', '/404'];
-
+  if (template === 'tabs') {
+    routes.push(...['/catalog', '/settings']);
+  }
   return routes;
 };

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

@@ -1,5 +1,6 @@
 const indent = require('../../../utils/indent');
 
+// eslint-disable-next-line no-unused-vars
 module.exports = (options) => {
   return indent(
     0,
@@ -11,7 +12,7 @@ module.exports = (options) => {
     const NotFoundPage = () => (
       <Page>
         <NavbarBack title="Not found" />
-        <Box mt={2}>
+        <Box mt="2">
           <Card inset>
             <Title>Sorry</Title>
             <p>Requested content not found.</p>

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

@@ -1,5 +1,6 @@
 const indent = require('../../../utils/indent');
 
+// eslint-disable-next-line no-unused-vars
 module.exports = (options) => {
   return indent(
     0,

package/create/templates/react-typescript/pages/catalog.js

@@ -0,0 +1,60 @@
+const indent = require('../../../utils/indent');
+
+// eslint-disable-next-line no-unused-vars
+module.exports = (options) => {
+  return indent(
+    0,
+    `
+    import React from "react";
+    import {
+      Page,
+      Title,
+      List,
+      ListItem,
+      Box,
+      Button,
+      useStore
+    } from "zmp-framework/react";
+    import store from "../store";
+
+    const CatalogPage = () => {
+      const products = useStore("products");
+
+      const addProduct = () => {
+        store.dispatch("addProduct", {
+          id: "4",
+          title: "Apple iPhone 12",
+          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."
+        });
+      };
+
+      return (
+        <Page name="catalog">
+          <Box m="0" p="4">
+            <Title>Catalog</Title>
+            <List>
+              {products.map((product) => (
+                <ListItem
+                  key={product.id}
+                  title={product.title}
+                  link={\`/product/\${product.id}/\`}
+                />
+              ))}
+            </List>
+            {products.length === 3 && (
+              <Box>
+                <Button responsive typeName="secondary" onClick={addProduct}>
+                  Add Product
+                </Button>
+              </Box>
+            )}
+          </Box>
+        </Page>
+      );
+    };
+
+    export default CatalogPage;
+  `
+  ).trim();
+};

package/create/templates/react-typescript/pages/dynamic-route.js

@@ -1,5 +1,6 @@
 const indent = require('../../../utils/indent');
 
+// eslint-disable-next-line no-unused-vars
 module.exports = (options) => {
   return indent(
     0,

package/create/templates/react-typescript/pages/form.js

@@ -1,6 +1,15 @@
 const indent = require('../../../utils/indent');
 
 module.exports = (options) => {
+  const { template } = options;
+  const hideNavBar =
+    template === 'tabs'
+      ? ` onPageBeforeIn={()=>{
+      //hide navbar
+      zmp.toolbar.hide('#app-tab-bar')
+    }}`
+      : '';
+
   return indent(
     0,
     `
@@ -36,7 +45,10 @@ module.exports = (options) => {
       }
 
       return (
-        <Page name="user-form">
+        <Page 
+          name="user-form" 
+          ${hideNavBar}
+        >
           <NavbarBack title="Update user info" />
           <Box>
             <Card inset>

package/create/templates/react-typescript/pages/index.js

@@ -3,6 +3,8 @@ const copyForm = require('./form');
 const copyDynamicRoute = require('./dynamic-route');
 const copyAbout = require('./about');
 const copy404 = require('./404');
+const copySettings = require('./settings');
+const copyCatalog = require('./catalog');
 
 module.exports = {
   copyUser,
@@ -10,4 +12,6 @@ module.exports = {
   copyDynamicRoute,
   copyAbout,
   copy404,
+  copySettings,
+  copyCatalog,
 };

package/create/templates/react-typescript/pages/settings.js

@@ -0,0 +1,39 @@
+const indent = require('../../../utils/indent');
+
+// eslint-disable-next-line no-unused-vars
+module.exports = (options) => {
+  return indent(
+    0,
+    `
+    import React from "react";
+    import {
+      Page,
+      List,
+      ListItem,
+      useStore,
+      Title,
+      Box
+    } from "zmp-framework/react";
+    import UserCard from "../components/user-card";
+
+    const SettingsPage = () => {
+      const user = useStore("user");
+
+      return (
+        <Page name="settings">
+          <Box m="0" p="4">
+            <Title>Settings</Title>
+            <List className="m-0">
+              <ListItem link="/user/">
+                <UserCard user={user} />
+              </ListItem>
+            </List>
+          </Box>
+        </Page>
+      );
+    };
+
+    export default SettingsPage;
+  `
+  ).trim();
+};

package/create/templates/react-typescript/pages/user.js

@@ -1,18 +1,33 @@
 const indent = require('../../../utils/indent');
 
 module.exports = (options) => {
+  const { template } = options;
+  const hideNavBar =
+    template === 'tabs'
+      ? ` onPageBeforeIn={()=>{
+            //hide navbar
+            zmp.toolbar.hide('#app-tab-bar')
+          }}`
+      : '';
+  const modules = ['Avatar', 'List', 'ListItem', 'Page', 'Title', 'useStore'];
+  if (template === 'tabs') {
+    modules.push('zmp');
+  }
   return indent(
     0,
     `
     import React from 'react'
-    import { Avatar , List, ListItem, Page, Title, useStore } from 'zmp-framework/react'
+    import { ${modules.join(', ')} } from 'zmp-framework/react'
     import NavbarBack from '../components/navbar-back'
 
     const UserPage = () => {
       const user = useStore('user')
 
       return (
-        <Page name="user">
+        <Page 
+          name="user" 
+          ${hideNavBar}
+        >
           <NavbarBack
             title="User info"
             linkRight="/form"

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

@@ -5,7 +5,7 @@ module.exports = function generatePackageJson(options) {
   const { name, framework, cssPreProcessor, includeTailwind } = options;
 
   // Dependencies
-  const dependencies = ['zmp-framework', 'zmp-sdk', 'swiper'];
+  const dependencies = ['zmp-framework@1.7.0-0', 'zmp-sdk', 'swiper'];
   const dependenciesVue = ['vue@3', 'zmp-framework@next'];
   const dependenciesReact = ['react', 'react-dom', 'prop-types'];
   const dependenciesReactTs = ['@types/react', '@types/react-dom'];
@@ -72,9 +72,9 @@ module.exports = function generatePackageJson(options) {
   const content = `
 {
   "name": "${name
-      .toLowerCase()
-      .replace(/[ ]{2,}/, ' ')
-      .replace(/ /g, '-')}",
+    .toLowerCase()
+    .replace(/[ ]{2,}/, ' ')
+    .replace(/ /g, '-')}",
   "private": true,
   "version": "1.0.0",
   "description": "${name}",

package/create/utils/get-options.js

@@ -73,7 +73,8 @@ const questions = [
   {
     type: 'list',
     name: 'template',
-    when: (opts) => opts.newProject && opts.useUIKits && opts.framework !== 'vue',
+    when: (opts) =>
+      opts.newProject && opts.useUIKits && opts.framework !== 'vue',
     message: 'Choose starter template:',
     choices: [
       {
@@ -85,14 +86,8 @@ const questions = [
         value: 'single-view',
       },
       {
-        name: 'Tabbed Views (Tabs)',
+        name: 'Tabs Layout',
         value: 'tabs',
-        disabled: true,
-      },
-      {
-        name: 'Split View (Split Panel)',
-        value: 'split-view',
-        disabled: true,
       },
     ],
   },
@@ -100,7 +95,8 @@ const questions = [
   {
     type: 'list',
     name: 'template',
-    when: (opts) => opts.newProject && !opts.useUIKits && opts.framework !== 'vue',
+    when: (opts) =>
+      opts.newProject && !opts.useUIKits && opts.framework !== 'vue',
     message: 'Choose starter template:',
     choices: [
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zmp-cli",
-  "version": "3.7.1",
+  "version": "3.8.0-0",
   "description": "ZMP command line utility (CLI)",
   "main": "index.js",
   "bin": {
@@ -103,4 +103,4 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^5.0.0"
   }
-}
+}

package/scripts/dist/release.dev.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var exec = require('exec-sh');
+
+var inquirer = require('inquirer');
+
+var fs = require('fs');
+
+var path = require('path');
+
+var pkg = require('../package.json');
+
+function release() {
+  var options;
+  return regeneratorRuntime.async(function release$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return regeneratorRuntime.awrap(inquirer.prompt([{
+            type: 'input',
+            name: 'version',
+            message: 'Version:',
+            "default": pkg.version
+          }, {
+            type: 'list',
+            name: 'beta',
+            message: 'Beta?',
+            when: function when(opts) {
+              return opts.version.indexOf('-') >= 0;
+            },
+            choices: [{
+              name: 'YES',
+              value: true
+            }, {
+              name: 'NO',
+              value: false
+            }]
+          }, {
+            type: 'input',
+            name: 'branch',
+            message: 'Branch Name:',
+            when: function when(opts) {
+              return opts.beta;
+            },
+            "default": 'next'
+          }]));
+
+        case 2:
+          options = _context.sent;
+          pkg.version = options.version;
+          fs.writeFileSync(path.resolve(__dirname, '../package.json'), JSON.stringify(pkg, null, 2));
+          _context.next = 7;
+          return regeneratorRuntime.awrap(exec.promise('git pull'));
+
+        case 7:
+          _context.next = 9;
+          return regeneratorRuntime.awrap(exec.promise('npm i'));
+
+        case 9:
+          _context.next = 11;
+          return regeneratorRuntime.awrap(exec.promise('git add .'));
+
+        case 11:
+          _context.next = 13;
+          return regeneratorRuntime.awrap(exec.promise("git commit -m \"".concat(pkg.version, " release\"")));
+
+        case 13:
+          _context.next = 15;
+          return regeneratorRuntime.awrap(exec.promise('git push'));
+
+        case 15:
+          _context.next = 17;
+          return regeneratorRuntime.awrap(exec.promise("git tag v".concat(pkg.version)));
+
+        case 17:
+          _context.next = 19;
+          return regeneratorRuntime.awrap(exec.promise('git push origin --tags'));
+
+        case 19:
+          if (!options.beta) {
+            _context.next = 24;
+            break;
+          }
+
+          _context.next = 22;
+          return regeneratorRuntime.awrap(exec.promise("npm publish --tag ".concat(options.branch)));
+
+        case 22:
+          _context.next = 26;
+          break;
+
+        case 24:
+          _context.next = 26;
+          return regeneratorRuntime.awrap(exec.promise('npm publish'));
+
+        case 26:
+        case "end":
+          return _context.stop();
+      }
+    }
+  });
+}
+
+release();