@blocklet/launcher-layout 2.3.44 → 2.10.20

package/lib/LaunchResultMessage/demo/default.js

@@ -0,0 +1,18 @@
+import Button from '@arcblock/ux/lib/Button';
+import LaunchResultMessage from '../../launch-result-message';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Demo() {
+  return /*#__PURE__*/_jsx(LaunchResultMessage, {
+    variant: "error",
+    title: "I am Title",
+    subTitle: "I am sub title",
+    footer: /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(Button, {
+        color: "primary",
+        variant: "contained",
+        children: "Click Me"
+      })
+    })
+  });
+}
+Demo.propTypes = {};

package/lib/LaunchResultMessage/result-message.stories.js

@@ -0,0 +1,13 @@
+import Default from './demo/default';
+export default {
+  title: 'Blocklet-Launcher/ResultMessage',
+  parameters: {
+    layout: 'fullscreen',
+    readme: {
+      sidebar: '<!-- PROPS -->'
+    }
+  }
+};
+Default.argTypes = {};
+Default.storyName = 'ResultMessage';
+export { Default };

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

@@ -0,0 +1,85 @@
+import { useEffect } from 'react';
+import LauncherLogo from '@arcblock/icons/lib/LauncherLogo';
+import LauncherLogoNotext from '@arcblock/icons/lib/LauncherLogoNotext';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import Button from '@mui/material/IconButton';
+import Layout from '../../index';
+import { StepProvider, useStepContext } from '../../context/step';
+import staticDemo from './static-demo-data.json';
+import { BodyContainer, Content } 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() {
+  return /*#__PURE__*/_jsx(BodyContainer, {
+    children: /*#__PURE__*/_jsx(StepProvider, {
+      steps: testSteps,
+      mode: "memory",
+      children: /*#__PURE__*/_jsx(Layout, {
+        locale: "zh",
+        blockletMeta: staticDemo,
+        headerEndAddons: /*#__PURE__*/_jsx(Button, {
+          children: /*#__PURE__*/_jsx(HelpOutlineIcon, {
+            style: {
+              fontSize: 28
+            }
+          })
+        }),
+        navLogo: {
+          desktop: /*#__PURE__*/_jsx(LauncherLogo, {
+            width: "145",
+            height: "48"
+          }),
+          mobile: /*#__PURE__*/_jsx(LauncherLogoNotext, {
+            width: 32,
+            height: 32
+          })
+        },
+        children: /*#__PURE__*/_jsx(Content, {
+          children: /*#__PURE__*/_jsx(TestContent, {})
+        })
+      })
+    })
+  });
+}
+Demo.propTypes = {};

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

@@ -0,0 +1,69 @@
+import LauncherLogo from '@arcblock/icons/lib/LauncherLogo';
+import LauncherLogoNotext from '@arcblock/icons/lib/LauncherLogoNotext';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import Button from '@mui/material/IconButton';
+import Layout from '../../index';
+import { StepProvider } from '../../context/step';
+import staticDemo from './static-demo-data.json';
+import { BodyContainer, Content } 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() {
+  return /*#__PURE__*/_jsx(BodyContainer, {
+    children: /*#__PURE__*/_jsx(StepProvider, {
+      steps: testSteps,
+      children: /*#__PURE__*/_jsx(Layout, {
+        locale: "zh",
+        blockletMeta: staticDemo,
+        headerEndAddons: /*#__PURE__*/_jsx(Button, {
+          children: /*#__PURE__*/_jsx(HelpOutlineIcon, {
+            style: {
+              fontSize: 28
+            }
+          })
+        }),
+        navLogo: {
+          desktop: /*#__PURE__*/_jsx(LauncherLogo, {
+            width: "145",
+            height: "48"
+          }),
+          mobile: /*#__PURE__*/_jsx(LauncherLogoNotext, {
+            width: 32,
+            height: 32
+          })
+        },
+        children: /*#__PURE__*/_jsx(Content, {
+          children: /*#__PURE__*/_jsx("p", {
+            children: "set children in steps data"
+          })
+        })
+      })
+    })
+  });
+}
+Demo.propTypes = {};

