@arcblock/ux 3.4.15 → 3.5.1

package/src/ClickToCopy/index.tsx

@@ -1,96 +0,0 @@
-import { useSize } from 'ahooks';
-import { Tooltip, type TooltipProps } from '@mui/material';
-import isUndefined from 'lodash/isUndefined';
-import { useSnackbar } from 'notistack';
-import useCopy from './hook';
-import Toast, { ToastProvider } from '../Toast';
-import { mergeProps } from '../Util';
-import { styled } from '../Theme';
-import type { Locale } from '../type';
-
-export { default as CopyButton } from './copy-button';
-
-const Container = styled('span')`
-  display: inline;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  align-items: center;
-  justify-content: start;
-  border-radius: 15px;
-  padding: 1px 12px;
-  background-color: rgba(0, 0, 0, 0.08);
-  cursor: pointer;
-`;
-
-const UnstyledContainer = styled('span')`
-  cursor: pointer;
-`;
-
-export interface ClickToCopyProps extends TooltipProps {
-  content?: string;
-  locale?: Locale;
-  tip?: string;
-  tipPlacement?: string;
-  copiedTip?: string;
-  unstyled?: false | true;
-}
-
-export default function ClickToCopy(rawProps: ClickToCopyProps) {
-  const props = Object.assign({}, rawProps);
-  // eslint-disable-next-line react/prop-types
-  if (isUndefined(props.content)) {
-    props.content = '';
-  }
-  // eslint-disable-next-line react/prop-types
-  if (isUndefined(props.tip)) {
-    props.tip = '';
-  }
-  // eslint-disable-next-line react/prop-types
-  if (isUndefined(props.copiedTip)) {
-    props.copiedTip = '';
-  }
-  // eslint-disable-next-line react/prop-types
-  if (isUndefined(props.tipPlacement)) {
-    props.tipPlacement = 'right';
-  }
-  // eslint-disable-next-line react/prop-types
-  if (isUndefined(props.locale)) {
-    props.locale = 'en';
-  }
-  // eslint-disable-next-line react/prop-types
-  if (isUndefined(props.unstyled)) {
-    props.unstyled = false;
-  }
-  const newProps = mergeProps(props, ClickToCopy, ['style']);
-  const { children, content, tip, copiedTip, tipPlacement, locale, style, unstyled, ...rest } = newProps;
-  const { containerRef, copied, copy, texts } = useCopy({ content, locale });
-  const _tip = tip || texts.copy;
-  const _copiedTip = copiedTip || texts.copied;
-  const snackbarContext = useSnackbar();
-
-  const size = useSize(document.body);
-  const width = size?.width || 0;
-
-  const onCopy = (e: React.MouseEvent<HTMLElement>) => {
-    copy(e);
-
-    if (width < 600) {
-      Toast.success(_copiedTip);
-    }
-  };
-
-  const ContainerComponent = unstyled ? UnstyledContainer : Container;
-  const contentChild = (
-    <Tooltip title={copied ? _copiedTip : _tip} {...rest} placement={tipPlacement} disableFocusListener>
-      <ContainerComponent ref={containerRef} style={style} onClick={onCopy}>
-        {children || content}
-      </ContainerComponent>
-    </Tooltip>
-  );
-  if (!snackbarContext) {
-    return <ToastProvider>{contentChild}</ToastProvider>;
-  }
-  // eslint-disable-next-line react/jsx-no-useless-fragment
-  return <>{contentChild}</>;
-}

package/src/CloseButton/index.tsx

@@ -1,37 +0,0 @@
-import { Box } from '@mui/material';
-import type { SxProps } from '@mui/material';
-import { Icon } from '@iconify/react';
-import CloseRoundedIcon from '@iconify-icons/material-symbols/close-rounded';
-import noop from 'lodash/noop';
-
-import { mergeSx } from '../Util/style';
-
-export default function CloseButton({
-  onClose = noop,
-  sx = {},
-  size = 20,
-}: {
-  onClose?: () => void;
-  sx?: SxProps;
-  size?: string | number;
-}) {
-  return (
-    <Box
-      onClick={onClose}
-      sx={mergeSx(
-        {
-          fontSize: 0,
-          cursor: 'pointer',
-          color: 'text.secondary',
-          transition: 'transform 0.25s ease-in-out 0s',
-          transformOrigin: 'center',
-          '&:hover': {
-            transform: 'rotate(90deg)',
-          },
-        },
-        sx
-      )}>
-      <Icon icon={CloseRoundedIcon} fontSize={size} />
-    </Box>
-  );
-}

