@sito/dashboard 0.0.63 → 0.0.65

package/README.md

@@ -1,14 +1,13 @@
 # @sito/dashboard
 
-`@sito/dashboard` is a React + TypeScript UI library focused on reusable dashboard components.
+`@sito/dashboard` is a React + TypeScript UI library for dashboard and admin interfaces.
 
-## Project Description
+## Highlights
 
-This package provides ready-to-use components for admin/dashboard use cases, with focus on data-heavy screens:
-
-- `Table` with sorting, filtering, pagination, row selection, bulk actions, and expandable rows.
-- Form inputs and utility components (`Badge`, `Chip`, `Tooltip`, `Loading`, icons).
-- Built-in providers for translations and table state management.
+- `Table` component with sorting, filtering, pagination, row selection, bulk actions, and expandable rows.
+- Reusable UI pieces: `Badge`, `Button`, `Chip`, `Dropdown`, `IconButton`, `Loading`, `Tooltip`, and `SvgIcons`.
+- Form controls: `TextInput`, `SelectInput`, `AutocompleteInput`, `CheckInput`, and `FileInput`.
+- Built-in providers for translations and table state (`TranslationProvider`, `TableOptionsProvider`).
 
 ## Installation
 
@@ -18,22 +17,18 @@ npm install @sito/dashboard
 
 # yarn
 yarn add @sito/dashboard
-```
 
-### Peer dependencies
+# pnpm
+pnpm add @sito/dashboard
+```
 
-Make sure your app provides compatible versions:
+### Peer dependency
 
 - `react` (`>=18.2 <20`)
-- `@emotion/css` (`11.13.5`)
-
-## Usage
 
-Important:
+## Quick Usage
 
-- Import from `@sito/dashboard` (not from `@sito/dashboard/lib`).
-- `Table` should be wrapped by `TranslationProvider` and `TableOptionsProvider`.
-- `actions` is a callback per row: `(row) => ActionType[]`.
+Import directly from `@sito/dashboard` (do not import from internal paths).
 
 ```tsx
 import {
@@ -54,48 +49,7 @@ const rows: UserRow[] = [
   { id: 2, deletedAt: null, name: "Jane Smith", age: 25 },
 ];
 
-const actions = (row: UserRow) => [
-  {
-    id: "view",
-    tooltip: `View ${row.name}`,
-    icon: <span>View</span>,
-    onClick: () => console.log("View", row),
-  },
-  {
-    id: "delete",
-    tooltip: "Delete selected",
-    icon: <span>Delete</span>,
-    multiple: true,
-    onClick: () => console.log("Delete", row),
-    onMultipleClick: (selectedRows: UserRow[]) =>
-      console.log("Bulk delete", selectedRows.map(({ name }) => name)),
-  },
-];
-
-const translations: Record<string, string> = {
-  "_accessibility:components.table.selectedCount": "Selected {{count}} items",
-  "_accessibility:labels.actions": "Actions",
-  "_accessibility:buttons.filters": "Filters",
-  "_accessibility:buttons.previous": "Previous page",
-  "_accessibility:buttons.next": "Next page",
-  "_accessibility:buttons.clear": "Clear",
-  "_accessibility:buttons.applyFilters": "Apply filters",
-  "_accessibility:components.table.pageSizes": "Rows per page",
-  "_accessibility:components.table.jumpToPage": "Jump to page",
-  "_accessibility:components.table.of": "of",
-  "_accessibility:components.table.empty": "No data available",
-  "_accessibility:components.table.selectRow": "Select row",
-  "_accessibility:components.table.selectAllRows": "Select all visible rows",
-};
-
-const t = (key: string, options?: Record<string, unknown>) => {
-  if (key === "_accessibility:components.table.selectedCount") {
-    const count = typeof options?.count === "number" ? options.count : 0;
-    return translations[key].replace("{{count}}", String(count));
-  }
-
-  return translations[key] ?? key;
-};
+const t = (key: string) => key;
 
 export function UsersTable() {
   return (
@@ -117,11 +71,14 @@ export function UsersTable() {
             },
             { key: "age", label: "Age", sortable: true },
           ]}
-          actions={actions}
-          onRowSelect={(row, selected) => console.log(selected, row)}
-          onSelectedRowsChange={(selectedRows) =>
-            console.log("Selected rows", selectedRows)
-          }
+          actions={(row) => [
+            {
+              id: "view",
+              tooltip: `View ${row.name}`,
+              icon: <span>View</span>,
+              onClick: () => console.log("View", row),
+            },
+          ]}
         />
       </TableOptionsProvider>
     </TranslationProvider>
@@ -129,24 +86,38 @@ export function UsersTable() {
 }
 ```
 
