@sito/dashboard-app 0.0.44 → 0.0.46

package/README.md

@@ -19,7 +19,7 @@ pnpm add @sito/dashboard-app
 - React DOM `18.3.1`
 - `@tanstack/react-query` `5.83.0`
 - `react-hook-form` `7.61.1`
-- `@sito/dashboard` `^0.0.67`
+- `@sito/dashboard` `^0.0.68`
 - Font Awesome + Emotion peers defined in `package.json`
 
 ## Core exports
@@ -31,6 +31,48 @@ pnpm add @sito/dashboard-app
 - Hooks: `useImportDialog`, `useDeleteDialog`, `usePostForm`, `useDeleteAction`, `useNavbar`, and more — all action hooks ship with default `sticky`, `multiple`, `id`, `icon`, and `tooltip` values so only `onClick` is required
 - Providers and utilities: `ConfigProvider`, `ManagerProvider`, `AuthProvider`, `NotificationProvider`, `NavbarProvider`, DTOs, API clients
 
+## Component usage patterns
+
+### Error component
+
+`Error` supports two modes:
+
+- Default mode: icon + message + retry (uses `Button` internally)
+- Custom mode: pass `children` for fully custom content
+
+```tsx
+import { Error } from "@sito/dashboard-app";
+
+<Error
+  error={error}
+  onRetry={() => refetch()}
+  retryLabel="Retry"
+/>
+
+<Error>
+  <CustomErrorPanel />
+</Error>
+```
+
+Do not combine default props (`error`, `message`, `onRetry`, etc.) with `children` in the same instance.
+
+### TabsLayout link mode
+
+`TabsLayout` renders route links by default (`useLinks = true`).
+If your tabs are local UI state and should not navigate, set `useLinks={false}`.
+
+```tsx
+import { TabsLayout } from "@sito/dashboard-app";
+
+<TabsLayout
+  useLinks={false}
+  tabButtonProps={{ variant: "outlined", color: "secondary" }}
+  tabs={tabs}
+/>
+```
+
+`tabButtonProps` lets you customize each tab button style/behavior (except `onClick` and `children`, which are controlled by `TabsLayout`).
+
 ## Initial setup example
 
 Wrap your app with the providers to enable navigation, React Query integration, auth context, and notifications.
