From f1fa5aeda52f224a909c33010cee88e63a917b02 Mon Sep 17 00:00:00 2001 From: Bishal Shrestha Date: Mon, 28 Jul 2025 17:28:22 +0545 Subject: [PATCH 01/11] feat: add example for export button --- .../Views/Ui/components/Button/components.tsx | 2 +- .../src/Views/Ui/components/ExportButton.tsx | 86 ++++++++++++++++++- 2 files changed, 84 insertions(+), 4 deletions(-) diff --git a/apps/demo/src/Views/Ui/components/Button/components.tsx b/apps/demo/src/Views/Ui/components/Button/components.tsx index 2ac6913b3..6a7e7c367 100644 --- a/apps/demo/src/Views/Ui/components/Button/components.tsx +++ b/apps/demo/src/Views/Ui/components/Button/components.tsx @@ -10,7 +10,7 @@ const Basic = ({ if (isString) { return `
-
`; } diff --git a/apps/demo/src/Views/Ui/components/ExportButton.tsx b/apps/demo/src/Views/Ui/components/ExportButton.tsx index 4a0665d83..38abcb40d 100644 --- a/apps/demo/src/Views/Ui/components/ExportButton.tsx +++ b/apps/demo/src/Views/Ui/components/ExportButton.tsx @@ -1,13 +1,58 @@ import { useTranslation } from "@prefabs.tech/react-i18n"; -import { Button, ExportButton, Page } from "@prefabs.tech/react-ui"; +import { Button, ExportButton, 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 ExportButtonDemo = () => { const [t] = useTranslation("ui"); const navigate = useNavigate(); + const data = [ + { + id: 1, + prop: "filename", + type: "string", + default: "-", + description: t("exportButton.propertiesDescription.filename"), + }, + { + id: 2, + prop: "sheetName", + type: "string", + default: "-", + description: t("exportButton.propertiesDescription.sheetName"), + }, + { + id: 3, + prop: "sheetOptions", + type: "WorkSheetOptions", + default: "-", + description: t("exportButton.propertiesDescription.sheetOptions"), + }, + { + id: 4, + prop: "onExportStart", + type: "() => void", + default: "-", + description: t("exportButton.propertiesDescription.onExportStart"), + }, + { + id: 5, + prop: "onExportEnd", + type: "() => void", + default: "-", + description: t("exportButton.propertiesDescription.onExportEnd"), + }, + { + id: 6, + prop: "getData", + type: "() => Array>", + default: `"medium"`, + description: t("exportButton.propertiesDescription.getData"), + }, + ]; + const getData = () => { return [ ["ID", "Name"], @@ -29,8 +74,43 @@ export const ExportButtonDemo = () => { /> } > -
+
+

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

+ +
+
+ `} + > +
+
+
); From fd65a9748f2481479fcdf485b701eb7c8e8c7d88 Mon Sep 17 00:00:00 2001 From: Bishal Shrestha Date: Tue, 29 Jul 2025 13:45:20 +0545 Subject: [PATCH 02/11] feat: add properties translations --- .../src/Views/Ui/components/ExportButton.tsx | 39 +++++++++++-------- apps/demo/src/locales/en/ui.json | 9 +++++ apps/demo/src/locales/fr/ui.json | 9 +++++ 3 files changed, 41 insertions(+), 16 deletions(-) diff --git a/apps/demo/src/Views/Ui/components/ExportButton.tsx b/apps/demo/src/Views/Ui/components/ExportButton.tsx index 38abcb40d..3c6938a6e 100644 --- a/apps/demo/src/Views/Ui/components/ExportButton.tsx +++ b/apps/demo/src/Views/Ui/components/ExportButton.tsx @@ -13,43 +13,50 @@ export const ExportButtonDemo = () => { id: 1, prop: "filename", type: "string", - default: "-", + default: "export_.xlsx", description: t("exportButton.propertiesDescription.filename"), }, { id: 2, - prop: "sheetName", - type: "string", + prop: "getData", + type: "() => Array>", default: "-", - description: t("exportButton.propertiesDescription.sheetName"), + description: t("exportButton.propertiesDescription.getData"), }, { id: 3, - prop: "sheetOptions", - type: "WorkSheetOptions", - default: "-", - description: t("exportButton.propertiesDescription.sheetOptions"), + prop: "label", + type: "string", + default: "Export XLSX", + description: t("exportButton.propertiesDescription.label"), }, { id: 4, - prop: "onExportStart", + prop: "onExportEnd", type: "() => void", default: "-", - description: t("exportButton.propertiesDescription.onExportStart"), + description: t("exportButton.propertiesDescription.onExportEnd"), }, { id: 5, - prop: "onExportEnd", + prop: "onExportStart", type: "() => void", default: "-", - description: t("exportButton.propertiesDescription.onExportEnd"), + description: t("exportButton.propertiesDescription.onExportStart"), }, { id: 6, - prop: "getData", - type: "() => Array>", - default: `"medium"`, - description: t("exportButton.propertiesDescription.getData"), + prop: "sheetOptions", + type: "WorkSheetOptions", + default: "{}", + description: t("exportButton.propertiesDescription.sheetOptions"), + }, + { + id: 7, + prop: "sheetName", + type: "string", + default: "Sheet 1", + description: t("exportButton.propertiesDescription.sheetName"), }, ]; diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json index bcb2a94f5..d21392c24 100644 --- a/apps/demo/src/locales/en/ui.json +++ b/apps/demo/src/locales/en/ui.json @@ -162,6 +162,15 @@ "title": "Youtube facade" }, "exportButton": { + "propertiesDescription": { + "filename": "The filename to use for the exported XLSX file.", + "getData": "Function that returns the data to be exported in a 2D array format.", + "label": "Text displayed on the export button.", + "onExportEnd": "Callback function invoked when export ends.", + "onExportStart": "Callback function invoked when export starts.", + "sheetName": "The name of the worksheet within the XLSX file.", + "sheetOptions": "Additional worksheet options." + }, "title": "Export button" }, "fileCard": { diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json index f556b9310..8835c8863 100644 --- a/apps/demo/src/locales/fr/ui.json +++ b/apps/demo/src/locales/fr/ui.json @@ -162,6 +162,15 @@ "title": "Youtube facade (fr)" }, "exportButton": { + "propertiesDescription": { + "filename": "The filename to use for the exported XLSX file. (fr)", + "getData": "Function that returns the data to be exported in a 2D array format. (fr)", + "label": "Text displayed on the export button. (fr)", + "onExportEnd": "Callback function invoked when export ends. (fr)", + "onExportStart": "Callback function invoked when export starts. (fr)", + "sheetName": "The name of the worksheet within the XLSX file. (fr)", + "sheetOptions": "Additional worksheet options. (fr)" + }, "title": "Export button (fr)" }, "fileCard": { From 42b9e5ae074d332ab78e3489162740041f799614 Mon Sep 17 00:00:00 2001 From: Bishal Shrestha Date: Tue, 5 Aug 2025 17:30:24 +0545 Subject: [PATCH 03/11] feat: update button documentation --- .../src/Views/Ui/components/Button/Button.tsx | 231 +++++++++--------- .../Views/Ui/components/Button/components.tsx | 76 +++--- apps/demo/src/locales/en/ui.json | 16 ++ apps/demo/src/locales/fr/ui.json | 16 ++ 4 files changed, 182 insertions(+), 157 deletions(-) diff --git a/apps/demo/src/Views/Ui/components/Button/Button.tsx b/apps/demo/src/Views/Ui/components/Button/Button.tsx index 4cc278be5..82c83a8ac 100644 --- a/apps/demo/src/Views/Ui/components/Button/Button.tsx +++ b/apps/demo/src/Views/Ui/components/Button/Button.tsx @@ -5,104 +5,97 @@ import { useNavigate } from "react-router-dom"; import { Basic, Icons, Link, Severity, Size, Variant } from "./components"; import { CodeBlock, Section } from "../../../../components/Demo"; -const data = [ - { - id: 1, - prop: "children", - type: "string | ReactNode", - description: "The content to be displayed inside the button.", - }, - { - id: 2, - prop: "className", - type: "string", - description: "Additional CSS classes to apply to the button.", - }, - { - id: 3, - prop: "disabled", - type: "boolean", - description: "If true, the button will be disabled and non-interactive.", - }, - { - id: 4, - prop: "iconLeft", - type: "string | ReactNode", - description: - "Icon to be displayed on the left side of the button. Can be a string (class name) or a ReactNode.", - }, - { - id: 5, - prop: "iconRight", - type: "string | ReactNode", - description: - "Icon to be displayed on the right side of the button. Can be a string (class name) or a ReactNode.", - }, - { - id: 6, - prop: "label", - type: "string", - description: - "Text to be displayed in the button when `children` is not provided.", - }, - { - id: 7, - prop: "loading", - type: "boolean", - description: - "If true, indicates that the button is in a loading state and disables user interaction.", - }, - { - id: 8, - prop: "onClick", - type: "() => void", - description: "Function to be called when the button is clicked.", - }, - { - id: 9, - prop: "severity", - type: '"primary" | "secondary" | "alternate" | "success" | "danger" | "warning"', - description: - "Defines the styling severity of the button. Defaults to 'primary'.", - }, - { - id: 10, - prop: "size", - type: '"small" | "medium" | "large"', - description: "Sets the size of the button. Defaults to 'medium'.", - }, - { - id: 11, - prop: "to", - type: "string", - description: - "If provided, the button will act as a `Link` to the specified path instead of a regular button.", - }, - { - id: 12, - prop: "title", - type: "string", - description: "Tooltip text that appears on hover.", - }, - { - id: 13, - prop: "variant", - type: '"outlined" | "filled" | "textOnly"', - description: "Specifies the button variant. Defaults to 'filled'.", - }, - { - id: 14, - prop: "rounded", - type: "boolean", - description: - "Specifies the button border-radius to be rounded when set to `true`. Defaults to 'false'.", - }, -]; - export const ButtonDemo = () => { const { t } = useTranslation("ui"); const navigate = useNavigate(); + const data = [ + { + id: 1, + prop: "children", + type: "string | ReactNode", + description: t("button.propertiesDescription.children"), + }, + { + id: 2, + prop: "className", + type: "string", + description: t("button.propertiesDescription.className"), + }, + { + id: 3, + prop: "disabled", + type: "boolean", + description: t("button.propertiesDescription.disabled"), + }, + { + id: 4, + prop: "iconLeft", + type: "string | ReactNode", + description: t("button.propertiesDescription.iconLeft"), + }, + { + id: 5, + prop: "iconRight", + type: "string | ReactNode", + description: t("button.propertiesDescription.iconRight"), + }, + { + id: 6, + prop: "label", + type: "string", + description: t("button.propertiesDescription.label"), + }, + { + id: 7, + prop: "loading", + type: "boolean", + description: t("button.propertiesDescription.loading"), + }, + { + id: 8, + prop: "onClick", + type: "() => void", + description: t("button.propertiesDescription.onClick"), + }, + { + id: 9, + prop: "severity", + type: '"primary" | "secondary" | "alternate" | "success" | "danger" | "warning"', + description: t("button.propertiesDescription.severity"), + }, + { + id: 10, + prop: "size", + type: '"small" | "medium" | "large"', + description: t("button.propertiesDescription.size"), + }, + { + id: 11, + prop: "to", + type: "string", + description: t("button.propertiesDescription.to"), + }, + { + id: 12, + prop: "title", + type: "string", + description: t("button.propertiesDescription.title"), + }, + { + id: 13, + prop: "variant", + type: '"outlined" | "filled" | "textOnly"', + description: t("button.propertiesDescription.variant"), + }, + { + id: 14, + prop: "rounded", + type: "boolean", + description: t("button.propertiesDescription.rounded"), + }, + ]; + return ( {
-
- -
-
{
+ +
+ +
); }; diff --git a/apps/demo/src/Views/Ui/components/Button/components.tsx b/apps/demo/src/Views/Ui/components/Button/components.tsx index 2ac6913b3..a310d16a8 100644 --- a/apps/demo/src/Views/Ui/components/Button/components.tsx +++ b/apps/demo/src/Views/Ui/components/Button/components.tsx @@ -10,7 +10,7 @@ const Basic = ({ if (isString) { return `
-
`; } @@ -29,12 +29,12 @@ const Severity = ({ }): JSX.Element | string => { if (isString) { return `
-
`; } @@ -57,14 +57,14 @@ const Size = ({ }): JSX.Element | string => { if (isString) { return `
-
`; } @@ -89,9 +89,9 @@ const Variant = ({ }): JSX.Element | string => { if (isString) { return `
-
`; } @@ -111,24 +111,24 @@ const Icons = ({ }): JSX.Element | string => { if (isString) { return `
-
-
-
-
-
-
-
+
+
+
+
+
+
`; } @@ -209,8 +209,8 @@ const Link = ({ }): JSX.Element | string => { if (isString) { return `
-
`; } diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json index bcb2a94f5..a199e711f 100644 --- a/apps/demo/src/locales/en/ui.json +++ b/apps/demo/src/locales/en/ui.json @@ -45,6 +45,22 @@ "link": "Link", "tooltip": "Button with tooltip" }, + "propertiesDescription": { + "children": "The content to be displayed inside the button.", + "className": "Additional CSS classes to apply to the button.", + "disabled": "If true, the button will be disabled and non-interactive.", + "iconLeft": "Icon to be displayed on the left side of the button. Can be a string (class name) or a ReactNode.", + "iconRight": "Icon to be displayed on the right side of the button. Can be a string (class name) or a ReactNode.", + "label": "Text to be displayed in the button when `children` is not provided.", + "loading": "If true, indicates that the button is in a loading state and disables user interaction.", + "onClick": "Function to be called when the button is clicked.", + "severity": "Defines the styling severity of the button. Defaults to 'primary'.", + "size": "Sets the size of the button. Defaults to 'medium'.", + "to": "If provided, the button will act as a `Link` to the specified path instead of a regular button.", + "title": "Tooltip text that appears on hover.", + "variant": "Specifies the button variant. Defaults to 'filled'.", + "rounded": "Specifies the button border-radius to be rounded when set to `true`. Defaults to 'false'." + }, "message": "Click to view profile" }, "checkboxInput": { diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json index f556b9310..a6bb011b2 100644 --- a/apps/demo/src/locales/fr/ui.json +++ b/apps/demo/src/locales/fr/ui.json @@ -45,6 +45,22 @@ "link": "Link (fr)", "tooltip": "Button with tooltip (fr)" }, + "propertiesDescription": { + "children": "The content to be displayed inside the button. (fr)", + "className": "Additional CSS classes to apply to the button. (fr)", + "disabled": "If true, the button will be disabled and non-interactive. (fr)", + "iconLeft": "Icon to be displayed on the left side of the button. Can be a string (class name) or a ReactNode. (fr)", + "iconRight": "Icon to be displayed on the right side of the button. Can be a string (class name) or a ReactNode. (fr)", + "label": "Text to be displayed in the button when `children` is not provided. (fr)", + "loading": "If true, indicates that the button is in a loading state and disables user interaction. (fr)", + "onClick": "Function to be called when the button is clicked. (fr)", + "severity": "Defines the styling severity of the button. Defaults to 'primary'. (fr)", + "size": "Sets the size of the button. Defaults to 'medium'. (fr)", + "to": "If provided, the button will act as a `Link` to the specified path instead of a regular button. (fr)", + "title": "Tooltip text that appears on hover. (fr)", + "variant": "Specifies the button variant. Defaults to 'filled'. (fr)", + "rounded": "Specifies the button border-radius to be rounded when set to `true`. Defaults to 'false'. (fr)" + }, "message": "Click to view profile (fr)" }, "checkboxInput": { From 0f8e5007e6046f3f3f9a79dfe35a754d4cef4266 Mon Sep 17 00:00:00 2001 From: Bishal Shrestha Date: Tue, 5 Aug 2025 17:45:09 +0545 Subject: [PATCH 04/11] feat: update submit button documentation --- .../src/Views/Ui/components/SubmitButton.tsx | 43 +++++++++---------- apps/demo/src/locales/en/ui.json | 5 +++ apps/demo/src/locales/fr/ui.json | 5 +++ 3 files changed, 31 insertions(+), 22 deletions(-) diff --git a/apps/demo/src/Views/Ui/components/SubmitButton.tsx b/apps/demo/src/Views/Ui/components/SubmitButton.tsx index d96c71133..360f25c87 100644 --- a/apps/demo/src/Views/Ui/components/SubmitButton.tsx +++ b/apps/demo/src/Views/Ui/components/SubmitButton.tsx @@ -5,32 +5,31 @@ import { useNavigate } from "react-router-dom"; import { CodeBlock, Section } from "../../../components/Demo"; -const data = [ - { - id: 1, - prop: "disabled", - type: "boolean", - description: "If true, the button will be disabled and non-interactive.", - }, - { - id: 2, - prop: "label", - type: "string", - description: "Text to be displayed in the button.", - }, - { - id: 3, - prop: "loading", - type: "boolean", - description: - "If true, indicates that the button is in a loading state and disables user interaction.", - }, -]; - export const SubmitButtonDemo = () => { const [t] = useTranslation("ui"); const navigate = useNavigate(); + const data = [ + { + id: 1, + prop: "disabled", + type: "boolean", + description: t("submitButton.propertiesDescription.disabled"), + }, + { + id: 2, + prop: "label", + type: "string", + description: t("submitButton.propertiesDescription.label"), + }, + { + id: 3, + prop: "loading", + type: "boolean", + description: t("submitButton.propertiesDescription.loading"), + }, + ]; + return ( Date: Tue, 5 Aug 2025 17:53:42 +0545 Subject: [PATCH 05/11] feat: update data ui documentation --- .../Ui/components/DataComponent/index.tsx | 66 +++++++++---------- apps/demo/src/locales/en/ui.json | 6 ++ apps/demo/src/locales/fr/ui.json | 6 ++ 3 files changed, 45 insertions(+), 33 deletions(-) diff --git a/apps/demo/src/Views/Ui/components/DataComponent/index.tsx b/apps/demo/src/Views/Ui/components/DataComponent/index.tsx index 9f3e6e589..8f99bd9a6 100644 --- a/apps/demo/src/Views/Ui/components/DataComponent/index.tsx +++ b/apps/demo/src/Views/Ui/components/DataComponent/index.tsx @@ -10,38 +10,10 @@ import { useNavigate } from "react-router-dom"; import { CodeBlock, Section } from "../../../../components/Demo"; -const data = [ - { - id: 1, - prop: "caption", - type: "ReactNode", - default: "-", - description: "The caption displayed alongside the value.", - }, - { - id: 2, - prop: "className", - type: "string", - default: "-", - description: "Additional CSS classes to apply to the outer container.", - }, - { - id: 3, - prop: "mode", - type: '"attr" | "stat"', - default: "attr", - description: "Defines which styling to apply to the component.", - }, - { - id: 4, - prop: "value", - type: "ReactNode", - default: "-", - description: "The value to display.", - }, -]; - export const DataDemo = () => { + const { t } = useTranslation("ui"); + const navigate = useNavigate(); + const testData = [ { caption: "Name", @@ -65,8 +37,36 @@ export const DataDemo = () => { }, ]; - const { t } = useTranslation("ui"); - const navigate = useNavigate(); + const data = [ + { + id: 1, + prop: "caption", + type: "ReactNode", + default: "-", + description: t("data.propertiesDescription.caption"), + }, + { + id: 2, + prop: "className", + type: "string", + default: "-", + description: t("data.propertiesDescription.className"), + }, + { + id: 3, + prop: "mode", + type: '"attr" | "stat"', + default: "attr", + description: t("data.propertiesDescription.mode"), + }, + { + id: 4, + prop: "value", + type: "ReactNode", + default: "-", + description: t("data.propertiesDescription.value"), + }, + ]; return ( Date: Tue, 5 Aug 2025 18:30:03 +0545 Subject: [PATCH 06/11] feat: update table documentation --- .../src/Views/Ui/components/Table/Table.tsx | 161 ++++++++++++++++++ apps/demo/src/locales/en/ui.json | 25 +-- apps/demo/src/locales/fr/ui.json | 25 +-- 3 files changed, 187 insertions(+), 24 deletions(-) diff --git a/apps/demo/src/Views/Ui/components/Table/Table.tsx b/apps/demo/src/Views/Ui/components/Table/Table.tsx index 5b605afdf..cb2761569 100644 --- a/apps/demo/src/Views/Ui/components/Table/Table.tsx +++ b/apps/demo/src/Views/Ui/components/Table/Table.tsx @@ -116,6 +116,7 @@ export const TableDemo = () => { return ( { /> } > +
+

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

+ +
+
{ return `row-${original.id}`; }} > +
@@ -167,6 +186,35 @@ export const TableDemo = () => { data={data} initialSorting={[{ id: "email", desc: false }]} > +
@@ -180,6 +228,18 @@ export const TableDemo = () => { initialFilters={[{ id: "email", value: "s" }]} initialSorting={[{ id: "email", desc: false }]} > +
@@ -189,6 +249,14 @@ export const TableDemo = () => { enableRowSelection={true} initialSorting={[{ id: "email", desc: false }]} > +
@@ -212,6 +280,23 @@ export const TableDemo = () => { persistState showColumnsAction > +
@@ -228,6 +313,21 @@ export const TableDemo = () => { }} initialSorting={[{ id: "email", desc: false }]} > +
@@ -248,6 +348,25 @@ export const TableDemo = () => { }} initialSorting={[{ id: "email", desc: false }]} > +
@@ -291,6 +410,48 @@ export const TableDemo = () => { enableRowSelection={true} initialSorting={[{ id: "email", desc: false }]} > +
diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json index fa570539d..10a368aa0 100644 --- a/apps/demo/src/locales/en/ui.json +++ b/apps/demo/src/locales/en/ui.json @@ -210,7 +210,6 @@ "title": "Files presentation" }, "table": { - "title": "Table", "cssCodeBlock": { "title": "CSS code example", "messages": { @@ -219,6 +218,18 @@ "note": "Note:" } }, + "placeholder": { + "country": "Select country", + "date": "Select date", + "endDate": "End date", + "max": "Max", + "min": "Min", + "startDate": "Start date", + "search": "Search", + "select": "Select city", + "status": "Select status" + }, + "subtitle": "The Table component displays data in tabular format.", "usage": { "basic": "Basic table", "builtInActionColumn": "Table demonstrating built in actions column use case", @@ -246,17 +257,7 @@ "tableBorderHorizontal": "Table with custom style for horizontal border", "tableBorderVertical": "Table with custom style for vertical border" }, - "placeholder": { - "country": "Select country", - "date": "Select date", - "endDate": "End date", - "max": "Max", - "min": "Min", - "startDate": "Start date", - "search": "Search", - "select": "Select city", - "status": "Select status" - } + "title": "Table" }, "message": { "subtitle": "The Message component displays contextual messages with optional icons and a closable action. It supports custom slots, making it flexible for various use cases.", diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json index a2e93579d..88f0d8a33 100644 --- a/apps/demo/src/locales/fr/ui.json +++ b/apps/demo/src/locales/fr/ui.json @@ -210,7 +210,6 @@ "title": "Files presentation (fr)" }, "table": { - "title": "Table (fr)", "cssCodeBlock": { "title": "CSS code example (fr)", "messages": { @@ -219,6 +218,18 @@ "note": "Note: (fr)" } }, + "placeholder": { + "country": "Select country (fr)", + "date": "Select date (fr)", + "endDate": "End date (fr)", + "max": "Max (fr)", + "min": "Min (fr)", + "startDate": "Start date (fr)", + "search": "Search (fr)", + "select": "Select city (fr)", + "status": "Select status (fr)" + }, + "subtitle": "The Table component displays data in tabular format. (fr)", "usage": { "basic": "Basic table (fr)", "builtInActionColumn": "Table demonstrating built in actions column use case (fr)", @@ -246,17 +257,7 @@ "tableBorderHorizontal": "Table with custom style for horizontal border (fr)", "tableBorderVertical": "Table with custom style for vertical border (fr)" }, - "placeholder": { - "country": "Select country (fr)", - "date": "Select date (fr)", - "endDate": "End date (fr)", - "max": "Max (fr)", - "min": "Min (fr)", - "startDate": "Start date (fr)", - "search": "Search (fr)", - "select": "Select city (fr)", - "status": "Select status (fr)" - } + "title": "Table (fr)" }, "message": { "subtitle": "The Message component displays contextual messages with optional icons and a closable action. It supports custom slots, making it flexible for various use cases. (fr)", From 01efc55dddeba52e1a719e7b5d4c4b492f1507f4 Mon Sep 17 00:00:00 2001 From: Bishal Shrestha Date: Wed, 6 Aug 2025 17:34:48 +0545 Subject: [PATCH 07/11] feat: add properties table for table component --- .../src/Views/Ui/components/Table/Table.tsx | 1201 +++++++++-------- .../src/Views/Ui/components/Table/data.ts | 8 +- apps/demo/src/locales/en/ui.json | 35 + apps/demo/src/locales/fr/ui.json | 35 + 4 files changed, 695 insertions(+), 584 deletions(-) diff --git a/apps/demo/src/Views/Ui/components/Table/Table.tsx b/apps/demo/src/Views/Ui/components/Table/Table.tsx index cb2761569..c8bd2661b 100644 --- a/apps/demo/src/Views/Ui/components/Table/Table.tsx +++ b/apps/demo/src/Views/Ui/components/Table/Table.tsx @@ -7,18 +7,9 @@ import { DebouncedInput, } from "@prefabs.tech/react-ui"; import { FilterFunction, DatePicker } from "@prefabs.tech/react-ui"; -import { Tag } from "@prefabs.tech/react-ui"; import { useNavigate } from "react-router-dom"; -import { - HORIZONTAL_CSS_CODE, - TData, - VERTICAL_CSS_CODE, - data, - formatDemoData, - city, - country, -} from "./data"; +import { TData, data, formatDemoData, cities, countries } from "./data"; import { CodeBlock, Section } from "../../../../components/Demo"; declare module "@prefabs.tech/react-ui" { @@ -38,14 +29,14 @@ export const TableDemo = () => { header: "Email", enableColumnFilter: true, enableSorting: true, - filterPlaceholder: t("table.placeholder.search"), + filterPlaceholder: "Search", }, { accessorKey: "name", header: () => Full name, enableColumnFilter: true, enableSorting: true, - filterPlaceholder: t("table.placeholder.search"), + filterPlaceholder: "Search", }, { accessorKey: "age", @@ -54,17 +45,17 @@ export const TableDemo = () => { dataType: "number", enableSorting: true, enableColumnFilter: true, - filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`, + filterPlaceholder: "Min,Max", }, { accessorKey: "city", header: () => City, enableColumnFilter: true, enableSorting: true, - filterPlaceholder: t("table.placeholder.select"), + filterPlaceholder: "Select", meta: { filterVariant: "multiselect", - filterOptions: city, + filterOptions: cities, }, }, { @@ -74,9 +65,243 @@ export const TableDemo = () => { enableSorting: true, meta: { filterVariant: "select", - filterOptions: country, + filterOptions: countries, }, - filterPlaceholder: t("table.placeholder.country"), + filterPlaceholder: "Select country", + }, + ]; + + const propertiesData = [ + { + id: 1, + prop: "className", + type: "string", + default: '""', + description: t("table.propertiesDescription.className"), + }, + { + id: 2, + prop: "columnActionBtnLabel", + type: "string", + default: '"Columns"', + description: t("table.propertiesDescription.columnActionBtnLabel"), + }, + { + id: 3, + prop: "customFormatters", + type: "Record string>", + default: "-", + description: t("table.propertiesDescription.customFormatters"), + }, + { + id: 4, + prop: "dataActionsMenu", + type: "(data: TData) => DataActionsMenuProperties | DataActionsMenuProperties", + default: "-", + description: t("table.propertiesDescription.dataActionsMenu"), + }, + { + id: 5, + prop: "data", + type: "TData[]", + default: "-", + description: t("table.propertiesDescription.data"), + }, + { + id: 6, + prop: "emptyTableMessage", + type: "string", + default: "No results.", + description: t("table.propertiesDescription.emptyTableMessage"), + }, + { + id: 7, + prop: "enableRowSelection", + type: "boolean", + default: "false", + description: t("table.propertiesDescription.enableRowSelection"), + }, + { + id: 8, + prop: "globalFilter", + type: "{ key: string; value: string; placeholder: string }", + default: "-", + description: t("table.propertiesDescription.globalFilter"), + }, + { + id: 9, + prop: "id", + type: "string", + default: "-", + description: t("table.propertiesDescription.id"), + }, + { + id: 10, + prop: "initialFilters", + type: "ColumnFiltersState", + default: "[]", + description: t("table.propertiesDescription.initialFilters"), + }, + { + id: 11, + prop: "initialSorting", + type: "SortingState", + default: "[]", + description: t("table.propertiesDescription.initialSorting"), + }, + { + id: 12, + prop: "isLoading", + type: "boolean", + default: "false", + description: t("table.propertiesDescription.isLoading"), + }, + { + id: 13, + prop: "inputDebounceTime", + type: "number", + default: "-", + description: t("table.propertiesDescription.inputDebounceTime"), + }, + { + id: 14, + prop: "paginated", + type: "boolean", + default: "true", + description: t("table.propertiesDescription.paginated"), + }, + { + id: 15, + prop: "paginationOptions", + type: "Omit", + default: "-", + description: t("table.propertiesDescription.paginationOptions"), + }, + { + id: 16, + prop: "persistState", + type: "boolean", + default: "false", + description: t("table.propertiesDescription.persistState"), + }, + { + id: 17, + prop: "persistStateStorage", + type: "StorageType", + default: '"localStorage"', + description: t("table.propertiesDescription.persistStateStorage"), + }, + { + id: 18, + prop: "resetStateActionBtnLabel", + type: "string", + default: '"Reset all"', + description: t("table.propertiesDescription.resetStateActionBtnLabel"), + }, + { + id: 19, + prop: "rowClassName", + type: "string | ((options: { row: Row }) => string)", + default: "-", + description: t("table.propertiesDescription.rowClassName"), + }, + { + id: 20, + prop: "rowPerPage", + type: "number", + default: "-", + description: t("table.propertiesDescription.rowPerPage"), + }, + { + id: 21, + prop: "rowPerPageOptions", + type: "number[]", + default: "[10, 20, 30]", + description: t("table.propertiesDescription.rowPerPageOptions"), + }, + { + id: 22, + prop: "showResetStateAction", + type: "boolean", + default: "-", + description: t("table.propertiesDescription.showResetStateAction"), + }, + { + id: 23, + prop: "totalRecords", + type: "number", + default: "0", + description: t("table.propertiesDescription.totalRecords"), + }, + { + id: 24, + prop: "visibleColumns", + type: "string[]", + default: "[]", + description: t("table.propertiesDescription.visibleColumns"), + }, + { + id: 25, + prop: "title", + type: "{ text: string; align?: 'left' | 'center' | 'right' }", + default: "-", + description: t("table.propertiesDescription.title"), + }, + { + id: 26, + prop: "showColumnsAction", + type: "boolean", + default: "false", + description: t("table.propertiesDescription.showColumnsAction"), + }, + { + id: 27, + prop: "fetchData", + type: "(data: TRequestJSON) => void", + default: "-", + description: t("table.propertiesDescription.fetchData"), + }, + { + id: 28, + prop: "handleResetState", + type: "() => void", + default: "-", + description: t("table.propertiesDescription.handleResetState"), + }, + { + id: 29, + prop: "onRowSelectChange", + type: "(table: Table) => void", + default: "-", + description: t("table.propertiesDescription.onRowSelectChange"), + }, + { + id: 30, + prop: "renderCustomPagination", + type: "(table: Table) => React.ReactNode", + default: "-", + description: t("table.propertiesDescription.renderCustomPagination"), + }, + { + id: 31, + prop: "renderSortIcons", + type: "(direction: false | SortDirection) => React.ReactNode", + default: "-", + description: t("table.propertiesDescription.renderSortIcons"), + }, + { + id: 32, + prop: "renderTableFooterContent", + type: "(table: Table) => React.ReactNode", + default: "-", + description: t("table.propertiesDescription.renderTableFooterContent"), + }, + { + id: 33, + prop: "renderToolbarItems", + type: "(table: Table) => React.ReactNode", + default: "-", + description: t("table.propertiesDescription.renderToolbarItems"), }, ]; @@ -145,7 +370,73 @@ export const TableDemo = () => { > > = [ + { + accessorKey: "email", + header: "Email", + enableColumnFilter: true, + enableSorting: true, + filterPlaceholder: "Search", + }, + { + accessorKey: "name", + header: () => Full name, + enableColumnFilter: true, + enableSorting: true, + filterPlaceholder: "Search", + }, + { + accessorKey: "age", + header: "Age", + align: "right", + dataType: "number", + enableSorting: true, + enableColumnFilter: true, + filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`, + }, + { + accessorKey: "city", + header: () => City, + enableColumnFilter: true, + enableSorting: true, + filterPlaceholder: "Select", + meta: { + filterVariant: "multiselect", + filterOptions: cities, + }, + }, + { + accessorKey: "country", + header: "Country", + enableColumnFilter: true, + enableSorting: true, + meta: { + filterVariant: "select", + filterOptions: countries, + }, + filterPlaceholder: t("table.placeholder.country"), + }, +] + +const data = [ + { + id: 1, + name: "John Doe", + email: "john.doe@example.com", + age: 28, + city: "New York", + }, + { + id: 2, + name: "Jane Elizabeth Smith", + email: "jane.smith@example.com", + age: 32, + city: "Los Angeles", + }, + ... +] + + { />
-
- - -
- -
- ({ - ...column, - enableSorting: true, - }))} - data={data} - initialFilters={[{ id: "email", value: "s" }]} - initialSorting={[{ id: "email", desc: false }]} - > - -
-
{ />
-
-

- Use the id and persistentState props to make the table remember states - such as sorting, filtering, and visible columns, even after a page - refresh. -

- - -
- -
+
{ renderCustomPagination={(table) => { return <>Custom pagination; }} - initialSorting={[{ id: "email", desc: false }]} - > - -
- -
- { return ( <> @@ -346,6 +485,13 @@ export const TableDemo = () => { ); }} + renderTableFooterContent={(table) => ( + + + Total records: {table.getPreFilteredRowModel().flatRows.length} + + + )} initialSorting={[{ id: "email", desc: false }]} > { }, ]} data={data.slice(0, 5)} + renderCustomPagination={(table) => { + return <>Custom pagination; + }} renderToolbarItems={(table) => { return ( <> @@ -364,6 +513,32 @@ export const TableDemo = () => { ); }} + renderTableFooterContent={(table) => ( + + + Total records: {table.getPreFilteredRowModel().flatRows.length} + + + )} + initialSorting={[{ id: "email", desc: false }]} +>' + /> +
+ +
+ + @@ -454,183 +629,7 @@ export const TableDemo = () => { />
-
- -
- -
- -
- -
- ( - - - Total records: {table.getPreFilteredRowModel().flatRows.length} - - - )} - initialSorting={[{ id: "email", desc: false }]} - > -
- -
- - -

{t("table.cssCodeBlock.messages.addVertical")}

-

- {t("table.cssCodeBlock.messages.note")} In this - example, we are using custom class  - .vertical in our table. Replace it with class used - in your table. -

- - } - /> -
- -
- - -

{t("table.cssCodeBlock.messages.addHorizontal")}

-

- {t("table.cssCodeBlock.messages.note")} In this - example, we are using custom class - .horizontal in our table. Replace it with class - used in your table. -

- - } - /> -
- -
- -
- -
- -
- -
- { - //your logic here - // eslint-disable-next-line no-console - console.log(rowData, "view action"); - }, - }, - { - label: "Edit", - disabled: true, - onClick: (rowData) => { - //your logic here - // eslint-disable-next-line no-console - console.log(rowData, "edit action"); - }, - }, - { - label: "Share", - disabled: (rowData) => { - ///your logic here - return rowData.id !== 11; - }, - onClick: (rowData) => { - //your logic here - // eslint-disable-next-line no-console - console.log(rowData, "share action"); - }, - }, - { - label: "Delete", - className: "danger", - onClick: (rowData) => { - //your logic here - // eslint-disable-next-line no-console - console.log(rowData, "delete action"); - }, - requireConfirmationModal: true, - confirmationOptions: { - header: "Are you sure!", - message: "You are going to delete this data.", - }, - }, - ], - displayActions: (rowData) => { - return rowData.id !== 12; - }, - }} - initialSorting={[{ id: "email", desc: false }]} - /> -
- -
+
{ }} initialSorting={[{ id: "email", desc: false }]} /> +
@@ -715,6 +769,25 @@ export const TableDemo = () => { }} initialSorting={[{ id: "email", desc: false }]} /> +
@@ -737,6 +810,25 @@ export const TableDemo = () => { }} initialSorting={[{ id: "email", desc: false }]} /> +
@@ -752,7 +844,7 @@ export const TableDemo = () => { onInputChange={(value) => { column.setFilterValue(value); }} - placeholder={t("table.placeholder.search")} + placeholder={"Search"} debounceTime={200} > ), @@ -765,6 +857,33 @@ export const TableDemo = () => { data={data.slice(10, 15)} initialSorting={[{ id: "email", desc: false }]} > +
@@ -777,147 +896,31 @@ export const TableDemo = () => { meta: { serverFilterFn: "equals", }, - filterPlaceholder: t("table.placeholder.search"), + filterPlaceholder: "Search", }, ]} fetchData={() => {}} data={data.slice(10, 15)} initialSorting={[{ id: "email", desc: false }]} > -
- -
- "Quantity", - enableSorting: true, - dataType: "number", - numberOptions: { - locale: "en-IN", - }, - enableColumnFilter: true, - filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`, - }, - { - accessorKey: "amount", - header: "Amount", - dataType: "currency", - enableSorting: true, - numberOptions: { - locale: "en-US", - formatOptions: { - currency: "EUR", - }, - }, - enableColumnFilter: true, - meta: { - filterVariant: "range", - }, - filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`, - }, - { - accessorKey: "date", - header: "Date", - dataType: "date", - enableColumnFilter: true, - enableSorting: true, - filterPlaceholder: t("table.placeholder.date"), - meta: { - filterVariant: "dateRange", - }, - }, - { - accessorKey: "datetime", - header: "Datetime", - dataType: "datetime", - enableColumnFilter: true, - enableSorting: true, - filterPlaceholder: t("table.placeholder.date"), - meta: { - filterVariant: "dateRange", - }, - }, - { - id: "action", - header: () => , - dataType: "other", - cell: () => ( -
- -
- "Quantity", - enableSorting: true, - dataType: "number", - enableColumnFilter: true, - filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`, - }, - { - accessorKey: "amount", - header: "Amount", - dataType: "currency", - enableSorting: true, - enableColumnFilter: true, - meta: { - filterVariant: "range", - }, - filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`, - }, - { - accessorKey: "date", - header: "Date", - dataType: "date", - enableColumnFilter: true, - enableSorting: true, - filterPlaceholder: t("table.placeholder.date"), - meta: { - filterVariant: "dateRange", - }, - }, - { - id: "action", - header: () => , - dataType: "other", - cell: () => ( -
@@ -930,7 +933,7 @@ export const TableDemo = () => { filterFn: "customEqualStringFilter", enableColumnFilter: true, enableSorting: true, - filterPlaceholder: t("table.placeholder.search"), + filterPlaceholder: "Search", }, { accessorKey: "quantity", @@ -1015,114 +1018,152 @@ export const TableDemo = () => { }} initialSorting={[{ id: "quantity", desc: true }]} > +
-
+
City, - enableColumnFilter: true, - enableSorting: true, - filterPlaceholder: t("table.placeholder.select"), - meta: { - filterVariant: "multiselect", - filterOptions: city, - }, - }, - { - accessorKey: "country", - header: "Country", - enableColumnFilter: true, - enableSorting: true, - meta: { - filterVariant: "select", - filterOptions: country, - }, - filterPlaceholder: t("table.placeholder.country"), + accessorKey: "default", + header: t("propertiesTable.header.default"), }, { - align: "center", - accessorKey: "disabled", - header: "Status", - cell: ({ row: { original } }) => { - const color = original.disabled ? "red" : "green"; - - return ( - - ); - }, - enableColumnFilter: true, - enableSorting: true, - filterFn: (row, columnId, filterValue) => { - if (!filterValue || filterValue.length === 0) { - return true; - } - - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const updatedFilterValue = filterValue.map((value: any) => { - switch (value) { - case "true": - return true; - case "false": - return false; - default: - return value; - } - }); - - const cellValue = row.getValue(columnId); - - return updatedFilterValue.includes(cellValue); - }, - meta: { - filterVariant: "multiselect", - filterOptions: [ - { - value: "false", - label: "Enabled", - }, - { - value: "true", - label: "Disabled", - }, - ], - }, - filterPlaceholder: t("table.placeholder.status"), + accessorKey: "description", + header: t("propertiesTable.header.description"), }, ]} - data={data.slice(10, 15)} - initialSorting={[{ id: "email", desc: false }]} - > + data={propertiesData} + paginated={false} + />
); diff --git a/apps/demo/src/Views/Ui/components/Table/data.ts b/apps/demo/src/Views/Ui/components/Table/data.ts index e743d2a21..e6e21677b 100644 --- a/apps/demo/src/Views/Ui/components/Table/data.ts +++ b/apps/demo/src/Views/Ui/components/Table/data.ts @@ -8,7 +8,7 @@ export type TData = { disabled?: boolean; }; -const city = [ +const cities = [ { value: "Atlanta", label: "Atlanta" }, { value: "Austin", label: "Austin" }, { value: "Boston", label: "Boston" }, @@ -31,7 +31,7 @@ const city = [ { value: "Seattle", label: "Seattle" }, ]; -const country = [ +const countries = [ { label: "Estonia", value: "Estonia" }, { label: "France", value: "France" }, { @@ -324,8 +324,8 @@ const HORIZONTAL_CSS_CODE = `.dz-table-container.horizontal .table-wrapper > tab }`; export { - city, - country, + cities, + countries, data, formatDemoData, HORIZONTAL_CSS_CODE, diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json index 10a368aa0..2a4cceaa3 100644 --- a/apps/demo/src/locales/en/ui.json +++ b/apps/demo/src/locales/en/ui.json @@ -229,6 +229,41 @@ "select": "Select city", "status": "Select status" }, + "propertiesDescription": { + "className": "Additional CSS classes to apply to the table.", + "columnActionBtnLabel": "Label for the column action button.", + "customFormatters": "Custom functions to format data in specific columns.", + "dataActionsMenu": "Configuration or function to render row-specific action menus.", + "data": "The array of data records to be displayed in the table.", + "emptyTableMessage": "Message to display when there are no records in the table.", + "enableRowSelection": "Enables row selection functionality.", + "globalFilter": "Global filter.", + "id": "Unique identifier for the table instance.", + "initialFilters": "Initial column filter state applied to the table.", + "initialSorting": "Initial sorting state for the table.", + "isLoading": "Displays a loading icon.", + "inputDebounceTime": "Debounce time (in ms).", + "paginated": "Enables pagination for the table.", + "paginationOptions": "Additional props for the pagination component.", + "persistState": "Persist table state.", + "persistStateStorage": "Storage type to use when persisting table state.", + "resetStateActionBtnLabel": "Label for the reset state button in the table toolbar.", + "rowClassName": "Custom class name row.", + "rowPerPage": "Number of rows displayed per page.", + "rowPerPageOptions": "List of selectable options for rows per page.", + "showResetStateAction": "Button to reset the table state.", + "totalRecords": "Total number of records.", + "visibleColumns": "Array of columns that should be visible.", + "title": "Title of the table.", + "showColumnsAction": "Display column action.", + "fetchData": "Fetch table data.", + "handleResetState": "Callback triggered when reset state.", + "onRowSelectChange": "Callback triggered when selected rows change.", + "renderCustomPagination": "Custom pagination.", + "renderSortIcons": "Custom sort icon renderer for sortable columns.", + "renderTableFooterContent": "Custom table footer.", + "renderToolbarItems": "Custom toolbar items to display above the table." + }, "subtitle": "The Table component displays data in tabular format.", "usage": { "basic": "Basic table", diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json index 88f0d8a33..cd741e492 100644 --- a/apps/demo/src/locales/fr/ui.json +++ b/apps/demo/src/locales/fr/ui.json @@ -229,6 +229,41 @@ "select": "Select city (fr)", "status": "Select status (fr)" }, + "propertiesDescription": { + "className": "Additional CSS classes to apply to the table. (fr)", + "columnActionBtnLabel": "Label for the column action button. (fr)", + "customFormatters": "Custom functions to format data in specific columns. (fr)", + "dataActionsMenu": "Configuration or function to render row-specific action menus. (fr)", + "data": "The array of data records to be displayed in the table. (fr)", + "emptyTableMessage": "Message to display when there are no records in the table. (fr)", + "enableRowSelection": "Enables row selection functionality. (fr)", + "globalFilter": "Global filter. (fr)", + "id": "Unique identifier for the table instance. (fr)", + "initialFilters": "Initial column filter state applied to the table. (fr)", + "initialSorting": "Initial sorting state for the table. (fr)", + "isLoading": "Displays a loading icon. (fr)", + "inputDebounceTime": "Debounce time (in ms). (fr)", + "paginated": "Enables pagination for the table. (fr)", + "paginationOptions": "Additional props for the pagination component. (fr)", + "persistState": "Persist table state. (fr)", + "persistStateStorage": "Storage type to use when persisting table state. (fr)", + "resetStateActionBtnLabel": "Label for the reset state button in the table toolbar. (fr)", + "rowClassName": "Custom class name row. (fr)", + "rowPerPage": "Number of rows displayed per page. (fr)", + "rowPerPageOptions": "List of selectable options for rows per page. (fr)", + "showResetStateAction": "Button to reset the table state. (fr)", + "totalRecords": "Total number of records. (fr)", + "visibleColumns": "Array of columns that should be visible. (fr)", + "title": "Title of the table. (fr)", + "showColumnsAction": "Display column action. (fr)", + "fetchData": "Fetch table data. (fr)", + "handleResetState": "Callback triggered when reset state. (fr)", + "onRowSelectChange": "Callback triggered when selected rows change. (fr)", + "renderCustomPagination": "Custom pagination. (fr)", + "renderSortIcons": "Custom sort icon renderer for sortable columns. (fr)", + "renderTableFooterContent": "Custom table footer. (fr)", + "renderToolbarItems": "Custom toolbar items to display above the table. (fr)" + }, "subtitle": "The Table component displays data in tabular format. (fr)", "usage": { "basic": "Basic table (fr)", From bbaecfd730900729888fecbf9b06de0914eb8466 Mon Sep 17 00:00:00 2001 From: Bishal Shrestha Date: Wed, 6 Aug 2025 17:50:51 +0545 Subject: [PATCH 08/11] feat: update translations --- apps/demo/src/locales/en/ui.json | 27 +++++++-------------------- apps/demo/src/locales/fr/ui.json | 27 +++++++-------------------- 2 files changed, 14 insertions(+), 40 deletions(-) diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json index 2a4cceaa3..048e24273 100644 --- a/apps/demo/src/locales/en/ui.json +++ b/apps/demo/src/locales/en/ui.json @@ -267,30 +267,17 @@ "subtitle": "The Table component displays data in tabular format.", "usage": { "basic": "Basic table", - "builtInActionColumn": "Table demonstrating built in actions column use case", - "cellDataFormatting": "Table demonstrating cell content formatting", - "filterable": "Table with filterable column", - "sortable": "Table with sortable column", - "rowSelection": "Table with row selection", - "persistentState": "Table with persistent state", - "customCellDataFormatting": "Table with custom cell data formatter", - "customPagination": "Table with custom pagination", - "customToolbarActions": "Table with custom toolbar actions", - "columnTooltip": "Table with tooltip column", - "columnAlignment": "Table cell content alignments", + "cellDataFormatting": "Basic table(fr)", "columnAction": "Table with column action", - "withFooter": "Table with footer", - "withoutPagination": "Table without pagination", - "withTitle": "Table with title", - "withCustomFilter": "Table with custom filter component and filterFn", - "withEqualServerFilter": "Table with equal server filterFn", + "columnTooltip": "Table with tooltip column", + "customPaginationToolbarFooter": "Table with custom pagination, toolbar and footer", "customStaticFilter": "Table with custom filter component and static filterFn", - "divContent": "Table demonstrating center aligned content", + "rowSelection": "Table with row selection", + "rowSpecificActions": "Table with actions menu items filtered based on row data logic", "singleActionColumn": "Table with single action button", "singleActionColumnWithMenu": "Table with single action menu", - "rowSpecificActions": "Table with actions menu items filtered based on row data logic", - "tableBorderHorizontal": "Table with custom style for horizontal border", - "tableBorderVertical": "Table with custom style for vertical border" + "withCustomFilter": "Table with custom filter component and filterFn", + "withEqualServerFilter": "Table with equal server filterFn" }, "title": "Table" }, diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json index cd741e492..ae3766469 100644 --- a/apps/demo/src/locales/fr/ui.json +++ b/apps/demo/src/locales/fr/ui.json @@ -267,30 +267,17 @@ "subtitle": "The Table component displays data in tabular format. (fr)", "usage": { "basic": "Basic table (fr)", - "builtInActionColumn": "Table demonstrating built in actions column use case (fr)", - "cellDataFormatting": "Table demonstrating cell content formatting (fr)", - "filterable": "Table with filterable column (fr)", - "sortable": "Table with sortable column (fr)", - "rowSelection": "Table with row selection (fr)", - "persistentState": "Table with persistent state (fr)", - "customCellDataFormatting": "Table with custom cell data formatter (fr)", - "customPagination": "Table with custom pagination (fr)", - "customToolbarActions": "Table with custom toolbar actions (fr)", - "columnTooltip": "Table with tooltip column (fr)", - "columnAlignment": "Table cell content alignments (fr)", + "cellDataFormatting": "Basic table(fr)", "columnAction": "Table with column action (fr)", - "withFooter": "Table with footer (fr)", - "withoutPagination": "Table without pagination (fr)", - "withTitle": "Table with title (fr)", - "withCustomFilter": "Table with custom filter component and filterFn (fr)", - "withEqualServerFilter": "Table with equal server filterFn (fr)", + "columnTooltip": "Table with tooltip column (fr)", + "customPaginationToolbarFooter": "Table with custom pagination, toolbar and footer (fr)", "customStaticFilter": "Table with custom filter component and static filterFn (fr)", - "divContent": "Table demonstrating center aligned content (fr)", + "rowSelection": "Table with row selection (fr)", + "rowSpecificActions": "Table with actions menu items filtered based on row data logic (fr)", "singleActionColumn": "Table with single action button (fr)", "singleActionColumnWithMenu": "Table with single action menu (fr)", - "rowSpecificActions": "Table with actions menu items filtered based on row data logic (fr)", - "tableBorderHorizontal": "Table with custom style for horizontal border (fr)", - "tableBorderVertical": "Table with custom style for vertical border (fr)" + "withCustomFilter": "Table with custom filter component and filterFn (fr)", + "withEqualServerFilter": "Table with equal server filterFn (fr)" }, "title": "Table (fr)" }, From 6def189c027fd4a51e501d6a7cd392f75d9e7dbc Mon Sep 17 00:00:00 2001 From: Bishal Shrestha Date: Wed, 6 Aug 2025 18:02:00 +0545 Subject: [PATCH 09/11] feat: update props value --- .../src/Views/Ui/components/Table/Table.tsx | 36 +++++++++++++------ 1 file changed, 26 insertions(+), 10 deletions(-) diff --git a/apps/demo/src/Views/Ui/components/Table/Table.tsx b/apps/demo/src/Views/Ui/components/Table/Table.tsx index c8bd2661b..a2719b297 100644 --- a/apps/demo/src/Views/Ui/components/Table/Table.tsx +++ b/apps/demo/src/Views/Ui/components/Table/Table.tsx @@ -370,7 +370,23 @@ export const TableDemo = () => { > > = [ { accessorKey: "email", header: "Email", @@ -392,7 +408,7 @@ export const TableDemo = () => { dataType: "number", enableSorting: true, enableColumnFilter: true, - filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`, + filterPlaceholder: "Min,Max", }, { accessorKey: "city", @@ -944,7 +960,7 @@ const data = [ locale: "en-IN", }, enableColumnFilter: true, - filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`, + filterPlaceholder: "Min,Max", }, { accessorKey: "amount", @@ -961,7 +977,7 @@ const data = [ meta: { filterVariant: "range", }, - filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`, + filterPlaceholder: "Min,Max", }, { accessorKey: "date", @@ -983,7 +999,7 @@ const data = [ ]) } value={(column.getFilterValue() as [Date, Date])?.[0]} - placeholder={t("table.placeholder.startDate")} + placeholder={"Start date"} /> ); @@ -1060,7 +1076,7 @@ const data = [ locale: "en-IN", }, enableColumnFilter: true, - filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`, + filterPlaceholder: "Min,Max", }, { accessorKey: "amount", @@ -1077,7 +1093,7 @@ const data = [ meta: { filterVariant: "range", }, - filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`, + filterPlaceholder: "Min,Max", }, { accessorKey: "date", @@ -1099,7 +1115,7 @@ const data = [ ]) } value={(column.getFilterValue() as [Date, Date])?.[0]} - placeholder={t("table.placeholder.startDate")} + placeholder={"Start date"} /> ); From 9c560cc4978a5d6bfdbffd6e2cfba379d84a6d6c Mon Sep 17 00:00:00 2001 From: Bishal Shrestha Date: Wed, 6 Aug 2025 18:03:52 +0545 Subject: [PATCH 10/11] feat: update basic usage for button --- apps/demo/src/Views/Ui/components/Button/Button.tsx | 7 ------- apps/demo/src/locales/en/ui.json | 1 - apps/demo/src/locales/fr/ui.json | 1 - 3 files changed, 9 deletions(-) diff --git a/apps/demo/src/Views/Ui/components/Button/Button.tsx b/apps/demo/src/Views/Ui/components/Button/Button.tsx index 82c83a8ac..b4667bc1a 100644 --- a/apps/demo/src/Views/Ui/components/Button/Button.tsx +++ b/apps/demo/src/Views/Ui/components/Button/Button.tsx @@ -116,13 +116,6 @@ export const ButtonDemo = () => {
- - -
- -
Date: Wed, 6 Aug 2025 18:12:38 +0545 Subject: [PATCH 11/11] refactor: remove basic usage in demo --- .../src/Views/Ui/components/Button/Button.tsx | 6 ++--- .../Views/Ui/components/Button/components.tsx | 24 +------------------ 2 files changed, 4 insertions(+), 26 deletions(-) diff --git a/apps/demo/src/Views/Ui/components/Button/Button.tsx b/apps/demo/src/Views/Ui/components/Button/Button.tsx index b4667bc1a..d0e39e3db 100644 --- a/apps/demo/src/Views/Ui/components/Button/Button.tsx +++ b/apps/demo/src/Views/Ui/components/Button/Button.tsx @@ -2,7 +2,7 @@ import { useTranslation } from "@prefabs.tech/react-i18n"; import { TDataTable, Page, Button } from "@prefabs.tech/react-ui"; import { useNavigate } from "react-router-dom"; -import { Basic, Icons, Link, Severity, Size, Variant } from "./components"; +import { Basic, Icons, Link, Size, Variant } from "./components"; import { CodeBlock, Section } from "../../../../components/Demo"; export const ButtonDemo = () => { @@ -116,9 +116,9 @@ export const ButtonDemo = () => {
- +
diff --git a/apps/demo/src/Views/Ui/components/Button/components.tsx b/apps/demo/src/Views/Ui/components/Button/components.tsx index a310d16a8..b596519de 100644 --- a/apps/demo/src/Views/Ui/components/Button/components.tsx +++ b/apps/demo/src/Views/Ui/components/Button/components.tsx @@ -1,31 +1,9 @@ import { Button } from "@prefabs.tech/react-ui"; -import { useState } from "react"; const Basic = ({ isString = false, }: { isString?: boolean; -}): JSX.Element | string => { - const [clicked, setClicked] = useState(false); - - if (isString) { - return `
-
`; - } - - return ( -
-
- ); -}; - -const Severity = ({ - isString = false, -}: { - isString?: boolean; }): JSX.Element | string => { if (isString) { return `
@@ -222,4 +200,4 @@ const Link = ({ ); }; -export { Basic, Severity, Size, Variant, Icons, Link }; +export { Basic, Size, Variant, Icons, Link };