npm package: @redi.run/redi-components
Description: This project was created to define the style of the UI and improve the UX in all projects from REDI
Author: Jonathan Manchego Sosa
Latest version: 0.0.80

![redi.run](https://redi.run/wp-content/uploads/redi-logo-1.png)

# Redi-Components

[![Latest Release](https://gitlab.redi.run/redi/redi-components/-/badges/release.svg)](https://gitlab.redi.run/redi/redi-components/-/releases)

[![pipeline status](https://gitlab.redi.run/redi/redi-components/badges/main/pipeline.svg)](https://gitlab.redi.run/redi/redi-components/-/commits/main)

Small, reusable UI component library for Redi projects.

Location

- redi/redi-components

This README describes installation, usage, API conventions, development, testing, publishing and contribution guidelines. Replace placeholder examples with concrete component names and props used in this repository.

## Table of contents

- Quick Install
- Basic Usage
- API reference (how to document each component)
- Theming & Styling
- Accessibility
- Development
- Testing & CI
- Publishing
- Contributing
- License & Changelog
- Contact

## Updates

### KPI Component Suite (2026-01-10)

- **feat**: Introduced a new **KPI** component with 12 minimalist variants to visualize key performance indicators.
- **feat**: Supports variants: `simple`, `chart`, `trend`, `progress`, `icon-bg`, `side-icon`, `card-footer`, `circular`, `sparkline-row`, `solid`, `bordered`, and `stacked`.
- **feat**: Includes lightweight SVG-based **Sparkline** charts and **Circular Progress** indicators without external heavy dependencies.
- **feat**: Added comprehensive **Storybook** stories demonstrating all 12 models with responsive gallery layout.
- **refactor**: Exported `KPI` and its types from the main package entry point for easy consumption.

### AdvancedTable Improvements (2026-01-10)

- **feat**: Added **Column Resizing**. Users can now resize column widths by dragging the column borders. Enabled via `enableColumnResizing` prop.
- **feat**: Added **Row Selection**. A checkbox column allows for multi-row selection. Controlled via `enableRowSelection`, `onRowSelectionChange`, and `rowKey` props.
- **feat**: Added **Sticky Actions Column**. The actions column can now be pinned to the right side of the table using the `stickyActionsColumn` prop.
- **fix**: Fixed `useAdvancedTable` hook to correctly initialize `selectedRows` and `columnWidths` state.
- **fix**: Added the visual resize handle element in `AdvancedTable` headers to properly trigger the resize action.
- **refactor**: Enhanced TypeScript interfaces in `types.ts`. `rowKey` is now strictly typed, and `selectedRows` no longer uses `any[]`.

## Quick Install

Install from npm or local workspace.

npm:

```bash
npm install @redi/redi-components
```

yarn:

```bash
yarn add @redi/redi-components
```

pnpm:

```bash
pnpm add @redi/redi-components
```

Note any peer dependencies (React, Vue, etc.) in package.json and ensure they are installed in the host project:

```bash
# example for React
npm install react react-dom
```

## Basic Usage

Provide short usage examples for supported frameworks. Replace with real component names.

React (ESM):

```jsx
import React from 'react';
import { Button, Card } from '@redi/redi-components';

function App() {
  return (
    <div>
      <Card>
        <h3>Title</h3>
        <p>Content</p>
        <Button onClick={() => alert('clicked')}>Click</Button>
      </Card>
    </div>
  );
}
```

TypeScript:

- Types are exported from the package. Example:

```ts
import type { ButtonProps } from '@redi/redi-components';
```

Vanilla (if UMD build available):

```html
<script src="redi-components.umd.js"></script>
<script>
  const btn = new RediComponents.Button({ text: 'Click' });
  document.body.appendChild(btn.render());
</script>
```

## API Reference (how to document each component)

For each component include:

- Name and purpose
- Import path
- Props / attributes (name, type, default, description)
- Events / callbacks
- Examples (JSX/TSX snippets)
- Accessibility notes
- CSS variables / classnames

Template:

```md
### ComponentName
Description.

Import:
```js
import { ComponentName } from '@redi/redi-components';
```

Props:

- propName: type — default — description
- onEvent: (event) => void — — description

Example:

```jsx
<ComponentName propName="value" onEvent={(e) => {}} />
```

```

## Theming & Styling
- Explain CSS-in-JS strategy or CSS variables used.
- Provide tokens list (colors, spacing, typography).
- Show how to override styles:
  - CSS variables
  - Theme provider example
  - Class override conventions

Example (CSS variables):
```css
:root {
  --redi-primary: #0b5fff;
}
```

## Accessibility

- Components must follow WCAG standards.
- Keyboard interactions documented per component.
- Use semantic HTML elements and ARIA attributes where necessary.
- Provide examples of screen-reader usage.

## Development

Recommended project structure:

```
/src
  /components
  /styles
  index.ts
/package.json
/tsconfig.json
/rollup.config.js or /webpack.config.js
```

Scripts (examples in package.json):

```json
{
  "build": "tsc && rollup -c",
  "dev": "vite",
  "test": "vitest",
  "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
  "format": "prettier --write ."
}
```

Tips:

- Use TypeScript and export types.
- Use Storybook or a docs site for live component examples.
- Keep components composable and documented.

## Testing & CI

- Unit tests: Jest/Vitest + Testing Library for DOM tests.
- Snapshot tests for API stability.
- Accessibility tests using axe-core.
- Example GitHub Actions workflow:
  - install
  - build
  - lint
  - test
  - publish (on tags)

## Publishing

- Use semantic-release or manual versioning.
- Build artifacts: ESM, CJS, UMD (optional), and type declarations (.d.ts).
- Ensure package.json fields: main, module, types, files, sideEffects.
- Set up CHANGELOG.md and follow Conventional Commits for automation.

## Contributing

- Fork -> branch -> PR.
- Follow commit message guidelines (Conventional Commits).
- Run tests and linters before PR.
- Include documentation and examples for new components or breaking changes.

## Changelog & Versioning

- Follow semantic versioning (MAJOR.MINOR.PATCH).
- Maintain CHANGELOG.md with notable changes per release.

## License

- Add license file (e.g., MIT) and reference in package.json.

## Contact / Maintainers

- Provide maintainer names and preferred contact (email or GitHub handles).

---

Fill in concrete component details (names, props, examples) within the API Reference section and update scripts/config files to match the repository toolchain used here.