# Ezderm UI Kit

Reusable React component library used across the Ezderm web portfolio.

## Requirements

**v6.x is reserved for React 19.** Requiring React 19 is a breaking change, so projects not yet migrated to React 19 must stay on v5.x (React 18). Pick the major that matches your app's React version:

| ui-kit version | React           |
| -------------- | --------------- |
| `6.x`          | `19.x`          |
| `5.x`          | `18.x`          |
| `4.x`          | `16.x` / `17.x` |

**v6.x (React 19):**

```json
"peerDependencies": {
  "prop-types": "15.x",
  "react": "19.x",
  "react-dom": "19.x"
}
```

**v5.x (React 18):**

```json
"peerDependencies": {
  "prop-types": "15.x",
  "react": "18.x",
  "react-dom": "18.x"
}
```

**v4.x (React 16 / 17):**

```json
"peerDependencies": {
  "prop-types": "15.x",
  "react": "16.x || 17.x",
  "react-dom": "16.x || 17.x"
}
```

> v4.x predates the 5.0.0 dependency rewrite (Enzyme, `react-sortable-hoc`, `react-treebeard`, react-day-picker v7, react-select v3, …), so its runtime dependencies differ from the table below, which documents the current v5/v6 lineage.

## Installation

```bash
npm install @ezderm/ui-kit
```

## Dependencies

Packages shipped with this library, so you don't have to dig through `package.json`.

### Peer dependencies

You must provide these in your app (they are **not** bundled):

| Package      | v6.x   | v5.x   | v4.x            |
| ------------ | ------ | ------ | --------------- |
| `react`      | `19.x` | `18.x` | `16.x` / `17.x` |
| `react-dom`  | `19.x` | `18.x` | `16.x` / `17.x` |
| `prop-types` | `15.x` | `15.x` | `15.x`          |

### Runtime dependencies

Installed automatically with the kit:

| Package                                            | Version         | Used for                                              |
| -------------------------------------------------- | --------------- | ----------------------------------------------------- |
| `@dnd-kit/core`                                    | `^6.3.1`        | Drag-and-drop engine                                  |
| `@dnd-kit/sortable`                                | `^10.0.0`       | Sortable lists (`TableBase` column reorder)           |
| `@dnd-kit/utilities`                               | `^3.2.2`        | dnd-kit CSS transform helpers                         |
| `array-move`                                       | `^4.0.0`        | Array reordering (`MultiSelect`, column customizer)   |
| `classnames`                                       | `^2.5.1`        | Conditional `className` composition                   |
| `cropperjs`                                        | `2.1.1`         | Image cropping (`AvatarUploader`)                     |
| `date-fns`                                         | `4.4.0`         | Date formatting/parsing (via v1-token compat layer)   |
| `file-saver`                                       | `2.0.5`         | Client-side file download                             |
| `immer`                                            | `^11.1.11`      | Immutable state updates                               |
| `inputmask`                                        | `5.0.9`         | Input masking (`MaskedTextInput`)                     |
| `jstz`                                             | `2.1.1`         | Timezone detection                                    |
| `moveto`                                           | `1.8.2`         | Smooth scrolling                                      |
| `rc-tooltip`                                       | `6.4.0`         | Tooltip primitive                                     |
| `react-contexify`                                  | `6.0.0`         | Context menu (`Popover`)                              |
| `react-day-picker`                                 | `10.0.1`        | Calendar (`DatePicker`, `DateRangePicker`)            |
| `react-draggable`                                  | `4.7.0`         | Draggable elements                                    |
| `react-dropzone`                                   | `^17.0.0`       | File drag-and-drop (uploaders)                        |
| `react-modal`                                      | `^3.16.3`       | Modal dialogs                                         |
| `react-onclickoutside`²                            | `^6.13.2`       | Outside-click detection (`ClickOutsideWrapper`)       |
| `react-select`                                     | `5.10.2`        | `Select` / `AsyncSelect`                              |
| `react-spinkit`                                    | `^3.0.0`        | Loading spinners                                      |
| `react-text-mask`                                  | `5.5.0`         | Masked text inputs                                    |
| `react-transition-group`                           | `^4.4.5`        | Mount/unmount transitions                             |
| `react-virtualized`                                | vendored¹       | Virtualized tables/lists                              |
| `spacetime`                                        | `7.13.0`        | Timezone-aware date handling                          |
| `text-mask-addons`                                 | `3.8.0`         | Mask add-ons (e.g. number/currency masks)             |
| `@babel/plugin-proposal-nullish-coalescing-operator` | `^7.18.6`    | Babel runtime helper                                  |

¹ `react-virtualized` is vendored locally at `./custom-packages/react-virtualized` rather than pulled from npm.

² **v5.x only.** Removed in v6 — `ClickOutsideWrapper` now uses a built-in ref-based outside-click implementation (React 19 removed `ReactDOM.findDOMNode`, which `react-onclickoutside` depends on).

## Publish

```bash
npm publish --access public
```

## Running Storybook

```bash
npm run storybook
```

## Running Tests

```bash
npm test
```

---

## Changelog

See [CHANGELOG.md](./CHANGELOG.md) for the full, versioned history of breaking changes, component fixes, dependency upgrades, and tooling changes.