docs: Add happy wave package (#44031)

* docs: theme add happy work

* docs: update happy

* fix: lint

* docs: rename

.dumi/theme/common/ThemeSwitch/index.tsx

@@ -1,5 +1,6 @@
-import { BgColorsOutlined } from '@ant-design/icons';
-import { CompactTheme, DarkTheme, Motion } from 'antd-token-previewer/es/icons';
+import { BgColorsOutlined, SmileOutlined } from '@ant-design/icons';
+import { CompactTheme, DarkTheme } from 'antd-token-previewer/es/icons';
+// import { Motion } from 'antd-token-previewer/es/icons';
 import { FormattedMessage, Link, useLocation } from 'dumi';
 import React from 'react';
 import { useTheme } from 'antd-style';
@@ -7,7 +8,7 @@ import { FloatButton } from 'antd';
 import { getLocalizedPathname, isZhCN } from '../../utils';
 import ThemeIcon from './ThemeIcon';
 
-export type ThemeName = 'light' | 'dark' | 'compact' | 'motion-off';
+export type ThemeName = 'light' | 'dark' | 'compact' | 'motion-off' | 'happy-work';
 
 export type ThemeSwitchProps = {
   value?: ThemeName[];
@@ -19,7 +20,8 @@ const ThemeSwitch: React.FC<ThemeSwitchProps> = (props) => {
   const token = useTheme();
   const { pathname, search } = useLocation();
 
-  const isMotionOff = value.includes('motion-off');
+  // const isMotionOff = value.includes('motion-off');
+  const isHappyWork = value.includes('happy-work');
 
   return (
     <FloatButton.Group trigger="click" icon={<ThemeIcon />} aria-label="Theme Switcher">
@@ -56,7 +58,8 @@ const ThemeSwitch: React.FC<ThemeSwitchProps> = (props) => {
         }}
         tooltip={<FormattedMessage id="app.theme.switch.compact" />}
       />
-      <FloatButton
+      {/* Too many float button. Hide motion one */}
+      {/* <FloatButton
         icon={<Motion />}
         type={!isMotionOff ? 'primary' : 'default'}
         onClick={() => {
@@ -71,6 +74,22 @@ const ThemeSwitch: React.FC<ThemeSwitchProps> = (props) => {
             id={isMotionOff ? 'app.theme.switch.motion.off' : 'app.theme.switch.motion.on'}
           />
         }
+      /> */}
+      <FloatButton
+        icon={<SmileOutlined />}
+        type={isHappyWork ? 'primary' : 'default'}
+        onClick={() => {
+          if (isHappyWork) {
+            onChange(value.filter((theme) => theme !== 'happy-work'));
+          } else {
+            onChange([...value, 'happy-work']);
+          }
+        }}
+        tooltip={
+          <FormattedMessage
+            id={isHappyWork ? 'app.theme.switch.happy-work.off' : 'app.theme.switch.happy-work.on'}
+          />
+        }
       />
     </FloatButton.Group>
   );

.dumi/theme/layouts/GlobalLayout.tsx

@@ -6,6 +6,7 @@ import {
   StyleProvider,
   extractStyle,
 } from '@ant-design/cssinjs';
+import { HappyProvider } from '@ant-design/happy-work-theme';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { createSearchParams, useOutlet, useSearchParams, useServerInsertedHTML } from 'dumi';
 import { App, theme as antdTheme } from 'antd';
@@ -147,7 +148,7 @@ const GlobalLayout: React.FC = () => {
             },
           }}
         >
-          {content}
+          <HappyProvider disabled={!theme.includes('happy-work')}>{content}</HappyProvider>
         </SiteThemeProvider>
       </SiteContext.Provider>
     </StyleProvider>

.dumi/theme/locales/en-US.json

@@ -5,6 +5,8 @@
   "app.theme.switch.compact": "Compact theme",
   "app.theme.switch.motion.on": "Motion On",
   "app.theme.switch.motion.off": "Motion Off",
+  "app.theme.switch.happy-work.on": "Happy Work Effect On",
+  "app.theme.switch.happy-work.off": "Happy Work Effect Off",
   "app.header.search": "Search...",
   "app.header.menu.documentation": "Docs",
   "app.header.menu.more": "More",

.dumi/theme/locales/zh-CN.json

@@ -5,6 +5,8 @@
   "app.theme.switch.compact": "紧凑主题",
   "app.theme.switch.motion.on": "动画开启",
   "app.theme.switch.motion.off": "动画关闭",
+  "app.theme.switch.happy-work.on": "快乐工作特效开启",
+  "app.theme.switch.happy-work.off": "快乐工作特效关闭",
   "app.header.search": "全文本搜索...",
   "app.header.menu.documentation": "文档",
   "app.header.menu.more": "更多",

components/config-provider/demo/wave.md

@@ -1,7 +1,7 @@
 ## zh-CN
 
-波纹效果带来了灵动性，可以通过 `component` 判断来自哪个组件。
+波纹效果带来了灵动性，可以通过 `component` 判断来自哪个组件。你也可以使用 [`@ant-design/happy-work-theme`](https://github.com/ant-design/happy-work-theme) 提供的 HappyProvider 实现动态波纹效果。
 
 ## en-US
 
-Wave effect brings dynamic. Use `component` to determine which component use it.
+Wave effect brings dynamic. Use `component` to determine which component use it. You can also use HappyProvider from [`@ant-design/happy-work-theme`](https://github.com/ant-design/happy-work-theme) to implement dynamic wave effect.

components/config-provider/demo/wave.tsx

@@ -1,3 +1,4 @@
+import { HappyProvider } from '@ant-design/happy-work-theme';
 import React from 'react';
 import { Button, ConfigProvider, Space } from 'antd';
 
@@ -122,6 +123,9 @@ const App = () => (
     <Wrapper name="Default" />
     <Wrapper name="Inset" showEffect={showInsetEffect} />
     <Wrapper name="Shake" showEffect={showShakeEffect} />
+    <HappyProvider>
+      <Button type="primary">Happy Work</Button>
+    </HappyProvider>
   </Space>
 );
 

docs/react/_demo/motion.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+通过 `token` 进行动画效果配置。
+
+## en-US
+
+Config animation effect by `token`.

docs/react/_demo/motion.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Switch, ConfigProvider, Space, Checkbox, Radio, Row, Col } from 'antd';
+
+export default () => {
+  const [checked, setChecked] = React.useState(false);
+
+  React.useEffect(() => {
+    const id = setInterval(() => {
+      setChecked((prev) => !prev);
+    }, 500);
+
+    return () => {
+      clearInterval(id);
+    };
+  }, []);
+
+  const nodes = (
+    <Space>
+      <Checkbox checked={checked}>Checkbox</Checkbox>
+      <Radio checked={checked}>Radio</Radio>
+      <Switch checked={checked} />
+    </Space>
+  );
+
+  return (
+    <Row gutter={[24, 24]}>
+      <Col span={24}>{nodes}</Col>
+
+      <Col span={24}>
+        <ConfigProvider
+          theme={{
+            token: {
+              motion: false,
+            },
+          }}
+        >
+          {nodes}
+        </ConfigProvider>
+      </Col>
+    </Row>
+  );
+};

package.json

@@ -159,6 +159,7 @@
     "throttle-debounce": "^5.0.0"
   },
   "devDependencies": {
+    "@ant-design/happy-work-theme": "^1.0.0",
     "@ant-design/tools": "^17.0.0",
     "@antv/g6": "^4.8.13",
     "@argos-ci/core": "^0.9.0",