react-admin-crud-manager 1.1.1 → 1.2.0

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

@@ -1,213 +1,4 @@
-import React, { type ReactNode } from "react";
-interface CrudPageProps {
-    config: Config;
-}
-interface Option {
-    value: string | number | boolean;
-    label: string;
-    color?: string;
-}
-interface ActionButton {
-    type: string;
-    label: string;
-    color?: string;
-    variant?: string;
-    onClick?: (event?: React.MouseEvent, item?: any) => void | Promise<void>;
-}
-interface MenuAction {
-    title: string;
-    type: string;
-    variant?: string;
-    icon?: ReactNode;
-}
-interface TableHead {
-    key: string;
-    title?: string;
-    type?: string;
-    imageKey?: string;
-    titleKey?: string;
-    subtitleKey?: string;
-    onClickDetails?: boolean;
-    variant?: string;
-    chipOptions?: Option[];
-    defaultColor?: string;
-    className?: string;
-    format?: string;
-    menuList?: MenuAction[];
-}
-interface FormField {
-    key: string;
-    label?: string;
-    type?: string;
-    options?: any[];
-    placeholder?: string;
-    rows?: number;
-    inputClass?: string;
-    search?: boolean;
-    accept?: string;
-    text?: string;
-    required?: boolean;
-    minLength?: number;
-    dragDrop?: boolean;
-    parentClass?: string;
-    countriesList?: boolean;
-    defaultCountry?: string;
-    multiple?: boolean;
-    dropdownMaxHeight?: number;
-    editorKey?: string;
-    fontFamily?: string;
-    disabled?: boolean;
-    negativeNumberAllow?: boolean;
-    defaultValue?: any;
-    renderCondition?: (formData: Record<string, any>) => boolean;
-    pattern?: string;
-    renderType?: string;
-    cropImage?: boolean;
-    aspectRatio?: number;
-    dependencyKey?: string;
-    mask?: string;
-    maskApplyOnValue?: boolean;
-    maxSize?: number;
-    [key: string]: any;
-}
-interface ViewField {
-    key?: string;
-    label?: string;
-    type?: string;
-    imageKey?: string;
-    titleKey?: string;
-    subtitleKey?: string;
-    blockClass?: string;
-    icon?: ReactNode;
-    variant?: string;
-    chipOptions?: Option[];
-    defaultColor?: string;
-    className?: string;
-    format?: string;
-}
-interface SearchConfig {
-    enabled?: boolean;
-    useServerSideSearch?: boolean;
-    searchKeys?: string[];
-}
-interface PaginationConfig {
-    enabled?: boolean;
-    useServerSidePagination?: boolean;
-}
-interface FilterConfig {
-    enabled?: boolean;
-    useServerSideFilters?: boolean;
-}
-interface SortChangePayload {
-    value: string;
-    option: {
-        value: string;
-        label: string;
-        key: string;
-        order: string;
-        type?: string;
-    } | null;
-    key: string;
-    order: string;
-    type: string;
-}
-interface SortConfig {
-    enabled?: boolean;
-    useServerSideSorting?: boolean;
-    options?: Array<{
-        value: string;
-        label: string;
-        key: string;
-        order: string;
-        type?: string;
-    }>;
-    fields?: string[];
-    defaultValue?: string;
-    autoGenerate?: boolean;
-    clearLabel?: string;
-    onChange?: (payload: SortChangePayload) => void;
-}
-interface TableConfig {
-    table_head: TableHead[];
-    search?: SearchConfig;
-    pagination?: PaginationConfig;
-    filter?: FilterConfig;
-    sort?: SortConfig;
-}
-interface ModalConfig {
-    addModal?: {
-        title: string;
-        size?: string;
-        formClass?: string;
-        formFields?: FormField[];
-        handleSubmit: (formData: Record<string, any>) => Promise<{
-            newObject: any;
-            message?: string;
-        }>;
-        actionButtons?: ActionButton[];
-        icon?: ReactNode;
-    };
-    editModal?: {
-        title: string;
-        size?: string;
-        formClass?: string;
-        formFields?: FormField[];
-        handleSubmit: (formData: Record<string, any>, item: any) => Promise<{
-            newObject: any;
-            targetObject: any;
-            message?: string;
-        }>;
-        actionButtons?: ActionButton[];
-        icon?: ReactNode;
-    };
-    deleteModal?: {
-        title: string;
-        size?: string;
-        confirmText?: string;
-        referenceKey?: string;
-        actionButtons?: ActionButton[];
-        action: (item: any) => Promise<{
-            targetObject: any;
-        } | null>;
-        icon?: ReactNode;
-    };
-    viewModal?: {
-        title: string;
-        size?: string;
-        component?: React.ComponentType<{
-            data: any;
-        }>;
-        fields?: ViewField[];
-        footer?: {
-            cancelButton?: boolean;
-            cancelText?: string;
-        };
-        icon?: ReactNode;
-    };
-}
-interface FilterConfigProps {
-    fields?: FormField[];
-}
-interface Config {
-    title: string;
-    description?: string;
-    buttonText?: string;
-    fetchData: (params: {
-        search: string;
-        rows_per_page: number;
-        current_page: number;
-        sort_by: string;
-        sort_order: string;
-        [key: string]: any;
-    }) => Promise<{
-        data: any[];
-        pagination: any;
-    }>;
-    fetchRowDetails?: (item: any) => Promise<any>;
-    isStaticData?: boolean;
-    tableConfig: TableConfig;
-    modalConfig?: ModalConfig;
-    filterConfig?: FilterConfigProps;
-}
+import React from "react";
+import type { CrudPageProps } from "../types/crudtypes";
 declare const CrudPage: React.FC<CrudPageProps>;
 export default CrudPage;

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

