feat: add Typography component

package.json

@@ -82,6 +82,7 @@
     "@ant-design/icons": "^5",
     "@babel/runtime": "^7",
     "@lobehub/ui": "^1",
+    "dayjs": "^1.11.10",
     "leva": "^0",
     "lodash-es": "^4",
     "lucide-react": "latest",

src/Typography/demos/Playground.tsx

@@ -0,0 +1,21 @@
+import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
+import type { TypographyProps } from '@yuntijs/ui';
+import { Typography } from '@yuntijs/ui';
+
+export default () => {
+  const store = useCreateStore();
+  const control: TypographyProps | any = useControls(
+    {
+      time: '2024-04-15',
+      format: 'YYYY-MM-DD hh:mm:ss',
+      relativeTime: true,
+      formatTooltip: false,
+    },
+    { store }
+  );
+  return (
+    <StoryBook levaStore={store}>
+      <Typography.Time {...control} />
+    </StoryBook>
+  );
+};

src/Typography/demos/index.tsx

@@ -0,0 +1,25 @@
+import { Space, Typography } from '@yuntijs/ui';
+
+export default () => {
+  return (
+    <Space direction="vertical">
+      <Typography.Link>Link</Typography.Link>
+      <Typography.Text>Text</Typography.Text>
+      <Typography.Title level={3}>Title</Typography.Title>
+      <Typography.Paragraph>
+        Paragraph:The YuntiUI components are inspired by LobeUI and developed based on Antd
+        components, fully compatible with Antd components, and it is recommended to use antd-style
+        as the default css-in-js styling solution.
+      </Typography.Paragraph>
+      <Typography.Time format="YYYY-MM-DD hh:mm:ss" relativeTime={true} time="2024-04-15" />
+      <Typography.Time format="YYYY-MM-DD hh:mm:ss" relativeTime={false} time="2024-04-15" />
+      <Typography.Time format="YYYY-MM-DD" relativeTime={false} time="2024-04-15" />
+      <Typography.Time
+        format="YYYY-MM-DD"
+        formatTooltip={true}
+        relativeTime={false}
+        time="2024-04-15"
+      />
+    </Space>
+  );
+};

src/Typography/index.md

