@arcblock/ux 3.4.14 → 3.5.0

package/src/ErrorBoundary/fallback.tsx

@@ -1,85 +0,0 @@
-import { Alert, AlertTitle, Box, Typography, type AlertProps } from '@mui/material';
-import { ReactNode } from 'react';
-import { useRouteError } from 'react-router-dom';
-
-import Button from '../Button';
-
-interface InternalErrorFallbackProps {
-  title?: string;
-  desc: string;
-  extraContent?: ReactNode;
-  severity?: AlertProps['severity'];
-}
-
-function InternalErrorFallback({
-  title = 'Something went wrong...',
-  desc,
-  extraContent = null,
-  severity = 'error',
-}: InternalErrorFallbackProps) {
-  const gotoHome = () => window.location.replace('/');
-  const refresh = () => window.location.reload();
-
-  return (
-    <Alert
-      severity={severity}
-      variant="outlined"
-      icon={false}
-      sx={{
-        justifyContent: 'center',
-      }}>
-      {title ? <AlertTitle>{title}</AlertTitle> : null}
-      {desc ? (
-        <Typography
-          variant="body2"
-          sx={{
-            mb: 1,
-          }}>
-          {desc}
-        </Typography>
-      ) : null}
-      {extraContent ?? (
-        <Box sx={{ display: 'flex', gap: 1, justifyContent: 'center', alignItems: 'center' }}>
-          <Button variant="outlined" color={severity} size="small" onClick={gotoHome}>
-            Home
-          </Button>
-
-          <Button variant="contained" color={severity} size="small" onClick={refresh}>
-            Refresh
-          </Button>
-        </Box>
-      )}
-    </Alert>
-  );
-}
-
-export interface ErrorFallbackProps {
-  error: Error;
-}
-
-export function ErrorFallback({ error }: ErrorFallbackProps) {
-  return <InternalErrorFallback desc={error.message} />;
-}
-
-export interface ErrorFallbackRetryProps {
-  error: Error;
-  resetErrorBoundary: () => void;
-}
-
-export function ErrorFallbackRetry({ error, resetErrorBoundary }: ErrorFallbackRetryProps) {
-  return (
-    <InternalErrorFallback
-      desc={error.message}
-      extraContent={
-        <Button variant="contained" color="error" size="small" onClick={resetErrorBoundary}>
-          Try again
-        </Button>
-      }
-    />
-  );
-}
-
-export function ReactRouterErrorFallback() {
-  const error = useRouteError() as Error;
-  return <InternalErrorFallback title="Current route occurred an error" desc={error.message} />;
-}

package/src/ErrorBoundary/index.ts

@@ -1 +0,0 @@
-export * from './fallback';

package/src/Footer/Footer.stories.jsx

@@ -1,13 +0,0 @@
-export { default as Basic } from './demo/basic';
-export { default as DarkMode } from './demo/dark-mode';
-export { default as CustomCopyStart } from './demo/custom-copy-start';
-export { default as CustomBrand } from './demo/custom-brand';
-export { default as Addon } from './demo/addon';
-
-export default {
-  title: 'Layout/Footer',
-
-  parameters: {
-    layout: 'fullscreen',
-  },
-};

package/src/Footer/index.tsx

