RTE Utils

React components library in TypeScript for agigox projects.

Installation

``bash
npm install rte-utils
`

Usage

$3

You need to import both the component and its CSS styles:

`tsx
import { Histogram, Chip } from 'rte-utils';
import 'rte-utils/dist/index.css'; // Import the CSS styles
`

$3

`tsx
import React from 'react';
import { Histogram } from 'rte-utils';
import 'rte-utils/dist/index.css';

function App() {
return (


export default App;
`

$3

`tsx
import React, { useState } from 'react';
import { Histogram } from 'rte-utils';
import 'rte-utils/dist/index.css';

function EnergyDashboard() {
const [currentValue, setCurrentValue] = useState(45);

return (


`tsx
import React from 'react';
import { Histogram } from 'rte-utils';
import 'rte-utils/dist/index.css';

function HorizontalChart() {
return (


`tsx
import React from 'react';
import { Histogram } from 'rte-utils';
import 'rte-utils/dist/index.css';

function CustomCornerChart() {
return (


`tsx
import React from 'react';
import { Histogram } from 'rte-utils';
import 'rte-utils/dist/index.css';

function AdvancedStylingChart() {
return (
max={{ value: 100, color: '#000000', opacity: 0.1 }}
relative={{ value: 65, color: '#E91E63' }}
barWidth={40}
barHeight={150}
orientation="vertical"
cornerRadius={{ topLeft: 8, topRight: 8, bottomLeft: 4, bottomRight: 4 }}
>


| Prop | Type | Required | Default | Description |
| -------------- | ------------------------------------------------------------------------------------ | -------- | ------------------------------------------------------------ | ------------------------------------------------------------------- |
| max | { value: number; color: string; opacity?: number } | ✅ | - | Maximum value configuration with value, color, and optional opacity |
| relative | { value: number; color: string } | ✅ | - | Relative/current value configuration with value and color |
| barHeight | number | ❌ | 103 | Height of the histogram bar in pixels |
| barWidth | number | ❌ | 32 | Width of the histogram bar in pixels |
| orientation | 'vertical' \| 'horizontal' | ❌ | 'vertical' | Orientation of the histogram bars |
| cornerRadius | { topLeft?: number; topRight?: number; bottomLeft?: number; bottomRight?: number } | ❌ | { topLeft: 2, topRight: 2, bottomLeft: 2, bottomRight: 2 } | Individual corner radius configuration |
| children | React.ReactNode | ❌ | - | Child components (typically text content) |

#### Features

- Smooth animations: 1-second Chart.js-style transitions with easeOutQuart easing
- Multiple orientations: Support for both vertical and horizontal layouts
- Individual corner control: Customize each corner radius independently
- Dynamic two-color visualization:
- Background bar color defined by max.color represents the maximum value
- Foreground bar color defined by relative.color represents the relative value
- Opacity control: Optional opacity setting for background bars
- Smart corner rendering: Foreground bars intelligently apply corner radii based on fill level
- Customizable: Colors, dimensions, orientations, and styling options
- TypeScript support: Full type definitions included

Styling

The component uses external CSS classes for styling. Make sure to import the CSS file:

`tsx
import 'rte-utils/dist/index.css';
`

Scripts

Development & quality commands:

- npm run build – build the library (Rollup)
- npm run dev – watch mode build
- npm run test – run tests
- npm run lint – run ESLint (no fixes)
- npm run lint:fix – run ESLint with auto fixes
- npm run format – apply Prettier formatting
- npm run format:check – check formatting (CI)
- npm run typecheck – TypeScript diagnostics (no emit)
- npm run storybook – start Storybook
- npm run build-storybook – build static Storybook

Prettier is integrated with ESLint (plugin:prettier/recommended). Formatting issues will surface as ESLint errors.

You can override the default styles by targeting the CSS classes:

- .histogram-container - Main container
- .histogram-container--horizontal - Horizontal layout modifier
- .histogram-content - Content wrapper
- .histogram-content--horizontal - Horizontal content modifier
- .histogram-bar - Bar container
- .histogram-svg - SVG element
- .histogram-text-container - Text content container
- .histogram-text-container--horizontal - Horizontal text layout modifier
- .histogram-value-container - Value display wrapper
- .histogram-value - Main value text
- .histogram-unit - Unit text
- .histogram-label - Label text

$3

A comprehensive production unit component that combines an image display, status chip, input field, and switch control. Perfect for energy management dashboards and industrial control interfaces.

#### Props

| Prop | Type | Required | Default | Description |
| ---------------- | ---------------------------- | -------- | ------------------- | --------------------------------------------------- |
| onChangeInput | (value: number) => void | ❌ | - | Callback triggered when input value changes |
| onChangeSwitch | (checked: boolean) => void | ❌ | - | Callback triggered when switch state changes |
| defaultValue | number | ❌ | - | Initial value for the input field |
| defaultChecked | boolean | ❌ | false | Initial state for the switch |
| unitName | string | ❌ | "Production Unit" | Display name for the production unit |
| energyCost | number | ❌ | 0 | Energy cost value displayed in the chip (MW) |
| checkedImage | React.ReactNode | ❌ | - | Custom image/component displayed when switch is ON |
| uncheckedImage | React.ReactNode | ❌ | - | Custom image/component displayed when switch is OFF |

#### Example Usage

`tsx
import React from 'react';
import { ProductionUnit } from 'rte-utils';
import 'rte-utils/dist/index.css';

function ProductionUnitExample() {
const handleInputChange = (value: number) => {
console.log('Production value changed:', value);
};

const handleSwitchChange = (checked: boolean) => {
console.log('Production unit is now:', checked ? 'ON' : 'OFF');
};

return (