@arcblock/result-html-pages 3.4.14 → 3.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/result-html-pages",
-  "version": "3.4.14",
+  "version": "3.5.0",
   "description": "This package provide a function that generates html code for common error pages such as 404, 500, etc.",
   "keywords": [
     "arcblock",
@@ -31,6 +31,10 @@
   "bugs": {
     "url": "https://github.com/ArcBlock/ux/issues"
   },
+  "files": [
+    "lib",
+    "es"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -38,5 +42,5 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "jest": "^29.7.0"
   },
-  "gitHead": "d663390d3c6a9b2d8d71790c770dd0025ae309de"
+  "gitHead": "1cfc816004525cf1b352ec2b64d459f4769f0237"
 }

package/src/ResultHTMLPages.stories.jsx

@@ -1,101 +0,0 @@
-import { useState, useMemo } from 'react';
-import { Box, Select, MenuItem } from '@mui/material';
-
-import { render } from './index';
-
-export default {
-  title: 'Feedback/ResultHTMLPages',
-};
-
-export function Default() {
-  const [status, setStatus] = useState('404');
-  const html = useMemo(() => render({ status }), [status]);
-
-  const handleChange = (event) => {
-    setStatus(event.target.value);
-  };
-
-  return (
-    <Box>
-      <Box
-        sx={{
-          m: 2,
-        }}>
-        <Select value={status} onChange={handleChange}>
-          <MenuItem value="404">404</MenuItem>
-          <MenuItem value="403">403</MenuItem>
-          <MenuItem value="500">500</MenuItem>
-          <MenuItem value="502">502</MenuItem>
-          <MenuItem value="error">error</MenuItem>
-          <MenuItem value="maintenance">maintenance</MenuItem>
-          <MenuItem value="comingSoon">comingSoon</MenuItem>
-        </Select>
-      </Box>
-      <Box
-        sx={{
-          height: 600,
-          m: 2,
-          border: 1,
-        }}>
-        <iframe
-          title="html page"
-          src={`data:text/html;charset=utf-8,${encodeURIComponent(html)}`}
-          frameBorder={0}
-          style={{ width: '100%', height: '100%' }}
-        />
-      </Box>
-    </Box>
-  );
-}
-
-Default.storyName = 'default';
-
-export function InfoPage() {
-  const html = render({
-    status: 'info',
-    title: 'Here is a info message',
-    extra: '<a href="/">Back Home</a>',
-  });
-  return (
-    <Box
-      sx={{
-        height: 600,
-        m: 2,
-        border: 1,
-      }}>
-      <iframe
-        title="info page"
-        src={`data:text/html;charset=utf-8,${encodeURIComponent(html)}`}
-        frameBorder={0}
-        style={{ width: '100%', height: '100%' }}
-      />
-    </Box>
-  );
-}
-
-InfoPage.storyName = 'info page';
-
-export function WithoutIcon() {
-  const html = render({
-    status: '404',
-    icon: null,
-    extra: '<a href="/">Back Home</a>',
-  });
-  return (
-    <Box
-      sx={{
-        height: 600,
-        m: 2,
-        border: 1,
-      }}>
-      <iframe
-        title="custom 404 page"
-        src={`data:text/html;charset=utf-8,${encodeURIComponent(html)}`}
-        frameBorder={0}
-        style={{ width: '100%', height: '100%' }}
-      />
-    </Box>
-  );
-}
-
-WithoutIcon.storyName = 'without icon';

package/src/icons.js

@@ -1,5 +0,0 @@
-export const ErrorIcon =
-  '<svg focusable="false" viewBox="0 0 24 24" aria-hidden="true" style="color: rgb(241, 110, 110); font-size: 72px;"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm4.3 14.3c-.39.39-1.02.39-1.41 0L12 13.41 9.11 16.3c-.39.39-1.02.39-1.41 0a.9959.9959 0 010-1.41L10.59 12 7.7 9.11a.9959.9959 0 010-1.41c.39-.39 1.02-.39 1.41 0L12 10.59l2.89-2.89c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41L13.41 12l2.89 2.89c.38.38.38 1.02 0 1.41z"></path></svg>';
-
-export const InfoIcon =
-  '<svg focusable="false" viewBox="0 0 24 24" aria-hidden="true" style="color: rgb(7, 117, 248); font-size: 72px;"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path></svg>';

package/src/index.js

@@ -1,42 +0,0 @@
-import template from './template';
-import translations from './translations';
-import { ErrorIcon, InfoIcon } from './icons';
-
-const renderHandler = ({ type, locale, icon, ...rest }) => {
-  const translation = translations[locale] || translations.en;
-  return template.render({
-    icon,
-    title: translation[type].title,
-    description: translation[type].description,
-    ...rest,
-  });
-};
-
-const renderers = {
-  404: ({ locale = 'en', ...rest }) => renderHandler({ type: 404, locale, icon: ErrorIcon, ...rest }),
-  403: ({ locale = 'en', ...rest }) => renderHandler({ type: 403, locale, icon: ErrorIcon, ...rest }),
-  500: ({ locale = 'en', ...rest }) => renderHandler({ type: 500, locale, icon: ErrorIcon, ...rest }),
-  502: ({ locale = 'en', ...rest }) => renderHandler({ type: 502, locale, icon: ErrorIcon, ...rest }),
-  error: ({ locale = 'en', ...rest }) => renderHandler({ type: 'error', locale, icon: ErrorIcon, ...rest }),
-  maintenance: ({ locale = 'en', ...rest }) => renderHandler({ type: 'maintenance', locale, icon: InfoIcon, ...rest }),
-  comingSoon: ({ locale = 'en', ...rest }) => renderHandler({ type: 'comingSoon', locale, icon: InfoIcon, ...rest }),
-  info: (props) => {
-    return template.render({
-      icon: InfoIcon,
-      ...props,
-    });
-  },
-};
-
-// eslint-disable-next-line import/prefer-default-export
-export function render(options = {}) {
-  const { status, locale = 'en', ...rest } = options;
-  if (status) {
-    const renderer = renderers[status];
-    if (!renderer) {
-      throw new Error(`Please provide a valid status. Valid values are: ${Object.keys(renderers).join(', ')}`);
-    }
-    return renderer({ locale, ...rest });
-  }
-  return template.render({ ...rest });
-}