@@ -1,130 +0,0 @@
-/* eslint-disable react/no-unused-prop-types */
-import { Typography, Container as MuiContainer, Box } from '@mui/material';
-
-import { mergeProps } from '../Util';
-import Logo from '../Logo';
-import { styled } from '../Theme';
-
-export interface FooterProps {
-  dark?: false | true;
-  className?: string;
-  copyStart?: number | string;
-  brand?: string;
-  style?: React.CSSProperties;
-  addon?: React.ReactNode;
-}
-
-export default function Footer({ ...props }: FooterProps) {
-  const newProps = mergeProps(props, Footer, ['dark', 'style']);
-  const { className = '', copyStart = '2017', style = {}, brand = 'ArcBlock', dark = false, addon = null } = newProps;
-
-  const endYearString = `${new Date().getFullYear()}`;
-  const copyStartString = `${copyStart}`;
-  const copyYear = endYearString === copyStartString ? endYearString : `${copyStartString}-${endYearString}`;
-
-  return (
-    <Container className={className} style={style} dark={dark}>
-      <MuiContainer maxWidth={false}>
-        <Typography component="div" className="footer">
-          <Typography component="p" className="footer-item">
-            <span className="footer-copy">Copyright &copy; {copyYear} </span>
-            <span className="footer-brand">{brand}</span>
-          </Typography>
-          {addon && (
-            <Typography
-              component="div"
-              className="footer-item"
-              sx={{ order: { xs: '-1', md: 'initial' }, ml: { xs: 0, md: 'auto' }, width: { xs: '100%', md: 'auto' } }}>
-              {addon}
-            </Typography>
-          )}
-          <Typography component="p" className="footer-item" style={{ justifyContent: 'flex-end', flexShrink: 0 }}>
-            Powered by
-            <Logo mode={dark ? 'light' : 'dark'} layout="horizontal" className="logo-container" />
-          </Typography>
-        </Typography>
-      </MuiContainer>
-      <Box
-        sx={{
-          position: 'absolute',
-          right: 16,
-          bottom: 0,
-          fontSize: 12,
-          color: 'transparent',
-          '::selection': { background: '#000', color: '#fff' },
-        }}>
-        {window?.blocklet?.version}
-      </Box>
-    </Container>
-  );
-}
-
-type ContainerProps = {
-  dark: boolean;
-};
-
-const Container = styled('div', {
-  shouldForwardProp: (prop) => prop !== 'dark',
-})<ContainerProps>`
-  position: relative;
-  margin-top: ${({ theme }) => theme.spacing(2)};
-  padding: 24px 0 32px;
-  border-top: 1px solid ${(props) => props.theme.palette.divider};
-  box-sizing: border-box;
-  width: 100%;
-
-  @media (max-width: 540px) {
-    padding: 8px 0;
-  }
-
-  .footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
-
-    .footer-item {
-      color: ${(props) => {
-        return props.theme.palette.text.hint;
-      }};
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      font-size: 0.9rem;
-    }
-
-    .footer-brand {
-      margin-left: 8px;
-      margin-right: 8px;
-    }
-
-    .logo-container {
-      margin-left: 24px;
-      width: 90px;
-      opacity: 0.5;
-    }
-
-    @media (max-width: 540px) {
-      .footer-item {
-        font-size: 0.7rem;
-      }
-
-      .logo-container {
-        margin: 0 0 0 16px;
-        width: 70px;
-        height: 40px;
-      }
-    }
-
-    @media (max-width: 380px) {
-      .footer-item {
-        font-size: 0.65rem;
-      }
-
-      .logo-container {
-        margin: 0 0 0 8px;
-        height: 24px;
-      }
-    }
-  }
-`;

package/src/Header/Header.stories.jsx

