Refactor atom input component 1

[andresin87]

Atom/Input

❓ Ask

TASK:

Types of changes

• 🪲 Bug fix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
• 🧾 Documentation
• 📷 Demo
• 🧪 Test
• 🧠 Refactor
• 💄 Styles

Description, Motivation and Context

The current AtomInput structure is giving problems with refs due to its HTML structure.

It also takes lots of improvements:

• consistancy: mask and sui-password input types are able to work with icons and addons.
• removes unnecesary wrappers.
• avoid position absolutes.
• removes an effortless giant mixin (performance)
• updates imask

Screenshots - Animations

🚨🚨🚨🚨🚨🚨

This PR will remain iddle untill 1 person per vertical reviews its demo l&f and approves it at least.

• old
• new

Components which use @s-ui/react-atom-input or needs a review:

	habitaclia	milanuncios	carfactory	epreselect	fotocasa	motor	infojobs	Adevinta	sui	default
AtomInput				❌				✅	✅	✅
AtomTextArea				✅				✅	✅	✅
AtomTag				✅				✅	✅	✅
MoleculeAutosuggest				✅				✅	✅	✅
MoleculeAutosuggestField				✅				✅	✅	✅
MoleculeDataCounter				✅				✅	✅	✅
MoleculeDropdownList				✅				✅	✅	✅
MoleculeInputField				✅				✅	✅	✅
MoleculeInputTags				✅				✅	✅	✅
MoleculeSelect				✅				✅	✅	✅
All							✅	✅	✅	✅

Mark on each component when reviewing your branded components or just one mark at the end if everything is ok to confirm all the component changes:

• ✅ if its ok
• ❌ if it needs some fix

TEST on your vertical (if needed) installing:

• @s-ui/[email protected]
• @s-ui/[email protected]
• @s-ui/[email protected]
• @s-ui/[email protected]
• @s-ui/[email protected]

[github-actions]

	STATEMENTS	BRANCHES	FUNCTIONS	LINES
≍	≍ 0.08↑	≍ 0.19↓	≍ 0.25↑	≍ 0.25↑
%	72.33	58.33	59.68	74.1
ABS	2680 / 3705	1533 / 2628	490 / 821	2584 / 3487

[andresin87]

@Alverd04