@woobee/ui 0.2.0

package/README.md

@@ -0,0 +1,194 @@
+# @woobee/ui
+
+WooBee UI component library — reusable React components styled with Tailwind CSS.
+
+## Installation
+
+```bash
+npm install @woobee/ui
+```
+
+### Peer Dependencies
+
+- `react` >= 18
+- `react-dom` >= 18
+
+## Setup
+
+### 1. Wrap your app with `ModalProvider`
+
+Components like `Modal`, `Drawer`, and `ConfirmationBox` require the `ModalProvider` context:
+
+```tsx
+import { ModalProvider } from '@woobee/ui'
+
+function App() {
+  return (
+    <ModalProvider>
+      {/* your app */}
+    </ModalProvider>
+  )
+}
+```
+
+### 2. Configure Custom Tailwind Colors
+
+This library uses custom Tailwind color tokens. Add these to your Tailwind CSS configuration:
+
+#### Tailwind v4 (`app.css` or `globals.css`)
+
+```css
+@import "tailwindcss";
+
+@theme {
+  /* Primary */
+  --color-primary-50: #f0f9ff;
+  --color-primary-100: #e0f2fe;
+  --color-primary-200: #bae6fd;
+  --color-primary-300: #7dd3fc;
+  --color-primary-400: #38bdf8;
+  --color-primary-500: #0ea5e9;
+  --color-primary-600: #0284c7;
+  --color-primary-700: #0369a1;
+  --color-primary-800: #075985;
+  --color-primary-900: #0c4a6e;
+
+  /* Brown */
+  --color-brown-500: #8B6914;
+  --color-brown-600: #7a5c11;
+
+  /* Charcoal */
+  --color-charcoal-50: #f5f5f5;
+  --color-charcoal-100: #e0e0e0;
+  --color-charcoal-200: #b0b0b0;
+  --color-charcoal-300: #808080;
+  --color-charcoal-400: #606060;
+  --color-charcoal-500: #404040;
+  --color-charcoal-600: #333333;
+  --color-charcoal-700: #262626;
+  --color-charcoal-800: #1a1a1a;
+  --color-charcoal-900: #111111;
+
+  /* Cream */
+  --color-cream-50: #fefdf8;
+  --color-cream-200: #f5f0e1;
+
+  /* Flamingo */
+  --color-flamingo-500: #f472b6;
+
+  /* Dark Blue */
+  --color-dark-blue-500: #1e3a5f;
+}
+```
+
+> **Note**: Adjust the exact color values to match your brand. The values above are defaults — refer to your main app's Tailwind theme for the canonical values.
+
+## Available Components
+
+### General
+
+| Component | Import |
+|-----------|--------|
+| `Button` | `import { Button } from '@woobee/ui'` |
+| `Tag` | `import { Tag } from '@woobee/ui'` |
+| `TagGroup` | `import { TagGroup } from '@woobee/ui'` |
+| `Tabs` | `import { Tabs } from '@woobee/ui'` |
+| `Toggle` | `import { Toggle } from '@woobee/ui'` |
+| `Loading` | `import { Loading } from '@woobee/ui'` |
+| `CheckboxList` | `import { CheckboxList } from '@woobee/ui'` |
+| `SortIcon` | `import { SortIcon } from '@woobee/ui'` |
+| `InlinePrompt` | `import { InlinePrompt } from '@woobee/ui'` |
+
+### Overlays
+
+| Component | Import |
+|-----------|--------|
+| `Modal` | `import { Modal } from '@woobee/ui'` |
+| `Drawer` | `import { Drawer } from '@woobee/ui'` |
+| `ConfirmationBox` | `import { ConfirmationBox } from '@woobee/ui'` |
+| `Transition` | `import { Transition } from '@woobee/ui'` |
+
+### HTML Elements
+
+| Component | Import |
+|-----------|--------|
+| `H1`, `H2`, `H3`, `H4`, `B` | `import { H1, H2, H3, H4, B } from '@woobee/ui'` |
+
+### Table
+
+| Component | Import |
+|-----------|--------|
+| `Table`, `Thead`, `Tbody`, `Tr`, `Th`, `Td` | `import { Table, Thead, Tbody, Tr, Th, Td } from '@woobee/ui'` |
+
+### Form
+
+| Component | Import |
+|-----------|--------|
+| `Input` | `import { Input } from '@woobee/ui'` |
+| `Label` | `import { Label } from '@woobee/ui'` |
+| `Select` | `import { Select } from '@woobee/ui'` |
+| `SelectInput` | `import { SelectInput } from '@woobee/ui'` |
+| `Textarea` | `import { Textarea } from '@woobee/ui'` |
+| `TagInput` | `import { TagInput } from '@woobee/ui'` |
+
+### Utilities
+
+| Utility | Import |
+|---------|--------|
+| `classNames` | `import { classNames } from '@woobee/ui'` |
+| `classNameObject` | `import { classNameObject } from '@woobee/ui'` |
+
+## Usage Examples
+
+### Button
+
+```tsx
+import { Button } from '@woobee/ui'
+
+<Button variant="primary" size="medium" onClick={() => {}}>
+  Click Me
+</Button>
+
+<Button variant="secondary" loading={true}>
+  Loading...
+</Button>
+```
+
+### Modal
+
+```tsx
+import { Modal } from '@woobee/ui'
+
+<Modal
+  open={isOpen}
+  title="Edit Item"
+  size="medium"
+  onClose={() => setIsOpen(false)}
+  onCancel={() => setIsOpen(false)}
+  onSubmit={handleSave}
+  submitText="Save"
+>
+  <p>Modal content here</p>
+</Modal>
+```
+
+### Toggle
+
+```tsx
+import { Toggle } from '@woobee/ui'
+
+<Toggle value={isEnabled} onChange={setIsEnabled} />
+<Toggle value={isSmall} onChange={setIsSmall} size="small" />
+```
+
+## TypeScript
+
+All components export their prop types. Import them alongside the component:
+
+```tsx
+import { Button, type ButtonProps } from '@woobee/ui'
+```
+
+## License
+
+MIT