-## Core Table Props
-
-| Prop | Type | Required | Description |
-|---|---|---|---|
-| `entity` | `string` | Yes | Entity name used by internal components. |
-| `data` | `TRow[]` | Yes | Rows to render. `TRow` must extend `BaseDto` and include `id`. |
-| `columns` | `ColumnType<TRow>[]` | No | Column definitions. |
-| `actions` | `(row: TRow) => ActionType<TRow>[]` | No | Per-row action factory. |
-| `title` | `string` | No | Header title. |
-| `toolbar` | `ReactNode` | No | Custom header content. |
-| `onSort` | `(prop: string, sortOrder: SortOrder) => void` | No | Sort callback. |
-| `onRowSelect` | `(row: TRow, selected: boolean) => void` | No | Row selection callback. |
-| `onSelectedRowsChange` | `(rows: TRow[]) => void` | No | Selected rows callback. |
-| `onRowExpand` | `(expandedRow: TRow, collapsedRow: TRow \| null) => ReactNode` | No | Expand row content callback. |
-| `allowMultipleExpandedRows` | `boolean` | No | Allows multiple expanded rows at once. |
-| `expandedRowId` | `TRow["id"] \| null` | No | Controlled expansion mode. |
-
-## Development Setup (Step-by-step)
+## Core `Table` Props
+
+| Prop                        | Type                                                              | Required | Description                                                                 |
+| --------------------------- | ----------------------------------------------------------------- | -------- | --------------------------------------------------------------------------- |
+| `entity`                    | `string`                                                          | Yes      | Entity name used by internal table state.                                   |
+| `data`                      | `TRow[]`                                                          | Yes      | Rows to render. `TRow` must extend `BaseDto` and include `id`.              |
+| `columns`                   | `ColumnType<TRow>[]`                                              | No       | Column definitions.                                                         |
+| `actions`                   | `(row: TRow) => ActionType<TRow>[]`                               | No       | Per-row action factory.                                                     |
+| `title`                     | `string`                                                          | No       | Header title.                                                               |
+| `toolbar`                   | `ReactNode`                                                       | No       | Extra content rendered in the table header.                                 |
+| `isLoading`                 | `boolean`                                                         | No       | Loading state for table UI.                                                 |
+| `filterOptions`             | `FilterOptions`                                                   | No       | Extra options passed to filter behavior/components.                         |
+| `onSort`                    | `(prop: string, sortOrder: SortOrder) => void`                    | No       | Sort callback when a sortable column is toggled.                            |
+| `onRowSelect`               | `(row: TRow, selected: boolean) => void`                          | No       | Row selection callback.                                                     |
+| `onSelectedRowsChange`      | `(rows: TRow[]) => void`                                          | No       | Callback with selected rows.                                                |
+| `softDeleteProperty`        | `keyof TRow`                                                      | No       | Property name used to determine soft-deleted rows. Defaults to `deletedAt`. |
+| `allowMultipleExpandedRows` | `boolean`                                                         | No       | Enables multiple expanded rows (uncontrolled mode).                         |
+| `expandedRowId`             | `TRow["id"] \| null`                                              | No       | Controlled expanded row id.                                                 |
+| `onExpandedRowChange`       | `(expandedRow: TRow \| null, collapsedRow: TRow \| null) => void` | No       | Called when expanded row changes.                                           |
+| `onRowExpand`               | `(expandedRow: TRow, collapsedRow: TRow \| null) => ReactNode`    | No       | Returns content rendered inside expanded row area.                          |
+| `className`                 | `string`                                                          | No       | Wrapper class name.                                                         |
+| `contentClassName`          | `string`                                                          | No       | Content container class name.                                               |
+
+## Exported API
+
+Main package exports include:
+
+- Components: `Badge`, `Button`, `Chip`, `Dropdown`, `Form`, `IconButton`, `Loading`, `SvgIcons`, `Table`, `Tooltip`.
+- Providers: `FiltersProvider`, `TableOptionsProvider`, `TranslationProvider` and related hooks/types.
+- Utilities and models: `FilterTypes`, `SortOrder`, `BaseDto`, and query/filter helpers from `lib`.
+
+## Development Setup
 
 1. Clone the repository.
 
