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,20 @@
+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,
+    },
+    { store }
+  );
+  return (
+    <StoryBook levaStore={store}>
+      <Typography.Time {...control} />
+    </StoryBook>
+  );
+};

src/Typography/demos/index.tsx

@@ -0,0 +1,18 @@
+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" />
+    </Space>
+  );
+};

src/Typography/index.md

@@ -0,0 +1,43 @@
+---
+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} />
+    </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,104 @@
+import { Typography as AntdTypography, Tooltip } from 'antd';
+import { TooltipPropsWithTitle } from 'antd/lib/tooltip';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import React, { useEffect, useState } from 'react';
+
+/**
+ * get cookie
+ *
+ * @param {string} cookie_name
+ * @returns {string}
+ */
+const getCookie = (cookie_name: string) => {
+  if (document.cookie.length > 0) {
+    let start = document.cookie.indexOf(cookie_name + '=');
+    if (start !== -1) {
+      start = start + cookie_name.length + 1;
+      let end = document.cookie.indexOf(';', start);
+      if (end === -1) {
+        end = document.cookie.length;
+      }
+      return unescape(document.cookie.substring(start, end));
+    }
+  }
+  return '';
+};
+const lang = getCookie('intl_locale') || window.localStorage.getItem('intl_locale') || 'zh';
+dayjs.extend(relativeTime);
+if (lang === 'zh') {
+  dayjs.locale('zh-cn');
+} else {
+  dayjs.locale('en-us');
+}
+
+interface TimeProps {
+  /**
+   * 时间参数.
+   */
+  time: string;
+  format?: string;
+  relativeTime?: boolean;
+  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 } = props;
+  const [showTime, setShowTime] = useState(getFromNow(time));
+  const [timer, setTimer] = useState<any>();
+
+  const clearTimer = () => {
+    timer && clearInterval(timer);
+  };
+
+  const setTimeInterval = (time: dayjs.ConfigType) => {
+    clearTimer();
+    const now = dayjs();
+    const timeMoment = dayjs(time);
+    const diff = now.diff(timeMoment);
+    if (diff > 0 && diff < 60 * 60 * 1000) {
+      const t = setInterval(() => {
+        setShowTime(getFromNow(time));
+      }, 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 = dayjs(time ? new Date(time) : new Date()).format(format || 'YYYY-MM-DD HH:mm:ss');
+  if (!relativeTime) {
+    return <span>{time ? fmtTime : '-'}</span>;
+  }
+  return time ? (
+    <span style={{ cursor: 'pointer' }}>
+      <Tooltip {...tooltip} title={tooltip ? tooltip.title : fmtTime}>
+        <span>{showTime}</span>
+      </Tooltip>
+    </span>
+  ) : (
+    <span>-</span>
+  );
+};
+
+export type TypographyProps = typeof AntdTypography & {
+  Time: typeof Time;
+};
+
+export const Typography = AntdTypography as TypographyProps;
+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,