@arcblock/ux 3.4.14 → 3.5.0

package/src/Colors/themes/did-connect.ts

@@ -1,64 +0,0 @@
-/**
- * @deprecated 请使用 MUI theme 对象替代
- */
-const colors = {
-  background: {
-    overlay: 'rgba(15, 23, 42, 0.5)',
-    default: 'white',
-    paper0: 'white',
-    paper1: '#FAFAFA',
-    paper2: '#F4F4F5',
-    paper3: '#F0F0F1',
-  },
-  text: {
-    primary: '#18181B',
-    secondary: '#71717B',
-    disabled: '#D4D4D8',
-    hint: '#D4D4D8',
-  },
-  state: {
-    hover: '#FAFAFA',
-    selected: '#F4F4F5',
-    item: '#F4F4F5',
-    itemSelected: '#E4E4E7',
-  },
-  primary: {
-    main: '#2B7FFF',
-    light: '#51A2FF',
-    dark: '#155DFC',
-    contrastText: '#fff',
-  },
-  secondary: {
-    main: '#615FFF',
-    light: '#7C86FF',
-    dark: '#4F39F6',
-    contrastText: '#fff',
-  },
-  error: {
-    main: '#FB2C36',
-    light: '#FF6467',
-    dark: '#E7000B',
-    contrastText: '#fff',
-  },
-  warning: {
-    main: '#FF6900',
-    light: '#FF8904',
-    dark: '#F54900',
-    contrastText: '#fff',
-  },
-  info: {
-    main: '#2B7FFF',
-    light: '#51A2FF',
-    dark: '#155DFC',
-    contrastText: '#fff',
-  },
-  success: {
-    main: '#00C950',
-    light: '#05DF72',
-    dark: '#00A63E',
-    contrastText: '#fff',
-  },
-  divider: 'rgba(18, 22, 24, 0.06)',
-};
-
-export default colors;

package/src/Colors/themes/temp.ts

@@ -1,52 +0,0 @@
-/**
- * @deprecated 请使用 MUI theme 对象替代
- */
-const colors = {
-  textMuted: 'rgba(18, 22, 24, 0.36)',
-  textSubtitle: 'rgba(18, 22, 24, 0.6)',
-  textBase: 'rgba(18, 22, 24, 1)',
-  textPrimaryBase: 'rgba(18, 22, 24, 1)',
-  primaryBase: 'rgba(19, 125, 250, 1)',
-  primary100: 'rgba(19, 125, 250, 1)',
-  gray6: 'rgba(17, 22, 24, 0.06)',
-
-  // surface
-  surfaceBgSubtitle: 'rgba(18, 22, 24, 0.03)',
-  surfacePrimarySubtitle: 'rgba(19, 125, 250, 0.06)',
-  surfaceSuccess: 'rgba(13, 202, 134, 1)',
-
-  // background
-  backgroundsBgSubtitle: 'rgba(249, 250, 251, 1)',
-  backgroundsBgComponent: 'rgba(241, 243, 245, 1)',
-  backgroundsBgField: 'rgba(249, 250, 251, 1)',
-  backgroundsBgSubtile: 'rgba(249, 250, 251, 1)',
-  backgroundsBgSubtileHover: 'rgba(243, 244, 246, 1)',
-
-  // foreground
-  foregroundsFgBase: 'rgba(3, 7, 18, 1)',
-  foregroundsFgSubtile: 'rgba(75, 85, 99, 1)',
-  foregroundsFgMuted: 'rgba(156, 163, 175, 1)',
-  foregroundsFgInteractiveTransparent: 'rgba(59, 130, 246, 0)',
-  foregroundsFgInteractive: 'rgba(59, 130, 246, 1)',
-
-  // border
-  strokeBorderBase: 'rgba(229, 231, 235, 1)',
-  strokeBorderStrong: 'rgba(209, 213, 219, 1)',
-  strokeSep: 'rgba(229, 231, 235, 1)',
-  lineStep: 'rgba(18, 22, 24, 0.06)',
-  lineBorderStrong: 'rgba(18, 22, 24, 0.12)',
-  lineBorderBase: 'rgba(18, 22, 24, 0.06)',
-  borderBase: 'rgba(18, 22, 24, 0.06)',
-  dividerColor: 'rgba(239, 241, 245, 1)',
-
-  // button
-  buttonsButtonNeutral: 'rgba(255, 255, 255, 1)',
-  buttonsButtonNeutralHover: 'rgba(243, 244, 246, 1)',
-  buttonsButtonInverted: 'rgba(3, 7, 18, 1)',
-  buttonsButtonInvertedHover: 'rgba(17, 24, 39, 1)',
-  buttonsButtonDanger: 'rgba(225, 29, 72, 1)',
-
-  red: '#FF6369',
-};
-
-export default colors;

