@ttoss/react-dashboard 0.2.4 → 0.3.0

package/README.md

@@ -274,6 +274,71 @@ import { DashboardGrid } from '@ttoss/react-dashboard';
 | --------- | --------- | ------- | ----------------------------- |
 | `loading` | `boolean` | -       | Shows loading spinner if true |
 
+### DashboardSectionDivider
+
+Component that displays a section divider with a title and horizontal line to visually separate sections in the dashboard grid.
+
+```tsx
+import { DashboardSectionDivider } from '@ttoss/react-dashboard';
+
+<DashboardSectionDivider title="Performance Metrics" />;
+```
+
+**Props:**
+
+| Prop    | Type     | Default | Description                |
+| ------- | -------- | ------- | -------------------------- |
+| `title` | `string` | -       | The title of the section   |
+| `type`  | `string` | -       | Must be `'sectionDivider'` |
+
+**Usage in Dashboard Grid:**
+
+Section dividers can be added to the dashboard grid just like regular cards. They help organize dashboard content into logical sections:
+
+```tsx
+const selectedTemplate: DashboardTemplate = {
+  id: 'default',
+  name: 'Default Template',
+  grid: [
+    {
+      i: 'card-1',
+      x: 0,
+      y: 0,
+      w: 4,
+      h: 4,
+      card: {
+        title: 'Total Revenue',
+        type: 'bigNumber',
+        // ... other card properties
+      },
+    },
+    {
+      i: 'divider-1',
+      x: 0,
+      y: 4,
+      w: 12, // Full width for divider
+      h: 2, // Smaller height for divider
+      card: {
+        type: 'sectionDivider',
+        title: 'Performance Metrics',
+      },
+    },
+    {
+      i: 'card-2',
+      x: 0,
+      y: 6,
+      w: 4,
+      h: 4,
+      card: {
+        title: 'ROAS',
+        type: 'bigNumber',
+        // ... other card properties
+      },
+    },
+  ],
+};
+```
+
 ## Filter Types
 
 ### Text Filter