package/src/CodeBlock/CodeBlock.stories.jsx

@@ -1,22 +0,0 @@
-import CodeBlock from '.';
-
-export { default as Protobuf } from './demo/protobuf';
-export { default as Javascript } from './demo/javascript';
-export { default as Json } from './demo/json';
-export { default as SingleLineOfCode } from './demo/single-line-of-code';
-export { default as Typescript } from './demo/typescript';
-export { default as Markdown } from './demo/markdown';
-export { default as lightMode } from './demo/light-mode';
-
-export default {
-  title: 'Data Display/CodeBlock',
-  component: CodeBlock,
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'CodeBlock is used to render an isolated code snippet or block.',
-      },
-    },
-  },
-};

package/src/CodeBlock/LightBox.tsx

@@ -1,87 +0,0 @@
-// highlight.js/styles/atom-one-light.css
-import styled from '@emotion/styled';
-
-const LightBox = styled('div')`
-  display: block;
-  pre code.hljs {
-    display: block;
-    overflow-x: auto;
-    padding: 1em;
-  }
-  code.hljs {
-    padding: 3px 5px;
-  }
-  .hljs {
-    color: #383a42;
-    background: #fafafa;
-  }
-  .hljs-comment,
-  .hljs-quote {
-    color: #a0a1a7;
-    font-style: italic;
-  }
-  .hljs-doctag,
-  .hljs-formula,
-  .hljs-keyword {
-    color: #a626a4;
-  }
-  .hljs-deletion,
-  .hljs-name,
-  .hljs-section,
-  .hljs-selector-tag,
-  .hljs-subst {
-    color: #e45649;
-  }
-  .hljs-literal {
-    color: #0184bb;
-  }
-  .hljs-addition,
-  .hljs-attribute,
-  .hljs-meta .hljs-string,
-  .hljs-regexp,
-  .hljs-string {
-    color: #50a14f;
-  }
-  .hljs-attr,
-  .hljs-number,
-  .hljs-selector-attr,
-  .hljs-selector-class,
-  .hljs-selector-pseudo,
-  .hljs-template-variable,
-  .hljs-type,
-  .hljs-variable {
-    color: #986801;
-  }
-  .hljs-bullet,
-  .hljs-link,
-  .hljs-meta,
-  .hljs-selector-id,
-  .hljs-symbol,
-  .hljs-title {
-    color: #4078f2;
-  }
-  .hljs-built_in,
-  .hljs-class .hljs-title,
-  .hljs-title.class_ {
-    color: #c18401;
-  }
-  .hljs-emphasis {
-    font-style: italic;
-  }
-  .hljs-strong {
-    font-weight: 700;
-  }
-  .hljs-link {
-    text-decoration: underline;
-  }
-
-  pre {
-    .copy-button {
-      > .default-text {
-        color: #222;
-      }
-    }
-  }
-`;
-
-export default LightBox;

package/src/CodeBlock/index.tsx

