zmp-cli 3.15.7 → 3.15.8

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

@@ -1,81 +0,0 @@
-"use strict";const t=require("../../utils/indent");module.exports=e=>{let{name:a,template:i,theming:r,stateManagement:o}=e,{fillBars:s}=r,n="";return("single-view"===i||"blank"===i)&&(n=`
-          <p>Here is your blank ZMP app. Let's see what we have here.</p>
-    `),"split-view"===i&&(n=`
-          <p>This is an example of split view application layout, commonly used on tablets. The main approach of such kind of layout is that you can see different views at the same time.</p>
-
-          <p>Each view may have different layout, different navbar type (dynamic, fixed or static) or without navbar.</p>
-
-          <p>The fun thing is that you can easily control one view from another without any line of JavaScript just using "data-view" attribute on links.</p>
-    `),"tabs"===i&&(n=`
-          <p>Here is your blank ZMP app with tabs-layout. Let's see what we have here.</p>
-    `),t(0,`
-    import React from 'react';
-    ${"blank"===i?`
-    import {
-      Page,
-      Navbar,
-      NavTitleLarge,
-      Card
-    } from 'zmp-framework/react';
-    `.trim():`
-    import {
-      Page,
-      Navbar,
-      NavTitleLarge,
-      List,
-      ListItem,
-      Card,
-      ${"store"===o?"useStore,":""}
-    } from 'zmp-framework/react';${"recoil"===o?`
-    import { useRecoilValue } from 'recoil';
-    import { userState } from '../state';`:""}
-    import AppItems from '../components/app-items';
-    import UserCard from '../components/user-card';
-    `.trim()}
-
-    const HomePage = () => {
-      ${"blank"!==i?"recoil"===o?"const user = useRecoilValue(userState);":"const user = useStore('user');":""}
-      return (
-        <Page name="home" ${"tabs"===i?"":"navbarLarge"}>${"tabs"!==i?`
-          {/* Top Navbar */}
-          <Navbar ${s?"fill":""}>
-            <NavTitleLarge>${a}</NavTitleLarge>
-          </Navbar>`:""}
-          {/* Page content */}
-          <Card inset>
-            ${n.trim()}
-          </Card>
-          ${"blank"!==i&&"tabs"!==i?`
-          {/* User info */}
-          <List>
-            <ListItem link="/user/">
-              <UserCard user={user} />
-            </ListItem>
-          </List>
-
-          {/* 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():""}${"tabs"===i?`
-          {/* 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():""}
-        </Page>
-      );
-    }
-    
-    export default HomePage;
-  `).trim()};

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

@@ -1,50 +0,0 @@
-"use strict";const i=require("../../utils/template-if"),e=require("../../utils/indent"),a=require("../app-parameters");module.exports=t=>{let{theming:r,template:o,stateManagement:m}=t,n="";return("single-view"===o||"split-view"===o||"blank"===o)&&(n=e(0,`
-      {/* Your main view, should have "view-main" class */}
-      <View main className="safe-areas" url="/" />
-      `).trim()),"tabs"===o&&(n=e(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>
-
-        <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>
-      `)),e(0,`
-    import React from 'react';
-    ${["blank","single-view"].indexOf(o)>=0?`
-    import { App, View } from 'zmp-framework/react';
-    `.trim():`
-    import { App, TabView, View, Tabbar, Link } from 'zmp-framework/react';
-    `.trim()}
-    ${i("recoil"===m,()=>"import { RecoilRoot } from 'recoil';",()=>"import store from '../store';")}
-
-    const MyApp = () => {
-      // ZMP Parameters
-      const zmpparams = {
-${e(8,a(t))}
-      };
-
-      ${`
-      return (${"recoil"===m?`
-        <RecoilRoot>`:""}
-        ${e("recoil"===m?2:0,`<App {...zmpparams} ${r.darkTheme?"themeDark":""}>`)}
-${e("recoil"===m?12:10,n)}
-        ${e("recoil"===m?2:0,"</App>")}${"recoil"===m?`
-        </RecoilRoot>`:""}
-      );
-      `.trim()}
-    }
-    export default MyApp;
-    `).trim()};

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

@@ -1 +0,0 @@
-"use strict";module.exports=t=>{let{template:e}=t;if("blank"===e)return[];let r=["/user","/form","/dynamic-route","/about","/404"];return"tabs"===e&&r.push("/catalog","/settings"),r};

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