@@ -3,6 +3,17 @@ interface DetailsProps {
     config: {
         fields?: Array<Record<string, any>>;
         containerClass?: string;
+        variant?: "default" | "card" | "split";
+        styles?: {
+            containerClass?: string;
+            rowClass?: string;
+            groupClass?: string;
+            cardGroupClass?: string;
+            labelClass?: string;
+            valueClass?: string;
+            iconClass?: string;
+            mediaGridClass?: string;
+        };
     };
     fetchRowDetails?: (payload: Record<string, any>) => Promise<{
         data: Record<string, any>;

package/dist/types/components/Details/components/CardGroup.d.ts

@@ -1,6 +1,14 @@
 interface CardGroupProps {
     col: Record<string, any>;
     data: Record<string, any>;
+    uiVariant?: "default" | "card" | "split";
+    styleConfig?: {
+        rowClass?: string;
+        cardGroupClass?: string;
+        labelClass?: string;
+        valueClass?: string;
+        iconClass?: string;
+    };
 }
-declare const CardGroup: ({ col, data }: CardGroupProps) => import("react/jsx-runtime").JSX.Element;
+declare const CardGroup: ({ col, data, uiVariant, styleConfig, }: CardGroupProps) => import("react/jsx-runtime").JSX.Element;
 export default CardGroup;

package/dist/types/components/Details/components/DetailRow.d.ts

@@ -1,6 +1,14 @@
 interface DetailRowProps {
     col: Record<string, any>;
     data: Record<string, any>;
+    uiVariant?: "default" | "card" | "split";
+    styleConfig?: {
+        rowClass?: string;
+        labelClass?: string;
+        valueClass?: string;
+        iconClass?: string;
+        mediaGridClass?: string;
+    };
 }
-declare const DetailRow: ({ col, data }: DetailRowProps) => import("react/jsx-runtime").JSX.Element;
+declare const DetailRow: ({ col, data, uiVariant, styleConfig, }: DetailRowProps) => import("react/jsx-runtime").JSX.Element;
 export default DetailRow;

package/dist/types/components/Details/components/GroupRow.d.ts

@@ -1,6 +1,14 @@
 interface GroupRowProps {
     col: Record<string, any>;
     data: Record<string, any>;
+    uiVariant?: "default" | "card" | "split";
+    styleConfig?: {
+        rowClass?: string;
+        groupClass?: string;
+        labelClass?: string;
+        valueClass?: string;
+        iconClass?: string;
+    };
 }
-declare const GroupRow: ({ col, data }: GroupRowProps) => import("react/jsx-runtime").JSX.Element;
+declare const GroupRow: ({ col, data, uiVariant, styleConfig, }: GroupRowProps) => import("react/jsx-runtime").JSX.Element;
 export default GroupRow;

package/dist/types/components/Filter/FilterDrawer.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
-import { type FieldConfig } from "../Form/components/RenderFields";
+import { FormField } from "../../types/crudtypes";
 interface FilterConfig {
     component: React.ComponentType<{
         filters: Record<string, any>;
         onFilterChange: (key: string, value: any) => void;
     }>;
-    fields: FieldConfig[];
+    fields: Array<FormField>;
 }
 interface FilterDrawerProps {
     isOpen: boolean;

package/dist/types/components/Form/components/AudioPicker.d.ts

@@ -13,6 +13,7 @@ interface AudioPickerProps {
     name: string;
     parentClass?: string;
     maxSize?: number;
+    errorMessage?: string;
 }
-declare const AudioPicker: ({ label, value, onChange, required, accept, id, dragDrop, name, parentClass, maxSize, }: AudioPickerProps) => import("react/jsx-runtime").JSX.Element;
+declare const AudioPicker: ({ label, value, onChange, required, accept, id, dragDrop, name, parentClass, errorMessage, maxSize, }: AudioPickerProps) => import("react/jsx-runtime").JSX.Element;
 export default AudioPicker;

package/dist/types/components/Form/components/Checkbox.d.ts

@@ -14,6 +14,7 @@ interface CheckboxProps {
     parentClass?: string;
     className?: string;
     multiSelect?: boolean;
+    errorMessage?: string;
 }
-declare const Checkbox: ({ name, label, options, value, onChange, disabled, required, parentClass, className, multiSelect, }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+declare const Checkbox: ({ name, label, options, value, onChange, disabled, required, parentClass, className, errorMessage, multiSelect, }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
 export default Checkbox;

package/dist/types/components/Form/components/ImagePicker.d.ts

@@ -14,6 +14,7 @@ interface ImagePickerProps {
     cropImage?: boolean;
     name: string;
     parentClass?: string;
+    errorMessage?: string;
 }
-declare const ImagePicker: ({ label, value, onChange, required, accept, aspect, id, dragDrop, cropImage, name, parentClass, }: ImagePickerProps) => import("react/jsx-runtime").JSX.Element;
+declare const ImagePicker: ({ label, value, onChange, required, accept, aspect, id, dragDrop, cropImage, name, parentClass, errorMessage, }: ImagePickerProps) => import("react/jsx-runtime").JSX.Element;
 export default ImagePicker;

package/dist/types/components/Form/components/Input.d.ts

@@ -13,6 +13,7 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     onChange: (value: any) => void;
     mask?: string;
     maskApplyOnValue?: boolean;
+    errorMessage?: string;
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export { Input };

package/dist/types/components/Form/components/MultiImagePicker.d.ts

@@ -0,0 +1,21 @@
+type ImageValueItem = File | {
+    file?: File;
+    preview?: string;
+} | string;
+interface MultiImagePickerProps {
+    label?: string;
+    value: ImageValueItem[];
+    onChange: (files: ImageValueItem[]) => void;
+    required?: boolean;
+    accept?: string;
+    aspect?: number | string;
+    id: string;
+    dragDrop?: boolean;
+    cropImage?: boolean;
+    name: string;
+    parentClass?: string;
+    maxImages?: number;
+    errorMessage?: string;
+}
+declare const MultiImagePicker: ({ label, value, onChange, required, accept, aspect, id, dragDrop, cropImage, name, parentClass, maxImages, errorMessage, }: MultiImagePickerProps) => import("react/jsx-runtime").JSX.Element;
+export default MultiImagePicker;

package/dist/types/components/Form/components/PhoneInput.d.ts

@@ -10,6 +10,7 @@ interface PhoneInputProps {
     search?: boolean;
     countriesList?: boolean;
     defaultCountry?: string;
+    errorMessage?: string;
 }
-export default function PhoneInput({ label, value, name, parentClass, onChange, disabled, required, placeholder, search, countriesList, defaultCountry, }: PhoneInputProps): import("react/jsx-runtime").JSX.Element;
+export default function PhoneInput({ label, value, name, parentClass, onChange, disabled, required, placeholder, search, countriesList, defaultCountry, errorMessage, }: PhoneInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/Form/components/Radio.d.ts

@@ -12,6 +12,7 @@ interface RadioProps {
     name: string;
     disabled?: boolean;
     parentClass?: string;
+    errorMessage?: string;
 }
-declare const Radio: ({ value, onChange, text, options, label, required, name, disabled, parentClass, }: RadioProps) => import("react/jsx-runtime").JSX.Element;
+declare const Radio: ({ value, onChange, text, options, label, required, name, disabled, parentClass, errorMessage, }: RadioProps) => import("react/jsx-runtime").JSX.Element;
 export default Radio;

package/dist/types/components/Form/components/RenderFields.d.ts

@@ -1,4 +1,4 @@
-export interface FieldConfig {
+interface FieldConfig {
     key: string;
     label?: string;
     type?: string;
@@ -35,8 +35,9 @@ export interface FieldConfig {
 }
 interface RenderFieldsProps {
     field: FieldConfig;
+    errorMessage?: string;
     formData: Record<string, any>;
     handleChange: (key: string, value: any) => void;
 }
-declare const RenderFields: ({ field, formData, handleChange }: RenderFieldsProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const RenderFields: ({ field, formData, handleChange, errorMessage, }: RenderFieldsProps) => import("react/jsx-runtime").JSX.Element | null;
 export default RenderFields;

package/dist/types/components/Form/components/Select.d.ts

@@ -2,9 +2,10 @@ import React from "react";
 interface SelectOption {
     label: string;
     value: any;
+    code?: string;
 }
 interface SelectProps {
-    options: SelectOption[] | ((formData: Record<string, any>) => Promise<SelectOption[]> | SelectOption[]);
+    options?: SelectOption[] | ((formData: Record<string, any>) => Promise<SelectOption[]> | SelectOption[]);
     value: any;
     defaultValue?: any;
     onChange: (value: any) => void;
@@ -20,6 +21,8 @@ interface SelectProps {
     dropdownMaxHeight?: string | number;
     formData: Record<string, any>;
     dependencyKey?: string;
+    countriesList?: boolean;
+    errorMessage?: string;
 }
-declare const Select: ({ options, value, defaultValue, onChange, placeholder, className, disabled, search, label, required, name, parentClass, multiple, dropdownMaxHeight, formData, dependencyKey, }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const Select: ({ options, value, defaultValue, onChange, placeholder, className, disabled, search, label, required, name, parentClass, multiple, dropdownMaxHeight, formData, countriesList, dependencyKey, errorMessage, }: SelectProps) => import("react/jsx-runtime").JSX.Element;
 export default Select;

package/dist/types/components/Form/components/Switch.d.ts

@@ -8,6 +8,7 @@ interface SwitchProps {
     onChange: (checked: boolean) => void;
     disabled?: boolean;
     name: string;
+    errorMessage?: string;
 }
 declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
 export { Switch };

package/dist/types/components/Form/components/TextArea.d.ts

@@ -4,6 +4,8 @@ interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
     required?: boolean;
     parentClass?: string;
     className?: string;
+    errorMessage?: string;
+    name: string;
 }
 declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export { TextArea };

package/dist/types/components/Form/components/TinyEditor.d.ts

@@ -1,6 +1,7 @@
 interface TinyEditorProps {
     editorKey: string;
     value: string;
+    name: string;
     onChange: (content: string) => void;
     label?: string;
     required?: boolean;
@@ -14,7 +15,8 @@ interface TinyEditorProps {
     menubar?: boolean;
     fontFamily?: string;
     initConfig?: Record<string, any>;
+    errorMessage?: string;
     imageUploadHandler?: (blobInfo: any) => Promise<string>;
 }
-declare const TinyEditor: ({ editorKey, value, onChange, label, required, placeholder, parentClass, height, inline, disabled, plugins, toolbar, menubar, fontFamily, initConfig, imageUploadHandler, }: TinyEditorProps) => import("react/jsx-runtime").JSX.Element;
+declare const TinyEditor: ({ editorKey, value, name, onChange, label, required, placeholder, parentClass, height, inline, disabled, plugins, toolbar, menubar, fontFamily, initConfig, imageUploadHandler, errorMessage, }: TinyEditorProps) => import("react/jsx-runtime").JSX.Element;
 export default TinyEditor;

package/dist/types/components/Form/components/VideoPicker.d.ts

@@ -13,6 +13,7 @@ interface VideoPickerProps {
     name: string;
     parentClass?: string;
     maxSize?: number;
+    errorMessage?: string;
 }
-declare const VideoPicker: ({ label, value, onChange, required, accept, id, dragDrop, name, parentClass, maxSize, }: VideoPickerProps) => import("react/jsx-runtime").JSX.Element;
+declare const VideoPicker: ({ label, value, onChange, required, accept, id, dragDrop, name, parentClass, maxSize, errorMessage, }: VideoPickerProps) => import("react/jsx-runtime").JSX.Element;
 export default VideoPicker;

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

@@ -1,13 +1,5 @@
 import React from "react";
-interface ActionButton {
-    type?: string;
-    variant?: string;
-    color?: string;
-    className?: string;
-    disabled?: boolean;
-    label?: string;
-    onClick?: (e?: React.MouseEvent, selectedItem?: any) => Promise<any> | any;
-}
+import { ActionButton } from "../../types/crudtypes";
 interface ModalProps {
     isOpen: boolean;
     onClose: (resp?: any) => void;
@@ -23,6 +15,15 @@ interface ModalProps {
     loading?: boolean;
     executeFunction?: (...args: any[]) => void;
     selectedItem?: any;
+    classNames?: {
+        overlay?: string;
+        container?: string;
+        header?: string;
+        title?: string;
+        body?: string;
+        footer?: string;
+        closeButton?: string;
+    };
 }
-declare const Modal: ({ isOpen, onClose, icon, title, children, size, actionButtons, onFormSubmit, loadingBtn, executeFunction, selectedItem, }: ModalProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const Modal: ({ isOpen, onClose, icon, title, children, size, actionButtons, onFormSubmit, loadingBtn, executeFunction, selectedItem, footerConfig, classNames, }: ModalProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Modal;

package/dist/types/index.d.ts

@@ -1,5 +1,2 @@
-interface CrudProps {
-    config: any;
-}
-export default function Crud({ config }: CrudProps): import("react/jsx-runtime").JSX.Element;
-export {};
+import { type CrudPageProps } from "./types/crudtypes";
+export default function Crud({ config }: CrudPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/crudClasses.d.ts

@@ -0,0 +1,94 @@
+type ClassValue = string | null | undefined | false;
+export declare const joinClasses: (...classes: ClassValue[]) => string;
+export declare const crudClasses: {
+    readonly crudPage: {
+        readonly root: "crud_page";
+        readonly deleteContent: "crud_page_delete_content";
+    };
+    readonly button: {
+        readonly root: "crud_button";
+    };
+    readonly chip: {
+        readonly root: "crud_chip";
+    };
+    readonly spinner: {
+        readonly root: "crud_spinner";
+    };
+    readonly modal: {
+        readonly root: "crud_modal";
+        readonly overlay: "crud_modal_overlay";
+        readonly container: "crud_modal_container";
+        readonly header: "crud_modal_header";
+        readonly title: "crud_modal_title";
+        readonly closeButton: "crud_modal_close_button";
+        readonly body: "crud_modal_body";
+        readonly footer: "crud_modal_footer";
+        readonly actionButton: "crud_modal_action_button";
+        readonly loadingIndicator: "crud_modal_loading_indicator";
+    };
+    readonly table: {
+        readonly root: "crud_table";
+        readonly toolbar: "crud_table_toolbar";
+        readonly searchField: "crud_table_search_field";
+        readonly searchInput: "crud_table_search_input";
+        readonly container: "crud_table_container";
+        readonly element: "crud_table_element";
+        readonly head: "crud_table_head";
+        readonly headRow: "crud_table_head_row";
+        readonly headCell: "crud_table_head_cell";
+        readonly body: "crud_table_body";
+        readonly row: "crud_table_row";
+        readonly cell: "crud_table_cell";
+        readonly noData: "crud_table_no_data";
+        readonly actionButton: "crud_table_action_button";
+        readonly menu: "crud_table_menu";
+        readonly menuItem: "crud_table_menu_item";
+        readonly pagination: "crud_table_pagination";
+    };
+    readonly tableSkeleton: {
+        readonly root: "crud_table_skeleton";
+        readonly table: "crud_table_skeleton_table";
+    };
+    readonly sortDropdown: {
+        readonly root: "crud_sort_dropdown";
+        readonly trigger: "crud_sort_dropdown_trigger";
+        readonly menu: "crud_sort_dropdown_menu";
+        readonly item: "crud_sort_dropdown_item";
+    };
+    readonly imagePreview: {
+        readonly root: "crud_image_preview";
+        readonly container: "crud_image_preview_container";
+        readonly image: "crud_image_preview_image";
+    };
+    readonly filterDrawer: {
+        readonly overlay: "crud_filter_overlay";
+        readonly panel: "crud_filter_panel";
+        readonly header: "crud_filter_header";
+        readonly body: "crud_filter_body";
+        readonly footer: "crud_filter_footer";
+    };
+    readonly form: {
+        readonly root: "crud_form";
+        readonly loading: "crud_form_loading";
+    };
+    readonly field: {
+        readonly wrapper: "crud_field_wrapper";
+        readonly label: "crud_field_label";
+        readonly input: "crud_field_input";
+        readonly error: "crud_field_error";
+    };
+    readonly mediaPicker: {
+        readonly image: "crud_media_image_picker";
+        readonly multiImage: "crud_media_multi_image_picker";
+        readonly audio: "crud_media_audio_picker";
+        readonly video: "crud_media_video_picker";
+        readonly dropzone: "crud_media_dropzone";
+        readonly cropModal: "crud_media_crop_modal";
+    };
+    readonly details: {
+        readonly root: "crud_details";
+        readonly container: "crud_details_container";
+        readonly row: "crud_details_row";
+    };
+};
+export {};