@arcblock/ux 3.4.14 → 3.5.0

package/src/Tabs/index.tsx

@@ -1,255 +0,0 @@
-import { Tabs as MuiTabs, Tab as MuiTab, type TabsProps as MuiTabsProps, type TabProps } from '@mui/material';
-
-import { styled } from '../Theme';
-
-const PREFIX = 'index';
-
-const classes = {
-  tabs: `${PREFIX}-tabs`,
-  tab: `${PREFIX}-tab`,
-};
-
-const StyledMuiTabs = styled(MuiTabs)(({ theme }) => ({
-  [`& .${classes.tabs}`]: {},
-
-  [`& .${classes.tab}`]: {
-    fontSize: '0.875rem',
-    [theme.breakpoints.up('md')]: {
-      fontSize: '1rem',
-    },
-  },
-}));
-
-interface CardTabsProps extends Omit<MuiTabsProps, 'onChange'> {
-  tabs: { value: any; label: React.ReactNode; icon?: string | React.ReactElement<any> }[];
-  current: any;
-  onChange: (value: string) => void;
-  iconPosition?: TabProps['iconPosition'];
-  enableTabClick?: boolean;
-}
-
-function CardTabs({
-  tabs,
-  current,
-  onChange,
-  iconPosition = undefined,
-  enableTabClick = false,
-  ...rest
-}: CardTabsProps) {
-  return (
-    <MuiTabs
-      scrollButtons="auto"
-      value={current}
-      onChange={(_, newValue) => !enableTabClick && onChange(newValue)}
-      {...rest}
-      variant="scrollable"
-      sx={{
-        minHeight: 'auto',
-        '.MuiTabs-scrollButtons.Mui-disabled': {
-          opacity: 0.3,
-          cursor: 'not-allowed',
-          pointerEvents: 'auto',
-        },
-        '.MuiTabs-scroller': {
-          borderRadius: '100vw',
-        },
-        '.MuiTabs-flexContainer': {
-          borderRadius: '100vw',
-          backgroundColor: 'grey.100',
-          padding: 0.5,
-          display: 'inline-flex',
-          columnGap: 0.25,
-          maxWidth: '100%',
-          overflowX: 'auto',
-        },
-        '.MuiTab-root': {
-          borderRadius: '100vw',
-          border: '1px solid transparent',
-          minHeight: 'auto',
-          lineHeight: 1,
-          py: 1,
-          color: 'text.secondary',
-          fontSize: '13px',
-          fontWeight: 'normal',
-          textTransform: 'capitalize',
-          transition: 'background-color 0.2s ease',
-          '&.Mui-selected, &:hover': {
-            backgroundColor: 'action.selected',
-            borderColor: 'grey.100',
-            color: 'grey.A700',
-          },
-        },
-        '.MuiTabs-indicator': {
-          display: 'none',
-        },
-        ...rest.sx,
-      }}>
-      {tabs.map((x) => (
-        <MuiTab
-          className={classes.tab}
-          key={x.value}
-          value={x.value}
-          label={x.label}
-          icon={x.icon}
-          iconPosition={iconPosition}
-          onClick={() => enableTabClick && onChange(x.value)}
-        />
-      ))}
-    </MuiTabs>
-  );
-}
-
-interface LineTabsProps extends Omit<MuiTabsProps, 'onChange'> {
-  tabs: { value: any; label: React.ReactNode; icon?: string | React.ReactElement<any> }[];
-  current: any;
-  onChange: (value: string) => void;
-  iconPosition?: TabProps['iconPosition'];
-  enableTabClick?: boolean;
-}
-
-function LineTabs({
-  tabs,
-  current,
-  onChange,
-  iconPosition = undefined,
-  enableTabClick = false,
-  ...rest
-}: LineTabsProps) {
-  return (
-    <MuiTabs
-      scrollButtons="auto"
-      value={current}
-      onChange={(_, newValue) => !enableTabClick && onChange(newValue)}
-      {...rest}
-      variant="scrollable"
-      sx={{
-        minHeight: 'auto',
-        '.MuiTabs-scrollButtons.Mui-disabled': {
-          opacity: 0.3,
-          cursor: 'not-allowed',
-          pointerEvents: 'auto',
-        },
-        '.MuiTabs-scroller':
-          rest.orientation !== 'vertical'
-            ? {
-                '&::after': {
-                  content: '""',
-                  display: 'block',
-                  position: 'sticky',
-                  left: 0,
-                  zIndex: -1,
-                  width: '100%',
-                  height: '1px',
-                  backgroundColor: 'grey.300',
-                },
-              }
-            : {},
-        '.MuiTabs-flexContainer': {
-          display: 'inline-flex',
-          columnGap: 2.5,
-          px: 0,
-          pb: 0.5,
-        },
-        '.MuiTab-root': {
-          border: '1px solid transparent',
-          minHeight: 'auto',
-          lineHeight: 1,
-          py: 1,
-          px: 0,
-          color: 'text.secondary',
-          fontSize: '14px',
-          fontWeight: 500,
-          textTransform: 'capitalize',
-          minWidth: 'auto',
-          '&.Mui-selected, &:hover': {
-            color: 'primary.main',
-          },
-        },
-        '.MuiTabs-indicator': {
-          height: '1px',
-          backgroundColor: 'primary.main',
-        },
-        ...rest.sx,
-      }}>
-      {tabs.map((x) => (
-        <MuiTab
-          className={classes.tab}
-          key={x.value}
-          value={x.value}
-          label={x.label}
-          icon={x.icon}
-          iconPosition={iconPosition}
-          onClick={() => enableTabClick && onChange(x.value)}
-        />
-      ))}
-    </MuiTabs>
-  );
-}
-
-interface TabsProps extends Omit<MuiTabsProps, 'variant' | 'onChange'> {
-  tabs: { value: any; label: React.ReactNode; icon?: string | React.ReactElement<any> }[];
-  current: any;
-  onChange: (value: string) => void;
-  variant?: 'card' | 'line' | MuiTabsProps['variant'];
-  iconPosition?: TabProps['iconPosition'];
-  enableTabClick?: boolean; // 是否启用点击切换 tab，默认不启用，启用后，当前 tab 处于活跃状态下点击 tab 也会触发 onChange 事件，
-}
-
-export default function Tabs({
-  tabs,
-  current,
-  onChange,
-  variant = undefined,
-  iconPosition = undefined,
-  enableTabClick = false,
-  ...rest
-}: TabsProps) {
-  if (variant === 'card') {
-    return (
-      <CardTabs
-        {...rest}
-        tabs={tabs}
-        current={current}
-        enableTabClick={enableTabClick}
-        onChange={onChange}
-        iconPosition={iconPosition}
-      />
-    );
-  }
-
-  if (variant === 'line') {
-    return (
-      <LineTabs
-        {...rest}
-        tabs={tabs}
-        current={current}
-        enableTabClick={enableTabClick}
-        onChange={onChange}
-        iconPosition={iconPosition}
-      />
-    );
-  }
-
-  return (
-    <StyledMuiTabs
-      scrollButtons="auto"
-      variant="scrollable"
-      value={current}
-      onChange={(_, newValue) => !enableTabClick && onChange(newValue)}
-      indicatorColor="primary"
-      {...rest}
-      className={[classes.tabs, rest.className || ''].join(' ')}>
-      {tabs.map((x) => (
-        <MuiTab
-          className={classes.tab}
-          key={x.value}
-          value={x.value}
-          label={x.label}
-          icon={x.icon}
-          iconPosition={iconPosition}
-          onClick={() => enableTabClick && onChange(x.value)}
-        />
-      ))}
-    </StyledMuiTabs>
-  );
-}

