@usetrip/react-ui 0.2.0 → 0.2.1

package/README.md

@@ -0,0 +1,347 @@
+# @usetrip/react-ui
+
+> Shared React component library for the UseTrip platform — built with TypeScript, Tailwind CSS v4, and Radix UI.
+
+Used across `use-trip-web` and future UseTrip projects to keep the design system consistent and maintainable in a single place.
+
+---
+
+## Installation
+
+```bash
+npm install @usetrip/react-ui
+```
+
+Then import the library's CSS in your app's entry stylesheet (required for `CustomEditor` toolbar styles):
+
+```css
+@import "@usetrip/react-ui/dist/react-ui.css";
+```
+
+And add the Tailwind `@source` directive so the library's class names are included in your CSS bundle:
+
+```css
+@source "../node_modules/@usetrip/react-ui/dist";
+```
+
+---
+
+## Usage
+
+### Per-component imports (recommended — best tree shaking)
+
+```tsx
+import Button from '@usetrip/react-ui/Button'
+import Typography from '@usetrip/react-ui/Typography'
+import TextField from '@usetrip/react-ui/TextField'
+```
+
+### Barrel import (convenient for multiple components)
+
+```tsx
+import { Button, Typography, TextField } from '@usetrip/react-ui'
+```
+
+Both styles are fully supported. The library ships with `"sideEffects": false` so unused components are always tree-shaken by your bundler.
+
+---
+
+## Components
+
+### `Button`
+
+A versatile button component with multiple variants, sizes, loading state, and icon support.
+
+```tsx
+import Button from '@usetrip/react-ui/Button'
+
+<Button variant="primary" size="md">Save Trip</Button>
+<Button variant="destructive" isLoading>Deleting...</Button>
+<Button variant="outline" startIcon={<Plus />}>Add Location</Button>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `primary` \| `secondary` \| `destructive` \| `outline` \| `ghost` \| `link` | `primary` | Visual style |
+| `size` | `sm` \| `md` \| `lg` \| `full` \| `icon` | `md` | Button size |
+| `rounded` | `default` \| `full` \| `none` | `default` | Border radius |
+| `isLoading` | `boolean` | `false` | Shows spinner, disables interaction |
+| `startIcon` | `ReactNode` | — | Icon before label |
+| `endIcon` | `ReactNode` | — | Icon after label |
+| `asChild` | `boolean` | `false` | Renders as child element (Radix Slot) |
+
+---
+
+### `ButtonLink`
+
+Same variants as `Button`, but renders a `react-router-dom` `<Link>` for client-side navigation.
+
+```tsx
+import ButtonLink from '@usetrip/react-ui/ButtonLink'
+
+<ButtonLink to="/trips" variant="outline">View All Trips</ButtonLink>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `to` | `To` (react-router-dom) | Navigation target |
+| `variant` / `size` / `rounded` | same as Button | Visual props |
+
+---
+
+### `TextField`
+
+Controlled text input with label, hint text, validation states, and password toggle.
+
+```tsx
+import TextField from '@usetrip/react-ui/TextField'
+
+<TextField
+  label="Email"
+  type="email"
+  placeholder="you@example.com"
+  value={email}
+  onChange={setEmail}
+/>
+
+<TextField
+  label="Password"
+  type="password"
+  state="error"
+  hintText="Password must be at least 8 characters"
+  value={password}
+  onChange={setPassword}
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | — | Input label |
+| `type` | `text` \| `password` \| `email` \| `number` \| `date` | `text` | Input type |
+| `state` | `default` \| `warning` \| `error` | `default` | Validation state |
+| `hintText` | `string` | — | Helper or error message below input |
+| `value` | `string` | — | Controlled value |
+| `onChange` | `(value: string) => void` | — | Change handler |
+| `disabled` | `boolean` | `false` | Disables the input |
+
+---
+
+### `Typography`
+
+Semantic text component with consistent sizing, weight, and line-height tokens.
+
+```tsx
+import Typography from '@usetrip/react-ui/Typography'
+
+<Typography variant="h1">Plan your trip</Typography>
+<Typography variant="body2" className="text-gray-500">10 days in Japan</Typography>
+<Typography as="span" variant="caption">Last updated today</Typography>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `h1` \| `h2` \| `h3` \| `h4` \| `h5` \| `body1` \| `body2` \| `caption` \| `label` \| `button` | `body1` | Typography style |
+| `as` | `ElementType` | inferred from variant | HTML element to render |
+| `className` | `string` | — | Additional classes |
+
+---
+
+### `AlertBox`
+
+Inline feedback banners for success, error, warning, info, or default states.
+
+```tsx
+import AlertBox from '@usetrip/react-ui/AlertBox'
+
+<AlertBox type="success" message="Trip saved successfully!" />
+<AlertBox type="error" message="Something went wrong. Please try again." />
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `type` | `default` \| `info` \| `warning` \| `error` \| `success` | Alert style |
+| `message` | `string` | Message text |
+
+---
+
+### `SearchInput`
+
+Search field with a built-in search icon, available in multiple sizes and variants.
+
+```tsx
+import SearchInput from '@usetrip/react-ui/SearchInput'
+
+<SearchInput
+  size="md"
+  placeholder="Search destinations..."
+  value={query}
+  onChange={(e) => setQuery(e.target.value)}
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `sm` \| `md` \| `lg` \| `full` | `md` | Controls width and height |
+| `variant` | `default` \| `compact` | `default` | Border radius style |
+| `placeholder` | `string` | `"Digite..."` | Placeholder text |
+
+---
+
+### `CalendarInput`
+
+Read-only date display field that triggers a calendar picker when clicked.
+
+```tsx
+import CalendarInput from '@usetrip/react-ui/CalendarInput'
+
+<CalendarInput
+  label="Check-in"
+  value={date ? format(date, 'dd/MM/yyyy') : ''}
+  onClick={() => setPickerOpen(true)}
+  state="error"
+  hintText="Required field"
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | — | Input label |
+| `value` | `string` | — | Formatted date string to display |
+| `placeholder` | `string` | `"Selecione uma data"` | Shown when no value |
+| `state` | `default` \| `warning` \| `error` | `default` | Validation state |
+| `hintText` | `string` | — | Helper or error message |
+| `compact` | `boolean` | `false` | Reduces spacing for dense layouts |
+| `onClick` | `() => void` | — | Opens the date picker |
+
+---
+
+### `InputCounter`
+
+Increment/decrement counter with label, hint text, and minimum value enforcement.
+
+```tsx
+import InputCounter from '@usetrip/react-ui/InputCounter'
+
+<InputCounter
+  label="Adults"
+  value={adults}
+  onIncrement={() => setAdults(adults + 1)}
+  onDecrement={() => setAdults(adults - 1)}
+  minValue={1}
+  hintText="Ages 18+"
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | — | Counter label |
+| `value` | `number` | — | Current count |
+| `onIncrement` | `() => void` | — | Called when + is pressed |
+| `onDecrement` | `() => void` | — | Called when − is pressed |
+| `minValue` | `number` | `0` | Disables decrement at this value |
+| `hintText` | `string` | — | Helper text below counter |
+| `compact` | `boolean` | `false` | Reduces padding for dense layouts |
+
+---
+
+### `RangeDatePicker`
+
+Modal date range picker with dual-month calendar, navigation, and confirm/cancel/reset actions.
+
+```tsx
+import RangeDatePicker from '@usetrip/react-ui/RangeDatePicker'
+import type { DateRange } from 'react-day-picker'
+
+const [range, setRange] = useState<DateRange | undefined>()
+
+<RangeDatePicker
+  isOpen={isOpen}
+  onClose={() => setIsOpen(false)}
+  onSelect={(range) => { setRange(range); setIsOpen(false) }}
+  initialRange={range}
+  minDate={new Date()}
+/>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `isOpen` | `boolean` | Controls dialog visibility |
+| `onClose` | `() => void` | Called when dialog is closed |
+| `onSelect` | `(range: DateRange \| undefined) => void` | Called when selection is confirmed |
+| `initialRange` | `DateRange` | Pre-selected range |
+| `minDate` | `Date` | Disables dates before this date |
+
+---
+
+### `CustomEditor`
+
+WYSIWYG rich text editor with a fixed toolbar (bold, italic, underline, strikethrough, ordered list, bullet list). Value is stored as an HTML string.
+
+```tsx
+import CustomEditor from '@usetrip/react-ui/CustomEditor'
+import type { ContentEditableEvent } from 'react-simple-wysiwyg'
+
+<CustomEditor
+  value={content}
+  onChange={(e: ContentEditableEvent) => setContent(e.target.value)}
+  placeholder="Describe your trip..."
+/>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | `string` | HTML string content |
+| `onChange` | `(e: ContentEditableEvent) => void` | Change handler |
+| `placeholder` | `string` | Placeholder when empty |
+| `containerProps` | `ComponentProps<"div">` | Props for the outer container |
+
+> **Security:** Always sanitize the HTML string with [DOMPurify](https://github.com/cure53/DOMPurify) before rendering it with `dangerouslySetInnerHTML`.
+
+---
+
+## Peer Dependencies
+
+The library does not bundle these — your project must have them installed:
+
+```bash
+npm install react react-dom react-router-dom
+npm install @radix-ui/react-dialog @radix-ui/react-label @radix-ui/react-popover @radix-ui/react-slot
+npm install tailwindcss class-variance-authority clsx tailwind-merge
+npm install lucide-react react-icons
+npm install date-fns react-day-picker
+npm install react-simple-wysiwyg
+```
+
+---
+
+## Development
+
+Clone the repo and start the playground to develop and test components interactively:
+
+```bash
+git clone https://github.com/UseTrip/use-trip-web-ui.git
+cd use-trip-web-ui
+npm install
+npm run dev       # starts playground at localhost:5173
+npm run build     # bundles library to dist/
+```
+
+The playground (`src/playground/`) has a dedicated page for each component with live examples. Changes to component source are hot-reloaded instantly.
+
+---
+
+## Publishing
+
+```bash
+npm run build
+npm publish --access public
+```
+
+Bump the version in `package.json` before publishing (`0.x.0` for new features, `0.0.x` for patches).
+
+---
+
+## Repository
+
+- **npm**: [@usetrip/react-ui](https://www.npmjs.com/package/@usetrip/react-ui)
+- **GitHub**: [UseTrip/use-trip-web-ui](https://github.com/UseTrip/use-trip-web-ui)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usetrip/react-ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "sideEffects": false,
   "main": "dist/index.cjs",