@@ -0,0 +1,50 @@
+---
+nav: Components
+group: General
+title: Typography
+description: Basic text writing, including headings, body text, lists, and more.
+---
+
+## Usage
+
+based on antd [Typography](https://ant.design/components/typography-cn/) component.
+
+### Simple usage
+
+```jsx | pure
+import { Space, Typography } from '@yuntijs/ui';
+
+export default () => {
+  return (
+    <Space direction="vertical">
+      <Typography.Link>Link</Typography.Link>
+      <Typography.Text>Text</Typography.Text>
+      <Typography.Title level={3}>Title</Typography.Title>
+      <Typography.Paragraph>
+        Paragraph:The YuntiUI components are inspired by LobeUI and developed based on Antd
+        components, fully compatible with Antd components, and it is recommended to use antd-style
+        as the default css-in-js styling solution.
+      </Typography.Paragraph>
+      <Typography.Time time="2024-04-15" format="YYYY-MM-DD hh:mm:ss" relativeTime={true} />
+      <Typography.Time time="2024-04-15" format="YYYY-MM-DD hh:mm:ss" relativeTime={false} />
+      <Typography.Time format="YYYY-MM-DD" relativeTime={false} time="2024-04-15" />
+      <Typography.Time
+        format="YYYY-MM-DD"
+        formatTooltip={true}
+        relativeTime={false}
+        time="2024-04-15"
+      />
+    </Space>
+  );
+};
+```
+
+<code src="./demos/index.tsx" center></code>
+
+## Playground
+
+<code src="./demos/Playground.tsx" nopadding></code>
+
+## APIs
+
+<API></API>

src/Typography/index.tsx

@@ -0,0 +1,105 @@
+import { Typography as AntdTypography, Tooltip } from 'antd';
+import { TextProps } from 'antd/es/typography/Text';
+import { TooltipPropsWithTitle } from 'antd/lib/tooltip';
+import dayjs from 'dayjs';
+import dayjsRelativeTime from 'dayjs/plugin/relativeTime';
+import React, { useEffect, useState } from 'react';
+
+dayjs.extend(dayjsRelativeTime);
+
+export const Typography = AntdTypography as TypographyProps;
+
+interface TimeProps extends TextProps {
+  /**
+   * @description Set display time
+   * @default '-'
+   */
+  time: string;
+  /**
+   * @description Formatted display time
+   * @default 'YYYY-MM-DD HH:mm:ss'
+   */
+  format?: string;
+  /**
+   * @description Formatted tooltip display time
+   * @default 'false'
+   */
+  formatTooltip?: boolean;
+  /**
+   * @description Display relative time
+   * @default 'true'
+   */
+  relativeTime?: boolean;
+  /**
+   * @description Mouse above to show time
+   * @default '{title: "YYYY-MM-DD HH:mm:ss"}'
+   */
+  tooltip?: TooltipPropsWithTitle;
+}
+const getFromNow = (t: any) => dayjs(t ? new Date(t) : new Date()).fromNow();
+const Time: React.FC<TimeProps> = props => {
+  const { time, format, relativeTime = true, tooltip, formatTooltip = false, ...textProps } = props;
+  const [showTime, setShowTime] = useState(getFromNow(time));
+  const [timer, setTimer] = useState<any>();
+
+  const clearTimer = () => {
+    if (timer) {
+      clearInterval(timer);
+    }
+  };
+
+  const setTimeInterval = (currentTime: dayjs.ConfigType) => {
+    clearTimer();
+    const now = dayjs();
+    const timeMoment = dayjs(currentTime);
+    const diff = now.diff(timeMoment);
+    if (diff > 0 && diff < 60 * 60 * 1000) {
+      const t = setInterval(() => {
+        setShowTime(getFromNow(currentTime));
+      }, 60 * 1000);
+      setTimer(t);
+    }
+  };
+  useEffect(() => {
+    setTimeInterval(new Date(time));
+    return () => {
+      clearTimer();
+    };
+  }, []);
+
+  useEffect(() => {
+    const nextFromNow = getFromNow(time);
+    if (nextFromNow !== showTime) {
+      setShowTime(nextFromNow);
+      setTimeInterval(new Date(time));
+    }
+  }, [time]);
+
+  const fmtTime = (f?: string) =>
+    dayjs(time ? new Date(time) : new Date()).format(f || 'YYYY-MM-DD HH:mm:ss');
+
+  const TooltipDom = (currentTime: string) => {
+    return (
+      <Tooltip
+        {...tooltip}
+        title={tooltip ? tooltip.title : fmtTime(formatTooltip ? format : undefined)}
+      >
+        <Typography.Text {...textProps}>{currentTime}</Typography.Text>
+      </Tooltip>
+    );
+  };
+
+  if (!relativeTime) {
+    return TooltipDom(time ? fmtTime(format) : '-');
+  }
+
+  return time ? TooltipDom(showTime) : <Typography.Text {...textProps}>-</Typography.Text>;
+};
+
+export type TypographyProps = typeof AntdTypography & {
+  Time: typeof Time;
+};
+
+Typography.Time = Time;
+
+export default Typography;

src/index.ts

@@ -16,6 +16,7 @@ export * from './Modal';
 export * from './notification';
 export * from './Radio';
 export * from './Table';
+export * from './Typography';
 
 // ~ antd
 export {
@@ -153,8 +154,6 @@ export {
   type TreeProps,
   TreeSelect,
   type TreeSelectProps,
-  Typography,
-  type TypographyProps,
   Upload,
   type UploadFile,
   type UploadProps,