# ProCode Kendo Widget

A comprehensive React widget library built on Kendo UI components, providing modern UI widgets with TypeScript support and flexible configuration options.

## Features

- **WidgetFactory**: Centralized widget management and instantiation
- **25+ React Widgets**: Pre-built components based on Kendo UI  
- **TypeScript Support**: Full type definitions included
- **Modular Architecture**: Import only what you need
- **Comprehensive Props**: Extensive configuration options
- **Theme Support**: Built-in SCSS styling system

## Installation

```bash
npm install procode-lowcode-kendo-widget
```

### Peer Dependencies

This package requires the following Kendo UI peer dependencies:

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

## 📦 Import Options

This package provides multiple flexible import methods to suit different development patterns:

### 🔧 Default Import (WidgetFactory)
```typescript
import WidgetFactory from 'procode-lowcode-kendo-widget';
const factory = WidgetFactory.get();
```

### 🧩 Namespace Imports (Recommended)
```typescript
// Import namespaced modules
import { Widgets, Interfaces, HOC, Factory } from 'procode-lowcode-kendo-widget';

// Usage
const { Button, Grid, TextBox } = Widgets;
const { withLabel, withToolTip } = HOC;
const { BaseProps, Style } = Interfaces;
```

### 🎯 Direct Module Imports (Tree-shakable)
```typescript
// Widgets
import { Button, Grid, TextBox, Dropdown } from 'procode-lowcode-kendo-widget/widgets';

// HOC Components
import { withLabel, withToolTip, withValidations } from 'procode-lowcode-kendo-widget/hoc';

// Type Interfaces
import { BaseProps, ComprehensiveProps, IWidgetFactory } from 'procode-lowcode-kendo-widget/interfaces';

// Factory
import { WidgetFactory, IWidgetFactory } from 'procode-lowcode-kendo-widget/factory';

// Styles
import 'procode-lowcode-kendo-widget/styles';
```

### 🎨 TypeScript Types
```typescript
// Import types only (no runtime impact)
import type { 
  BaseProps, 
  ComprehensiveProps, 
  HelperTextProps,
  LabelProps,
  ToolTipProps,
  ValidationProps,
  Style,
  WidgetTypes
} from 'procode-lowcode-kendo-widget';

// Or from specific modules
import type { IButton, IGrid } from 'procode-lowcode-kendo-widget/interfaces';
import type { HelperTextProps } from 'procode-lowcode-kendo-widget/hoc';
```

### 🎯 Quick Start Examples
```typescript
// Option 1: Direct imports (best for tree-shaking)
import { Button, Grid } from 'procode-lowcode-kendo-widget/widgets';
import { withLabel } from 'procode-lowcode-kendo-widget/hoc';

// Option 2: Namespace imports (clean API)
import { Widgets, HOC } from 'procode-lowcode-kendo-widget';
const { Button, Grid } = Widgets;
const { withLabel } = HOC;

// Option 3: Factory pattern
import WidgetFactory, { WidgetTypes } from 'procode-lowcode-kendo-widget';
const factory = WidgetFactory.get();
const ButtonComponent = factory.getWidgets().get(WidgetTypes.BUTTON);
```

## Usage

### WidgetFactory (Default Export)

```typescript
import WidgetFactory from 'procode-lowcode-kendo-widget';

const factory = WidgetFactory.get();
const widgets = factory.getWidgets();
```

### Individual Widgets

```typescript
// Import specific widgets
import { Button, TextBox, Grid, Dropdown } from 'procode-lowcode-kendo-widget/widgets';

// Use in your component
<Button title="Click Me" onClick={handleClick} />
<TextBox value={inputValue} onChange={handleChange} />
```

### Interfaces and Types

```typescript
// Import all interfaces
import { Interfaces } from 'procode-lowcode-kendo-widget';

// Or import specific types
import { 
  BaseProps, 
  ComprehensiveProps, 
  WidgetTypes,
  IWidgetFactory 
} from 'procode-lowcode-kendo-widget/interfaces';
```

### Factory Module

```typescript
// Import factory components
import { WidgetFactory, IWidgetFactory } from 'procode-lowcode-kendo-widget/factory';
```

### HOC (Higher Order Components)

```typescript
// Import all HOC components
import { HOC } from 'procode-lowcode-kendo-widget';

// Or import specific HOCs
import { 
  withHelperText,
  withLabel,
  withToolTip,
  withValidations
} from 'procode-lowcode-kendo-widget/hoc';

// Import HOC types
import {
  HelperTextProps,
  LabelProps,
  ToolTipProps,
  ValidationProps
} from 'procode-lowcode-kendo-widget/hoc';
```

