feat(demo/ui) : update files demo and add properties table

apps/demo/src/Views/Ui/components/FileCard.tsx

@@ -1,13 +1,72 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
-import { Button, FileCard, Page } from "@prefabs.tech/react-ui";
+import { Button, FileCard, Page, TDataTable } from "@prefabs.tech/react-ui";
 import { useNavigate } from "react-router-dom";
 
-import { Section } from "../../../components/Demo";
+import { CodeBlock, Section } from "../../../components/Demo";
 
 export const FileCardDemo = () => {
   const { i18n, t } = useTranslation("ui");
   const navigate = useNavigate();
 
+  const data = [
+    {
+      id: 1,
+      prop: "file",
+      type: "IFile",
+      default: "-",
+      description: t("fileCard.propertiesDescription.file"),
+    },
+    {
+      id: 2,
+      prop: "locale",
+      type: "string",
+      default: "undefined",
+      description: t("fileCard.propertiesDescription.locale"),
+    },
+    {
+      id: 3,
+      prop: "messages",
+      type: "FileMessages",
+      default: "undefined",
+      description: t("fileCard.propertiesDescription.messages"),
+    },
+    {
+      id: 4,
+      prop: "on[Action]",
+      type: "(file: IFile) => void",
+      default: "undefined",
+      description: t("fileCard.propertiesDescription.actions"),
+    },
+    {
+      id: 5,
+      prop: "renderThumbnail",
+      type: "(file: IFile) => ReactNode",
+      default: "undefined",
+      description: t("fileCard.propertiesDescription.renderThumbnail"),
+    },
+    {
+      id: 6,
+      prop: "showThumbnail",
+      type: "boolean",
+      default: "true",
+      description: t("fileCard.propertiesDescription.showThumbnail"),
+    },
+    {
+      id: 7,
+      prop: "visibleFileDetails",
+      type: "string[]",
+      default: "['originalFileName', 'size', ...]",
+      description: t("fileCard.propertiesDescription.visibleDetails"),
+    },
+    {
+      id: 8,
+      prop: "[action]ButtonProps",
+      type: "ButtonProps",
+      default: "undefined",
+      description: t("fileCard.propertiesDescription.buttonProps"),
+    },
+  ];
+
   return (
     <Page
       title={t("fileCard.title")}
@@ -20,7 +79,8 @@ export const FileCardDemo = () => {
         />
       }
     >
-      <Section>
+      <Section title={t("headers.usage")}>
+        <p>{t("common.usage", { component: "FileCard" })}</p>
         <FileCard
           file={{
             id: 0,
@@ -39,6 +99,91 @@ export const FileCardDemo = () => {
           onArchive={() => {}}
           onDelete={() => {}}
         />
+        <CodeBlock
+          exampleCode={`import { FileCard } from "@prefabs.tech/react-ui";
+
+const myFile = {
+  id: 1,
+  originalFileName: "document.pdf",
+  description: "Quarterly Report",
+  size: "2.4MB",
+  uploadedBy: { givenName: "John", lastName: "Doe" },
+  uploadedAt: Date.now(),
+  downloadCount: 5,
+  lastDownloadedAt: Date.now()
+};
+
+<FileCard
+  file={myFile}
+  locale="en"
+  onDownload={(file) => console.log('Download', file)}
+  onDelete={(file) => console.log('Delete', file)}
+/>`}
+        />
+      </Section>
+
+      <Section
+        title={t("headers.propertiesValue", {
+          value: "FileCard",
+        })}
+      >
+        <TDataTable
+          columns={[
+            {
+              accessorKey: "prop",
+              header: "Properties",
+            },
+            {
+              accessorKey: "type",
+              header: "Type",
+            },
+            {
+              accessorKey: "default",
+              header: "Default",
+            },
+            {
+              accessorKey: "description",
+              header: "Description",
+            },
+          ]}
+          data={data}
+          paginated={false}
+          persistState={false}
+        />
+      </Section>
+
+      <Section title={t("fileCard.typeDefinitions", "Type Definitions")}>
+        <CodeBlock
+          exampleCode={`interface IFile {
+  id: number | string;
+  originalFileName: string;
+  description?: string;
+  size?: number | string;
+  uploadedBy?: { givenName?: string; lastName?: string; email?: string };
+  uploadedAt?: number | string | Date;
+  downloadCount?: number;
+  lastDownloadedAt?: number | string | Date;
+  [key: string]: any;
+}
+
+type FileMessages = {
+  archiveAction?: string;
+  archiveConfirmationHeader?: string;
+  archiveConfirmationMessage?: string;
+  downloadAction?: string;
+  editDescriptionAction?: string;
+  deleteAction?: string;
+  deleteConfirmationHeader?: string;
+  deleteConfirmationMessage?: string;
+  downloadCountHeader?: string;
+  lastDownloadedAtHeader?: string;
+  renameAction?: string;
+  shareAction?: string;
+  uploadedByHeader?: string;
+  uploadedAtHeader?: string;
+  viewAction?: string;
+};`}
+        />
       </Section>
     </Page>
   );

apps/demo/src/Views/Ui/components/FilesList.tsx

@@ -1,13 +1,79 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
-import { Button, FilesList, Page } from "@prefabs.tech/react-ui";
+import { Button, FilesList, Page, TDataTable } from "@prefabs.tech/react-ui";
 import { useNavigate } from "react-router-dom";
 
-import { Section } from "../../../components/Demo";
+import { CodeBlock, Section } from "../../../components/Demo";
 
 export const FilesListDemo = () => {
   const { i18n, t } = useTranslation("ui");
   const navigate = useNavigate();
 
+  const data = [
+    {
+      id: 1,
+      prop: "files",
+      type: "IFile[]",
+      default: "[]",
+      description: t("filesList.propertiesDescription.files"),
+    },
+    {
+      id: 2,
+      prop: "locale",
+      type: "string",
+      default: "undefined",
+      description: t("filesList.propertiesDescription.locale"),
+    },
+    {
+      id: 3,
+      prop: "messages",
+      type: "FileMessages",
+      default: "undefined",
+      description: t("filesList.propertiesDescription.messages"),
+    },
+    {
+      id: 4,
+      prop: "onFile[Action]",
+      type: "(file: IFile) => void",
+      default: "undefined",
+      description: t("filesList.propertiesDescription.actions"),
+    },
+    {
+      id: 5,
+      prop: "renderFileThumbnail",
+      type: "(file: IFile) => ReactNode",
+      default: "undefined",
+      description: t("filesList.propertiesDescription.renderThumbnail"),
+    },
+    {
+      id: 6,
+      prop: "showFileThumbnail",
+      type: "boolean",
+      default: "true",
+      description: t("filesList.propertiesDescription.showThumbnail"),
+    },
+    {
+      id: 7,
+      prop: "visibleFileDetails",
+      type: "string[]",
+      default: "undefined",
+      description: t("filesList.propertiesDescription.visibleDetails"),
+    },
+    {
+      id: 8,
+      prop: "[action]ButtonProps",
+      type: "ButtonProps",
+      default: "undefined",
+      description: t("filesList.propertiesDescription.buttonProps"),
+    },
+    {
+      id: 9,
+      prop: "[action]ConfirmationProps",
+      type: "ConfirmationModalProps",
+      default: "undefined",
+      description: t("filesList.propertiesDescription.confirmationProps"),
+    },
+  ];
+
   return (
     <Page
       title={t("filesList.title")}
@@ -20,7 +86,8 @@ export const FilesListDemo = () => {
         />
       }
     >
-      <Section>
+      <Section title={t("headers.usage")}>
+        <p>{t("common.usage", { component: "FilesList" })}</p>
         <FilesList
           files={[
             {
@@ -60,6 +127,91 @@ export const FilesListDemo = () => {
           onFileDownload={() => {}}
           onFileView={() => {}}
         />
+        <CodeBlock
+          exampleCode={`import { FilesList } from "@prefabs.tech/react-ui";
+
+const myFiles = [
+  { 
+    id: 1, 
+    originalFileName: "document.pdf", 
+    uploadedBy: { givenName: "John", lastName: "Doe" },
+    uploadedAt: Date.now(),
+    downloadCount: 5
+  },
+  // ... more files
+];
+
+<FilesList
+  files={myFiles}
+  locale="en"
+  onFileDownload={(file) => console.log('Download', file)}
+  onFileView={(file) => console.log('View', file)}
+/>`}
+        />
+      </Section>
+
+      <Section
+        title={t("headers.propertiesValue", {
+          value: "FilesList",
+        })}
+      >
+        <TDataTable
+          columns={[
+            {
+              accessorKey: "prop",
+              header: "Properties",
+            },
+            {
+              accessorKey: "type",
+              header: "Type",
+            },
+            {
+              accessorKey: "default",
+              header: "Default",
+            },
+            {
+              accessorKey: "description",
+              header: "Description",
+            },
+          ]}
+          data={data}
+          paginated={false}
+          persistState={false}
+        />
+      </Section>
+
+      <Section title={t("filesList.typeDefinitions", "Type Definitions")}>
+        <CodeBlock
+          exampleCode={`interface IFile {
+  id: number | string;
+  originalFileName: string;
+  description?: string;
+  size?: number | string;
+  uploadedBy?: { givenName?: string; lastName?: string; email?: string };
+  uploadedAt?: number | string | Date;
+  downloadCount?: number;
+  lastDownloadedAt?: number | string | Date;
+  [key: string]: any;
+}
+
+type FileMessages = {
+  archiveAction?: string;
+  archiveConfirmationHeader?: string;
+  archiveConfirmationMessage?: string;
+  downloadAction?: string;
+  editDescriptionAction?: string;
+  deleteAction?: string;
+  deleteConfirmationHeader?: string;
+  deleteConfirmationMessage?: string;
+  downloadCountHeader?: string;
+  lastDownloadedAtHeader?: string;
+  renameAction?: string;
+  shareAction?: string;
+  uploadedByHeader?: string;
+  uploadedAtHeader?: string;
+  viewAction?: string;
+};`}
+        />
       </Section>
     </Page>
   );