dromo-uploader-angular 0.1.0

package/README.md

@@ -0,0 +1,134 @@
+# [dromo](www.dromo.io)
+
+Check out our [developer documentation here](https://developer.dromo.io/)
+
+## Usage
+
+Install the packge using `npm install dromo-uploader-angular`
+
+Import the component and module and add to inputs and declarations
+
+```TypeScript
+import { DromoImporterComponent } from './dromo-importer/dromo-importer.component';
+import { DromoUploaderComponent } from './dromo-uploader.component';
+
+@NgModule({
+  declarations: [AppComponent, DromoImporterComponent],
+  imports: [BrowserModule, DromoUploaderModule],
+  providers: [],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
+Implement a component.
+
+```TypeScript
+import {
+  DromoMethods,
+  IColumnHook,
+  IColumnHookInput,
+  IRowDeleteHook,
+  IDeveloperField,
+  IDeveloperSettings,
+  IRowHook,
+  IUser,
+  IStepHook,
+  IUploadStepData,
+} from 'dromo-uploader-angular';
+@Component({
+  selector: 'app-dromo-importer',
+  template: `
+    <lib-dromo-uploader
+      [licenseKey]="licenseKey"
+      [user]="user"
+      [fields]="fields"
+      [settings]="settings"
+      [rowHooks]="rowHooks"
+      [columnHooks]="columnHooks"
+      [stepHooks]="stepHooks"
+      [rowDeleteHooks]="rowDeleteHooks"
+      [styles]="styles"
+      [class]="class"
+      class="dromo-importer"
+      [onCancel]="onCancel"
+      [onResults]="onResults"
+      >Import with Dromo!</lib-dromo-uploader
+    >
+  `,
+  styleUrls: ['./dromo-importer.component.css'],
+})
+export class DromoImporterComponent implements DromoMethods {
+  constructor() {}
+
+  licenseKey = 'YOUR_LICENSE_KEY_HERE';
+  user: IUser = { id: 'angular tester' };
+  fields: IDeveloperField[] = [
+    { label: 'first name', key: 'first_name' },
+    { label: 'email address', key: 'email' },
+  ];
+  settings: IDeveloperSettings = {
+    importIdentifier: 'angular imports',
+    developmentMode: true,
+  };
+  rowHooks: IRowHook[] = [
+    (record) => {
+      const newRecord = { ...record };
+      newRecord.row['first_name'].value =
+        record.row['first_name'].value + '!!!';
+      return newRecord;
+    },
+  ];
+  rowDeleteHooks: IRowDeleteHook[] = [
+    (record) => alert(`deleted ${record.index}`),
+  ];
+  columnHooks: IColumnHook[] = [
+    {
+      fieldName: 'email',
+      callback: (values: IColumnHookInput[]) => {
+        console.log('COLUMN HOOK', values);
+        values = values.map(({ value, index }) => ({
+          value: index + value,
+          index,
+        }));
+        return values;
+      },
+    },
+  ];
+
+  stepHooks: IStepHook[] = [
+    {
+      type: 'UPLOAD_STEP',
+      callback: (uploader, data) => {
+        console.log(
+          'STEP HOOK',
+          `Filename: ${(data as IUploadStepData).filename}`
+        );
+      },
+    },
+  ];
+
+  onCancel = () => alert('Something I said?');
+  onResults = (data: any[], metaData: any) => {
+    alert(`Submitted ${data.length} records`);
+    console.table(data);
+    console.log('MetaData', metaData);
+  };
+
+  class = 'dromo-button';
+  styles = {
+    'background-color': 'rgb(0, 123, 255)',
+    border: '1px solid rgb(0, 123, 255)',
+    'border-radius': ' 0.25rem',
+    color: 'white',
+    padding: '15px',
+    'text-align': 'center',
+    'text-decoration': 'none',
+    display: 'inline-block',
+    'font-size': '16px',
+    'box-shadow': '5px 5px 5px 0px #7F7F7F',
+  };
+
+  ngOnInit(): void {}
+}
+```

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: "",
+    frameworks: ["jasmine", "@angular-devkit/build-angular"],
+    plugins: [
+      require("karma-jasmine"),
+      require("karma-chrome-launcher"),
+      require("karma-jasmine-html-reporter"),
+      require("karma-coverage"),
+      require("@angular-devkit/build-angular/plugins/karma"),
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true, // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require("path").join(
+        __dirname,
+        "../../coverage/dromo-uploader-angular"
+      ),
+      subdir: ".",
+      reporters: [{ type: "html" }, { type: "text-summary" }],
+    },
+    reporters: ["progress", "kjhtml"],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ["Chrome"],
+    singleRun: false,
+    restartOnFileChange: true,
+  });
+};

package/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/dromo-uploader-angular",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": ["dromo-uploader-js"]
+}

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "dromo-uploader-angular",
+  "version": "0.1.0",
+  "peerDependencies": {
+    "@angular/common": "^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0",
+    "@angular/core": "^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0"
+  },
+  "dependencies": {
+    "dromo-uploader-js": "^1.2.28",
+    "tslib": "^2.0.0"
+  }
+}

package/src/lib/dromo-interfaces.ts

@@ -0,0 +1,16 @@
+export type {
+  IDeveloperField,
+  IDeveloperSettings,
+  IUser,
+  IColumnHookInput,
+  IColumnHookOutput,
+  IColumnHook,
+  IRowHookInput,
+  IRowHookOutput,
+  IRowHook,
+  IValidatorField,
+  IDeveloperStyleOverrides,
+  IRowDeleteHook,
+  IStepHook,
+  IUploadStepData,
+} from 'dromo-uploader-js';

package/src/lib/dromo-uploader.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DromoUploaderComponent } from './dromo-uploader.component';
+
+describe('DromoUploaderComponent', () => {
+  let component: DromoUploaderComponent;
+  let fixture: ComponentFixture<DromoUploaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DromoUploaderComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DromoUploaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/dromo-uploader.component.ts

@@ -0,0 +1,73 @@
+import { Component, OnInit, Input } from '@angular/core';
+import DromoUploader, {
+  IDeveloperSettings,
+  IUser,
+  IDeveloperField,
+  IRowHook,
+  IColumnHook,
+  IRowDeleteHook,
+} from 'dromo-uploader-js';
+import { IResultMetadata, IStepHook } from 'dromo-uploader-js/dist/interfaces';
+
+@Component({
+  selector: 'lib-dromo-uploader',
+  template: `
+    <button (click)="openDromo()" [classList]="class" [ngStyle]="styles">
+      <ng-content></ng-content>
+    </button>
+  `,
+})
+export class DromoUploaderComponent implements OnInit {
+  @Input() settings!: IDeveloperSettings;
+  @Input() user!: IUser;
+  @Input() licenseKey!: string;
+  @Input() fields!: IDeveloperField[];
+  @Input() rowHooks: IRowHook[] = [];
+  @Input() columnHooks: IColumnHook[] = [];
+  @Input() rowDeleteHooks: IRowDeleteHook[] = [];
+  @Input() onResults: (
+    data: any[],
+    metaData: IResultMetadata
+  ) => Promise<void> | void = () => undefined;
+  @Input() onCancel: () => void = () => undefined;
+  @Input() stepHooks: IStepHook[] = [];
+  @Input() class: string = '';
+  @Input() styles: {} = {};
+
+  dromo?: DromoUploader;
+
+  constructor() {}
+
+  openDromo() {
+    if (this.dromo) {
+      this.dromo.open();
+    }
+  }
+
+  ngOnInit(): void {
+    this.dromo = new DromoUploader(
+      this.licenseKey,
+      this.fields,
+      this.settings,
+      this.user
+    );
+
+    this.rowHooks.forEach((hook) => this.dromo?.registerRowHook(hook));
+
+    this.columnHooks.forEach((hook) => {
+      this.dromo?.registerColumnHook(hook.fieldName, hook.callback);
+    });
+
+    this.rowDeleteHooks.forEach((hook) => {
+      return this.dromo?.registerRowDeleteHook(hook);
+    });
+
+    this.stepHooks.forEach((hook) => {
+      this.dromo?.registerStepHook(hook.type, hook.callback);
+    });
+
+    this.dromo.onResults(this.onResults);
+
+    this.dromo.onCancel(this.onCancel);
+  }
+}

package/src/lib/dromo-uploader.module.ts

@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DromoUploaderComponent } from './dromo-uploader.component';
+import {
+  IUser,
+  IDeveloperSettings,
+  IDeveloperField,
+  IRowHook,
+  IRowDeleteHook,
+  IColumnHook,
+} from 'dromo-uploader-js';
+import { IResultMetadata, IStepHook } from 'dromo-uploader-js/dist/interfaces';
+
+@NgModule({
+  declarations: [DromoUploaderComponent],
+  imports: [CommonModule],
+  exports: [DromoUploaderComponent, CommonModule],
+})
+export class DromoUploaderModule {}
+
+export interface DromoMethods {
+  licenseKey: string;
+  user: IUser;
+  settings: IDeveloperSettings;
+  fields: IDeveloperField[];
+  rowHooks?: IRowHook[];
+  rowDeleteHooks?: IRowDeleteHook[];
+  columnHooks?: IColumnHook[];
+  stepHooks?: IStepHook[];
+  style?: {};
+  class?: string;
+  onCancel?: () => void;
+  onResults?: (
+    data: any[][],
+    metaData: IResultMetadata
+  ) => Promise<void> | void;
+}

package/src/public-api.ts

@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of dromo-uploader
+ */
+
+export * from './lib/dromo-uploader.component';
+export * from './lib/dromo-uploader.module';
+export * from './lib/dromo-interfaces';

package/src/test.ts

@@ -0,0 +1,27 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().forEach(context);

package/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}