@yusr_systems/ui 2.0.3 → 2.0.4

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { ActionCreatorWithPayload } from '@reduxjs/toolkit';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { AsyncThunk } from '@reduxjs/toolkit';
 import { AsyncThunkConfig } from '@reduxjs/toolkit';
-import { AuthState } from '@yusr_systems/core/src/auth';
+import { AuthState } from '@yusr_systems/core/src/auth/authSlice';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { BaseApiService } from '@yusr_systems/core/src/networking';
 import { BaseEntity } from '@yusr_systems/core/src/entities';
@@ -17,10 +17,11 @@ import { Command as Command_2 } from 'cmdk';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import { DayButton } from 'react-day-picker';
 import { DayPicker } from 'react-day-picker';
-import { default as default_2 } from 'embla-carousel-react';
+import { default as default_2 } from 'react';
+import { default as default_3 } from 'embla-carousel-react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as Direction from '@radix-ui/react-direction';
-import { Dispatch } from 'redux';
+import { Dispatch } from 'react';
 import { Draft } from 'immer';
 import { Drawer as Drawer_2 } from 'vaul';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
@@ -38,27 +39,24 @@ import { ReactNode } from 'react';
 import * as RechartsPrimitive from 'recharts';
 import { Reducer } from 'redux';
 import { ReducersMapObject } from '@reduxjs/toolkit';
+import { RefObject } from 'react';
 import { RequestResult } from '@yusr_systems/core/src/types';
 import { ResourcePermissions } from '@yusr_systems/core/src/auth/permissionSelector';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { SetStateAction } from 'react';
 import { Slice } from '@reduxjs/toolkit';
 import { SliceCaseReducers } from '@reduxjs/toolkit';
 import { SliceSelectors } from '@reduxjs/toolkit';
 import { StorageFile } from '@yusr_systems/core/src/entities';
-import { StoreEnhancer } from 'redux';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { ThunkDispatch } from 'redux-thunk';
 import { ToasterProps } from 'sonner';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { Tuple } from '@reduxjs/toolkit';
-import { TypedUseSelectorHook } from 'react-redux';
 import { UnknownAction } from '@reduxjs/toolkit';
-import { UnknownAction as UnknownAction_2 } from 'redux';
 import { UseEmblaCarouselType } from 'embla-carousel-react';
 import { ValidationRule } from '@yusr_systems/core/src/validation/validationRule';
 import { VariantProps } from 'class-variance-authority';
