@blocklet/ui-react 3.4.14 → 3.5.0

package/src/ComponentManager/components/resource-dialog.tsx

@@ -1,91 +0,0 @@
-import { useMemoizedFn, useMount, useUnmount } from 'ahooks';
-import { useRef, forwardRef, useImperativeHandle, Ref } from 'react';
-
-function ResourceDialog(
-  {
-    src,
-    open = false,
-    componentDid,
-    loading = true,
-    storeUrl = '',
-    onClose = () => {},
-    onComplete = () => {},
-    onLoad = () => {},
-  }: {
-    src: string;
-    componentDid: string;
-    open?: boolean;
-    loading?: boolean;
-    storeUrl?: string;
-    onLoad?: () => void;
-    onClose?: () => void;
-    onComplete?: () => void;
-  },
-  ref: Ref<{
-    selectBlocklet: (blockletMeta: any) => void;
-  }>
-) {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-
-  const listener = useMemoizedFn((event: MessageEvent) => {
-    if (open) {
-      if (event?.data?.event === 'resourceDialog.close') {
-        onClose();
-      }
-      if (event?.data?.event === 'resourceDialog.complete') {
-        onComplete();
-      }
-      if (event?.data?.event === 'resourceDialog.loaded') {
-        onLoad();
-      }
-    }
-  });
-
-  useMount(() => {
-    window.addEventListener('message', listener);
-  });
-
-  useUnmount(() => {
-    window.removeEventListener('message', listener);
-  });
-
-  useImperativeHandle(ref, () => ({
-    selectBlocklet: (blockletMeta: any) => {
-      if (iframeRef.current?.contentWindow) {
-        iframeRef.current.contentWindow.postMessage(
-          {
-            event: 'resourceDialog.select',
-            data: blockletMeta,
-            componentDid,
-            storeUrl,
-          },
-          '*'
-        );
-      }
-    },
-  }));
-
-  if (!open) {
-    return null;
-  }
-
-  return (
-    <iframe
-      ref={iframeRef}
-      src={src}
-      title="Resource Dialog"
-      style={{
-        position: 'fixed',
-        top: 0,
-        left: loading ? '-100vw' : 0,
-        width: '100vw',
-        height: '100vh',
-        zIndex: 9999,
-        backgroundColor: 'transparent',
-        border: 'none',
-      }}
-    />
-  );
-}
-
-export default forwardRef(ResourceDialog);

package/src/ComponentManager/index.tsx

@@ -1,3 +0,0 @@
-export { default as PublishComponent } from './components/publish-component';
-export { default as AddComponent } from './components/add-component';
-export { default as CheckComponent } from './components/check-component';

package/src/ComponentManager/libs/locales.ts

@@ -1,15 +0,0 @@
-export const translations = {
-  zh: {
-    importResource: '导入',
-    exportResource: '导出',
-    noPermission: '你没有权限执行该操作，请切换管理员通行证或联系管理员进行安装',
-    needLogin: '登录后才可操作',
-  },
-  en: {
-    importResource: 'Import',
-    exportResource: 'Export',
-    noPermission:
-      'You do not have permission to perform this operation. Please switch your passport as admin or contact the administrator to install the blocklet',
-    needLogin: 'Please login first',
-  },
-};

package/src/Dashboard/Dashboard.stories.jsx

@@ -1,20 +0,0 @@
-import Basic from './demo/basic';
-
-export default {
-  title: 'Blocklet-UI-React/Dashboard',
-
-  parameters: {
-    layout: 'fullscreen',
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/E8TSBWCOyXzETmVOjzbqvw/ArcBlock-UI-Kit?node-id=1504%3A5211',
-    },
-  },
-};
-
-Basic.argTypes = {
-  userRole: { control: 'select', options: [null, 'owner', 'developer'] },
-};
-Basic.storyName = 'Dashboard';
-
-export { Basic };

package/src/Dashboard/app-shell/app-badge.stories.tsx

