zmp-cli 3.8.3-0 → 3.9.0

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

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

@@ -0,0 +1,80 @@
+const indent = require('../../../utils/indent');
+
+// eslint-disable-next-line no-unused-vars
+module.exports = (options) => {
+  return indent(
+    0,
+    `
+    import React from 'react'
+    import { Button, Box, List, ListItem, Page } from 'zmp-framework/react'
+    import NavbarBack from '../components/navbar-back';
+
+    const DymanicRoutePage = (props) => {
+      const { zmproute, zmprouter } = props;
+
+      return (
+        <Page name="dynamic-route">
+          <NavbarBack title="Dynamic (Component) Route" />
+          <List>
+            <ListItem>
+              <div>
+                <div><strong>Route</strong></div>
+                <div>{zmproute.route.path}</div>
+              </div>
+            </ListItem>
+            <ListItem>
+              <div>
+                <div><strong>Url</strong></div>
+                <div>{zmproute.url}</div>
+              </div>
+            </ListItem>
+            <ListItem>
+              <div>
+                <div><strong>Path</strong></div>
+                <div>{zmproute.path}</div>
+              </div>
+            </ListItem>
+            <ListItem>
+              <div>
+                <div><strong>Hash</strong></div>
+                <div>{zmproute.hash}</div>
+              </div>
+            </ListItem>
+            <ListItem>
+              <div>
+                <div><strong>Params</strong></div>
+                <div>
+                  <ul>
+                    {Object.keys(zmproute.params).map(key => (<li key={key}>{key}: {zmproute.params[key]}</li>))}
+                  </ul>
+                </div>
+              </div>
+            </ListItem>
+            <ListItem>
+            <div>
+                <div><strong>Query</strong></div>
+                <div>
+                  <ul>
+                    {Object.keys(zmproute.query).map(key => (<li key={key}>{key}: {zmproute.query[key]}</li>))}
+                  </ul>
+                </div>
+              </div>
+            </ListItem>
+          </List>
+          <Box px={4} mb={4}>
+            <Button
+              typeName="primary"
+              responsive
+              onClick={() => zmprouter.back()}
+            >
+              Go back via Router API
+            </Button>
+          </Box>
+        </Page>
+      )
+    }
+
+    export default DymanicRoutePage;
+  `
+  ).trim();
+};

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

@@ -0,0 +1,152 @@
+const indent = require('../../../utils/indent');
+
+module.exports = (options) => {
+  const { template } = options;
+  const hideNavBar =
+    template === 'tabs'
+      ? `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(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,
+    `
+    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 [form, setForm] = React.useState({ ...user });
+      const toast = React.useRef(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,
+          })
+        }
+        store.dispatch('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();
+};

package/create/templates/react/pages/index copy.js

@@ -0,0 +1,17 @@
+const copyUser = require('./user');
+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,
+  copyForm,
+  copyDynamicRoute,
+  copyAbout,
+  copy404,
+  copySettings,
+  copyCatalog,
+};

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

@@ -0,0 +1,17 @@
+const copyUser = require('./user');
+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,
+  copyForm,
+  copyDynamicRoute,
+  copyAbout,
+  copy404,
+  copySettings,
+  copyCatalog,
+};

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

