zmp-cli 3.15.6 → 3.15.8

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

@@ -1,113 +0,0 @@
-const indent = require('../../utils/indent');
-module.exports = (options) => {
-  const { name, template, theming, stateManagement } = options;
-  const { fillBars } = theming;
-
-  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>Here is your blank ZMP app with tabs-layout. Let's see what we have here.</p>
-    `;
-  }
-
-  return indent(
-    0,
-    `
-    import React from 'react';
-    ${
-      template === 'blank'
-        ? `
-    import {
-      Page,
-      Navbar,
-      NavTitleLarge,
-      Card
-    } from 'zmp-framework/react';
-    `.trim()
-        : `
-    import {
-      Page,
-      Navbar,
-      NavTitleLarge,
-      List,
-      ListItem,
-      Card,
-      ${stateManagement === 'store' ? 'useStore,' : ''}
-    } from 'zmp-framework/react';${stateManagement === 'recoil' ? `
-    import { useRecoilValue } from 'recoil';
-    import { userState } from '../state';` : ''}
-    import AppItems from '../components/app-items';
-    import UserCard from '../components/user-card';
-    `.trim()
-    }
-
-    const HomePage = () => {
-      ${template !== 'blank' ? (stateManagement === 'recoil' ? "const user = useRecoilValue(userState);" : "const user = useStore('user');") : ''}
-      return (
-        <Page name="home" ${template === 'tabs' ? '' : 'navbarLarge'}>${template !== 'tabs' ? `
-          {/* Top Navbar */}
-          <Navbar ${fillBars ? 'fill' : ''}>
-            <NavTitleLarge>${name}</NavTitleLarge>
-          </Navbar>`
-              : ''
-          }
-          {/* Page content */}
-          <Card inset>
-            ${description.trim()}
-          </Card>
-          ${
-            template !== 'blank' && template !== 'tabs'
-              ? `
-          {/* 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()
-              : ''
-          }${template === 'tabs' ? `
-          {/* 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,81 +0,0 @@
-const templateIf = require('../../utils/template-if');
-const indent = require('../../utils/indent');
-const appParameters = require('../app-parameters');
-
-module.exports = (options) => {
-  const { theming, template, stateManagement } = options;
-  // Views
-  let views = '';
-  if (
-    template === 'single-view' ||
-    template === 'split-view' ||
-    template === 'blank'
-  ) {
-    views = indent(
-      0,
-      `
-      {/* Your main view, should have "view-main" class */}
-      <View main className="safe-areas" url="/" />
-      `
-    ).trim();
-  }
-  if (template === 'tabs') {
-    views = indent(
-      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>
-      `
-    );
-  }
-
-  return indent(
-    0,
-    `
-    import React from 'react';
-    ${['blank', 'single-view'].indexOf(template) >= 0
-      ? `
-    import { App, View } from 'zmp-framework/react';
-    `.trim()
-      : `
-    import { App, TabView, View, Tabbar, Link } from 'zmp-framework/react';
-    `.trim()}
-    ${templateIf(stateManagement === 'recoil', () => `import { RecoilRoot } from 'recoil';`, () => `import store from '../store';`)}
-
-    const MyApp = () => {
-      // ZMP Parameters
-      const zmpparams = {
-${indent(8, appParameters(options))}
-      };
-
-      ${`
-      return (${stateManagement === 'recoil' ? `
-        <RecoilRoot>` : ''}
-        ${indent(stateManagement === 'recoil' ? 2 : 0, `<App {...zmpparams} ${theming.darkTheme ? 'themeDark' : ''}>`)}
-${indent(stateManagement === 'recoil' ? 12 : 10, views)}
-        ${indent(stateManagement === 'recoil' ? 2 : 0, `</App>`)}${stateManagement === 'recoil' ? `
-        </RecoilRoot>` : ''}
-      );
-      `.trim()}
-    }
-    export default MyApp;
-    `
-  ).trim();
-};

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

@@ -1,12 +0,0 @@
-module.exports = (options) => {
-  const { template } = options;
-
-  if (template === 'blank') {
-    return [];
-  }
-  const routes = ['/user', '/form', '/dynamic-route', '/about', '/404'];
-  if (template === 'tabs') {
-    routes.push(...['/catalog', '/settings']);
-  }
-  return routes;
-};

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

@@ -1,67 +0,0 @@
-const templateIf = require('../../utils/template-if');
-const indent = require('../../utils/indent');
-const stylesExtension = require('../../utils/styles-extension');
-
-module.exports = (options) => {
-  const { cssPreProcessor, theming, customBuild, includeTailwind } = options;
-  let scripts = '';
-
-  scripts += indent(
-    0,
-    `
-    // Import React and ReactDOM
-    import React from 'react';
-    import { createRoot } from 'react-dom/client';
-
-    // Import ZMP
-    import ZMP from '${
-      customBuild ? './zmp-custom.js' : 'zmp-framework/core/lite-bundle'
-    }';
-
-    // Import ZMP-React Plugin
-    import ZMPReact from 'zmp-framework/react';${includeTailwind ? `
-
-    // Import tailwind styles
-    import './css/tailwind.css';` : ''}
-
-    // Import ZMP Styles
-    ${templateIf(
-      customBuild,
-      () => `
-    import './css/zmp-custom.less';
-    `,
-      () => `
-    import 'zmp-framework/${
-      theming.useUiKits ? 'zmp-bundle.min.css' : 'zmp.min.css'
-    }';
-    `
-    )}
-
-    // Import Icons and App Custom Styles
-    ${templateIf(
-      theming.iconFonts,
-      () => `
-    import './css/icons.css';
-    `
-    )}
-    import './css/app.${stylesExtension(cssPreProcessor)}';
-
-    // 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));
-  `
-  );
-
-  return scripts.trim();
-};

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

@@ -1,27 +0,0 @@
-const indent = require('../../../utils/indent');
-
-// eslint-disable-next-line no-unused-vars
-module.exports = (options) => {
-  return indent(
-    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,52 +0,0 @@
-const indent = require('../../../utils/indent');
-
-// eslint-disable-next-line no-unused-vars
-module.exports = (options) => {
-  return indent(
-    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,112 +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 { 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-typescript/pages/dynamic-route.js

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