@blocklet/launcher-layout 2.13.69 → 3.0.0

package/lib/Layout/demo/child-progress-in-memory-mode.js

@@ -1,70 +0,0 @@
-import { useEffect } from 'react';
-import { useTheme } from '@mui/material';
-import Layout from '../../index';
-import { StepProvider, useStepContext } from '../../context/step';
-import staticDemo from './static-demo-data.json';
-import { BodyContainer, Content, HeaderEndAddons, getNavLogo } from './constants';
-import { jsx as _jsx } from "react/jsx-runtime";
-const testSteps = [{
-  key: 'wizard',
-  name: 'Name1 Wizard',
-  children: [{
-    key: 'wizard-01',
-    name: 'wizard-child-a'
-  }, {
-    key: 'wizard-02',
-    name: 'wizard-child-b'
-  }, {
-    key: 'wizard-03',
-    name: 'wizard-child-c'
-  }]
-}, {
-  key: 'select-node',
-  name: 'Name2 select node'
-}, {
-  key: 'launch-app',
-  name: 'Name3 launch app'
-}];
-function TestContent() {
-  const {
-    setActiveStepByKey
-  } = useStepContext();
-  useEffect(() => {
-    const reStep = testSteps.map(e => e.children ? e.children.map(e2 => e2.key) : e.key).flat();
-    let index = 0;
-    const timer = setInterval(() => {
-      setActiveStepByKey(reStep[index]);
-      index++;
-      if (index >= reStep.length) {
-        index = 0;
-      }
-    }, 1000);
-    return () => {
-      clearInterval(timer);
-    };
-  }, [setActiveStepByKey]);
-  return /*#__PURE__*/_jsx("p", {
-    children: "memory mode, not linked to history"
-  });
-}
-export default function Demo() {
-  const {
-    palette
-  } = useTheme();
-  return /*#__PURE__*/_jsx(BodyContainer, {
-    children: /*#__PURE__*/_jsx(StepProvider, {
-      steps: testSteps,
-      mode: "memory",
-      children: /*#__PURE__*/_jsx(Layout, {
-        locale: "zh",
-        blockletMeta: staticDemo,
-        headerEndAddons: /*#__PURE__*/_jsx(HeaderEndAddons, {}),
-        navLogo: getNavLogo(palette.mode),
-        children: /*#__PURE__*/_jsx(Content, {
-          children: /*#__PURE__*/_jsx(TestContent, {})
-        })
-      })
-    })
-  });
-}
-Demo.propTypes = {};

package/lib/Layout/demo/child-progress.js

@@ -1,54 +0,0 @@
-import { useTheme } from '@mui/material';
-import Layout from '../../index';
-import { StepProvider } from '../../context/step';
-import staticDemo from './static-demo-data.json';
-import { BodyContainer, Content, HeaderEndAddons, getNavLogo } from './constants';
-import { jsx as _jsx } from "react/jsx-runtime";
-const testSteps = [{
-  key: 'wizard',
-  name: 'Name1 Wizard',
-  path: '/*',
-  children: [{
-    key: 'wizard-01',
-    name: 'wizard-child-a',
-    path: '/a'
-  }, {
-    key: 'wizard-02',
-    name: 'wizard-child-b',
-    path: '/iframe.html'
-  }, {
-    key: 'wizard-03',
-    name: 'wizard-child-c',
-    path: '/c'
-  }]
-}, {
-  key: 'select-node',
-  name: 'Name2 select node',
-  path: '/launch/select'
-}, {
-  key: 'launch-app',
-  name: 'Name3 launch app',
-  path: ''
-}];
-export default function Demo() {
-  const {
-    palette
-  } = useTheme();
-  return /*#__PURE__*/_jsx(BodyContainer, {
-    children: /*#__PURE__*/_jsx(StepProvider, {
-      steps: testSteps,
-      children: /*#__PURE__*/_jsx(Layout, {
-        locale: "zh",
-        blockletMeta: staticDemo,
-        headerEndAddons: /*#__PURE__*/_jsx(HeaderEndAddons, {}),
-        navLogo: getNavLogo(palette.mode),
-        children: /*#__PURE__*/_jsx(Content, {
-          children: /*#__PURE__*/_jsx("p", {
-            children: "set children in steps data"
-          })
-        })
-      })
-    })
-  });
-}
-Demo.propTypes = {};

package/lib/Layout/demo/constants.js