@@ -0,0 +1,76 @@
+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,
+    `
+    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/pages/user.js

@@ -0,0 +1,56 @@
+const indent = require('../../../utils/indent');
+
+module.exports = (options) => {
+  const { template, stateManagement } = options;
+  const hideNavBar =
+    template === 'tabs'
+      ? `
+          onPageBeforeIn={()=>{
+            //hide navbar
+            zmp.toolbar.hide('#app-tab-bar')
+          }}`
+      : '';
+  const modules = ['Avatar', 'List', 'ListItem', 'Page', 'Title'];
+  if (stateManagement === 'store') {
+    modules.push('useStore');
+  }
+  if (template === 'tabs') {
+    modules.push('zmp');
+  }
+  return indent(
+    0,
+    `
+    import React from 'react'
+    import { ${modules.join(', ')} } from 'zmp-framework/react'
+    import NavbarBack from '../components/navbar-back'${stateManagement === 'recoil' ? `
+    import { useRecoilValue } from 'recoil';
+    import { userState } from '../state';` : ''}
+
+    const UserPage = () => {
+      ${stateManagement === 'recoil' ? 'const user = useRecoilValue(userState);' : `const user = useStore('user')`}
+
+      return (
+        <Page 
+          name="user"${hideNavBar}
+        >
+          <NavbarBack
+            title="User info"
+            linkRight="/form"
+            labelRight="Edit"
+          />
+          <div style={{ textAlign: 'center', marginTop: 32 }}>
+            <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.name} />
+            <ListItem title="ID" after={user.id} />
+          </List>
+        </Page>
+      )
+    }
+
+    export default UserPage;
+  `
+  ).trim();
+};

package/create/templates/react-typescript/_tsconfig.json

@@ -5,7 +5,6 @@
     "module": "esnext", 
     "noImplicitAny": false,
     "preserveConstEnums": true,
-    "baseUrl": "./src",
     "jsx": "react", 
     "lib": ["dom", "es5", "es6", "es7", "es2017"],
     "allowSyntheticDefaultImports": true,

package/create/templates/react-typescript/components/app-items.js

@@ -36,7 +36,7 @@ module.exports = (options) => {
                 label={item.label}
                 style={{ backgroundColor: 'var(--zmp-color-w300)' }}
                 key={item.icon}
-                icon={<Icon zmp={item.icon} />}
+                icon={<Icon zmp={item.icon as any} />}
                 onClick={openToastLoading}
               />
             ))}

package/create/templates/react-typescript/components/user-card.js

@@ -6,25 +6,19 @@ module.exports = (options) => {
     `
     import React from 'react';
     import { Avatar, Title } from 'zmp-framework/react';
+    import { userInfo } from 'zmp-sdk';
 
-    interface User {
-      online?: boolean,
-      avatar?: any,
-      displayName?: string,
-      email?: string,
-      story?: boolean,
-    }
     interface UserProps {
-      user?: User
+      user: userInfo
     }
 
-    const UserCard: React.FunctionComponent<UserProps> = ({ user = {} }) => {
+    const UserCard: React.FunctionComponent<UserProps> = ({ 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-typescript/copy-assets.js

@@ -2,13 +2,14 @@ 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 copyComponents = require('./components');
 const copyPages = require('./pages');
 const copyViteConfig = require('./vite.config');
 
 module.exports = (options) => {
   const cwd = options.cwd || process.cwd();
-  const { template } = options;
+  const { template, stateManagement } = options;
   const toCopy = [];
 
   // Copy Pages
@@ -48,10 +49,10 @@ module.exports = (options) => {
   const components = [
     ...(template !== 'blank'
       ? [
-          { fileName: 'app-items', content: 'copyAppItems' },
-          { fileName: 'navbar-back', content: 'copyNavbarBack' },
-          { fileName: 'user-card', content: 'copyUserCard' },
-        ]
+        { fileName: 'app-items', content: 'copyAppItems' },
+        { fileName: 'navbar-back', content: 'copyNavbarBack' },
+        { fileName: 'user-card', content: 'copyUserCard' },
+      ]
       : []),
   ];
   components.forEach(({ fileName, content }) => {
@@ -67,10 +68,17 @@ module.exports = (options) => {
     to: path.resolve(cwd, 'src', 'components', 'app.tsx'),
   });
 
-  toCopy.push({
-    content: generateStore(options),
-    to: path.resolve(cwd, 'src', 'store.ts'),
-  });
+  if (stateManagement === 'recoil') {
+    toCopy.push({
+      content: generateRecoil(options),
+      to: path.resolve(cwd, 'src', 'state.ts'),
+    });
+  } else {
+    toCopy.push({
+      content: generateStore(options),
+      to: path.resolve(cwd, 'src', 'store.ts'),
+    });
+  }
 
   toCopy.push({
     content: copyViteConfig(options),

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

@@ -0,0 +1,23 @@
+"use strict";
+
+var templateIf = require('../../utils/template-if');
+
+var indent = require('../../utils/indent');
+
+var stylesExtension = require('../../utils/styles-extension');
+
+module.exports = function (options) {
+  var cssPreProcessor = options.cssPreProcessor,
+      theming = options.theming,
+      customBuild = options.customBuild,
+      includeTailwind = options.includeTailwind;
+  var scripts = '';
+  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/".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';\n    import appConfig from '../app-config.json';\n\n    if (!(window as any).APP_CONFIG) {\n      (window as any).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();
+};