package/lib/Layout/demo/constants.js

@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+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%;
+`;
+export const Content = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+`;

package/lib/Layout/demo/default.js

@@ -0,0 +1,69 @@
+import LauncherLogo from '@arcblock/icons/lib/LauncherLogo';
+import LauncherLogoNotext from '@arcblock/icons/lib/LauncherLogoNotext';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import Button from '@mui/material/IconButton';
+import Layout from '../../index';
+import { StepProvider } from '../../context/step';
+import staticDemo from './static-demo-data.json';
+import { BodyContainer, Content } 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'
+  }];
+  return /*#__PURE__*/_jsx(BodyContainer, {
+    children: /*#__PURE__*/_jsx(StepProvider, {
+      steps: testSteps,
+      children: /*#__PURE__*/_jsx(Layout, {
+        locale: "zh",
+        blockletMeta: staticDemo,
+        headerEndAddons: /*#__PURE__*/_jsx(Button, {
+          children: /*#__PURE__*/_jsx(HelpOutlineIcon, {
+            style: {
+              fontSize: 28
+            }
+          })
+        }),
+        navLogo: {
+          desktop: /*#__PURE__*/_jsx(LauncherLogo, {
+            width: "145",
+            height: "48"
+          }),
+          mobile: /*#__PURE__*/_jsx(LauncherLogoNotext, {
+            width: 32,
+            height: 32
+          })
+        },
+        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/logo-url.js

@@ -0,0 +1,46 @@
+import LauncherLogo from '@arcblock/icons/lib/LauncherLogo';
+import LauncherLogoNotext from '@arcblock/icons/lib/LauncherLogoNotext';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import Button from '@mui/material/IconButton';
+import Layout from '../../index';
+import { StepProvider } from '../../context/step';
+import staticDemo from './static-demo-data.json';
+import { BodyContainer, Content, steps } from './constants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Demo() {
+  return /*#__PURE__*/_jsx(BodyContainer, {
+    children: /*#__PURE__*/_jsx(StepProvider, {
+      steps: steps,
+      children: /*#__PURE__*/_jsx(Layout, {
+        locale: "zh",
+        blockletMeta: staticDemo,
+        headerEndAddons: /*#__PURE__*/_jsx(Button, {
+          children: /*#__PURE__*/_jsx(HelpOutlineIcon, {
+            style: {
+              fontSize: 28
+            }
+          })
+        }),
+        logoUrl: "https://store.blocklet.dev/assets/z8ia4e5vAeDsQEE2P26bQqz9oWR1Lxg9qUMaV/logo.png",
+        navLogo: {
+          desktop: /*#__PURE__*/_jsx(LauncherLogo, {
+            width: "145",
+            height: "48"
+          }),
+          mobile: /*#__PURE__*/_jsx(LauncherLogoNotext, {
+            width: 32,
+            height: 32
+          })
+        },
+        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

@@ -0,0 +1,110 @@
+import { useEffect } from 'react';
+import LauncherLogo from '@arcblock/icons/lib/LauncherLogo';
+import LauncherLogoNotext from '@arcblock/icons/lib/LauncherLogoNotext';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import Button from '@mui/material/IconButton';
+import Layout from '../../index';
+import { StepProvider, useStepContext } from '../../context/step';
+import staticDemo from './static-demo-data.json';
+import { BodyContainer, Content } 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() {
+  return /*#__PURE__*/_jsx(BodyContainer, {
+    children: /*#__PURE__*/_jsx(StepProvider, {
+      steps: testSteps,
+      mode: "memory",
+      children: /*#__PURE__*/_jsx(Layout, {
+        locale: "zh",
+        blockletMeta: staticDemo,
+        headerEndAddons: /*#__PURE__*/_jsx(Button, {
+          children: /*#__PURE__*/_jsx(HelpOutlineIcon, {
+            style: {
+              fontSize: 28
+            }
+          })
+        }),
+        navLogo: {
+          desktop: /*#__PURE__*/_jsx(LauncherLogo, {
+            width: "145",
+            height: "48"
+          }),
+          mobile: /*#__PURE__*/_jsx(LauncherLogoNotext, {
+            width: 32,
+            height: 32
+          })
+        },
+        children: /*#__PURE__*/_jsx(Content, {
+          children: /*#__PURE__*/_jsx(TestContent, {})
+        })
+      })
+    })
+  });
+}
+Demo.propTypes = {};

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

@@ -0,0 +1,64 @@
+import { useEffect } from 'react';
+import LauncherLogo from '@arcblock/icons/lib/LauncherLogo';
+import LauncherLogoNotext from '@arcblock/icons/lib/LauncherLogoNotext';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import Button from '@mui/material/IconButton';
+import Layout from '../../index';
+import { StepProvider, useStepContext } from '../../context/step';
+import staticDemo from './static-demo-data.json';
+import { BodyContainer, Content } 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() {
+  return /*#__PURE__*/_jsx(BodyContainer, {
+    children: /*#__PURE__*/_jsx(StepProvider, {
+      steps: testSteps,
+      mode: "memory",
+      children: /*#__PURE__*/_jsx(Layout, {
+        locale: "zh",
+        blockletMeta: staticDemo,
+        headerEndAddons: /*#__PURE__*/_jsx(Button, {
+          children: /*#__PURE__*/_jsx(HelpOutlineIcon, {
+            style: {
+              fontSize: 28
+            }
+          })
+        }),
+        navLogo: {
+          desktop: /*#__PURE__*/_jsx(LauncherLogo, {
+            width: "145",
+            height: "48"
+          }),
+          mobile: /*#__PURE__*/_jsx(LauncherLogoNotext, {
+            width: 32,
+            height: 32
+          })
+        },
+        children: /*#__PURE__*/_jsx(Content, {
+          children: /*#__PURE__*/_jsx(TestContent, {})
+        })
+      })
+    })
+  });
+}
+Demo.propTypes = {};

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

@@ -0,0 +1,44 @@
+import LauncherLogo from '@arcblock/icons/lib/LauncherLogo';
+import LauncherLogoNotext from '@arcblock/icons/lib/LauncherLogoNotext';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import Button from '@mui/material/IconButton';
+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 } 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(Button, {
+          children: /*#__PURE__*/_jsx(HelpOutlineIcon, {
+            style: {
+              fontSize: 28
+            }
+          })
+        }),
+        navLogo: logo,
+        children: /*#__PURE__*/_jsx(Content, {
+          children: "I am test content"
+        })
+      })
+    })
+  });
+}
+Demo.propTypes = {};

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

@@ -0,0 +1,76 @@
+import { useEffect } from 'react';
+import LauncherLogo from '@arcblock/icons/lib/LauncherLogo';
+import LauncherLogoNotext from '@arcblock/icons/lib/LauncherLogoNotext';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import Button from '@mui/material/IconButton';
+import Layout from '../../index';
+import { StepProvider, useStepContext } from '../../context/step';
+import staticDemo from './static-demo-data.json';
+import { BodyContainer, Content } 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() {
+  return /*#__PURE__*/_jsx(BodyContainer, {
+    children: /*#__PURE__*/_jsx(StepProvider, {
+      steps: testSteps,
+      mode: "memory",
+      children: /*#__PURE__*/_jsx(Layout, {
+        locale: "zh",
+        blockletMeta: staticDemo,
+        headerEndAddons: /*#__PURE__*/_jsx(Button, {
+          children: /*#__PURE__*/_jsx(HelpOutlineIcon, {
+            style: {
+              fontSize: 28
+            }
+          })
+        }),
+        navLogo: {
+          desktop: /*#__PURE__*/_jsx(LauncherLogo, {
+            width: "145",
+            height: "48"
+          }),
+          mobile: /*#__PURE__*/_jsx(LauncherLogoNotext, {
+            width: 32,
+            height: 32
+          })
+        },
+        children: /*#__PURE__*/_jsx(Content, {
+          children: /*#__PURE__*/_jsx(TestContent, {})
+        })
+      })
+    })
+  });
+}
+Demo.propTypes = {};

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

@@ -0,0 +1,108 @@
+import { useEffect } from 'react';
+import LauncherLogo from '@arcblock/icons/lib/LauncherLogo';
+import LauncherLogoNotext from '@arcblock/icons/lib/LauncherLogoNotext';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import Button from '@mui/material/IconButton';
+import Layout from '../../index';
+import { StepProvider, useStepContext } from '../../context/step';
+import staticDemo from './static-demo-data.json';
+import { BodyContainer, Content } from './constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+const testSteps = [{
+  key: 'start-app',
+  name: 'start-app name'
+}, {
+  key: 'wizard',
+  name: 'showChild activating',
+  showChild: 'activating',
+  // 激活中才显示 children progress，其他时候都隐藏
+  children: [{
+    key: 'wizard-01',
+    name: 'wizard-child-a'
+  }, {
+    key: 'wizard-02',
+    name: 'wizard-child-b'
+  }]
+}, {
+  key: 'select-node',
+  name: 'showChild activated',
+  showChild: 'activated',
+  // 激活中或已激活才会显示 children progress
+  children: [{
+    key: 'select-node-01',
+    name: 'select-node-child-a'
+  }, {
+    key: 'select-node-02',
+    name: 'select-node-child-b'
+  }]
+}, {
+  key: 'launch-app',
+  name: 'showChild always',
+  showChild: 'always',
+  // 默认值，始终展示 children progress
+  children: [{
+    key: 'launch-app-01',
+    name: 'launch-app-child-a'
+  }, {
+    key: 'launch-app-02',
+    name: 'launch-app-child-b'
+  }]
+}, {
+  key: 'complete-app',
+  name: '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("p", {
+    children: "memory mode, not linked to history"
+  });
+}
+export default function Demo() {
+  return /*#__PURE__*/_jsx(BodyContainer, {
+    children: /*#__PURE__*/_jsx(StepProvider, {
+      steps: testSteps,
+      mode: "memory",
+      children: /*#__PURE__*/_jsx(Layout, {
+        locale: "zh",
+        blockletMeta: staticDemo,
+        headerEndAddons: /*#__PURE__*/_jsx(Button, {
+          children: /*#__PURE__*/_jsx(HelpOutlineIcon, {
+            style: {
+              fontSize: 28
+            }
+          })
+        }),
+        navLogo: {
+          desktop: /*#__PURE__*/_jsx(LauncherLogo, {
+            width: "145",
+            height: "48"
+          }),
+          mobile: /*#__PURE__*/_jsx(LauncherLogoNotext, {
+            width: 32,
+            height: 32
+          })
+        },
+        children: /*#__PURE__*/_jsx(Content, {
+          children: /*#__PURE__*/_jsx(TestContent, {})
+        })
+      })
+    })
+  });
+}
+Demo.propTypes = {};

package/lib/Layout/demo/static-demo-data.json

@@ -0,0 +1,85 @@
+{
+  "author": { "email": "wangshijun2010@gmail.com", "name": "wangshijun", "url": "http://github.com/wangshijun" },
+  "capabilities": { "clusterMode": false, "component": true },
+  "children": [],
+  "community": "",
+  "description": "Demo blocklet that shows how to serve a static html5 game with Blocklet Server",
+  "did": "z8ia4e5vAeDsQEE2P26bQqz9oWR1Lxg9qUMaV",
+  "dist": {
+    "integrity": "sha512-uL9GnG9k6HpfrqKKcXfsKJmZWpNgs3xqM1lG+Rt5oI1a07wFoqHtMvNFveFnP/blRmP8GpjUTBKwkWFb5MEedQ==",
+    "size": 314212,
+    "tarball": "static-demo-blocklet-1.3.0.tgz"
+  },
+  "documentation": "",
+  "environments": [],
+  "files": ["app/", "screenshots/", "logo.png", "blocklet.yml", "blocklet.md", "README.md"],
+  "gitHash": "c349d259c463de4addef326979f2fa9d2c2c9b69",
+  "group": "static",
+  "homepage": "",
+  "interfaces": [
+    { "name": "publicUrl", "path": "/", "port": "BLOCKLET_PORT", "prefix": "*", "protocol": "tcp", "type": "web" }
+  ],
+  "keywords": ["demo", "game", "blocklet"],
+  "license": "MIT",
+  "logo": "logo.png",
+  "main": "app",
+  "name": "static-demo-blocklet",
+  "nftFactory": "",
+  "path": "/static/static-demo-blocklet",
+  "payment": { "price": [], "share": [] },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/blocklet/html-2048-sample.git",
+    "parsedUrl": "https://github.com/blocklet/html-2048-sample"
+  },
+  "requirements": { "abtnode": ">=1.1.0", "cpu": "*", "os": "*" },
+  "screenshots": ["0-home.png"],
+  "signatures": [
+    {
+      "type": "ED25519",
+      "name": "Blocklet Store",
+      "signer": "zNKXtdqz6Jbw5mKpojK2nP5gRNiEGJY3mNFF",
+      "pk": "z8VahoQa6oS63Ym3rfsmzZEt9Moonbg4JSUiit5J7DRAV",
+      "excludes": ["htmlAst", "lastPublishedAt", "stats", "readme"],
+      "appended": ["htmlAst", "lastPublishedAt", "stats", "readme"],
+      "created": "2022-05-11T03:53:41.476Z",
+      "sig": "z4xFd9LnY1oFf47XwfEerj6cPSRmHCQQjXAWDSKGXTWsvbpfE4WGSRCTPUM73eXFunJ2MRbX9AAd9di5frU14j9ko"
+    },
+    {
+      "appended": ["htmlAst", "lastPublishedAt", "stats", "readme"],
+      "created": "2022-05-11T03:53:39.276Z",
+      "excludes": ["htmlAst", "lastPublishedAt", "stats", "readme"],
+      "name": "static-demo-blocklet",
+      "pk": "z2eCsEyycLQPvqCRxvGBawGwyTfoZF1UpzocGqvtjdx7J",
+      "signer": "z1euigAXVHi9cJfJGo2b9QaeQwxjQynSKoJ",
+      "type": "ED25519",
+      "sig": "z5SNRXdk9mnauCTYrwAp9D5PKcdbz9HtkERQkBiJzLLHnA1fj7REi8GpAkVYx7SroKuk6E7hB7FyoegKX8izDZFqE"
+    },
+    {
+      "created": "2022-05-11T03:53:10.846Z",
+      "name": "static-demo-blocklet",
+      "pk": "z75CxPgkoiANhn1iCMRHQX2w6fSQPgi2qZiqbhQuy9Xo3",
+      "sig": "z36PDVVsRWb4D4KB9qAYcNM8DCVQTcLsJyEWMmxtba3HP67FzgW38CfuHFivq2ADjc8Zw3dZ9vr2Ehmt3GVWQwogx",
+      "signer": "z1Rq9qSoqvAq1NcJJTzKB1AnM991Cm4JrzW",
+      "type": "ED25519"
+    }
+  ],
+  "specVersion": "1.2.7",
+  "timeout": { "start": 10 },
+  "title": "Static Demo",
+  "version": "1.3.0",
+  "readme": {
+    "en": "# Static Demo Blocklet\n\nThis is a blocklet demo of the 2048 game used to demonstrate how to install and run a blocklet on your Blocklet Server. It is a pure front-end web application written in Javascript, HTML, and CSS. You may already have some basic understanding of [Blocklet](https://www.arcblock.io/en/blocklets) and [Blocklet Server](https://www.arcblock.io/en/node). Now you can have your own blocklet set up and running in just a few minutes.\n\n## How to install and run html-2048-sample\n\n*   Click the Launch button\n*   You need to purchase a Blocklet Server first (if you don't already have one)\n*   Follow the installation wizard to install blocklet on your Blocklet Server\n*   Start the installed blocklet in the Blocklet Server console\n*   Access the public address of the blocklet\n\n## How it's made?\n\nYou can reference media files in the blocklet.md:\n\n![files](/assets/media/93/c12c59d1254078aad33cc70ca2043d.png)\n"
+  },
+  "stats": { "downloads": 23681 },
+  "category": {
+    "name": "fun",
+    "locales": { "zh": "娱乐", "en": "Fun" },
+    "_id": "6TYF6yIvrVvaNUkw",
+    "createdAt": "2022-01-11T01:48:16.351Z",
+    "updatedAt": "2022-01-11T01:48:16.351Z"
+  },
+  "owner": { "did": "z1euigAXVHi9cJfJGo2b9QaeQwxjQynSKoJ", "name": "arcblock", "role": "guest" },
+  "lastPublishedAt": "2022-05-11T03:53:41.548Z",
+  "registryUrl": "https://store.blocklet.dev"
+}