@@ -1,64 +0,0 @@
-import { Box, Stack, Typography } from '@mui/material';
-import { useState } from 'react';
-import { ThemeProvider } from '@arcblock/ux/lib/Theme';
-import { ThemeModeToggle } from '@arcblock/ux/lib/Config';
-import AppBadge from './app-badge';
-
-export default {
-  title: 'Blocklet-UI-React/Dashboard',
-  component: AppBadge,
-};
-
-export function Badges() {
-  const [checked, setChecked] = useState(true);
-
-  return (
-    <ThemeProvider prefer="system">
-      <ThemeModeToggle />
-      <Box sx={{ p: 3, backgroundColor: 'background.default' }}>
-        <Stack spacing={2}>
-          <Typography variant="h6">Loading</Typography>
-          <Stack direction="row" spacing={2}>
-            <AppBadge label="Loading" value="Value" loading />
-          </Stack>
-          <Typography variant="h6">Default</Typography>
-          <Stack direction="row" spacing={2}>
-            <AppBadge label="Label" value="Value" />
-            <AppBadge icon="lucide:info" label="Label" value="Value" />
-          </Stack>
-          <Typography variant="h6">Number</Typography>
-          <Stack direction="row" spacing={2}>
-            <AppBadge variant="number" value={1234} />
-            <AppBadge variant="number" value={1234567} round={1} />
-            <AppBadge variant="number" label="Label" value={1234567890} round={2} />
-          </Stack>
-          <Typography variant="h6">Time</Typography>
-          <Stack direction="row" spacing={2}>
-            <AppBadge variant="time" value={new Date()} />
-            <AppBadge variant="time" label="Label" value={Date.now() - 3600000} />
-          </Stack>
-          <Typography variant="h6">State</Typography>
-          <Stack direction="row" spacing={2}>
-            <AppBadge variant="state" value="Running" color="success" />
-            <AppBadge variant="state" value="Stopped" color="error" />
-            <AppBadge variant="state" value="Warning" color="warning" />
-          </Stack>
-          <Typography variant="h6">Version</Typography>
-          <Stack direction="row" spacing={2}>
-            <AppBadge variant="version" value="1.0.0" color="info" />
-            <AppBadge variant="version" icon="lucide:package" value="2.3.4" color="primary" />
-          </Stack>
-          <Typography variant="h6">DID</Typography>
-          <Stack direction="row" spacing={2}>
-            <AppBadge variant="did" value="z1kFxaZ5hJXHhqJzXqJzXqJzXqJzXqJzXqJz" />
-            <AppBadge variant="did" value="0x1234567890123456789012345678901234567890" />
-          </Stack>
-          <Typography variant="h6">Switch</Typography>
-          <Stack direction="row" spacing={2}>
-            <AppBadge variant="switch" label="Toggle" value={checked} onChange={setChecked} />
-          </Stack>
-        </Stack>
-      </Box>
-    </ThemeProvider>
-  );
-}

package/src/Dashboard/app-shell/app-badge.tsx

