zmp-cli 3.8.3 → 3.9.1

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/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/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();
+};

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

@@ -0,0 +1,112 @@
+const indent = require('../../../utils/indent');
+
+// eslint-disable-next-line no-unused-vars
+module.exports = (options) => {
+  if (options.stateManagement === 'recoil') {
+    return indent(
+      0,
+      `
+      import React from "react";
+      import { useRecoilState } from 'recoil';
+      import { Page, Title, List, ListItem, Box, Button } from 'zmp-framework/react';
+      import { productsState } from '../state';
+      
+      const CatalogPage = () => {
+        const [products, setProducts] = useRecoilState(productsState)
+
+        const addProduct = () => {
+          setProducts(p => [
+            ...p,
+            {
+              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();
+  }
+  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();
+};