react-admin-crud-manager 1.1.2 → 1.2.0

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

@@ -15,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/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 {};

package/dist/types/types/crudtypes.d.ts

@@ -71,6 +71,7 @@ export interface FormField {
     maskApplyOnValue?: boolean;
     maxSize?: number;
     [key: string]: any;
+    customValidation?: (value: any) => boolean | string;
 }
 export interface ViewField {
     key?: string;
@@ -87,6 +88,25 @@ export interface ViewField {
     className?: string;
     format?: string;
 }
+export interface ViewStyleConfig {
+    containerClass?: string;
+    rowClass?: string;
+    groupClass?: string;
+    cardGroupClass?: string;
+    labelClass?: string;
+    valueClass?: string;
+    iconClass?: string;
+    mediaGridClass?: string;
+}
+export interface ModalClassNames {
+    overlay?: string;
+    container?: string;
+    header?: string;
+    title?: string;
+    body?: string;
+    footer?: string;
+    closeButton?: string;
+}
 export interface SearchConfig {
     enabled?: boolean;
     useServerSideSearch?: boolean;
@@ -129,12 +149,37 @@ export interface SortConfig {
     clearLabel?: string;
     onChange?: (payload: SortChangePayload) => void;
 }
+export interface exportCSVConfig {
+    enabled?: boolean;
+    fileName?: string;
+    fields?: Array<{
+        label: string;
+        key: string;
+    }>;
+}
+export 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;
+}
 export interface TableConfig {
     table_head: TableHead[];
     search?: SearchConfig;
     pagination?: PaginationConfig;
     filter?: FilterConfig;
     sort?: SortConfig;
+    exportCSV?: exportCSVConfig;
 }
 export interface ModalConfig {
     addModal?: {
@@ -168,6 +213,9 @@ export interface ModalConfig {
         confirmText?: string;
         referenceKey?: string;
         actionButtons?: ActionButton[];
+        action: (item: any) => Promise<{
+            targetObject: any;
+        } | null>;
         icon?: ReactNode;
     };
     viewModal?: {
@@ -177,6 +225,9 @@ export interface ModalConfig {
             data: any;
         }>;
         fields?: ViewField[];
+        variant?: "default" | "card" | "split";
+        styles?: ViewStyleConfig;
+        modalClassNames?: ModalClassNames;
         footer?: {
             cancelButton?: boolean;
             cancelText?: string;

package/package.json

@@ -1,21 +1,22 @@
 {
   "name": "react-admin-crud-manager",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "A reusable React CRUD admin template with modular components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
       "require": "./dist/index.cjs.js",
       "types": "./dist/types/index.d.ts"
-    },
-    "./dist/tailwind.css": "./dist/tailwind.css"
+    }
   },
   "files": [
-    "dist",
-    "dist/tailwind.css"
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
   ],
   "keywords": [
     "react",
@@ -36,9 +37,9 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build && node build-css.js",
+    "build": "vite build && tsc --emitDeclarationOnly",
     "build:types": "tsc --emitDeclarationOnly",
-    "build:all": "npm run build && npm run build:types",
+    "build:all": "npm run build",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -59,6 +60,7 @@
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "10.4.15",
+    "postcss-cli": "^11.0.1",
     "tailwindcss": "3.3.3",
     "typescript": "^5.9.3",
     "vite": "^5.0.8"