@@ -1,76 +0,0 @@
-import styled from '@emotion/styled';
-import IconButton from '@mui/material/IconButton';
-import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
-import { ThemeModeToggle } from '@arcblock/ux/lib/Config';
-import LauncherLogo from '@arcblock/icons/lib/LauncherLogo';
-import LauncherLogoNotext from '@arcblock/icons/lib/LauncherLogoNotext';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export const steps = [{
-  key: 'wizard',
-  name: 'Name1 Wizard',
-  path: '/'
-}, {
-  key: 'select-node',
-  name: 'Name2 select node',
-  path: '/launch/select'
-}, {
-  key: 'launch-app',
-  name: 'Name3 launch app',
-  path: ''
-}];
-export const LogoContainer = styled.div`
-  display: block;
-  margin-top: 4px;
-`;
-export const BodyContainer = styled.div`
-  position: relative;
-  width: 100%;
-  height: 100%;
-  min-height: 700px;
-  display: flex;
-  flex-direction: column;
-  > div {
-    flex: 1;
-  }
-  .ll-container {
-    flex: 1;
-  }
-`;
-export const Content = styled.div`
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-`;
-export function HeaderEndAddons() {
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(ThemeModeToggle, {}), /*#__PURE__*/_jsx(IconButton, {
-      children: /*#__PURE__*/_jsx(HelpOutlineIcon, {
-        style: {
-          fontSize: 28
-        }
-      })
-    })]
-  });
-}
-export function getNavLogo(mode) {
-  return {
-    desktop: /*#__PURE__*/_jsx(LauncherLogo, {
-      style: {
-        filter: mode === 'dark' ? 'invert(1)' : 'none'
-      },
-      width: "145",
-      height: "48"
-    }),
-    mobile: /*#__PURE__*/_jsx(LauncherLogoNotext, {
-      style: {
-        filter: mode === 'dark' ? 'invert(1)' : 'none'
-      },
-      width: 32,
-      height: 32
-    })
-  };
-}

package/lib/Layout/demo/default.js

@@ -1,54 +0,0 @@
-import { useTheme } from '@mui/material';
-import Layout from '../../index';
-import { StepProvider } from '../../context/step';
-import staticDemo from './static-demo-data.json';
-import { BodyContainer, Content, getNavLogo, HeaderEndAddons } from './constants';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function Demo() {
-  const testSteps = [{
-    key: 'wizard',
-    name: 'Name1 Wizard',
-    path: '/',
-    description: 'I am desc 1'
-  }, {
-    key: 'select-node',
-    name: 'Name2 select node',
-    path: '/launch/select',
-    description: 'I am desc 2'
-  }, {
-    key: 'launch-app',
-    name: 'Name3 launch app',
-    path: '',
-    description: 'I am desc 3'
-  }];
-  const {
-    palette
-  } = useTheme();
-  return /*#__PURE__*/_jsx(BodyContainer, {
-    children: /*#__PURE__*/_jsx(StepProvider, {
-      steps: testSteps,
-      children: /*#__PURE__*/_jsx(Layout, {
-        locale: "zh",
-        blockletMeta: staticDemo,
-        headerEndAddons: /*#__PURE__*/_jsx(HeaderEndAddons, {}),
-        navLogo: getNavLogo(palette.mode),
-        children: /*#__PURE__*/_jsxs(Content, {
-          children: [/*#__PURE__*/_jsxs("p", {
-            children: [/*#__PURE__*/_jsx("b", {
-              children: "blockletMeta"
-            }), " : Data for blockletMeta to install the application"]
-          }), /*#__PURE__*/_jsxs("p", {
-            children: [/*#__PURE__*/_jsx("b", {
-              children: "navLogo"
-            }), " is the icon in the top left corner that is the application icon using the current layout component, using the logo with text in desktop mode and the logo without text in mobile."]
-          }), /*#__PURE__*/_jsxs("p", {
-            children: [/*#__PURE__*/_jsx("b", {
-              children: "headerEndAddons"
-            }), " is the button area in the top right corner"]
-          })]
-        })
-      })
-    })
-  });
-}
-Demo.propTypes = {};

package/lib/Layout/demo/extra-nav.js