package/src/Tag/Tag.stories.jsx

@@ -1,15 +0,0 @@
-import Basic from './demo/basic';
-
-export default {
-  title: 'Data Display/Tag',
-  parameters: {
-    docs: {
-      description: {
-        component: 'Used for categorizing or marking up.',
-      },
-    },
-  },
-};
-Basic.storyName = 'Tag';
-
-export { Basic };

package/src/Tag/index.jsx

@@ -1,106 +0,0 @@
-import PropTypes from 'prop-types';
-import { Typography } from '@mui/material';
-import isUndefined from 'lodash/isUndefined';
-
-import { mergeProps } from '../Util';
-import colors from '../Colors';
-import { useTheme, styled } from '../Theme';
-
-const types = {
-  error: {
-    color: colors.common.white,
-    backgroundColor: colors.error.main,
-  },
-  warning: {
-    color: colors.common.white,
-    backgroundColor: colors.warning.main,
-  },
-  success: {
-    color: colors.common.white,
-    backgroundColor: colors.success.main,
-  },
-  primary: {
-    color: colors.common.white,
-    backgroundColor: colors.primary.main,
-  },
-  reverse: {
-    color: '#fff',
-    backgroundColor: '#222',
-  },
-};
-
-/**
- * @typedef {import('@mui/material/Typography').TypographyProps} TypographyProps
- * @typedef {{
- *  type?: 'error' | 'warning' | 'success' | 'primary' | 'reverse',
- *  content?: string,
- *  className?: string;
- *  children: import('react').ReactNode,
- *  style?: import('react').CSSProperties
- * }} TagOwnProps
- * @typedef { TypographyProps & TagOwnProps} TagProps
- */
-
-/**
- * @description
- * @param {TagProps} props
- * @return {JSX.Element}
- */
-function Tag({ ...rawProps }) {
-  const props = Object.assign({}, rawProps);
-  if (isUndefined(props.type)) {
-    props.type = 'primary';
-  }
-  if (isUndefined(props.content)) {
-    props.content = '';
-  }
-  if (isUndefined(props.style)) {
-    props.style = {};
-  }
-  if (isUndefined(props.className)) {
-    props.className = '';
-  }
-  const newProps = mergeProps(props, Tag, ['style']);
-  const { type, content, children, style, className, ...rest } = newProps;
-
-  const { palette } = useTheme();
-
-  const styles = Object.assign({}, types[type] || types.primary, style);
-
-  if (palette[type]) {
-    Object.assign(styles, {
-      color: palette[type].contrastText || colors.common.white,
-      backgroundColor: palette[type].main,
-    });
-  }
-
-  return (
-    <Span component="span" className={className} style={styles} {...rest}>
-      {content || children}
-    </Span>
-  );
-}
-
-Tag.propTypes = {
-  children: PropTypes.any.isRequired,
-  type: PropTypes.oneOf(Object.keys(types)),
-  content: PropTypes.string,
-  className: PropTypes.string,
-  style: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-};
-
-export default Tag;
-
-const Span = styled(Typography)`
-  && {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    padding: 2px 10px;
-    height: 20px;
-    line-height: 20px;
-    font-size: 12px;
-    font-weight: 500;
-    border-radius: ${({ theme }) => theme.shape.borderRadius * 0.5}px;
-  }
-`;

