Add license info, update readmes

This commit is contained in:
2025-11-27 20:06:45 +00:00
parent b262eab508
commit 312bb911bc
4 changed files with 214 additions and 0 deletions

107
src/components/ui/README.md Normal file
View File

@@ -0,0 +1,107 @@
# UI Components
This directory contains UI components used throughout the application.
## Component Types
### shadcn/ui Base Components
The following components are from [shadcn/ui](https://ui.shadcn.com) (MIT License):
- **`button.tsx`** - Button component with variants
- **`card.tsx`** - Card container with header/content/footer
- **`input.tsx`** - Base input field
- **`label.tsx`** - Form label
- **`popover.tsx`** - Popover/dropdown container
- **`select.tsx`** - Select/dropdown menu
- **`separator.tsx`** - Horizontal/vertical divider
- **`slider.tsx`** - Range slider input
- **`switch.tsx`** - Toggle switch
- **`tooltip.tsx`** - Tooltip wrapper
These components are built on [Radix UI](https://www.radix-ui.com) primitives and styled with Tailwind CSS. They are copied into the codebase (not npm dependencies) and can be freely modified.
**Installation command** (for adding new components):
```bash
npx shadcn@latest add [component-name]
```
### Custom Form Components
Application-specific components built on top of shadcn/ui base components:
- **`form-numeric-input.tsx`** - Numeric input with increment/decrement buttons
- Features: min/max validation, decimal places, unit display, clear button
- Uses: `Input`, `Button` from shadcn/ui
- **`form-time-input.tsx`** - Time input with interactive picker
- Features: HH:MM format, hour/minute grid picker, validation
- Uses: `Input`, `Button`, `Popover` from shadcn/ui
## Usage Examples
### Basic Button
```tsx
import { Button } from './ui/button';
<Button variant="default">Click me</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Cancel</Button>
```
### Custom Form Components
```tsx
import { FormNumericInput } from './ui/form-numeric-input';
import { FormTimeInput } from './ui/form-time-input';
<FormNumericInput
value={dose}
onChange={setDose}
increment="2.5"
min={0}
max={70}
unit="mg"
required={true}
/>
<FormTimeInput
value={time}
onChange={setTime}
required={true}
errorMessage="Time is required"
/>
```
## Customization
All components in this directory are part of your source code and can be modified:
1. **Styling**: Update Tailwind classes directly in component files
2. **Behavior**: Modify component logic as needed
3. **Variants**: Add new variants in the `cva` configuration
Changes to shadcn/ui components won't be overwritten since they're in your source tree.
## Adding New Components
To add more shadcn/ui components:
```bash
# List available components
npx shadcn@latest add
# Add specific component
npx shadcn@latest add dialog
npx shadcn@latest add dropdown-menu
```
Components will be automatically added to this directory with proper Tailwind styling.
## License
- **shadcn/ui components**: MIT License (see THIRD_PARTY_LICENSES.md)
- **Custom components**: Same as project license (MIT)
## Resources
- [shadcn/ui Documentation](https://ui.shadcn.com)
- [Radix UI Documentation](https://www.radix-ui.com)
- [Tailwind CSS Documentation](https://tailwindcss.com)