@xplor-education/react-wrappers

React component wrappers for the Xplor Design System, built on top of @xplor-education/core-stencil-components.

Installation

npm install @xplor-education/react-wrappers

Usage

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

Development

Build

pnpm run build

Clean

pnpm run clean

Publishing to NPM

1. Authenticate with NPM

npm login

If using a scoped registry or org, ensure your .npmrc is configured.

2. Bump the version

# 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

pnpm run build

This runs automatically before publish via the prepublishOnly script.

4. (Optional) Preview what will be published

npm pack --dry-run

This shows exactly which files will be included. The files field limits it to dist/.

5. Publish to NPM

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:

npm publish --dry-run

6. Push the version tag to git

git push && git push --tags

npm version creates a git commit and tag automatically.