@srikanthsai27/afrisure-blockly-expression 1.0.0

package/README.md

@@ -0,0 +1,226 @@
+# Afrisure Blockly Expression Library
+
+A reusable Angular library for building visual block-based expressions using Google Blockly.
+
+## Features
+
+- 🧩 **Visual Expression Builder**: Drag-and-drop interface for creating complex expressions
+- 🎨 **Custom Blocks**: Math operations (addition, subtraction, multiplication, division, max, min)
+- 🔢 **Dynamic Variables**: Support for custom lookup variables
+- 💾 **Save/Load**: Serialize and deserialize block configurations
+- 🎯 **Type-Safe**: Full TypeScript support
+- 🌐 **i18n Ready**: Built with ngx-translate support
+
+## Installation
+
+### From NPM (After Publishing)
+```bash
+npm install afrisure-blockly-expression
+```
+
+### Local Development
+The library is already built and available in your workspace at:
+```
+dist/afrisure-blockly-expression
+```
+
+## Dependencies
+
+This library requires the following peer dependencies:
+
+```json
+{
+  "@angular/common": "^20.0.0",
+  "@angular/core": "^20.0.0",
+  "@angular/material": "^20.0.0",
+  "@ngx-translate/core": "^16.0.0",
+  "blockly": "^10.4.3",
+  "@blockly/continuous-toolbox": "^5.0.19",
+  "@blockly/toolbox-search": "^1.2.11",
+  "@blockly/zoom-to-fit": "^5.0.18"
+}
+```
+
+## Usage
+
+### 1. Import the Component
+
+```typescript
+import { Component } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { BlocklyExpression } from 'afrisure-blockly-expression';
+
+@Component({
+  selector: 'app-my-component',
+  template: `
+    <button (click)="openBlocklyDialog()">
+      Open Expression Builder
+    </button>
+  `
+})
+export class MyComponent {
+  constructor(private dialog: MatDialog) {}
+
+  openBlocklyDialog() {
+    const dialogRef = this.dialog.open(BlocklyExpression, {
+      width: '90vw',
+      height: '90vh',
+      disableClose: true,
+      data: {
+        InputBlockyExpression: {
+          lookup: [
+            { id: 'var1', name: 'Variable 1', type: '' },
+            { id: 'var2', name: 'Variable 2', type: '' },
+            { id: 'var3', name: 'Variable 3', type: '' }
+          ],
+          blockExpressionJSON: {
+            loadexpression: null // or previously saved JSON string
+          }
+        }
+      }
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        console.log('Expression:', result.expression);
+        console.log('JavaScript Code:', result.javascriptCode);
+        console.log('Saved State:', result.loadexpression);
+      }
+    });
+  }
+}
+```
+
+### 2. Test the Library
+
+Navigate to the test page in your application:
+```
+http://localhost:1223/blockly-test
+```
+
+## API Reference
+
+### BlocklyExpression Component
+
+#### Input Data Structure
+
+```typescript
+interface BlocklyInputData {
+  InputBlockyExpression: {
+    lookup: Array<{
+      id: string;
+      name: string;
+      type: string;
+    }>;
+    blockExpressionJSON: {
+      loadexpression: string | null;
+    };
+  };
+}
+```
+
+#### Output Data Structure
+
+```typescript
+interface BlocklyOutputData {
+  expression: string;          // Generated expression string
+  javascriptCode: string;       // JavaScript code representation
+  loadexpression: string;       // Serialized block configuration (JSON)
+}
+```
+
+### Available Blocks
+
+#### Math Operations
+- **Addition**: Add 2 or more numbers
+- **Subtraction**: Subtract 2 or more numbers
+- **Multiplication**: Multiply 2 or more numbers
+- **Division**: Divide 2 or more numbers
+- **Max**: Get maximum of 2 or more numbers
+- **Min**: Get minimum of 2 or more numbers
+
+#### Logical Operations
+- **If/Else**: Conditional logic
+- **Comparison**: Equal, Not Equal, Less Than, Greater Than, etc.
+- **Boolean**: True/False values
+
+#### Values
+- **Number**: Numeric input
+- **String**: Text input
+- **Variables**: Custom lookup variables
+
+## Exported Components & Services
+
+```typescript
+// Components
+export { BlocklyExpression } from './lib/components/blockly-expression/blockly-expression';
+export { PopUpTemplate } from './lib/components/pop-up-template/pop-up-template';
+
+// Services
+export { LoaderService } from './lib/services/loader.service';
+
+// Modules
+export { MaterialModule } from './lib/material.module';
+```
+
+## Building the Library
+
+```bash
+# Build the library
+ng build afrisure-blockly-expression
+
+# Build output location
+dist/afrisure-blockly-expression
+```
+
+## Publishing to NPM
+
+```bash
+# Navigate to build output
+cd dist/afrisure-blockly-expression
+
+# Login to NPM (if not already logged in)
+npm login
+
+# Publish
+npm publish --access public
+```
+
+## Development
+
+### Project Structure
+```
+projects/afrisure-blockly-expression/
+├── src/
+│   ├── lib/
+│   │   ├── components/
+│   │   │   ├── blockly-expression/
+│   │   │   │   ├── blockly-expression.ts
+│   │   │   │   ├── blockly-expression.html
+│   │   │   │   └── blockly-expression.scss
+│   │   │   └── pop-up-template/
+│   │   │       ├── pop-up-template.ts
+│   │   │       ├── pop-up-template.html
+│   │   │       └── pop-up-template.scss
+│   │   ├── services/
+│   │   │   └── loader.service.ts
+│   │   └── material.module.ts
+│   └── public-api.ts
+├── package.json
+├── ng-package.json
+└── README.md
+```
+
+## License
+
+This library is part of the Afrisure Product Configuration project.
+
+## Support
+
+For issues and feature requests, please contact the development team.
+
+---
+
+**Version**: 0.0.1  
+**Author**: Afrisure Development Team  
+**Last Updated**: January 2026