package/SKIPPED.md

@@ -0,0 +1,58 @@
+# Skipped Components
+
+The following UI components from `woobee/src/components/ui` have been **excluded** from `@woobee/ui` in this initial release due to deep dependencies on app-specific code (Next.js router, app contexts, custom hooks, or heavy external libraries).
+
+They can be added in future iterations once their dependencies are decoupled.
+
+---
+
+## Components with Next.js / Router Dependencies
+
+| Component | Source File | Blocking Dependency |
+|-----------|-----------|---------------------|
+| **ButtonGroup** | `ui/ButtonGroup.js` | `next/link`, `useRouter`, `NAV_LINKS` constants, `NavigationModal` |
+| **Breadcrumb** | `ui/Breadcrumb/index.js` | `next/link`, `useRouter` |
+| **Tab** | `ui/Tab/index.js` | `next/link` |
+
+## Components with App Context Dependencies
+
+| Component | Source File | Blocking Dependency |
+|-----------|-----------|---------------------|
+| **Info/View** | `ui/Info/View.js` | `useNotificationContext`, `copyToClipboard` |
+| **Info/Action** | `ui/Info/Action.js` | `Popover` module component, `DotsSVG` icon |
+| **Info/ListView** | `ui/Info/ListView.js` | `H3` from `ui/HTML` (now available — can be migrated) |
+| **Info/TreeView** | `ui/Info/TreeView.js` | `H3` from `ui/HTML` (now available — can be migrated) |
+
+## Components with Custom Hook Dependencies
+
+| Component | Source File | Blocking Dependency |
+|-----------|-----------|---------------------|
+| **Pagination** (full) | `ui/Pagination/index.js` | `useResizeListener` custom hook |
+| **Pagination/Simple** | `ui/Pagination/Simple.js` | `LeftSVG`, `RightSVG` icon components |
+
+## Components with Heavy External Dependencies
+
+| Component | Source File | Blocking Dependency |
+|-----------|-----------|---------------------|
+| **SelectMenu** | `ui/SelectMenu/index.js` | Complex (12KB+), custom `KeystrokeHandler` |
+| **Notification / NotificationCenter** | `ui/Notification/*` | `react-dom/client` imperative API, class component |
+| **AvatarByCharacter** | `ui/AvatarByCharacter/` | App-specific avatar logic |
+| **DatePicker** | `ui/DatePicker/` | Custom date picker implementation |
+| **DatePicker2** | `ui/DatePicker2/` | Custom date picker v2 |
+| **DateRangePicker** | `ui/DateRangePicker/` | Date range selection logic |
+| **TimePicker** | `ui/TimePicker/` | Custom time picker |
+| **PhonePicker** | `ui/PhonePicker/` | Phone number input with country codes |
+| **QuillEditor** | `ui/QuillEditor/` | Quill rich text editor dependency |
+| **RichTextEditor** | `ui/RichTextEditor/` | Plate.js editor dependency |
+| **Uploader** | `ui/Uploader/` | File upload with dropzone |
+| **Poll** | `ui/Poll/` | Polling/survey UI |
+| **Markdown** | `ui/Markdown/` | Markdown rendering |
+| **UnderConstruction** | `ui/UnderConstruction/` | Placeholder page |
+
+---
+
+## Migration Notes
+
+- **Info/ListView** and **Info/TreeView** only depend on `H3` from `ui/HTML`, which is now included in the package. These are good candidates for the next iteration.
+- **Pagination/Simple** only needs two SVG icon components (`LeftSVG`, `RightSVG`) to be inlined — also a good next candidate.
+- **SelectMenu** is a high-value component but needs its `KeystrokeHandler` and `Item` subcomponents to be included.