### Styles

```scss
// Import widget styles
@import 'procode-lowcode-kendo-widget/styles';
```

```typescript
// Get styles path programmatically
import { getWidgetStylesPath } from 'procode-lowcode-kendo-widget';
console.log(getWidgetStylesPath()); // './assets/styles/_widget-base-default.scss'
```

## Available Widgets

### Input Widgets
- **Button** - Interactive button with multiple styles
- **TextBox** - Single-line text input with validation
- **TextArea** - Multi-line text input
- **Dropdown** - Select dropdown with search
- **Date** - Date picker component
- **Checkbox** - Single checkbox input
- **CheckBoxGroup** - Multiple checkbox group
- **RadioGroup** - Radio button group
- **Switch** - Toggle switch component

### Display Widgets  
- **Label** - Text label component
- **Html** - Raw HTML content display
- **Icon** - Icon display component
- **Image** - Image display with fallback
- **Link** - Hyperlink component

### Data Widgets
- **Grid** - Advanced data grid with sorting/filtering
- **CardGrid** - Card-based data display
- **List** - Simple list component

### Layout Widgets
- **Section** - Container section
- **Accordian** - Collapsible content panels

### Advanced Widgets
- **Editor** - Rich text editor
- **Chart** - Data visualization charts
- **Gauge** - Gauge/meter displays
- **ButtonDropdown** - Button with dropdown menu
- **Shape** - Geometric shapes

## Higher Order Components (HOCs)

### Available HOCs
- **withHelperText** - Adds helper text functionality to components
- **withLabel** - Adds label functionality to form components
- **withToolTip** - Adds tooltip functionality to components
- **withValidations** - Adds validation display to form components

### HOC Usage Examples

```tsx
import { withLabel, withValidations } from 'procode-lowcode-kendo-widget/hoc';
import { Button } from 'procode-lowcode-kendo-widget/widgets';

// Enhance Button component with label and validation
const EnhancedButton = withValidations(withLabel(Button));

const MyForm = () => {
  return (
    <EnhancedButton
      title="Submit"
      label={{
        title: "Submit Button",
        isApply: true,
        widgetStyle: { className: "form-label" }
      }}
      validations={["Please fill all required fields"]}
    />
  );
};
```

## Widget Props

All widgets extend from `BaseProps` or `ComprehensiveProps`:

```typescript
interface BaseProps {
  id?: string | number;
  widgetStyle?: Style;
  rootStyle?: Style;
  toolTip?: ToolTip;
  label?: Label;
  helperText?: HelperText;
  disabled?: boolean;
  visible?: boolean;
  screenDataField?: string;
  value?: any;
  // Event handlers
  onClick?: Function;
  onChange?: Function;
  onBlur?: Function;
  onFocus?: Function;
}

interface ComprehensiveProps extends BaseProps {
  validations?: any[];
}
```

## TypeScript Support

The library provides comprehensive TypeScript definitions:

```typescript
import type { 
  BaseProps,
  ComprehensiveProps,
  Style,
  ToolTip,
  Label,
  HelperText,
  WidgetTypes,
  IWidgetFactory
} from 'procode-lowcode-kendo-widget';
```

## Examples

### Basic Button Usage

```tsx
import { Button } from 'procode-lowcode-kendo-widget/widgets';

const MyComponent = () => {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return (
    <Button
      title="Submit"
      fillMode="solid"
      role="button"
      type="submit"
      onClick={handleClick}
      widgetStyle={{
        className: 'my-button',
        inline: { backgroundColor: 'blue' }
      }}
    />
  );
};
```

### Grid Widget Example

```tsx
import { Grid } from 'procode-lowcode-kendo-widget/widgets';

const DataGrid = () => {
  const columns = [
    { field: 'name', title: 'Name' },
    { field: 'email', title: 'Email' }
  ];

  const data = [
    { name: 'John Doe', email: 'john@example.com' }
  ];

  return (
    <Grid
      columns={columns}
      data={data}
      pageable={true}
      sortable={true}
    />
  );
};
```

### Using WidgetFactory

```tsx
import WidgetFactory, { WidgetTypes } from 'procode-lowcode-kendo-widget';

const factory = WidgetFactory.get();
const widgets = factory.getWidgets();

// Get specific widget component
const ButtonWidget = widgets.get(WidgetTypes.BUTTON);
```

## Requirements

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

## License

MIT

## Contributing

We welcome contributions! Please see our contributing guidelines for more details.

## Support

For support and questions, please visit our documentation or create an issue in the repository.