Q-67: fix states and props receiver in Input component

src/Input/Input.js

@@ -1,15 +1,11 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import atomize from '@quarkly/atomize';
 import { Box } from '@quarkly/widgets';
 import { useOverrides } from '@quarkly/components';
-import { effects, propInfo, defaultProps, overrides } from './props';
+import { propInfo, defaultProps, overrides } from './props';
 import { useUniqueId } from '../utils';
+import InnerInput from './components/InnerInput';
 import useFormField from '../Form/hooks/useFormField';
 
-const Input = atomize.input({
-    effects,
-});
-
 const InputComponent = ({
     name,
     type,
@@ -20,7 +16,7 @@ const InputComponent = ({
     required,
     disabled,
     list: listFromProps,
-    maxlength: maxlengthFromProps,
+    maxLength: maxLengthFromProps,
     pattern,
     min,
     max,
@@ -31,9 +27,9 @@ const InputComponent = ({
     const { override, rest } = useOverrides(props, overrides);
     const id = useUniqueId();
 
-    const maxlength = useMemo(() => {
-        return parseInt(maxlengthFromProps, 10);
-    }, [maxlengthFromProps]);
+    const maxLength = useMemo(() => {
+        return parseInt(maxLengthFromProps, 10);
+    }, [maxLengthFromProps]);
 
     const list = useMemo(() => {
         return listFromProps.length > 0 ? listFromProps.split(',') : [];
@@ -68,7 +64,7 @@ const InputComponent = ({
 
     return (
         <Box display="inline-block" {...rest}>
-            <Input
+            <InnerInput
                 name={name}
                 type={type}
                 placeholder={placeholder}
@@ -82,8 +78,8 @@ const InputComponent = ({
                 autoFocus={autoFocus}
                 autoComplete={autoComplete ? 'on' : 'off'}
                 list={list.length > 0 ? `datalist-for-input-${id}` : undefined}
-                maxlength={maxlength > 0 ? maxlength : undefined}
-                {...override('Input')}
+                maxLength={maxLength > 0 ? maxLength : undefined}
+                {...override('InnerInput')}
             />
             {list.length > 0 && (
                 <datalist id={`datalist-for-input-${id}`}>
@@ -103,7 +99,6 @@ Object.assign(InputComponent, {
         en: 'Input element',
         ru: 'Элемент Input',
     },
-    effects,
     propInfo,
     defaultProps,
     overrides,

src/Input/components/InnerInput.js

@@ -0,0 +1,44 @@
+import atomize from '@quarkly/atomize';
+
+export default atomize.input(
+    {
+        name: 'InnerInput',
+        description: {
+            en: 'Input element',
+            ru: 'Input element',
+        },
+        effects: {
+            hover: ':hover',
+            focus: ':focus',
+            required: ':required',
+            placeholder: '::placeholder',
+            invalid: ':invalid',
+            disabled: ':disabled',
+            firstChild: ':first-child',
+            lastChild: ':last-child',
+            onlyChild: ':only-child',
+            firstOfType: ':first-of-type',
+            lastOfType: ':last-of-type',
+            onlyOfType: ':only-of-type',
+        },
+        propInfo: {},
+        useAliases: false,
+    },
+    {
+        as: 'input',
+        defaultValue: '',
+        'focus-border-color': '--color-lightD1',
+        'box-sizing': 'border-box',
+        'border-width': '2px',
+        'border-style': 'solid',
+        'border-color': '--color-lightD2',
+        'border-radius': '2px',
+        'padding-top': '6px',
+        'padding-bottom': '6px',
+        'padding-left': '16px',
+        'padding-right': '16px',
+        font: '--base',
+        color: '--dark',
+        outline: 'none',
+    }
+);

src/Input/props/index.js

@@ -1,4 +1,3 @@
-export { default as effects } from './effects';
 export { default as propInfo } from './propsInfo';
 export { default as defaultProps } from './propsDefault';
 export { default as overrides } from './overrides';

src/Input/props/overrides.js

@@ -1,6 +1,6 @@
 export default {
-    Input: {
-        kind: 'Input',
+    InnerInput: {
+        kind: 'InnerInput',
         props: {
             width: '100%',
             padding: '6px 16px',

src/Input/props/propsInfo.js

@@ -130,7 +130,7 @@ export default {
         category: 'Text',
         weight: 0.5,
     },
-    maxlength: {
+    maxLength: {
         title: 'Max length',
         description: {
             en: 'The maximum number of characters allowed in the text',