From 46fe89038602be81f6a8b86312bdfbcc7ec02072 Mon Sep 17 00:00:00 2001 From: Utsav Luintel Date: Fri, 30 Jan 2026 11:06:57 +0545 Subject: [PATCH 1/4] feat(demo/file-card): update demo, add properties table --- .../demo/src/Views/Ui/components/FileCard.tsx | 151 +++++++++++++++++- apps/demo/src/locales/en/ui.json | 13 +- apps/demo/src/locales/fr/ui.json | 17 +- 3 files changed, 174 insertions(+), 7 deletions(-) diff --git a/apps/demo/src/Views/Ui/components/FileCard.tsx b/apps/demo/src/Views/Ui/components/FileCard.tsx index 13eb047c0..d6a8e0002 100644 --- a/apps/demo/src/Views/Ui/components/FileCard.tsx +++ b/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 ( { /> } > -
+
+

{t("common.usage", { component: "FileCard" })}

{ onArchive={() => {}} onDelete={() => {}} /> + console.log('Download', file)} + onDelete={(file) => console.log('Delete', file)} +/>`} + /> +
+ +
+ +
+ +
+
); diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json index 1db0a957c..1152c88da 100644 --- a/apps/demo/src/locales/en/ui.json +++ b/apps/demo/src/locales/en/ui.json @@ -273,7 +273,18 @@ "title": "Export button" }, "fileCard": { - "title": "File card" + "propertiesDescription": { + "actions": "Callbacks for actions (Download, View, Share, Archive, Delete, EditDescription).", + "buttonProps": "Props passed to specific action buttons.", + "file": "The file object containing metadata.", + "locale": "Locale string for formatting dates.", + "messages": "Custom labels for headers and actions.", + "renderThumbnail": "Custom renderer for the file thumbnail.", + "showThumbnail": "Whether to display the thumbnail icon.", + "visibleDetails": "Array of keys to determine which details to display." + }, + "title": "File card", + "typeDefinitions": "Type definitions" }, "filesList": { "title": "Files list" diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json index 8b8a65ba4..ce01ce615 100644 --- a/apps/demo/src/locales/fr/ui.json +++ b/apps/demo/src/locales/fr/ui.json @@ -114,7 +114,7 @@ "label": "Label (fr)", "locale": "Locales support (fr)", "notFound": "Missing country code (fr)", - "positions": { + "positions": { "left": "Left (default) (fr)", "right": "Right (fr)", "rightEdge": "Right edge (fr)" @@ -165,7 +165,7 @@ "single": "Select a country... (fr)" }, "propertiesDescription": { - "autoSortOptions":"By default, options are sorted alphabetically. If false, countries are sorted by priority in the order groups → favorites → include → fallback-locale translations, preserving the defined order. (fr)", + "autoSortOptions": "By default, options are sorted alphabetically. If false, countries are sorted by priority in the order groups → favorites → include → fallback-locale translations, preserving the defined order. (fr)", "data": "Custom country data to overwrite existing entries or add new ones. (fr)", "exclude": "An array of country codes to remove from the list. (fr)", "fallbackLocale": "Locale used when active locale translation is missing. (fr)", @@ -273,7 +273,18 @@ "title": "Export button (fr)" }, "fileCard": { - "title": "File card (fr)" + "propertiesDescription": { + "actions": "Callbacks for actions (Download, View, Share, Archive, Delete, EditDescription). (fr)", + "buttonProps": "Props passed to specific action buttons. (fr)", + "file": "The file object containing metadata. (fr)", + "locale": "Locale string for formatting dates. (fr)", + "messages": "Custom labels for headers and actions. (fr)", + "renderThumbnail": "Custom renderer for the file thumbnail. (fr)", + "showThumbnail": "Whether to display the thumbnail icon. (fr)", + "visibleDetails": "Array of keys to determine which details to display. (fr)" + }, + "title": "File card (fr)", + "typeDefinitions": "Type definitions (fr)" }, "filesList": { "title": "Files list (fr)" From 2ad5555698cbbc374937c0a0ccf7480969ed9118 Mon Sep 17 00:00:00 2001 From: Utsav Luintel Date: Fri, 30 Jan 2026 11:29:06 +0545 Subject: [PATCH 2/4] feat(demo/files-list): add prop table, update demo --- .../src/Views/Ui/components/FilesList.tsx | 158 +++++++++++++++++- apps/demo/src/locales/en/ui.json | 14 +- apps/demo/src/locales/fr/ui.json | 14 +- 3 files changed, 181 insertions(+), 5 deletions(-) diff --git a/apps/demo/src/Views/Ui/components/FilesList.tsx b/apps/demo/src/Views/Ui/components/FilesList.tsx index 93d7ac8e1..69989b3b5 100644 --- a/apps/demo/src/Views/Ui/components/FilesList.tsx +++ b/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 ( { /> } > -
+
+

{t("common.usage", { component: "FilesList" })}

{ onFileDownload={() => {}} onFileView={() => {}} /> + console.log('Download', file)} + onFileView={(file) => console.log('View', file)} +/>`} + /> +
+ +
+ +
+ +
+
); diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json index 1152c88da..f27325e93 100644 --- a/apps/demo/src/locales/en/ui.json +++ b/apps/demo/src/locales/en/ui.json @@ -287,7 +287,19 @@ "typeDefinitions": "Type definitions" }, "filesList": { - "title": "Files list" + "propertiesDescription": { + "actions": "Callbacks for actions (download, view, share, archive, delete, edit description).", + "buttonProps": "Props passed to specific action buttons.", + "confirmationProps": "Props for archive/delete confirmation modals.", + "files": "Array of file objects to display.", + "locale": "Locale string for formatting dates.", + "messages": "Custom labels for headers and actions.", + "renderThumbnail": "Custom renderer for file thumbnails.", + "showThumbnail": "Whether to display thumbnails for the files.", + "visibleDetails": "Array of keys to determine which details to display." + }, + "title": "Files list", + "typeDefinitions": "Type definitions" }, "filesPresentation": { "title": "Files presentation" diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json index ce01ce615..3454d559d 100644 --- a/apps/demo/src/locales/fr/ui.json +++ b/apps/demo/src/locales/fr/ui.json @@ -287,7 +287,19 @@ "typeDefinitions": "Type definitions (fr)" }, "filesList": { - "title": "Files list (fr)" + "propertiesDescription": { + "actions": "Callbacks for actions (download, view, share, archive, delete, edit description). (fr)", + "buttonProps": "Props passed to specific action buttons. (fr)", + "confirmationProps": "Props for archive/delete confirmation modals. (fr)", + "files": "Array of file objects to display. (fr)", + "locale": "Locale string for formatting dates. (fr)", + "messages": "Custom labels for headers and actions. (fr)", + "renderThumbnail": "Custom renderer for file thumbnails. (fr)", + "showThumbnail": "Whether to display thumbnails for the files. (fr)", + "visibleDetails": "Array of keys to determine which details to display. (fr)" + }, + "title": "Files list (fr)", + "typeDefinitions": "Type definitions (fr)" }, "filesPresentation": { "title": "Files presentation (fr)" From d0a9748da0efb7591af3b239473f0b525f28af52 Mon Sep 17 00:00:00 2001 From: Utsav Luintel Date: Fri, 30 Jan 2026 13:30:52 +0545 Subject: [PATCH 3/4] feat(demo/files-presentation): update demo and add props table --- .../Views/Ui/components/FilesPresentation.tsx | 138 +++++++++++++++++- apps/demo/src/locales/en/ui.json | 12 +- apps/demo/src/locales/fr/ui.json | 12 +- 3 files changed, 157 insertions(+), 5 deletions(-) diff --git a/apps/demo/src/Views/Ui/components/FilesPresentation.tsx b/apps/demo/src/Views/Ui/components/FilesPresentation.tsx index 7ec04292e..bcd6c8e63 100644 --- a/apps/demo/src/Views/Ui/components/FilesPresentation.tsx +++ b/apps/demo/src/Views/Ui/components/FilesPresentation.tsx @@ -1,13 +1,70 @@ import { useTranslation } from "@prefabs.tech/react-i18n"; -import { Button, FilesPresentation, Page } from "@prefabs.tech/react-ui"; +import { + Button, + FilesPresentation, + 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 FilesPresentationDemo = () => { const { i18n, t } = useTranslation("ui"); const navigate = useNavigate(); + const data = [ + { + id: 1, + prop: "files", + type: "IFile[]", + default: "[]", + description: t("filesPresentation.propertiesDescription.files"), + }, + { + id: 2, + prop: "listProps", + type: "Partial", + default: "undefined", + description: t("filesPresentation.propertiesDescription.listProps"), + }, + { + id: 3, + prop: "locale", + type: "string", + default: "undefined", + description: t("filesPresentation.propertiesDescription.locale"), + }, + { + id: 4, + prop: "onFile[Action]", + type: "(file: IFile) => void", + default: "undefined", + description: t("filesPresentation.propertiesDescription.actions"), + }, + { + id: 5, + prop: "presentation", + type: '"list" | "table"', + default: '"list"', + description: t("filesPresentation.propertiesDescription.presentation"), + }, + { + id: 6, + prop: "tableProps", + type: "Partial", + default: "undefined", + description: t("filesPresentation.propertiesDescription.tableProps"), + }, + { + id: 7, + prop: "visibleFileDetails", + type: "string[]", + default: "undefined", + description: t("filesPresentation.propertiesDescription.visibleDetails"), + }, + ]; + return ( { /> } > -
+
+

{t("common.usage", { component: "FilesPresentation" })}

{ }, ]} /> + console.log(file)} +/> + +`} + /> +
+ +
+ +
+ +
+ ; + locale?: string; + messages?: TableMessages; + onFileArchive?: (file: IFile) => void; + onFileDownload?: (file: IFile) => void; + onFileDelete?: (file: IFile) => void; + onEditDescription?: (file: IFile) => void; + onFileShare?: (file: IFile) => void; + onFileView?: (file: IFile) => void; + visibleFileDetails?: string[]; + listProps?: Partial>; + tableProps?: Partial>; +}`} + />
); diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json index f27325e93..60f6ae04d 100644 --- a/apps/demo/src/locales/en/ui.json +++ b/apps/demo/src/locales/en/ui.json @@ -302,7 +302,17 @@ "typeDefinitions": "Type definitions" }, "filesPresentation": { - "title": "Files presentation" + "propertiesDescription": { + "actions": "Callbacks for actions (download, view, archive, delete, share, edit description).", + "files": "Array of file objects to display.", + "listProps": "Props passed specifically to the underlying FilesList component when in list mode.", + "locale": "Locale string for formatting dates.", + "presentation": "Determines the layout mode: 'list' (grid of cards) or 'table'.", + "tableProps": "Props passed specifically to the underlying FilesTable component when in table mode.", + "visibleDetails": "Array of keys to determine which columns (table) or details (list) to display." + }, + "title": "Files presentation", + "typeDefinitions": "Type definitions" }, "table": { "confirmation": { diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json index 3454d559d..645b244c1 100644 --- a/apps/demo/src/locales/fr/ui.json +++ b/apps/demo/src/locales/fr/ui.json @@ -302,7 +302,17 @@ "typeDefinitions": "Type definitions (fr)" }, "filesPresentation": { - "title": "Files presentation (fr)" + "propertiesDescription": { + "actions": "Callbacks for actions (download, view, archive, delete, share, edit description). (fr)", + "files": "Array of file objects to display. (fr)", + "listProps": "Props passed specifically to the underlying FilesList component when in list mode. (fr)", + "locale": "Locale string for formatting dates. (fr)", + "presentation": "Determines the layout mode: 'list' (grid of cards) or 'table'. (fr)", + "tableProps": "Props passed specifically to the underlying FilesTable component when in table mode. (fr)", + "visibleDetails": "Array of keys to determine which columns (table) or details (list) to display. (fr)" + }, + "title": "Files presentation (fr)", + "typeDefinitions": "Type definitions (fr)" }, "table": { "confirmation": { From 561d6401c0688082bb4ad5f8cff89d0980dbc1ec Mon Sep 17 00:00:00 2001 From: Utsav Luintel Date: Fri, 30 Jan 2026 13:48:01 +0545 Subject: [PATCH 4/4] feat(demo/files-table): update demo and add props table --- .../src/Views/Ui/components/FilesTable.tsx | 164 +++++++++++++++++- apps/demo/src/locales/en/ui.json | 16 +- apps/demo/src/locales/fr/ui.json | 16 +- 3 files changed, 189 insertions(+), 7 deletions(-) diff --git a/apps/demo/src/Views/Ui/components/FilesTable.tsx b/apps/demo/src/Views/Ui/components/FilesTable.tsx index 307ce4525..f8480d645 100644 --- a/apps/demo/src/Views/Ui/components/FilesTable.tsx +++ b/apps/demo/src/Views/Ui/components/FilesTable.tsx @@ -1,13 +1,79 @@ import { useTranslation } from "@prefabs.tech/react-i18n"; -import { Button, FilesTable, Page } from "@prefabs.tech/react-ui"; +import { Button, FilesTable, 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 FilesTableDemo = () => { const { i18n, t } = useTranslation("ui"); const navigate = useNavigate(); + const data = [ + { + id: 1, + prop: "columns", + type: "ColumnDef[]", + default: "[]", + description: t("filesTable.propertiesDescription.columns"), + }, + { + id: 2, + prop: "fetchFiles", + type: "(args: TRequestJSON) => void", + default: "undefined", + description: t("filesTable.propertiesDescription.fetchFiles"), + }, + { + id: 3, + prop: "files", + type: "IFile[]", + default: "[]", + description: t("filesTable.propertiesDescription.files"), + }, + { + id: 4, + prop: "isLoading", + type: "boolean", + default: "false", + description: t("filesTable.propertiesDescription.isLoading"), + }, + { + id: 5, + prop: "locale", + type: "string", + default: "undefined", + description: t("filesTable.propertiesDescription.locale"), + }, + { + id: 6, + prop: "messages", + type: "TableMessages", + default: "undefined", + description: t("filesTable.propertiesDescription.messages"), + }, + { + id: 7, + prop: "onFile[Action]", + type: "(file: IFile) => void", + default: "undefined", + description: t("filesTable.propertiesDescription.actions"), + }, + { + id: 8, + prop: "totalRecords", + type: "number", + default: "undefined", + description: t("filesTable.propertiesDescription.totalRecords"), + }, + { + id: 9, + prop: "visibleColumns", + type: "string[]", + default: '["originalFileName", "uploadedBy", "uploadedAt", "actions"]', + description: t("filesTable.propertiesDescription.visibleColumns"), + }, + ]; + return ( { /> } > -
+
+

{t("common.usage", { component: "FilesTable" })}

{}} onFileArchive={() => {}} @@ -71,6 +138,97 @@ export const FilesTableDemo = () => { itemsPerPageControlLabel: t("filesTable.pagination.rowsPerPage"), }} /> + handleDownload(file)} + onFileDelete={(file) => handleDelete(file)} + fetchFiles={(requestParams) => loadData(requestParams)} + totalRecords={100} + isLoading={loading} +/>`} + /> +
+ +
+ +
+ +
+ , "data" | "visibleColumns" | "fetchData"> +> & { + files: Array; + locale?: string; + messages?: TableMessages; + visibleColumns?: string[]; + fetchFiles?: (args: TRequestJSON) => void; + onFileArchive?: (file: IFile) => void; + onFileDownload?: (file: IFile) => void; + onFileDelete?: (file: IFile) => void; + onEditDescription?: (file: IFile) => void; + onFileShare?: (file: IFile) => void; + onFileView?: (file: IFile) => void; +};`} + />
); diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json index 60f6ae04d..1d8fde788 100644 --- a/apps/demo/src/locales/en/ui.json +++ b/apps/demo/src/locales/en/ui.json @@ -240,11 +240,23 @@ "title": "Editable title" }, "filesTable": { - "title": "Files table", "pagination": { "pageControl": "Go to page", "rowsPerPage": "Items per page" - } + }, + "propertiesDescription": { + "actions": "Callbacks for row actions: archive, download, delete, share, view, edit description.", + "columns": "Additional custom columns or overrides for default columns.", + "fetchFiles": "Callback for server-side pagination, sorting, and filtering.", + "files": "Array of file objects to display in the table.", + "isLoading": "Whether the table is currently loading data.", + "locale": "Locale string for date and number formatting.", + "messages": "Custom labels for headers, empty states, and action buttons.", + "totalRecords": "Total count of records for server-side pagination.", + "visibleColumns": "Array of keys determining which columns to render." + }, + "title": "Files table", + "typeDefinitions": "Type definitions" }, "gridContainer": { "title": "Grid container" diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json index 645b244c1..a0cbd0798 100644 --- a/apps/demo/src/locales/fr/ui.json +++ b/apps/demo/src/locales/fr/ui.json @@ -240,11 +240,23 @@ "title": "Editable title (fr)" }, "filesTable": { - "title": "Files table (fr)", "pagination": { "pageControl": "Go to page (fr)", "rowsPerPage": "Items per page (fr)" - } + }, + "propertiesDescription": { + "actions": "Callbacks for row actions: archive, download, delete, share, view, edit description. (fr)", + "columns": "Additional custom columns or overrides for default columns. (fr)", + "fetchFiles": "Callback for server-side pagination, sorting, and filtering. (fr)", + "files": "Array of file objects to display in the table. (fr)", + "isLoading": "Whether the table is currently loading data. (fr)", + "locale": "Locale string for date and number formatting. (fr)", + "messages": "Custom labels for headers, empty states, and action buttons. (fr)", + "totalRecords": "Total count of records for server-side pagination. (fr)", + "visibleColumns": "Array of keys determining which columns to render. (fr)" + }, + "title": "Files table (fr)", + "typeDefinitions": "Type definitions (fr)" }, "gridContainer": { "title": "Grid container (fr)"