zmp-cli 3.15.6 → 3.15.8

package/create/templates/zaui/generate-routes.js

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

package/create/templates/zaui/generate-scripts.js

@@ -1,39 +0,0 @@
-const indent = require('../../utils/indent');
-const stylesExtension = require('../../utils/styles-extension');
-
-module.exports = (options) => {
-  const { cssPreProcessor,  includeTailwind, framework } = options;
-
-  let scripts = '';
-
-  scripts += indent(
-    0,
-    `
-    // Import React and ReactDOM
-    import React from 'react';
-    import { createRoot } from 'react-dom/client';
-    ${includeTailwind ? `
-
-    // Import tailwind styles
-    import './css/tailwind.css';` : ''}
-
-    import 'zmp-ui/zaui.css'; 
-
-    import './css/app.${stylesExtension(cssPreProcessor)}';
-
-    // Import App Component
-    import App from './components/app';
-    import appConfig from '../app-config.json';
-
-    if (!window.APP_CONFIG) {
-      window.APP_CONFIG = appConfig;
-    }
-
-    // Mount React App
-    ${framework === 'react-typescript' ? "const root = createRoot(document.getElementById('app')!);" : "const root = createRoot(document.getElementById('app'));"}
-    root.render(React.createElement(App));
-  `
-  );
-
-  return scripts.trim();
-};

package/create/templates/zaui/generate-user-card.js

@@ -1,55 +0,0 @@
-const indent = require('../../utils/indent');
-const {projectFramework} = require('../../../utils/constants')
-// eslint-disable-next-line no-unused-vars
-module.exports = (options) => {
-  const {framework} = options
-  if(framework === projectFramework.REACT_TYPESCRIPT){
-    return  indent(
-      0,
-      `
-  import React from 'react';
-  import { Avatar, Box, Text } from 'zmp-ui';
-  import { userInfo } from 'zmp-sdk';
-  
-  interface UserProps{
-    user: userInfo
-  }
-  
-  const UserCard: React.FunctionComponent<UserProps> = ({ user }) => {
-    return (
-      <Box flex>
-        <Avatar story='default' online src={user.avatar.startsWith('http') ? user.avatar : undefined}>{user.avatar}</Avatar>
-        <Box ml={4}>
-          <Text.Title>{user.name}</Text.Title>
-          <Text>{user.id}</Text>
-        </Box>
-      </Box>
-    )
-  };
-  
-  export default UserCard;
-    `
-    ).trim(); 
-  }
-  return indent(
-    0,
-    `
-  import React from 'react';
-  import { Avatar, Box, Text } from 'zmp-ui';
-
-  const UserCard = ({ user }) => {
-    return (
-      <Box flex>
-        <Avatar story='default' online src={user.avatar.startsWith('http') ? user.avatar : null}>{user.avatar}</Avatar>
-        <Box ml={4}>
-          <Text.Title>{user.name}</Text.Title>
-          <Text>{user.id}</Text>
-        </Box>
-      </Box>
-    )
-  };
-
-  export default UserCard;    
-  `
-  ).trim();
-};

package/create/templates/zaui/pages/about.js