@@ -1,42 +0,0 @@
-"use strict";const t=require("../../utils/template-if"),o=require("../../utils/indent"),e=require("../../utils/styles-extension");module.exports=r=>{let{cssPreProcessor:p,theming:m,customBuild:s,includeTailwind:i}=r,n="";return(n+=o(0,`
-    // Import React and ReactDOM
-    import React from 'react';
-    import { createRoot } from 'react-dom/client';
-
-    // Import ZMP
-    import ZMP from '${s?"./zmp-custom.js":"zmp-framework/core/lite-bundle"}';
-
-    // Import ZMP-React Plugin
-    import ZMPReact from 'zmp-framework/react';${i?`
-
-    // Import tailwind styles
-    import './css/tailwind.css';`:""}
-
-    // Import ZMP Styles
-    ${t(s,()=>`
-    import './css/zmp-custom.less';
-    `,()=>`
-    import 'zmp-framework/${m.useUiKits?"zmp-bundle.min.css":"zmp.min.css"}';
-    `)}
-
-    // Import Icons and App Custom Styles
-    ${t(m.iconFonts,()=>`
-    import './css/icons.css';
-    `)}
-    import './css/app.${e(p)}';
-
-    // Import App Component
-    import App from './components/app';
-    import appConfig from '../app-config.json';
-
-    if (!(window as any).APP_CONFIG) {
-      (window as any).APP_CONFIG = appConfig
-    } 
-
-    // Init ZMP React Plugin
-    ZMP.use(ZMPReact)
-
-    // Mount React App
-    const root = createRoot(document.getElementById('app')!);
-    root.render(React.createElement(App));
-  `)).trim()};

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

@@ -1,19 +0,0 @@
-"use strict";const t=require("../../../utils/indent");module.exports=e=>t(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-typescript/pages/about.js

@@ -1,44 +0,0 @@
-"use strict";const t=require("../../../utils/indent");module.exports=o=>t(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-typescript/pages/catalog.js

@@ -1,98 +0,0 @@
-"use strict";const t=require("../../../utils/indent");module.exports=e=>"recoil"===e.stateManagement?t(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():t(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,72 +0,0 @@
-"use strict";const t=require("../../../utils/indent");module.exports=e=>t(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-typescript/pages/form.js

@@ -1,132 +0,0 @@
-"use strict";const e=require("../../../utils/indent");module.exports=t=>{let{template:a}=t,o="tabs"===a?`onPageBeforeIn={()=>{
-      //hide navbar
-      zmp.toolbar.hide('#app-tab-bar')
-    }}`:"";return"recoil"===t.stateManagement?e(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" 
-            ${o}
-          >
-            <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():e(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<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,
-          })
-        }
-        store.dispatch('setUser', form)
-        toast.current.open()
-      }
-
-      return (
-        <Page 
-          name="user-form" 
-          ${o}
-        >
-          <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-typescript/pages/index.js

@@ -1 +0,0 @@
-"use strict";const e=require("./user"),r=require("./form"),u=require("./dynamic-route"),i=require("./about"),t=require("./404"),o=require("./settings"),q=require("./catalog");module.exports={copyUser:e,copyForm:r,copyDynamicRoute:u,copyAbout:i,copy404:t,copySettings:o,copyCatalog:q};

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

@@ -1,62 +0,0 @@
-"use strict";const e=require("../../../utils/indent");module.exports=t=>"recoil"===t.stateManagement?e(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():e(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,37 +0,0 @@
-"use strict";const e=require("../../../utils/indent");module.exports=t=>{let{template:r,stateManagement:a}=t,s="tabs"===r?`
-          onPageBeforeIn={()=>{
-            //hide navbar
-            zmp.toolbar.hide('#app-tab-bar')
-          }}`:"",i=["Avatar","List","ListItem","Page","Title"];return"store"===a&&i.push("useStore"),"tabs"===r&&i.push("zmp"),e(0,`
-    import React from 'react'
-    import { ${i.join(", ")} } from 'zmp-framework/react'
-    import NavbarBack from '../components/navbar-back'${"recoil"===a?`
-    import { useRecoilValue } from 'recoil';
-    import { userState } from '../state';`:""}
-
-    const UserPage = () => {
-      ${"recoil"===a?"const user = useRecoilValue(userState);":"const user = useStore('user')"}
-
-      return (
-        <Page 
-          name="user"${s}
-        >
-          <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/vite.config.js

@@ -1,21 +0,0 @@
-const indent = require('../../utils/indent');
-
-module.exports = (options) => {
-  return indent(
-    0,
-    `
-    import { defineConfig } from 'vite'
-    import reactRefresh from '@vitejs/plugin-react-refresh'
-
-    // https://vitejs.dev/config/
-    export default () => {
-      return defineConfig({
-        root: './src',
-        base: '',
-        plugins: [reactRefresh()],
-      })
-    }
-
-  `
-  ).trim();
-};