Redi-Components

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:

npm install @redi/redi-components

yarn:

yarn add @redi/redi-components

pnpm:

pnpm add @redi/redi-components

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

# example for React
npm install react react-dom

Basic Usage

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

React (ESM):

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:

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

Vanilla (if UMD build available):

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

### ComponentName
Description.

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

Props:

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

Example:

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

{
  "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.