miglioramento textEditor

Author: Matteo Miotello

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shellrent/shelly-ui",
   "private": false,
-  "version": "1.2.0",
+  "version": "1.2.1",
   "type": "module",
   "module": "./dist/shelly-ui.es.js",
   "types": "./dist/index.d.ts",

src/Form/Form.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Form from './Form';
 import useForm from './useForm';
-import {Button, Input, InputValidationHandler} from '..';
+import { Button, Input, InputValidationHandler, TextEditor } from '..';
 import React from 'react';
 import { validators } from '..';
 
@@ -18,48 +18,56 @@ export const Default: Story = {
 		// eslint-disable-next-line react-hooks/rules-of-hooks
 		const form = useForm();
 
-		const validateRepeatPassword: InputValidationHandler = ( value, formData ) => {
-			const repeat =form.state.formValues?.getFormValue( 'password' ); 
-			
-			if ( !repeat ) {
+		const validateRepeatPassword: InputValidationHandler = (value, formData) => {
+			const repeat = form.state.formValues?.getFormValue('password');
+
+			if (!repeat) {
 				return null;
 			}
 
-			if ( repeat  && !value ) {
+			if (repeat && !value) {
 				return 'E\' necessario ripetere la password.';
 			}
-	
-			if ( value !== repeat ) {
+
+			if (value !== repeat) {
 				return 'Le due password non corrispondono';
 			}
-	
+
 			return null;
 		};
 
 		const validatePassword: InputValidationHandler = (value: any) => {
 			return null;
 
 			const err = validators.minCharacters(8, 'La Password deve contenere almeno 8 caratteri')(value);
-	
+
 			if (err) {
 				return err;
 			}
-	
+
 			return validators.isRequired('La password è richiesta')(value);
 		};
 
-		return <Form form={form} saveForm={() => true}>
+		return <Form form={form} saveForm={(data) => {
+			console.log(data);
+			return true;
+		}}>
 			<Input.FormControl>
 				<Input.Label>Password</Input.Label>
-				<Input {...form.registerInput( {name: 'password', validators: [validatePassword]} )} />
+				<Input {...form.registerInput({ name: 'password', validators: [validatePassword] })} />
 			</Input.FormControl>
 			<Input.FormControl>
 				<Input.Label>Test</Input.Label>
-				<Input {...form.registerInput( {name: 'test', validators: [validateRepeatPassword]} )} />
+				<Input {...form.registerInput({ name: 'test', validators: [validateRepeatPassword] })} />
+			</Input.FormControl>
+
+			<Input.FormControl>
+				<Input.Label>Text editor</Input.Label>
+				<TextEditor {...form.registerInput({ name: 'editor' })} />
 			</Input.FormControl>
 			<Button type="submit">
 				Save
 			</Button>
-		</Form>;
+		</Form >;
 	}
 };

src/TextEditor/TextEditor.tsx

@@ -1,19 +1,20 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { InputProps } from '../Form';
 import ReactQuill from 'react-quill';
-import 'react-quill/dist/quill.snow.css';
+import './style.css';
 import FieldError from '../Common/FieldError';
 
-type TextEditorProps = InputProps
+type TextEditorProps = {
+	placeholder?: string;
+} & InputProps
 
-const TextEditor: React.FC<TextEditorProps> = ( { value, onValueChange, error, validators, inputSize, ...props } ) => {
+const TextEditor: React.FC<TextEditorProps> = ( { value, onValueChange, placeholder, error, validators, inputSize, ...props } ) => {
 	const [err, setErr] = useState( error );
 	const [htmlValue, setHtmlValue] = useState<string | undefined>( '' );
 
-	const onEditorChange = ( val: string | undefined ) => {
-
+	const onEditorChange = useCallback( ( val: string | undefined ) => {
 		setHtmlValue( val );
-	};
+	}, [] );
 
 	useEffect( () => {		
 		if ( value === '' ) {
@@ -56,7 +57,7 @@ const TextEditor: React.FC<TextEditorProps> = ( { value, onValueChange, error, v
 
 	return <div>
 		<input type='hidden' value={value} {...props}/> 
-		<ReactQuill className='!border-0 !rounded-box' theme="snow" value={htmlValue} onChange={onEditorChange} />
+		<ReactQuill className={`rounded-btn ${err ? '!border border-error' : '!border-0'}`} theme="snow" placeholder={placeholder} value={htmlValue} onChange={onEditorChange} />
 		<FieldError error={err}></FieldError>
 	</div>;
 };

src/TextEditor/style.css

@@ -0,0 +1,23 @@
+@import 'react-quill/dist/quill.snow.css';
+
+.ql-toolbar {
+    border-radius: var(--rounded-btn, 0.5rem) var(--rounded-btn, 0.5rem) 0px 0px !important;
+    border-color: var(--fallback-bc,oklch(var(--bc)/0.2)) !important;
+}
+ 
+.ql-container {
+    border-radius:  0px 0px var(--rounded-btn, 0.5rem) var(--rounded-btn, 0.5rem) !important;
+    border-color: var(--fallback-bc,oklch(var(--bc)/0.2)) !important;
+}
+
+.ql-editor {
+    min-height: 10rem;
+}
+
+.border-error > .ql-toolbar {
+    border-color: transparent transparent var(--fallback-bc,oklch(var(--bc)/0.2)) transparent  !important;
+}
+
+.border-error > .ql-container {
+    border-color: transparent !important;
+}