Merge pull request #15 from jandiasnow-work/beta

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,43 @@
+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"
+        relativeTime={false}
+        time="2024-04-15"
+        tooltip={{ title: undefined }}
+      />
+      <Typography.Time
+        format="YYYY-MM-DD"
+        relativeTime={false}
+        time="2024-04-15"
+        tooltip={{ title: '2024-04-15 15:00' }}
+      />
+      <Typography.Time
+        ellipsis={{
+          tooltip: {
+            title: '2024-04-15 15:00',
+          },
+        }}
+        format="YYYY-MM-DD"
+        relativeTime={false}
+        style={{ width: 50 }}
+        time="2024-04-15"
+        tooltip={{ title: undefined }}
+      />
+    </Space>
+  );
+};

src/Typography/index.md

@@ -0,0 +1,44 @@
+---
+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" />
+    </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,103 @@
+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 { set } from 'lodash-es';
+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 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, ...textProps } = props;
+  const [showTime, setShowTime] = useState(getFromNow(time));
+  const [timer, setTimer] = useState<any>();
+
+  const clearTimer = () => {
+    if (timer) {
+      clearInterval(timer);
+    }
+  };
+
+  // The relative time within the last hour is updated automatically
+  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(() => {
+    if (relativeTime) {
+      setTimeInterval(new Date(time));
+    }
+    return () => {
+      clearTimer();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!relativeTime) return;
+    const nextFromNow = getFromNow(time);
+    if (nextFromNow !== showTime) {
+      setShowTime(nextFromNow);
+      setTimeInterval(new Date(time));
+    }
+  }, [time, relativeTime]);
+
+  const fmtTime = dayjs(time).format(format || 'YYYY-MM-DD HH:mm:ss');
+
+  const currentTime = relativeTime ? showTime : fmtTime;
+
+  const tooltipTitle = tooltip?.title ?? (relativeTime ? fmtTime : undefined);
+
+  // Avoid duplicate tooltips
+  if (tooltipTitle) {
+    set(textProps, 'ellipsis.tooltip.title', undefined);
+  }
+
+  return (
+    <Tooltip {...(tooltip || {})} title={tooltipTitle}>
+      <Typography.Text {...textProps}>{currentTime}</Typography.Text>
+    </Tooltip>
+  );
+};
+
+export type TypographyProps = typeof AntdTypography & {
+  Time: typeof Time;
+};
+
+Typography.Time = Time;
+
+export default Typography;

src/index.ts

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