Skip to content

feat: add text input component with tests and stories#25

Open
Kuba3330 wants to merge 41 commits intomainfrom
update-name
Open

feat: add text input component with tests and stories#25
Kuba3330 wants to merge 41 commits intomainfrom
update-name

Conversation

@Kuba3330
Copy link

@Kuba3330 Kuba3330 commented Feb 23, 2026

Changes

What has been done in this PR?

  • Lefticon->lefticon
  • deleted comments in Textinput
  • changed theme background
  • changed errortext into helper

How to test

Describe how to test the changes manually

  • yarn storybook
  • ...
  • ...

Checklist

Check if the code follows the standards

  • Follows front-end standards
  • No unused code / console.log / leftover comments
  • Component is exported in the main.ts file (if applicable)
  • Resolved merge conflicts (if applicable)
  • Added / updated unit tests (if applicable)
  • Added / updated storybook stories (if applicable)

Co-authored-by: Cursor <cursoragent@cursor.com>
@prewendowski
Copy link

prewendowski commented Feb 24, 2026

Why did you leave the template of PR almost blank? No changes, no testing description... Actually, you didn't write anything. We defined such a format, not github. We expect you to fill it.

@prewendowski prewendowski linked an issue Feb 24, 2026 that may be closed by this pull request
Copy link
Contributor

@whit33y whit33y left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Few bugs that I found right now. I will do further more accurate review later.

Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
@Kuba3330 Kuba3330 requested a review from whit33y February 25, 2026 09:13
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Copy link
Contributor

@whit33y whit33y left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You resolved bugs, but there is still place for improvement.
Just take a look at figma and styles.

https://www.figma.com/design/yZHdiIjMNUNJGyj9OLUpsz/athena?node-id=145-259&t=En2zw1gUl3BH3Uwj-4

Image


function Input({ className, type, ...props }: React.ComponentProps<"input">) {
return (
<input
Copy link
Member

@ddebixx ddebixx Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: I don't think that the input.tsx is needed, the idea was to improve it. So I think it should be deleted becuase we have TextInput component right now

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed

Copy link
Member

@ddebixx ddebixx left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Couple of changes needed

<span className="text-sm text-muted-foreground">{prefix}</span>
)}

<Input
Copy link
Member

@ddebixx ddebixx Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: I think this should look like this:

<input
id={inputId}
type={type}
value={value}
onChange={handleChange}
placeholder={placeholder}
required={required}
disabled={disabled}
data-test-id={dataTestId}
aria-invalid={isError || undefined}
className={cn("flex-1 border-0 bg-transparent px-0 py-0", className)}
{...inputProps}
/>

Instead of importing the basic version of shadcn input this component supposed to it's impoved version

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed

Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
const generatedId = React.useId();
const inputId = id ?? generatedId;

const showError = Boolean(isError && errorText);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion:

showError uses Boolean(isError && errorText) but aria-invalid ( line ) uses isError directly.
You can end up with aria-invalid="true" but displaying helper text instead of an error, which is confusing for assistive tech. It would be better to stick with one solution

const required = isRequired ?? inputProps.required;

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
if (disabled) return;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion:
handleChange early-returns when disabled is true. This is correct behavior, but because the input itself is already disabled, the handler won’t fire anyway; the guard is redundant.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed

Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
const showError = isError;
const disabled = isDisabled ?? inputProps.disabled;
const required = isRequired ?? inputProps.required;
const disabled = isDisabled
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion:

I don't think it's necessary to assign value of isDisabled and isRequired props to consts they can be passed straight were they should be used

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion:

try to provide more information in your commits names for example what has been changed, was it a feature, was it a fix.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed

Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
Signed-off-by: kuba kesler <keslerkuba12@gmail.com>
@github-actions
Copy link

Coverage Report

Coverage after merging update-name into main will be:

Hit/ Total Coverage
🟰 Statements 20 / 20 100% 🥳
🌿 Branches 35 / 36 97.22% 🥳
🔢 Functions 9 / 9 100% 🥳
📝 Elements 64 / 65 98.46% 🥳

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Input

4 participants