feat(flat-components): design RoomDetailPage module in storybook

packages/flat-components/src/components/InviteModal/index.tsx

@@ -12,7 +12,7 @@ const onlySuffixTimeFormat = format("HH:mm");
 export interface InviteModalProps {
     visible: boolean;
     room: RoomInfo;
-    weeks?: Week[];
+    weeks: Week[];
     userName: string;
     onCopy: (text: string) => void;
     onCancel: () => void;

packages/flat-components/src/components/RoomDetailPage/RoomDetailBody/RoomDetailBody.stories.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { RoomDetailBody, RoomDetailBodyProps } from ".";
+import { RoomStatus, RoomType } from "../../../types/room";
+
+const storyMeta: Meta = {
+    title: "RoomDetailPage/RoomDetailBody",
+    component: RoomDetailBody,
+};
+
+export default storyMeta;
+
+export const Overview: Story<RoomDetailBodyProps> = args => (
+    <div className="vh-75 mw8-ns">
+        <RoomDetailBody {...args} />
+    </div>
+);
+Overview.args = {
+    roomInfo: {
+        roomUUID: "roomUUID",
+        ownerUUID: "ownerUUID",
+        title: "RoomDetailTitle",
+        roomType: RoomType.BigClass,
+        roomStatus: RoomStatus.Started,
+        beginTime: 1619771930756,
+        endTime: 1619775530756,
+    },
+};

packages/flat-components/src/components/RoomDetailPage/RoomDetailBody/index.less

@@ -0,0 +1,95 @@
+.room-detail-body {
+    min-width: 560px;
+    max-width: 840px;
+    margin: 0 auto;
+    padding-top: 65px;
+    overflow-y: auto;
+}
+
+.room-detail-body-content {
+    margin: 0 auto;
+}
+
+.room-detail-body-content-time-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.room-detail-body-content-time {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.room-detail-body-content-time-number {
+    font-size: 24px;
+    font-weight: 500;
+    color: #444e60;
+    line-height: 36px;
+}
+
+.room-detail-body-content-time-date {
+    font-size: 14px;
+    font-weight: 400;
+    color: #444e60;
+    line-height: 21px;
+}
+
+.room-detail-body-content-time-mid {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 0 32px;
+}
+
+.room-detail-body-content-time-mid-during {
+    width: 68px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 7px;
+    border-radius: 100px;
+    font-size: 12px;
+    background: #eef0f6;
+}
+
+.room-detail-body-content-time-mid-state {
+    margin-top: 6px;
+    line-height: 21px;
+    color: #e99434;
+}
+
+.room-detail-body-content-cut-line {
+    min-width: 560px;
+    max-width: 840px;
+    height: 1px;
+    margin-top: 24px;
+    margin-bottom: 24px;
+    background-color: #dbe1ea;
+}
+
+.room-detail-body-content-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 8px;
+
+    & span {
+        font-size: 12px;
+        font-weight: 400;
+        color: #7a7b7c;
+        margin-left: 4px;
+    }
+
+    & img {
+        margin-top: -2px;
+    }
+}
+
+.room-detail-body-content-info-right {
+    font-size: 12px;
+    color: #7a7b7c;
+}

packages/flat-components/src/components/RoomDetailPage/RoomDetailBody/index.tsx

@@ -0,0 +1,81 @@
+import homeIconGraySVG from "./icons/home-icon-gray.svg";
+import roomTypeSVG from "./icons/room-type.svg";
+import "./index.less";
+
+import React, { useMemo } from "react";
+import { formatTime, roomTypeLocale } from "../../../utils/room";
+import { formatDistanceStrict } from "date-fns";
+import { zhCN } from "date-fns/locale";
+import { RoomInfo } from "../../../types/room";
+import { RoomStatusElement } from "../../RoomStatusElement";
+
+export interface RoomDetailBodyProps {
+    roomInfo: RoomInfo;
+}
+
+export const RoomDetailBody: React.FC<RoomDetailBodyProps> = ({ roomInfo }) => {
+    const { beginTime, endTime } = roomInfo;
+
+    const formattedBeginTime = useMemo(() => formatTime(beginTime), [beginTime]);
+    const formattedEndTime = useMemo(() => formatTime(endTime), [endTime]);
+
+    return (
+        <div className="room-detail-body">
+            <div className="room-detail-body-content">
+                <div className="room-detail-body-content-time-container">
+                    {formattedBeginTime && (
+                        <div className="room-detail-body-content-time">
+                            <div className="room-detail-body-content-time-number">
+                                {formattedBeginTime.time}
+                            </div>
+                            <div className="room-detail-body-content-time-date">
+                                {formattedBeginTime.date}
+                            </div>
+                        </div>
+                    )}
+                    {roomInfo.endTime && roomInfo.beginTime && (
+                        <div className="room-detail-body-content-time-mid">
+                            <div className="room-detail-body-content-time-mid-during">
+                                {formatDistanceStrict(roomInfo.endTime, roomInfo.beginTime, {
+                                    locale: zhCN,
+                                })}
+                            </div>
+                            <div className="room-detail-body-content-time-mid-state">
+                                <RoomStatusElement room={roomInfo} />
+                            </div>
+                        </div>
+                    )}
+                    {formattedEndTime && (
+                        <div className="room-detail-body-content-time">
+                            <div className="room-detail-body-content-time-number">
+                                {formattedEndTime.time}
+                            </div>
+                            <div className="room-detail-body-content-time-date">
+                                {formattedEndTime.date}
+                            </div>
+                        </div>
+                    )}
+                </div>
+                <div className="room-detail-body-content-cut-line" />
+                <div className="room-detail-body-content-info">
+                    <div>
+                        <img src={homeIconGraySVG} />
+                        <span>房间号</span>
+                    </div>
+                    <div className="room-detail-body-content-info-right">
+                        {roomInfo.periodicUUID || roomInfo.roomUUID}
+                    </div>
+                </div>
+                <div className="room-detail-body-content-info">
+                    <div>
+                        <img src={roomTypeSVG} />
+                        <span>房间类型</span>
+                    </div>
+                    <div className="room-detail-body-content-info-right">
+                        {roomTypeLocale(roomInfo.roomType)}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};

packages/flat-components/src/components/RoomDetailPage/RoomDetailFooter/RoomDetailFooter.stories.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { RoomDetailFooter, RoomDetailFooterProps } from ".";
+import { RoomStatus, RoomType } from "../../../types/room";
+import { BrowserRouter as Router } from "react-router-dom";
+
+const storyMeta: Meta = {
+    title: "RoomDetailPage/RoomDetailFooter",
+    component: RoomDetailFooter,
+};
+
+export default storyMeta;
+
+export const Overview: Story<RoomDetailFooterProps> = args => (
+    <Router>
+        <div className="vh-75 mw8-ns">
+            <RoomDetailFooter {...args} />
+        </div>
+    </Router>
+);
+Overview.args = {
+    room: {
+        roomUUID: "roomUUID",
+        ownerUUID: "ownerUUID",
+        title: "RoomDetailTitle",
+        roomType: RoomType.BigClass,
+        roomStatus: RoomStatus.Started,
+        beginTime: 1619771930756,
+        endTime: 1619775530756,
+    },
+    weeks: [1, 3, 5],
+    routePath: "/example",
+    isCreator: true,
+    userName: "Flat",
+    onJoinRoom: () => {},
+    onReplayRoom: () => {},
+    onCancelRoom: () => {},
+};

packages/flat-components/src/components/RoomDetailPage/RoomDetailFooter/index.less

@@ -0,0 +1,9 @@
+.room-detail-footer-btn-container {
+    min-width: 560px;
+    max-width: 840px;
+    margin: 0 auto;
+}
+
+.room-detail-footer-btn {
+    margin-left: 8px;
+}