From dc3bedeeecc9ccc13edb10d7129e5f9e4d9f864f Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 19 Apr 2026 08:20:29 +0300
Subject: [PATCH] feat: add Input and Textarea components to shared/ui

---
 src/shared/ui/Input/index.ts          |  1 +
 src/shared/ui/Input/ui/Input.test.tsx | 72 +++++++++++++++++++++++++++
 src/shared/ui/Input/ui/Input.tsx      | 57 +++++++++++++++++++++
 3 files changed, 130 insertions(+)
 create mode 100644 src/shared/ui/Input/index.ts
 create mode 100644 src/shared/ui/Input/ui/Input.test.tsx
 create mode 100644 src/shared/ui/Input/ui/Input.tsx

diff --git a/src/shared/ui/Input/index.ts b/src/shared/ui/Input/index.ts
new file mode 100644
index 0000000..a538399
--- /dev/null
+++ b/src/shared/ui/Input/index.ts
@@ -0,0 +1 @@
+export { Input, Textarea } from './ui/Input'
diff --git a/src/shared/ui/Input/ui/Input.test.tsx b/src/shared/ui/Input/ui/Input.test.tsx
new file mode 100644
index 0000000..980e906
--- /dev/null
+++ b/src/shared/ui/Input/ui/Input.test.tsx
@@ -0,0 +1,72 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { Input, Textarea } from './Input'
+
+describe('Input', () => {
+  describe('rendering', () => {
+    it('renders an input element', () => {
+      render(<Input />)
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+    })
+    it('renders label when provided', () => {
+      render(<Input label="Email" />)
+      expect(screen.getByText('Email')).toBeInTheDocument()
+    })
+    it('does not render label when omitted', () => {
+      const { container } = render(<Input />)
+      expect(container.querySelector('label')).toBeNull()
+    })
+    it('renders error message when provided', () => {
+      render(<Input error="Required" />)
+      expect(screen.getByText('Required')).toBeInTheDocument()
+    })
+    it('does not render error when omitted', () => {
+      render(<Input />)
+      expect(screen.queryByText('Required')).toBeNull()
+    })
+  })
+  describe('styling', () => {
+    it('has brutal-border class', () => {
+      render(<Input />)
+      expect(screen.getByRole('textbox')).toHaveClass('brutal-border')
+    })
+    it('applies custom className', () => {
+      render(<Input className="w-full" />)
+      expect(screen.getByRole('textbox')).toHaveClass('w-full')
+    })
+  })
+  describe('forwarded props', () => {
+    it('passes placeholder to input', () => {
+      render(<Input placeholder="Enter email" />)
+      expect(screen.getByPlaceholderText('Enter email')).toBeInTheDocument()
+    })
+    it('passes type to input', () => {
+      render(<Input type="email" />)
+      expect(screen.getByRole('textbox')).toHaveAttribute('type', 'email')
+    })
+  })
+})
+describe('Textarea', () => {
+  describe('rendering', () => {
+    it('renders a textarea element', () => {
+      render(<Textarea />)
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+    })
+    it('renders label when provided', () => {
+      render(<Textarea label="Message" />)
+      expect(screen.getByText('Message')).toBeInTheDocument()
+    })
+    it('renders error when provided', () => {
+      render(<Textarea error="Too short" />)
+      expect(screen.getByText('Too short')).toBeInTheDocument()
+    })
+    it('defaults to 4 rows', () => {
+      render(<Textarea />)
+      expect(screen.getByRole('textbox')).toHaveAttribute('rows', '4')
+    })
+    it('accepts custom rows', () => {
+      render(<Textarea rows={8} />)
+      expect(screen.getByRole('textbox')).toHaveAttribute('rows', '8')
+    })
+  })
+})
diff --git a/src/shared/ui/Input/ui/Input.tsx b/src/shared/ui/Input/ui/Input.tsx
new file mode 100644
index 0000000..11912f0
--- /dev/null
+++ b/src/shared/ui/Input/ui/Input.tsx
@@ -0,0 +1,57 @@
+import type { InputHTMLAttributes, TextareaHTMLAttributes } from 'react'
+import { cn } from '$shared/lib'
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  /**
+   * Visible label rendered above the input
+   */
+  label?: string
+  /**
+   * Validation error shown below the input
+   */
+  error?: string
+}
+
+const INPUT_BASE = 'brutal-border bg-white px-4 py-3 text-carbon-black focus:outline-none focus:ring-2 focus:ring-burnt-oxide focus:ring-offset-2 focus:ring-offset-ochre-clay transition-all'
+
+/**
+ * Text input with optional label and error state.
+ */
+export function Input({ label, error, className, ...props }: InputProps) {
+  return (
+    <div className="flex flex-col gap-2">
+      {label && <label className="text-carbon-black">{label}</label>}
+      <input className={cn(INPUT_BASE, className)} {...props} />
+      {error && <span className="text-sm text-burnt-oxide">{error}</span>}
+    </div>
+  )
+}
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /**
+   * Visible label rendered above the textarea
+   */
+  label?: string
+  /**
+   * Validation error shown below the textarea
+   */
+  error?: string
+  /**
+   * Number of visible rows
+   * @default 4
+   */
+  rows?: number
+}
+
+/**
+ * Multiline textarea with optional label and error state.
+ */
+export function Textarea({ label, error, rows = 4, className, ...props }: TextareaProps) {
+  return (
+    <div className="flex flex-col gap-2">
+      {label && <label className="text-carbon-black">{label}</label>}
+      <textarea rows={rows} className={cn(INPUT_BASE, 'resize-none', className)} {...props} />
+      {error && <span className="text-sm text-burnt-oxide">{error}</span>}
+    </div>
+  )
+}