@@ -158,67 +129,45 @@ cd -- -sito-dashboard
 2. Use the expected Node version.
 
 ```bash
-nvm install 20.19.0
-nvm use 20.19.0
+nvm install
+nvm use
 ```
 
+Current `.nvmrc`: `20.19.0`
+
 3. Install dependencies.
 
 ```bash
 npm install
 ```
 
-4. Start local development.
+4. Start development.
 
 ```bash
 # Vite dev server
 npm run dev
 
-# Component-focused development (recommended)
+# Storybook (recommended for component work)
 npm run storybook
 ```
 
-5. Build the library.
+## Scripts
 
 ```bash
-npm run build
-```
-
-## How To Run Tests
-
-```bash
-# run all tests once
-npm run test
-
-# run a specific test file
-npm run test -- src/components/Table/Table.expandable.test.tsx
-```
-
-## How To Run Linters
-
-```bash
-# runs ESLint with auto-fix enabled in this project
-npm run lint
-```
-
-## Additional Useful Scripts
-
-```bash
-# format source files
-npm run format
-
-# build static Storybook
-npm run build-storybook
-
-# preview production build
-npm run preview
+npm run build            # Build library (types + bundles)
+npm run test             # Run tests once with Vitest
+npm run lint             # ESLint + Prettier + depcheck
+npm run format           # Prettier on src files
+npm run build-storybook  # Build static Storybook
+npm run preview          # Preview Vite build
+npm run full             # lint + build + test
 ```
 
 ## Contributing
 
 1. Create a branch from `main`.
-2. Add/adjust tests for your changes.
-3. Run lint and tests.
+2. Add or update tests for your changes.
+3. Run `npm run full`.
 4. Open a pull request with a clear summary.
 
 ## License

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,7 @@
+import { ButtonPropsType } from './types';
+/**
+ * Renders the Button component.
+ * @param props - props parameter.
+ * @returns Function result.
+ */
+export declare const Button: (props: ButtonPropsType) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,28 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: (props: import('..').ButtonPropsType) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    args: {
+        children: string;
+    };
+    argTypes: {
+        variant: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+        color: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Text: Story;
+export declare const Outlined: Story;
+export declare const Submit: Story;

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

@@ -0,0 +1,2 @@
+export * from './Button';
+export * from './types';

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

@@ -0,0 +1,7 @@
+import { ButtonHTMLAttributes } from 'react';
+export type ButtonBaseProps = {
+    variant?: "text" | "submit" | "outlined";
+    color?: "default" | "primary" | "secondary" | "error" | "warning" | "success" | "info";
+};
+export interface ButtonPropsType extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color">, ButtonBaseProps {
+}

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,7 @@
+import { DropdownPropsType } from './types';
+/**
+ * Renders the Dropdown component.
+ * @param props - props parameter.
+ * @returns Function result.
+ */
+export declare const Dropdown: (props: DropdownPropsType) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Dropdown } from '..';
+declare const meta: Meta<typeof Dropdown>;
+export default meta;
+type Story = StoryObj<typeof Dropdown>;
+export declare const Basic: Story;
+export declare const ActionDropdown: Story;

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

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

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

@@ -0,0 +1,2 @@
+export * from './Dropdown';
+export * from './types';

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

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export type DropdownPropsType = {
+    children: ReactNode;
+    open: boolean;
+    onClose: () => void;
+};

package/dist/components/Form/AutocompleteInput/AutocompleteInput.d.ts

@@ -1,7 +1,7 @@
 import { AutocompleteInputPropsType } from './types';
 /**
- *
- * @param props
- * @returns
+ * Text input with autocomplete suggestions, supporting single and multiple selection.
+ * @param props - Component props
+ * @param ref - Forwarded ref to the underlying input element
  */
 export declare const AutocompleteInput: import('react').ForwardRefExoticComponent<Omit<AutocompleteInputPropsType, "ref"> & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,7 @@
+import { IconButtonPropsType } from './types';
+/**
+ * Renders the IconButton component.
+ * @param props - props parameter.
+ * @returns Function result.
+ */
+export declare const IconButton: (props: IconButtonPropsType) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,29 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: (props: import('..').IconButtonPropsType) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    args: {
+        icon: import("react/jsx-runtime").JSX.Element;
+    };
+    argTypes: {
+        variant: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+        color: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithFilters: Story;
+export declare const WithChevron: Story;
+export declare const ErrorOnHover: Story;

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

@@ -0,0 +1,2 @@
+export * from './IconButton';
+export * from './types';

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

@@ -0,0 +1,6 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { ButtonBaseProps } from '../Button/types';
+export interface IconButtonPropsType extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color">, ButtonBaseProps {
+    icon: ReactNode;
+    iconClassName?: string;
+}

