refactor: page toolbar

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

@@ -1,10 +1,96 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
-import { Button, Page, Tag } from "@prefabs.tech/react-ui";
+import { Button, Page, Tag, TDataTable } from "@prefabs.tech/react-ui";
+import { useNavigate } from "react-router-dom";
+
+import { CodeBlock, Section } from "../../../components/Demo";
 
 export const PageDemo = () => {
   const [t] = useTranslation("ui");
+  const navigate = useNavigate();
+
+  const propertiesData = [
+    {
+      default: "-",
+      description: t("page.propertiesDescription.breadcrumb"),
+      prop: "breadcrumb",
+      type: "React.ReactNode",
+    },
+    {
+      default: "false",
+      description: t("page.propertiesDescription.centered"),
+      prop: "centered",
+      type: "boolean",
+    },
+    {
+      default: "-",
+      description: t("page.propertiesDescription.children"),
+      prop: "children",
+      type: "React.ReactNode",
+    },
+    {
+      default: "-",
+      description: t("page.propertiesDescription.className"),
+      prop: "className",
+      type: "string",
+    },
+    {
+      default: "-",
+      description: t("page.propertiesDescription.errorMessage"),
+      prop: "errorMessage",
+      type: "string",
+    },
+    {
+      default: "false",
+      description: t("page.propertiesDescription.loading"),
+      prop: "loading",
+      type: "boolean",
+    },
+    {
+      default: "-",
+      description: t("page.propertiesDescription.loadingComponent"),
+      prop: "loadingComponent",
+      type: "React.ReactElement",
+    },
+    {
+      default: "-",
+      description: t("page.propertiesDescription.loadingPageStyle"),
+      prop: "loadingPageStyle",
+      type: "LoadingPageProperties",
+    },
+    {
+      default: "-",
+      description: t("page.propertiesDescription.subtitle"),
+      prop: "subtitle",
+      type: "string | React.ReactNode",
+    },
+    {
+      default: "-",
+      description: t("page.propertiesDescription.title"),
+      prop: "title",
+      type: "string | React.ReactNode",
+    },
+    {
+      default: "-",
+      description: t("page.propertiesDescription.titleTag"),
+      prop: "titleTag",
+      type: "string | React.ReactNode",
+    },
+    {
+      default: "-",
+      description: t("page.propertiesDescription.toolbarActionMenu"),
+      prop: "toolbarActionMenu",
+      type: "ToolbarActionsMenuProperties",
+    },
+    {
+      default: "-",
+      description: t("page.propertiesDescription.toolbar"),
+      prop: "toolbar",
+      type: "React.ReactNode",
+    },
+  ];
+
+  const pageContent = <div style={{ height: "20vh" }}>Page content.</div>;
 
-  const PageContent = <div style={{ height: "20vh" }}>{t("page.content")}</div>;
   const breadcrumb = (
     <Button
       iconLeft={<i className="pi pi-chevron-left"></i>}
@@ -15,61 +101,218 @@ export const PageDemo = () => {
 
   return (
     <>
-      <Page title={t("page.title.basic")}>{PageContent}</Page>
-
-      <hr />
       <Page
-        title={t("page.title.toolbar")}
-        toolbar={<Button label={t("page.toolbar.edit")} />}
-        children={PageContent}
-      />
+        title={t("page.title")}
+        subtitle={t("page.subtitle")}
+        toolbar={
+          <Button
+            label={t("buttons.back")}
+            variant="textOnly"
+            iconLeft={<i className="pi pi-chevron-left"></i>}
+            onClick={() => navigate("..")}
+          />
+        }
+      ></Page>
+      <Section title={t("headers.usage")}>
+        <p>{t("common.usage", { component: "Page" })}</p>
+        <CodeBlock exampleCode='import { Page } from "@prefabs.tech/react-ui"' />
+      </Section>
 
-      <hr />
-      <Page
-        title={t("page.title.centerAligned")}
-        toolbar={<Button label={t("page.toolbar.edit")} />}
-        children={PageContent}
-        centered={true}
-      />
+      <Section title={t("page.usage.basic")}>
+        <Page
+          title={"Basic page title"}
+          toolbarActionMenu={{
+            actions: [
+              {
+                iconLeft: <i className="pi pi-chevron-left"></i>,
+                variant: "textOnly",
+                label: "Back",
+              },
+              {
+                label: "Click",
+                severity: "secondary",
+              },
+              {
+                label: "Delete",
+                className: "danger",
+              },
+            ],
+          }}
+          children={pageContent}
+        />
+        <CodeBlock
+          exampleCode='const pageContent = <div style={{ height: "20vh" }}>Page content.</div>;
 
-      <hr />
-      <Page
-        title={t("page.title.stringSubtitle")}
-        subtitle={t("page.subTitle.title")}
-        children={PageContent}
-      />
+<Page
+  title={"Basic page title"}
+  toolbarActionMenu={{
+    actions: [
+      {
+        iconLeft: <i className="pi pi-chevron-left"></i>,
+        variant: "textOnly",
+        label: "Back",
+      },
+      {
+        label: "Click",
+        severity: "secondary",
+      },
+      {
+        label: "Delete",
+        className: "danger",
+      },
+    ],
+  }}
+  children={pageContent}
+/>'
+        />
+      </Section>
 
-      <hr />
-      <Page
-        title={t("page.title.componentSubtitle")}
-        subtitle={<Tag label={t("page.subTitle.tag")} />}
-        children={PageContent}
-      />
+      <Section title={t("page.usage.toolbarAndBreadcrumb")}>
+        <Page
+          title={"Page title"}
+          children={pageContent}
+          breadcrumb={breadcrumb}
+          toolbar={
+            <>
+              <Button severity="secondary" label={"Edit"} />
+              <Button severity="danger" label={"Delete"} />
+            </>
+          }
+        />
+        <CodeBlock
+          exampleCode='const pageContent = <div style={{ height: "20vh" }}>Page content.</div>;
+const breadcrumb = (
+  <Button
+    iconLeft={<i className="pi pi-chevron-left"></i>}
+    variant="textOnly"
+    label={t("page.breadcrumb.back")}
+  />
+);
 
-      <hr />
-      <Page
-        title={t("page.title.breadcrumb")}
-        children={PageContent}
-        breadcrumb={breadcrumb}
-      />
+<Page
+  title={"Page title"}
+  children={pageContent}
+  breadcrumb={breadcrumb}
+  toolbar={
+    <>
+      <Button severity="secondary" label={"Edit"} />
+      <Button severity="danger" label={"Delete"} />
+    </>
+  }
+/>'
+        />
+      </Section>
 
-      <hr />
-      <Page
-        title={t("page.title.complete")}
-        titleTag={<Tag label={t("page.heading.tag")} />}
-        toolbar={
-          <>
-            <Button
-              severity="secondary"
-              label={t("page.toolbar.button.label")}
-            />
-            <Button label={t("page.toolbar.edit")} />
-          </>
-        }
-        subtitle={<Tag label={t("page.subTitle.tag")} />}
-        children={PageContent}
-        breadcrumb={breadcrumb}
-      />
+      <Section title={t("page.usage.complete")}>
+        <Page
+          title={"Page header title"}
+          titleTag={<Tag label={"Heading tag"} />}
+          subtitle={<Tag label={"Subtitle tag"} />}
+          children={pageContent}
+          toolbarActionMenu={{
+            actions: [
+              {
+                iconLeft: <i className="pi pi-chevron-left"></i>,
+                variant: "textOnly",
+                label: "Back",
+              },
+              {
+                label: "Edit",
+                severity: "secondary",
+              },
+              {
+                iconLeft: "pi pi-trash",
+                label: "Delete",
+                variant: "outlined",
+                className: "danger",
+                onClick: () => {
+                  console.log("Event clicked");
+                },
+                iconOnly: true,
+              },
+            ],
+          }}
+        />
+
+        <CodeBlock
+          exampleCode='const pageContent = <div style={{ height: "20vh" }}>Page content.</div>;
+
+<Page
+  title={"Page header title"}
+  titleTag={<Tag label={"Heading tag"} />}
+  subtitle={<Tag label={"Subtitle tag"} />}
+  children={pageContent}
+  toolbarActionMenu={{
+    actions: [
+      {
+        iconLeft: <i className="pi pi-chevron-left"></i>,
+        variant: "textOnly",
+        label: "Back",
+      },
+      {
+        label: "Edit",
+        severity: "secondary",
+      },
+      {
+        iconLeft: "pi pi-trash",
+        label: "Delete",
+        variant: "outlined",
+        className: "danger",
+        onClick: () => {
+          console.log("Event clicked");
+        },
+        iconOnly: true,
+      },
+    ],
+  }}
+/>'
+        />
+      </Section>
+
+      <Section
+        title={t("headers.propertiesValue", {
+          value: "PageProperties",
+        })}
+      >
+        <TDataTable
+          columns={[
+            {
+              accessorKey: "prop",
+              header: t("propertiesTable.header.properties"),
+            },
+            {
+              accessorKey: "type",
+              header: t("propertiesTable.header.type"),
+            },
+            {
+              accessorKey: "default",
+              header: t("propertiesTable.header.default"),
+            },
+            {
+              accessorKey: "description",
+              header: t("propertiesTable.header.description"),
+            },
+          ]}
+          data={propertiesData}
+          paginated={false}
+        />
+      </Section>
+
+      <Section title={t("headers.types")}>
+        <CodeBlock
+          exampleCode='
+interface ActionsMenuItem
+  extends Omit<MenuItem, "onClick">,
+    Partial<IButtonProperties> {
+  iconOnly?: boolean;
+  onClick?: (event?: React.MouseEvent | React.KeyboardEvent) => void;
+}
+
+interface ToolbarActionsMenuProperties {
+actions?: ActionsMenuItem[];
+}'
+        />
+      </Section>
     </>
   );
 };

apps/demo/src/Views/Ui/pages.tsx

@@ -212,7 +212,7 @@ const MISC_ROUTES = [
   },
   {
     path: UI_ROUTES.PAGE_DEMO,
-    key: "page.title.menu",
+    key: "page.title",
     element: <PageDemo />,
   },
   {