@sito/dashboard-app 0.0.46 → 0.0.48

package/README.md

@@ -24,7 +24,7 @@ pnpm add @sito/dashboard-app
 
 ## Core exports
 
-- Layout and navigation: `Page`, `Navbar`, `Drawer`, `TabsLayout`, `PrettyGrid`
+- Layout and navigation: `Page`, `Navbar`, `Drawer`, `TabsLayout`, `PrettyGrid`, `ToTop`
 - Actions and menus: `Actions`, `Action`, `Dropdown`, button components
 - Dialogs and forms: `Dialog`, `FormDialog`, `ImportDialog`, form inputs
 - Feedback: `Notification`, `Loading`, `Empty`, `Error`, `Onboarding`
@@ -73,6 +73,120 @@ import { TabsLayout } from "@sito/dashboard-app";
 
 `tabButtonProps` lets you customize each tab button style/behavior (except `onClick` and `children`, which are controlled by `TabsLayout`).
 
+### Onboarding
+
+`Onboarding` accepts structured steps instead of translation keys. Each step provides required `title` and `body`, plus optional `content`, `image`, and `alt`.
+Step copy is provided by the consumer app, so any i18n for the step itself should be resolved before rendering `Onboarding`.
+
+```tsx
+import { Onboarding } from "@sito/dashboard-app";
+
+<Onboarding
+  steps={[
+    {
+      title: "Welcome",
+      body: "This flow explains the main features.",
+    },
+    {
+      title: "Almost done",
+      body: "Add custom content when a step needs extra UI.",
+      content: <MyStepContent />,
+      image: "/images/setup.png",
+      alt: "Setup preview",
+    },
+  ]}
+/>
+```
+
+The action buttons still use the package's internal accessibility/button translation keys.
+
+### ImportDialog custom preview
+
+`ImportDialog` supports optional custom preview rendering via `renderCustomPreview`.
+If provided, it receives current parsed `previewItems` and replaces the default JSON preview.
+If omitted, the default preview remains unchanged.
+
+```tsx
+import { ImportDialog } from "@sito/dashboard-app";
+
+<ImportDialog<ProductImportPreviewDto>
+  open={open}
+  title="Import products"
+  handleClose={close}
+  handleSubmit={submit}
+  fileProcessor={parseFile}
+  renderCustomPreview={(items) => <ProductsPreviewTable items={items ?? []} />}
+/>
+```
+
+`useImportDialog` also accepts and forwards `renderCustomPreview`:
+
+```tsx
+import { useImportDialog } from "@sito/dashboard-app";
+
+const importDialog = useImportDialog<ProductDto, ProductImportPreviewDto>({
+  queryKey: ["products"],
+  entity: "products",
+  mutationFn: api.products.import,
+  fileProcessor: parseFile,
+  renderCustomPreview: (items) => <ProductsPreviewTable items={items ?? []} />,
+});
+```
+
+### PrettyGrid infinite scroll
+
+`PrettyGrid` supports optional infinite loading with `IntersectionObserver`.
+Current usage without infinite props keeps the same behavior.
+
+```tsx
+import { PrettyGrid, Loading } from "@sito/dashboard-app";
+
+<PrettyGrid<ProductDto>
+  data={products}
+  loading={isLoading}
+  renderComponent={(item) => <ProductCard item={item} />}
+  hasMore={hasMore}
+  loadingMore={isFetchingNextPage}
+  onLoadMore={fetchNextPage}
+  loadMoreComponent={<Loading className="!w-auto" loaderClass="w-5 h-5" />}
+/>
+```
+
+Defaults:
+
+- `hasMore = false`
+- `loadingMore = false`
+- `loadMoreComponent = null`
+- `observerRootMargin = "0px 0px 200px 0px"`
+- `observerThreshold = 0`
+
+### ToTop customization
+
+`ToTop` is now customizable while preserving current defaults.
+
+```tsx
+import { ToTop } from "@sito/dashboard-app";
+
+<ToTop
+  threshold={120}
+  tooltip="Back to top"
+  variant="outlined"
+  color="secondary"
+  className="right-8 bottom-8"
+  scrollTop={0}
+  scrollLeft={0}
+/>
+```
+
+Main optional props:
+
+- `threshold?: number` (default `200`)
+- `scrollTop?: number` / `scrollLeft?: number` (default `0` / `0`)
+- `icon?: IconDefinition`
+- `tooltip?: string`
+- `scrollOnClick?: boolean` (default `true`)
+- `onClick?: () => void`
+
 ## Initial setup example
 
 Wrap your app with the providers to enable navigation, React Query integration, auth context, and notifications.
