open-index/open-npm huggingface dataset:
npm package: @rei/dxp-library
Description: A collection of reusable Vue 3 components and composables for Uniform-powered Nuxt applications, designed to streamline content authoring and ensure consistency with Cedar’s design system.
Latest version: 1.11.0

# DXP Library

The DXP (Digital Experience Platform) Component Library is a reusable Vue 3-based library of UI components designed to be integrated into authorable front-end applications like [Alpine Composer](https://gitlab.com/rei/internal/product-engineering/alpine-fe/configuration-driven-rendering/alpine-composer).

Please refer to the [wiki](https://gitlab.com/rei/internal/product-engineering/alpine-fe/configuration-driven-rendering/dxp-library/-/wikis/home) for more information on component usage, code organization, and development practices.

## Storybook

View the Storybook for the DXP Library:

[https://dxp-library-75ad04.gitlab.io](https://dxp-library-75ad04.gitlab.io)

## Installation

```bash
npm i @rei/dxp-library
```

## Development

To support rapid iteration and debugging, [this workflow](https://gitlab.com/rei/internal/product-engineering/alpine-fe/configuration-driven-rendering/alpine-composer/-/wikis/Working-on-Alpine-Composer-with-a-local-DXP-Library) enables local linking of the DXP library for development against live source code.

### Storybook

```bash
npm run storybook
```

Component stories live in `src/stories`, and each includes both visual examples and automated tests where relevant.

### Contribution Guidelines

See [CONTRIBUTING.md](https://gitlab.com/rei/internal/product-engineering/alpine-fe/configuration-driven-rendering/dxp-library/-/blob/main/CONTRIBUTING.md?ref_type=heads) for:

- Levels of destructive change
- Questions to ask before making a change
- PR template and review process

## Integration

While this library contains vanilla Vue componenets, it is coupled with the Uniform SDK. You can integrate this library into higher level applications that use Uniform. For example, in [Alpine Composer](https://gitlab.com/rei/internal/product-engineering/alpine-fe/configuration-driven-rendering/alpine-composer):

```ts
// utils/resolveRenderer.ts
import {
  ...
  Text,
  Link,
  ...
} from '@rei/dxp-library/components';

// register your new components here
const componentMap = {
  ...
  text: Text,
  link: Link,
  ...
};

/**
 * Resolves a Uniform Canvas component instance to a corresponding Vue component renderer.
 *
 * @param {ComponentInstance} component - The Uniform Canvas component instance to resolve.
 * @return {Component} The resolved Vue component, or a default not implemented component if no match is found.
 */
export const resolveRenderer: ResolveRenderer = (
  component: ComponentInstance,
) => {
  return (
    componentMap[component.type as keyof typeof componentMap] ??
    DefaultNotImplementedComponent
  );
};
```