zmp-cli 3.15.7 → 3.15.8

package/create/templates/react/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/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/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/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(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(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/pages/index copy.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/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/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/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/vite.config.js

@@ -1,11 +0,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()],
-  })
-}

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

@@ -1,33 +0,0 @@
-{
-  "compilerOptions": {
-    "noEmit": true,
-    "target": "es6", 
-    "module": "esnext", 
-    "noImplicitAny": false,
-    "preserveConstEnums": true,
-    "jsx": "react", 
-    "lib": ["dom", "es5", "es6", "es7", "es2017"],
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "allowJs": true,
-    "skipLibCheck": true, 
-    "declaration": false,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "forceConsistentCasingInFileNames": true,
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "noFallthroughCasesInSwitch": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noUnusedLocals": false,
-    "strict": true,
-    "strictFunctionTypes": false,
-    "pretty": true,
-    "removeComments": true,
-    "sourceMap": true,
-    "resolveJsonModule": true
-  },
-  "exclude": ["node_modules"],
-  "include": ["src"]
-}

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

@@ -1,46 +0,0 @@
-"use strict";const o=require("../../../utils/indent");module.exports=e=>o(0,`
-    import React from 'react';
-    import { Icon, Grid, GridItem, ToastPreloader } from 'zmp-framework/react';
-    
-    const AppItems = () => {
-      const [toastLoading, setToastLoading] = React.useState(false);
-      const items = [
-        { icon: 'zi-chat-solid', label: 'Chat' },
-        { icon: 'zi-photo-solid', label: 'Photo' },
-        { icon: 'zi-star-solid', label: 'Star' },
-        { icon: 'zi-more-diamond-solid', label: 'Apps' },
-        { icon: 'zi-video-solid', label: 'Video' },
-        { icon: 'zi-shield-solid', label: 'Shield' },
-        { icon: 'zi-heart-solid', label: 'Heart' },
-        { icon: 'zi-calendar-solid', label: 'Calendar' },
-      ]
-    
-      const openToastLoading = () => {
-        setToastLoading(true);
-        setTimeout(() => {
-          setToastLoading(false);
-        }, 2000);
-      };
-    
-      return (
-        <div>
-          <ToastPreloader visible={toastLoading} text="Loading..." />
-          <Grid columns={4}>
-            {items.map(item => (
-              <GridItem
-                label={item.label}
-                style={{ backgroundColor: 'var(--zmp-color-w300)' }}
-                key={item.icon}
-                icon={<Icon zmp={item.icon as any} />}
-                onClick={openToastLoading}
-              />
-            ))}
-          </Grid>
-        </div>
-      )
-    }
-    
-    AppItems.displayName = 'zmp-app-items'
-    
-    export default AppItems
-  `).trim();

package/create/templates/react-typescript/components/index.js

@@ -1 +0,0 @@
-"use strict";const e=require("./app-items"),r=require("./navbar-back"),s=require("./user-card");module.exports={copyAppItems:e,copyNavbarBack:r,copyUserCard:s};

package/create/templates/react-typescript/components/navbar-back.js

@@ -1,33 +0,0 @@
-"use strict";const a=require("../../../utils/indent");module.exports=t=>a(0,`
-    import React from 'react';
-    import { Link, Navbar, NavLeft, Icon, NavTitle, NavRight } from 'zmp-framework/react';
-
-    interface NavBarProps {
-      title?: string, 
-      linkRight?: string, 
-      labelRight?: string
-    }
-
-    const NavbarBack: React.FunctionComponent<NavBarProps> = ({ title, linkRight, labelRight }) => {
-      return (
-        <Navbar>
-          <NavLeft >
-            <Link className="no-ripple" noLinkClass back>
-              <Icon zmp="zi-arrow-left" />
-            </Link>
-          </NavLeft>
-          <NavTitle>{title}</NavTitle>
-          {linkRight && labelRight && (
-            <NavRight>
-              <Link href={linkRight} className="no-ripple" noLinkClass>{labelRight}</Link>
-            </NavRight>
-          )}
-        </Navbar>
-      )
-    }
-
-    NavbarBack.displayName = 'zmp-navbar';
-
-
-    export default NavbarBack;
-  `).trim();

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

@@ -1,25 +0,0 @@
-"use strict";const r=require("../../../utils/indent");module.exports=e=>r(0,`
-    import React from 'react';
-    import { Avatar, Title } from 'zmp-framework/react';
-    import { userInfo } from 'zmp-sdk';
-
-    interface UserProps {
-      user: userInfo
-    }
-
-    const UserCard: React.FunctionComponent<UserProps> = ({ user }) => {
-      return (
-        <div style={{ display: 'flex', width: '100%' }}>
-          <Avatar story online src={user.avatar.startsWith('http') ? user.avatar : null}>{user.avatar}</Avatar>
-          <div style={{ marginLeft: 16 }}>
-            <Title style={{ marginBottom: 0 }}>{user.name}</Title>
-            <div>{user.id}</div>
-          </div>
-        </div>
-      )
-    };
-
-    UserCard.displayName = 'zmp-user-card'
-
-    export default UserCard;
-  `).trim();

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

@@ -1 +0,0 @@
-"use strict";const e=require("path"),t=require("./generate-home-page"),o=require("./generate-root"),n=require("../generate-store"),s=require("../generate-recoil"),r=require("./components"),c=require("./pages"),a=require("./vite.config");module.exports=p=>{let i=p.cwd||process.cwd(),{template:l,stateManagement:u}=p,m=[],f=[];return"blank"!==l&&f.push({fileName:"404",content:"copy404"},{fileName:"about",content:"copyAbout"},{fileName:"dynamic-route",content:"copyDynamicRoute"},{fileName:"user",content:"copyUser"},{fileName:"form",content:"copyForm"}),"tabs"===l&&f.push({fileName:"catalog",content:"copyCatalog"},{fileName:"settings",content:"copySettings"}),f.forEach(({fileName:t,content:o})=>{let n=e.resolve(i,"src","pages",`${t}.tsx`);m.push({content:c[o](p),to:n})}),m.push({content:t(p),to:e.resolve(i,"src","pages","index.tsx")}),[..."blank"!==l?[{fileName:"app-items",content:"copyAppItems"},{fileName:"navbar-back",content:"copyNavbarBack"},{fileName:"user-card",content:"copyUserCard"}]:[]].forEach(({fileName:t,content:o})=>{let n=e.resolve(i,"src","components",`${t}.tsx`);m.push({content:r[o](p),to:n})}),m.push({content:o(p),to:e.resolve(i,"src","components","app.tsx")}),"recoil"===u?m.push({content:s(p),to:e.resolve(i,"src","state.ts")}):m.push({content:n(p),to:e.resolve(i,"src","store.ts")}),m.push({content:a(p),to:e.resolve(i,"vite.config.ts")}),m.push({from:e.resolve(__dirname,"_tsconfig.json"),to:e.resolve(i,"tsconfig.json")}),m};