@@ -1,108 +0,0 @@
-import { useTheme } from '@mui/material';
-import AppsIcon from '@mui/icons-material/Apps';
-import Layout from '../../index';
-import { StepProvider } from '../../context/step';
-import staticDemo from './static-demo-data.json';
-import { BodyContainer, getNavLogo, HeaderEndAddons } from './constants';
-
-// helper to remove icon for display
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function getSerializable(obj) {
-  const {
-    icon,
-    ...rest
-  } = obj;
-  return rest;
-}
-export default function Demo() {
-  const testSteps = [{
-    key: 'wizard',
-    name: 'Name1 Wizard',
-    path: '/',
-    description: 'I am desc 1'
-  }, {
-    key: 'select-node',
-    name: 'Name2 select node',
-    path: '/launch/select',
-    description: 'I am desc 2'
-  }, {
-    key: 'launch-app',
-    name: 'Name3 launch app',
-    path: '',
-    description: 'I am desc 3'
-  }];
-  const {
-    palette
-  } = useTheme();
-
-  // Example 2: With Tooltip and Description
-  const tooltipExtraNav = {
-    link: 'https://www.baidu.com',
-    text: 'My Apps',
-    appText: 'View My Apps',
-    icon: /*#__PURE__*/_jsx(AppsIcon, {}),
-    tooltipText: 'View my apps',
-    description: 'Your apps will be shown here'
-  };
-  return /*#__PURE__*/_jsx(BodyContainer, {
-    children: /*#__PURE__*/_jsx(StepProvider, {
-      steps: testSteps,
-      children: /*#__PURE__*/_jsxs(Layout, {
-        locale: "en",
-        blockletMeta: staticDemo,
-        headerEndAddons: /*#__PURE__*/_jsx(HeaderEndAddons, {}),
-        navLogo: getNavLogo(palette.mode),
-        extraNav: tooltipExtraNav,
-        children: [/*#__PURE__*/_jsxs("div", {
-          children: [/*#__PURE__*/_jsxs("p", {
-            children: [/*#__PURE__*/_jsx("b", {
-              children: "extraNav"
-            }), " is used to add additional navigation items to the navigation bar, supporting the following features:"]
-          }), /*#__PURE__*/_jsxs("div", {
-            children: [/*#__PURE__*/_jsx("h4", {
-              children: "Property Description"
-            }), /*#__PURE__*/_jsxs("ul", {
-              children: [/*#__PURE__*/_jsxs("li", {
-                children: [/*#__PURE__*/_jsx("b", {
-                  children: "text"
-                }), ": Main display text"]
-              }), /*#__PURE__*/_jsxs("li", {
-                children: [/*#__PURE__*/_jsx("b", {
-                  children: "appText"
-                }), ": Optional alternative text (displayed on mobile)"]
-              }), /*#__PURE__*/_jsxs("li", {
-                children: [/*#__PURE__*/_jsx("b", {
-                  children: "link"
-                }), ": Link to navigate to when clicked"]
-              }), /*#__PURE__*/_jsxs("li", {
-                children: [/*#__PURE__*/_jsx("b", {
-                  children: "icon"
-                }), ": Optional icon (supports any React node)"]
-              }), /*#__PURE__*/_jsxs("li", {
-                children: [/*#__PURE__*/_jsx("b", {
-                  children: "tooltipText"
-                }), ": Optional tooltip text"]
-              }), /*#__PURE__*/_jsxs("li", {
-                children: [/*#__PURE__*/_jsx("b", {
-                  children: "description"
-                }), ": Optional description text"]
-              }), /*#__PURE__*/_jsxs("li", {
-                children: [/*#__PURE__*/_jsx("b", {
-                  children: "buttonProps"
-                }), ": Custom button properties (supports all MUI Button props)"]
-              })]
-            })]
-          })]
-        }), /*#__PURE__*/_jsx("pre", {
-          style: {
-            background: '#f5f5f5',
-            padding: 16,
-            borderRadius: 4
-          },
-          children: JSON.stringify(getSerializable(tooltipExtraNav), null, 2)
-        })]
-      })
-    })
-  });
-}
-Demo.propTypes = {};

package/lib/Layout/demo/logo-url.js

@@ -1,31 +0,0 @@
-import { useTheme } from '@mui/material';
-import Layout from '../../index';
-import { StepProvider } from '../../context/step';
-import staticDemo from './static-demo-data.json';
-import { BodyContainer, Content, steps, HeaderEndAddons, getNavLogo } from './constants';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function Demo() {
-  const {
-    palette
-  } = useTheme();
-  return /*#__PURE__*/_jsx(BodyContainer, {
-    children: /*#__PURE__*/_jsx(StepProvider, {
-      steps: steps,
-      children: /*#__PURE__*/_jsx(Layout, {
-        locale: "zh",
-        blockletMeta: staticDemo,
-        headerEndAddons: /*#__PURE__*/_jsx(HeaderEndAddons, {}),
-        logoUrl: "https://store.blocklet.dev/assets/z8ia4e5vAeDsQEE2P26bQqz9oWR1Lxg9qUMaV/logo.png",
-        navLogo: getNavLogo(palette.mode),
-        children: /*#__PURE__*/_jsx(Content, {
-          children: /*#__PURE__*/_jsxs("p", {
-            children: [/*#__PURE__*/_jsx("b", {
-              children: "logoUrl"
-            }), ": The real logo address of the application; if it is not passed, the did-avatar is automatically displayed according to the application did of blockletMeta"]
-          })
-        })
-      })
-    })
-  });
-}
-Demo.propTypes = {};

