@stormlmd/form-builder 0.3.1 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stormlmd/form-builder",
-  "version": "0.3.1",
+  "version": "0.3.5",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -38,11 +38,11 @@
     "@mui/icons-material": "^5.16.0",
     "@mui/material": "^5.16.0",
     "@mui/x-date-pickers": "^5.0.0",
-    "date-fns": "^2.30.0",
     "@types/node": "^24.10.1",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^5.1.1",
+    "date-fns": "^2.30.0",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
@@ -55,6 +55,7 @@
   },
   "dependencies": {
     "i18next": "^25.8.7",
-    "react-i18next": "^16.5.4"
+    "react-i18next": "^16.5.4",
+    "react-quill-new": "^3.8.3"
   }
 }

package/src/components/FieldRegistry.ts

@@ -12,6 +12,7 @@ export interface FieldProps {
     node: SchemaNode;
     path?: string; // current path for values, e.g. "addresses[0]"
     isEditing?: boolean;
+    isReadOnly?: boolean;
 }
 
 type ComponentType = React.FC<FieldProps>;

package/src/components/FormRenderer.tsx

@@ -13,6 +13,7 @@ interface FormRendererProps {
     node: SchemaNode;
     path?: string;
     isEditing?: boolean;
+    isReadOnly?: boolean;
 }
 
 export const DropIndicator = () => (
@@ -27,7 +28,7 @@ export const DropIndicator = () => (
     }} />
 );
 
