saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-08-22 04:09:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

change requests

Browse Source
This commit is contained in:
EthanHealy01 2025-08-18 17:09:58 +01:00
parent 6c1262cbba
commit 2a16217b67
2 changed files with 15 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/components/shared/TextInput.tsx
View File

@ -2,18 +2,33 @@ import React, { forwardRef } from 'react';
import { useMantineColorScheme } from '@mantine/core';
import styles from './textInput/TextInput.module.css';
/**
* Props for the TextInput component
*/
export interface TextInputProps {
/** The input value (required) */
value: string;
/** Callback when input value changes (required) */
onChange: (value: string) => void;
/** Placeholder text */
placeholder?: string;
/** Optional left icon */
icon?: React.ReactNode;
/** Whether to show the clear button (default: true) */
showClearButton?: boolean;
/** Custom clear handler (defaults to setting value to empty string) */
onClear?: () => void;
/** Additional CSS classes */
className?: string;
/** Additional inline styles */
style?: React.CSSProperties;
/** HTML autocomplete attribute (default: 'off') */
autoComplete?: string;
/** Whether the input is disabled (default: false) */
disabled?: boolean;
/** Whether the input is read-only (default: false) */
readOnly?: boolean;
/** Accessibility label */
'aria-label'?: string;
}

82
frontend/src/components/shared/textInput/TextInput.README.md
View File

@ -1,82 +0,0 @@
# TextInput Component
A reusable text input component with optional icon, clear button, and theme-aware styling. This was created because Mantine's TextInput has limited styling
## Features
- **Theme-aware**: Automatically adapts to light/dark color schemes
- **Icon support**: Optional left icon with proper positioning
- **Clear button**: Optional clear button that appears when input has content
- **Accessible**: Proper ARIA labels and keyboard navigation
- **Customizable**: Flexible props for styling and behavior
## Usage
```tsx
import { TextInput } from '../shared/textInput';
// Basic usage
<TextInput
value={searchValue}
onChange={setSearchValue}
placeholder="Search..."
/>
// With icon
<TextInput
value={searchValue}
onChange={setSearchValue}
placeholder="Search tools..."
icon={<span className="material-symbols-rounded">search</span>}
/>
// With custom clear handler
<TextInput
value={searchValue}
onChange={setSearchValue}
onClear={() => {
setSearchValue('');
// Additional cleanup logic
}}
/>
// Disabled state
<TextInput
value={searchValue}
onChange={setSearchValue}
disabled={true}
/>
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `string` | - | The input value (required) |
| `onChange` | `(value: string) => void` | - | Callback when input value changes (required) |
| `placeholder` | `string` | - | Placeholder text |
| `icon` | `React.ReactNode` | - | Optional left icon |
| `showClearButton` | `boolean` | `true` | Whether to show the clear button |
| `onClear` | `() => void` | - | Custom clear handler (defaults to setting value to empty string) |
| `className` | `string` | `''` | Additional CSS classes |
| `style` | `React.CSSProperties` | - | Additional inline styles |
| `autoComplete` | `string` | `'off'` | HTML autocomplete attribute |
| `disabled` | `boolean` | `false` | Whether the input is disabled |
| `readOnly` | `boolean` | `false` | Whether the input is read-only |
| `aria-label` | `string` | - | Accessibility label |
## Styling
The component uses CSS modules and automatically adapts to the current color scheme. The styling includes:
- Proper focus states with blue outline
- Hover effects on the clear button
- Theme-aware colors for text, background, and icons
- Responsive padding based on icon and clear button presence
## Accessibility
- Proper ARIA labels
- Keyboard navigation support
- Screen reader friendly clear button
- Focus management