package/lib/Layout/demo/longest-steps-for-launch.js

@@ -1,95 +0,0 @@
-import { useEffect } from 'react';
-import { useTheme } from '@mui/material';
-import Layout from '../../index';
-import { StepProvider, useStepContext } from '../../context/step';
-import staticDemo from './static-demo-data.json';
-import { BodyContainer, Content, HeaderEndAddons, getNavLogo } from './constants';
-import { jsx as _jsx } from "react/jsx-runtime";
-const testSteps = [{
-  key: 'introduction',
-  name: '简介'
-}, {
-  key: 'select server',
-  name: '选择节点',
-  showChild: 'activating',
-  description: '将应用安装到选择的节点',
-  children: [{
-    key: 'select-node-02',
-    name: '创建节点'
-  }, {
-    key: 'select-node-03',
-    name: '启动节点'
-  }, {
-    key: 'select-node-04',
-    name: '创建中'
-  }]
-}, {
-  key: 'launch-app',
-  name: '安装应用到节点'
-}, {
-  key: 'setup-app',
-  name: '设置应用',
-  showChild: 'activating',
-  description: '按步骤初始化你的应用',
-  children: [{
-    key: 'setup-app-01',
-    name: '链接'
-  }, {
-    key: 'setup-app-02',
-    name: '域名'
-  }, {
-    key: 'setup-app-03',
-    name: '配置'
-  }, {
-    key: 'setup-app-04',
-    name: '访问控制'
-  }]
-}, {
-  key: 'complete-app',
-  name: '启动'
-}];
-function TestContent() {
-  const {
-    setActiveStepByKey
-  } = useStepContext();
-  useEffect(() => {
-    const reStep = testSteps.map(e => e.children ? e.children.map(e2 => e2.key) : e.key).flat();
-    let index = 0;
-    const timer = setInterval(() => {
-      setActiveStepByKey(reStep[index]);
-      index++;
-      if (index >= reStep.length) {
-        index = 0;
-      }
-    }, 1000);
-    return () => {
-      clearInterval(timer);
-    };
-  }, [setActiveStepByKey]);
-  return /*#__PURE__*/_jsx("div", {
-    children: /*#__PURE__*/_jsx("p", {
-      children: "\u5728\u9009\u62E9\u8282\u70B9\u65F6\uFF0C\u70B9\u51FB\u4E86\u521B\u5EFA\u8282\u70B9\u6309\u94AE\u624D\u51FA\u73B0 \u521B\u5EFA\u8282\u70B9/\u542F\u52A8\u8282\u70B9/\u521B\u5EFA\u4E2D\u4E09\u4E2A\u5B50\u6D41\u7A0B"
-    })
-  });
-}
-export default function Demo() {
-  const {
-    palette
-  } = useTheme();
-  return /*#__PURE__*/_jsx(BodyContainer, {
-    children: /*#__PURE__*/_jsx(StepProvider, {
-      steps: testSteps,
-      mode: "memory",
-      children: /*#__PURE__*/_jsx(Layout, {
-        locale: "zh",
-        blockletMeta: staticDemo,
-        headerEndAddons: /*#__PURE__*/_jsx(HeaderEndAddons, {}),
-        navLogo: getNavLogo(palette.mode),
-        children: /*#__PURE__*/_jsx(Content, {
-          children: /*#__PURE__*/_jsx(TestContent, {})
-        })
-      })
-    })
-  });
-}
-Demo.propTypes = {};

package/lib/Layout/demo/memory-mode.js