package/src/template.js

@@ -1,75 +0,0 @@
-function render({ pageTitle, title, icon, description, extra, hiddenText = '' }) {
-  if (!title) {
-    throw new Error('title is required');
-  }
-  // eslint-disable-next-line no-param-reassign
-  pageTitle = pageTitle || `${title} - Blocklet Server`;
-  return `
-    <!DOCTYPE html>
-      <html lang="en">
-      <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>${pageTitle}</title>
-        <style>
-          html {
-            box-sizing: border-box;
-            font-size: 16px;
-          }
-          *, *::before, *::after {
-            box-sizing: inherit;
-          }
-          html, body {
-            height: 100%;
-          }
-          body {
-            margin: 0;
-          }
-          .container {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            height: 100%;
-            padding: 16px;
-            background-color: #f7f8fb;
-          }
-          .svg-wrapper > * {
-            fill: currentColor;
-            width: 1em;
-            height: 1em;
-            display: inline-block;
-          }
-          .title {
-            margin-top: 24px;
-            font-size: 22px;
-            font-weight: 400;
-            color: #47494E;
-            text-align: center;
-          }
-          .description {
-            margin-top: 8px;
-            font-size: 14px;
-            color: #7F828B;
-            text-align: center;
-          }
-          .extra {
-            margin-top: 24px;
-          }
-        </style>
-      </head>
-      <body>
-        <div class="container">
-          ${icon ? `<span class="svg-wrapper">${icon}</span>` : ''}
-          <div class="title">
-            ${title}
-          </div>
-          ${description ? `<div class="description">${description}</div>` : ''}
-          ${extra ? `<div class="extra">${extra}</div>` : ''}
-          ${hiddenText ? `<div style="display:none;">${hiddenText}</div>` : ''}
-        </div>
-      </body>
-    </html>`;
-}
-
-export default { render };

package/src/translations.js

@@ -1,63 +0,0 @@
-export default {
-  en: {
-    404: {
-      title: '404 - Page Not Found',
-      description: 'Sorry about that, the page you are looking for does not exist or has been moved.',
-    },
-    403: {
-      title: '403 – Forbidden',
-      description: 'Sorry, you are not authorized to access this page.',
-    },
-    500: {
-      title: '500 - Internal Server Error',
-      description: 'An internal server error has occurred. Please try again later.',
-    },
-    502: {
-      title: '502 - Bad Gateway',
-      description: 'Proxy to destination server failed. Please try again later.',
-    },
-    error: {
-      title: 'Application Error',
-      description: 'Something went wrong. Please try again later.',
-    },
-    maintenance: {
-      title: 'Offline for maintenance',
-      description: 'This app is undergoing maintenance right now. Please check back later.',
-    },
-    comingSoon: {
-      title: 'Coming Soon',
-      description: "Our website is under construction. We'll be here soon with our new website.",
-    },
-  },
-
-  zh: {
-    404: {
-      title: '404 - 页面未找到',
-      description: '很抱歉，您正在寻找的页面不存在或已被移动。',
-    },
-    403: {
-      title: '403 – 禁止访问',
-      description: '很抱歉，您没有权限访问此页面。',
-    },
-    500: {
-      title: '500 - 内部服务器错误',
-      description: '发生了一个内部服务器错误。请稍后再试。',
-    },
-    502: {
-      title: '502 - 网关错误',
-      description: '无法代理到目的服务器。请稍后再试。',
-    },
-    error: {
-      title: 'Application Error',
-      description: '出错了, 请稍后再试。',
-    },
-    maintenance: {
-      title: '维护中',
-      description: '应用程序正在进行维护。请稍后再查看。',
-    },
-    comingSoon: {
-      title: '即将上线',
-      description: '我们的网站正在建设中。我们很快就会在这里推出我们的新网站。',
-    },
-  },
-};

package/vite.config.mjs

@@ -1,29 +0,0 @@
-import { defineConfig } from 'vite';
-import svgr from 'vite-plugin-svgr';
-import react from '@vitejs/plugin-react';
-import noBundlePlugin from 'vite-plugin-no-bundle';
-import fg from 'fast-glob';
-
-export default defineConfig({
-  plugins: [
-    react({ jsxRuntime: 'automatic' }),
-    svgr({
-      include: ['**/*.svg', '**/*.svg?react'],
-    }),
-    noBundlePlugin({
-      root: 'src',
-      copy: ['**/*.png', '**/*.gif', '**/*.jpg', '**/*.jpeg', '**/*.d.ts'],
-    }),
-  ],
-  build: {
-    lib: {
-      entry: fg.sync('src/**/*.{tsx,ts,jsx,js}', {
-        ignore: ['**/stories/**', '**/demo/**', '**/*.d.ts', '**/*.stories.*'],
-      }),
-      formats: ['es', 'cjs'],
-      fileName: (format, entryName) => `${format === 'es' ? 'es' : 'lib'}/${entryName}.js`,
-    },
-    outDir: './',
-    emptyOutDir: false,
-  },
-});