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.

Please refer to the wiki 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

Installation

npm i @rei/dxp-library

Development

To support rapid iteration and debugging, this workflow enables local linking of the DXP library for development against live source code.

Storybook

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 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:

// 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
  );
};