[add] Time & Timeline components

[fix] some Preview detail bugs
idea2app · Oct 26, 2024 · 0965198 · 0965198 · github-actions · Oct 26, 2024
1 parent 90e2258
commit 0965198
Show file tree

Hide file tree

Showing 11 changed files with 1,660 additions and 1,481 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "idea-react",
-    "version": "2.0.0-rc.7",
+    "version": "2.0.0-rc.8",
     "license": "LGPL-3.0-or-later",
     "author": "[email protected]",
     "description": "A React advanced components library based on TypeScript & Bootstrap, built by idea2app remote developers team.",
@@ -45,8 +45,8 @@
         "react-dom": ">=16"
     },
     "devDependencies": {
-        "@babel/plugin-proposal-decorators": "^7.25.7",
-        "@babel/preset-typescript": "^7.25.7",
+        "@babel/plugin-proposal-decorators": "^7.25.9",
+        "@babel/preset-typescript": "^7.26.0",
         "@eslint/compat": "^1.2.1",
         "@eslint/js": "^9.13.0",
         "@microsoft/api-extractor": "^7.47.11",
@@ -66,22 +66,22 @@
         "@storybook/react-vite": "^7.6.20",
         "@storybook/testing-library": "^0.2.2",
         "@types/lodash": "^4.17.12",
-        "@types/node": "^20.16.13",
-        "@types/prismjs": "^1.26.4",
-        "@types/react": "^18.3.11",
+        "@types/node": "^20.17.1",
+        "@types/prismjs": "^1.26.5",
+        "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
-        "@vitejs/plugin-react": "^4.3.2",
+        "@vitejs/plugin-react": "^4.3.3",
         "eslint": "^9.13.0",
         "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-react": "^7.37.1",
+        "eslint-plugin-react": "^7.37.2",
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "globals": "^15.11.0",
         "husky": "^9.1.6",
         "koapache": "^2.2.2",
         "less": "^4.2.0",
         "lint-staged": "^15.2.10",
         "parcel": "~2.12.0",
-        "postcss-preset-env": "^10.0.7",
+        "postcss-preset-env": "^10.0.8",
         "prettier": "^3.3.3",
         "prettier-plugin-css-order": "^2.1.2",
         "process": "^0.11.10",
@@ -91,10 +91,10 @@
         "rimraf": "^6.0.1",
         "storybook": "^7.6.20",
         "typedoc": "^0.26.10",
-        "typedoc-plugin-mdn-links": "^3.3.3",
+        "typedoc-plugin-mdn-links": "^3.3.4",
         "typescript": "~5.6.3",
-        "typescript-eslint": "^8.10.0",
-        "vite": "^5.4.9"
+        "typescript-eslint": "^8.11.0",
+        "vite": "^5.4.10"
     },
     "prettier": {
         "singleQuote": true,

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/preview/content.tsx b/preview/content.tsx
@@ -20,7 +20,9 @@ import {
     Select,
     ShareBox,
     SpinnerButton,
+    Time,
     TimeDistance,
+    Timeline,
     TypeEcho,
     UserRankView,
     VerticalMarquee
@@ -111,12 +113,45 @@ export class Content extends Component {
                     </CodeExample>
                 </Section>
 
+                <Section title="Time">
+                    <CodeExample>
+                        <Time
+                            dateTime="2022-11-27"
+                            format="YYYY 年 MM 月 DD 日"
+                        />
+                    </CodeExample>
+                </Section>
+
                 <Section title="Time Distance">
                     <CodeExample>
                         <TimeDistance date="1989-06-04" />
                     </CodeExample>
                 </Section>
 
+                <Section title="Timeline">
+                    <CodeExample>
+                        <div
+                            style={{
+                                background:
+                                    'linear-gradient(to right, rgba(235, 187, 167, 1), rgba(207, 199, 248, 1))'
+                            }}
+                        >
+                            <Timeline
+                                events={[
+                                    { title: 'Discover', time: ['2019-12-01'] },
+                                    { title: 'Deny', time: ['2020-01-02'] },
+                                    {
+                                        title: 'Lock down',
+                                        time: ['2020-01-23']
+                                    },
+                                    { title: 'Open', time: ['2022-12-01'] }
+                                ]}
+                                timeFormat="YYYY-MM-DD"
+                            />
+                        </div>
+                    </CodeExample>
+                </Section>
+
                 <Section title="Icon">
                     <CodeExample>
                         <Icon name="trash" size={2} className="text-danger" />

diff --git a/preview/index.tsx b/preview/index.tsx
@@ -1,19 +1,17 @@
 import { configure, observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { PureComponent } from 'react';
+import { Component } from 'react';
 import { Button, Col, Collapse, Container, Row } from 'react-bootstrap';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { Icon, PageNav } from '../source';
 import { Content } from './content';
 
 configure({ enforceActions: 'never' });
 
 @observer
-export class App extends PureComponent {
-    constructor(props: {}) {
-        super(props);
-
+export class App extends Component {
+    componentDidMount() {
         this.updateMeta();
         window.addEventListener('resize', this.updateMeta);
     }
@@ -68,4 +66,4 @@ export class App extends PureComponent {
     }
 }
 
-render(<App />, document.querySelector('#app'));
+createRoot(document.querySelector('#app')).render(<App />);
diff --git a/source/HorizontalMarquee/index.tsx b/source/HorizontalMarquee/index.tsx
@@ -63,3 +63,5 @@ export const HorizontalMarqueeBox: FC<HorizontalMarqueeProps> = ({
             {children}
         </HorizontalMarquee>
     );
+
+HorizontalMarquee.displayName = 'HorizontalMarquee';
diff --git a/source/Time.tsx b/source/Time.tsx
@@ -0,0 +1,14 @@
+import { FC, TimeHTMLAttributes } from 'react';
+import { formatDate, TimeData } from 'web-utility';
+
+export interface TimeProps
+    extends Omit<TimeHTMLAttributes<HTMLTimeElement>, 'dateTime'> {
+    dateTime: TimeData;
+    format?: string;
+}
+
+export const Time: FC<TimeProps> = ({ dateTime, format, ...props }) => (
+    <time dateTime={new Date(dateTime).toJSON()} {...props}>
+        {formatDate(dateTime, format)}
+    </time>
+);
diff --git a/source/Timeline/index.module.less b/source/Timeline/index.module.less
@@ -0,0 +1,53 @@
+.timeline {
+    position: relative;
+    margin: 0 auto;
+    max-width: 50%;
+    @media (max-width: 991px) {
+        max-width: 100%;
+    }
+    &::after {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 10px;
+        margin-left: -3px;
+        background-color: #fff;
+        width: 3px;
+        content: '';
+    }
+}
+.timelineItem {
+    position: relative;
+    background-color: inherit;
+    width: 100%;
+
+    &::after {
+        position: absolute;
+        top: 18px;
+        right: 1px;
+        z-index: 1;
+        border-radius: 50%;
+        background-color: #fff;
+        width: 17px;
+        height: 17px;
+        content: '';
+    }
+}
+.right {
+    left: auto;
+    padding: 0px 0px 20px 40px;
+
+    &::before {
+        position: absolute;
+        top: 18px;
+        left: 30px;
+        z-index: 1;
+        border: medium solid #fff;
+        border-width: 10px 10px 10px 0;
+        border-color: transparent #fff transparent transparent;
+        content: ' ';
+    }
+    &::after {
+        left: 0;
+    }
+}
diff --git a/source/Timeline/index.tsx b/source/Timeline/index.tsx
@@ -0,0 +1,70 @@
+import { FC, HTMLAttributes } from 'react';
+import { Card } from 'react-bootstrap';
+import { TimeData } from 'web-utility';
+
+import { Nameplate, NameplateProps } from '../Nameplate';
+import { Time } from '../Time';
+import styles from './index.module.less';
+
+export interface TimelineEvent {
+    title: string;
+    summary?: string;
+    time: [TimeData, TimeData?];
+
+    link?: string;
+    people?: NameplateProps[];
+}
+
+export interface TimelineProps extends HTMLAttributes<HTMLOListElement> {
+    events: TimelineEvent[];
+    timeFormat?: string;
+}
+
+/**
+ * @see {@link https://mdbootstrap.com/docs/standard/extended/timeline/#section-timeline-gradient-bg}
+ */
+export const Timeline: FC<TimelineProps> = ({
+    className,
+    events,
+    timeFormat,
+    ...props
+}) => (
+    <ol className={`list-unstyled ${styles.timeline} ${className}`} {...props}>
+        {events.map(({ title, summary, time, link, people }) => (
+            <li
+                key={title as string}
+                className={`position-relative ${styles.timelineItem} ${styles.right}`}
+            >
+                <Card>
+                    <Card.Body className="p-4 d-flex flex-column gap-3">
+                        <h3 className="h5 m-0">
+                            <a
+                                className="text-decoration-none stretched-link"
+                                href={link}
+                            >
+                                {title as string}
+                            </a>
+                        </h3>
+                        <div className="small text-muted d-flex gap-2">
+                            ⏲️
+                            <Time dateTime={time[0]} format={timeFormat} />
+                            {time[1] && '~'}
+                            {time[1] && (
+                                <Time dateTime={time[1]} format={timeFormat} />
+                            )}
+                        </div>
+                        <ul className="list-unstyled m-0">
+                            {people?.map(person => (
+                                <li key={person.name}>
+                                    <Nameplate {...person} />
+                                </li>
+                            ))}
+                        </ul>
+                        <p className="m-0">{summary as string}</p>
+                    </Card.Body>
+                </Card>
+            </li>
+        ))}
+    </ol>
+);
+Timeline.displayName = 'Timeline';
diff --git a/source/UserRank/index.tsx b/source/UserRank/index.tsx
@@ -18,6 +18,8 @@ export interface UserRankViewProps extends RowProps {
 }
 
 export class UserRankView extends PureComponent<UserRankViewProps> {
+    static displayName = 'UserRankView';
+
     renderMedal = (user: UserRank) => (
         <Col key={user.id} as="li">
             <div

diff --git a/source/VerticalMarquee/index.tsx b/source/VerticalMarquee/index.tsx
@@ -24,3 +24,4 @@ export const VerticalMarquee: FC<VerticalMarqueeProps> = ({
         </div>
     </div>
 );
+VerticalMarquee.displayName = 'VerticalMarquee';
diff --git a/source/index.ts b/source/index.ts
@@ -17,7 +17,9 @@ export * from './Select';
 export * from './ShareBox';
 export * from './SpinnerButton';
 export * from './TableSpinner';
+export * from './Time';
 export * from './TimeDistance';
+export * from './Timeline';
 export * from './TypeEcho';
 export * from './UserRank';
 export * from './VerticalMarquee';