proje-react-panel 1.7.0 → 1.9.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,9 @@ The library provides several decorators for enhanced functionality:
 ### Form Decorators
 
 - `@Input`: Form input decorator
+- `@SelectInput`: Select input decorator
+- `@RichTextInput`: Rich text (TipTap) input decorator — needs the optional `@tiptap/react` + `@tiptap/starter-kit` peers
+- `@CustomInput`: Render your own component in place of a field
 - `@Crud`: CRUD operations decorator
 
 ## Installation
@@ -61,11 +64,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/__tests__/components/form/FormGroups.test.d.ts

@@ -0,0 +1 @@
+import 'reflect-metadata';

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

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

package/dist/__tests__/optionalTiptap.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/components/form/RichTextField.d.ts

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

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

@@ -2,12 +2,19 @@ import 'reflect-metadata';
 import { AnyClass, AnyClassConstructor } from '../../types/AnyClass';
 import { GetDetailsDataFN } from '../details/Details';
 export type OnSubmitFN<T, L = T> = (data: T | FormData) => Promise<L>;
+export interface FormGroup {
+    key: string;
+    label: string;
+    collapsible?: boolean;
+    defaultCollapsed?: boolean;
+}
 interface FormOptions<T extends AnyClass, L = T> {
     onSubmit: OnSubmitFN<T, L>;
     onSubmitSuccess?: (data: L) => void;
     getDetailsData?: GetDetailsDataFN<T>;
     type?: 'json' | 'formData';
     redirectSuccessUrl?: string;
+    groups?: FormGroup[];
 }
 export interface FormConfiguration<T extends AnyClass, L = T> {
     onSubmit: OnSubmitFN<T, L>;
@@ -15,6 +22,7 @@ export interface FormConfiguration<T extends AnyClass, L = T> {
     getDetailsData?: GetDetailsDataFN<T>;
     type: 'json' | 'formData';
     redirectSuccessUrl?: string;
+    groups?: FormGroup[];
 }
 export declare function Form<T extends AnyClass, L = T>(options?: FormOptions<T, L>): ClassDecorator;
 export declare function getFormConfiguration<T extends AnyClass, K extends AnyClassConstructor<T>, L = T>(entityClass: K): FormConfiguration<T, L>;

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' | 'richtext';
 export interface InputOptions {
     type?: InputTypes;
     inputType?: 'text' | 'email' | 'tel' | 'password' | 'number' | 'date';
@@ -11,6 +11,8 @@ export interface InputOptions {
     defaultValue?: string;
     includeInCSV?: boolean;
     includeInJSON?: boolean;
+    group?: string;
+    rows?: number;
 }
 export interface ExtendedInputOptions extends Omit<InputOptions, 'type'> {
     type: ExtendedInputTypes;
@@ -26,6 +28,8 @@ export interface InputConfiguration {
     defaultValue?: string;
     includeInCSV: boolean;
     includeInJSON: boolean;
+    group?: string;
+    rows?: number;
 }
 export declare function Input(options?: InputOptions): PropertyDecorator;
 export declare function ExtendedInput(options?: ExtendedInputOptions): PropertyDecorator;

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;

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

@@ -0,0 +1,13 @@
+import { InputConfiguration, InputOptions } from '../Input';
+export type RichTextToolbarItem = 'bold' | 'italic' | 'heading' | 'bulletList' | 'orderedList' | 'link';
+export declare const DEFAULT_RICH_TEXT_TOOLBAR: RichTextToolbarItem[];
+export interface RichTextInputOptions extends InputOptions {
+    toolbar?: RichTextToolbarItem[];
+    minHeight?: number;
+}
+export interface RichTextInputConfiguration extends InputConfiguration {
+    type: 'richtext';
+    toolbar?: RichTextToolbarItem[];
+    minHeight?: number;
+}
+export declare function RichTextInput(options?: RichTextInputOptions): PropertyDecorator;