# ProCode Kendo Widget Library

A comprehensive React widget library built on Kendo UI components with TypeScript support and flexible import options.

## ⚠️ Important Note

This package treats all @progress/kendo-* packages as **external dependencies** (peerDependencies). You must install the required Kendo UI packages in your project.

## 🌟 Key Features

- **25+ React Widgets**: Pre-built components based on Kendo UI
- **WidgetFactory**: Centralized widget management and instantiation
- **TypeScript Support**: Full type definitions included
- **Modular Architecture**: Import only what you need
- **Flexible Imports**: Multiple import methods for different use cases
- **HOC Support**: Higher-order components for enhanced functionality

## 📦 Installation

```bash
# Install the core package
npm install procode-lowcode-kendo-widget

# Install required Kendo UI dependencies
npm install @progress/kendo-react-buttons @progress/kendo-react-inputs @progress/kendo-react-grid @progress/kendo-react-dateinputs @progress/kendo-react-charts @progress/kendo-react-gauges @progress/kendo-react-common @progress/kendo-react-data-tools @progress/kendo-react-editor @progress/kendo-react-labels @progress/kendo-react-layout @progress/kendo-react-listview

# Install additional peer dependencies
npm install react react-dom react-router-dom react-tooltip uuid dotenv react-dotenv @progress/kendo-data-query
```

## 🛠️ Usage

### Quick Start

```tsx
// Direct imports (recommended for tree-shaking)
import { Button, Grid } from 'procode-lowcode-kendo-widget/widgets';
import { withLabel } from 'procode-lowcode-kendo-widget/hoc';

const MyComponent = () => (
  <withLabel(Button) 
    title="Submit" 
    label={{ title: "Submit Button" }} 
  />
);
```

### Import Options

```tsx
// 1. Namespace imports (clean API)
import { Widgets, HOC } from 'procode-lowcode-kendo-widget';
const { Button, Grid } = Widgets;
const { withLabel } = HOC;

// 2. Factory pattern
import WidgetFactory from 'procode-lowcode-kendo-widget';
const factory = WidgetFactory.get();
const ButtonComponent = factory.getWidgets().get('BUTTON');

// 3. Direct module imports (tree-shakable)
import { Button } from 'procode-lowcode-kendo-widget/widgets';
import { withLabel } from 'procode-lowcode-kendo-widget/hoc';
```

## 🧩 Available Widgets

### Input Widgets
- Button, TextBox, TextArea, Dropdown, Date, Checkbox, CheckBoxGroup, RadioGroup, Switch

### Display Widgets  
- Label, Html, Icon, Image, Link

### Data Widgets
- Grid, CardGrid, List

### Layout Widgets
- Section, Accordian

### Advanced Widgets
- Editor, Chart, Gauge, ButtonDropdown, Shape

## 📋 Requirements

- React 18.2.0+
- TypeScript 4.0.0+
- Node.js 16+
- Kendo UI React components (peer dependencies)

## 📄 License

MIT

## 🤝 Contributing

Contributions are welcome! Please read our contributing guidelines.