@xplor-education/react-wrappers 3.2.12 → 4.0.0

package/CHANGELOG.md

@@ -0,0 +1,26 @@
+# Changelog
+
+All notable changes to `@xplor-education/react-wrappers` are documented here.
+
+## [4.0.0] - 2026-05-29
+
+### New Features
+
+- **`XplorButton`** now exposes `onXplorClick?: (event: CustomEvent<void>) => void` — click events can be handled via the React wrapper prop directly. Previously the only option was the `clickAction` function prop; both patterns remain valid and `clickAction` is unchanged.
+- **`XplorDropdown`** now exposes `onXplorChange?: (event: CustomEvent<string>) => void` — selection change events are now surfaced.
+- **`XplorCard`** is now exported as a typed React wrapper, including `onXplorCardClick?: (event: CustomEvent<...>) => void`.
+
+### Migration Notes
+
+- **`@xplor-education/core-stencil-components` is now a declared peer dependency.** Both v3 and v4 require it for TypeScript types to resolve (the `index.d.ts` imports its JSX namespace), but v3 did not declare it explicitly. If you use a strict peer checker (e.g. pnpm with `strict-peer-dependencies=true`), add it to your `dependencies` or `devDependencies`.
+- **Remove any Jest `moduleNameMapper` entry for `@stencil/react-output-target/runtime`.** The runtime is now bundled into the package output. Any existing mapper entry is harmless but dead config.
+
+### Internal
+
+- Package source moved to `apps/component-library-react`. Stencil's `reactOutputTarget` now writes directly to this package's `src/`, eliminating the separate `react-wrappers` sync step.
+- Build entry changed to `src/index.ts` — a typed wrapper layer that adds `children` and `className` to all component props, generated automatically from the Stencil output on each build.
+- `@stencil/react-output-target/runtime` is now bundled into the output, so consumers no longer need a `moduleNameMapper` entry for it in Jest config.
+
+## [3.2.13] and earlier
+
+See the [react-wrappers package history](https://www.npmjs.com/package/@xplor-education/react-wrappers?activeTab=versions) for prior release notes.

package/README.md

@@ -1,98 +1,30 @@
-# @xplor-education/react-wrappers
+# React + TypeScript + Vite
 
-React component wrappers for the [Xplor Design System](../core-stencil-components), built on top of `@xplor-education/core-stencil-components`.
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
-## Installation
+Currently, two official plugins are available:
 
-```bash
-npm install @xplor-education/react-wrappers
-```
-
-## Usage
-
-```tsx
-import { XpButton, XpDatatable } from '@xplor-education/react-wrappers';
-
-function App() {
-  return (
-    <div>
-      <XpButton label="Click me" />
-    </div>
-  );
-}
-```
-
-### Peer Dependencies
-
-- `react` ^18.0.0 || ^19.0.0
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 
-## Development
+## Expanding the ESLint configuration
 
-### Build
-
-```bash
-pnpm run build
-```
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
 
-### Clean
+- Configure the top-level `parserOptions` property like this:
 
-```bash
-pnpm run clean
-```
-
-## Publishing to NPM
-
-### 1. Authenticate with NPM
-
-```bash
-npm login
-```
-
-If using a scoped registry or org, ensure your `.npmrc` is configured.
-
-### 2. Bump the version
-
-```bash
-# Choose one:
-npm version patch   # e.g. 2.0.2 → 2.0.3
-npm version minor   # e.g. 2.0.2 → 2.1.0
-npm version major   # e.g. 2.0.2 → 3.0.0
-```
-
-### 3. Build the project
-
-```bash
-pnpm run build
-```
-
-> This runs automatically before publish via the `prepublishOnly` script.
-
-### 4. (Optional) Preview what will be published
-
-```bash
-npm pack --dry-run
-```
-
-This shows exactly which files will be included. The `files` field limits it to `dist/`.
-
-### 5. Publish to NPM
-
-```bash
-npm publish
-```
-
-Since `publishConfig.access` is set to `"public"` and `private` is `false`, this will publish the scoped package publicly.
-
-To do a dry-run first:
-
-```bash
-npm publish --dry-run
-```
-
-### 6. Push the version tag to git
-
-```bash
-git push && git push --tags
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
 ```
 
-`npm version` creates a git commit and tag automatically.
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list