proje-react-panel 1.7.0 → 1.8.0

package/.vscode/settings.json

@@ -5,7 +5,7 @@
   "debug.console.fontSize": 15,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
-  "folder-customization.folders": [
+  "folder-customizaation.folders": [
     {
       "path": "test-aletleri/src/client/"
     }

package/README.md

@@ -26,6 +26,8 @@ The library provides several decorators for enhanced functionality:
 ### Form Decorators
 
 - `@Input`: Form input decorator
+- `@SelectInput`: Select input decorator
+- `@CustomInput`: Render your own component in place of a field
 - `@Crud`: CRUD operations decorator
 
 ## Installation
@@ -61,11 +63,48 @@ const panel = new Panel({
 </DashboardGrid>
 ```
 
+## Custom Form Fields
+
+When a field needs a control the library does not ship, `@CustomInput` lets your app render
+it. The library only wires the field into `react-hook-form` and renders the label and the
+error message like any other field — everything inside is yours.
+
+```tsx
+import { CustomInput, type CustomRenderProps } from 'proje-react-panel';
+
+class Product {
+  @Input({ label: 'Name' })
+  name: string;
+
+  @CustomInput({
+    label: 'Cover image',
+    render: ({ value, onChange, error }: CustomRenderProps) => (
+      <MyImagePicker value={value as string} onSelect={onChange} invalid={!!error} />
+    ),
+  })
+  coverImage: string;
+}
+```
+
+The render function receives:
+
+| Prop        | Type                       | Description                                         |
+| ----------- | -------------------------- | --------------------------------------------------- |
+| `fieldName` | `string`                   | Full form path of the field (nested paths included) |
+| `value`     | `unknown`                  | Current form value                                  |
+| `onChange`  | `(value: unknown) => void` | Writes a new value into the form                    |
+| `error`     | `string \| undefined`      | Validation message for this field, if any           |
+
+Because the value is whatever you pass to `onChange`, a custom field can hold an id, an
+object or a file reference — validation and submit treat it like any other form value.
+
 ## Guides
 
-- **[Dashboard Guide](./DASHBOARD_GUIDE.md)** - Complete guide for using Dashboard components
-- **[Auth Layout Guide](./AUTH_LAYOUT_GUIDE.md)** - Guide for implementing authentication layouts with sidebar
-- **[Color System Guide](./COLOR_SYSTEM_GUIDE.md)** - Complete documentation of the color system, SCSS variables, and CSS custom properties
+- **[Dashboard Guide](./guides/DASHBOARD_GUIDE.md)** - Complete guide for using Dashboard components
+- **[Auth Layout Guide](./guides/AUTH_LAYOUT_GUIDE.md)** - Guide for implementing authentication layouts with sidebar
+- **[Auth Layout Example](./guides/AUTH_LAYOUT_EXAMPLE.md)** - Complete working example of AuthLayout implementation
+- **[Color System Guide](./guides/COLOR_SYSTEM_GUIDE.md)** - Complete documentation of the color system, SCSS variables, and CSS custom properties
+- **[Implementation Guide](./guides/IMPLEMENTATION_GUIDE.md)** - Comprehensive guide for implementing the library in your React applications
 
 ## Type Definitions
 

package/dist/__tests__/components/form/CustomField.test.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @jest-environment jsdom
+ */
+import 'reflect-metadata';

package/dist/components/form/CustomField.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { InputConfiguration } from '../../decorators/form/Input';
+interface CustomFieldProps {
+    input: InputConfiguration;
+    fieldName: string;
+    error?: string;
+}
+export declare function CustomField({ input, fieldName, error }: CustomFieldProps): React.JSX.Element;
+export {};

package/dist/decorators/form/Input.d.ts

@@ -1,7 +1,7 @@
 import 'reflect-metadata';
 import { AnyClass, AnyClassConstructor } from '../../types/AnyClass';
 export type InputTypes = 'input' | 'textarea' | 'file-upload' | 'checkbox' | 'hidden' | 'nested';
-export type ExtendedInputTypes = InputTypes | 'select';
+export type ExtendedInputTypes = InputTypes | 'select' | 'custom';
 export interface InputOptions {
     type?: InputTypes;
     inputType?: 'text' | 'email' | 'tel' | 'password' | 'number' | 'date';

package/dist/decorators/form/inputs/CustomInput.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import { InputConfiguration, InputOptions } from '../Input';
+export interface CustomRenderProps {
+    fieldName: string;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    error?: string;
+}
+export interface CustomInputOptions extends Omit<InputOptions, 'type'> {
+    render: (props: CustomRenderProps) => ReactNode;
+}
+export interface CustomInputConfiguration extends InputConfiguration {
+    type: 'custom';
+    render: (props: CustomRenderProps) => ReactNode;
+}
+export declare function CustomInput(options: CustomInputOptions): PropertyDecorator;