package/src/TextCollapse/TextCollapse.stories.jsx

@@ -1,73 +0,0 @@
-import TextCollapse from '.';
-
-export default {
-  title: 'Deprecated/TextCollapse',
-
-  parameters: {
-    readme: {
-      sidebar: '<!-- PROPS -->',
-    },
-  },
-};
-
-export function WithDefaultOptions() {
-  return (
-    <>
-      <TextCollapse maxWidth={180}>this text will collapse from middle</TextCollapse>
-      <hr />
-      <TextCollapse maxWidth={180} fontType="monospace">
-        this text will collapse from middle
-      </TextCollapse>
-    </>
-  );
-}
-
-WithDefaultOptions.storyName = 'with default options';
-
-export function WithSmallerEndChars() {
-  return (
-    <>
-      <TextCollapse maxWidth={180} endChars={4}>
-        this text will collapse from middle
-      </TextCollapse>
-      <hr />
-      <TextCollapse maxWidth={180} endChars={4} fontType="monospace">
-        this text will collapse from middle
-      </TextCollapse>
-    </>
-  );
-}
-
-WithSmallerEndChars.storyName = 'with smaller end chars';
-
-export function WithLargerStartChars() {
-  return (
-    <div style={{ color: 'red' }}>
-      <TextCollapse maxWidth={120} startChars={18} endChars={4}>
-        this text will collapse from middle
-      </TextCollapse>
-      <hr />
-      <TextCollapse maxWidth={120} startChars={18} endChars={4} fontType="monospace">
-        this text will collapse from middle
-      </TextCollapse>
-    </div>
-  );
-}
-
-WithLargerStartChars.storyName = 'with larger start chars';
-
-export function WithLargerFontSize() {
-  return (
-    <div style={{ fontSize: 30 }}>
-      <TextCollapse maxWidth={360} startChars={('startChars', 8)} endChars={4}>
-        this text will collapse from middle
-      </TextCollapse>
-      <hr />
-      <TextCollapse maxWidth={360} startChars={8} endChars={4} fontType="monospace">
-        this text will collapse from middle
-      </TextCollapse>
-    </div>
-  );
-}
-
-WithLargerFontSize.storyName = 'with larger font size';

