zmp-cli 3.15.6 → 3.15.8

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

@@ -1,152 +0,0 @@
-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<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,
-    `
-    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" 
-          ${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-typescript/pages/index.js

@@ -1,17 +0,0 @@
-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-typescript/pages/settings.js

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

@@ -1,56 +0,0 @@
-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/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();
-};

package/create/templates/svelte/babel.config.js

@@ -1,10 +0,0 @@
-module.exports = {
-  presets: [
-    ['@babel/preset-env', {
-      modules: false,
-    }],
-  ],
-  plugins: [
-    '@babel/plugin-transform-runtime',
-  ],
-};

package/create/templates/svelte/copy-assets.js

@@ -1,47 +0,0 @@
-const path = require('path');
-const generateHomePage = require('./generate-home-page');
-const generateRoot = require('./generate-root');
-const generateStore = require('../generate-store');
-
-module.exports = (options) => {
-  const cwd = options.cwd || process.cwd();
-  const { template, bundler } = options;
-  const toCopy = [];
-
-  // Copy Pages
-  const pages = [
-    ...(template !== 'blank' ? ['404', 'about', 'dynamic-route', 'form'] : []),
-    ...(template === 'tabs' ? ['catalog', 'product', 'settings'] : []),
-    ...(template === 'split-view' ? ['left-page-1', 'left-page-2'] : []),
-  ];
-
-  pages.forEach((p) => {
-    const src = path.resolve(__dirname, 'pages', `${p}.svelte`);
-    const dest = path.resolve(cwd, 'src', 'pages', `${p}.svelte`);
-    toCopy.push({
-      from: src,
-      to: dest,
-    });
-  });
-  toCopy.push({
-    content: generateHomePage(options),
-    to: path.resolve(cwd, 'src', 'pages', 'home.svelte'),
-  });
-  toCopy.push({
-    content: generateRoot(options),
-    to: path.resolve(cwd, 'src', 'components', 'app.svelte'),
-  });
-  toCopy.push({
-    content: generateStore(options),
-    to: path.resolve(cwd, 'src', 'store.js'),
-  });
-
-  if (bundler) {
-    toCopy.push({
-      from: path.resolve(__dirname, 'babel.config.js'),
-      to: path.resolve(cwd, 'babel.config.js'),
-    });
-  }
-
-  return toCopy;
-};

package/create/templates/svelte/generate-home-page.js

@@ -1,158 +0,0 @@
-const indent = require('../../utils/indent');
-
-module.exports = (options) => {
-  const { name, template } = options;
-
-  let description;
-  if (template === 'single-view' || template === 'blank') {
-    description = `
-          <p>Here is your blank ZMP app. Let's see what we have here.</p>
-    `;
-  }
-  if (template === 'split-view') {
-    description = `
-        <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>
-    `;
-  }
-  if (template === 'tabs') {
-    description = `
-        <p>This is an example of tabs-layout application. The main point of such tabbed layout is that each tab contains independent view with its own routing and navigation.</p>
-
-        <p>Each tab/view may have different layout, different navbar type (dynamic, fixed or static) or without navbar like this tab.</p>
-    `;
-  }
-
-  return indent(
-    0,
-    `
-    <Page name="home">
-      <!-- Top Navbar -->
-      ${
-        template === 'blank'
-          ? `
-      <Navbar large>
-        <NavTitle>${name}</NavTitle>
-        <NavTitleLarge>${name}</NavTitleLarge>
-      </Navbar>
-      `.trim()
-          : `
-      <Navbar large sliding={false}>
-        <NavLeft>
-          <Link iconIos="zmp:menu" iconAurora="zmp:menu" iconMd="material:menu" panelOpen="left" />
-        </NavLeft>
-        <NavTitle sliding>${name}</NavTitle>
-        <NavRight>
-          <Link iconIos="zmp:menu" iconAurora="zmp:menu" iconMd="material:menu" panelOpen="right" />
-        </NavRight>
-        <NavTitleLarge>${name}</NavTitleLarge>
-      </Navbar>
-      `.trim()
-      }
-      ${
-        template !== 'tabs'
-          ? `
-      <!-- Toolbar -->
-      <Toolbar bottom>
-        <Link>Left Link</Link>
-        <Link>Right Link</Link>
-      </Toolbar>
-
-      `.trim()
-          : ''
-      }
-      <!-- Page content -->
-      <Block strong>
-        ${description.trim()}
-      </Block>
-
-      ${
-        template !== 'blank'
-          ? `
-      <BlockTitle>Navigation</BlockTitle>
-      <List>
-        <ListItem link="/about/" title="About"/>
-        <ListItem link="/form/" title="Form"/>
-      </List>
-
-      <BlockTitle>Modals</BlockTitle>
-      <Block strong>
-        <Row>
-          <Col width="50">
-            <Button fill raised popupOpen="#my-popup">Popup</Button>
-          </Col>
-          <Col width="50">
-            <Button fill raised loginScreenOpen="#my-login-screen">Login Screen</Button>
-          </Col>
-        </Row>
-      </Block>
-
-      <BlockTitle>Panels</BlockTitle>
-      <Block strong>
-        <Row>
-          <Col width="50">
-            <Button fill raised panelOpen="left">Left Panel</Button>
-          </Col>
-          <Col width="50">
-            <Button fill raised panelOpen="right">Right Panel</Button>
-          </Col>
-        </Row>
-      </Block>
-
-      <List>
-        <ListItem
-          title="Dynamic (Component) Route"
-          link="/dynamic-route/blog/45/post/125/?foo=bar#about"
-        />
-        <ListItem
-          title="Default Route (404)"
-          link="/load-something-that-doesnt-exist/"
-        />
-      </List>
-      `.trim()
-          : ''
-      }
-    </Page>
-    ${
-      template === 'blank'
-        ? `
-    <script>
-      import {
-        Page,
-        Navbar,
-        NavTitle,
-        NavTitleLarge,
-        Link,
-        Toolbar,
-        Block,
-      } from 'zmp-svelte';
-    </script>
-    `.trim()
-        : `
-    <script>
-      import {
-        Page,
-        Navbar,
-        NavLeft,
-        NavTitle,
-        NavTitleLarge,
-        NavRight,
-        Link,
-        Toolbar,
-        Block,
-        BlockTitle,
-        List,
-        ListItem,
-        Row,
-        Col,
-        Button
-      } from 'zmp-svelte';
-    </script>
-    `.trim()
-    }
-  `
-  ).trim();
-};