@@ -1,94 +0,0 @@
-import React from 'react';
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-import 'dayjs/locale/zh';
-import 'dayjs/locale/zh-tw';
-import 'dayjs/locale/ja';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { AppBadgeDefault, AppBadgeDefaultProps } from './badges/app-badge-default';
-import { AppBadgeSwitch, AppBadgeSwitchProps } from './badges/app-badge-switch';
-import { AppBadgeVersion, AppBadgeVersionProps } from './badges/app-badge-version';
-import { AppBadgeState, AppBadgeStateProps } from './badges/app-badge-state';
-import { AppBadgeDID, AppBadgeDIDProps } from './badges/app-badge-did';
-
-dayjs.extend(relativeTime);
-dayjs.extend(localizedFormat);
-
-export const formatNumber = (num: unknown, round: number = 0): string => {
-  if (typeof num !== 'number') return '';
-
-  const absNum = Math.abs(num);
-  let rounded;
-  let unit = '';
-
-  if (absNum >= 1e12) {
-    unit = 'T';
-    rounded = `${(num / 1e12).toFixed(round)}`; // 万亿
-  } else if (absNum >= 1e9) {
-    unit = 'B';
-    rounded = `${(num / 1e9).toFixed(round)}`; // 十亿
-  } else if (absNum >= 1e6) {
-    unit = 'M';
-    rounded = `${(num / 1e6).toFixed(round)}`; // 百万
-  } else if (absNum >= 1e3) {
-    unit = 'K';
-    rounded = `${(num / 1e3).toFixed(round)}`; // 千
-  } else {
-    rounded = num.toString();
-  }
-
-  // 去掉尾部的零
-  if (round > 0) {
-    rounded = rounded.replace(/(\.\d*?)0+$/, '$1').replace(/\.$/, '');
-  }
-
-  return `${rounded}${unit}`;
-};
-
-export const formatTime = (value?: string | number | Date, locale: string = 'en'): string => {
-  if (!value) return '';
-
-  return dayjs(value).locale(locale).fromNow();
-};
-
-const BadgeVariants: Record<string, React.ComponentType<any>> = {
-  switch: AppBadgeSwitch,
-  version: AppBadgeVersion,
-  state: AppBadgeState,
-  did: AppBadgeDID,
-};
-
-export type AppBadgeProps =
-  | (AppBadgeDefaultProps & { variant?: 'default' })
-  | (AppBadgeDefaultProps & { variant: 'number' })
-  | (Omit<AppBadgeDefaultProps, 'value'> & { variant: 'time'; value?: string | number | Date })
-  | (AppBadgeSwitchProps & { variant: 'switch' })
-  | (AppBadgeVersionProps & { variant: 'version' })
-  | (AppBadgeStateProps & { variant: 'state' })
-  | (AppBadgeDIDProps & { variant: 'did' });
-
-export default function AppBadge(props: AppBadgeProps) {
-  const { locale = 'en' } = useLocaleContext() || {};
-
-  if (props.variant === 'number') {
-    const { value, round = 0, ...rest } = props;
-    const val = formatNumber(Number(value), round);
-
-    return <AppBadgeDefault value={val} {...rest} />;
-  }
-  if (props.variant === 'time') {
-    const { value, ...rest } = props;
-    const val = formatTime(value, locale);
-
-    return <AppBadgeDefault value={val} {...rest} />;
-  }
-  if (props.variant) {
-    const Badge = BadgeVariants[props.variant];
-    if (Badge) {
-      return <Badge {...props} />;
-    }
-  }
-
-  return <AppBadgeDefault {...(props as AppBadgeDefaultProps)} />;
-}

package/src/Dashboard/app-shell/app-header.tsx

