dynamic-mui 2.0.0 → 2.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dinakaran S
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,36 +1,52 @@
-Build dynamic forms using Material UI
+# dynamic-mui
+
+A powerful, dynamic form builder and generator for React using Material UI.
+
+## Features (v2.0.0)
+
+- **Dynamic Form Generation**: Render complex forms from JSON schema.
+- **Visual Form Builder**: Drag-and-drop interface to build forms visually.
+- **New Documentation Mode**: Integrated documentation sidebar with component details.
+- **Advanced Validation**: Mandatory field validation with visual indicators (`*` and red error states).
+- **Rich Component Library**: Includes TextField, Select, Date/Time Pickers, Checkbox, Radio, Switch, Signature, and more.
+- **JSON Editing**: Edit form schema directly or use the visual builder.
+- **Data Preview**: View current form data in real-time.
 
 ## Installation
 
-`npm install @mui/material @emotion/react @emotion/styled`
-`npm install dynamic-mui --save`
+```bash
+npm install @mui/material @emotion/react @emotion/styled
+npm install dynamic-mui --save
+```
 
 ## Usage
 
 ```tsx
 import { FormGenerator } from 'dynamic-mui';
 
+const formSchema = [
+  {
+    type: 'textfield',
+    props: {
+        id: 'name',
+        label: 'Full Name',
+        MuiAttributes: { fullWidth: true, variant: 'outlined' },
+        rules: {
+            validation: [{ rule: 'mandatory', message: 'Name is required' }]
+        }
+    },
+    layout: { row: 1, xs: 12, md: 6 }
+  }
+];
+
 export default function DynamicForm() {
   const handleSubmit = (data) => {
-    console.log(data);
+    console.log('Form Data:', data);
   };
 
   return (
     <FormGenerator
-      data={[
-        {
-          type: 'textfield',
-          props: {
-            MuiAttributes: { placeholder: 'Standard', fullWidth: true, variant: 'standard' },
-          },
-          layout: {
-            row: 1,
-            xs: 4,
-            sm: 4,
-          },
-        },
-      ]}
-      guid="Testing"
+      data={formSchema}
       onSubmit={handleSubmit}
     />
   );
@@ -43,6 +59,10 @@ To run the local playground and test changes:
 
 1. `npm install`
 2. `npm run dev`
-3. Open `http://localhost:5173` (or the port shown in terminal) in your browser.
+3. Open `http://localhost:5173` (or the port shown in terminal).
+
+The playground allows you to build forms visually, view the generated JSON, and test validation.
+
+## License
 
