S27/widget version (#5)

* feat: set widgetVersion in react component #86dty6jh3

* feat: set widgetVersion in vue component #86dty6jh3

* feat: set widgetVersion in angular component #86dty6jh3

* feat: set widgetVersion in stencil component #86dty6jh3

* refactor: code improvements #86dty6jh3

* docs: update readme's #86dty6jh3

* feat: add npmignore in stencil package #86dty6jh3

* feat: remove source map in all packages #86dty6jh3

* docs: update main readme #86dtw66gd

* refactor: rename "widget-stencil" to "widget" #86dty6jh3

* refactor: rename props of widget #86dty6jh3

* fix: fix some details in wrappers of widget #86dty6jh3

README.md

@@ -19,3 +19,27 @@ Library to authenticate Mifiel API calls.
 [![npm](https://img.shields.io/npm/v/@mifiel/api-client.svg?style=flat-square)](https://www.npmjs.com/package/@mifiel/api-client)
 
 Mifiel API Client for NodeJS.
+
+## [`@mifiel/widget`](https://github.com/Mifiel/mifiel-js/tree/main/packages/widget-stencil)
+
+[![npm](https://img.shields.io/npm/v/@mifiel/widget.svg?style=flat-square)](https://www.npmjs.com/package/@mifiel/widget)
+
+Web component for Mifiel Widget implemented with StencilJS.
+
+## [`@mifiel/widget-react`](https://github.com/Mifiel/mifiel-js/tree/main/packages/widget-react)
+
+[![npm](https://img.shields.io/npm/v/@mifiel/widget-react.svg?style=flat-square)](https://www.npmjs.com/package/@mifiel/widget-react)
+
+React component wrapper for Mifiel Widget implemented with StencilJS.
+
+## [`@mifiel/widget-vue`](https://github.com/Mifiel/mifiel-js/tree/main/packages/widget-vue)
+
+[![npm](https://img.shields.io/npm/v/@mifiel/widget-vue.svg?style=flat-square)](https://www.npmjs.com/package/@mifiel/widget-vue)
+
+Vue component wrapper for Mifiel Widget implemented with StencilJS.
+
+## [`@mifiel/widget-angular`](https://github.com/Mifiel/mifiel-js/tree/main/packages/widget-angular)
+
+[![npm](https://img.shields.io/npm/v/@mifiel/widget-angular.svg?style=flat-square)](https://www.npmjs.com/package/@mifiel/widget-angular)
+
+Angular component wrapper for Mifiel Widget implemented with StencilJS.

package.json

@@ -17,7 +17,7 @@
   ],
   "scripts": {
     "build": "lerna run build --scope=@mifiel/{api-client,api-client-auth} && yarn build:widget",
-    "build:widget": "lerna run build --scope=@mifiel/widget-stencil && lerna run build --scope=@mifiel/{widget-react,widget-vue,widget-angular}",
+    "build:widget": "lerna run build --scope=@mifiel/widget && lerna run build --scope=@mifiel/{widget-react,widget-vue,widget-angular}",
     "husky": "husky",
     "lint": "lerna run lint",
     "postpublish": "pinst --enable",

packages/widget-angular/.gitignore

@@ -40,3 +40,5 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+
+config.json

packages/widget-angular/README.md

@@ -14,7 +14,7 @@ npm install @mifiel/widget-angular
 
 Import the MifielWidgetModule in your Angular module and use the mifiel-widget component in your Angular application:
 
-## Importing the Module
+## Importing the Module in app.module.ts
 
 ```typescript
 import { NgModule } from '@angular/core';
@@ -51,11 +51,11 @@ import { Component } from '@angular/core';
       <mifiel-widget
         [id]="widgetId"
         [environment]="environment"
-        (onSuccess)="onSuccessHandler()"
-        (onError)="onErrorHandler($event)"
+        (signSuccess)="onSuccessHandler()"
+        (signError)="onErrorHandler($event)"
         [successBtnText]="successBtnText"
-        [callToActionSuccess]="callToActionSuccess"
-        [callToActionError]="callToActionError"
+        [successBtnAction]="successBtnAction"
+        [errorBtnAction]="errorBtnAction"
         [containerClass]="containerClass"
       ></mifiel-widget>
     </div>
@@ -66,8 +66,8 @@ export class AppComponent {
   widgetId = 'your-widget-id';
   environment = 'production';
   successBtnText = 'Proceed to next step';
-  callToActionSuccess = 'https://example.com/next-step';
-  callToActionError = 'https://example.com/error-page';
+  successBtnAction = 'https://example.com/next-step';
+  errorBtnAction = 'https://example.com/error-page';
   containerClass = 'widget-container';
 
   onSuccessHandler() {
@@ -85,17 +85,25 @@ export class AppComponent {
 
 ## Props
 
-- **`id`**: (string, required) The ID of the widget.
-- **`environment`**: (string, optional) The environment to use for the widget (`production` by default).
-- **`onSuccess`**: (function, optional) Function to be called when the document is signed successfully.
-- **`onError`**: (function, optional) Listener for errors that occur during the signing flow.
-- **`successBtnText`**: (string, optional) Text for the success button (`Proceed to next step` by default).
-- **`callToActionSuccess`**: (string | function, optional) Main button action in the success view.
-- **`callToActionError`**: (string | function, optional) Main button action in the error view.
+- **`id`**: (string, required) The widget ID
+- **`environment`**: (string, optional) The environment where the widget will be used: sandbox or production. By default, production.
+- **`onSignSuccess`**: (function, optional) Function will be called when the document is signed successfully
+- **`onSignError`**: (function, optional) Function that will be called whenever an error occurs during the signing flow.
+- **`successBtnText`**: (string, optional) Text that will display in the main button in the success page. By default, Proceed to next step
+- **`successBtnAction`**: (string | function, optional) Function to be executed when the main button is clicked in the success page. It can also be a string containing a URL to redirect to.
+- **`errorBtnAction`**: (string | function, optional) Function to be executed when the main button is clicked in the error page. It can also be a string containing a URL to redirect to.
 - **`containerClass`**: (string, optional) CSS class to be applied to the widget container.
 
+## Listeners
+
+In addition to using the `onSignSuccess` and `onSignError` props, listeners for `signSuccess` and `signError` events can also be added to achieve the same outcome. This approach is recommended for handling successful document signing and errors during the signing process.
+
 # Important Information
 
 ## ESM Compatibility
 
 This wrapper is built using ECMAScript Modules (ESM) and therefore only works in environments that support ESM. If you're using a build tool like Webpack or Rollup, they typically support ESM out of the box.
+
+## tsconfig.json configuration
+
+To prevent errors within the `node_modules` directory, set the `skipLibCheck` option to `true` in your TypeScript configuration file (`tsconfig.json`). This will skip type checking for all declaration files (`.d.ts`), improving the build time and reducing unnecessary errors from third-party libraries.

packages/widget-angular/angular.json

@@ -16,10 +16,10 @@
           },
           "configurations": {
             "production": {
-              "tsConfig": "tsconfig.lib.prod.json"
+              "tsConfig": "tsconfig.json"
             },
             "development": {
-              "tsConfig": "tsconfig.lib.json"
+              "tsConfig": "tsconfig.json"
             }
           },
           "defaultConfiguration": "production"

packages/widget-angular/ng-package.json

@@ -14,6 +14,6 @@
     "@angular/router",
     "rxjs",
     "zone.js",
-    "@mifiel/widget-stencil"
+    "@mifiel/widget"
   ]
 }

packages/widget-angular/package.json

@@ -19,7 +19,7 @@
   },
   "scripts": {
     "prebuild": "rimraf dist",
-    "build": "ng build",
+    "build": "node ./src/utils/version.js && ng build",
     "ng": "ng"
   },
   "exports": {
@@ -43,7 +43,7 @@
     "@angular/platform-browser": "^16.2.0",
     "@angular/platform-browser-dynamic": "^16.2.0",
     "@angular/router": "^16.2.0",
-    "@mifiel/widget-stencil": "^0.0.1",
+    "@mifiel/widget": "^0.0.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"

packages/widget-angular/src/lib/stencil-generated/components.ts

@@ -4,35 +4,39 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Even
 
 import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';
 
-import { Components } from '@mifiel/widget-stencil';
+import { Components } from '@mifiel/widget';
 
 
 @ProxyCmp({
-  inputs: ['callToActionError', 'callToActionSuccess', 'containerClass', 'environment', 'id', 'onError', 'onSuccess', 'successBtnText'],
+  inputs: ['containerClass', 'environment', 'errorBtnAction', 'id', 'onSignError', 'onSignSuccess', 'successBtnAction', 'successBtnText', 'widgetVersion'],
   methods: ['getIframe']
 })
 @Component({
   selector: 'mifiel-widget',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['callToActionError', 'callToActionSuccess', 'containerClass', 'environment', 'id', 'onError', 'onSuccess', 'successBtnText'],
+  inputs: ['containerClass', 'environment', 'errorBtnAction', 'id', 'onSignError', 'onSignSuccess', 'successBtnAction', 'successBtnText', 'widgetVersion'],
 })
 export class MifielWidget {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['error', 'success']);
+    proxyOutputs(this, this.el, ['signError', 'sign-error', 'signSuccess', 'sign-success']);
   }
 }
 
 
 export declare interface MifielWidget extends Components.MifielWidget {
 
-  error: EventEmitter<CustomEvent<any>>;
+  signError: EventEmitter<CustomEvent<any>>;
 
-  success: EventEmitter<CustomEvent<any>>;
+  'sign-error': EventEmitter<CustomEvent<any>>;
+
+  signSuccess: EventEmitter<CustomEvent<any>>;
+
+  'sign-success': EventEmitter<CustomEvent<any>>;
 }
 
 

packages/widget-angular/src/lib/widget-mifiel.ts

@@ -0,0 +1,44 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  Input,
+  NgZone,
+  OnInit,
+} from '@angular/core';
+import { Components } from '@mifiel/widget';
+import dataWidget from './config.json';
+
+import { MifielWidget as Mifiel } from './stencil-generated/components';
+
+@Component({
+  selector: 'mifiel-widget',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content widget-version="1"></ng-content>',
+})
+export class MifielWidget extends Mifiel implements OnInit {
+  protected override el!: HTMLElement;
+
+  @Input() override widgetVersion?: string;
+
+  constructor(
+    c: ChangeDetectorRef,
+    r: ElementRef,
+    protected override z: NgZone
+  ) {
+    super(c, r, z);
+  }
+
+  ngOnInit() {
+    this.widgetVersion = `${dataWidget.appName}@${dataWidget.appVersion}`;
+  }
+}
+
+export declare interface MifielWidget extends Components.MifielWidget {
+  error: EventEmitter<CustomEvent<any>>;
+
+  success: EventEmitter<CustomEvent<any>>;
+}

packages/widget-angular/src/lib/widget.angular.module.ts

@@ -1,6 +1,8 @@
-import {APP_INITIALIZER, NgModule } from '@angular/core';
-import { DIRECTIVES } from './stencil-generated';
-import { defineCustomElements } from '@mifiel/widget-stencil/dist/loader';
+import { APP_INITIALIZER, NgModule } from '@angular/core';
+import { defineCustomElements } from '@mifiel/widget/dist/loader';
+import { MifielWidget } from './widget-mifiel';
+
+const DIRECTIVES = [MifielWidget];
 
 @NgModule({
   declarations: [...DIRECTIVES],
@@ -9,8 +11,8 @@ import { defineCustomElements } from '@mifiel/widget-stencil/dist/loader';
     {
       provide: APP_INITIALIZER,
       useFactory: () => defineCustomElements,
-      multi: true
+      multi: true,
     },
-  ]
+  ],
 })
 export class MifielWidgetModule {}

packages/widget-angular/src/public-api.ts

@@ -3,5 +3,5 @@
  */
 
 export * from './lib/widget.angular.module';
+export * from './lib/widget-mifiel';
 export { DIRECTIVES } from './lib/stencil-generated';
-export * from './lib/stencil-generated/components';

packages/widget-angular/src/utils/version.js

@@ -0,0 +1,17 @@
+const fs = require('fs');
+const path = require('path');
+
+const packageJsonPath = path.resolve(__dirname, '../../package.json');
+const packageJsonContent = fs.readFileSync(packageJsonPath, 'utf8');
+const packageJson = JSON.parse(packageJsonContent);
+
+const { name, version } = packageJson;
+
+const configObject = {
+  appName: name,
+  appVersion: version,
+};
+
+const configFilePath = path.resolve(__dirname, '../lib/config.json');
+
+fs.writeFileSync(configFilePath, JSON.stringify(configObject, null, 2), 'utf8');

packages/widget-angular/tsconfig.json

@@ -10,20 +10,22 @@
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
-    "sourceMap": true,
+    "sourceMap": false,
     "declaration": false,
     "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "ES2022",
-    "module": "ES2022",
+    "target": "esnext",
+    "module": "esnext",
     "useDefineForClassFields": false,
-    "lib": ["ES2022", "dom"],
+    "lib": ["ES2021", "dom"],
     "paths": {
       "widget-angular": ["dist/widget-angular"]
     },
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,

packages/widget-react/.gitignore

@@ -0,0 +1 @@
+config.json