Update handling of max-length property

src/components/input/inputContainer/inputContainer.tsx

@@ -70,7 +70,7 @@ export const InputContainer: React.FC<IInputContainerProps> = (props) => {
                 </label>
             )}
             <div className={containerClasses}>{children}</div>
-            {maxLength && (
+            {maxLength != null && (
                 <p className="text-sm font-normal leading-tight text-neutral-600">
                     [{inputLength}/{maxLength}]
                 </p>

src/components/input/inputText/inputText.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { InputText } from './inputText';
+import { useState, type ChangeEvent } from 'react';
+import { InputText, type IInputTextProps } from './inputText';
 
 const meta: Meta<typeof InputText> = {
     title: 'components/Input/InputText',
@@ -16,11 +17,29 @@ const meta: Meta<typeof InputText> = {
 type Story = StoryObj<typeof InputText>;
 
 /**
- * Default usage example of the InputText component.
+ * Default uncontrolled usage example of the InputText component.
  */
 export const Default: Story = {
     args: {
-        placeholder: 'Placeholder',
+        placeholder: 'Uncontrolled input',
+    },
+};
+
+const ControlledInput = (props: IInputTextProps) => {
+    const [value, setValue] = useState<string>('');
+
+    const handleChange = (event: ChangeEvent<HTMLInputElement>) => setValue(event.target.value);
+
+    return <InputText value={value} onChange={handleChange} {...props} />;
+};
+
+/**
+ * Usage example of a controlled input.
+ */
+export const Controlled: Story = {
+    render: (props) => <ControlledInput {...props} />,
+    args: {
+        placeholder: 'Controlled input',
     },
 };
 

src/components/input/inputText/inputText.tsx

@@ -1,25 +1,23 @@
-import { useRef } from 'react';
+import { useState, type ChangeEvent } from 'react';
 import { InputContainer, type IInputComponentProps } from '../inputContainer';
 import { useInputProps } from '../useInputProps';
 
 export interface IInputTextProps extends IInputComponentProps {}
 
 export const InputText: React.FC<IInputTextProps> = (props) => {
     const { containerProps, inputProps } = useInputProps(props);
-    const { value, ...otherInputProps } = inputProps;
+    const { value, onChange, ...otherInputProps } = inputProps;
 
-    const inputRef = useRef<HTMLInputElement>(null);
-    const inputLength = value?.toString().length ?? inputRef.current?.value.length;
+    const [inputLength, setInputLength] = useState(0);
 
-    console.log({
-        inputLength,
-        valueLength: inputProps.value?.toString().length,
-        refLength: inputRef.current?.value.length,
-    });
+    const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
+        setInputLength(event.target.value.length);
+        onChange?.(event);
+    };
 
     return (
         <InputContainer inputLength={inputLength} {...containerProps}>
-            <input type="text" ref={inputRef} value={value} {...otherInputProps} />
+            <input type="text" value={value} onChange={handleOnChange} {...otherInputProps} />
         </InputContainer>
     );
 };