@@ -1,30 +0,0 @@
-import Basic from './demo/basic';
-import WithNavigation from './demo/with-navigation';
-import WithNavigationAlignRight from './demo/with-navigation-align-right';
-import ResponsiveHeader from './demo/responsive-header';
-
-export default {
-  title: 'Layout/Header',
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'A generic page header component that supports common design elements such as logo, brand title, brand description, etc., and provides content slots for displaying navigation and action buttons.',
-      },
-    },
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/E8TSBWCOyXzETmVOjzbqvw/ArcBlock-UI-Kit?node-id=1504%3A4630',
-    },
-  },
-};
-
-const argTypes = {
-  maxWidth: { control: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl', false] },
-};
-
-Basic.argTypes = argTypes;
-ResponsiveHeader.argTypes = argTypes;
-
-export { Basic, WithNavigation, WithNavigationAlignRight, ResponsiveHeader };

package/src/Header/addon-button.tsx

@@ -1,41 +0,0 @@
-import { Button, ButtonProps } from '@mui/material';
-
-type Props<D extends React.ElementType, P = {}> = {
-  icon?: React.ReactNode;
-  children: React.ReactNode;
-} & ButtonProps<D, P>;
-
-// eslint-disable-next-line import/prefer-default-export
-export function AddonButton<D extends React.ElementType, P = {}>({
-  icon = undefined,
-  children,
-  sx,
-  ...rest
-}: Props<D, P>) {
-  const mergedSx = [
-    {
-      height: 32,
-      minWidth: 32,
-      borderColor: 'divider',
-      borderRadius: '100vh',
-      fontSize: 14,
-      color: 'text.secondary',
-
-      ...(!children && {
-        padding: 0,
-        height: 32,
-
-        '.MuiButton-startIcon': {
-          margin: 0,
-        },
-      }),
-    },
-    ...(Array.isArray(sx) ? sx : [sx]),
-  ];
-
-  return (
-    <Button startIcon={icon} color="inherit" variant="outlined" sx={mergedSx} {...rest}>
-      {children}
-    </Button>
-  );
-}

package/src/Header/auto-hidden.tsx

@@ -1,31 +0,0 @@
-import { Box, type BoxProps } from '@mui/material';
-
-import { styled } from '../Theme';
-
-export interface AutoHiddenProps extends BoxProps {
-  height: number | string;
-}
-
-/**
- * 一个容器组件, 当子元素 width 超出该容器时自动隐藏子元素, 必须设置明确的 height 值
- */
-function AutoHidden({ height, ...rest }: AutoHiddenProps) {
-  return <Root height={height} {...rest} />;
-}
-
-const Root = styled(Box)`
-  overflow: hidden;
-  &:before {
-    content: '';
-    display: inline-block;
-    width: 1px;
-    height: 100%;
-    float: left;
-  }
-  > * {
-    float: left;
-    white-space: nowrap;
-  }
-`;
-
-export default AutoHidden;

package/src/Header/header-addons.tsx

@@ -1,37 +0,0 @@
-import { Box, type BoxProps } from '@mui/material';
-
-export default function HeaderAddons({ children, ...rest }: BoxProps) {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 1.5,
-        '> *': {
-          m: '0px!important',
-        },
-        '.MuiIconButton-root': {
-          width: 32,
-          height: 32,
-          p: 0,
-          border: 1,
-          borderColor: 'divider',
-        },
-        '.MuiIconButton-root svg, .MuiButton-root svg': {
-          fontSize: 18,
-          width: '1em!important',
-          height: '1em!important',
-        },
-        '.arc-session-user-logged-in > *, .arc-session-user-logged-in svg': {
-          width: '100%!important',
-          height: '100%!important',
-        },
-        '.arc-session-user-unlogin svg': {
-          transform: 'scale(1)!important',
-        },
-      }}
-      {...rest}>
-      {children}
-    </Box>
-  );
-}

package/src/Header/header.tsx