-export const FormRenderer: React.FC<FormRendererProps> = observer(({ node, path, isEditing }) => {
+export const FormRenderer: React.FC<FormRendererProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const formStore = useFormStore();
     // Evaluate condition if present (skip in editing mode)
     if (!isEditing && node.condition) {
@@ -55,6 +56,7 @@ export const FormRenderer: React.FC<FormRendererProps> = observer(({ node, path,
                         parentId={node.id}
                         children={node.children}
                         isEditing={!!isEditing}
+                        isReadOnly={!!isReadOnly}
                         path={path}
                     />
                 </Box>
@@ -92,7 +94,7 @@ export const FormRenderer: React.FC<FormRendererProps> = observer(({ node, path,
         flexDirection: 'column'
     };
 
-    let renderedComponent = <Component node={node} path={path} isEditing={isEditing} />;
+    let renderedComponent = <Component node={node} path={path} isEditing={isEditing} isReadOnly={isReadOnly} />;
 
     // Wrap in Tooltip if present (only in preview mode, or also in editor? User said "in form" - обычно в превью, но в редакторе тоже неплохо)
     if (!isEditing && tooltip) {

package/src/components/builder/FormChildrenRenderer.tsx

@@ -12,6 +12,7 @@ interface FormChildrenRendererProps {
     isEditing: boolean;
     layout?: 'horizontal' | 'vertical';
     path?: string;
+    isReadOnly?: boolean;
 }
 
 export const FormChildrenRenderer: React.FC<FormChildrenRendererProps> = observer(({
@@ -19,7 +20,8 @@ export const FormChildrenRenderer: React.FC<FormChildrenRendererProps> = observe
     children,
     isEditing,
     layout = 'horizontal',
-    path
+    path,
+    isReadOnly
 }) => {
     const formStore = useFormStore();
     const childIds = children?.map(c => c.id) || [];
@@ -40,7 +42,7 @@ export const FormChildrenRenderer: React.FC<FormChildrenRendererProps> = observe
         return (
             <Box sx={containerSx}>
                 {children?.map(child => (
-                    <FormRenderer key={child.id} node={child} path={path} isEditing={false} />
+                    <FormRenderer key={child.id} node={child} path={path} isEditing={false} isReadOnly={isReadOnly} />
                 ))}
             </Box>
         );

package/src/components/builder/PropertiesPanel.tsx

@@ -7,7 +7,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import { useTranslation } from 'react-i18next';
 import { getPlugin } from '../../plugins/PluginRegistry';
-import { FormulaHelp } from './FormulaHelp';
+// import { FormulaHelp } from './FormulaHelp';
 
 interface TabPanelProps {
     children?: React.ReactNode;
@@ -95,7 +95,6 @@ export const PropertiesPanel: React.FC = observer(() => {
     const { t } = useTranslation();
     const node = formStore.selectedNode;
     const [tabValue, setTabValue] = React.useState(0);
-    const [helpOpen, setHelpOpen] = React.useState(false);
 
     const BUILT_IN_LAYOUT_TYPES = ['root', 'row', 'col', 'tabs', 'tab', 'paper', 'repeater', 'table', 'cell', 'divider'];
     const isLayout = node ? BUILT_IN_LAYOUT_TYPES.includes(node.type) : false;
@@ -391,7 +390,7 @@ export const PropertiesPanel: React.FC = observer(() => {
                                     endAdornment: (
                                         <InputAdornment position="end">
                                             <Tooltip title="Справка по формулам">
-                                                <IconButton size="small" onClick={() => setHelpOpen(true)}>
+                                                <IconButton size="small">
                                                     <HelpOutlineIcon fontSize="small" />
                                                 </IconButton>
                                             </Tooltip>
@@ -641,6 +640,41 @@ export const PropertiesPanel: React.FC = observer(() => {
                     </Box>
                 )}
 
+                {node.type === 'richtext' && (
+                    <Box display="flex" alignItems="center" mt={1}>
+                        <input
+                            type="checkbox"
+                            id="enable-visual-editor"
+                            checked={node.props?.enableVisualEditor || false}
+                            onChange={(e) => handleChange('enableVisualEditor', e.target.checked)}
+                            style={{ marginRight: 8 }}
+                        />
+                        <Typography variant="body2" component="label" htmlFor="enable-visual-editor" sx={{ cursor: 'pointer' }}>
+                            {t('properties.enableVisualEditor') || 'Enable Visual Editor'}
+                        </Typography>
+                    </Box>
+                )}
+
+                {node.type === 'checkbox' && (
+                    <Box mt={2} display="flex" flexDirection="column" gap={2}>
+                        <Typography variant="subtitle2" color="primary">{t('properties.checkboxResultsLabels') || 'Results View Labels'}</Typography>
+                        <TextField
+                            label={t('properties.trueText') || 'Positive (e.g. "Да")'}
+                            size="small"
+                            fullWidth
+                            value={node.props?.trueText || ''}
+                            onChange={(e) => handleChange('trueText', e.target.value)}
+                        />
+                        <TextField
+                            label={t('properties.falseText') || 'Negative (e.g. "Нет")'}
+                            size="small"
+                            fullWidth
+                            value={node.props?.falseText || ''}
+                            onChange={(e) => handleChange('falseText', e.target.value)}
+                        />
+                    </Box>
+                )}
+
                 {/* Plugin custom properties editor */}
                 {plugin?.propertiesEditor && (
                     <Box mt={2}>
@@ -711,7 +745,7 @@ export const PropertiesPanel: React.FC = observer(() => {
                                     endAdornment: (
                                         <InputAdornment position="end">
                                             <Tooltip title="Справка по формулам">
-                                                <IconButton size="small" onClick={() => setHelpOpen(true)}>
+                                                <IconButton size="small">
                                                     <HelpOutlineIcon fontSize="small" />
                                                 </IconButton>
                                             </Tooltip>
@@ -741,7 +775,7 @@ export const PropertiesPanel: React.FC = observer(() => {
                                     endAdornment: (
                                         <InputAdornment position="end">
                                             <Tooltip title="Справка по формулам">
-                                                <IconButton size="small" onClick={() => setHelpOpen(true)}>
+                                                <IconButton size="small">
                                                     <HelpOutlineIcon fontSize="small" />
                                                 </IconButton>
                                             </Tooltip>
@@ -884,7 +918,7 @@ export const PropertiesPanel: React.FC = observer(() => {
                         endAdornment: (
                             <InputAdornment position="end">
                                 <Tooltip title="Справка по формулам">
-                                    <IconButton size="small" onClick={() => setHelpOpen(true)}>
+                                    <IconButton size="small">
                                         <HelpOutlineIcon fontSize="small" />
                                     </IconButton>
                                 </Tooltip>
@@ -945,7 +979,8 @@ export const PropertiesPanel: React.FC = observer(() => {
                 )}
             </CustomTabPanel>
 
-            <FormulaHelp open={helpOpen} onClose={() => setHelpOpen(false)} />
+
+            {/* <FormulaHelp open={helpOpen} onClose={() => setHelpOpen(false)} /> */}
         </Box>
     );
 });

package/src/components/fields/CheckboxField.tsx

@@ -4,12 +4,25 @@ import { observer } from 'mobx-react-lite';
 import { useFormStore } from '../../store/FormStoreContext';
 import type { FieldProps } from '../FieldRegistry';
 
-export const CheckboxField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const CheckboxField: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const formStore = useFormStore();
-    const { name, label } = node.props || {};
+    const { name, label, trueText = 'Да', falseText = 'Нет' } = node.props || {};
     const fullPath = path && name ? `${path}.${name}` : name;
     const value = fullPath ? formStore.getValue(fullPath) : false;
 
+    if (isReadOnly) {
+        return (
+            <Box mb={1}>
+                <Typography variant="caption" color="text.secondary" display="block">
+                    {label || ''}
+                </Typography>
+                <Typography variant="body1" sx={{ minHeight: '1.5em', borderBottom: '1px solid #eee', pb: 0.5 }}>
+                    {value ? trueText : falseText}
+                </Typography>
+            </Box>
+        );
+    }
+
     return (
         <Box mb={0.5}>
             {isEditing && (

package/src/components/fields/DateField.tsx

@@ -7,7 +7,7 @@ import { useFormStore } from '../../store/FormStoreContext';
 import type { FieldProps } from '../FieldRegistry';
 import { Box, Typography, TextField } from '@mui/material';
 
-export const DateField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const DateField: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const formStore = useFormStore();
     const { name, label, placeholder } = node.props || {};
     const fullPath = path && name ? `${path}.${name}` : name;
@@ -24,6 +24,19 @@ export const DateField: React.FC<FieldProps> = observer(({ node, path, isEditing
     // Create a Date object from value if string
     const dateValue = value ? new Date(value) : null;
 
+    if (isReadOnly) {
+        return (
+            <Box mb={1}>
+                <Typography variant="caption" color="text.secondary" display="block">
+                    {label || ''}
+                </Typography>
+                <Typography variant="body1" sx={{ minHeight: '1.5em', borderBottom: '1px solid #eee', pb: 0.5 }}>
+                    {dateValue ? dateValue.toLocaleDateString() : '-'}
+                </Typography>
+            </Box>
+        );
+    }
+
     const content = (
         <LocalizationProvider dateAdapter={AdapterDateFns}>
             <DatePicker

package/src/components/fields/FileUploadField.tsx

@@ -5,7 +5,7 @@ import { observer } from 'mobx-react-lite';
 import { useFormStore } from '../../store/FormStoreContext';
 import type { FieldProps } from '../FieldRegistry';
 
-export const FileUploadField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const FileUploadField: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const formStore = useFormStore();
     const { name, label } = node.props || {};
     const fullPath = path && name ? `${path}.${name}` : name;
@@ -19,6 +19,19 @@ export const FileUploadField: React.FC<FieldProps> = observer(({ node, path, isE
         }
     };
 
+    if (isReadOnly) {
+        return (
+            <Box mb={1}>
+                <Typography variant="caption" color="text.secondary" display="block">
+                    {label || ''}
+                </Typography>
+                <Typography variant="body1" sx={{ minHeight: '1.5em', borderBottom: '1px solid #eee', pb: 0.5 }}>
+                    {value || '-'}
+                </Typography>
+            </Box>
+        );
+    }
+
     return (
         <Box mb={1}>
             <Typography variant="caption" color="text.secondary" display="block" mb={0.2} ml={0.5}>

package/src/components/fields/LabelField.tsx

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite';
 import { useFormStore } from '../../store/FormStoreContext';
 import type { FieldProps } from '../FieldRegistry';
 
-export const LabelField: React.FC<FieldProps> = observer(({ node }) => {
+export const LabelField: React.FC<FieldProps> = observer(({ node, isReadOnly: _isReadOnly }) => {
     const formStore = useFormStore();
     const { name, label = '', align = 'left', variant = 'body1' } = node.props || {};
 

package/src/components/fields/NumberField.tsx

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite';
 import { useFormStore } from '../../store/FormStoreContext';
 import type { FieldProps } from '../FieldRegistry';
 
-export const NumberField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const NumberField: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const formStore = useFormStore();
     const { name, label } = node.props || {};
 
@@ -19,6 +19,19 @@ export const NumberField: React.FC<FieldProps> = observer(({ node, path, isEditi
         }
     };
 
+    if (isReadOnly) {
+        return (
+            <Box mb={1}>
+                <Typography variant="caption" color="text.secondary" display="block">
+                    {label || ''}
+                </Typography>
+                <Typography variant="body1" sx={{ minHeight: '1.5em', borderBottom: '1px solid #eee', pb: 0.5 }}>
+                    {value !== undefined && value !== null && value !== '' ? value.toString() : '-'}
+                </Typography>
+            </Box>
+        );
+    }
+
     return (
         <Box mb={0.5}>
             <Typography variant="caption" color="text.secondary" display="block" mb={0.2} ml={0.5}>

package/src/components/fields/RichTextField.tsx

@@ -1,40 +1,117 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { TextField as MuiTextField, Typography, Box } from '@mui/material';
 import { observer } from 'mobx-react-lite';
 import { useFormStore } from '../../store/FormStoreContext';
 import type { FieldProps } from '../FieldRegistry';
+import ReactQuill from 'react-quill-new';
+import 'react-quill-new/dist/quill.snow.css';
 
-export const RichTextField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const RichTextField: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const formStore = useFormStore();
-    const { name, label, placeholder } = node.props || {};
+    const { name, label, placeholder, enableVisualEditor } = node.props || {};
     const fullPath = path && name ? `${path}.${name}` : name;
-    const value = fullPath ? formStore.getValue(fullPath) : '';
+    const value = (fullPath ? formStore.getValue(fullPath) : '') || '';
     const error = fullPath ? formStore.errors[fullPath] : undefined;
 
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleChange = (val: string) => {
         if (fullPath) {
-            formStore.updateField(fullPath, e.target.value, node.validation);
+            formStore.updateField(fullPath, val, node.validation);
         }
     };
 
+    const modules = useMemo(() => ({
+        toolbar: [
+            ['bold'],
+            [{ 'header': '3' }, { 'header': '4' }],
+            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+            ['link'],
+            ['clean']
+        ],
+    }), []);
+
+    const formats = [
+        'header',
+        'bold',
+        'list', 'bullet',
+        'link'
+    ];
+
+    if (isReadOnly) {
+        return (
+            <Box mb={2}>
+                <Typography variant="caption" color="text.secondary" display="block">
+                    {label || ''}
+                </Typography>
+                <Box
+                    sx={{
+                        mt: 0.5,
+                        p: 0,
+                        '& h3': { m: '0.5em 0' },
+                        '& h4': { m: '0.4em 0' },
+                        '& ul, & ol': { pl: 2 }
+                    }}
+                    dangerouslySetInnerHTML={{ __html: value || '-' }}
+                />
+            </Box>
+        );
+    }
+
     return (
         <Box mb={0.5}>
             <Typography variant="caption" color="text.secondary" display="block" mb={0.2} ml={0.5}>
                 {label || (isEditing ? 'Rich Text' : '')} {isEditing ? `(${name})` : ''}
                 {node.validation?.required && <span style={{ color: 'red' }}> *</span>}
             </Typography>
-            <MuiTextField
-                placeholder={placeholder}
-                fullWidth
-                multiline
-                minRows={4}
-                value={value}
-                onChange={handleChange}
-                size="small"
-                disabled={isEditing || !!node.calculation?.formula}
-                error={!!error}
-                helperText={error}
-            />
+            {enableVisualEditor ? (
+                <Box sx={{
+                    '& .quill': {
+                        bgcolor: 'background.paper',
+                        borderRadius: 1,
+                        border: theme => `1px solid ${error ? theme.palette.error.main : theme.palette.divider}`,
+                        '& .ql-toolbar': {
+                            borderTop: 'none',
+                            borderLeft: 'none',
+                            borderRight: 'none',
+                            borderBottom: '1px solid',
+                            borderColor: 'divider',
+                            borderRadius: '4px 4px 0 0'
+                        },
+                        '& .ql-container': {
+                            border: 'none',
+                            minHeight: '120px',
+                            fontSize: '0.875rem'
+                        }
+                    }
+                }}>
+                    <ReactQuill
+                        theme="snow"
+                        value={value}
+                        onChange={handleChange}
+                        modules={modules}
+                        formats={formats}
+                        placeholder={placeholder}
+                        readOnly={isEditing || !!node.calculation?.formula}
+                    />
+                    {error && (
+                        <Typography variant="caption" color="error" sx={{ ml: 1.5, mt: 0.5, display: 'block' }}>
+                            {error}
+                        </Typography>
+                    )}
+                </Box>
+            ) : (
+                <MuiTextField
+                    placeholder={placeholder}
+                    fullWidth
+                    multiline
+                    minRows={4}
+                    value={value}
+                    onChange={(e) => handleChange(e.target.value)}
+                    size="small"
+                    disabled={isEditing || !!node.calculation?.formula}
+                    error={!!error}
+                    helperText={error}
+                />
+            )}
         </Box>
     );
 });

package/src/components/fields/SelectField.tsx

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite';
 import { useFormStore } from '../../store/FormStoreContext';
 import type { FieldProps } from '../FieldRegistry';
 
-export const SelectField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const SelectField: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const formStore = useFormStore();
     const { name, label, options: staticOptions = [], optionsSource, enableAutocomplete = false, placeholder } = node.props || {};
 
@@ -22,6 +22,20 @@ export const SelectField: React.FC<FieldProps> = observer(({ node, path, isEditi
         }
     };
 
+    if (isReadOnly) {
+        const selectedOption = options.find((opt: any) => opt.value === value);
+        return (
+            <Box mb={1}>
+                <Typography variant="caption" color="text.secondary" display="block">
+                    {label || ''}
+                </Typography>
+                <Typography variant="body1" sx={{ minHeight: '1.5em', borderBottom: '1px solid #eee', pb: 0.5 }}>
+                    {selectedOption ? selectedOption.label : (value || '-')}
+                </Typography>
+            </Box>
+        );
+    }
+
     const renderSelect = () => (
         <FormControl fullWidth size="small" disabled={isEditing || !!node.calculation?.formula} error={!!error}>
             <Select

package/src/components/fields/TextField.tsx

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite';
 import { useFormStore } from '../../store/FormStoreContext';
 import type { FieldProps } from '../FieldRegistry';
 
-export const TextField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const TextField: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const formStore = useFormStore();
     const { name, label, placeholder } = node.props || {};
 
@@ -19,6 +19,19 @@ export const TextField: React.FC<FieldProps> = observer(({ node, path, isEditing
         }
     };
 
+    if (isReadOnly) {
+        return (
+            <Box mb={1}>
+                <Typography variant="caption" color="text.secondary" display="block">
+                    {label || ''}
+                </Typography>
+                <Typography variant="body1" sx={{ minHeight: '1.5em', borderBottom: '1px solid #eee', pb: 0.5 }}>
+                    {value || '-'}
+                </Typography>
+            </Box>
+        );
+    }
+
     return (
         <Box mb={0.5}>
             <Typography variant="caption" color="text.secondary" display="block" mb={0.2} ml={0.5}>

package/src/components/layout/FormCol.tsx

@@ -6,13 +6,13 @@ import { FormRenderer } from '../FormRenderer';
 import { SortableContext, rectSortingStrategy } from '@dnd-kit/sortable';
 import { LayoutPlaceholder } from './LayoutPlaceholder';
 
-export const FormCol: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const FormCol: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const childrenIds = node.children?.map(c => c.id) || [];
 
     const content = (
         <Box display="flex" flexDirection="column" gap={0.5} width="100%" sx={{ flexGrow: 1, height: '100%' }}>
             {node.children?.map(child => (
-                <FormRenderer key={child.id} node={child} path={path} isEditing={isEditing} />
+                <FormRenderer key={child.id} node={child} path={path} isEditing={isEditing} isReadOnly={isReadOnly} />
             ))}
         </Box>
     );

package/src/components/layout/FormPaper.tsx

@@ -5,7 +5,7 @@ import { observer } from 'mobx-react-lite';
 import { FormChildrenRenderer } from '../builder/FormChildrenRenderer';
 import { LayoutPlaceholder } from './LayoutPlaceholder';
 
-export const FormPaper: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const FormPaper: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const { label, elevation: elevationProp, padding = 2, variant: variantProp } = node.props || {};
     const childrenIds = node.children?.map(c => c.id) || [];
 
@@ -21,6 +21,7 @@ export const FormPaper: React.FC<FieldProps> = observer(({ node, path, isEditing
             isEditing={!!isEditing}
             path={path}
             layout="horizontal"
+            isReadOnly={isReadOnly}
         />
     );
 

package/src/components/layout/FormRepeater.tsx

@@ -8,7 +8,7 @@ import type { FieldProps } from '../FieldRegistry';
 import { LayoutPlaceholder } from './LayoutPlaceholder';
 import { FormChildrenRenderer } from '../builder/FormChildrenRenderer';
 
-export const FormRepeater: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const FormRepeater: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const formStore = useFormStore();
     const { name, label, addLabel = 'Add Item' } = node.props || {};
     const fullPath = path && name ? `${path}.${name}` : name;
@@ -81,7 +81,7 @@ export const FormRepeater: React.FC<FieldProps> = observer(({ node, path, isEdit
             {displayItems.map((_item, index) => (
                 <Paper key={index} variant="outlined" sx={{ p: 1, mb: 0.5, position: 'relative' }}>
                     <Box position="absolute" right={4} top={4} zIndex={5}>
-                        <IconButton size="small" onClick={() => handleRemove(index)} color="error" disabled={isEditing}>
+                        <IconButton size="small" onClick={() => handleRemove(index)} color="error" disabled={isEditing || isReadOnly}>
                             <DeleteIcon fontSize="inherit" />
                         </IconButton>
                     </Box>
@@ -100,6 +100,7 @@ export const FormRepeater: React.FC<FieldProps> = observer(({ node, path, isEdit
                                     isEditing={true}
                                     layout="horizontal"
                                     path={`${fullPath}[${index}]`}
+                                    isReadOnly={isReadOnly}
                                 />
                             </LayoutPlaceholder>
                         ) : (
@@ -109,13 +110,14 @@ export const FormRepeater: React.FC<FieldProps> = observer(({ node, path, isEdit
                                 isEditing={false}
                                 layout="horizontal"
                                 path={`${fullPath}[${index}]`}
+                                isReadOnly={isReadOnly}
                             />
                         )}
                     </Box>
                 </Paper>
             ))}
 
-            {!isEditing && (
+            {!isEditing && !isReadOnly && (
                 <Button
                     startIcon={<AddIcon />}
                     variant="outlined"

package/src/components/layout/FormRow.tsx

@@ -4,7 +4,7 @@ import type { FieldProps } from '../FieldRegistry';
 import { LayoutPlaceholder } from './LayoutPlaceholder';
 import { FormChildrenRenderer } from '../builder/FormChildrenRenderer';
 
-export const FormRow: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const FormRow: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const childrenIds = node.children?.map(c => c.id) || [];
 
     if (isEditing) {
@@ -16,6 +16,7 @@ export const FormRow: React.FC<FieldProps> = observer(({ node, path, isEditing }
                     isEditing={true}
                     layout="horizontal"
                     path={path}
+                    isReadOnly={isReadOnly}
                 />
             </LayoutPlaceholder>
         );
@@ -28,11 +29,12 @@ export const FormRow: React.FC<FieldProps> = observer(({ node, path, isEditing }
             isEditing={false}
             layout="horizontal"
             path={path}
+            isReadOnly={isReadOnly}
         />
     );
 });
 
-export const FormCol: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const FormCol: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const childrenIds = node.children?.map(c => c.id) || [];
 
     if (isEditing) {
@@ -44,6 +46,7 @@ export const FormCol: React.FC<FieldProps> = observer(({ node, path, isEditing }
                     isEditing={true}
                     layout="vertical"
                     path={path}
+                    isReadOnly={isReadOnly}
                 />
             </LayoutPlaceholder>
         );
@@ -56,6 +59,7 @@ export const FormCol: React.FC<FieldProps> = observer(({ node, path, isEditing }
             isEditing={false}
             layout="vertical"
             path={path}
+            isReadOnly={isReadOnly}
         />
     );
 });

package/src/components/layout/FormTab.tsx

@@ -4,7 +4,7 @@ import type { FieldProps } from '../FieldRegistry';
 import { FormChildrenRenderer } from '../builder/FormChildrenRenderer';
 import { LayoutPlaceholder } from './LayoutPlaceholder';
 
-export const FormTab: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const FormTab: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const childrenIds = node.children?.map(c => c.id) || [];
 
     const content = (
@@ -14,6 +14,7 @@ export const FormTab: React.FC<FieldProps> = observer(({ node, path, isEditing }
             isEditing={!!isEditing}
             path={path}
             layout="vertical"
+            isReadOnly={isReadOnly}
         />
     );
 

package/src/components/layout/FormTable.tsx

@@ -5,7 +5,7 @@ import type { FieldProps } from '../FieldRegistry';
 import { FormRenderer } from '../FormRenderer';
 import { LayoutPlaceholder } from './LayoutPlaceholder';
 
-export const FormTable: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const FormTable: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const { rows = 2, cols = 2 } = node.props || {};
 
     console.log(`FormTable Render: ${node.id}`, {
@@ -28,7 +28,7 @@ export const FormTable: React.FC<FieldProps> = observer(({ node, path, isEditing
         <Box sx={gridStyle}>
             {node.children?.map((child, index) => (
                 <Box key={child.id} sx={{ width: '100%', height: '100%' }}>
-                    <FormRenderer node={child} path={`${path}[${index}]`} isEditing={isEditing} />
+                    <FormRenderer node={child} path={`${path}[${index}]`} isEditing={isEditing} isReadOnly={isReadOnly} />
                 </Box>
             ))}
         </Box>

package/src/components/layout/FormTableCell.tsx

@@ -4,7 +4,7 @@ import type { FieldProps } from '../FieldRegistry';
 import { LayoutPlaceholder } from './LayoutPlaceholder';
 import { FormChildrenRenderer } from '../builder/FormChildrenRenderer';
 
-export const FormTableCell: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const FormTableCell: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const childrenIds = node.children?.map(c => c.id) || [];
     const isEmpty = childrenIds.length === 0;
 
@@ -30,6 +30,7 @@ export const FormTableCell: React.FC<FieldProps> = observer(({ node, path, isEdi
                     isEditing={true}
                     layout="vertical"
                     path={path}
+                    isReadOnly={isReadOnly}
                 />
             </LayoutPlaceholder>
         );
@@ -42,6 +43,7 @@ export const FormTableCell: React.FC<FieldProps> = observer(({ node, path, isEdi
             isEditing={false}
             layout="vertical"
             path={path}
+            isReadOnly={isReadOnly}
         />
     );
 });

package/src/components/layout/FormTabs.tsx

@@ -6,7 +6,7 @@ import { FormRenderer } from '../FormRenderer';
 import { useFormStore } from '../../store/FormStoreContext';
 import { LayoutPlaceholder } from './LayoutPlaceholder';
 
-export const FormTabs: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const FormTabs: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const formStore = useFormStore();
     const [activeTab, setActiveTab] = React.useState(0);
     const allTabs = node.children || [];
@@ -70,7 +70,7 @@ export const FormTabs: React.FC<FieldProps> = observer(({ node, path, isEditing
                         <Box />
                     </LayoutPlaceholder>
                 ) : (
-                    currentTabNode && <FormRenderer key={currentTabNode.id} node={currentTabNode} path={path} isEditing={isEditing} />
+                    currentTabNode && <FormRenderer key={currentTabNode.id} node={currentTabNode} path={path} isEditing={isEditing} isReadOnly={isReadOnly} />
                 )}
             </Box>
         </Paper>

package/src/components/registerComponents.ts

@@ -45,7 +45,7 @@ import React from 'react';
 const BUILT_IN_FIELD_PLUGINS: FieldPlugin[] = [
     { type: 'text', label: 'Text Field', icon: React.createElement(TextFieldsIcon), category: 'field', defaultProps: { label: 'New Text Field', width: 6 }, component: TextField },
     { type: 'number', label: 'Number Field', icon: React.createElement(NumbersIcon), category: 'field', defaultProps: { label: 'New Number Field', width: 6 }, component: NumberField },
-    { type: 'checkbox', label: 'Checkbox', icon: React.createElement(CheckBoxIcon), category: 'field', defaultProps: { label: 'New Checkbox', width: 6 }, component: CheckboxField },
+    { type: 'checkbox', label: 'Checkbox', icon: React.createElement(CheckBoxIcon), category: 'field', defaultProps: { label: 'New Checkbox', width: 6, trueText: 'Да', falseText: 'Нет' }, component: CheckboxField },
     { type: 'select', label: 'Select', icon: React.createElement(ArrowDropDownCircleIcon), category: 'field', defaultProps: { label: 'New Select', width: 6, options: [{ label: 'Option 1', value: '1' }] }, component: SelectField },
     { type: 'date', label: 'Date Picker', icon: React.createElement(CalendarTodayIcon), category: 'field', defaultProps: { label: 'New Date', width: 6 }, component: DateField },
     { type: 'file', label: 'File Upload', icon: React.createElement(CloudUploadIcon), category: 'field', defaultProps: { label: 'New File Upload', width: 6 }, component: FileUploadField },