package/dist/components/Table/components/Rows.d.ts

@@ -6,4 +6,3 @@ import { RowsPropsType } from './types';
  * @returns Function result.
  */
 export declare const Rows: <TRow extends BaseDto>(props: RowsPropsType<TRow>) => import("react/jsx-runtime").JSX.Element[];
-export default Rows;

package/dist/components/Table/components/TableSelectionBar.d.ts

@@ -0,0 +1,18 @@
+import { BaseDto } from '../../../lib';
+import { ActionType } from '../types';
+type TableSelectionBarProps<TRow extends BaseDto> = {
+    count: number;
+    multiActions: ActionType<TRow>[];
+    onActionClick: (action: ActionType<TRow>) => void;
+};
+/**
+ * Renders the selection bar shown when one or more table rows are selected.
+ * Displays the count of selected rows and optional bulk action buttons.
+ * @param root0 - Component props.
+ * @param root0.count - Number of currently selected rows.
+ * @param root0.multiActions - List of actions available for the selected rows.
+ * @param root0.onActionClick - Callback invoked when a bulk action button is clicked.
+ * @returns Selection bar element.
+ */
+export declare function TableSelectionBar<TRow extends BaseDto>({ count, multiActions, onActionClick, }: TableSelectionBarProps<TRow>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/components/TableSelectionBar.test.d.ts

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

package/dist/components/Table/components/Widgets/types.d.ts

@@ -1,14 +1,11 @@
 import { AutocompleteFilterType, CheckFilterType, RangeFilterType, SelectFilterType, TextFilterType } from '../../../../lib';
 import { HTMLInputTypeAttribute } from 'react';
-export interface SelectWidgetPropsType extends SelectFilterType {
-}
+export type SelectWidgetPropsType = SelectFilterType;
 export interface RangeWidgetPropsType<T> extends RangeFilterType<T> {
     inputType: HTMLInputTypeAttribute;
 }
 export interface AutocompleteWidgetPropsType extends AutocompleteFilterType {
     multiple?: boolean;
 }
-export interface CheckWidgetPropsType extends CheckFilterType {
-}
-export interface TextWidgetPropsType extends TextFilterType {
-}
+export type CheckWidgetPropsType = CheckFilterType;
+export type TextWidgetPropsType = TextFilterType;

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

@@ -4,4 +4,5 @@ export * from './Footer';
 export * from './Rows';
 export * from './TableEmpty';
 export * from './TableHeader';
+export * from './TableSelectionBar';
 export * from './types';

package/dist/components/Table/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useExpandedRows';
+export * from './useTableMultiActions';
+export * from './useTableRowSelection';

package/dist/components/Table/hooks/useExpandedRows.d.ts

@@ -0,0 +1,28 @@
+import { BaseDto } from '../../../lib';
+import { ReactNode } from 'react';
+import { ExpandedRowStateType } from '../components/types';
+interface UseExpandedRowsParams<TRow extends BaseDto> {
+    data: TRow[];
+    allowMultipleExpandedRows: boolean;
+    controlledExpandedRowId: TRow["id"] | null | undefined;
+    onExpandedRowChange?: (expandedRow: TRow | null, collapsedRow: TRow | null) => void;
+    onRowExpand?: (expandedRow: TRow, collapsedRow: TRow | null) => ReactNode;
+    findRowById: (rowId: TRow["id"] | null) => TRow | null;
+}
+/**
+ * Manages expand/collapse state and CSS transition animations for table rows.
+ * Supports both single and multiple expanded rows, as well as controlled mode via `controlledExpandedRowId`.
+ * @param root0 - Hook parameters.
+ * @param root0.data - Array of row data; used to clean up expanded state when rows are removed.
+ * @param root0.allowMultipleExpandedRows - When true, multiple rows can be expanded simultaneously.
+ * @param root0.controlledExpandedRowId - When provided, the expanded row is controlled externally.
+ * @param root0.onExpandedRowChange - Optional callback fired when a row is expanded or collapsed.
+ * @param root0.onRowExpand - Callback that returns the content to render inside an expanded row.
+ * @param root0.findRowById - Helper to look up a row by its id.
+ * @returns expandedRowsToRender — list of rows currently rendered with animation state, and onRowExpandChange — click handler for row expansion.
+ */
+export declare function useExpandedRows<TRow extends BaseDto>({ data, allowMultipleExpandedRows, controlledExpandedRowId, onExpandedRowChange, onRowExpand, findRowById, }: UseExpandedRowsParams<TRow>): {
+    expandedRowsToRender: ExpandedRowStateType<TRow>[];
+    onRowExpandChange: (row: TRow) => void;
+};
+export {};

package/dist/components/Table/hooks/useTableMultiActions.d.ts

@@ -0,0 +1,20 @@
+import { BaseDto } from '../../../lib';
+import { ActionType } from '../types';
+interface UseTableMultiActionsParams<TRow extends BaseDto> {
+    actions?: (row: TRow) => ActionType<TRow>[];
+    selectedRowsData: TRow[];
+}
+/**
+ * Computes the set of bulk actions shared across all selected rows and provides a click handler.
+ * An action is included only if it is present (and not hidden) on every selected row; the `disabled`
+ * flag is set if any row marks the action as disabled.
+ * @param root0 - Hook parameters.
+ * @param root0.actions - Function that returns the action list for a given row.
+ * @param root0.selectedRowsData - Array of currently selected row objects.
+ * @returns multiActions — filtered shared actions, and handleMultipleActionClick — handler that calls `onMultipleClick` or iterates over selected rows.
+ */
+export declare function useTableMultiActions<TRow extends BaseDto>({ actions, selectedRowsData, }: UseTableMultiActionsParams<TRow>): {
+    multiActions: ActionType<TRow>[];
+    handleMultipleActionClick: (action: ActionType<TRow>) => void;
+};
+export {};

package/dist/components/Table/hooks/useTableRowSelection.d.ts

@@ -0,0 +1,26 @@
+import { BaseDto } from '../../../lib';
+interface UseTableRowSelectionParams<TRow extends BaseDto> {
+    data: TRow[];
+    onRowSelect?: (row: TRow, selected: boolean) => void;
+    onSelectedRowsChange?: (rows: TRow[]) => void;
+}
+/**
+ * Manages row selection state for the Table component.
+ * Handles individual row toggling, select-all, and keeps selection in sync when data changes.
+ * @param root0 - Hook parameters.
+ * @param root0.data - Array of row data; used to sync selection when rows are added or removed.
+ * @param root0.onRowSelect - Optional callback fired when a single row is selected or deselected.
+ * @param root0.onSelectedRowsChange - Optional callback fired with the full array of selected rows whenever selection changes.
+ * @returns Selection state and handlers: selectedRows, selectedRowsData, selectionState, onRowSelectionChange, onToggleAllRows.
+ */
+export declare function useTableRowSelection<TRow extends BaseDto>({ data, onRowSelect, onSelectedRowsChange, }: UseTableRowSelectionParams<TRow>): {
+    selectedRows: Set<TRow["id"]>;
+    selectedRowsData: TRow[];
+    selectionState: {
+        allSelected: boolean;
+        hasSomeSelected: boolean;
+    };
+    onRowSelectionChange: (row: TRow) => void;
+    onToggleAllRows: () => void;
+};
+export {};

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

@@ -4,7 +4,7 @@ import { TableHeaderPropsType } from './components';
 export type ActionType<TRow extends BaseDto> = {
     id: string;
     onClick: (entity?: TRow) => void;
-    icon: any;
+    icon: ReactNode;
     tooltip: string;
     disabled?: boolean;
     hidden?: boolean;

package/dist/components/Table/utils.d.ts

@@ -0,0 +1,8 @@
+import { BaseDto } from '../../lib';
+import { ColumnType } from './components/types';
+/**
+ * Returns columns sorted by position (descending) with hidden columns filtered out.
+ * @param columns - Array of column definitions to sort and filter.
+ * @returns Sorted and filtered array of visible columns.
+ */
+export declare function getSortedVisibleColumns<TRow extends BaseDto>(columns: ColumnType<TRow>[]): ColumnType<TRow>[];

package/dist/components/Table/utils.test.d.ts

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

package/dist/components/index.d.ts

@@ -1,6 +1,9 @@
 export * from './Badge';
+export * from './Button';
 export * from './Chip';
+export * from './Dropdown';
 export * from './Form';
+export * from './IconButton';
 export * from './Loading';
 export * from './SvgIcons';
 export * from './Table';