@@ -1,217 +0,0 @@
-/* eslint-disable react/no-danger */
-import { useState } from 'react';
-import Copy from 'copy-to-clipboard';
-import { type SxProps } from '@mui/material';
-
-import hljs from 'highlight.js/lib/core';
-import javascript from 'highlight.js/lib/languages/javascript';
-import typescript from 'highlight.js/lib/languages/typescript';
-import json from 'highlight.js/lib/languages/json';
-import elixir from 'highlight.js/lib/languages/elixir';
-import java from 'highlight.js/lib/languages/java';
-import swift from 'highlight.js/lib/languages/swift';
-import objectivec from 'highlight.js/lib/languages/objectivec';
-import kotlin from 'highlight.js/lib/languages/kotlin';
-import protobuf from 'highlight.js/lib/languages/protobuf';
-import python from 'highlight.js/lib/languages/python';
-import yaml from 'highlight.js/lib/languages/yaml';
-import shell from 'highlight.js/lib/languages/shell';
-import diff from 'highlight.js/lib/languages/diff';
-import plaintext from 'highlight.js/lib/languages/plaintext';
-import markdown from 'highlight.js/lib/languages/markdown';
-
-import 'highlight.js/styles/atom-one-dark.css';
-
-import { FileCopy as CopyIcon, Check as CheckIcon } from '@mui/icons-material';
-import colors from '../Colors';
-import { styled } from '../Theme';
-import LightBox from './LightBox';
-
-hljs.registerLanguage('javascript', javascript);
-hljs.registerLanguage('js', javascript);
-hljs.registerLanguage('jsx', javascript);
-hljs.registerLanguage('typescript', typescript);
-hljs.registerLanguage('ts', typescript);
-hljs.registerLanguage('tsx', typescript);
-hljs.registerLanguage('json', json);
-hljs.registerLanguage('elixir', elixir);
-hljs.registerLanguage('java', java);
-hljs.registerLanguage('kotlin', kotlin);
-hljs.registerLanguage('kt', kotlin);
-hljs.registerLanguage('protobuf', protobuf);
-hljs.registerLanguage('protobuffer', protobuf);
-hljs.registerLanguage('python', python);
-hljs.registerLanguage('py', python);
-hljs.registerLanguage('yaml', yaml);
-hljs.registerLanguage('yml', yaml);
-hljs.registerLanguage('shell', shell);
-hljs.registerLanguage('sh', shell);
-hljs.registerLanguage('plaintext', plaintext);
-hljs.registerLanguage('text', plaintext);
-hljs.registerLanguage('patch', diff);
-hljs.registerLanguage('diff', diff);
-hljs.registerLanguage('swift', swift);
-hljs.registerLanguage('objectivec', objectivec);
-hljs.registerLanguage('oc', objectivec);
-hljs.registerLanguage('markdown', markdown);
-
-export interface CodeBlockProps extends React.HTMLAttributes<HTMLPreElement> {
-  code?: string;
-  language?: string;
-  children?: React.ReactNode;
-  dark?: true | false;
-  showDefaultText?: true | false;
-  sx?: SxProps;
-}
-
-export default function CodeBlock({
-  code = '',
-  language = 'text',
-  children = null,
-  dark = true,
-  showDefaultText = true,
-  ...rest
-}: CodeBlockProps) {
-  const [copied, setCopied] = useState(false);
-  const source = code || (children as string);
-
-  const onCopy = () => {
-    if (copied) {
-      return;
-    }
-    Copy(source);
-    setCopied(true);
-    // 恢复 copied 状态
-    setTimeout(() => {
-      setCopied(false);
-    }, 1500);
-  };
-
-  const originEl = (
-    <Pre {...rest}>
-      <span className="codeblock__inner">
-        <code
-          className={`hljs ${language}`}
-          dangerouslySetInnerHTML={{ __html: hljs.highlightAuto(source, [language]).value }}
-        />
-      </span>
-      <div className="copy-button" onClick={onCopy}>
-        {showDefaultText && <span className="default-text">{language}</span>}
-        <span className="hover-text">
-          {!copied ? (
-            <>
-              <CopyIcon className="copy-icon" />
-              <span className="button-lang-text">copy</span>
-            </>
-          ) : (
-            <>
-              <CheckIcon className="copy-icon" />
-              <span className="button-lang-text">copied</span>
-            </>
-          )}
-        </span>
-      </div>
-    </Pre>
-  );
-
-  if (!dark) {
-    return <LightBox>{originEl}</LightBox>;
-  }
-
-  return originEl;
-}
-
-const fontFamily = 'source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !important';
-const Pre = styled('pre', {
-  shouldForwardProp: (prop) => prop !== 'sx',
-})`
-  font-family: ${fontFamily};
-  display: block;
-  font-size: 14px;
-  line-height: 1.42857143;
-  margin: 0 0 32px;
-  word-break: break-word;
-  word-wrap: break-word;
-  text-align: left;
-  border-radius: 5px;
-  border: 1px solid;
-  border-color: ${({ theme }) => theme.palette.divider};
-  background: ${({ theme }) => theme.palette.background.default};
-  color: ${({ theme }) => theme.palette.common.white};
-  position: relative;
-
-  .codeblock__inner {
-    display: block;
-    width: 100%;
-    max-height: 46.25rem;
-    overflow: auto;
-  }
-
-  .copy-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    top: 8px;
-    right: 24px;
-    padding: 4px;
-    min-width: 72px;
-    height: 24px;
-    border-radius: 4px;
-    background: transparent;
-    cursor: pointer;
-    transition: all ease 0.2s;
-
-    .copy-icon {
-      font-size: 16px;
-      color: ${colors.common.white};
-    }
-
-    .hover-text {
-      display: none;
-    }
-    .default-text {
-      font-size: 12px;
-      color: ${colors.common.white};
-    }
-  }
-
-  &:hover {
-    .copy-button {
-      display: flex;
-      background: ${colors.primary.main};
-
-      .hover-text {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: ${colors.common.white};
-      }
-      .default-text {
-        display: none;
-        font-size: 12px;
-      }
-    }
-  }
-
-  .button-lang-text {
-    margin-left: 4px;
-    font-size: 12px;
-    color: ${colors.common.white};
-  }
-
-  code {
-    counter-reset: line;
-    counter-increment: line;
-    padding: 16px;
-    font-family: ${fontFamily};
-    color: ${colors.common.white};
-    * {
-      font-family: ${fontFamily};
-    }
-  }
-
-  .hljs * {
-    white-space: normal; // autowrap
-  }
-`;

