zmp-cli 3.7.2 → 3.8.0

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

@@ -10,14 +10,23 @@ module.exports = (options) => {
 
   // Copy Pages
   let pages = [];
-  if (template !== 'blank')
-    pages.push(...['404', 'about', 'dynamic-route', 'user', 'form']);
-  if (template === 'tabs') pages.push(...['catalog', 'product', 'settings']);
+  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']);
 
   pages.forEach((p) => {
     const src = path.resolve(__dirname, 'pages', `${p}.jsx`);
-    const dest = path.resolve(cwd, 'src', '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`);
     toCopy.push({
       from: src,
       to: dest,

package/create/templates/react/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>
@@ -81,6 +82,21 @@ module.exports = (options) => {
           {/* 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()
+              : ''
+          }
+          ${
+            template === 'tabs'
+              ? `
+          {/* Grid apps */}
+          <AppItems />
+
           {/* Route */}
           <List>
             <ListItem title="Dynamic (Component) Route" link="/dynamic-route/?blog=45&post=125&foo=bar" />
@@ -93,6 +109,7 @@ module.exports = (options) => {
         </Page>
       );
     }
+    
     export default HomePage;
   `
   ).trim();

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

@@ -1,74 +1,12 @@
 const indent = require('../../utils/indent');
-const templateIf = require('../../utils/template-if');
 const appParameters = require('../app-parameters');
 
 module.exports = (options) => {
   const { template, theming } = options;
 
-  // Panels
-  const leftPanelPlain = indent(
-    12,
-    `
-    {/* Left panel with cover effect*/}
-    <Panel left cover themeDark>
-      <View>
-        <Page>
-          <Navbar title="Left Panel"/>
-          <Block>Left panel content goes here</Block>
-        </Page>
-      </View>
-    </Panel>
-  `
-  );
-
-  const leftPanelWithView = indent(
-    12,
-    `
-    {/* Left panel with cover effect when hidden */}
-    <Panel left cover themeDark visibleBreakpoint={960}>
-      <View>
-        <Page>
-          <Navbar title="Left Panel"/>
-          <BlockTitle>Left View Navigation</BlockTitle>
-          <List>
-            <ListItem link="/left-page-1/" title="Left Page 1"/>
-            <ListItem link="/left-page-2/" title="Left Page 2"/>
-          </List>
-          <BlockTitle>Control Main View</BlockTitle>
-          <List>
-            <ListItem link="/about/" view=".view-main" panelClose title="About"/>
-            <ListItem link="/form/" view=".view-main" panelClose title="Form"/>
-            <ListItem link="#" view=".view-main" back panelClose title="Back in history"/>
-          </List>
-        </Page>
-      </View>
-    </Panel>
-  `
-  );
-  const leftPanel =
-    template === 'split-view' ? leftPanelWithView : leftPanelPlain;
-  const rightPanel = indent(
-    12,
-    `
-    {/* Right panel with reveal effect*/}
-    <Panel right reveal themeDark>
-      <View>
-        <Page>
-          <Navbar title="Right Panel"/>
-          <Block>Right panel content goes here</Block>
-        </Page>
-      </View>
-    </Panel>
-  `
-  );
-
   // Views
   let views = '';
-  if (
-    template === 'single-view' ||
-    template === 'split-view' ||
-    template === 'blank'
-  ) {
+  if (template === 'single-view' || template === 'blank') {
     views = indent(
       12,
       `
@@ -81,25 +19,25 @@ module.exports = (options) => {
     views = indent(
       12,
       `
-      {/* Views/Tabs container */}
-      <Views tabs className="safe-areas">
-        {/* Tabbar for switching views-tabs */}
-        <Toolbar tabbar labels bottom>
-          <Link tabLink="#view-home" tabLinkActive iconIos="zmp:house_fill" iconAurora="zmp:house_fill" iconMd="material:home" text="Home" />
-          <Link tabLink="#view-catalog" iconIos="zmp:square_list_fill" iconAurora="zmp:square_list_fill" iconMd="material:view_list" text="Catalog" />
-          <Link tabLink="#view-settings" iconIos="zmp:gear" iconAurora="zmp:gear" iconMd="material:settings" text="Settings" />
-        </Toolbar>
-
-        {/* Your main view/tab, should have "view-main" class. It also has "tabActive" prop */}
-        <View id="view-home" main tab tabActive url="/" />
-
-        {/* Catalog View */}
-        <View id="view-catalog" name="catalog" tab url="/catalog/" />
+    {/* 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>
 
-        {/* Settings View */}
-        <View id="view-settings" name="settings" tab url="/settings/" />
-
-      </Views>
+      <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>
     `
     );
   }
@@ -123,120 +61,32 @@ module.exports = (options) => {
       zmp,
       zmpready,
       App,
-      Panel,
-      Views,
+      TabView,
       View,
-      Popup,
-      Page,
-      Navbar,
-      Toolbar,
-      NavRight,
+      Tabbar,
       Link,
-      Block,
-      BlockTitle,
-      LoginScreen,
-      LoginScreenTitle,
-      List,
-      ListItem,
-      ListInput,
-      ListButton,
-      BlockFooter
     } from 'zmp-framework/react';
     `.trim()
     }
     import store from '../store';
 
     const MyApp = () => {
-      ${templateIf(
-        ['blank', 'single-view'].indexOf(template) === -1,
-        () => `
-      // Login screen demo data
-      const [username, setUsername] = useState('');
-      const [password, setPassword] = useState('');
-      `
-      )}
       // ZMP Parameters
       const zmpparams = {
         ${indent(10, appParameters(options)).trim()}
       };
-      ${templateIf(
-        ['blank', 'single-view'].indexOf(template) === -1,
-        () => `
-      const alertLoginData = () => {
-        zmp.dialog.alert('Username: ' + username + '<br>Password: ' + password, () => {
-          zmp.loginScreen.close();
+      useEffect(()=>{
+        zmpready(() => {
+          // Call ZMP APIs here
         });
-      }
-      `
-      )}
-      zmpready(() => {
-        // Call ZMP APIs here
-      });
 
-      ${
-        ['blank', 'single-view'].indexOf(template) !== -1
-          ? `
+      },[])
+
       return (
         <App { ...zmpparams } ${theming.darkTheme ? 'themeDark' : ''}>
           ${views}
         </App>
       );
-      `.trim()
-          : `
-      return (
-        <App { ...zmpparams } ${theming.darkTheme ? 'themeDark' : ''}>
-          ${leftPanel}
-          ${rightPanel}
-          ${views}
-          {/* Popup */}
-          <Popup id="my-popup">
-            <View>
-              <Page>
-                <Navbar title="Popup">
-                  <NavRight>
-                    <Link popupClose>Close</Link>
-                  </NavRight>
-                </Navbar>
-                <Block>
-                  <p>Popup content goes here.</p>
-                </Block>
-              </Page>
-            </View>
-          </Popup>
-
-          <LoginScreen id="my-login-screen">
-            <View>
-              <Page loginScreen>
-                <LoginScreenTitle>Login</LoginScreenTitle>
-                <List form>
-                  <ListInput
-                    type="text"
-                    name="username"
-                    placeholder="Your username"
-                    value={username}
-                    onInput={(e) => setUsername(e.target.value)}
-                  ></ListInput>
-                  <ListInput
-                    type="password"
-                    name="password"
-                    placeholder="Your password"
-                    value={password}
-                    onInput={(e) => setPassword(e.target.value)}
-                  ></ListInput>
-                </List>
-                <List>
-                  <ListButton title="Sign In" onClick={() => alertLoginData()} />
-                  <BlockFooter>
-                    Some text about login information.<br />Click "Sign In" to close Login Screen
-                  </BlockFooter>
-                </List>
-              </Page>
-            </View>
-          </LoginScreen>
-        </App>
-      )
-      `.trim()
-      }
     }
     export default MyApp;
   `

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

@@ -7,7 +7,7 @@ module.exports = (options) => {
   // Webpack Routes
   const routes = ['/user', '/form', '/dynamic-route', '/about', '/404'];
   if (template === 'tabs') {
-    routes.push(...['/catalog', '/product', '/settings']);
+    routes.push(...['/catalog', '/settings']);
   } else if (template === 'split-view') {
     routes.push(...['/left-page-1', '/left-page-2']);
   }

package/create/templates/react/pages/catalog.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Page, Navbar, List, ListItem, Block, Button, useStore } from 'zmp-framework/react';
+import { Page, Title, List, ListItem, Box, Button, useStore } from 'zmp-framework/react';
 import store from '../store'
 
 const CatalogPage = () => {
@@ -15,21 +15,23 @@ const CatalogPage = () => {
 
   return (
     <Page name="catalog">
-      <Navbar title="Catalog" />
-      <List>
-        {products.map((product) => (
-          <ListItem
-            key={product.id}
-            title={product.title}
-            link={`/product/${product.id}/`}
-          />
-        ))}
-      </List>
-      {products.length === 3 && (
-        <Block>
-          <Button fill onClick={addProduct}>Add Product</Button>
-        </Block>
-      )}
+      <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>
   );
 }

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Button, Card, Input, Page, useStore, zmp, Box } from 'zmp-framework/react';
+import NavbarBack from '../components/navbar-back';
+
+import store from '../store'
+
+const FormPage = () => {
+  const user = useStore('user')
+  const toast = React.useRef(null)
+  const [form, setForm] = React.useState({
+    displayName: user.displayName,
+    email: user.email,
+  })
+  const handleChangeInput = (field, value) => {
+    setForm({ ...form, [field]: value })
+  }
+
+  const handleSubmit = () => {
+    if (!toast.current) {
+      toast.current = zmp.toast.create({
+        text: 'Saved',
+        position: 'bottom',
+        closeTimeout: 2000,
+      })
+    }
+    store.dispatch('setUser', form)
+    toast.current.open()
+  }
+
+  return (
+    <Page name="user-form" onPageBeforeIn={()=>{
+      //hide navbar
+      zmp.toolbar.hide('#app-tab-bar')
+    }}>
+      <NavbarBack title="Update user info" />
+      <Box>
+        <Card inset>
+          <Input
+            id="displayName"
+            label="Display name"
+            type="text"
+            placeholder="Zalo"
+            value={form?.displayName}
+            onChange={(e) => handleChangeInput('displayName', e.target.value)}
+          />
+          <Input
+            label="Email"
+            type="text"
+            placeholder="zalo@zalo.me"
+            value={form?.email}
+            onChange={(e) => handleChangeInput('email', e.target.value)}
+          />
+          <Box mx={0} mt={4}>
+            <Button responsive typeName="primary" onClick={handleSubmit}>
+              Submit
+            </Button>
+          </Box>
+        </Card>
+      </Box>
+    </Page>
+  )
+}
+
+export default FormPage;

package/create/templates/react/pages/settings.jsx

@@ -1,175 +1,28 @@
 import React from 'react';
 import {
   Page,
-  Navbar,
   List,
-  ListInput,
   ListItem,
-  Toggle,
-  BlockTitle,
-  Row,
-  Button,
-  Range,
-  Block
+  useStore,
+  Title,
+  Box
 } from 'zmp-framework/react';
+import UserCard from '../components/user-card';
 
-const SettingsPage = () => (
-  <Page name="settings">
-    <Navbar title="Settings" />
-
-    <BlockTitle>Form Example</BlockTitle>
-    <List noHairlinesMd>
-      <ListInput
-        label="Name"
-        type="text"
-        placeholder="Your name"
-      ></ListInput>
-
-      <ListInput
-        label="E-mail"
-        type="email"
-        placeholder="E-mail"
-      ></ListInput>
-
-      <ListInput
-        label="URL"
-        type="url"
-        placeholder="URL"
-      ></ListInput>
-
-      <ListInput
-        label="Password"
-        type="password"
-        placeholder="Password"
-      ></ListInput>
-
-      <ListInput
-        label="Phone"
-        type="tel"
-        placeholder="Phone"
-      ></ListInput>
-
-      <ListInput
-        label="Gender"
-        type="select"
-        >
-        <option>Male</option>
-        <option>Female</option>
-      </ListInput>
+const SettingsPage = () => {
+    const user = useStore('user');
 
-      <ListInput
-        label="Birth date"
-        type="date"
-        placeholder="Birth day"
-        defaultValue="2014-04-30"
-      ></ListInput>
-
-      <ListItem
-        title="Toggle"
-      >
-        <Toggle slot="after" />
+  return(
+  <Page name="settings">
+    <Box m={0} p={4}>
+      <Title>Settings</Title>
+      <List className='m-0'>
+        <ListItem link="/user/">
+          <UserCard user={user} />
       </ListItem>
-
-      <ListInput
-        label="Range"
-        input={false}
-      >
-        <Range slot="input" value={50} min={0} max={100} step={1} />
-      </ListInput>
-
-      <ListInput
-        type="textarea"
-        label="Textarea"
-        placeholder="Bio"
-      ></ListInput>
-      <ListInput
-        type="textarea"
-        label="Resizable"
-        placeholder="Bio"
-        resizable
-      ></ListInput>
-    </List>
-
-    <BlockTitle>Buttons</BlockTitle>
-    <Block strong>
-      <Row tag="p">
-        <Button className="col">Button</Button>
-        <Button className="col" fill>Fill</Button>
-      </Row>
-      <Row tag="p">
-        <Button className="col" raised>Raised</Button>
-        <Button className="col" raised fill>Raised Fill</Button>
-      </Row>
-      <Row tag="p">
-        <Button className="col" round>Round</Button>
-        <Button className="col" round fill>Round Fill</Button>
-      </Row>
-      <Row tag="p">
-        <Button className="col" outline>Outline</Button>
-        <Button className="col" round outline>Outline Round</Button>
-      </Row>
-      <Row tag="p">
-        <Button className="col" small outline>Small</Button>
-        <Button className="col" small round outline>Small Round</Button>
-      </Row>
-      <Row tag="p">
-        <Button className="col" small fill>Small</Button>
-        <Button className="col" small round fill>Small Round</Button>
-      </Row>
-      <Row tag="p">
-        <Button className="col" large raised>Large</Button>
-        <Button className="col" large fill raised>Large Fill</Button>
-      </Row>
-      <Row tag="p">
-        <Button className="col" large fill raised color="red">Large Red</Button>
-        <Button className="col" large fill raised color="green">Large Green</Button>
-      </Row>
-    </Block>
-
-    <BlockTitle>Checkbox group</BlockTitle>
-    <List>
-      <ListItem
-        checkbox
-        name="my-checkbox"
-        value="Books"
-        title="Books"
-      ></ListItem>
-      <ListItem
-        checkbox
-        name="my-checkbox"
-        value="Movies"
-        title="Movies"
-      ></ListItem>
-      <ListItem
-        checkbox
-        name="my-checkbox"
-        value="Food"
-        title="Food"
-      ></ListItem>
-    </List>
-
-    <BlockTitle>Radio buttons group</BlockTitle>
-    <List>
-      <ListItem
-        radio
-        name="radio"
-        value="Books"
-        title="Books"
-      ></ListItem>
-      <ListItem
-        radio
-        name="radio"
-        value="Movies"
-        title="Movies"
-      ></ListItem>
-      <ListItem
-        radio
-        name="radio"
-        value="Food"
-        title="Food"
-      ></ListItem>
-    </List>
+      </List>
+    </Box>
   </Page>
-);
+)};
 
 export default SettingsPage;

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

@@ -6,7 +6,7 @@ module.exports = function generatePackageJson(options) {
 
   // Dependencies
   const dependencies = ['zmp-framework', 'zmp-sdk', 'swiper'];
-  const dependenciesVue = ['vue@3', 'zmp-framework@next'];
+  const dependenciesVue = ['vue@3', 'zmp-framework'];
   const dependenciesReact = ['react', 'react-dom', 'prop-types'];
   const dependenciesReactTs = ['@types/react', '@types/react-dom'];
   const tailwindDependencies = [
@@ -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.2",
+  "version": "3.8.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"
   }
-}
+}