@@ -1,104 +0,0 @@
-import { isValidElement, useEffect } from 'react';
-import { Box, Stack, Typography, useMediaQuery, SxProps, Theme } from '@mui/material';
-import Tabs from '@arcblock/ux/lib/Tabs';
-import AppBadge from './app-badge';
-import { useAppInfo } from './app-info-context';
-
-function useMobile(): boolean {
-  const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
-
-  return isMobile;
-}
-
-interface DividerProps {
-  sx?: SxProps<Theme>;
-}
-
-function Divider({ sx = {} }: DividerProps) {
-  const isMobile = useMobile();
-
-  return (
-    <Box sx={{ mx: isMobile ? -2 : -3, borderBottom: '1px solid', borderColor: 'divider', mt: 1.5, mb: 1, ...sx }} />
-  );
-}
-
-interface AppHeaderProps {
-  onTabChange?: (tab: string) => void;
-}
-
-function AppHeader({ onTabChange = undefined }: AppHeaderProps) {
-  const isMobile = useMobile();
-  const {
-    inService,
-    navItem,
-    icon = undefined,
-    name = '',
-    description = undefined,
-    actions = undefined,
-    badges = [],
-    tabs = [],
-    currentTab = '',
-    updateAppInfo,
-  } = useAppInfo();
-
-  // 非 Service 应用，自动更新 name / description
-  useEffect(() => {
-    if (!inService) {
-      updateAppInfo({
-        name: navItem?.title || '',
-        description: navItem?.description || '',
-      });
-    }
-  }, [navItem?.title, navItem?.description, inService, updateAppInfo]);
-
-  if (!name) {
-    return null;
-  }
-
-  return (
-    <Box className="app-header" sx={{ mt: 3, mb: 3 }}>
-      {/* Basic Info */}
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 1,
-        }}>
-        {icon && <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{icon}</Box>}
-        <Stack sx={{ flexGrow: 1 }}>
-          <Typography variant="h1" sx={{ mb: 0.5 }}>
-            {name}
-          </Typography>
-          {description && (
-            <Typography
-              variant="body2"
-              color="text.secondary"
-              sx={{ lineHeight: 1.6, '& a': { color: 'primary.main' }, maxWidth: 980 }}>
-              {description}
-            </Typography>
-          )}
-        </Stack>
-        {!isMobile && actions && <Box sx={{ ml: 1 }}>{actions}</Box>}
-      </Box>
-      {/* Badges */}
-      {badges.length > 0 && (
-        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, alignItems: 'center', mt: 2 }}>
-          {badges.map((config, index) =>
-            isValidElement(config) ? config : <AppBadge key={config.label || index} {...config} />
-          )}
-        </Box>
-      )}
-      {isMobile && actions && <Box sx={{ mt: isMobile ? 2 : 0 }}>{actions}</Box>}
-      {/* Tabs */}
-      {tabs.length <= 1 && <Divider />}
-      {tabs.length > 1 && (
-        <>
-          <Tabs tabs={tabs} current={currentTab} onChange={onTabChange} scrollButtons="auto" sx={{ mt: 2.5 }} />
-          <Divider sx={{ mt: 0 }} />
-        </>
-      )}
-    </Box>
-  );
-}
-
-export default AppHeader;

package/src/Dashboard/app-shell/app-info-context.tsx