package/src/TextCollapse/index.tsx

@@ -1,85 +0,0 @@
-import { Typography, type TypographyProps } from '@mui/material';
-
-import { styled } from '../Theme';
-import { withDeprecated } from '../Util/deprecate';
-
-export interface TextCollapseProps {
-  children: string;
-  maxWidth: string | number;
-  startChars?: number;
-  endChars?: number;
-  scaleFactor?: number;
-  style?: React.CSSProperties;
-  fontType?: 'monospace' | 'normal';
-}
-
-function TextCollapse({
-  children,
-  maxWidth,
-  startChars = 5,
-  endChars = 5,
-  scaleFactor = 0.45,
-  style = undefined,
-  fontType = 'normal',
-  ...rest
-}: TextCollapseProps) {
-  if (typeof children !== 'string') {
-    return null;
-  }
-
-  const isMonospace = fontType === 'monospace';
-
-  // 由于 css 样式产生的省略号长度是不确定的，所以目前 startChars 的长度只能让开发者自己去加上‘省略号’的宽度去设置这个值，要想完美的实现目标功能，最好是改用 js 动态修改文本内容来实现
-  const startWidth = isMonospace ? `${startChars}ch` : `${scaleFactor * (startChars + 3)}em`;
-  const endWidth = isMonospace ? `${endChars}ch` : `${scaleFactor * endChars}em`;
-  const styles = Object.assign(
-    isMonospace ? { fontFamily: '"Courier New", Courier, monospace' } : {},
-    { fontSize: 'inherit', color: 'inherit', fontWeight: 'inherit', maxWidth },
-    style
-  );
-
-  const [startPart, endPart] = [
-    children.slice(0, children.length - endChars),
-    children.slice(children.length - endChars),
-  ];
-
-  return (
-    <Container component="span" style={styles} startwidth={startWidth} endwidth={endWidth} {...rest}>
-      <span className="start-part">{startPart}</span>
-      <span className="end-part">{endPart}</span>
-    </Container>
-  );
-}
-
-export default withDeprecated(TextCollapse, { name: 'TextCollapse' });
-
-type ContainerProps = {
-  startwidth: string;
-  endwidth: string;
-};
-
-const Container = styled(Typography)<ContainerProps & TypographyProps>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: start;
-  cursor: pointer;
-  white-space: nowrap;
-  overflow: hidden;
-
-  .start-part,
-  .end-part {
-    display: inline-block;
-    vertical-align: bottom;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-  .start-part {
-    max-width: calc(100% - ${(props) => props.endwidth});
-    min-width: ${(props) => props.startwidth};
-    text-overflow: ellipsis;
-  }
-  .end-part {
-    max-width: calc(100% - ${(props) => props.startwidth});
-    direction: rtl;
-  }
-`;

package/src/Theme/Theme.stories.jsx

@@ -1,11 +0,0 @@
-export { default as Palette } from './demo/palette';
-export { default as Typography } from './demo/typography';
-export { default as Shadows } from './demo/shadows';
-export { default as WithCustomKey } from './demo/with-custom-key';
-export { default as CustomFonts } from './demo/custom-fonts';
-export { default as UrlTheme } from './demo/url-theme';
-export { default as CodeBlock } from './demo/code-block';
-
-export default {
-  title: 'Theme/Theme',
-};

package/src/Theme/index.ts

@@ -1,21 +0,0 @@
-import type { CreateMUIStyled, Theme } from '@mui/material';
-import { styled as muiStyled, useTheme } from '@mui/material';
-
-export * from './theme';
-export * from './theme-provider';
-export { default as ThemeProvider } from './theme-provider';
-export { useTheme };
-
-const isTransientProp = (prop: string) => prop.startsWith('$');
-
-export const styled: CreateMUIStyled<Theme> = (component: any, options?: any) => {
-  return muiStyled(component, {
-    ...options,
-    shouldForwardProp: (prop: string) => {
-      if (options?.shouldForwardProp) {
-        return options.shouldForwardProp(prop) && !isTransientProp(prop);
-      }
-      return !isTransientProp(prop);
-    },
-  });
-};