@@ -156,7 +270,7 @@ export function App() {
 
 ## 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.
+`IndexedDBClient` is a drop-in offline alternative to `BaseClient`. It exposes the 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
 
@@ -236,6 +350,15 @@ function useProductsClient() {
 
 > **Note:** `IndexedDBClient` requires a browser environment. It will not work in SSR/Node contexts.
 
+Contract and filtering notes:
+
+- Preferred update contract is `update(value)` (aligned with `BaseClient.update(value)`).
+- Legacy `update(id, value)` remains temporarily supported for backward compatibility.
+- Filtering uses strict equality for regular keys.
+- `deletedAt` also supports boolean filtering:
+  - `deletedAt: true` => deleted rows (`deletedAt` not null/undefined)
+  - `deletedAt: false` => active rows (`deletedAt` null/undefined)
+
 ## Tests
 
 Automated tests are configured with `Vitest` + `@testing-library/react`.

package/dist/components/Buttons/IconButton.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ icon, ...rest }: import('./IconButton').IconButtonPropsLocalType) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    args: {
+        icon: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        type: "button";
+        name: string;
+        "aria-label": string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const Outlined: Story;
+export declare const Disabled: Story;

package/dist/components/Buttons/ToTop.d.ts

@@ -1 +1,12 @@
-export declare const ToTop: () => import("react/jsx-runtime").JSX.Element;
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { IconButtonPropsLocalType } from './IconButton';
+export type ToTopPropsType = Omit<IconButtonPropsLocalType, "icon" | "onClick"> & {
+    icon?: IconDefinition;
+    threshold?: number;
+    scrollTop?: number;
+    scrollLeft?: number;
+    tooltip?: string;
+    scrollOnClick?: boolean;
+    onClick?: () => void;
+};
+export declare const ToTop: (props: ToTopPropsType) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Buttons/ToTop.stories.d.ts

@@ -1,9 +1,12 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: () => import("react/jsx-runtime").JSX.Element;
+    component: (props: import('./ToTop').ToTopPropsType) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Basic: Story;
+export declare const Customized: Story;
+export declare const CustomIcon: Story;
+export declare const WithoutAutoScroll: Story;

package/dist/components/Buttons/ToTop.test.d.ts

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

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

@@ -0,0 +1,10 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: () => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const InNarrowContainer: Story;

package/dist/components/Dialog/ConfirmationDialog.stories.d.ts

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

package/dist/components/Dialog/DialogActions.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: (props: import('./types').DialogActionsProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    args: {
+        primaryText: string;
+        cancelText: string;
+        onPrimaryClick: () => void;
+        onCancel: () => void;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const Loading: Story;
+export declare const AlignedEnd: Story;

package/dist/components/Dialog/FormDialog.stories.d.ts

@@ -1,14 +1,21 @@
 import { StoryObj } from '@storybook/react';
-import { FieldValues } from 'react-hook-form';
+type FormDialogStoryProps = {
+    title?: string;
+    isLoading?: boolean;
+    buttonEnd?: boolean;
+};
 declare const meta: {
     title: string;
-    component: <TInput extends FieldValues>(props: import('./types').FormDialogPropsType<TInput>) => import("react/jsx-runtime").JSX.Element;
+    component: ({ title, isLoading, buttonEnd, }: FormDialogStoryProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     args: {
         title: string;
-        open: true;
+        isLoading: false;
+        buttonEnd: true;
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Basic: Story;
+export declare const Loading: Story;
+export declare const ButtonsAlignedStart: Story;

package/dist/components/Dialog/ImportDialog/ImportDialog.stories.d.ts

@@ -1,12 +1,24 @@
 import { StoryObj } from '@storybook/react';
+import { ImportPreviewDto } from '../../../lib';
+import { ImportDialogPropsType } from './types';
+type ImportDialogStoryProps = {
+    title?: string;
+    helperText?: string;
+    fileProcessor?: ImportDialogPropsType<ImportPreviewDto>["fileProcessor"];
+    renderCustomPreview?: ImportDialogPropsType<ImportPreviewDto>["renderCustomPreview"];
+};
 declare const meta: {
     title: string;
-    component: <EntityDto extends import('../../../lib').ImportPreviewDto>(props: import('./types').ImportDialogPropsType<EntityDto>) => import("react/jsx-runtime").JSX.Element;
+    component: ({ title, helperText, fileProcessor, renderCustomPreview, }: ImportDialogStoryProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     args: {
         title: string;
+        helperText: string;
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Basic: Story;
+export declare const WithAsyncPreview: Story;
+export declare const WithParseError: Story;
+export declare const WithCustomPreview: Story;

package/dist/components/Dialog/ImportDialog/ImportDialog.test.d.ts

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

package/dist/components/Dialog/ImportDialog/types.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { ImportPreviewDto } from '../../../lib';
 import { DialogPropsType } from '../..';
 export interface ImportDialogPropsType<EntityDto extends ImportPreviewDto> extends DialogPropsType {
@@ -7,5 +8,6 @@ export interface ImportDialogPropsType<EntityDto extends ImportPreviewDto> exten
         override?: boolean;
     }) => Promise<EntityDto[]>;
     onFileProcessed?: (items: EntityDto[]) => void;
+    renderCustomPreview?: (items?: EntityDto[] | null) => ReactNode;
     onOverrideChange?: (override: boolean) => void;
 }

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

@@ -12,3 +12,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Basic: Story;
 export declare const CustomMessage: Story;
+export declare const WithAction: Story;
+export declare const WithIcon: Story;

package/dist/components/Form/FormContainer.stories.d.ts

@@ -0,0 +1,19 @@
+import { StoryObj } from '@storybook/react';
+type FormContainerStoryProps = {
+    isLoading?: boolean;
+    buttonEnd?: boolean;
+};
+declare const meta: {
+    title: string;
+    component: ({ isLoading, buttonEnd, }: FormContainerStoryProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    args: {
+        isLoading: false;
+        buttonEnd: true;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const Loading: Story;
+export declare const ButtonsAlignedStart: Story;

package/dist/components/Form/ParagraphInput.stories.d.ts

@@ -16,7 +16,7 @@ declare const meta: {
             control: {
                 type: "select";
             };
-            options: string[];
+            options: State[];
         };
     };
 };
@@ -24,3 +24,6 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Basic: Story;
 export declare const ErrorState: Story;
+export declare const GoodState: Story;
+export declare const Disabled: Story;
+export declare const Uncontrolled: Story;

package/dist/components/Loading/SplashScreen.stories.d.ts

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

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

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

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

@@ -4,9 +4,18 @@ declare const meta: {
     component: (props: import('./types').OnboardingPropsType) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     args: {
-        steps: string[];
+        steps: ({
+            title: string;
+            body: string;
+            content?: undefined;
+        } | {
+            title: string;
+            body: string;
+            content: import("react/jsx-runtime").JSX.Element;
+        })[];
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Basic: Story;
+export declare const WithStepImages: Story;

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

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

package/dist/components/Onboarding/Step.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: (props: import('./types').StepPropsType) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    args: {
+        title: string;
+        body: string;
+        onClickNext: () => void;
+        final: false;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const WithImageAndContent: Story;
+export declare const FinalStep: Story;

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

@@ -1,10 +1,15 @@
-export type StepPropsType = {
-    translation: string;
-    onClickNext: () => void;
+import { ReactNode } from 'react';
+export type OnboardingStepType = {
+    title: ReactNode;
+    body: ReactNode;
+    content?: ReactNode;
     image?: string;
     alt?: string;
+};
+export type StepPropsType = OnboardingStepType & {
+    onClickNext: () => void;
     final?: boolean;
 };
 export type OnboardingPropsType = {
-    steps: string[];
+    steps: OnboardingStepType[];
 };

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

@@ -3,6 +3,17 @@ declare const meta: {
     title: string;
     component: <TEntity extends import('../../lib').BaseEntityDto>(props: import('./types').PagePropsType<TEntity>) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
+    decorators: ((Story: import('@storybook/core/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+        title?: string | undefined;
+        children: import('react').ReactNode;
+        isLoading?: boolean | undefined;
+        addOptions?: import('./types').PageAddOptions<import('../../lib').BaseEntityDto> | undefined;
+        filterOptions?: Partial<import('@sito/dashboard').ActionType<import('../../lib').BaseEntityDto>> | undefined;
+        isAnimated?: boolean | undefined;
+        actions?: import('@sito/dashboard').ActionType<import('../../lib').BaseEntityDto>[] | undefined;
+        showBackButton?: boolean | undefined;
+        queryKey?: string[] | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
     args: {
         title: string;
         showBackButton: true;

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

@@ -16,3 +16,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Basic: Story;
 export declare const Empty: Story;
+export declare const Loading: Story;
+export declare const InfiniteScroll: Story;

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

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

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

@@ -8,4 +8,10 @@ export type PrettyGridPropsType<TDto extends BaseEntityDto> = {
     loading?: boolean;
     className?: string;
     itemClassName?: string;
+    hasMore?: boolean;
+    loadingMore?: boolean;
+    onLoadMore?: () => void | Promise<void>;
+    loadMoreComponent?: ReactNode;
+    observerRootMargin?: string;
+    observerThreshold?: number;
 };

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

@@ -0,0 +1,19 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: (props: import('./types').TabPropsType) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    args: {
+        id: string;
+        to: string;
+        active: true;
+        useLinks: true;
+        onClick: () => void;
+        children: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const AsLink: Story;
+export declare const AsButton: Story;
+export declare const ToggleExample: Story;

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

@@ -16,3 +16,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Basic: Story;
 export declare const WithoutLinks: Story;
 export declare const WithCustomTabButton: Story;
+export declare const Controlled: Story;

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

@@ -4,6 +4,8 @@ export type TabButtonPropsType = Omit<ButtonPropsType, "children" | "onClick" |
 export type TabsLayoutPropsType = {
     tabs: TabsType[];
     defaultTab?: number;
+    currentTab?: number;
+    onTabChange?: (id: number | string) => void;
     className?: string;
     tabsContainerClassName?: string;
     useLinks?: boolean;