@infinilabs/doc-detail 0.0.0 → 0.0.2

package/src/components/DocDetail/index.tsx

@@ -1,68 +1,71 @@
-import { Button, Card, Typography } from "antd";
-import { SquareArrowOutUpRight } from "lucide-react";
-import type { FC, HTMLAttributes } from "react";
+import { Typography } from "antd";
+import {
+  ChevronRight,
+  Dot,
+  Ellipsis,
+  Minus,
+  SquareArrowOutUpRight,
+} from "lucide-react";
+import { motion } from "motion/react";
+
+import { useState, type FC, type HTMLAttributes, type ReactNode } from "react";
 import Preview from "./components/Preview";
 import AIInterpretation from "./components/AIInterpretation";
 import { cn } from "@/utils/cn";
+import ActionButton from "../ActionButton";
 
 const { Text } = Typography;
 
+export type MetadataContentType =
+  | "image"
+  | "video"
+  | "markdown"
+  | "pdf"
+  | "docx"
+  | "pptx"
+  | "xlsx";
+
 export interface DocDetailProps extends HTMLAttributes<HTMLDivElement> {
   data: {
-    source: {
-      type: string;
-      name: string;
-      id: string;
+    id?: string;
+    created?: ReactNode;
+    updated?: ReactNode;
+    _system?: {
+      owner_id?: string;
+      parent_path?: string;
+      tenant_id?: string;
     };
-    category: string;
-    categories: string[];
-    cover: string;
-    title: string;
-    summary: string;
-    type: string;
-    lang: string;
-    content: string;
-    icon: string;
-    thumbnail: string;
-    tags: string[];
-    url: string;
-    size: number;
-    owner: {
-      avatar: string;
-      username: string;
-      userid: string;
+    metadata?: {
+      ai_insights?: string;
+      colors?: string[];
+      content_type?: MetadataContentType;
+      height?: number;
+      mime_type?: string;
+      users?: null | unknown;
+      width?: number;
     };
-    metadata: {
-      version: string;
-      department: string;
-      last_reviewed: string;
-      file_extension: string;
-      icon_link: string;
-      has_thumbnail: boolean;
-      kind: string;
-      parents: string[];
-      properties: Record<string, string>;
-      spaces: string[];
-      starred: boolean;
-      driveId: string;
-      thumbnail_link: string;
-      video_media_metadata?: {
-        durationMillis: string;
-        width: number;
-        height: number;
-      };
-      image_media_metadata?: {
-        width: number;
-        height: number;
-      };
+    source?: {
+      type?: string;
+      name?: string;
+      id?: string;
     };
-    last_updated_by: {
-      user: {
-        avatar: string;
-        username: string;
-        userid: string;
-      };
-      timestamp: string;
+    type?: string;
+    category?: string;
+    title?: string;
+    summary?: string;
+    icon?: string;
+    thumbnail?: string;
+    cover?: string;
+    tags?: string[];
+    url?: string;
+    size?: ReactNode;
+    owner: {
+      type?: string;
+      id?: string;
+      icon?: string;
+      title?: string;
+      subtitle?: string;
+      cover?: string;
     };
   };
   i18n?: {
@@ -79,97 +82,117 @@ export interface DocDetailProps extends HTMLAttributes<HTMLDivElement> {
       size?: string;
     };
   };
+  extraButtons?: ReactNode[];
 }
 
 const DocDetail: FC<DocDetailProps> = (props) => {
-  const { data, i18n, className, ...rest } = props;
+  const { data, i18n, extraButtons, className, ...rest } = props;
 
-  const extraInfo = [
-    {
-      label: i18n?.labels?.updatedAt ?? "Updated At",
-      value: data?.last_updated_by?.timestamp,
-    },
+  const [visibleMore, setVisibleMore] = useState(false);
+
+  const moreInfo = [
     {
       label: i18n?.labels?.type ?? "Type",
       value: data?.type,
     },
-    {
-      label: i18n?.labels?.createdBy ?? "Created By",
-      value: data?.owner?.username,
-    },
     {
       label: i18n?.labels?.size ?? "Size",
       value: data?.size,
     },
     {
-      label: i18n?.labels?.updatedBy ?? "Updated By",
-      value: data?.last_updated_by?.user.username,
+      label: i18n?.labels?.createdBy ?? "Created At",
+      value: data?.created,
+    },
+    {
+      label: i18n?.labels?.createdBy ?? "Created By",
+      value: data?.owner?.title,
+    },
+    {
+      label: i18n?.labels?.updatedAt ?? "Updated At",
+      value: data?.updated,
     },
   ];
 
   return (
-    <div className={cn("flex flex-col h-full", className)} {...rest}>
-      <div className="flex flex-col flex-1 mb-6 overflow-hidden">
-        <div>
-          <img src={data?.icon} className="size-6 mr-3 float-left" />
+    <div
+      className={cn("flex flex-col h-full overflow-hidden", className)}
+      {...rest}
+    >
+      <div>
+        <img src={data?.icon} className="size-6 mr-3 float-left" />
 
-          <div className="text-4.5/6 text-primary">{data?.title}</div>
-        </div>
+        <div className="text-4.5/6 text-primary">{data?.title}</div>
+      </div>
+
+      <div className="flex items-center justify-between my-2">
+        <Text
+          type="secondary"
+          className="inline-flex items-center gap-0.5 text-3"
+        >
+          <div>{data?.source?.name ?? "-"}</div>
+          <ChevronRight className="size-3" />
+          <div>{data?.category ?? "-"}</div>
+          <Minus className="size-3 rotate-90" />
+          <div>{data?.owner?.title ?? "-"}</div>
+          <Dot className="size-3" />
+          <div>{data?.updated ?? "-"}</div>
 
-        <Text type="secondary" className="block my-3 text-3">
-          <span>{data?.source?.name}</span>
-          <span> &gt; </span>
-          <span>{data?.category}</span>
-          <span> | </span>
-          <span>{data?.owner?.username}</span>
-          <span> · </span>
-          <span>{data?.last_updated_by?.timestamp}</span>
+          <Ellipsis
+            className="pl-2 min-w-3 size-3 hover:text-primary transition cursor-pointer"
+            onClick={() => {
+              setVisibleMore((prev) => !prev);
+            }}
+          />
         </Text>
 
-        <div className="flex gap-2 mb-6">
-          <Button
-            color="primary"
-            variant="filled"
-            shape="round"
-            icon={<SquareArrowOutUpRight className="size-4" />}
+        <div className="inline-flex gap-2">
+          {extraButtons}
+
+          <ActionButton
+            icon={<SquareArrowOutUpRight />}
             onClick={() => {
               window.open(data.url);
             }}
           >
             {i18n?.buttons?.openSource ?? "Open Source"}
-          </Button>
-        </div>
-
-        <div className="flex flex-col gap-6 flex-1 overflow-auto">
-          <Preview {...props} />
-
-          <AIInterpretation {...props} />
+          </ActionButton>
         </div>
       </div>
 
-      <Card
-        classNames={{
-          root: "border-border",
-          body: "flex flex-wrap gap-row-2 py-4!",
+      <motion.div
+        className="bg-black/3 dark:bg-white/4 rounded-lg overflow-hidden"
+        initial={false}
+        animate={{
+          height: visibleMore ? "auto" : 0,
+          opacity: visibleMore ? 1 : 0,
+          marginBottom: visibleMore ? "1rem" : 0,
         }}
       >
-        {extraInfo.map((item) => {
-          const { label, value } = item;
-
-          return (
-            <div
-              key={label}
-              className="w-1/2 inline-flex items-center <sm:w-full"
-            >
-              <Text type="secondary" className="w-24">
-                {label}
-              </Text>
-
-              <span>{value ?? "-"}</span>
-            </div>
-          );
-        })}
-      </Card>
+        <div className="flex flex-wrap gap-row-2 p-4">
+          {moreInfo.map((item) => {
+            const { label, value } = item;
+
+            return (
+              <div
+                key={label}
+                className="w-1/2 inline-flex items-center <sm:w-full"
+              >
+                <Text type="secondary" className="w-24">
+                  {label}
+                </Text>
+
+                <span className="text-3.5">{value ?? "-"}</span>
+              </div>
+            );
+          })}
+        </div>
+      </motion.div>
+
+      <div className="flex flex-col gap-4 flex-1 overflow-auto">
+        <Preview {...props} />
+
+        <AIInterpretation {...props} />
+      </div>
     </div>
   );
 };

package/src/components/index.tsx

@@ -1,4 +1,5 @@
 import "virtual:uno.css";
 import DocDetail from "./DocDetail";
+import ActionButton from "./ActionButton";
 
-export { DocDetail };
+export { DocDetail, ActionButton };