rte-utils

RTE Utils

React components library in TypeScript for agigox projects.

Installation

npm install rte-utils

Usage

Import Component and Styles

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

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

Basic Example

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

function App() {
  return (
    <div>
      <Histogram
        max={{ value: 100, color: '#D3D64E' }}
        relative={{ value: 56, color: '#C0C402' }}
        barWidth={32}
      >
        <div className="histogram-value-container">
          <p className="histogram-value">56</p>
          <p className="histogram-unit">MWh</p>
        </div>
        <div>
          <p className="histogram-label">Soutirage</p>
        </div>
      </Histogram>
    </div>
  );
}

export default App;

Advanced Example with Animation

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

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

  return (
    <div style={{ display: 'flex', gap: '1rem' }}>
      <Histogram
        max={{ value: 100, color: '#D3D64E' }}
        relative={{ value: currentValue, color: '#C0C402' }}
        barHeight={120}
        barWidth={40}
      >
        <div className="histogram-value-container">
          <p className="histogram-value">{currentValue}</p>
          <p className="histogram-unit">MWh</p>
        </div>
        <div>
          <p className="histogram-label">Consommation</p>
        </div>
      </Histogram>

      <button onClick={() => setCurrentValue((prev) => prev + 10)}>Increase (+10)</button>
    </div>
  );
}

Horizontal Orientation Example

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

function HorizontalChart() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
      <Histogram
        max={{ value: 100, color: '#D3D64E' }}
        relative={{ value: 75, color: '#C0C402' }}
        barWidth={200} // This becomes height in horizontal mode
        barHeight={24} // This becomes width in horizontal mode
        orientation="horizontal"
      >
        <div className="histogram-value-container">
          <p className="histogram-value">75</p>
          <p className="histogram-unit">%</p>
        </div>
        <div>
          <p className="histogram-label">Progress</p>
        </div>
      </Histogram>
    </div>
  );
}

Custom Corner Radius Example

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

function CustomCornerChart() {
  return (
    <div style={{ display: 'flex', gap: '1rem' }}>
      {/* Rounded top corners only */}
      <Histogram
        max={{ value: 100, color: '#E0E0E0' }}
        relative={{ value: 60, color: '#4CAF50' }}
        barWidth={32}
        barHeight={120}
        cornerRadius={{
          topLeft: 16,
          topRight: 16,
          bottomLeft: 0,
          bottomRight: 0,
        }}
      />

      {/* Fully rounded corners */}
      <Histogram
        max={{ value: 100, color: '#F0F0F0', opacity: 0.5 }}
        relative={{ value: 80, color: '#2196F3' }}
        barWidth={32}
        barHeight={120}
        cornerRadius={{
          topLeft: 16,
          topRight: 16,
          bottomLeft: 16,
          bottomRight: 16,
        }}
      />

      {/* Asymmetric corners */}
      <Histogram
        max={{ value: 100, color: '#FFECB3' }}
        relative={{ value: 45, color: '#FF9800' }}
        barWidth={32}
        barHeight={120}
        cornerRadius={{
          topLeft: 20,
          topRight: 4,
          bottomLeft: 4,
          bottomRight: 20,
        }}
      />
    </div>
  );
}

Opacity and Advanced Styling Example

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

function AdvancedStylingChart() {
  return (
    <Histogram
      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 }}
    >
      <div className="histogram-value-container">
        <p className="histogram-value">65</p>
        <p className="histogram-unit">kW</p>
      </div>
      <div>
        <p className="histogram-label">Power Usage</p>
      </div>
    </Histogram>
  );
}

Components

Histogram

A histogram component with smooth animations for energy data visualization.

Props

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:

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

ProductionUnit

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

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 (
    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
      {/* Basic usage */}
      <ProductionUnit
        unitName="Solar Panel"
        energyCost={25}
        defaultChecked={true}
        defaultValue={100}
        onChangeInput={handleInputChange}
        onChangeSwitch={handleSwitchChange}
      />

      {/* With custom images */}
      <ProductionUnit
        unitName="Wind Turbine"
        energyCost={50}
        defaultChecked={false}
        defaultValue={75}
        checkedImage={
          <img src="https://placehold.co/60x60/4CAF50/FFFFFF/png?text=ON" alt="Wind Turbine On" />
        }
        uncheckedImage={
          <img src="https://placehold.co/60x60/F44336/FFFFFF/png?text=OFF" alt="Wind Turbine Off" />
        }
        onChangeInput={handleInputChange}
        onChangeSwitch={handleSwitchChange}
      />

      {/* With icon components */}
      <ProductionUnit
        unitName="Nuclear Plant"
        energyCost={1000}
        defaultChecked={true}
        checkedImage={
          <div
            style={{
              width: 60,
              height: 60,
              borderRadius: '50%',
              backgroundColor: '#4CAF50',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              color: 'white',
              fontWeight: 'bold',
            }}
          >
            ⚡
          </div>
        }
        uncheckedImage={
          <div
            style={{
              width: 60,
              height: 60,
              borderRadius: '50%',
              backgroundColor: '#F44336',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              color: 'white',
              fontWeight: 'bold',
            }}
          >
            ⚠️
          </div>
        }
      />
    </div>
  );
}

Features

• Self-contained state management: Component manages its own input value and switch state
• Callback communication: Parent components receive updates through callback functions
• Automatic input disabling: Input field is disabled when switch is OFF
• Flexible image display: Support for custom images, icons, or React components
• Energy cost display: Built-in chip showing energy cost in MW
• TypeScript support: Full type definitions included

CSS Classes

The ProductionUnit component uses the following CSS classes:

• .production-unit-container - Main container
• .image-preview-container - Image display wrapper
• .production-unit-switch - Switch component styling

Chip

A customizable chip component for displaying labels, tags, or status indicators.

Props

Prop	Type	Required	Default	Description
label	string	❌	-	Text content to display inside the chip
bgColor	string	❌	-	Background color of the chip (CSS color value)
textColor	string	❌	-	Text color of the chip (CSS color value)

Example Usage

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

function ChipExample() {
  return (
    <div style={{ display: 'flex', gap: '0.5rem' }}>
      {/* Default chip */}
      <Chip label="Default" />

      {/* Success status chip */}
      <Chip label="Success" bgColor="#d4edda" textColor="#155724" />

      {/* Warning status chip */}
      <Chip label="Warning" bgColor="#fff3cd" textColor="#856404" />

      {/* Error status chip */}
      <Chip label="Error" bgColor="#f8d7da" textColor="#721c24" />

      {/* Custom branded chip */}
      <Chip label="Custom" bgColor="#007bff" textColor="#ffffff" />
    </div>
  );
}

Features

• Flexible styling: Customize background and text colors
• Simple API: Minimal props for easy integration
• TypeScript support: Full type definitions included
• CSS classes: Uses external CSS for consistent styling

CSS Classes

The Chip component uses the following CSS classes:

• .chip-container - Main chip container
• .chip-content - Content wrapper
• .chip-label - Label text styling

Demo Application

This package includes a demo application that showcases all available components with interactive examples. The demo is located in the /demo folder and includes:

• Interactive Histogram examples with dynamic value controls
• Chip component variations with different colors and styles
• Live examples of all component features

To run the demo application:

cd demo
npm install
npm run dev

License

MIT