package/src/Config/Config.stories.jsx

@@ -1,16 +0,0 @@
-import SwitchMode from './demo/switch-mode';
-import NestedColorScheme from './demo/nested-color-scheme';
-
-export default {
-  title: 'Theme/Config',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Config is used to configure the theme and locale of the application.',
-      },
-    },
-  },
-};
-
-export { SwitchMode, NestedColorScheme };

package/src/Config/config-provider.tsx

@@ -1,62 +0,0 @@
-import { type ReactNode } from 'react';
-import { LocaleProvider, LocaleProviderProps, useLocaleContext } from '../Locale/context';
-import ThemeProvider, { type ThemeProviderProps, useColorScheme } from '../Theme/theme-provider';
-import { useTheme } from '../Theme';
-
-export interface ConfigProviderProps extends Omit<LocaleProviderProps, 'translations'>, ThemeProviderProps {
-  children: ReactNode;
-  translations?: Record<string, any>;
-}
-
-/**
- * 集中化配置
- */
-export function ConfigProvider({
-  children,
-  // theme provider
-  theme,
-  injectFirst,
-  darkSchemeClass,
-  prefer,
-  disableBlockletTheme = false,
-  enableColorScheme,
-  disableStyleCache,
-  // locale provider
-  locale,
-  fallbackLocale,
-  translations = {},
-  languages,
-  onLoadingTranslation,
-}: ConfigProviderProps) {
-  return (
-    <ThemeProvider
-      theme={theme}
-      injectFirst={injectFirst}
-      darkSchemeClass={darkSchemeClass}
-      prefer={prefer}
-      disableBlockletTheme={disableBlockletTheme}
-      enableColorScheme={enableColorScheme}
-      disableStyleCache={disableStyleCache}>
-      <LocaleProvider
-        locale={locale}
-        fallbackLocale={fallbackLocale}
-        translations={translations}
-        onLoadingTranslation={onLoadingTranslation}
-        languages={languages}>
-        {children}
-      </LocaleProvider>
-    </ThemeProvider>
-  );
-}
-
-export function useConfig() {
-  const theme = useTheme();
-  const localeCtx = useLocaleContext();
-  const colorSchemeCtx = useColorScheme();
-
-  return {
-    theme,
-    ...localeCtx,
-    ...colorSchemeCtx,
-  };
-}

package/src/Config/index.ts

@@ -1,2 +0,0 @@
-export * from './config-provider';
-export { default as ThemeModeToggle } from './theme-mode-toggle';

package/src/Config/theme-mode-toggle.tsx

@@ -1,38 +0,0 @@
-import { IconButton } from '@mui/material';
-import {
-  LightModeOutlined as LightModeOutlinedIcon,
-  Brightness2Outlined as Brightness2OutlinedIcon,
-} from '@mui/icons-material';
-import { useThrottleFn } from 'ahooks';
-import { useColorScheme } from '../Theme/theme-provider';
-
-export default function ThemeModeToggle() {
-  const { mode, toggleMode, prefer } = useColorScheme();
-  const { run: toggleModeThrottled } = useThrottleFn(
-    () => {
-      toggleMode();
-    },
-    {
-      wait: 300,
-    }
-  );
-
-  if (!toggleMode) {
-    if (process.env.NODE_ENV !== 'production') {
-      console.warn('Please ensure the component is wrapped with ConfigProvider context');
-    }
-
-    return null;
-  }
-
-  // 跟随系统才显示切换
-  if (prefer === 'system' || window.blocklet?.theme?.prefer === 'system') {
-    return (
-      <IconButton onClick={toggleModeThrottled}>
-        {mode === 'light' ? <Brightness2OutlinedIcon /> : <LightModeOutlinedIcon />}
-      </IconButton>
-    );
-  }
-
-  return null;
-}