@@ -1,129 +0,0 @@
-const indent = require('../../../utils/indent');
-const {projectFramework} = require('../../../../utils/constants')
-
-// eslint-disable-next-line no-unused-vars
-module.exports = (options) => {
-  const {framework} = options
-
-  if(framework === projectFramework.REACT_TYPESCRIPT){
-    return indent(
-      0,
-      `
-  import React from "react";
-  import { Sheet, Button, Page, Text, useNavigate } from "zmp-ui";
-  
-  const AboutPage: React.FunctionComponent = (props) => {
-    const [actionSheetOpened, setActionSheetOpened] = React.useState(false);
-    const navigate = useNavigate()
-    return (
-      <Page className="page">
-        <div className="section-container">
-          <Text>This mini app was generated by zmp-cli</Text>
-        </div>
-        <div>
-          <Button
-            variant='secondary'
-            fullWidth
-            onClick={() => setActionSheetOpened(true)}
-          >
-            Back
-          </Button>
-        </div>
-        <Sheet.Actions
-          visible={actionSheetOpened}
-          onClose={() => setActionSheetOpened(false)}
-          actions={[
-            [
-              {
-                text: "Go back",
-                onClick: () => {
-                  navigate(-1);
-                },
-              },
-              {
-                text: "Action 1",
-                close: true,
-              },
-              {
-                text: "Action 2",
-                close: true,
-              },
-            ],
-            [
-              {
-                text: "Close",
-                close: true,
-                danger: true,
-              },
-            ],
-          ]}
-        ></Sheet.Actions>
-      </Page>
-    );
-  };
-  
-  export default AboutPage;
-    `
-    ).trim();
-  }
-  return indent(
-    0,
-    `
-    import React from "react";
-    import { Sheet, Button, Page, Text, useNavigate } from "zmp-ui";
-
-    const AboutPage = (props) => {
-      const [actionSheetOpened, setActionSheetOpened] = React.useState(false);
-      const navigate = useNavigate()
-      return (
-        <Page className="page">
-          <div className="section-container">
-            <Text>This mini app was generated by zmp-cli</Text>
-          </div>
-          <div>
-          <Button
-            variant='secondary'
-            fullWidth
-            onClick={() => setActionSheetOpened(true)}
-          >
-            Back
-          </Button>
-          </div>
-          <Sheet.Actions
-            visible={actionSheetOpened}
-            onClose={() => setActionSheetOpened(false)}
-            actions={[
-              [
-                {
-                  text: "Go back",
-                  onClick: () => {
-                    navigate(-1);
-                  },
-                },
-                {
-                  text: "Action 1",
-                  close: true,
-                },
-                {
-                  text: "Action 2",
-                  close: true,
-                },
-              ],
-              [
-                {
-                  text: "Close",
-                  close: true,
-                  danger: true,
-                },
-              ],
-            ]}
-          ></Sheet.Actions>
-        </Page>
-      );
-    };
-
-    export default AboutPage;
-
-  `
-  ).trim();
-};

package/create/templates/zaui/pages/form.js

@@ -1,123 +0,0 @@
-const indent = require('../../../utils/indent');
-const {projectFramework} = require('../../../../utils/constants');
-
-module.exports = (options) => {
-  const { framework } = options
-
-  if(framework === projectFramework.REACT_TYPESCRIPT){
-    return indent(
-      0,
-      `
-  import React from 'react';
-  import { Button, Input, Box, Page, useSnackbar } from 'zmp-ui';
-  import { useRecoilState } from 'recoil';
-  import { userInfo } from 'zmp-sdk';
-  import { userState } from '../state';
-  
-  type UserForm = Omit<userInfo, "id">
-  
-  const FormPage: React.FunctionComponent = () => {
-    const [user, setUser] = useRecoilState<userInfo>(userState)
-    const [form, setForm] = React.useState<UserForm>({ name: user.name, avatar: user.avatar, birthday: user.birthday, gender: user.gender });
-    const snackbar = useSnackbar()
-
-    const handleChangeInput = (field, value) => {
-      setForm({ ...form, [field]: value })
-    }
-  
-    const handleSubmit = () => {
-      snackbar.openSnackbar({duration: 3000, text: 'saved', type: 'success'});
-      setUser((user) => ({ ...user, ...form }));
-    }
-  
-    return (
-      <Page className="page">
-        <div className='section-container'>
-          <Box >
-            <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 mt={4}>
-              <Button fullWidth variant='primary' onClick={handleSubmit}>
-                Submit
-              </Button>
-            </Box>
-          </Box>
-        </div>
-      </Page>
-    )
-  }
-  
-  export default FormPage;
-      `
-    ).trim(); 
-  }
-    return indent(
-      0,
-      `
-      import React from 'react';
-      import { Button,Input, Box, Page, useSnackbar } from 'zmp-ui';
-      import { useRecoilState } from 'recoil';
-      import { userState } from '../state';
-      
-      const FormPage = () => {
-        const [user, setUser] = useRecoilState(userState)
-        const [form, setForm] = React.useState({ ...user });
-        const snackbar = useSnackbar()
-
-        const handleChangeInput = (field, value) => {
-          setForm({ ...form, [field]: value })
-        }
-      
-        const handleSubmit = () => {
-          snackbar.openSnackbar({duration: 3000, text: 'saved', type: 'success'})
-          setUser(form);
-        }
-      
-        return (
-          <Page className="page">
-            <div className='section-container'>
-              <Box >
-                <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 mt={4}>
-                <Button fullWidth variant='primary' onClick={handleSubmit}>
-                  Submit
-                </Button>
-                </Box>
-              </Box>
-            </div>
-          </Page>
-        )
-      }
-      
-      export default FormPage;
-      `
-    ).trim();
-
-};

