# VarStreet Template Library

A comprehensive React template system with widget factories, action handlers, and SCSS styling for dynamic template creation.

## Features

- **TemplateWidgetFactory**: Dynamic widget creation and management system
- **TemplateActionFactory**: Action handler and template action management
- **TypeScript Support**: Full type definitions included
- **Modular Architecture**: Import only what you need
- **SCSS Styling**: Built-in template styling system
- **Template Actions**: Comprehensive action handling system

## Installation

```bash
npm install procode-vs-template
```

### Peer Dependencies

This package requires the following peer dependencies:

```bash
# Install the core package
npm install procode-vs-template

# Install required Kendo UI and React dependencies
npm install @progress/kendo-react-buttons @progress/kendo-react-dateinputs @progress/kendo-react-dialogs @progress/kendo-react-dropdowns @progress/kendo-react-inputs

# Install React dependencies
npm install react react-dom react-router-dom react-beautiful-dnd
```

## Usage

### TemplateWidgetFactory (Default Export)

```typescript
import TemplateWidgetFactory from 'procode-vs-template';

// Use the factory to create template widgets
const factory = new TemplateWidgetFactory();
const widget = factory.createWidget(config);
```

### Individual Factory and Action Imports

```typescript
// Import specific factories
import { TemplateWidgetFactory, TemplateActionFactory } from 'procode-vs-template/factories';

// Import specific actions
import { TemplateActionFactory } from 'procode-vs-template/actions';
```

### Styles

```scss
// Import template styles
@import 'procode-vs-template/styles';
```

## Template Factories

### TemplateWidgetFactory

The main factory for creating template widgets:

```typescript
import { TemplateWidgetFactory } from 'procode-vs-template';

const factory = new TemplateWidgetFactory();
const widget = factory.createWidget({
  widgetType: 'example',
  config: { /* widget configuration */ },
  uiElementGroupData: { /* UI element data */ }
});
```

### TemplateActionFactory

Factory for managing template actions:

```typescript
import { TemplateActionFactory } from 'procode-vs-template';

const actionFactory = new TemplateActionFactory();
const action = actionFactory.createAction(actionType, parameters);
```

## TypeScript Support

The library provides comprehensive TypeScript definitions:

```typescript
import type {
  BaseProps,
  TemplateActionType
} from 'procode-vs-template';
```

### BaseProps Interface

```typescript
interface BaseProps {
  widgetType?: string;
  targetEntity?: string;
  config: any;
  screenDataField?: string;
  targetScreenDataField?: string;
  eventService?: any;
  uiElementGroupData: Record<string, any>;
  widgetStyle?: {
    id?: string;
    className?: string;
    inline?: React.CSSProperties;
  };
  viewModel?: Record<string, any>;
}
```

## Examples

### Basic Template Widget Creation

```tsx
import TemplateWidgetFactory, { BaseProps } from 'procode-vs-template';

const MyComponent = () => {
  const widgetConfig: BaseProps = {
    widgetType: 'button',
    config: {
      title: 'Click Me',
      variant: 'primary'
    },
    uiElementGroupData: {
      // UI element configuration
    },
    widgetStyle: {
      className: 'my-template-widget',
      inline: { margin: '10px' }
    }
  };

  const factory = new TemplateWidgetFactory();
  const widget = factory.createWidget(widgetConfig);

  return widget;
};
```

### Using Template Actions

```tsx
import { TemplateActionFactory, TemplateActionType } from 'procode-vs-template/actions';

const handleAction = () => {
  const actionFactory = new TemplateActionFactory();
  const actionType: TemplateActionType = 'NAVIGATE';
  
  const action = actionFactory.createAction(actionType, {
    target: '/dashboard',
    params: { id: 123 }
  });
  
  action.execute();
};
```

## Requirements

- React 18.2.0+
- TypeScript 5.0.2+
- 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.