@@ -364,7 +429,7 @@ interface DashboardTemplate {
 
 ```tsx
 interface DashboardGridItem extends ReactGridLayout.Layout {
-  card: DashboardCard;
+  card: DashboardCard | SectionDivider;
 }
 ```
 
@@ -492,6 +557,33 @@ status={{
 }}
 ```
 
+### SectionDivider
+
+Type for section divider items in the dashboard grid.
+
+```tsx
+type SectionDivider = {
+  type: 'sectionDivider';
+  title: string;
+};
+```
+
+**Example:**
+
+```tsx
+{
+  i: 'divider-1',
+  x: 0,
+  y: 4,
+  w: 12,
+  h: 2,
+  card: {
+    type: 'sectionDivider',
+    title: 'Performance Metrics',
+  },
+}
+```
+
 ## Complete Example
 
 ```tsx

package/dist/esm/index.js

@@ -7,11 +7,11 @@ var __name = (target, value) => __defProp(target, "name", {
 });
 
 // src/Dashboard.tsx
-import { Divider, Flex as Flex6 } from "@ttoss/ui";
+import { Divider as Divider2, Flex as Flex7 } from "@ttoss/ui";
 
 // src/DashboardGrid.tsx
 import "react-grid-layout/css/styles.css";
-import { Box as Box3, Flex as Flex3, Spinner } from "@ttoss/ui";
+import { Box as Box3, Flex as Flex4, Spinner } from "@ttoss/ui";
 import { Responsive, WidthProvider } from "react-grid-layout";
 
 // src/Cards/BigNumber.tsx
@@ -104,7 +104,7 @@ var formatNumber = /* @__PURE__ */__name((value, type, numberDecimalPlaces) => {
         currency: "BRL"
       }).format(value);
     case "percentage":
-      return `${value.toFixed(2)}%`;
+      return `${value.toFixed(numberDecimalPlaces ?? 2)}%`;
     case "number":
     default:
       {
@@ -234,6 +234,36 @@ var DashboardCard = /* @__PURE__ */__name(props => {
   }
 }, "DashboardCard");
 
+// src/DashboardSectionDivider.tsx
+import { Divider, Flex as Flex3, Text as Text3 } from "@ttoss/ui";
+var DashboardSectionDivider = /* @__PURE__ */__name(({
+  title
+}) => {
+  return /* @__PURE__ */React.createElement(Flex3, {
+    sx: {
+      width: "100%",
+      height: "100%",
+      alignItems: "center",
+      justifyContent: "center",
+      flexDirection: "row",
+      gap: "6",
+      paddingTop: "10"
+    }
+  }, /* @__PURE__ */React.createElement(Text3, {
+    sx: {
+      color: "input.background.muted.disabled",
+      fontSize: "md",
+      fontWeight: "bold",
+      flex: "none"
+    }
+  }, title), /* @__PURE__ */React.createElement(Divider, {
+    sx: {
+      width: "100%",
+      color: "display.border.muted.default"
+    }
+  }));
+}, "DashboardSectionDivider");
+
 // src/DashboardGrid.tsx
 var ResponsiveGridLayout = WidthProvider(Responsive);
 var DashboardGrid = /* @__PURE__ */__name(({
@@ -279,7 +309,7 @@ var DashboardGrid = /* @__PURE__ */__name(({
       width: "100%",
       height: "full"
     }
-  }, loading ? /* @__PURE__ */React.createElement(Flex3, {
+  }, loading ? /* @__PURE__ */React.createElement(Flex4, {
     sx: {
       width: "100%",
       height: "full",
@@ -295,6 +325,11 @@ var DashboardGrid = /* @__PURE__ */__name(({
     margin: [10, 10],
     containerPadding: [0, 0]
   }, selectedTemplate.grid.map(item => {
+    if (item.card.type === "sectionDivider") {
+      return /* @__PURE__ */React.createElement("div", {
+        key: item.i
+      }, /* @__PURE__ */React.createElement(DashboardSectionDivider, item.card));
+    }
     return /* @__PURE__ */React.createElement("div", {
       key: item.i
     }, /* @__PURE__ */React.createElement(DashboardCard, item.card));
@@ -302,11 +337,11 @@ var DashboardGrid = /* @__PURE__ */__name(({
 }, "DashboardGrid");
 
 // src/DashboardHeader.tsx
-import { Flex as Flex5 } from "@ttoss/ui";
+import { Flex as Flex6 } from "@ttoss/ui";
 import * as React7 from "react";
 
 // src/DashboardFilters.tsx
-import { Flex as Flex4 } from "@ttoss/ui";
+import { Flex as Flex5 } from "@ttoss/ui";
 import * as React6 from "react";
 
 // src/DashboardProvider.tsx
@@ -508,7 +543,7 @@ var DashboardFilters = /* @__PURE__ */__name(() => {
     }
     return handlers;
   }, [filters, updateFilter]);
-  return /* @__PURE__ */React6.createElement(Flex4, {
+  return /* @__PURE__ */React6.createElement(Flex5, {
     sx: {
       gap: "2",
       flexDirection: "row",
@@ -562,7 +597,7 @@ var DashboardFilters = /* @__PURE__ */__name(() => {
 var DashboardHeader = /* @__PURE__ */__name(({
   children
 }) => {
-  return /* @__PURE__ */React7.createElement(Flex5, {
+  return /* @__PURE__ */React7.createElement(Flex6, {
     sx: {
       padding: "2"
     }
@@ -575,14 +610,14 @@ var DashboardContent = /* @__PURE__ */__name(({
   headerChildren,
   selectedTemplate
 }) => {
-  return /* @__PURE__ */React.createElement(Flex6, {
+  return /* @__PURE__ */React.createElement(Flex7, {
     sx: {
       flexDirection: "column",
       gap: "5",
       padding: "2",
       width: "100%"
     }
-  }, /* @__PURE__ */React.createElement(DashboardHeader, null, headerChildren), /* @__PURE__ */React.createElement(Divider, null), /* @__PURE__ */React.createElement(DashboardGrid, {
+  }, /* @__PURE__ */React.createElement(DashboardHeader, null, headerChildren), /* @__PURE__ */React.createElement(Divider2, null), /* @__PURE__ */React.createElement(DashboardGrid, {
     loading,
     selectedTemplate
   }));
@@ -606,4 +641,4 @@ var Dashboard = /* @__PURE__ */__name(({
     selectedTemplate
   }));
 }, "Dashboard");
-export { Dashboard, DashboardCard, DashboardFilterType, DashboardFilters, DashboardGrid, DashboardHeader, DashboardProvider, useDashboard };
+export { Dashboard, DashboardCard, DashboardFilterType, DashboardFilters, DashboardGrid, DashboardHeader, DashboardProvider, DashboardSectionDivider, useDashboard };

package/dist/index.d.ts

@@ -83,8 +83,14 @@ type DashboardFilter = {
 };
 declare const DashboardFilters: () => react_jsx_runtime.JSX.Element;
 
+type SectionDivider = {
+    type: string;
+    title: string;
+};
+declare const DashboardSectionDivider: ({ title }: SectionDivider) => react_jsx_runtime.JSX.Element;
+
 type DashboardGridItem = ReactGridLayout.Layout & {
-    card: DashboardCard;
+    card: DashboardCard | SectionDivider;
 };
 interface DashboardTemplate {
     id: string;
@@ -124,4 +130,4 @@ declare const useDashboard: () => {
     selectedTemplate: DashboardTemplate | undefined;
 };
 
-export { Dashboard, DashboardCard, type DashboardFilter, DashboardFilterType, type DashboardFilterValue, DashboardFilters, DashboardGrid, type DashboardGridItem, DashboardHeader, DashboardProvider, type DashboardTemplate, useDashboard };
+export { Dashboard, DashboardCard, type DashboardFilter, DashboardFilterType, type DashboardFilterValue, DashboardFilters, DashboardGrid, type DashboardGridItem, DashboardHeader, DashboardProvider, DashboardSectionDivider, type DashboardTemplate, type SectionDivider, useDashboard };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-dashboard",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "ttoss dashboard module for React apps.",
   "license": "MIT",
   "author": "ttoss",
@@ -41,8 +41,8 @@
     "jest": "^30.2.0",
     "react": "^19.2.3",
     "tsup": "^8.5.1",
-    "@ttoss/test-utils": "^4.0.3",
-    "@ttoss/config": "^1.35.12"
+    "@ttoss/config": "^1.35.12",
+    "@ttoss/test-utils": "^4.0.3"
   },
   "keywords": [
     "React",