package/create/templates/zaui/pages/index.js

@@ -1,9 +0,0 @@
-const copyUser = require('./user');
-const copyForm = require('./form');
-const copyAbout = require('./about');
-
-module.exports = {
-  copyUser,
-  copyForm,
-  copyAbout,
-};

package/create/templates/zaui/pages/user.js

@@ -1,109 +0,0 @@
-const indent = require('../../../utils/indent');
-const { projectFramework } = require('../../../../utils/constants')
-
-module.exports = (options) => {
-  const { framework } = options;
-
-  if(framework === projectFramework.REACT_TYPESCRIPT){
-    return indent(
-      0,
-      `
-  import React from "react";
-  import { Avatar, List, Text, Box, Page, Button, Icon, useNavigate } from "zmp-ui";
-  import { useRecoilValue } from "recoil";
-  import { userState } from "../state";
-  import { userInfo } from "zmp-sdk";
-  
-  const UserPage = () => {
-    const user = useRecoilValue<userInfo>(userState);
-    const navigate = useNavigate()
-    return (
-      <Page className="page">
-        <Box flex flexDirection="column" justifyContent="center" alignItems="center">
-          <Box>
-            <Avatar
-              story='default'
-              size={96}
-              online
-              src={user.avatar.startsWith("http") ? user.avatar : undefined}
-            >
-              {user.avatar}
-            </Avatar>
-          </Box>
-          <Box flex flexDirection="row" alignItems="center" ml={8}>
-            <Box>
-            <Text.Title >{user.name}</Text.Title>
-            </Box>
-            <Box ml={4}>
-              <Button onClick={()=>{navigate('/form')}}  size='small' icon={<Icon icon="zi-edit"/>}/>
-            </Box>
-          </Box>
-        </Box>
-        <Box m={0} p={0} mt={4}>
-          <div className="section-container">
-            <List>
-              <List.Item title="Display name" subTitle={user.name} />
-              <List.Item title="ID" subTitle={user.id} />
-            </List>
-          </div>
-        </Box>
-  
-      </Page>
-    );
-  };
-  
-  export default UserPage;
-    `
-    ).trim();
-  }
-
-  return indent(
-    0,
-    `
-    import React from "react";
-    import { Avatar, List, Text, Box, Page, Button, Icon, useNavigate } from "zmp-ui";
-    import { useRecoilValue } from "recoil";
-    import { userState } from "../state";
-
-    const UserPage = () => {
-      const user = useRecoilValue(userState);
-      const navigate = useNavigate()
-      return (
-        <Page className="page">
-          <Box flex flexDirection="column" justifyContent="center" alignItems="center">
-            <Box>
-              <Avatar
-                story
-                size={96}
-                online
-                src={user.avatar.startsWith("http") ? user.avatar : null}
-              >
-                {user.avatar}
-              </Avatar>
-            </Box>
-            <Box flex flexDirection="row" alignItems="center" ml={8}>
-              <Box>
-              <Text.Title >{user.name}</Text.Title>
-              </Box>
-              <Box ml={4}>
-                <Button onClick={()=>{navigate('/form')}}  size='small' icon={<Icon icon="zi-edit"/>}/>
-              </Box>
-            </Box>
-          </Box>
-          <Box m={0} p={0} mt={4}>
-            <div className="section-container">
-              <List>
-                <List.Item title="Display name" subTitle={user.name} />
-                <List.Item title="ID" subTitle={user.id} />
-              </List>
-            </div>
-          </Box>
-          
-        </Page>
-      );
-    };
-
-    export default UserPage;
-  `
-  ).trim();
-};

package/create/templates/zaui/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/utils/colors.js

