@arcblock/ux 2.13.70 → 3.0.0

package/lib/Util/logger.d.ts

@@ -1,4 +1,4 @@
-import debug from 'debug';
+import { default as debug } from 'debug';
 export declare const createDebug: debug.Debug & {
     debug: debug.Debug;
     default: debug.Debug;

package/lib/Util/logger.js

@@ -1,25 +1,17 @@
-/* eslint-disable import/prefer-default-export */
-import debug from 'debug';
-export const createDebug = debug;
-export const createLogger = namespace => {
-  return new Proxy(window.console, {
-    get(target, prop) {
-      return (...args) => {
-        try {
-          if (['log', 'debug', 'info', 'warn', 'error'].includes(prop)) {
-            // @ts-ignore
-            return target[prop](namespace, ...args);
-          }
-          if (target[prop] instanceof Function) {
-            // @ts-ignore
-            return target[prop](...args);
-          }
-          return target[prop];
-        } catch (err) {
-          console.error(`Logger error in ${namespace}:`, err);
-          return undefined;
-        }
-      };
-    }
-  });
-};
+import u from "debug";
+const i = u, d = (n) => new Proxy(window.console, {
+  get(e, r) {
+    return (...o) => {
+      try {
+        return ["log", "debug", "info", "warn", "error"].includes(r) ? e[r](n, ...o) : e[r] instanceof Function ? e[r](...o) : e[r];
+      } catch (t) {
+        console.error(`Logger error in ${n}:`, t);
+        return;
+      }
+    };
+  }
+});
+export {
+  i as createDebug,
+  d as createLogger
+};

package/lib/Util/passport.js

@@ -1,104 +1,89 @@
-import { getNftBGColor, DEFAULT_COLORS, getNftBGColorFromDid, getSvg } from '@arcblock/nft-display';
-export const getPassportColor = (preferredColor, did) => {
-  let color;
-  if (preferredColor === 'default') {
-    color = DEFAULT_COLORS['app-passport'];
-  } else if (preferredColor === 'auto') {
-    color = getNftBGColorFromDid(did);
-  } else {
-    color = getNftBGColor(preferredColor);
-  }
-  return color;
-};
-export const getTextColor = background => {
-  const r = parseInt(background.slice(1, 3), 16);
-  const g = parseInt(background.slice(3, 5), 16);
-  const b = parseInt(background.slice(5, 7), 16);
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-  return luminance > 0.5 ? '#111' : '#EEE';
-};
-export const createPassportSvg = ({
-  issuer = '',
-  title = '',
-  issuerDid = '',
-  issuerAvatarUrl = '',
-  ownerDid = '',
-  ownerAvatarUrl = '',
-  preferredColor = 'default',
-  revoked = false,
-  isDataUrl = false,
-  width = '100%',
-  height = '100%'
+import { DEFAULT_COLORS as x, getNftBGColorFromDid as C, getNftBGColor as E, getSvg as m } from "@arcblock/nft-display";
+const v = (e, a) => {
+  let t;
+  return e === "default" ? t = x["app-passport"] : e === "auto" ? t = C(a) : t = E(e), t;
+}, y = (e) => {
+  const a = parseInt(e.slice(1, 3), 16), t = parseInt(e.slice(3, 5), 16), n = parseInt(e.slice(5, 7), 16);
+  return (0.299 * a + 0.587 * t + 0.114 * n) / 255 > 0.5 ? "#111" : "#EEE";
+}, L = ({
+  issuer: e = "",
+  title: a = "",
+  issuerDid: t = "",
+  issuerAvatarUrl: n = "",
+  ownerDid: o = "",
+  ownerAvatarUrl: c = "",
+  preferredColor: l = "default",
+  revoked: r = !1,
+  isDataUrl: f = !1,
+  width: s = "100%",
+  height: p = "100%"
 }) => {
-  const color = getPassportColor(preferredColor, issuerDid);
-  const svgXML = getSvg({
-    width,
-    height,
-    tag: revoked ? 'revoked' : '',
-    tagVariant: revoked ? 'error' : 'info',
-    color,
-    did: ownerDid,
-    variant: 'app-passport',
-    verifiable: true,
+  const u = v(l, t), i = m({
+    width: s,
+    height: p,
+    tag: r ? "revoked" : "",
+    tagVariant: r ? "error" : "info",
+    color: u,
+    did: o,
+    variant: "app-passport",
+    verifiable: !0,
     issuer: {
-      name: issuer,
-      icon: issuerAvatarUrl
+      name: e,
+      icon: n
     },
     header: {
-      name: title,
-      icon: ownerAvatarUrl
+      name: a,
+      icon: c
     },
     // FIXME: @wangshijun this should be dynamic
     extra: {
-      key: 'Exp',
-      value: '2123-01-01'
+      key: "Exp",
+      value: "2123-01-01"
     }
   });
-  if (isDataUrl) {
-    return `data:image/svg+xml;utf8,${encodeURIComponent(svgXML)}`;
-  }
-  return svgXML;
-};
-export const createKycSvg = ({
-  issuer = '',
-  title = '',
-  issuerDid = '',
-  issuerAvatarUrl = '',
-  ownerDid = '',
-  ownerName = '',
-  ownerAvatarUrl = '',
-  preferredColor = 'default',
-  type = 'email',
-  revoked = false,
-  isDataUrl = false,
-  width = '100%',
-  height = '100%'
+  return f ? `data:image/svg+xml;utf8,${encodeURIComponent(i)}` : i;
+}, S = ({
+  issuer: e = "",
+  title: a = "",
+  issuerDid: t = "",
+  issuerAvatarUrl: n = "",
+  ownerDid: o = "",
+  ownerName: c = "",
+  ownerAvatarUrl: l = "",
+  preferredColor: r = "default",
+  type: f = "email",
+  revoked: s = !1,
+  isDataUrl: p = !1,
+  width: u = "100%",
+  height: i = "100%"
 }) => {
-  const color = getPassportColor(preferredColor, issuerDid);
-  const svgXML = getSvg({
-    width,
-    height,
-    tag: revoked ? 'revoked' : '',
-    tagVariant: revoked ? 'error' : 'info',
-    color,
-    did: ownerDid,
-    variant: 'app-kyc',
-    verifiable: true,
+  const d = v(r, t), g = m({
+    width: u,
+    height: i,
+    tag: s ? "revoked" : "",
+    tagVariant: s ? "error" : "info",
+    color: d,
+    did: o,
+    variant: "app-kyc",
+    verifiable: !0,
     issuer: {
-      name: issuer,
-      icon: issuerAvatarUrl
+      name: e,
+      icon: n
     },
     header: {
-      name: ownerName,
-      icon: ownerAvatarUrl
+      name: c,
+      icon: l
     },
     extra: {
-      key: type,
-      value: title
+      key: f,
+      value: a
     }
   });
-  if (isDataUrl) {
-    return `data:image/svg+xml;utf8,${encodeURIComponent(svgXML)}`;
-  }
-  return svgXML;
-};
+  return p ? `data:image/svg+xml;utf8,${encodeURIComponent(g)}` : g;
+};
+export {
+  S as createKycSvg,
+  L as createPassportSvg,
+  v as getPassportColor,
+  y as getTextColor
+};

package/lib/Util/security.js

@@ -1,55 +1,43 @@
-/* eslint-disable import/prefer-default-export */
-
-class CustomError extends Error {}
-export function getSafeUrl(
-// 只允许 / 开头， ./ 开头和带有 protocol 的 URL
-url, {
-  throwOnError = true,
-  returnRaw = false,
+class i extends Error {
+}
+function f(t, {
+  throwOnError: r = !0,
+  returnRaw: h = !1,
   // 根据 URL 的规范，protocol 以 : 结尾
-  allowProtocols = ['https:', 'http:'],
+  allowProtocols: l = ["https:", "http:"],
   // host 中可能会携带端口号，需要使用 hostname 来获取干净的域名
-  allowDomains = undefined
+  allowDomains: n = void 0
 } = {}) {
-  if (allowDomains === undefined) {
-    // eslint-disable-next-line no-param-reassign
-    allowDomains = window.blocklet?.domainAliases || [];
-    allowDomains.push(window.location.href);
-  }
+  var s;
+  n === void 0 && (n = ((s = window.blocklet) == null ? void 0 : s.domainAliases) || [], n.push(window.location.href));
   try {
-    let base;
-    if (url.startsWith('/')) {
-      base = window.location.origin;
-    } else if (url.startsWith('./')) {
-      base = window.location.href;
-    }
-    const urlInstance = new URL(url, base);
-    const allowHostName = allowDomains ? allowDomains.map(host => {
+    let o;
+    t.startsWith("/") ? o = window.location.origin : t.startsWith("./") && (o = window.location.href);
+    const e = new URL(t, o), c = n && n.map((a) => {
       try {
-        return new URL(host).hostname;
+        return new URL(a).hostname;
       } catch {
-        // HACK: 如果传入的 allowDomains 不包含协议，则尝试为它添加协议头
-        return new URL(`https://${host}`).hostname;
+        return new URL(`https://${a}`).hostname;
       }
-    }) : allowDomains;
-    if (allowProtocols !== null && !allowProtocols.includes(urlInstance.protocol)) {
-      console.error(`Invalid protocol: ${urlInstance.protocol}`);
-      if (throwOnError) throw new CustomError(`Invalid protocol: ${urlInstance.protocol}`);
+    });
+    if (l !== null && !l.includes(e.protocol)) {
+      if (console.error(`Invalid protocol: ${e.protocol}`), r) throw new i(`Invalid protocol: ${e.protocol}`);
       return null;
     }
-    if (allowHostName !== null && !allowHostName.includes(urlInstance.hostname)) {
-      console.error(`Invalid host: ${urlInstance.hostname}`);
-      if (throwOnError) throw new CustomError(`Invalid host: ${urlInstance.hostname}`);
+    if (c !== null && !c.includes(e.hostname)) {
+      if (console.error(`Invalid host: ${e.hostname}`), r) throw new i(`Invalid host: ${e.hostname}`);
       return null;
     }
-    return returnRaw ? url : urlInstance.href;
-  } catch (error) {
-    if (error instanceof CustomError) {
-      if (throwOnError) throw error;
+    return h ? t : e.href;
+  } catch (o) {
+    if (o instanceof i) {
+      if (r) throw o;
       return null;
     }
-    console.error(`Failed to convert url: ${url}`);
-    if (throwOnError) throw new Error(`Failed to convert url: ${url}`);
+    if (console.error(`Failed to convert url: ${t}`), r) throw new Error(`Failed to convert url: ${t}`);
     return null;
   }
-}
+}
+export {
+  f as getSafeUrl
+};

package/lib/Util/style.d.ts

@@ -1,2 +1,2 @@
-import type { SxProps } from '@mui/material';
+import { SxProps } from '@mui/material';
 export declare const mergeSx: (...sxList: Array<SxProps | undefined | null>) => SxProps;

package/lib/Util/style.js

@@ -1,14 +1,4 @@
-/* eslint-disable import/prefer-default-export */
-
-export const mergeSx = (...sxList) => {
-  const mergedSx = sxList.reduce((acc, sx) => {
-    if (!sx) {
-      return acc;
-    }
-    if (Array.isArray(sx)) {
-      return acc.concat(sx);
-    }
-    return acc.concat([sx]);
-  }, []);
-  return mergedSx;
-};
+const o = (...t) => t.reduce((e, r) => r ? Array.isArray(r) ? e.concat(r) : e.concat([r]) : e, []);
+export {
+  o as mergeSx
+};

package/lib/Util/wallet.js

@@ -1,32 +1,18 @@
-/* eslint-disable import/prefer-default-export */
-export const providerName = 'wallet_url';
-
-/**
- * 获取 web wallet url, 常用于为 did connect 组件传递 webWalletUrl 参数,
- * 更明确的说, 这里获取的应该是 **default web wallet url**,
- * 如果用户使用自定义的 web wallet url, 不应该使用该方法, 应该显式的将自定义的 web wallet url 传递给 did connect 组件
- * (参考: https://github.com/blocklet/ocap-playground/issues/98)
- *
- * 获取优先级:
- * - localStorage  使用 provider 注册
- * - window.env.webWalletUrl
- * - window.blocklet.webWalletUrl
- * - production web wallet url
- */
-export const getWebWalletUrl = () => {
-  return window.localStorage.getItem(providerName) || window.env?.webWalletUrl || window.blocklet?.webWalletUrl || 'https://web.abtwallet.io/';
-};
-
-// 检查 wallet url protocol 和当前页面地址的 protocol 是否一致
-export const checkSameProtocol = webWalletUrl => {
-  const {
-    protocol
-  } = window.location;
-  let walletProtocol = '';
+const l = "wallet_url", c = () => {
+  var o, t;
+  return window.localStorage.getItem(l) || ((o = window.env) == null ? void 0 : o.webWalletUrl) || ((t = window.blocklet) == null ? void 0 : t.webWalletUrl) || "https://web.abtwallet.io/";
+}, w = (o) => {
+  const { protocol: t } = window.location;
+  let e = "";
   try {
-    walletProtocol = new URL(webWalletUrl).protocol;
-  } catch (error) {
-    walletProtocol = '';
+    e = new URL(o).protocol;
+  } catch {
+    e = "";
   }
-  return protocol === walletProtocol;
-};
+  return t === e;
+};
+export {
+  w as checkSameProtocol,
+  c as getWebWalletUrl,
+  l as providerName
+};

package/lib/VerificationCode/index.d.ts

@@ -1,4 +1,4 @@
-import type { SxProps } from '@mui/material';
+import { SxProps } from '@mui/material';
 export declare const VERIFY_CODE_LENGTH = 6;
 export default function VerificationCode({ length, code, onChange, onComplete, sx, }: {
     length?: number;

package/lib/VerificationCode/index.js

@@ -1,67 +1,72 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect } from 'react';
-import { Box, TextField } from '@mui/material';
-import trim from 'lodash/trim';
-import noop from 'lodash/noop';
-import { mergeSx } from '../Util/style';
-export const VERIFY_CODE_LENGTH = 6;
-export default function VerificationCode({
-  length = VERIFY_CODE_LENGTH,
-  code,
-  onChange = noop,
-  onComplete = noop,
-  sx
+import { jsx as f } from "react/jsx-runtime";
+import { useEffect as c } from "react";
+import { Box as l, TextField as y } from "@mui/material";
+import n from "lodash/trim";
+import a from "lodash/noop";
+import { mergeSx as b } from "../Util/style.js";
+const d = 6;
+function j({
+  length: i = d,
+  code: e,
+  onChange: u = a,
+  onComplete: p = a,
+  sx: s
 }) {
-  useEffect(() => {
-    if (code.length === length) {
-      onComplete?.(code);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [code, length]);
-  return /*#__PURE__*/_jsx(Box, {
-    sx: mergeSx({
-      width: '100%',
-      maxWidth: 360,
-      display: 'flex',
-      justifyContent: 'space-between',
-      gap: 1.5
-    }, sx),
-    children: [...Array(length)].map((_, index) => /*#__PURE__*/_jsx(TextField, {
-      id: `code-input-${index}`
-      // eslint-disable-next-line react/no-array-index-key
-      ,
-
-      value: trim(code[index]) || '',
-      type: "number",
-      inputProps: {
-        maxLength: 1,
-        sx: {
-          textAlign: 'center',
-          fontSize: '1.5rem',
-          '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
-            WebkitAppearance: 'none',
-            margin: 0
+  return c(() => {
+    e.length === i && (p == null || p(e));
+  }, [e, i]), /* @__PURE__ */ f(
+    l,
+    {
+      sx: b(
+        {
+          width: "100%",
+          maxWidth: 360,
+          display: "flex",
+          justifyContent: "space-between",
+          gap: 1.5
+        },
+        s
+      ),
+      children: [...Array(i)].map((w, t) => /* @__PURE__ */ f(
+        y,
+        {
+          id: `code-input-${t}`,
+          value: n(e[t]) || "",
+          type: "number",
+          onChange: (o) => {
+            var m;
+            const r = e.split("");
+            r[t] = o.target.value, u == null || u(r.join("")), o.target.value && t < 5 && ((m = document.getElementById(`code-input-${t + 1}`)) == null || m.focus());
+          },
+          onKeyDown: (o) => {
+            var r;
+            o.key === "Backspace" && !n(e[t]) && t > 0 && ((r = document.getElementById(`code-input-${t - 1}`)) == null || r.focus());
+          },
+          required: !0,
+          autoComplete: "off",
+          slotProps: {
+            htmlInput: {
+              maxLength: 1,
+              sx: {
+                textAlign: "center",
+                fontSize: "1.5rem",
+                "&::-webkit-inner-spin-button, &::-webkit-outer-spin-button": {
+                  WebkitAppearance: "none",
+                  margin: 0
+                }
+              },
+              autoComplete: "off",
+              pattern: "[0-9]",
+              inputMode: "numeric"
+            }
           }
         },
-        autoComplete: 'off',
-        pattern: '[0-9]',
-        inputMode: 'numeric'
-      },
-      onChange: e => {
-        const newCode = code.split('');
-        newCode[index] = e.target.value;
-        onChange?.(newCode.join(''));
-        if (e.target.value && index < 5) {
-          document.getElementById(`code-input-${index + 1}`)?.focus();
-        }
-      },
-      onKeyDown: e => {
-        if (e.key === 'Backspace' && !trim(code[index]) && index > 0) {
-          document.getElementById(`code-input-${index - 1}`)?.focus();
-        }
-      },
-      required: true,
-      autoComplete: "off"
-    }, `code-input-${index}`))
-  });
-}
+        `code-input-${t}`
+      ))
+    }
+  );
+}
+export {
+  d as VERIFY_CODE_LENGTH,
+  j as default
+};

package/lib/Video/Video.stories.d.ts

@@ -0,0 +1,6 @@
+export { default as Youtube } from './demo/youtube';
+export { default as Tentent } from './demo/tentent';
+declare namespace _default {
+    let title: string;
+}
+export default _default;

package/lib/Video/index.d.ts

@@ -4,12 +4,4 @@ export interface VideoProps {
     height?: string | number;
     style?: React.CSSProperties;
 }
-declare function Video(props: VideoProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Video {
-    var defaultProps: {
-        width: number;
-        height: number;
-        style: {};
-    };
-}
-export default Video;
+export default function Video(rawProps: VideoProps): import("react/jsx-runtime").JSX.Element;

package/lib/Video/index.js

@@ -1,64 +1,27 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import Player from 'react-player';
-import CircularProgress from '@mui/material/CircularProgress';
-import { mergeProps } from '../Util';
-import { styled } from '../Theme';
-export default function Video(props) {
-  const newProps = mergeProps(props, Video, ['style']);
-  const {
-    url,
-    width,
-    height,
-    style
-  } = newProps;
-  const [loaded, setLoaded] = useState(false);
-  const styles = Object.assign({
-    border: 'none'
-  }, style, {
-    width,
-    height,
-    visibility: loaded ? 'visible' : 'hidden'
-  });
-  if (url.indexOf('v.qq.com') > 0) {
-    return /*#__PURE__*/_jsxs(Placeholder, {
-      style: {
-        width,
-        height
-      },
-      children: [/*#__PURE__*/_jsx("iframe", {
-        title: url,
-        style: styles,
-        src: url,
-        onLoad: () => setLoaded(true),
-        allowFullScreen: true
-      }), !loaded && /*#__PURE__*/_jsx(CircularProgress, {
-        className: "loading-indicator",
-        color: "primary"
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsxs(Placeholder, {
-    style: {
-      width,
-      height
-    },
-    children: [/*#__PURE__*/_jsx(Player, {
-      style: styles,
-      ...newProps,
-      onReady: () => setLoaded(true)
-    }), !loaded && /*#__PURE__*/_jsx(CircularProgress, {
-      className: "loading-indicator",
-      color: "primary"
-    })]
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { useState as u } from "react";
+import h from "react-player";
+import { CircularProgress as m } from "@mui/material";
+import l from "lodash/isUndefined";
+import { mergeProps as g } from "../Util/index.js";
+import { styled as b } from "../Theme/index.js";
+function x(p) {
+  const e = Object.assign({}, p);
+  l(e.width) && (e.width = 640), l(e.height) && (e.height = 400), l(e.style) && (e.style = {});
+  const n = g(e, x, ["style"]), { url: i, width: o, height: r, style: y } = n, [s, a] = u(!1), d = Object.assign({ border: "none" }, y, {
+    width: o,
+    height: r,
+    visibility: s ? "visible" : "hidden"
   });
+  return i.indexOf("v.qq.com") > 0 ? /* @__PURE__ */ c(f, { style: { width: o, height: r }, children: [
+    /* @__PURE__ */ t("iframe", { title: i, style: d, src: i, onLoad: () => a(!0), allowFullScreen: !0 }),
+    !s && /* @__PURE__ */ t(m, { className: "loading-indicator", color: "primary" })
+  ] }) : /* @__PURE__ */ c(f, { style: { width: o, height: r }, children: [
+    /* @__PURE__ */ t(h, { style: d, ...n, onReady: () => a(!0) }),
+    !s && /* @__PURE__ */ t(m, { className: "loading-indicator", color: "primary" })
+  ] });
 }
-Video.defaultProps = {
-  width: 640,
-  height: 400,
-  style: {}
-};
-const Placeholder = styled('div')`
+const f = b("div")`
   background-color: #222222;
   display: flex;
   justify-content: center;
@@ -71,4 +34,7 @@ const Placeholder = styled('div')`
     left: 47%;
     z-index: 2;
   }
-`;
+`;
+export {
+  x as default
+};