@@ -1,182 +0,0 @@
-import React, { createContext, useState, useContext, useMemo } from 'react';
-import { useCreation, useMemoizedFn } from 'ahooks';
-import { withoutTrailingSlash } from 'ufo';
-import isPlainObject from 'lodash/isPlainObject';
-import { WELLKNOWN_BLOCKLET_ADMIN_PATH } from '@abtnode/constant';
-import { Locale } from '@arcblock/ux/lib/type';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { AppBadgeProps } from './app-badge';
-
-export type NavItem = {
-  id: string;
-  parent: string; // pid
-  title: string;
-  link: string;
-  description?: string;
-};
-
-export interface TabConfig {
-  value: string;
-  label?: string;
-  render?: React.ComponentType | React.ReactNode;
-}
-
-export interface AppInfo {
-  icon?: React.ReactNode;
-  name?: React.ReactNode;
-  description?: React.ReactNode;
-  badges?: Array<AppBadgeProps | React.ReactElement>;
-  actions?: React.ReactNode;
-  tabs?: TabConfig[];
-  currentTab?: string;
-}
-
-export interface AppInfoContextValue extends AppInfo {
-  inService: boolean;
-  currentTab: string;
-  TabComponent: React.ComponentType | React.ReactNode;
-  navItem?: NavItem;
-  updateAppInfo: (patch: Partial<AppInfo>) => void;
-}
-
-const AppInfoContext = createContext<AppInfoContextValue>({
-  inService: false,
-  currentTab: '',
-  TabComponent: null,
-  navItem: undefined,
-  updateAppInfo: () => {},
-});
-
-export const getI18nVal = (
-  obj: Record<string, string | Record<Locale, string>>,
-  key: string,
-  locale: Locale = 'en'
-) => {
-  const val = obj?.[key];
-
-  // @ts-ignore
-  return isPlainObject(val) ? val[locale] || val.en : val;
-};
-
-// 基于前缀匹配算法查找 NavItem
-export const findNavItem = (items: NavItem[], targetLink: string = '', locale: Locale = 'en') => {
-  const targetParts = targetLink === '/' ? ['/'] : targetLink.split('/').filter(Boolean);
-
-  let result: NavItem | null = null;
-  let maxLen = 0;
-
-  items.forEach((item) => {
-    const currentLink = getI18nVal(item, 'link', locale) || '';
-    const currentParts = currentLink === '/' ? ['/'] : currentLink.split('/').filter(Boolean);
-
-    if (currentParts.length > targetParts.length) {
-      return;
-    }
-
-    let isMatch = true;
-    for (let i = 0; i < currentParts.length; i++) {
-      if (currentParts[i] !== targetParts[i]) {
-        isMatch = false;
-        break;
-      }
-    }
-
-    if (isMatch && currentParts.length > maxLen) {
-      result = item;
-      maxLen = currentParts.length;
-    }
-  });
-
-  return result;
-};
-
-interface AppInfoProviderProps {
-  path?: string;
-  currentTab?: string;
-  meta?: object;
-  children?: React.ReactNode;
-}
-export function AppInfoProvider({
-  path = window?.location?.pathname || '',
-  currentTab = '',
-  meta = undefined,
-  children = null,
-}: AppInfoProviderProps) {
-  const { locale = 'en' } = useLocaleContext() || {};
-  const targetLink = withoutTrailingSlash(path);
-  const inService = targetLink.startsWith(WELLKNOWN_BLOCKLET_ADMIN_PATH);
-  // 便于测试
-  const blockletMeta = useCreation(() => Object.assign({}, window.blocklet, meta), [meta]);
-
-  // 匹配 Dashboard NavItem
-  const navItem = useCreation(() => {
-    // @ts-ignore
-    const navigations = blockletMeta.navigation?.filter((v) =>
-      Array.isArray(v.section) ? v.section.includes('dashboard') : v.section === 'dashboard'
-    );
-    const items: NavItem[] = navigations?.flatMap((v: { items?: NavItem[] }) => v.items || []);
-    // 前缀匹配 navItem
-    const item = findNavItem(items, targetLink, locale);
-
-    if (!item) {
-      return undefined;
-    }
-
-    const parentItem = navigations.find((v: NavItem) => v.id === item.parent);
-    let title = getI18nVal(item, 'title', locale) || '';
-
-    if (!inService) {
-      // 应用带上父级标题
-      title = `${getI18nVal(parentItem, 'title', locale) || ''} - ${title}`;
-    }
-
-    return {
-      id: item.id,
-      parent: item.parent,
-      title,
-      link: getI18nVal(item, 'link', locale) || '',
-      description: getI18nVal(item, 'description', locale) || '',
-    } as NavItem;
-  }, [path, inService, locale, blockletMeta]);
-
-  const [appInfo, setAppInfo] = useState<AppInfo>({});
-
-  const updateAppInfo = useMemoizedFn((patch: Partial<AppInfo>) => {
-    setAppInfo((prev) => ({ ...prev, ...patch }));
-  });
-
-  const value = useMemo(
-    () => {
-      const { tabs = [] } = appInfo;
-      const currentTabConfig = tabs.find((v) => v.value === currentTab);
-
-      let ctab = currentTab;
-      let TabComponent = null;
-      // fallback 到第一个 tab
-      if (!currentTabConfig && tabs.length > 0) {
-        ctab = tabs[0].value;
-        TabComponent = tabs[0].render || null;
-      } else {
-        TabComponent = currentTabConfig?.render || null;
-      }
-
-      return {
-        ...appInfo,
-        inService,
-        navItem,
-        currentTab: ctab,
-        TabComponent,
-        updateAppInfo,
-      };
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [appInfo, navItem, inService, currentTab, updateAppInfo]
-  );
-
-  return <AppInfoContext.Provider value={value}>{children}</AppInfoContext.Provider>;
-}
-
-export function useAppInfo(): AppInfoContextValue {
-  const context = useContext(AppInfoContext);
-  return context;
-}