package/lib/Layout/layout.stories.js

@@ -0,0 +1,21 @@
+import Default from './demo/default';
+import LogoUrl from './demo/logo-url';
+import ChildProgress from './demo/child-progress';
+import MemoryMode from './demo/memory-mode';
+import OptionalStep from './demo/optional-step';
+import ChildProgressInMemoryMode from './demo/child-progress-in-memory-mode';
+import ShowChild from './demo/show-child';
+import LongestStepsForLaunch from './demo/longest-steps-for-launch';
+import OldCodeCompatible from './demo/old-code-compatible';
+export default {
+  title: 'Blocklet-Launcher/Layout',
+  parameters: {
+    layout: 'fullscreen',
+    readme: {
+      sidebar: '<!-- PROPS -->'
+    }
+  }
+};
+Default.argTypes = {};
+Default.storyName = 'Default';
+export { Default, LogoUrl, ChildProgress, MemoryMode, OptionalStep, ChildProgressInMemoryMode, ShowChild, LongestStepsForLaunch, OldCodeCompatible };

package/lib/header.js

@@ -210,8 +210,19 @@ const AppLink = styled.a`
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
-  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  font-family:
+    Lato,
+    Avenir,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol';
   text-decoration: none;
   font-weight: 700;
   -webkit-font-smoothing: antialiased;

package/lib/index.js

@@ -276,7 +276,8 @@ const Root = styled.div`
   }
 
   .layout-content {
-    width: 100%;
+    min-width: 0;
+    flex: 1;
     height: 100%;
     padding: 32px;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/launcher-layout",
-  "version": "2.3.44",
+  "version": "2.10.20",
   "description": "Common ux components of launcher",
   "publishConfig": {
     "access": "public"
@@ -9,7 +9,7 @@
     "launcher"
   ],
   "author": "polunzh <polunzh@gmail.com>",
-  "homepage": "https://github.com/blocklet/launcher/ux#readme",
+  "homepage": "https://github.com/ArcBlock/ux#readme",
   "license": "ISC",
   "main": "lib/index.js",
   "files": [
@@ -21,7 +21,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/blocklet/launcher/client.git"
+    "url": "https://github.com/ArcBlock/ux.git"
   },
   "scripts": {
     "lint": "eslint src",
@@ -29,10 +29,12 @@
     "build": "babel src --out-dir lib --copy-files --no-copy-ignored",
     "autoexports": "node tools/auto-exports.js",
     "watch": "babel src --out-dir lib -w --copy-files",
+    "precommit": "CI=1 npm run lint",
+    "prepush": "CI=1 npm run lint",
     "prepublish": "npm run build"
   },
   "bugs": {
-    "url": "https://github.com/blocklet/launcher/issues"
+    "url": "https://github.com/ArcBlock/ux/issues"
   },
   "peerDependencies": {
     "@arcblock/did-connect": "^2.10.1",
@@ -42,9 +44,9 @@
     "react": "^18.2.0"
   },
   "dependencies": {
-    "@arcblock/icons": "^2.10.18",
-    "@blocklet/launcher-util": "2.3.44",
-    "@blocklet/launcher-ux": "2.3.44",
+    "@arcblock/icons": "^2.10.20",
+    "@blocklet/launcher-util": "2.3.45",
+    "@blocklet/launcher-ux": "2.3.45",
     "@blocklet/meta": "1.16.29",
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
@@ -65,5 +67,5 @@
     "babel-plugin-inline-react-svg": "^2.0.2",
     "glob": "^10.4.5"
   },
-  "gitHead": "72ced151874f288b3627f254a0144a1d0908b8a5"
+  "gitHead": "e824874fc5c195246c96fcb8da7308b46d77236f"
 }