Feat: component textinput

[swayamk05]

Summary

Adds a new TextInput component to the Frappe UI React library, providing a flexible single-line text input with multiple variants, validation states, prefix/suffix slots, and debounce functionality.

Features

• Two variants: subtle, outline
• Four sizes: sm, md, lg, xl
• Validation states: success, warning, error for form feedback
• Loading state: Shows spinner and disables interaction
• Prefix/Suffix slots: Function-based slots that receive size for responsive styling
• Debounce support: Configurable delay for onChange events
• Multiple input types: text, email, number, password, date, tel, url, etc.
• forwardRef support: Full ref forwarding for external control

Implementation Details

• Object lookup pattern for variant/state styling (no switch statements)
• Semantic design tokens (ink-*, surface-*, outline-*) for theming consistency
• Prefix/suffix as functions (size?) => ReactNode for size-aware rendering
• Uses clsx for conditional class composition
• Auto-generated IDs with useId hook when htmlId not provided
• TypeScript types exported from dedicated types.ts file
• Loading state uses lucide-react Loader2 spinner

Files Added/Modified

• textInput.tsx — Main component implementation with forwardRef
• types.ts — TypeScript type definitions
• textInput.stories.tsx — Storybook stories with autodocs
• index.ts — Exports
• tests/textInput.tsx — Unit tests

Storybook

• Includes separate stories for each variant (Subtle, Outline)
• All props have descriptions in argTypes
• Interactive controls for size, variant, state, disabled, loading, debounce

Testing

• ✅ Renders with placeholder
• ✅ Calls onChange when typing
• ✅ Renders prefix element
• ✅ Disabled state works correctly

Checklist

• Code follows project coding style
• Linting passes for component source files
• TypeScript types are correct
• Unit tests added and passing
• Storybook documentation added with autodocs
• No hardcoded colors — uses design tokens
• Uses object lookup pattern for variants
• Prefix/suffix follows function pattern (args?) => ReactNode
• Exports added to index.ts

#91

textinput.mp4

[b1ink0]

For this, due to the addition of the cva library, let’s use it for anything related to variants and themes. For reference, please check the updated Alert component in the latest develop branch which uses cva.

Apply this same feedback to other PRs.

[b1ink0]

Also use cn instead of clsx thourghout the codebase.

[b1ink0]

Please check out the new Alert and MultiSelect components in the latest develop branch, which adds new interaction tests in the form of Storybook stories in file format component-name.interactions.stories.tsx.

Please add the same for all the PRs you have opened, and make sure the tests actually cover how users interact with the components, replicating real user behavior. Also, remove the old tests, as everything should now be tested through the interaction tests.

[swayamk05]

@b1ink0 updated TextInput Component

[b1ink0]

I think this file is unrelated to this PR. Please revert it.

[swayamk05]

You're right. That change was made to fix a type compatibility issue introduced during refactoring, but it's unrelated to this PR. i have reverted the file.

[swayamk05]

@b1ink0 can you recheck