@@ -103,6 +101,11 @@ declare const alertVariants: (props?: ({
 
 declare type AppStore = ReturnType<typeof createInternalStore>;
 
+declare interface AuthActions {
+    logout: () => any;
+    syncFromStorage: () => any;
+}
+
 export declare function Avatar({ className, size, ...props }: React_2.ComponentProps<typeof AvatarPrimitive.Root> & {
     size?: "default" | "sm" | "lg";
 }): JSX.Element;
@@ -193,8 +196,8 @@ export declare type CarouselApi = UseEmblaCarouselType[1];
 export declare function CarouselContent({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
 
 declare type CarouselContextProps = {
-    carouselRef: ReturnType<typeof default_2>[0];
-    api: ReturnType<typeof default_2>[1];
+    carouselRef: ReturnType<typeof default_3>[0];
+    api: ReturnType<typeof default_3>[1];
     scrollPrev: () => void;
     scrollNext: () => void;
     canScrollPrev: boolean;
@@ -218,6 +221,8 @@ declare type CarouselProps = {
     setApi?: (api: CarouselApi) => void;
 };
 
+export declare function ChangeDialog<T extends BaseEntity>({ title, description, className, formData, dialogMode, service, disable, onSuccess, validate, children }: ChangeDialogProps<T>): JSX.Element;
+
 export declare interface ChangeDialogProps<T extends BaseEntity> extends SaveButtonProps<T>, PropsWithChildren {
     title: string;
     description?: string;
@@ -435,13 +440,9 @@ export declare function createGenericEntitySlice<T extends BaseEntity, CR extend
     };
 };
 
-export declare const createInternalStore: <TUser extends object, TSetting extends object>(externalReducers?: ReducersMapObject) => EnhancedStore<{
-    auth: AuthState<object, object>;
-}, UnknownAction_2, Tuple<[ StoreEnhancer<{
-    dispatch: ThunkDispatch<{
-        auth: AuthState<object, object>;
-    }, undefined, UnknownAction_2>;
-}>, StoreEnhancer]>>;
+export declare const createInternalStore: <TUser extends object, TSetting extends object, R extends ReducersMapObject = ReducersMapObject>(externalReducers: R) => EnhancedStore<{
+    auth: AuthState<TUser, TSetting>;
+} & { [K in keyof R]: ReturnType<R[K]>; }>;
 
 export declare interface CrudActions<T extends BaseEntity> {
     filter: AsyncThunk<FilterResult<T> | undefined, FilterCondition | undefined, object>;
@@ -456,6 +457,10 @@ export declare interface CrudActions<T extends BaseEntity> {
     setCurrentPage: (page: number) => UnknownAction;
 }
 
+export declare function CrudEmptyTablePreview({ mode }: EmptyTablePreviewProps): JSX.Element;
+
+export declare function CrudPage<T extends BaseEntity>({ permissions, useSlice, entityName, title, addNewItemTitle, cards, columnsToFilter, actions, service, entityState, tableHeadRows, tableRowMapper, ChangeDialog, children }: CrudPageProps<T>): JSX.Element;
+
 export declare type CrudPageProps<T extends BaseEntity> = PropsWithChildren & {
     entityState: IEntityState<T>;
     useSlice: () => IDialogState<T>;
@@ -467,11 +472,42 @@ export declare type CrudPageProps<T extends BaseEntity> = PropsWithChildren & {
     cards: CardProps[];
     columnsToFilter: ColumnName[];
     service: BaseApiService<T>;
-    tableHeadRows: TableHeadRow[];
+    tableHeadRows: CrudTableHeadRow[];
     tableRowMapper: (entity: T) => TableBodyRowInfo[];
     ChangeDialog: React.ReactNode;
 };
 
+export declare function CrudTable({ state, children }: {
+    state: IEntityState<any>;
+    children: React.ReactNode;
+}): JSX.Element;
+
+export declare function CrudTableBodyRow({ tableRows, dropdownMenu, contextMenuContent }: GenericRowProps): JSX.Element;
+
+export declare function CrudTableCard({ cards }: {
+    cards: CardProps[];
+}): JSX.Element;
+
+export declare function CrudTableHeader({ title, buttonTitle, createComp, isButtonVisible }: {
+    title: string;
+    buttonTitle: string;
+    createComp: ReactNode;
+    isButtonVisible?: boolean;
+}): JSX.Element;
+
+export declare function CrudTableHeaderRows({ tableHeadRows }: {
+    tableHeadRows: CrudTableHeadRow[];
+}): JSX.Element;
+
+export declare type CrudTableHeadRow = {
+    rowName: string;
+    rowStyles: string;
+};
+
+export declare function CrudTablePagination({ pageSize, totalNumber, currentPage, onPageChanged }: PaginationFooterProps): JSX.Element;
+
+export declare function CrudTableRowActionsMenu({ onEditClicked, onDeleteClicked, type, permissions }: Props_2): JSX.Element;
+
 export declare function DateField({ label, error, isInvalid, required, ...props }: DateFieldProps): JSX.Element;
 
 declare interface DateFieldProps extends DateInputProps {
@@ -507,6 +543,8 @@ export declare interface DateTimeInputProps {
     locale?: any;
 }
 
+export declare function DeleteDialog<T extends BaseEntity>({ entityName, id, service, onSuccess }: Props<T>): JSX.Element;
+
 export declare function Dialog({ ...props }: React_2.ComponentProps<typeof DialogPrimitive.Root>): JSX.Element;
 
 export declare function DialogClose({ ...props }: React_2.ComponentProps<typeof DialogPrimitive.Close>): JSX.Element;
@@ -598,6 +636,19 @@ export declare function DropdownMenuSubTrigger({ className, inset, children, ...
 
 export declare function DropdownMenuTrigger({ ...props }: React_2.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): JSX.Element;
 
+export declare function DynamicListContainer<T>({ title, items, onAdd, addLabel, emptyMessage, error, headers, children }: DynamicListProps<T>): JSX.Element;
+
+declare interface DynamicListProps<T> {
+    title: string;
+    items: T[];
+    onAdd: () => void;
+    addLabel: string;
+    emptyMessage: string;
+    error?: string;
+    headers: string[];
+    children: (item: any, index: number) => React.ReactNode;
+}
+
 export declare function Empty({ className, ...props }: React.ComponentProps<"div">): JSX.Element;
 
 export declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): JSX.Element;
@@ -612,6 +663,12 @@ declare const emptyMediaVariants: (props?: ({
     variant?: "default" | "icon" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+declare type EmptyTableMode = "empty" | "loading" | "error";
+
+declare type EmptyTablePreviewProps = {
+    mode: EmptyTableMode;
+};
+
 export declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): JSX.Element;
 
 export declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): JSX.Element;
@@ -667,13 +724,19 @@ declare interface FormFieldProps {
     required?: boolean;
 }
 
+declare interface GenericRowProps {
+    tableRows: TableBodyRowInfo[];
+    dropdownMenu: ReactNode;
+    contextMenuContent: ReactNode;
+}
+
 export declare interface IDialogState<T> {
     selectedRow: T | null;
     isChangeDialogOpen: boolean;
     isDeleteDialogOpen: boolean;
 }
 
-declare interface IEntityState<T> {
+export declare interface IEntityState<T> {
     entities: FilterResult<T>;
     isLoaded: boolean;
     isLoading: boolean;
@@ -719,6 +782,21 @@ export declare function isPDF(file?: StorageFile): boolean;
 
 export declare function Label({ className, ...props }: React_2.ComponentProps<typeof LabelPrimitive.Root>): JSX.Element;
 
+export declare function Lightbox({ srcLight, srcDark, alt, onClose }: LightboxProps): JSX.Element;
+
+declare interface LightboxProps {
+    srcLight: string;
+    srcDark: string;
+    alt: string;
+    onClose: () => void;
+}
+
+declare type ListType = "dropdown" | "context";
+
+export declare function Loading({ entityName }: {
+    entityName: string;
+}): JSX.Element;
+
 export declare function NumberField({ label, error, isInvalid, required, ...props }: NumberFieldProps): JSX.Element;
 
 declare interface NumberFieldProps extends NumberInputProps {
@@ -740,6 +818,13 @@ export declare function PaginationContent({ className, ...props }: React_2.Compo
 
 export declare function PaginationEllipsis({ className, ...props }: React_2.ComponentProps<"span">): JSX.Element;
 
+declare type PaginationFooterProps = {
+    pageSize: number;
+    totalNumber: number;
+    currentPage: number;
+    onPageChanged?: (newPage: number) => void;
+};
+
 export declare function PaginationItem({ ...props }: React_2.ComponentProps<"li">): JSX.Element;
 
 export declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): JSX.Element;
@@ -774,6 +859,29 @@ export declare function PopoverTitle({ className, ...props }: React_2.ComponentP
 
 export declare function PopoverTrigger({ ...props }: React_2.ComponentProps<typeof PopoverPrimitive.Trigger>): JSX.Element;
 
+declare interface Props<T extends BaseEntity> {
+    entityName: string;
+    id: number;
+    service: BaseApiService<T>;
+    onSuccess?: () => void;
+}
+
+declare interface Props_2 {
+    onEditClicked: () => void;
+    onDeleteClicked: () => void;
+    type: ListType;
+    permissions: ResourcePermissions;
+}
+
+export declare function ProtectedRoute({ isAuthenticated, loginPath }: ProtectedRouteProps): JSX.Element;
+
+declare interface ProtectedRouteProps {
+    isAuthenticated: boolean;
+    loginPath?: string;
+}
+
+export declare function SaveButton<T extends BaseEntity>({ formData, dialogMode, service, disable, onSuccess, validate }: SaveButtonProps<T>): JSX.Element;
+
 export declare interface SaveButtonProps<T extends BaseEntity> {
     formData: T | Partial<T>;
     dialogMode?: DialogMode;
@@ -787,6 +895,34 @@ export declare function ScrollArea({ className, children, ...props }: React_2.Co
 
 export declare function ScrollBar({ className, orientation, ...props }: React_2.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): JSX.Element;
 
+export declare function SearchableSelect<T>({ items, itemLabelKey, itemValueKey, value, onValueChange, disabled, errorInputClass, placeholder, columnsNames, onSearch }: SearchableSelectParams<T>): JSX.Element;
+
+declare type SearchableSelectParams<T> = {
+    items: T[];
+    itemLabelKey: keyof T;
+    itemValueKey: keyof T;
+    value: string;
+    onValueChange: (value: string) => void;
+    disabled?: boolean;
+    errorInputClass?: string;
+    placeholder?: string;
+    columnsNames: ColumnName[];
+    onSearch: (condition: {
+        value: string;
+        columnName: string;
+    } | undefined) => void;
+};
+
+export declare function SearchInput({ columnsNames, onSearch }: SearchInputParams): JSX.Element;
+
+declare type SearchInputParams = {
+    columnsNames: ColumnName[];
+    onSearch: (condition: {
+        value: string;
+        columnName: string;
+    } | undefined) => void;
+};
+
 export declare function Select({ ...props }: React_2.ComponentProps<typeof SelectPrimitive.Root>): JSX.Element;
 
 export declare function SelectContent({ className, children, position, align, ...props }: React_2.ComponentProps<typeof SelectPrimitive.Content>): JSX.Element;
@@ -831,6 +967,8 @@ export declare function SelectValue({ ...props }: React_2.ComponentProps<typeof
 
 export declare function Separator({ className, orientation, decorative, ...props }: React_2.ComponentProps<typeof SeparatorPrimitive.Root>): JSX.Element;
 
+export declare const setupAuthListeners: (dispatch: InternalDispatch, actions: AuthActions) => void;
+
 export declare function Sheet({ ...props }: React_2.ComponentProps<typeof DialogPrimitive.Root>): JSX.Element;
 
 export declare function SheetClose({ ...props }: React_2.ComponentProps<typeof DialogPrimitive.Close>): JSX.Element;
@@ -895,6 +1033,8 @@ export declare function SidebarInput({ className, ...props }: React_2.ComponentP
 
 export declare function SidebarInset({ className, ...props }: React_2.ComponentProps<"main">): JSX.Element;
 
+export declare function SidebarLogo({ logos, alt }: SidebarLogoProps): JSX.Element;
+
 export declare interface SidebarLogoProps {
     logos: {
         full: {
@@ -983,6 +1123,22 @@ export declare function SideBarUserData<T extends UsernameObject>({ user }: {
 
 export declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): JSX.Element;
 
+export declare function StorageFileField({ label, file, onFileChange, onRemove, onDownload, getFileSrc, showPreview, fileInputRef, error, isInvalid, dir }: StorageFileFieldProps): JSX.Element;
+
+declare interface StorageFileFieldProps {
+    label: string;
+    file: StorageFile | StorageFile[] | undefined;
+    onFileChange: (event: default_2.ChangeEvent<HTMLInputElement>) => void;
+    onRemove: (index: number, file: StorageFile) => void;
+    onDownload: (e: default_2.MouseEvent, file: StorageFile | undefined) => void;
+    getFileSrc: (file: StorageFile | undefined) => string;
+    showPreview: (file: StorageFile | undefined) => boolean;
+    fileInputRef: default_2.RefObject<HTMLInputElement | null>;
+    error?: string;
+    isInvalid?: boolean;
+    dir?: "rtl" | "ltr";
+}
+
 export declare function Switch({ className, size, ...props }: React_2.ComponentProps<typeof SwitchPrimitive.Root> & {
     size?: "sm" | "default";
 }): JSX.Element;
@@ -1006,11 +1162,6 @@ export declare function TableHead({ className, ...props }: React_2.ComponentProp
 
 export declare function TableHeader({ className, ...props }: React_2.ComponentProps<"thead">): JSX.Element;
 
-export declare type TableHeadRow = {
-    rowName: string;
-    rowStyles: string;
-};
-
 export declare function TableRow({ className, ...props }: React_2.ComponentProps<"tr">): JSX.Element;
 
 export declare function Tabs({ className, orientation, ...props }: React_2.ComponentProps<typeof TabsPrimitive.Root>): JSX.Element;
@@ -1097,10 +1248,20 @@ export declare function TooltipTrigger({ ...props }: React_2.ComponentProps<type
 
 export declare function useCarousel(): CarouselContextProps;
 
-declare type UseCarouselParameters = Parameters<typeof default_2>;
+declare type UseCarouselParameters = Parameters<typeof default_3>;
 
 export declare function useComboboxAnchor(): React_2.RefObject<HTMLDivElement | null>;
 
+export declare function useDialog<T>(): {
+    selectedRow: T | null;
+    isEditDialogOpen: boolean;
+    isDeleteDialogOpen: boolean;
+    setIsEditDialogOpen: Dispatch<SetStateAction<boolean>>;
+    setIsDeleteDialogOpen: Dispatch<SetStateAction<boolean>>;
+    openEditDialog: (entity: T) => void;
+    openDeleteDialog: (entity: T) => void;
+};
+
 export declare const useDirection: typeof Direction.useDirection;
 
 export declare function useDynamicList<T, K extends keyof T>(fieldName: K, setFormData: (updater: (prev: T) => T) => void, clearError: (field: string) => void): {
@@ -1131,18 +1292,44 @@ export declare function useFormValidation<T>(data: T, rules: ValidationRule<T>[]
 
 export declare function useIsMobile(): boolean;
 
+export declare function useLightBox(): {
+    lightbox: {
+        srcLight: string;
+        srcDark: string;
+        alt: string;
+    } | null;
+    openLightbox: (srcLight: string, srcDark: string, alt: string) => void;
+    closeLightbox: () => void;
+};
+
 declare interface UsernameObject {
     username?: string;
 }
 
 export declare function useSidebar(): SidebarContextProps;
 
+export declare function useStorageFile<T>(setFormData: React.Dispatch<React.SetStateAction<T>>, fieldName: keyof T): {
+    fileInputRef: RefObject<HTMLInputElement | null>;
+    handleFileChange: (event: React.ChangeEvent<HTMLInputElement>) => Promise<void>;
+    handleRemoveFile: (index: number) => void;
+    handleDownload: (e: React.MouseEvent, file: StorageFile | undefined) => Promise<void>;
+    showFilePreview: (file: StorageFile | undefined) => boolean;
+    getFileSrc: (file: StorageFile | undefined) => string;
+};
+
 export declare const useTheme: () => ThemeProviderState;
 
-export declare const useYusrDispatch: () => ThunkDispatch<{
-    auth: AuthState<object, object>;
-}, undefined, UnknownAction_2> & Dispatch<UnknownAction_2>;
+export declare function YusrBusBackground(): JSX.Element;
+
+export declare function ZoomableImage({ srcLight, srcDark, alt, className, wrapperClassName, onOpen }: ZoomableImageProps): JSX.Element;
 
-export declare const useYusrSelector: TypedUseSelectorHook<InternalRootState>;
+declare interface ZoomableImageProps {
+    srcLight: string;
+    srcDark: string;
+    alt: string;
+    className?: string;
+    wrapperClassName?: string;
+    onOpen: (srcLight: string, srcDark: string, alt: string) => void;
+}
 
 export { }