zmp-cli 3.15.6 → 3.15.8

package/create/templates/react/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(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

@@ -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/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/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/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/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,53 +0,0 @@
-const indent = require('../../../utils/indent');
-
-module.exports = (options) => {
-  return indent(
-    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,9 +0,0 @@
-const copyAppItems = require('./app-items');
-const copyNavbarBack = require('./navbar-back');
-const copyUserCard = require('./user-card');
-
-module.exports = {
-  copyAppItems,
-  copyNavbarBack,
-  copyUserCard,
-};

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

@@ -1,40 +0,0 @@
-const indent = require('../../../utils/indent');
-
-module.exports = (options) => {
-  return indent(
-    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,32 +0,0 @@
-const indent = require('../../../utils/indent');
-
-module.exports = (options) => {
-  return indent(
-    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,94 +0,0 @@
-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, stateManagement } = options;
-  const toCopy = [];
-
-  // Copy Pages
-  let pages = [];
-  if (template !== 'blank')
-    pages.push(
-      ...[
-        { fileName: '404', content: 'copy404' },
-        { fileName: 'about', content: 'copyAbout' },
-        { fileName: 'dynamic-route', content: 'copyDynamicRoute' },
-        { fileName: 'user', content: 'copyUser' },
-        { fileName: 'form', content: 'copyForm' },
-      ]
-    );
-  if (template === 'tabs') {
-    pages.push(
-      ...[
-        { fileName: 'catalog', content: 'copyCatalog' },
-        { fileName: 'settings', content: 'copySettings' },
-      ]
-    );
-  }
-
-  pages.forEach(({ fileName, content }) => {
-    const dest = path.resolve(cwd, 'src', 'pages', `${fileName}.tsx`);
-    toCopy.push({
-      content: copyPages[content](options),
-      to: dest,
-    });
-  });
-  toCopy.push({
-    content: generateHomePage(options),
-    to: path.resolve(cwd, 'src', 'pages', 'index.tsx'),
-  });
-
-  // Copy compoents
-  const components = [
-    ...(template !== 'blank'
-      ? [
-        { fileName: 'app-items', content: 'copyAppItems' },
-        { fileName: 'navbar-back', content: 'copyNavbarBack' },
-        { fileName: 'user-card', content: 'copyUserCard' },
-      ]
-      : []),
-  ];
-  components.forEach(({ fileName, content }) => {
-    const dest = path.resolve(cwd, 'src', 'components', `${fileName}.tsx`);
-    toCopy.push({
-      content: copyComponents[content](options),
-      to: dest,
-    });
-  });
-
-  toCopy.push({
-    content: generateRoot(options),
-    to: path.resolve(cwd, 'src', 'components', 'app.tsx'),
-  });
-
-  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),
-    to: path.resolve(cwd, 'vite.config.ts'),
-  });
-
-  toCopy.push({
-    from: path.resolve(__dirname, '_tsconfig.json'),
-    to: path.resolve(cwd, 'tsconfig.json'),
-  });
-
-  return toCopy;
-};

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

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