@@ -112,6 +154,88 @@ export function App() {
 - `npm run storybook`: run Storybook locally
 - `npm run build-storybook`: generate static Storybook build
 
+## Offline-first / IndexedDB fallback
+
+`IndexedDBClient` is a drop-in offline alternative to `BaseClient`. It exposes the exact same method surface (`insert`, `insertMany`, `update`, `get`, `getById`, `export`, `import`, `commonGet`, `softDelete`, `restore`) but stores data locally in the browser's IndexedDB instead of calling a remote API.
+
+### When to use it
+
+Use `IndexedDBClient` when the remote API is unreachable — for example in offline-capable dashboards, field apps, or PWAs. The pattern is to detect connectivity and swap the client transparently:
+
+```ts
+import { BaseClient, IndexedDBClient } from "@sito/dashboard-app";
+
+// Online: hit the API. Offline: read/write from IndexedDB.
+const productsClient = navigator.onLine
+  ? new ProductsClient(import.meta.env.VITE_API_URL)
+  : new ProductsIndexedDBClient();
+```
+
+### Creating an offline client
+
+Extend `IndexedDBClient` the same way you would extend `BaseClient`:
+
+```ts
+import {
+  IndexedDBClient,
+  BaseEntityDto,
+  BaseCommonEntityDto,
+  BaseFilterDto,
+  DeleteDto,
+  ImportPreviewDto,
+} from "@sito/dashboard-app";
+
+interface ProductDto extends BaseEntityDto {
+  name: string;
+  price: number;
+}
+
+interface ProductFilterDto extends BaseFilterDto {
+  category?: string;
+}
+
+class ProductsIndexedDBClient extends IndexedDBClient<
+  "products",
+  ProductDto,
+  ProductDto,           // TCommonDto
+  Omit<ProductDto, "id" | "createdAt" | "updatedAt" | "deletedAt">,
+  ProductDto,           // TUpdateDto (extends DeleteDto via BaseEntityDto)
+  ProductFilterDto,
+  ImportPreviewDto
+> {
+  constructor() {
+    super("products", "my-app-db");
+  }
+}
+```
+
+### Reacting to connectivity changes at runtime
+
+```ts
+import { useState, useEffect } from "react";
+
+function useProductsClient() {
+  const [client, setClient] = useState(
+    () => navigator.onLine ? new ProductsClient(apiUrl) : new ProductsIndexedDBClient()
+  );
+
+  useEffect(() => {
+    const goOnline  = () => setClient(new ProductsClient(apiUrl));
+    const goOffline = () => setClient(new ProductsIndexedDBClient());
+    window.addEventListener("online",  goOnline);
+    window.addEventListener("offline", goOffline);
+    return () => {
+      window.removeEventListener("online",  goOnline);
+      window.removeEventListener("offline", goOffline);
+    };
+  }, []);
+
+  return client;
+}
+```
+
+> **Note:** `IndexedDBClient` requires a browser environment. It will not work in SSR/Node contexts.
+
 ## Tests
 
 Automated tests are configured with `Vitest` + `@testing-library/react`.

package/dist/components/Drawer/Drawer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Empty/Empty.stories.d.ts

@@ -11,3 +11,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Basic: Story;
+export declare const CustomMessage: Story;

package/dist/components/Error/Error.stories.d.ts

@@ -4,10 +4,10 @@ declare const meta: {
     title: string;
     component: typeof ErrorComponent;
     tags: string[];
-    args: {
-        error: Error;
-    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Basic: Story;
+export declare const WithRetry: Story;
+export declare const WithCustomIcon: Story;
+export declare const CustomContent: Story;

package/dist/components/Error/types.d.ts

@@ -1,4 +1,32 @@
-export type ErrorPropsType = {
-    error: Error | null | undefined;
+import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react';
+import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+import { ButtonPropsType } from '@sito/dashboard';
+type ErrorIconPropsType = Omit<FontAwesomeIconProps, "icon"> & {
+    icon?: FontAwesomeIconProps["icon"];
+};
+export type ErrorDefaultPropsType = {
+    error?: Error | null;
+    message?: string;
+    iconProps?: ErrorIconPropsType | null;
+    onRetry?: () => void;
+    retryLabel?: string;
+    retryButtonProps?: Omit<ButtonPropsType, "type">;
+    messageProps?: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>;
+    className?: string;
     resetErrorBoundary?: () => void;
+    children?: never;
+};
+export type ErrorCustomContentPropsType = {
+    children: ReactNode;
+    className?: string;
+    error?: never;
+    message?: never;
+    iconProps?: never;
+    onRetry?: never;
+    retryLabel?: never;
+    retryButtonProps?: never;
+    messageProps?: never;
+    resetErrorBoundary?: never;
 };
+export type ErrorPropsType = ErrorDefaultPropsType | ErrorCustomContentPropsType;
+export {};

package/dist/components/Navbar/Navbar.stories.d.ts

@@ -16,9 +16,17 @@ declare const meta: {
         openDrawer: () => void;
         showSearch: true;
     };
+    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+        menuButtonProps?: import('..').IconButtonPropsLocalType | undefined;
+        openDrawer: () => void;
+        showSearch?: boolean | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Basic: Story;
 export declare const WithoutSearch: Story;
 export declare const WithCustomMenuButtonProps: Story;
+export declare const WithCustomTitle: Story;
+export declare const WithRightContent: Story;
+export declare const WithTitleAndRightContent: Story;

package/dist/components/Navbar/NavbarProvider.d.ts

@@ -0,0 +1,14 @@
+import { NavbarContextType, NavbarProviderPropTypes } from './types.js';
+declare const NavbarContext: import('react').Context<NavbarContextType>;
+/**
+ * Navbar Provider
+ * @param props - provider props
+ * @returns React component
+ */
+declare const NavbarProvider: (props: NavbarProviderPropTypes) => import("react/jsx-runtime").JSX.Element;
+/**
+ * useNavbar hook
+ * @returns Navbar context
+ */
+declare const useNavbar: () => NavbarContextType;
+export { NavbarContext, NavbarProvider, useNavbar };

package/dist/components/Navbar/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Navbar';
+export * from './NavbarProvider';
 export * from './types';

package/dist/components/Navbar/types.d.ts

@@ -1,6 +1,16 @@
+import { ReactNode } from 'react';
 import { IconButtonPropsLocalType } from '../Buttons/IconButton';
 export type NavbarPropsType = {
     menuButtonProps?: IconButtonPropsLocalType;
     openDrawer: () => void;
     showSearch?: boolean;
 };
+export type NavbarProviderPropTypes = {
+    children: ReactNode;
+};
+export type NavbarContextType = {
+    title: string;
+    setTitle: (value: string) => void;
+    rightContent: ReactNode;
+    setRightContent: (value: ReactNode) => void;
+};

package/dist/components/TabsLayout/TabsLayout.stories.d.ts

@@ -14,3 +14,5 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Basic: Story;
+export declare const WithoutLinks: Story;
+export declare const WithCustomTabButton: Story;

package/dist/components/TabsLayout/types.d.ts

@@ -1,9 +1,13 @@
 import { ReactNode } from 'react';
+import { ButtonPropsType } from '@sito/dashboard';
+export type TabButtonPropsType = Omit<ButtonPropsType, "children" | "onClick" | "type">;
 export type TabsLayoutPropsType = {
     tabs: TabsType[];
     defaultTab?: number;
     className?: string;
     tabsContainerClassName?: string;
+    useLinks?: boolean;
+    tabButtonProps?: TabButtonPropsType;
 };
 export type TabsType = {
     id: number | string;
@@ -18,4 +22,6 @@ export type TabPropsType = {
     active: boolean;
     onClick: () => void;
     siblings?: boolean;
+    useLinks?: boolean;
+    tabButtonProps?: TabButtonPropsType;
 };