@@ -1,214 +0,0 @@
-import { Box, type BoxProps, Container, type Breakpoint } from '@mui/material';
-import { useRef, useState, useEffect, type JSX } from 'react';
-import AutoHidden from './auto-hidden';
-import { styled } from '../Theme';
-import HeaderAddons from './header-addons';
-
-export interface HeaderProps extends Omit<BoxProps, 'maxWidth'> {
-  /** logo img/svg, 可以包裹一个 a 标签 */
-  logo?: React.ReactNode;
-  /** 相当于 Title, 可以包裹一个 a 标签 */
-  brand?: React.ReactNode;
-  /** brand 右侧的内容区域, 可显示一个 badge 或 tag */
-  brandAddon?: React.ReactNode;
-  /** brand 下方的描述 */
-  description?: React.ReactNode;
-  /** 右侧区域, 可以放置 icons/actions/login 等 */
-  addons?: React.ReactNode;
-  /** logo 左侧内容 */
-  prepend?: React.ReactNode;
-  align?: 'left' | 'right';
-  maxWidth?: Breakpoint | false;
-  homeLink?: string | ((brandContent: React.ReactNode) => JSX.Element | null);
-}
-
-/**
- * Header 组件
- * TODO: Layout/dashboard 可以复用此处的 header
- */
-function Header({
-  logo = null,
-  brand = null,
-  brandAddon = null,
-  description = null,
-  children = null,
-  addons = null,
-  prepend = null,
-  align = 'left',
-  maxWidth = false,
-  homeLink = '/',
-  ...rest
-}: HeaderProps) {
-  const logoRef = useRef<HTMLDivElement>(null);
-  const [brandWrapperMinWidth, setBrandWrapperMinWidth] = useState('0px');
-  const style = { minWidth: brandWrapperMinWidth };
-
-  useEffect(() => {
-    const { searchParams } = new URL(window.location.href);
-    if (searchParams.get('inviter')) {
-      window.localStorage.setItem('inviter', searchParams.get('inviter')!);
-    }
-
-    if (logoRef.current) {
-      setBrandWrapperMinWidth(`${logoRef.current.offsetWidth}px`);
-    }
-  }, []);
-
-  const renderBrand = () => {
-    const brandContent = (
-      <>
-        {logo && (
-          <div className="header-logo" ref={logoRef}>
-            {logo}
-          </div>
-        )}
-        {brand && (
-          <AutoHidden height={44} sx={{ flexShrink: { xs: 1 } }}>
-            <div className="header-brand">
-              <div className="header-brand-title">
-                <h2>{brand}</h2>
-              </div>
-              <div className="header-brand-desc">{description}</div>
-            </div>
-          </AutoHidden>
-        )}
-      </>
-    );
-    if (typeof homeLink === 'function') {
-      return homeLink(brandContent);
-    }
-    return <a href={homeLink}>{brandContent}</a>;
-  };
-
-  return (
-    <Root {...rest}>
-      <Container maxWidth={maxWidth} className="header-container">
-        {prepend}
-        <div className="header-brand-wrapper" style={style}>
-          {renderBrand()}
-        </div>
-        <div className="header-brand-addon">{brandAddon}</div>
-        {align === 'right' && (
-          <Box
-            sx={{
-              display: 'inline-block',
-              flexGrow: 1,
-            }}
-          />
-        )}
-        {children}
-        {align === 'left' && (
-          <Box
-            sx={{
-              display: 'inline-block',
-              flexGrow: 1,
-            }}
-          />
-        )}
-        <HeaderAddons className="header-addons">{addons}</HeaderAddons>
-      </Container>
-    </Root>
-  );
-}
-
-const Root = styled(Box)`
-  position: relative;
-  font-size: 14px;
-  z-index: ${({ theme }) => theme.zIndex.appBar};
-  background: ${({ theme }) => theme.palette.background.default};
-  .header-container {
-    display: flex;
-    align-items: center;
-    height: 64px;
-  }
-
-  .header-brand-wrapper {
-    flex-shrink: 2;
-    > a {
-      display: flex;
-      align-items: center;
-      height: 100%;
-      line-height: 1;
-      color: inherit;
-      text-decoration: none;
-    }
-  }
-  .header-brand-wrapper .header-logo {
-    display: inline-flex;
-    position: relative;
-    height: 44px;
-    margin-right: 16px;
-    img,
-    svg {
-      width: auto;
-      height: 100%;
-      max-height: 100%;
-    }
-  }
-  .header-brand {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    height: 44px;
-    margin-right: 16px;
-    line-height: 1;
-    a {
-      color: inherit;
-      text-decoration: none;
-    }
-    .header-brand-title {
-      display: flex;
-      align-items: center;
-      h2 {
-        margin: 0;
-        font-size: 16px;
-      }
-    }
-    .header-brand-desc {
-      margin-top: 4px;
-      color: ${({ theme }) => {
-        return theme.palette.text.hint;
-      }};
-    }
-  }
-  .header-brand-addon {
-    margin-right: 16px;
-  }
-  .header-addons {
-    display: flex;
-    align-items: center;
-  }
-  ${(props) => props.theme.breakpoints.down('lg')} {
-    .header-brand {
-      margin-right: 12px;
-      .header-brand-title {
-        h2 {
-          font-size: 14px;
-        }
-      }
-    }
-    .header-brand-addon {
-      display: none;
-    }
-  }
-  ${(props) => props.theme.breakpoints.down('md')} {
-    .header-menu {
-      display: inline-block;
-    }
-    .header-brand-wrapper .header-logo {
-      height: 32px;
-    }
-    .header-brand {
-      .header-brand-title {
-        h2 {
-          font-size: 13px;
-        }
-      }
-      .header-brand-desc {
-        font-size: 12px;
-      }
-    }
-  }
-`;
-
-export default Header;

package/src/Header/index.ts

@@ -1,3 +0,0 @@
-export { default as Header } from './header';
-export { default as ResponsiveHeader } from './responsive-header';
-export { default as HeaderAddons } from './header-addons';