@prediktif/ui 0.1.20 → 0.1.21

package/README.md

@@ -139,7 +139,7 @@ Open [http://localhost:3000](http://localhost:3000) in your browser.
 
 ### 2. Adding a New Composed Component
 
-1. Create your component in `src/components/composed/my-component.tsx`:
+1. **Create the component** in `src/components/composed/my-component.tsx`:
    ```tsx
    export interface MyComponentProps {
      label: string;
@@ -149,12 +149,30 @@ Open [http://localhost:3000](http://localhost:3000) in your browser.
      return <div className="p-4 rounded-md border">{label}</div>;
    }
    ```
-2. Export the component in `src/components/composed/index.ts`:
+
+2. **Export the component** in `src/components/composed/index.ts`:
    ```ts
    export * from "./header-title";
    export * from "./my-component";
    ```
-3. (Optional) Create a documentation page in `src/app/(docs)/components/my-component/page.tsx` for visual testing.
+
+3. **Register in navigation** (`src/lib/docs-config.ts`):
+   ```ts
+   {
+     title: "Components",
+     url: "/components",
+     items: [
+       // ...
+       { title: "My Component", url: "/components/my-component" },
+     ]
+   }
+   ```
+
+4. **Create the documentation detail page** in `src/app/(docs)/components/my-component/page.tsx`:
+   - Include `<ComponentHeader>`, `<ComponentSection title="Preview">`, `<ComponentCodeExample>`, `<ComponentPropsTable>`, and `<ComponentPagination />`.
+
+5. **Add a preview card** to `src/app/(docs)/components/page.tsx`:
+   - Add `<Card>` with `<CardHeader>`, `<CardTitle>`, `<CardDescription className="truncate">`, and `<CardContent className="max-h-32 overflow-y-scroll">` wrapping `<ComponentPreview>`.
 
 ---
 

package/dist/index.d.mts

@@ -221,10 +221,7 @@ interface DataTableHeaderFilterProps<TData extends RowData> {
 declare function smartFilterFn<TData extends RowData>(row: Row<DataTableFeatures, TData>, columnId: string, filterValue: unknown): boolean;
 declare function DataTableHeaderFilter<TData extends RowData>({ table, columnFilters, }: DataTableHeaderFilterProps<TData>): react.JSX.Element | null;
 
-interface DataTableHeaderRefreshProps {
-    onRefresh?: () => void;
-}
-declare function DataTableHeaderRefresh({ onRefresh, }: DataTableHeaderRefreshProps): react.JSX.Element;
+declare function DataTableHeaderRefresh(): react.JSX.Element;
 
 interface DataTableHeaderSearchProps {
     value?: string;
@@ -254,8 +251,6 @@ interface DataTableProps<TData extends RowData> {
     renderCreateDialog?: (open: boolean, onOpenChange: (open: boolean) => void) => ReactNode;
     /** Label text for the add button (defaults to "Add") */
     addLabel?: string;
-    /** Callback triggered when user clicks the refresh button */
-    onRefresh?: () => void;
     /** Callback triggered when user downloads data */
     onDownload?: () => void;
     /** Base filename used when exporting data (defaults to "data-export") */
@@ -282,7 +277,7 @@ interface DataTableProps<TData extends RowData> {
  * data refresh, pagination, row actions, add/create modal dialog binding,
  * and standard hardcoded global empty state via StateEmpty.
  */
-declare function DataTable<TData extends RowData>({ columns, data, initialColumnVisibility, renderCreateDialog, addLabel, onRefresh, onDownload, exportFilename, showSearchInput, showRefreshButton, showSortButton, showFilterButton, showDownloadButton, showColumnToggleButton, showAddButton, }: DataTableProps<TData>): react.JSX.Element;
+declare function DataTable<TData extends RowData>({ columns, data, initialColumnVisibility, renderCreateDialog, addLabel, onDownload, exportFilename, showSearchInput, showRefreshButton, showSortButton, showFilterButton, showDownloadButton, showColumnToggleButton, showAddButton, }: DataTableProps<TData>): react.JSX.Element;
 
 interface HeaderTabItem {
     title: string;
@@ -326,4 +321,4 @@ interface StateEmptyProps {
 }
 declare const StateEmpty: react.NamedExoticComponent<StateEmptyProps>;
 
-export { AppSidebar, type AppSidebarProps, type ColumnMetaCustom, DataTable, DataTableContentBody, type DataTableContentBodyProps, DataTableContentHeader, type DataTableContentHeaderProps, type DataTableFeatures, DataTableFooterEntries, type DataTableFooterEntriesProps, DataTableFooterPagination, type DataTableFooterPaginationProps, DataTableHeaderAdd, type DataTableHeaderAddProps, DataTableHeaderDownload, type DataTableHeaderDownloadProps, DataTableHeaderFilter, type DataTableHeaderFilterProps, DataTableHeaderRefresh, type DataTableHeaderRefreshProps, DataTableHeaderSearch, type DataTableHeaderSearchProps, DataTableHeaderSort, type DataTableHeaderSortProps, DataTableHeaderToggle, type DataTableHeaderToggleProps, type DataTableProps, type FilterSelectOption, type FilterVariant, type HeaderTabItem, HeaderTabs, type HeaderTabsProps, HeaderTitle, type HeaderTitleProps, type NavItem, type OrganizationItem, type RowActionItem, RowActions, type RowActionsProps, StateEmpty, type StateEmptyProps, exportToCSV, exportToPDF, exportToXLSX, features, getTableExportData, printTable, smartFilterFn };
+export { AppSidebar, type AppSidebarProps, type ColumnMetaCustom, DataTable, DataTableContentBody, type DataTableContentBodyProps, DataTableContentHeader, type DataTableContentHeaderProps, type DataTableFeatures, DataTableFooterEntries, type DataTableFooterEntriesProps, DataTableFooterPagination, type DataTableFooterPaginationProps, DataTableHeaderAdd, type DataTableHeaderAddProps, DataTableHeaderDownload, type DataTableHeaderDownloadProps, DataTableHeaderFilter, type DataTableHeaderFilterProps, DataTableHeaderRefresh, DataTableHeaderSearch, type DataTableHeaderSearchProps, DataTableHeaderSort, type DataTableHeaderSortProps, DataTableHeaderToggle, type DataTableHeaderToggleProps, type DataTableProps, type FilterSelectOption, type FilterVariant, type HeaderTabItem, HeaderTabs, type HeaderTabsProps, HeaderTitle, type HeaderTitleProps, type NavItem, type OrganizationItem, type RowActionItem, RowActions, type RowActionsProps, StateEmpty, type StateEmptyProps, exportToCSV, exportToPDF, exportToXLSX, features, getTableExportData, printTable, smartFilterFn };

package/dist/index.d.ts

@@ -221,10 +221,7 @@ interface DataTableHeaderFilterProps<TData extends RowData> {
 declare function smartFilterFn<TData extends RowData>(row: Row<DataTableFeatures, TData>, columnId: string, filterValue: unknown): boolean;
 declare function DataTableHeaderFilter<TData extends RowData>({ table, columnFilters, }: DataTableHeaderFilterProps<TData>): react.JSX.Element | null;
 
-interface DataTableHeaderRefreshProps {
-    onRefresh?: () => void;
-}
-declare function DataTableHeaderRefresh({ onRefresh, }: DataTableHeaderRefreshProps): react.JSX.Element;
+declare function DataTableHeaderRefresh(): react.JSX.Element;
 
 interface DataTableHeaderSearchProps {
     value?: string;
@@ -254,8 +251,6 @@ interface DataTableProps<TData extends RowData> {
     renderCreateDialog?: (open: boolean, onOpenChange: (open: boolean) => void) => ReactNode;
     /** Label text for the add button (defaults to "Add") */
     addLabel?: string;
-    /** Callback triggered when user clicks the refresh button */
-    onRefresh?: () => void;
     /** Callback triggered when user downloads data */
     onDownload?: () => void;
     /** Base filename used when exporting data (defaults to "data-export") */
@@ -282,7 +277,7 @@ interface DataTableProps<TData extends RowData> {
  * data refresh, pagination, row actions, add/create modal dialog binding,
  * and standard hardcoded global empty state via StateEmpty.
  */
-declare function DataTable<TData extends RowData>({ columns, data, initialColumnVisibility, renderCreateDialog, addLabel, onRefresh, onDownload, exportFilename, showSearchInput, showRefreshButton, showSortButton, showFilterButton, showDownloadButton, showColumnToggleButton, showAddButton, }: DataTableProps<TData>): react.JSX.Element;
+declare function DataTable<TData extends RowData>({ columns, data, initialColumnVisibility, renderCreateDialog, addLabel, onDownload, exportFilename, showSearchInput, showRefreshButton, showSortButton, showFilterButton, showDownloadButton, showColumnToggleButton, showAddButton, }: DataTableProps<TData>): react.JSX.Element;
 
 interface HeaderTabItem {
     title: string;
@@ -326,4 +321,4 @@ interface StateEmptyProps {
 }
 declare const StateEmpty: react.NamedExoticComponent<StateEmptyProps>;
 
-export { AppSidebar, type AppSidebarProps, type ColumnMetaCustom, DataTable, DataTableContentBody, type DataTableContentBodyProps, DataTableContentHeader, type DataTableContentHeaderProps, type DataTableFeatures, DataTableFooterEntries, type DataTableFooterEntriesProps, DataTableFooterPagination, type DataTableFooterPaginationProps, DataTableHeaderAdd, type DataTableHeaderAddProps, DataTableHeaderDownload, type DataTableHeaderDownloadProps, DataTableHeaderFilter, type DataTableHeaderFilterProps, DataTableHeaderRefresh, type DataTableHeaderRefreshProps, DataTableHeaderSearch, type DataTableHeaderSearchProps, DataTableHeaderSort, type DataTableHeaderSortProps, DataTableHeaderToggle, type DataTableHeaderToggleProps, type DataTableProps, type FilterSelectOption, type FilterVariant, type HeaderTabItem, HeaderTabs, type HeaderTabsProps, HeaderTitle, type HeaderTitleProps, type NavItem, type OrganizationItem, type RowActionItem, RowActions, type RowActionsProps, StateEmpty, type StateEmptyProps, exportToCSV, exportToPDF, exportToXLSX, features, getTableExportData, printTable, smartFilterFn };
+export { AppSidebar, type AppSidebarProps, type ColumnMetaCustom, DataTable, DataTableContentBody, type DataTableContentBodyProps, DataTableContentHeader, type DataTableContentHeaderProps, type DataTableFeatures, DataTableFooterEntries, type DataTableFooterEntriesProps, DataTableFooterPagination, type DataTableFooterPaginationProps, DataTableHeaderAdd, type DataTableHeaderAddProps, DataTableHeaderDownload, type DataTableHeaderDownloadProps, DataTableHeaderFilter, type DataTableHeaderFilterProps, DataTableHeaderRefresh, DataTableHeaderSearch, type DataTableHeaderSearchProps, DataTableHeaderSort, type DataTableHeaderSortProps, DataTableHeaderToggle, type DataTableHeaderToggleProps, type DataTableProps, type FilterSelectOption, type FilterVariant, type HeaderTabItem, HeaderTabs, type HeaderTabsProps, HeaderTitle, type HeaderTitleProps, type NavItem, type OrganizationItem, type RowActionItem, RowActions, type RowActionsProps, StateEmpty, type StateEmptyProps, exportToCSV, exportToPDF, exportToXLSX, features, getTableExportData, printTable, smartFilterFn };

package/dist/index.js

@@ -1335,9 +1335,10 @@ function formatSegment(segment, subHref, navMainItems = [], navSecondaryItems =
 }
 function isRouteActive(url, pathname) {
   if (!pathname) return false;
-  if (url === "/") return pathname === "/";
-  const rootPrefix = `/${url.split("/")[1]}`;
-  return pathname === url || pathname.startsWith(rootPrefix);
+  const cleanUrl = url.replace(/\/$/, "") || "/";
+  const cleanPath = pathname.replace(/\/$/, "") || "/";
+  if (cleanUrl === "/") return cleanPath === "/";
+  return cleanPath === cleanUrl || cleanPath.startsWith(`${cleanUrl}/`);
 }
 var AppSidebar = (0, import_react.memo)(function AppSidebar2({
   name = "",
@@ -1532,6 +1533,7 @@ var AppSidebar = (0, import_react.memo)(function AppSidebar2({
 // src/components/composed/data-table/data-table.tsx
 var import_react_table4 = require("@tanstack/react-table");
 var import_lucide_react18 = require("lucide-react");
+var import_navigation3 = require("next/navigation");
 var import_react6 = require("react");
 
 // src/components/composed/state-empty.tsx
@@ -3015,18 +3017,12 @@ var import_lucide_react13 = require("lucide-react");
 var import_navigation2 = require("next/navigation");
 var import_react4 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
-function DataTableHeaderRefresh({
-  onRefresh
-}) {
+function DataTableHeaderRefresh() {
   const router = (0, import_navigation2.useRouter)();
   const [isRefreshing, setIsRefreshing] = (0, import_react4.useState)(false);
   const handleRefresh = () => {
     setIsRefreshing(true);
-    if (onRefresh) {
-      onRefresh();
-    } else {
-      router.refresh();
-    }
+    router.refresh();
     setTimeout(() => {
       setIsRefreshing(false);
     }, 750);
@@ -3284,7 +3280,6 @@ function DataTable({
   initialColumnVisibility,
   renderCreateDialog,
   addLabel,
-  onRefresh,
   onDownload,
   exportFilename = "data-export",
   showSearchInput = true,
@@ -3295,6 +3290,7 @@ function DataTable({
   showColumnToggleButton = true,
   showAddButton = true
 }) {
+  const router = (0, import_navigation3.useRouter)();
   const [createOpen, setCreateOpen] = (0, import_react6.useState)(false);
   const [sorting, setSorting] = (0, import_react6.useState)([]);
   const [columnFilters, setColumnFilters] = (0, import_react6.useState)([]);
@@ -3330,7 +3326,6 @@ function DataTable({
   });
   if (data.length === 0) {
     const hasCreateAction = Boolean(renderCreateDialog);
-    const hasRefreshAction = Boolean(onRefresh);
     return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "space-y-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         StateEmpty,
@@ -3339,8 +3334,8 @@ function DataTable({
           icon: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react18.FolderOpenIcon, { className: "size-6 text-muted-foreground" }),
           title: "No Data Available",
           description: "There are currently no records to display. Create a new record to get started.",
-          buttonText: hasCreateAction ? addLabel != null ? addLabel : "Add Record" : hasRefreshAction ? "Refresh" : void 0,
-          render: hasCreateAction ? () => setCreateOpen(true) : hasRefreshAction ? onRefresh : void 0
+          buttonText: hasCreateAction ? addLabel != null ? addLabel : "Add Record" : "Refresh",
+          render: hasCreateAction ? () => setCreateOpen(true) : () => router.refresh()
         }
       ),
       renderCreateDialog == null ? void 0 : renderCreateDialog(createOpen, setCreateOpen)
@@ -3356,7 +3351,7 @@ function DataTable({
         }
       ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", {}),
       /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-row items-center gap-1", children: [
-        showRefreshButton && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DataTableHeaderRefresh, { onRefresh }),
+        showRefreshButton && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DataTableHeaderRefresh, {}),
         showSortButton && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DataTableHeaderSort, { table, sorting }),
         showFilterButton && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           DataTableHeaderFilter,
@@ -3397,7 +3392,7 @@ function DataTable({
 
 // src/components/composed/header-tabs.tsx
 var import_link2 = __toESM(require("next/link"));
-var import_navigation3 = require("next/navigation");
+var import_navigation4 = require("next/navigation");
 var import_react7 = require("react");
 
 // src/components/ui/tabs.tsx
@@ -3490,7 +3485,7 @@ var HeaderTabs = (0, import_react7.memo)(function HeaderTabs2({
   children
 }) {
   var _a, _b;
-  const pathname = (0, import_navigation3.usePathname)();
+  const pathname = (0, import_navigation4.usePathname)();
   const matchedItem = pathname ? items.find(
     (item) => item.url === pathname || pathname.endsWith(item.url) || pathname.split("/").includes(item.value)
   ) : void 0;

package/dist/index.mjs

@@ -1277,9 +1277,10 @@ function formatSegment(segment, subHref, navMainItems = [], navSecondaryItems =
 }
 function isRouteActive(url, pathname) {
   if (!pathname) return false;
-  if (url === "/") return pathname === "/";
-  const rootPrefix = `/${url.split("/")[1]}`;
-  return pathname === url || pathname.startsWith(rootPrefix);
+  const cleanUrl = url.replace(/\/$/, "") || "/";
+  const cleanPath = pathname.replace(/\/$/, "") || "/";
+  if (cleanUrl === "/") return cleanPath === "/";
+  return cleanPath === cleanUrl || cleanPath.startsWith(`${cleanUrl}/`);
 }
 var AppSidebar = memo(function AppSidebar2({
   name = "",
@@ -1477,6 +1478,7 @@ import {
   useTable
 } from "@tanstack/react-table";
 import { FolderOpenIcon } from "lucide-react";
+import { useRouter as useRouter2 } from "next/navigation";
 import { useMemo as useMemo3, useState as useState5 } from "react";
 
 // src/components/composed/state-empty.tsx
@@ -2994,18 +2996,12 @@ import { RotateCwIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState as useState4 } from "react";
 import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
-function DataTableHeaderRefresh({
-  onRefresh
-}) {
+function DataTableHeaderRefresh() {
   const router = useRouter();
   const [isRefreshing, setIsRefreshing] = useState4(false);
   const handleRefresh = () => {
     setIsRefreshing(true);
-    if (onRefresh) {
-      onRefresh();
-    } else {
-      router.refresh();
-    }
+    router.refresh();
     setTimeout(() => {
       setIsRefreshing(false);
     }, 750);
@@ -3263,7 +3259,6 @@ function DataTable({
   initialColumnVisibility,
   renderCreateDialog,
   addLabel,
-  onRefresh,
   onDownload,
   exportFilename = "data-export",
   showSearchInput = true,
@@ -3274,6 +3269,7 @@ function DataTable({
   showColumnToggleButton = true,
   showAddButton = true
 }) {
+  const router = useRouter2();
   const [createOpen, setCreateOpen] = useState5(false);
   const [sorting, setSorting] = useState5([]);
   const [columnFilters, setColumnFilters] = useState5([]);
@@ -3309,7 +3305,6 @@ function DataTable({
   });
   if (data.length === 0) {
     const hasCreateAction = Boolean(renderCreateDialog);
-    const hasRefreshAction = Boolean(onRefresh);
     return /* @__PURE__ */ jsxs20("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsx31(
         StateEmpty,
@@ -3318,8 +3313,8 @@ function DataTable({
           icon: /* @__PURE__ */ jsx31(FolderOpenIcon, { className: "size-6 text-muted-foreground" }),
           title: "No Data Available",
           description: "There are currently no records to display. Create a new record to get started.",
-          buttonText: hasCreateAction ? addLabel != null ? addLabel : "Add Record" : hasRefreshAction ? "Refresh" : void 0,
-          render: hasCreateAction ? () => setCreateOpen(true) : hasRefreshAction ? onRefresh : void 0
+          buttonText: hasCreateAction ? addLabel != null ? addLabel : "Add Record" : "Refresh",
+          render: hasCreateAction ? () => setCreateOpen(true) : () => router.refresh()
         }
       ),
       renderCreateDialog == null ? void 0 : renderCreateDialog(createOpen, setCreateOpen)
@@ -3335,7 +3330,7 @@ function DataTable({
         }
       ) : /* @__PURE__ */ jsx31("div", {}),
       /* @__PURE__ */ jsxs20("div", { className: "flex flex-row items-center gap-1", children: [
-        showRefreshButton && /* @__PURE__ */ jsx31(DataTableHeaderRefresh, { onRefresh }),
+        showRefreshButton && /* @__PURE__ */ jsx31(DataTableHeaderRefresh, {}),
         showSortButton && /* @__PURE__ */ jsx31(DataTableHeaderSort, { table, sorting }),
         showFilterButton && /* @__PURE__ */ jsx31(
           DataTableHeaderFilter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prediktif/ui",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",