react-form-dto 0.0.1 → 0.0.2

package/dist/types/dto.d.ts

@@ -0,0 +1,50 @@
+export type LayoutDTO = {
+    columns?: number;
+    gap?: string;
+    direction?: "row" | "column";
+    align?: "start" | "center" | "end" | "stretch";
+    justify?: "start" | "center" | "end" | "space-between";
+};
+export type InputType = "text" | "email" | "password" | "textarea" | "number" | "select" | "checkbox" | "date" | "autocomplete" | "multi-autocomplete" | "radio";
+export type FieldDTO = {
+    id: string;
+    type: InputType;
+    label: string;
+    placeholder?: string;
+    options?: string[];
+    required?: boolean;
+    rows?: number;
+    disabled?: boolean;
+    defaultValue?: any;
+    layout?: {
+        col?: number;
+        direction?: "row" | "column";
+    };
+    validations?: Validations;
+};
+export type SectionDTO = {
+    id: string;
+    heading?: string;
+    headingFontSize?: number;
+    description?: string;
+    descriptionFontSize?: number;
+    layout?: LayoutDTO;
+    fields: FieldDTO[];
+};
+export type FormDTO = {
+    title?: string;
+    titleFontSize?: number;
+    description?: string;
+    descriptionFontSize?: number;
+    layout?: LayoutDTO;
+    sections: SectionDTO[];
+};
+export type Validations = {
+    required?: boolean | string;
+    min?: number;
+    max?: number;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: RegExp;
+    validate?: (value: any) => string | null;
+};

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './dto';

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './layout';
+export * from './validation';

package/dist/utils/layout.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Maps a span value to a responsive size configuration for different screen breakpoints.
+ * Ensures mobile devices always use full width (12) while other breakpoints use the provided span.
+ *
+ * @param span - The number of columns (1-12) the element should span. Defaults to 12 (full width).
+ * @returns An object with responsive breakpoint sizes (xs, sm, md, lg, xl)
+ *
+ * @example
+ * mapSpanToSize(6) // Returns { xs: 12, sm: 6, md: 6, lg: 6, xl: 6 }
+ * mapSpanToSize() // Returns { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 }
+ */
+export declare function mapSpanToSize(span?: number): {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};

package/dist/utils/validation.d.ts

@@ -0,0 +1,24 @@
+import { FieldDTO, FormDTO } from '../types';
+type ValidationFn = (field: FieldDTO, value: any) => string | null;
+/**
+ * A collection of validation functions for form fields.
+ * Each function takes a field definition and value, returning an error message or null.
+ */
+export declare const validationRules: Record<string, ValidationFn>;
+/**
+ * Validates all fields in a form DTO against their respective validation rules.
+ * @param dto - The form DTO containing sections and fields
+ * @param values - An object containing current values for all fields (keyed by field ID)
+ * @returns An object mapping field IDs to arrays of error messages
+ */
+export declare const validateAll: (dto: FormDTO, values: Record<string, any>) => Record<string, string[]>;
+/**
+ * Validates a specific field in the form DTO.
+ * Useful for real-time validation as the user interacts with individual fields.
+ * @param dto - The form DTO containing sections and fields
+ * @param values - An object containing current values for all fields (keyed by field ID)
+ * @param fieldId - The ID of the specific field to validate
+ * @returns An array of error messages for the field, empty if no errors or field not found
+ */
+export declare const validateField: (dto: FormDTO, values: Record<string, any>, fieldId: string) => string[];
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "react-form-dto",
-    "version": "0.0.1",
-    "type": "module",
+    "description": "A React library for building forms using DTOs with MUI and TypeScript.",
+    "version": "0.0.2",
     "main": "dist/react-form-dto.umd.js",
     "module": "dist/react-form-dto.es.js",
     "types": "dist/index.d.ts",
@@ -10,36 +10,29 @@
     ],
     "scripts": {
         "dev": "vite",
-        "build": "tsc -b && vite build",
+        "build": "vite build",
         "lint": "eslint .",
         "preview": "vite preview",
         "docs:dev": "vitepress dev docs",
         "docs:build": "vitepress build docs",
         "docs:preview": "vitepress preview docs"
     },
-    "dependencies": {
-        "@emotion/react": "^11.14.0",
-        "@emotion/styled": "^11.14.1",
-        "@mui/material": "^7.3.6",
-        "markdown-it-prism": "^3.0.1",
-        "react": "^19.2.0",
-        "react-dom": "^19.2.0"
+    "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17",
+        "@mui/material": ">=7"
     },
     "devDependencies": {
-        "@eslint/js": "^9.39.1",
-        "@types/node": "^24.10.1",
-        "@types/react": "^19.2.5",
-        "@types/react-dom": "^19.2.3",
         "@vitejs/plugin-react": "^5.1.1",
-        "eslint": "^9.39.1",
-        "eslint-plugin-react-hooks": "^7.0.1",
-        "eslint-plugin-react-refresh": "^0.4.24",
-        "globals": "^16.5.0",
-        "typescript": "~5.9.3",
-        "typescript-eslint": "^8.46.4",
         "vite": "^7.2.4",
         "vite-plugin-dts": "^4.5.4",
-        "vitepress": "^1.6.4"
+        "typescript": "~5.9.3",
+        "vitepress": "^1.6.4",
+        "eslint": "^9.39.1",
+        "typescript-eslint": "^8.46.4",
+        "@types/react": "^19.2.5",
+        "@types/react-dom": "^19.2.3",
+        "@types/node": "^24.10.1"
     },
     "repository": {
         "type": "git",
@@ -49,17 +42,10 @@
         "react",
         "form",
         "dto",
-        "form-dto",
-        "react-form-dto",
-        "form-data-transfer-object",
-        "data-transfer-object",
-        "dto-pattern",
-        "typescript",
         "mui",
-        "material-ui",
-        "hooks",
-        "library",
-        "validation"
+        "typescript",
+        "validation",
+        "library"
     ],
     "author": "Shakir Ullah",
     "license": "MIT"