docs: fix site issue (ant-design#38552)

* docs: put an example loading component

* fix: site issue

* fix: site issue

* feat: add loading

* feat: alert

* docs: rm ReactDOM.render in md

* docs: use style tag

* chore: update snapshot

* Revert "docs: use style tag"

This reverts commit 1f75a99.

* docs: update demo

* chore: update demo

Co-authored-by: PeachScript <[email protected]>

.dumi/theme/builtins/Alert/index.tsx

@@ -0,0 +1,8 @@
+import { Alert, AlertProps } from 'antd';
+import React, { FC } from 'react';
+
+const MdAlert: FC<AlertProps> = ({ style, ...props }) => {
+  return <Alert {...props} style={{ margin: '24px 0', ...style }} />;
+};
+
+export default MdAlert;

.dumi/theme/builtins/ColorPaletteTool/index.tsx

@@ -0,0 +1,4 @@
+// @ts-ignore
+import ColorPaletteTool from '../../common/Color/ColorPaletteTool';
+
+export default ColorPaletteTool;

.dumi/theme/builtins/ColorPaletteToolDark/index.tsx

@@ -0,0 +1,4 @@
+// @ts-ignore
+import ColorPaletteToolDark from '../../common/Color/ColorPaletteToolDark';
+
+export default ColorPaletteToolDark;

.dumi/theme/builtins/ColorPalettes/index.tsx

@@ -0,0 +1,4 @@
+// @ts-ignore
+import ColorPalettes from '../../common/Color/ColorPalettes';
+
+export default ColorPalettes;

.dumi/theme/builtins/Palette/index.tsx

@@ -0,0 +1,4 @@
+// @ts-ignore
+import Palette from '../../common/Color/Palette';
+
+export default Palette;

.dumi/theme/common/Color/ColorBlock.jsx

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import { message } from 'antd';
+
+export default class ColorBlock extends Component {
+  getTextStyle() {
+    const { color, index, dark } = this.props;
+    const colorMap = {
+      default: ['#fff', 'unset'],
+      dark: ['#314659', '#fff'],
+    };
+    const [lastColor, firstColor] = dark ? colorMap.dark : colorMap.default;
+    return {
+      background: color,
+      color: index > 5 ? lastColor : firstColor,
+      fontWeight: index === 6 ? 'bold' : 'normal',
+    };
+  }
+
+  onCopied = () => {
+    const { color } = this.props;
+    message.success(`Copied: ${color}`);
+  };
+
+  render() {
+    const { color, index } = this.props;
+    return (
+      <CopyToClipboard text={color} onCopy={this.onCopied} title="click to copy color">
+        <div className="main-color-item" style={this.getTextStyle()}>
+          color-{index}
+          <span className="main-color-value">{color.toLowerCase()}</span>
+        </div>
+      </CopyToClipboard>
+    );
+  }
+}

.dumi/theme/common/Color/ColorPaletteTool.jsx

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import { FormattedMessage } from 'dumi';
+import ColorPicker from './ColorPicker';
+import ColorPatterns from './ColorPatterns';
+
+const primaryMinSaturation = 70; // 主色推荐最小饱和度
+const primaryMinBrightness = 70; // 主色推荐最小亮度
+
+export default class ColorPaletteTool extends Component {
+  state = {
+    primaryColor: '#1890ff',
+    primaryColorInstance: null,
+  };
+
+  handleChangeColor = (e, color) => {
+    const value = e.target ? e.target.value : e;
+    this.setState({
+      primaryColor: value,
+      primaryColorInstance: color,
+    });
+  };
+
+  renderColorValidation() {
+    const { primaryColorInstance } = this.state;
+    let text = '';
+    if (primaryColorInstance) {
+      if (primaryColorInstance.hsv.s * 100 < primaryMinSaturation) {
+        text += ` 饱和度建议不低于${primaryMinSaturation}（现在 ${(
+          primaryColorInstance.hsv.s * 100
+        ).toFixed(2)}）`;
+      }
+      if (primaryColorInstance.hsv.v * 100 < primaryMinBrightness) {
+        text += ` 亮度建议不低于${primaryMinBrightness}（现在 ${(
+          primaryColorInstance.hsv.v * 100
+        ).toFixed(2)}）`;
+      }
+    }
+    return <span className="color-palette-picker-validation">{text.trim()}</span>;
+  }
+
+  render() {
+    const { primaryColor } = this.state;
+    return (
+      <div className="color-palette-horizontal">
+        <div className="color-palette-pick">
+          <FormattedMessage id="app.docs.color.pick-primary" />
+        </div>
+        <div className="main-color">
+          <ColorPatterns color={primaryColor} />
+        </div>
+        <div className="color-palette-picker">
+          <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
+            <ColorPicker type="chrome" color={primaryColor} onChange={this.handleChangeColor} />
+          </span>
+          <span className="color-palette-picker-value">{primaryColor}</span>
+          {this.renderColorValidation()}
+        </div>
+      </div>
+    );
+  }
+}

.dumi/theme/common/Color/ColorPaletteToolDark.jsx

@@ -0,0 +1,107 @@
+import React, { Component } from 'react';
+import { FormattedMessage } from 'dumi';
+import { Row, Col } from 'antd';
+import ColorPicker from './ColorPicker';
+import ColorPatterns from './ColorPatterns';
+
+const primaryMinSaturation = 70; // 主色推荐最小饱和度
+const primaryMinBrightness = 70; // 主色推荐最小亮度
+
+export default class ColorPaletteTool extends Component {
+  state = {
+    primaryColor: '#1890ff',
+    backgroundColor: '#141414',
+    primaryColorInstance: null,
+  };
+
+  handleChangeColor = (e, color) => {
+    const value = e.target ? e.target.value : e;
+    this.setState({
+      primaryColor: value,
+      primaryColorInstance: color,
+    });
+  };
+
+  handleChangeBackgroundColor = e => {
+    const value = e.target ? e.target.value : e;
+    this.setState({
+      backgroundColor: value,
+    });
+  };
+
+  renderColorValidation() {
+    const { primaryColorInstance } = this.state;
+    let text = '';
+    if (primaryColorInstance) {
+      if (primaryColorInstance.hsv.s * 100 < primaryMinSaturation) {
+        text += ` 饱和度建议不低于${primaryMinSaturation}（现在 ${(
+          primaryColorInstance.hsv.s * 100
+        ).toFixed(2)}）`;
+      }
+      if (primaryColorInstance.hsv.v * 100 < primaryMinBrightness) {
+        text += ` 亮度建议不低于${primaryMinBrightness}（现在 ${(
+          primaryColorInstance.hsv.v * 100
+        ).toFixed(2)}）`;
+      }
+    }
+    return (
+      <span className="color-palette-picker-validation color-palette-picker-validation-dark">
+        {text.trim()}
+      </span>
+    );
+  }
+
+  render() {
+    const { primaryColor, backgroundColor } = this.state;
+    return (
+      <div className="color-palette-horizontal color-palette-horizontal-dark">
+        <div className="main-color">
+          <ColorPatterns color={primaryColor} dark backgroundColor={backgroundColor} />
+        </div>
+        <div className="color-palette-picker">
+          <Row>
+            <Col span={12}>
+              <div className="color-palette-pick">
+                <FormattedMessage id="app.docs.color.pick-primary" />
+              </div>
+              <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
+                <Row>
+                  <Col span={18}>
+                    <ColorPicker
+                      type="chrome"
+                      color={primaryColor}
+                      onChange={this.handleChangeColor}
+                    />
+                  </Col>
+                  <Col span={6}>
+                    <span className="color-palette-pick-hex">{primaryColor}</span>
+                  </Col>
+                </Row>
+              </span>
+            </Col>
+            <Col span={12}>
+              <div className="color-palette-pick">
+                <FormattedMessage id="app.docs.color.pick-background" />
+              </div>
+              <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>
+                <Row>
+                  <Col span={18}>
+                    <ColorPicker
+                      type="chrome"
+                      color={backgroundColor}
+                      onChange={this.handleChangeBackgroundColor}
+                    />
+                  </Col>
+                  <Col span={6}>
+                    <span className="color-palette-pick-hex">{backgroundColor}</span>
+                  </Col>
+                </Row>
+              </span>
+            </Col>
+          </Row>
+          {this.renderColorValidation()}
+        </div>
+      </div>
+    );
+  }
+}

.dumi/theme/common/Color/ColorPalettes.jsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import cls from 'classnames';
+import Palette from './Palette';
+
+const ColorPalettes = props => {
+  const { dark } = props;
+
+  const colors = [
+    {
+      name: 'red',
+      english: 'Dust Red',
+      chinese: '薄暮',
+      description: '斗志、奔放',
+    },
+    {
+      name: 'volcano',
+      english: 'Volcano',
+      chinese: '火山',
+      description: '醒目、澎湃',
+    },
+    {
+      name: 'orange',
+      english: 'Sunset Orange',
+      chinese: '日暮',
+      description: '温暖、欢快',
+    },
+    {
+      name: 'gold',
+      english: 'Calendula Gold',
+      chinese: '金盏花',
+      description: '活力、积极',
+    },
+    {
+      name: 'yellow',
+      english: 'Sunrise Yellow',
+      chinese: '日出',
+      description: '出生、阳光',
+    },
+    {
+      name: 'lime',
+      english: 'Lime',
+      chinese: '青柠',
+      description: '自然、生机',
+    },
+    {
+      name: 'green',
+      english: 'Polar Green',
+      chinese: '极光绿',
+      description: '健康、创新',
+    },
+    {
+      name: 'cyan',
+      english: 'Cyan',
+      chinese: '明青',
+      description: '希望、坚强',
+    },
+    {
+      name: 'blue',
+      english: 'Daybreak Blue',
+      chinese: '拂晓蓝',
+      description: '包容、科技、普惠',
+    },
+    {
+      name: 'geekblue',
+      english: 'Geek Blue',
+      chinese: '极客蓝',
+      description: '探索、钻研',
+    },
+    {
+      name: 'purple',
+      english: 'Golden Purple',
+      chinese: '酱紫',
+      description: '优雅、浪漫',
+    },
+    {
+      name: 'magenta',
+      english: 'Magenta',
+      chinese: '法式洋红',
+      description: '明快、感性',
+    },
+  ];
+  const colorCls = cls('color-palettes', {
+    'color-palettes-dark': !!dark,
+  });
+  return (
+    <div className={colorCls}>
+      {colors.map(color => (
+        <Palette key={color.name} color={color} dark={dark} showTitle />
+      ))}
+    </div>
+  );
+};
+
+export default ColorPalettes;

.dumi/theme/common/Color/ColorPatterns.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { generate } from '@ant-design/colors';
+import uniq from 'lodash/uniq';
+import ColorBlock from './ColorBlock';
+
+export default function ColorPatterns({ color, dark, backgroundColor }) {
+  const colors = generate(color, dark ? { theme: 'dark', backgroundColor } : {});
+  return uniq(colors).map((colorString, i) => (
+    <ColorBlock color={colorString} index={i + 1} dark={dark} key={colorString} />
+  ));
+}