zmp-cli 3.8.3 → 3.9.1

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

@@ -1,8 +1,9 @@
+const templateIf = require('../../utils/template-if');
 const indent = require('../../utils/indent');
 const appParameters = require('../app-parameters');
 
 module.exports = (options) => {
-  const { theming, template } = options;
+  const { theming, template, stateManagement } = options;
   // Views
   let views = '';
   if (
@@ -11,37 +12,37 @@ module.exports = (options) => {
     template === 'blank'
   ) {
     views = indent(
-      12,
+      0,
+      `
+      {/* Your main view, should have "view-main" class */}
+      <View main className="safe-areas" url="/" />
       `
-    {/* Your main view, should have "view-main" class */}
-    <View main className="safe-areas" url="/" />
-  `
     ).trim();
   }
   if (template === 'tabs') {
     views = indent(
-      12,
+      0,
       `
-    {/* 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>
+      {/* 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>
-    `
+        <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>
+      `
     );
   }
 
@@ -49,45 +50,32 @@ module.exports = (options) => {
     0,
     `
     import React from 'react';
-   ${
-     ['blank', 'single-view'].indexOf(template) >= 0
-       ? `
-    import {
-      zmp,
-      zmpready,
-      App,
-      View,
-    } from 'zmp-framework/react';
+    ${['blank', 'single-view'].indexOf(template) >= 0
+      ? `
+    import { App, View } from 'zmp-framework/react';
     `.trim()
-       : `
-    import {
-      zmp,
-      zmpready,
-      App,
-      TabView,
-      View,
-      Tabbar,
-      Link,
-    } from 'zmp-framework/react';
-    `.trim()
-   }
-    import store from '../store';
+      : `
+    import { App, TabView, View, Tabbar, Link } from 'zmp-framework/react';
+    `.trim()}
+    ${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))}
       };
 
       ${`
-      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)}
+        ${indent(stateManagement === 'recoil' ? 2 : 0, `</App>`)}${stateManagement === 'recoil' ? `
+        </RecoilRoot>` : ''}
       );
       `.trim()}
     }
     export default MyApp;
-  `
+    `
   ).trim();
 };

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

@@ -11,7 +11,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 '${
@@ -19,16 +19,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(
@@ -64,10 +58,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-typescript/pages/about.js

@@ -15,19 +15,12 @@ module.exports = (options) => {
       return (
         <Page name="about">
           <NavbarBack title="About" />
-          <Box mt={2}>
+          <Box mt="2">
             <Card inset title="About My App">
               <p>This is a demo ZMP App!</p>
             </Card>
           </Box>
-          <Box mb={4}>
-            <Button
-              typeName="primary"
-              responsive
-              onClick={() => setActionSheetOpened(true)}
-            >
-              Back
-            </Button>
+          <Box mb="4">
             <Button
               typeName="secondary"
               responsive

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

@@ -2,6 +2,58 @@ 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,
     `

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

@@ -4,12 +4,83 @@ module.exports = (options) => {
   const { template } = options;
   const hideNavBar =
     template === 'tabs'
-      ? ` onPageBeforeIn={()=>{
+      ? `onPageBeforeIn={()=>{
       //hide navbar
       zmp.toolbar.hide('#app-tab-bar')
     }}`
       : '';
 
+  if (options.stateManagement === 'recoil') {
+    return indent(
+      0,
+      `
+      import React from 'react';
+      import { Button, Card, Input, Page, Box, zmp } from 'zmp-framework/react';
+      import { useRecoilState } from 'recoil';
+      import { userState } from '../state';
+      import NavbarBack from '../components/navbar-back';
+
+      const FormPage = () => {
+        const [user, setUser] = useRecoilState(userState)
+
+        const [form, setForm] = React.useState({ ...user });
+        const toast = React.useRef<any>(null)
+
+        const handleChangeInput = (field, value) => {
+          setForm({ ...form, [field]: value })
+        }
+
+        const handleSubmit = () => {
+          if (!toast.current) {
+            toast.current = zmp.toast.create({
+              text: 'Saved',
+              position: 'bottom',
+              closeTimeout: 2000,
+            })
+          }
+          setUser(form);
+          toast.current.open()
+        }
+
+        return (
+          <Page 
+            name="user-form" 
+            ${hideNavBar}
+          >
+            <NavbarBack title="Update user info" />
+            <Box>
+              <Card inset>
+                <Input
+                  id="name"
+                  label="Name"
+                  type="text"
+                  placeholder="Zalo"
+                  value={form?.name}
+                  onChange={(e) => handleChangeInput('name', e.target.value)}
+                />
+                <Input
+                  label="Avatar"
+                  type="text"
+                  placeholder="zalo@zalo.me"
+                  value={form?.avatar}
+                  onChange={(e) => handleChangeInput('avatar', e.target.value)}
+                />
+                <Box mx="0" mt="4">
+                  <Button responsive typeName="primary" onClick={handleSubmit}>
+                    Submit
+                  </Button>
+                </Box>
+              </Card>
+            </Box>
+          </Page>
+        )
+      }
+
+      export default FormPage;
+      `
+    ).trim();
+  }
+
   return indent(
     0,
     `
@@ -22,10 +93,7 @@ module.exports = (options) => {
     const FormPage = () => {
       const user = useStore('user')
 
-      const [form, setForm] = React.useState({
-        displayName: user.displayName,
-        email: user.email,
-      });
+      const [form, setForm] = React.useState({ ...user });
       const toast = React.useRef<any>(null)
 
       const handleChangeInput = (field, value) => {
@@ -53,21 +121,21 @@ module.exports = (options) => {
           <Box>
             <Card inset>
               <Input
-                id="displayName"
-                label="Display name"
+                id="name"
+                label="Name"
                 type="text"
                 placeholder="Zalo"
-                value={form?.displayName}
-                onChange={(e) => handleChangeInput('displayName', e.target.value)}
+                value={form?.name}
+                onChange={(e) => handleChangeInput('name', e.target.value)}
               />
               <Input
-                label="Email"
+                label="Avatar"
                 type="text"
                 placeholder="zalo@zalo.me"
-                value={form?.email}
-                onChange={(e) => handleChangeInput('email', e.target.value)}
+                value={form?.avatar}
+                onChange={(e) => handleChangeInput('avatar', e.target.value)}
               />
-              <Box mx={0} mt={4}>
+              <Box mx="0" mt="4">
                 <Button responsive typeName="primary" onClick={handleSubmit}>
                   Submit
                 </Button>

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

@@ -2,6 +2,43 @@ 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 { useRecoilValue } from 'recoil';
+      import {
+        Page,
+        List,
+        ListItem,
+        Title,
+        Box
+      } from "zmp-framework/react";
+      import UserCard from "../components/user-card";
+      import { userState } from '../state'
+  
+      const SettingsPage = () => {
+        const user = useRecoilValue(userState);
+  
+        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();
+  }
   return indent(
     0,
     `

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

@@ -1,15 +1,19 @@
 const indent = require('../../../utils/indent');
 
 module.exports = (options) => {
-  const { template } = options;
+  const { template, stateManagement } = options;
   const hideNavBar =
     template === 'tabs'
-      ? ` onPageBeforeIn={()=>{
+      ? `
+          onPageBeforeIn={()=>{
             //hide navbar
             zmp.toolbar.hide('#app-tab-bar')
           }}`
       : '';
-  const modules = ['Avatar', 'List', 'ListItem', 'Page', 'Title', 'useStore'];
+  const modules = ['Avatar', 'List', 'ListItem', 'Page', 'Title'];
+  if (stateManagement === 'store') {
+    modules.push('useStore');
+  }
   if (template === 'tabs') {
     modules.push('zmp');
   }
@@ -18,15 +22,16 @@ module.exports = (options) => {
     `
     import React from 'react'
     import { ${modules.join(', ')} } from 'zmp-framework/react'
-    import NavbarBack from '../components/navbar-back'
+    import NavbarBack from '../components/navbar-back'${stateManagement === 'recoil' ? `
+    import { useRecoilValue } from 'recoil';
+    import { userState } from '../state';` : ''}
 
     const UserPage = () => {
-      const user = useStore('user')
+      ${stateManagement === 'recoil' ? 'const user = useRecoilValue(userState);' : `const user = useStore('user')`}
 
       return (
         <Page 
-          name="user" 
-          ${hideNavBar}
+          name="user"${hideNavBar}
         >
           <NavbarBack
             title="User info"
@@ -34,12 +39,12 @@ module.exports = (options) => {
             labelRight="Edit"
           />
           <div style={{ textAlign: 'center', marginTop: 32 }}>
-            <Avatar story online size={96}>{user.avatar}</Avatar>
-            <Title style={{ marginTop: 8 }}>{user.displayName}</Title>
+            <Avatar story online src={user.avatar.startsWith('http') ? user.avatar : null}>{user.avatar}</Avatar>
+            <Title style={{ marginTop: 8 }}>{user.name}</Title>
           </div>
           <List>
-            <ListItem title="Display name" after={user.displayName} />
-            <ListItem title="Email" after={user.email} />
+            <ListItem title="Display name" after={user.name} />
+            <ListItem title="ID" after={user.id} />
           </List>
         </Page>
       )

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

@@ -7,6 +7,7 @@ module.exports = (options) => {
     cssPreProcessor,
     theming,
     customBuild,
+    includeTailwind
   } = options;
 
   let scripts = '';
@@ -19,7 +20,10 @@ module.exports = (options) => {
     import ZMP from '${customBuild ? './zmp-custom.js' : 'zmp-framework/core/lite-bundle'}';
 
     // Import ZMP-Vue Plugin
-    import ZMPVue, { registerComponents } from 'zmp-vue/bundle';
+    import ZMPVue, { registerComponents } from 'zmp-vue/bundle';${includeTailwind ? `
+
+    // Import tailwind styles
+    import './css/tailwind.css';` : ''}
 
     // Import ZMP Styles
     ${templateIf(customBuild, () => `

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

@@ -2,7 +2,8 @@ const generateNpmScripts = require('./generate-npm-scripts');
 const { generateTailWindScripts } = require('./generate-npm-scripts');
 
 module.exports = function generatePackageJson(options) {
-  const { name, framework, cssPreProcessor, includeTailwind } = options;
+  const { name, framework, cssPreProcessor, includeTailwind, stateManagement } =
+    options;
 
   // Dependencies
   const dependencies = ['zmp-framework', 'zmp-sdk', 'swiper'];
@@ -15,17 +16,25 @@ module.exports = function generatePackageJson(options) {
     'postcss@^8',
     'postcss-cli@^8',
   ];
+  const recoilDependencies = ['recoil'];
 
   if (framework === 'vue') {
     dependencies.push(...dependenciesVue);
   } else if (framework === 'react' || framework === 'react-typescript') {
     dependencies.push(...dependenciesReact);
+    if (stateManagement === 'recoil') {
+      dependencies.push(...recoilDependencies);
+    }
   }
 
   if (framework === 'react-typescript') {
     dependencies.push(...dependenciesReactTs);
   }
-  const devDependencies = ['cross-env', 'postcss-preset-env@6.7.0', 'vite'];
+  const devDependencies = [
+    'cross-env',
+    'postcss-preset-env@6.7.0',
+    'vite@2.6.14',
+  ];
   // CSS PreProcessor
   if (cssPreProcessor === 'stylus') devDependencies.push(...['stylus']);
   else if (cssPreProcessor === 'less') devDependencies.push(...['less']);

package/create/utils/get-options.js

@@ -2,7 +2,7 @@
 const inquirer = require('inquirer');
 var chalk = require('chalk');
 
-const moreOptionsText = chalk.italic(`\t- Including Tailwind CSS`);
+const moreOptionsText = chalk.italic(`\t- Including Tailwind CSS\n\t- Including Recoil (React only)`);
 const questions = [
   {
     type: 'list',
@@ -216,6 +216,23 @@ const questions = [
       },
     ],
   },
+  {
+    type: 'list',
+    name: 'stateManagement',
+    when: (opts) => 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() {
@@ -233,6 +250,9 @@ module.exports = function getOptions() {
     };
     options.customBuild = false;
     options.includeTailwind = options.moreOptions && options.includeTailwind;
+    if (!options.stateManagement) {
+      options.stateManagement = 'store';
+    }
     delete options.themingCustomColor;
     delete options.themingColor;
     delete options.themingIconFonts;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zmp-cli",
-  "version": "3.8.3",
+  "version": "3.9.1",
   "description": "ZMP command line utility (CLI)",
   "main": "index.js",
   "bin": {