@@ -1,49 +0,0 @@
-import { useEffect } from 'react';
-import { useTheme } from '@mui/material';
-import Layout from '../../index';
-import { StepProvider, useStepContext } from '../../context/step';
-import staticDemo from './static-demo-data.json';
-import { BodyContainer, Content, HeaderEndAddons, getNavLogo } from './constants';
-import { jsx as _jsx } from "react/jsx-runtime";
-const testSteps = [{
-  key: 'wizard',
-  name: 'Name1 Wizard'
-}, {
-  key: 'select-node',
-  name: 'Name2 select node'
-}, {
-  key: 'launch-app',
-  name: 'Name3 launch app'
-}];
-function TestContent() {
-  const {
-    setActiveStepByKey
-  } = useStepContext();
-  useEffect(() => {
-    setActiveStepByKey('select-node');
-  }, [setActiveStepByKey]);
-  return /*#__PURE__*/_jsx("p", {
-    children: "memory mode, not linked to history"
-  });
-}
-export default function Demo() {
-  const {
-    palette
-  } = useTheme();
-  return /*#__PURE__*/_jsx(BodyContainer, {
-    children: /*#__PURE__*/_jsx(StepProvider, {
-      steps: testSteps,
-      mode: "memory",
-      children: /*#__PURE__*/_jsx(Layout, {
-        locale: "zh",
-        blockletMeta: staticDemo,
-        headerEndAddons: /*#__PURE__*/_jsx(HeaderEndAddons, {}),
-        navLogo: getNavLogo(palette.mode),
-        children: /*#__PURE__*/_jsx(Content, {
-          children: /*#__PURE__*/_jsx(TestContent, {})
-        })
-      })
-    })
-  });
-}
-Demo.propTypes = {};

package/lib/Layout/demo/old-code-compatible.js

@@ -1,36 +0,0 @@
-import LauncherLogo from '@arcblock/icons/lib/LauncherLogo';
-import LauncherLogoNotext from '@arcblock/icons/lib/LauncherLogoNotext';
-import { useTheme } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import Layout from '../../index';
-import { StepProvider } from '../../context/step';
-import staticDemo from './static-demo-data.json';
-import { BodyContainer, Content, LogoContainer, steps, HeaderEndAddons } from './constants';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function Demo() {
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-  const logo = isMobile ? /*#__PURE__*/_jsx(LauncherLogoNotext, {
-    width: 32,
-    height: 32
-  }) : /*#__PURE__*/_jsx(LogoContainer, {
-    children: /*#__PURE__*/_jsx(LauncherLogo, {
-      width: "145",
-      height: "48"
-    })
-  });
-  return /*#__PURE__*/_jsx(BodyContainer, {
-    children: /*#__PURE__*/_jsx(StepProvider, {
-      steps: steps,
-      children: /*#__PURE__*/_jsx(Layout, {
-        blockletMeta: staticDemo,
-        headerEndAddons: /*#__PURE__*/_jsx(HeaderEndAddons, {}),
-        navLogo: logo,
-        children: /*#__PURE__*/_jsx(Content, {
-          children: "I am test content"
-        })
-      })
-    })
-  });
-}
-Demo.propTypes = {};

package/lib/Layout/demo/optional-step.js

@@ -1,61 +0,0 @@
-import { useEffect } from 'react';
-import { useTheme } from '@mui/material';
-import Layout from '../../index';
-import { StepProvider, useStepContext } from '../../context/step';
-import staticDemo from './static-demo-data.json';
-import { BodyContainer, Content, HeaderEndAddons, getNavLogo } from './constants';
-import { jsx as _jsx } from "react/jsx-runtime";
-const testSteps = [{
-  key: 'wizard',
-  name: 'Name1 Wizard'
-}, {
-  key: 'select-node',
-  name: 'Name2 select node',
-  optional: true
-}, {
-  key: 'launch-app',
-  name: 'Name3 launch app'
-}];
-function TestContent() {
-  const {
-    setActiveStepByKey
-  } = useStepContext();
-  useEffect(() => {
-    const reStep = testSteps.map(e => e.key);
-    let index = 0;
-    const timer = setInterval(() => {
-      setActiveStepByKey(reStep[index]);
-      index++;
-      if (index >= reStep.length) {
-        index = 0;
-      }
-    }, 1000);
-    return () => {
-      clearInterval(timer);
-    };
-  }, [setActiveStepByKey]);
-  return /*#__PURE__*/_jsx("p", {
-    children: "memory mode, not linked to history"
-  });
-}
-export default function Demo() {
-  const {
-    palette
-  } = useTheme();
-  return /*#__PURE__*/_jsx(BodyContainer, {
-    children: /*#__PURE__*/_jsx(StepProvider, {
-      steps: testSteps,
-      mode: "memory",
-      children: /*#__PURE__*/_jsx(Layout, {
-        locale: "zh",
-        blockletMeta: staticDemo,
-        headerEndAddons: /*#__PURE__*/_jsx(HeaderEndAddons, {}),
-        navLogo: getNavLogo(palette.mode),
-        children: /*#__PURE__*/_jsx(Content, {
-          children: /*#__PURE__*/_jsx(TestContent, {})
-        })
-      })
-    })
-  });
-}
-Demo.propTypes = {};