package/src/ContactForm/ContactForm.stories.jsx

@@ -1,32 +0,0 @@
-import ContactForm from '.';
-import withTheme from '../withTheme';
-
-const ThemedContactForm = withTheme(ContactForm);
-
-export default {
-  title: 'Deprecated/ContactForm',
-};
-
-export function VerticalLayout() {
-  return <ThemedContactForm />;
-}
-
-VerticalLayout.storyName = 'vertical layout';
-
-export function HorizontalLayout() {
-  return <ThemedContactForm layout="horizontal" />;
-}
-
-HorizontalLayout.storyName = 'horizontal layout';
-
-export function WithoutTitle() {
-  return <ThemedContactForm layout="vertical" title="" />;
-}
-
-WithoutTitle.storyName = 'without title';
-
-export function CustomizeFields() {
-  return <ThemedContactForm layout="horizontal" fields={['Email', 'Name']} />;
-}
-
-CustomizeFields.storyName = 'customize fields';

package/src/ContactForm/index.tsx

@@ -1,264 +0,0 @@
-/* eslint-disable react/no-unused-prop-types */
-/* eslint-disable react/static-property-placement */
-import React from 'react';
-import axios from 'axios';
-import { Typography, CircularProgress } from '@mui/material';
-
-import { mergeProps } from '../Util';
-import { warn as deprecatedWarn } from '../Util/deprecate';
-import Button from '../Button';
-import { styled } from '../Theme';
-
-export function submitContactForm(
-  { formId, portalId }: { formId: string; portalId: string },
-  fields: Record<string, string>,
-  context: Record<string, string>
-) {
-  const url = `https://api.hsforms.com/submissions/v3/integration/submit/${portalId}/${formId}`;
-  return axios
-    .post(url, {
-      submittedAt: Date.now(),
-      fields: Object.keys(fields).map((x) => ({
-        name: x.replace(/\s+/, '').toLowerCase(),
-        value: fields[x],
-      })),
-      context,
-      skipValidation: false,
-    })
-    .then((res) => res.data.inlineMessage)
-    .catch((res) => (res.data ? res.data.message : 'Form Submit Failed'));
-}
-
-export interface ContactFormProps extends React.HTMLAttributes<HTMLFormElement> {
-  className?: string;
-  portalId?: string;
-  formId?: string;
-  title?: string;
-  button?: string;
-  successMessage?: string;
-  layout?: 'horizontal' | 'vertical';
-  fields?: string | string[];
-}
-
-export default class ContactForm extends React.Component<
-  ContactFormProps,
-  {
-    loading: boolean;
-    errorMessage: string;
-    successMessage: string;
-    [x: string]: string | boolean;
-  }
-> {
-  static defaultProps = {
-    className: '',
-    portalId: '4796488',
-    formId: '929a510f-34f4-4251-98b3-34175200aebd',
-    title: undefined,
-    button: '',
-    layout: 'vertical' as const,
-    successMessage: 'Form Submit Success',
-    fields: ['Email', 'First Name', 'Last Name'],
-  };
-
-  fields: string[];
-
-  constructor(props: ContactFormProps) {
-    super(props);
-
-    if (typeof props.fields === 'string') {
-      this.fields = props.fields.split(',').map((x) => x.trim());
-    } else {
-      this.fields = props.fields!;
-    }
-
-    this.state = {
-      loading: false,
-      errorMessage: '',
-      successMessage: '',
-    };
-
-    this.fields.forEach((x) => {
-      // @ts-ignore
-      this.state[x] = '';
-    });
-    deprecatedWarn('ContactForm');
-  }
-
-  deriveProps() {
-    const newProps = mergeProps(this.props, ContactForm);
-
-    if (typeof newProps.title === 'undefined') {
-      newProps.title = 'Signup for our news letter';
-    }
-    if (!newProps.button) {
-      newProps.button = 'Subscribe';
-    }
-
-    return newProps;
-  }
-
-  render() {
-    const { className, style, title, button, layout } = this.deriveProps();
-    const { loading, errorMessage, successMessage } = this.state;
-    return (
-      <Form
-        onSubmit={this.onSubmit}
-        className={className}
-        style={style}
-        layout={layout}
-        fieldCount={this.fields.length}
-        name="subscribe">
-        {!!title && (
-          <Typography component="p" className="title">
-            {title}
-          </Typography>
-        )}
-        <div className="form-controls">
-          {this.fields.map((x) => (
-            <input
-              required
-              key={x}
-              type="text"
-              value={this.state[x] as string}
-              onChange={this.getInputHandler(x)}
-              className="input"
-              placeholder={x}
-            />
-          ))}
-          <Button
-            variant="outlined"
-            type="submit"
-            color="inherit"
-            size="large"
-            disabled={loading}
-            className="subscribe-btn-empty">
-            {loading ? <CircularProgress size={28} /> : button}
-          </Button>
-        </div>
-        {!!errorMessage && (
-          <Typography
-            component="p"
-            variant="body1"
-            className="error"
-            color="secondary"
-            dangerouslySetInnerHTML={{ __html: errorMessage }}
-          />
-        )}
-        {!!successMessage && (
-          <Typography
-            component="p"
-            variant="body1"
-            className="success"
-            color="primary"
-            dangerouslySetInnerHTML={{ __html: successMessage }}
-          />
-        )}
-      </Form>
-    );
-  }
-
-  onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    this.setState({ loading: true });
-
-    try {
-      const message = await submitContactForm(
-        { formId: this.props.formId!, portalId: this.props.portalId! },
-        this.fields.reduce<Record<string, string>>((obj, x) => {
-          obj[x] = this.state[x] as string;
-          return obj;
-        }, {}),
-        {
-          pageUri: window.location.href,
-          pageName: document.title,
-        }
-      );
-
-      this.setState({
-        loading: false,
-        successMessage: message || this.props.successMessage,
-      });
-    } catch (err) {
-      this.setState({
-        loading: false,
-        errorMessage: err ? (err as Error).message : 'Form submit failed',
-      });
-    }
-  };
-
-  getInputHandler =
-    (name: string, state = {}) =>
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      this.setState(
-        Object.assign(state, {
-          [name]: e.target.value,
-        })
-      );
-    };
-}
-
-interface FormProps {
-  layout: 'vertical' | 'horizontal';
-  fieldCount: number;
-}
-
-// prettier-ignore
-const getInputWidth = (props: FormProps) => (props.layout === 'vertical' ? '100%' : `${Math.max(95 / (props.fieldCount + 1), 20)}%`);
-
-const Form = styled('form', {
-  shouldForwardProp: (prop) => prop !== 'layout' && prop !== 'fieldCount',
-})<FormProps>`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  @media (max-width: ${(props) => props.theme.breakpoints.values.sm}px) {
-    width: 100% !important;
-  }
-  max-width: 800px;
-  margin: 0px auto;
-
-  .title {
-    font-size: 30px;
-    text-align: center;
-    color: ${(props) => {
-      return props.theme.typography.color.main;
-    }};
-  }
-
-  .form-controls {
-    width: 100%;
-    flex-direction: ${(props) => (props.layout === 'vertical' ? 'column' : 'row')};
-    justify-content: space-between;
-    align-items: center;
-
-    .input {
-      width: ${(props) => getInputWidth(props)};
-      height: 50px;
-      border: none;
-      border-bottom: 1px solid
-        ${(props) => {
-          return props.theme.typography.color.main;
-        }};
-      font-size: 16px;
-      letter-spacing: 1.8px;
-      outline: none;
-      margin: ${(props) => (props.layout === 'vertical' ? '12px 0' : '12px')};
-      background: transparent;
-
-      &:first-of-type {
-        margin-top: 40px;
-      }
-    }
-
-    .subscribe-btn-empty {
-      margin-top: ${(props) => (props.layout === 'vertical' ? '40px' : '0')};
-      width: ${(props) => (props.layout === 'vertical' ? '100%' : 'auto')};
-    }
-  }
-
-  .error,
-  .success {
-    margin-top: 20px;
-  }
-`;

