@prediktif/ui 0.1.20 → 0.1.22

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

@@ -41,6 +41,38 @@ interface AppSidebarProps {
 }
 declare const AppSidebar: react.NamedExoticComponent<AppSidebarProps>;
 
+interface AvatarUserProps {
+    name?: string | null;
+    image?: string | null;
+}
+declare const AvatarUser: react.NamedExoticComponent<AvatarUserProps>;
+
+interface EmailLabelProps {
+    email?: string | null;
+}
+declare const EmailLabel: react.NamedExoticComponent<EmailLabelProps>;
+
+interface EmailVerifiedProps {
+    verified: boolean;
+}
+declare const EmailVerified: react.NamedExoticComponent<EmailVerifiedProps>;
+
+interface JoinedLabelProps {
+    joined?: Date | string | null;
+    locale?: string;
+}
+declare const JoinedLabel: react.NamedExoticComponent<JoinedLabelProps>;
+
+interface UserRoleProps {
+    role?: string | null;
+}
+declare const UserRole: react.NamedExoticComponent<UserRoleProps>;
+
+interface UserStatusProps {
+    status?: boolean | null;
+}
+declare const UserStatus: react.NamedExoticComponent<UserStatusProps>;
+
 /**
  * Configure TanStack Table features used by DataTable.
  * Enables column/global filtering, visibility toggling, pagination, row selection, and sorting.
@@ -221,10 +253,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 +283,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 +309,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 +353,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, AvatarUser, type AvatarUserProps, 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, EmailLabel, type EmailLabelProps, EmailVerified, type EmailVerifiedProps, type FilterSelectOption, type FilterVariant, type HeaderTabItem, HeaderTabs, type HeaderTabsProps, HeaderTitle, type HeaderTitleProps, JoinedLabel, type JoinedLabelProps, type NavItem, type OrganizationItem, type RowActionItem, RowActions, type RowActionsProps, StateEmpty, type StateEmptyProps, UserRole, type UserRoleProps, UserStatus, type UserStatusProps, exportToCSV, exportToPDF, exportToXLSX, features, getTableExportData, printTable, smartFilterFn };

package/dist/index.d.ts

@@ -41,6 +41,38 @@ interface AppSidebarProps {
 }
 declare const AppSidebar: react.NamedExoticComponent<AppSidebarProps>;
 
+interface AvatarUserProps {
+    name?: string | null;
+    image?: string | null;
+}
+declare const AvatarUser: react.NamedExoticComponent<AvatarUserProps>;
+
+interface EmailLabelProps {
+    email?: string | null;
+}
+declare const EmailLabel: react.NamedExoticComponent<EmailLabelProps>;
+
+interface EmailVerifiedProps {
+    verified: boolean;
+}
+declare const EmailVerified: react.NamedExoticComponent<EmailVerifiedProps>;
+
+interface JoinedLabelProps {
+    joined?: Date | string | null;
+    locale?: string;
+}
+declare const JoinedLabel: react.NamedExoticComponent<JoinedLabelProps>;
+
+interface UserRoleProps {
+    role?: string | null;
+}
+declare const UserRole: react.NamedExoticComponent<UserRoleProps>;
+
+interface UserStatusProps {
+    status?: boolean | null;
+}
+declare const UserStatus: react.NamedExoticComponent<UserStatusProps>;
+
 /**
  * Configure TanStack Table features used by DataTable.
  * Enables column/global filtering, visibility toggling, pagination, row selection, and sorting.
@@ -221,10 +253,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 +283,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 +309,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 +353,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, AvatarUser, type AvatarUserProps, 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, EmailLabel, type EmailLabelProps, EmailVerified, type EmailVerifiedProps, type FilterSelectOption, type FilterVariant, type HeaderTabItem, HeaderTabs, type HeaderTabsProps, HeaderTitle, type HeaderTitleProps, JoinedLabel, type JoinedLabelProps, type NavItem, type OrganizationItem, type RowActionItem, RowActions, type RowActionsProps, StateEmpty, type StateEmptyProps, UserRole, type UserRoleProps, UserStatus, type UserStatusProps, exportToCSV, exportToPDF, exportToXLSX, features, getTableExportData, printTable, smartFilterFn };