procode-vs-template 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,37 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.0.0] - 2025-10-08
+
+### Added
+- Initial release of VarStreet Template Library
+- TemplateWidgetFactory for dynamic widget creation and management
+- TemplateActionFactory for action handler and template action management
+- Comprehensive TypeScript support with full type definitions
+- Modular architecture with tree-shaking support
+- Multiple export endpoints:
+  - Main export for TemplateWidgetFactory as default
+  - `/factories` for factory components
+  - `/actions` for action components
+  - `/styles` for SCSS styling
+- Built-in SCSS styling system with template base styles
+- BaseProps interface for widget configuration
+- TemplateActionType for action type definitions
+- Peer dependencies support for Kendo UI React components
+- MIT license
+
+### Technical Features
+- Rollup build system with multiple bundle outputs
+- ESM and CommonJS support
+- TypeScript declaration files generation
+- SCSS file copying for external consumption
+- Comprehensive factory pattern implementation
+- Widget and action management system
+- Style customization through widgetStyle props
+- Template configuration support
+- UI element group data handling
+- Event service integration

package/README.md

@@ -0,0 +1,188 @@
+# 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.

package/dist/actions.esm.js

@@ -0,0 +1,53 @@
+var TemplateActionType;
+(function (TemplateActionType) {
+    TemplateActionType["MENUNAVIGATE"] = "MENUNAVIGATE";
+})(TemplateActionType || (TemplateActionType = {}));
+var NavigationType;
+(function (NavigationType) {
+    NavigationType["EXTERNAL"] = "EXTERNAL";
+    NavigationType["NEWWINDOW"] = "NEWWINDOW";
+    NavigationType["INTERNAL"] = "INTERNAL";
+})(NavigationType || (NavigationType = {}));
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const navigationHandlers = {
+    [NavigationType.INTERNAL]: (path, actionInvokerProps) => actionInvokerProps.navigate(path),
+    [NavigationType.EXTERNAL]: (path) => (window.location.href = path),
+    [NavigationType.NEWWINDOW]: (path) => new Function(path)(),
+};
+const handleMenuNavigation = (actionInvokerProps, path, navigationType) => {
+    const handler = navigationHandlers[navigationType];
+    if (handler) {
+        handler(path, actionInvokerProps);
+    }
+    else {
+        console.warn(`Unknown navigation type: ${navigationType}`);
+    }
+};
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class TemplateActionFactory {
+    constructor() {
+        Object.defineProperty(this, "actionMap", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.actionMap = new Map([
+            [TemplateActionType.MENUNAVIGATE, handleMenuNavigation],
+        ]);
+    }
+    static getInstance() {
+        if (!TemplateActionFactory.instance) {
+            TemplateActionFactory.instance = new TemplateActionFactory();
+        }
+        return TemplateActionFactory.instance;
+    }
+    getAction(key) {
+        return this.actionMap.get(key) || null;
+    }
+}
+
+export { TemplateActionFactory };
+//# sourceMappingURL=actions.esm.js.map

package/dist/actions.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/actions.js

@@ -0,0 +1,55 @@
+'use strict';
+
+var TemplateActionType;
+(function (TemplateActionType) {
+    TemplateActionType["MENUNAVIGATE"] = "MENUNAVIGATE";
+})(TemplateActionType || (TemplateActionType = {}));
+var NavigationType;
+(function (NavigationType) {
+    NavigationType["EXTERNAL"] = "EXTERNAL";
+    NavigationType["NEWWINDOW"] = "NEWWINDOW";
+    NavigationType["INTERNAL"] = "INTERNAL";
+})(NavigationType || (NavigationType = {}));
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const navigationHandlers = {
+    [NavigationType.INTERNAL]: (path, actionInvokerProps) => actionInvokerProps.navigate(path),
+    [NavigationType.EXTERNAL]: (path) => (window.location.href = path),
+    [NavigationType.NEWWINDOW]: (path) => new Function(path)(),
+};
+const handleMenuNavigation = (actionInvokerProps, path, navigationType) => {
+    const handler = navigationHandlers[navigationType];
+    if (handler) {
+        handler(path, actionInvokerProps);
+    }
+    else {
+        console.warn(`Unknown navigation type: ${navigationType}`);
+    }
+};
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class TemplateActionFactory {
+    constructor() {
+        Object.defineProperty(this, "actionMap", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.actionMap = new Map([
+            [TemplateActionType.MENUNAVIGATE, handleMenuNavigation],
+        ]);
+    }
+    static getInstance() {
+        if (!TemplateActionFactory.instance) {
+            TemplateActionFactory.instance = new TemplateActionFactory();
+        }
+        return TemplateActionFactory.instance;
+    }
+    getAction(key) {
+        return this.actionMap.get(key) || null;
+    }
+}
+
+exports.TemplateActionFactory = TemplateActionFactory;
+//# sourceMappingURL=actions.js.map

package/dist/actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/assets/info.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00065 14.6667C11.6825 14.6667 14.6673 11.6819 14.6673 8.00001C14.6673 4.31811 11.6825 1.33334 8.00065 1.33334C4.31875 1.33334 1.33398 4.31811 1.33398 8.00001C1.33398 11.6819 4.31875 14.6667 8.00065 14.6667Z" stroke="#586B71" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 10.6667V8" stroke="#586B71" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 5.33334H8.00667" stroke="#586B71" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/dist/assets/styles/_tempalte-base.scss

@@ -0,0 +1,5 @@
+@import "../../Widgets/ConfirmationAlert/scss/index.scss";
+@import "../../Widgets/GridToolBar/scss/index.scss";
+@import "../../Widgets/InformationAlert/scss/index.scss";
+@import "../../Widgets/Menu/scss/index.scss";
+@import "../../Widgets/Block/Styles/index.scss";