package/src/CookieConsent/CookieConsent.stories.jsx

@@ -1,33 +0,0 @@
-import { Box } from '@mui/material';
-import { ThemeModeToggle } from '../Config';
-import { ThemeProvider } from '../Theme';
-
-export { default as Basic } from './demo/basic';
-export { default as CustomButtonText } from './demo/custom-button-text';
-export { default as CustomStyles } from './demo/custom-styles';
-export { default as I18N } from './demo/i18n';
-
-export default {
-  title: 'Basic/CookieConsent',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'CookieConsent is used to alert users about the use of cookies on your website.',
-      },
-      inlineStories: false,
-      iframeHeight: 400,
-    },
-  },
-
-  decorators: [
-    (Story) => (
-      <ThemeProvider prefer="system">
-        <Box sx={{ mb: 1 }}>
-          <ThemeModeToggle />
-        </Box>
-        <Story />
-      </ThemeProvider>
-    ),
-  ],
-};

package/src/CookieConsent/index.tsx

@@ -1,104 +0,0 @@
-import { Button, type ButtonProps } from '@mui/material';
-import CookieConsent, { resetCookieConsentValue } from 'react-cookie-consent';
-
-import { styled } from '../Theme';
-import type { Locale, Translations } from '../type';
-
-export { resetCookieConsentValue };
-
-const translations: Translations = {
-  en: {
-    content:
-      'We use cookies and other tracking technologies to improve your browsing experience on our website, to show you personalized content, to analyze our website traffic, and to understand where our visitors are coming from.',
-    agree: 'I Understand',
-  },
-  zh: {
-    content:
-      '我们使用 cookies 和其他跟踪技术来改善您在我们网站上的浏览体验，向您展示个性化的内容，分析我们的网站流量，并了解我们的访问者来自哪里。',
-    agree: '我知道了',
-  },
-};
-
-function inIframe() {
-  try {
-    return window.self !== window.top;
-  } catch (e) {
-    return true;
-  }
-}
-
-function AcceptButton(props: ButtonProps) {
-  return <Button variant="contained" {...props} />;
-}
-
-export interface CookieConsentProps extends React.ComponentProps<typeof CookieConsent> {
-  locale?: Locale;
-  displayInIframe?: false | true;
-}
-
-/**
- * DefaultCookieConsent, 对 react-cookie-consent package 封装, 以便 arcblock 内部产品可以快速使用
- * - 默认内容
- * - 默认配置/样式
- */
-export default function DefaultCookieConsent({
-  children,
-  locale = 'en',
-  style = {},
-  displayInIframe = false,
-  ...rest
-}: CookieConsentProps) {
-  if (!displayInIframe && inIframe()) {
-    return null;
-  }
-  if (locale && !translations[locale]) {
-    // eslint-disable-next-line no-param-reassign
-    locale = 'en';
-  }
-  return (
-    <Wrapper style={style}>
-      <CookieConsent
-        disableStyles
-        disableButtonStyles
-        ButtonComponent={AcceptButton}
-        buttonText={translations[locale].agree}
-        buttonStyle={{ marginTop: 16, padding: '6px 16px' }}
-        {...rest}>
-        {children || <p style={{ margin: 0 }}>{translations[locale].content}</p>}
-      </CookieConsent>
-    </Wrapper>
-  );
-}
-
-const Wrapper = styled('div')`
-  box-sizing: border-box;
-  position: fixed;
-  right: 20px;
-  bottom: 20px;
-  z-index: 999;
-  max-width: 440px;
-  padding: 16px 24px;
-  font-size: 16px;
-  color: ${({ theme }) => theme.palette.grey[500]};
-  background: ${({ theme }) => theme.palette.background.paper};
-  border: 1px solid ${({ theme }) => theme.palette.divider};
-  border-radius: ${({ theme }) => theme.shape.borderRadius}px;
-  box-shadow: ${({ theme }) => theme.shadows[4]};
-  &:empty {
-    display: none;
-  }
-  button {
-    min-width: 200px;
-  }
-
-  @media screen and (max-width: 480px) {
-    left: 16px;
-    right: 16px;
-    bottom: 16px;
-    width: auto;
-    button {
-      display: block;
-      width: 100%;
-    }
-  }
-`;

package/src/CountDown/CountDown.stories.jsx

@@ -1,15 +0,0 @@
-export { default as LightMode } from './demo/light-mode';
-export { default as DarkMode } from './demo/dark-mode';
-export { default as CustomStyle } from './demo/custom-style';
-
-export default {
-  title: 'Basic/CountDown',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'CountDown is used to display a countdown clock on your page',
-      },
-    },
-  },
-};