@@ -1,94 +0,0 @@
-function colorHexToRgb(hex) {
-  const h = hex.replace(
-    /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
-    (m, r, g, b) => r + r + g + g + b + b
-  );
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(h);
-  return result ? result.slice(1).map((n) => parseInt(n, 16)) : null;
-}
-function colorRgbToHex(r, g, b) {
-  const result = [r, g, b]
-    .map((n) => {
-      const hex = n.toString(16);
-      return hex.length === 1 ? `0${hex}` : hex;
-    })
-    .join('');
-  return `#${result}`;
-}
-function colorRgbToHsl(r, g, b) {
-  r /= 255; // eslint-disable-line
-  g /= 255; // eslint-disable-line
-  b /= 255; // eslint-disable-line
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  const d = max - min;
-  let h;
-  if (d === 0) h = 0;
-  else if (max === r) h = ((g - b) / d) % 6;
-  else if (max === g) h = (b - r) / d + 2;
-  else if (max === b) h = (r - g) / d + 4;
-  const l = (min + max) / 2;
-  const s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));
-  return [h * 60, s, l];
-}
-function colorHslToRgb(h, s, l) {
-  const c = (1 - Math.abs(2 * l - 1)) * s;
-  const hp = h / 60;
-  const x = c * (1 - Math.abs((hp % 2) - 1));
-  let rgb1;
-  if (Number.isNaN(h) || typeof h === 'undefined') {
-    rgb1 = [0, 0, 0];
-  } else if (hp <= 1) rgb1 = [c, x, 0];
-  else if (hp <= 2) rgb1 = [x, c, 0];
-  else if (hp <= 3) rgb1 = [0, c, x];
-  else if (hp <= 4) rgb1 = [0, x, c];
-  else if (hp <= 5) rgb1 = [x, 0, c];
-  else if (hp <= 6) rgb1 = [c, 0, x];
-  const m = l - c / 2;
-  return rgb1.map((n) => Math.max(0, Math.min(255, Math.round(255 * (n + m)))));
-}
-function colorThemeCSSProperties(...args) {
-  let hex;
-  let rgb;
-  if (args.length === 1) {
-    [hex] = args;
-    rgb = colorHexToRgb(hex);
-  } else if (args.length === 3) {
-    rgb = args;
-    hex = colorRgbToHex(...rgb);
-  }
-  if (!rgb) return {};
-  const hsl = colorRgbToHsl(...rgb);
-  const hslShade = [hsl[0], hsl[1], Math.max(0, hsl[2] - 0.08)];
-  const hslTint = [hsl[0], hsl[1], Math.max(0, hsl[2] + 0.08)];
-  const shade = colorRgbToHex(...colorHslToRgb(...hslShade));
-  const tint = colorRgbToHex(...colorHslToRgb(...hslTint));
-  const hslSecondaryColor = [hsl[0], hsl[1], Math.max(0, hsl[2] + 0.6)];
-  const secondaryColor = colorRgbToHex(...colorHslToRgb(...hslSecondaryColor));
-  return {
-    '--zmp-theme-color': hex,
-    '--zmp-theme-color-rgb': rgb.join(', '),
-    '--zmp-theme-color-shade': shade,
-    '--zmp-theme-color-tint': tint,
-    '--zmp-checkbox-active-color-disabled': 'var(--zmp-theme-color-shade)',
-    '--zmp-radio-active-color-disabled': 'var(--zmp-theme-color-shade)',
-    '--zmp-toggle-active-color-disabled': 'var(--zmp-theme-color-shade)',
-    '--zmp-picker-action-button-hover-bg-color': 'var(--zmp-theme-color-shade)',
-    '--zmp-button-pressed-bg-color-primary': 'var(--zmp-theme-color-shade)',
-    ' --zmp-button-bg-color-secondary': secondaryColor,
-    '--zmp-button-pressed-bg-color-secondary': secondaryColor,
-    '--zmp-button-pressed-color-secondary': 'var(--zmp-theme-color)',
-    '--zmp-button-border-color-secondary': 'var(--zmp-theme-color)',
-    '--zmp-tabbar-fill-link-active-color': 'var(--zmp-theme-color)',
-    '--zmp-tabbar-fill-link-active-border-color': 'var(--zmp-theme-color)',
-    '--zmp-fab-pressed-bg-color': 'var(--zmp-theme-color-shade)',
-  };
-}
-
-module.exports = {
-  colorHexToRgb,
-  colorHslToRgb,
-  colorRgbToHex,
-  colorRgbToHsl,
-  colorThemeCSSProperties,
-};