-The playground entry point is located at `src/main.tsx`.
+MIT © [Dinakaran S](https://github.com/DinakaranS)

package/dist/components/DynamicComponent.d.ts

@@ -1,5 +1,4 @@
 import { ControlProps } from '../types';
-
 interface DynamicComponentProps extends ControlProps {
     map?: string;
     option?: string;

package/dist/components/FormGenerator.d.ts

@@ -1,7 +1,6 @@
 import { default as React } from 'react';
 import { GridProps } from '@mui/material';
 import { FormField } from '../util/helper';
-
 export declare const FormData: (id?: string) => any;
 export declare const ClearFormData: (id?: string) => void;
 export interface FormGeneratorProps {
@@ -12,7 +11,7 @@ export interface FormGeneratorProps {
     /** Json data to assign value */
     patch?: Record<string, any>;
     /** Component Ref */
-    formRef?: React.RefObject<HTMLButtonElement>;
+    formRef?: React.Ref<HTMLButtonElement>;
     /** Component Submit Function */
     onSubmit?: (response: any, errors: any[], data: FormField[], guid: string) => void;
     /** Component On Change Function */

package/dist/components/charts/Bar/bar.d.ts

@@ -1,3 +1,2 @@
 import { ControlProps } from '../../../types';
-
 export default function Bar({ attributes }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/charts/Line/line.d.ts

@@ -1,3 +1,2 @@
 import { ControlProps } from '../../../types';
-
 export default function Line({ attributes }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/charts/Mixchart/mixChart.d.ts

@@ -1,3 +1,2 @@
 import { ControlProps } from '../../../types';
-
 export default function MixChart({ attributes }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/charts/Pie/pie.d.ts

@@ -1,3 +1,2 @@
 import { ControlProps } from '../../../types';
-
 export default function Pie({ attributes }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/Accordion/accordion.d.ts

@@ -1,3 +1,2 @@
 import { ControlProps } from '../../../types';
-
 export default function Accordion({ attributes, patch, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/Autocomplete/autocomplete.d.ts

@@ -1,3 +1,2 @@
 import { ControlProps } from '../../../types';
-
-export default function AutoComplete({ attributes, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;
+export default function AutoComplete({ attributes, rules, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/CheckBox/checkbox.d.ts

@@ -1,4 +1,3 @@
 import { ControlProps } from '../../../types';
-
 /** Playground Component */
-export default function CheckBox({ attributes, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;
+export default function CheckBox({ attributes, rules, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/Chip/chip.d.ts

@@ -1,3 +1,2 @@
 import { ControlProps } from '../../../types';
-
 export default function Chip({ attributes }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/DataTable/datatable.d.ts

@@ -1,3 +1,2 @@
 import { ControlProps } from '../../../types';
-
 export default function DataTable({ attributes }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/DateTime/datetime.d.ts

@@ -1,3 +1,2 @@
 import { ControlProps } from '../../../types';
-
-export default function DateTime({ attributes, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;
+export default function DateTime({ attributes, rules, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/DateTimePicker/datetimepicker.d.ts

@@ -1,3 +1,2 @@
 import { ControlProps } from '../../../types';
-
-export default function DateTimePicker({ attributes, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;
+export default function DateTimePicker({ attributes, rules, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/Divider/divider.d.ts

@@ -1,3 +1,2 @@
 import { ControlProps } from '../../../types';
-
 export default function Divider({ attributes }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/Group/group.d.ts

@@ -1,3 +1,2 @@
 import { ControlProps } from '../../../types';
-
 export default function Group({ attributes, patch, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/Hyperlink/hyperlink.d.ts

@@ -0,0 +1,2 @@
+import { ControlProps } from '../../../types';
+export default function Hyperlink({ attributes, rules }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/ImageList/imagelist.d.ts

@@ -1,3 +1,2 @@
 import { ControlProps } from '../../../types';
-
 export default function ImgList({ attributes }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/List/list.d.ts

@@ -1,3 +1,2 @@
 import { ControlProps } from '../../../types';
-
 export default function List({ attributes }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/MultiTextbox/multitextbox.d.ts

@@ -1,3 +1,2 @@
 import { ControlProps } from '../../../types';
-
-export default function MultiTextbox({ attributes, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;
+export default function MultiTextbox({ attributes, rules, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/NumberField/numberfield.d.ts

@@ -1,3 +1,2 @@
 import { ControlProps } from '../../../types';
-
-export default function NumberField({ attributes, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;
+export default function NumberField({ attributes, rules, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/Radio/radio.d.ts

@@ -1,4 +1,3 @@
 import { ControlProps } from '../../../types';
-
 /** Radio Component */
-export default function Radio({ attributes, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;
+export default function Radio({ attributes, rules, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/Select/select.d.ts

@@ -1,3 +1,2 @@
 import { ControlProps } from '../../../types';
-
-export default function Select({ attributes, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;
+export default function Select({ attributes, rules, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/Signature/signature.d.ts

@@ -1,3 +1,2 @@
 import { ControlProps } from '../../../types';
-
-export default function Signature({ attributes, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;
+export default function Signature({ attributes, rules, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/Stepper/stepper.d.ts

@@ -1,5 +1,4 @@
 import { ControlProps } from '../../../types';
-
 interface StepperProps extends ControlProps {
     onStepUpdate?: (newStep: number, isScreenChange: boolean, isLastStep: boolean) => void;
     currentStep?: number;

package/dist/components/controls/Switch/switch.d.ts

@@ -1,4 +1,3 @@
 import { ControlProps } from '../../../types';
-
 /** Switch Component */
-export default function Switch({ attributes, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;
+export default function Switch({ attributes, rules, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/Tabs/tabs.d.ts

@@ -1,3 +1,2 @@
 import { ControlProps } from '../../../types';
-
 export default function Tabs({ attributes, patch, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/TextField/textfield.d.ts

@@ -1,3 +1,2 @@
 import { ControlProps } from '../../../types';
-
 export default function TextField({ attributes, rules, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/TimePicker/timepicker.d.ts

@@ -1,3 +1,2 @@
 import { ControlProps } from '../../../types';
-
-export default function TimePicker({ attributes, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;
+export default function TimePicker({ attributes, rules, onChange }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/Typography/typography.d.ts

@@ -1,4 +1,3 @@
 import { ControlProps } from '../../../types';
-
 /** Typography Component */
 export default function Typography({ attributes }: ControlProps): import("react/jsx-runtime").JSX.Element;

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

@@ -24,7 +24,7 @@ import { default as Accordion } from './Accordion/accordion';
 import { default as Tabs } from './Tabs/tabs';
 import { default as AutoComplete } from './Autocomplete/autocomplete';
 import { default as ImgList } from './ImageList/imagelist';
-
+import { default as Hyperlink } from './Hyperlink/hyperlink';
 declare const Controls: {
     Typography: typeof Typography;
     TextField: typeof TextField;
@@ -52,5 +52,6 @@ declare const Controls: {
     Tabs: typeof Tabs;
     AutoComplete: typeof AutoComplete;
     ImgList: typeof ImgList;
+    Hyperlink: typeof Hyperlink;
 };
 export default Controls;