@reltio/console

A collection of reusable UI components and utility functions for the Reltio Console, designed to standardize UI across Reltio applications.

Installation

To install the package, run:

npm install @reltio/console

Make sure to install peer dependencies like react, @mui/material, and others if they're not already in your project:

npm install react react-dom @mui/material clsx lodash

Usage

You can import individual components or utility functions from the package:

import { ApplicationHeader } from '@reltio/console';

const MyApp = () => (
  <ApplicationHeader notificationsUrl="/notifications" />
);

Components

ApplicationHeader

A flexible header component with integrated notification and user management buttons, as well as an apps drawer.

Props

• children (ReactNode, optional): Additional content to be rendered within the header.
• className (string, optional): Custom CSS class for the root element.
• style (CSSProperties, optional): Custom CSS styles for the root element.
• notificationsUrl (string, optional): URL for the notification button. If not defined, the notification button is hidden. Default is "/notifications?env={query.env}&tenant={query.tenant}".

Features

• Includes a menu button that toggles an apps drawer.
• Displays the Reltio logo with a link to the home page.
• Shows a "Console" icon and title.
• Renders optional child components.
• Includes a notification bell (if URL is provided).
• Displays an apps button and a user button.

Usage Example

import { ApplicationHeader } from '@reltio/console';

const MyApp = () => (
  <ApplicationHeader notificationsUrl="/custom-notifications" className="my-custom-header">
    <div>Additional header content</div>
  </ApplicationHeader>
);

Contributing

1. Clone the repository.
2. Run npm install.
3. Run npm run dev to start the development environment.

Dependencies

This package relies on several peer dependencies that you should have installed in your project:

• react
• react-dom
• @mui/material
• clsx
• lodash

Ensure these are installed in your project when using the @reltio/console package.