package/src/Colors/Colors.stories.jsx

@@ -1,211 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-import PropTypes from 'prop-types';
-import { Box, Button } from '@mui/material';
-import { createTheme, ThemeProvider, styled } from '../Theme';
-import colors from '.';
-
-const colorDescriptions = {
-  primary:
-    "Primary is used to represent primary interface elements for a user. It's the color displayed most frequently across your app's screens and components",
-  secondary:
-    'Secondary is used to represent secondary interface elements for a user. It provides more ways to accent and distinguish your product. Having it is optional.',
-  error: 'Used to represent error, danger, wrong.',
-  warning: 'Used to represent potentially dangerous actions or important messages',
-  info: 'Used to present information to the user that is neutral and not necessarily important',
-  success: 'Used to indicate the successful completion of an action that user triggered.',
-  grey: 'Grey (neutral color) is mainly used in a large part of the text interface, in addition to the background, borders, dividing lines, and other scenes are also very common.',
-  did: 'For DID-related products or components.',
-};
-
-// eslint-disable-next-line no-shadow
-function ColorsViewer({ colors: tmpColors, prefix = '', itemWidth = 240 }) {
-  // 优先展示的一些颜色
-  const keys = ['primary', 'secondary', 'error', 'warning', 'info', 'success'];
-  const colorKeys = keys.concat(Object.keys(tmpColors).filter((key) => !keys.includes(key)));
-  return (
-    <Box
-      sx={{
-        p: 2,
-      }}>
-      {colorKeys.map((colorKey, index) => {
-        const colorValue = colors[colorKey];
-        let colorArray;
-        // 考虑 2 层颜色
-        if (typeof colorValue === 'object') {
-          colorArray = Object.keys(colorValue).map((item) => ({
-            name: `${prefix ? `${prefix}.` : ''}${colorKey}.${item}`,
-            value: colorValue[item],
-          }));
-        } else {
-          colorArray = [{ name: `${prefix ? `${prefix}.` : ''}${colorKey}`, value: colorValue }];
-        }
-
-        // 过滤不是 color 的值
-        colorArray = colorArray.filter(
-          (item) => typeof item.value === 'string' && (item.value.startsWith('#') || item.value.startsWith('rgb'))
-        );
-
-        if (colorArray.length === 0) {
-          return null;
-        }
-
-        return (
-          <Box
-            key={index}
-            style={{ borderBottom: '1px solid #ddd' }}
-            sx={{
-              p: 2,
-            }}>
-            {colorDescriptions[colorKey] && (
-              <Box
-                style={{ borderLeft: '2px solid #bbb' }}
-                sx={{
-                  color: 'grey.700',
-                  fontSize: 16,
-                  m: 1,
-                  pl: 1,
-                }}>
-                {colorDescriptions[colorKey]}
-              </Box>
-            )}
-            <Box
-              sx={{
-                display: 'flex',
-                flexWrap: 'wrap',
-                alignItems: 'center',
-              }}>
-              {colorArray.map(({ name, value }) => (
-                <Box
-                  key={name}
-                  sx={{
-                    display: 'flex',
-                    width: itemWidth,
-                    m: 1,
-                  }}>
-                  <Box
-                    sx={{
-                      flexShrink: 0,
-                      width: 40,
-                      height: 40,
-                      bgcolor: value,
-                      boxShadow: 1,
-                    }}
-                  />
-                  <Box
-                    sx={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      ml: 1,
-                      fontSize: 14,
-                      color: '#999',
-                    }}>
-                    <Box>{name}</Box>
-                    <Box>{value}</Box>
-                  </Box>
-                </Box>
-              ))}
-            </Box>
-          </Box>
-        );
-      })}
-    </Box>
-  );
-}
-
-ColorsViewer.propTypes = {
-  colors: PropTypes.object.isRequired,
-  prefix: PropTypes.string,
-  itemWidth: PropTypes.number,
-};
-
-export default {
-  title: 'Theme/Colors',
-  parameters: {
-    docs: {
-      description: {
-        component: 'A collection of common colors that are compatible with the Material UI theme palette.',
-      },
-    },
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/E8TSBWCOyXzETmVOjzbqvw/ArcBlock-UI-Kit?node-id=740%3A1506',
-    },
-  },
-};
-
-export function DefaultAbtColors() {
-  return <ColorsViewer colors={colors} />;
-}
-
-DefaultAbtColors.storyName = 'default (ABT colors)';
-
-export function MuiThemePalette() {
-  const _muiTheme = createTheme();
-  return <ColorsViewer colors={_muiTheme.palette} />;
-}
-
-MuiThemePalette.storyName = 'mui theme#palette';
-
-export function ColorsStyledComponents() {
-  return (
-    <StyledComponentTestBox>
-      <pre>{`
-          const StyledComponentTestBox = styled('div')\`
-            padding: 16px;
-            background-color: \${colors.success.main};
-          \`;
-        `}</pre>
-    </StyledComponentTestBox>
-  );
-}
-
-ColorsStyledComponents.storyName = 'colors & styled-components';
-
-export function MuiThemeBoxButton() {
-  const _muiTheme = createTheme();
-  return (
-    <ThemeProvider theme={_muiTheme}>
-      <Box
-        sx={{
-          m: 1,
-        }}>
-        <Button variant="contained" color="primary">
-          Button[color="primary"]
-        </Button>
-      </Box>
-      <Box
-        sx={{
-          m: 1,
-        }}>
-        <Button variant="contained" color="secondary">
-          Button[color="secondary"]
-        </Button>
-      </Box>
-      <Box
-        variant="contained"
-        sx={{
-          bgcolor: 'warning.main',
-          m: 1,
-          p: 1,
-        }}>
-        Box[bgcolor="warning.main"]
-      </Box>
-      <Box
-        variant="contained"
-        sx={{
-          bgcolor: 'error.light',
-          m: 1,
-          p: 1,
-        }}>
-        Box[bgcolor="error.light"]
-      </Box>
-    </ThemeProvider>
-  );
-}
-
-MuiThemeBoxButton.storyName = 'mui theme & Box/Button';
-
-const StyledComponentTestBox = styled('div')`
-  padding: 16px;
-  background-color: ${colors.success.main};
-`;

package/src/Colors/index.ts

@@ -1,4 +0,0 @@
-// eslint-disable-next-line no-restricted-exports
-export { default } from './themes/default';
-export { default as temp } from './themes/temp';
-export { default as didConnectColors } from './themes/did-connect';

package/src/Colors/themes/default.ts

@@ -1,8 +0,0 @@
-import { BLOCKLET_THEME_LIGHT, type Theme } from '@blocklet/theme';
-
-/**
- * @deprecated 请使用 MUI theme 对象替代
- */
-const colors = BLOCKLET_THEME_LIGHT.palette as Theme['palette'];
-
-export default colors;