special-forms 1.0.0

package/projects/special-forms/src/lib/core/services/special-form-builder/special-form-builder.service.ts

@@ -0,0 +1,220 @@
+import { Injectable } from '@angular/core';
+import { AbstractControl, ValidatorFn, Validators } from '@angular/forms';
+import { IAutocompleteSettings } from '../../../components/special-autocomplete/special-autocomplete.interface';
+import { EControlTypes } from '../../aux-data/control-types.enum';
+import {
+  SpecialFormArray,
+  SpecialFormControl,
+  SpecialFormGroup,
+} from '../../forms/special-forms';
+import { IFieldData } from '../../interfaces/field-basics.interfaces';
+import {
+  IFormStructure,
+  TRawFields,
+  TSpecialArray,
+  TSpecialFields,
+  TSpecialForm,
+  TSpecialInput,
+} from '../../interfaces/form.interfaces';
+
+interface IControlParams {
+  name: string;
+  control: SpecialFormArray | SpecialFormGroup | SpecialFormControl<any>;
+}
+@Injectable({
+  providedIn: 'root',
+})
+export class SpecialFormBuilderService {
+  private readonly defectField: IFieldData = {
+    asyncValidators: null,
+    validators: null,
+    defaultValue: null,
+    elementId: '',
+    hidden: false,
+    icon: '',
+    label: '',
+    disabled: false,
+    length: 0,
+    placeholder: '',
+    readOnly: false,
+    required: false,
+    styleClasses: '',
+    errorMessages: {},
+    tooltip: '',
+  };
+
+  private readonly inputDefectField: TSpecialInput = {
+    ...this.defectField,
+    settings: {},
+    type: EControlTypes.input,
+    name: '',
+  };
+
+  private readonly formDefectField: TSpecialForm = {
+    ...this.defectField,
+    settings: {
+      formFields: {},
+    },
+    type: EControlTypes.form,
+    name: '',
+  };
+
+  private readonly arrayDefectField: TSpecialArray = {
+    ...this.defectField,
+    settings: {
+      formFields: {},
+    },
+    type: EControlTypes.array,
+    name: '',
+  };
+
+  constructor() {}
+
+  public control(field: Partial<TSpecialFields>): SpecialFormControl<any> {
+    const formField: TSpecialFields = {
+      ...this.inputDefectField,
+      ...field,
+    } as TSpecialFields;
+    const { control } = this.setFormControl(formField);
+    return control;
+  }
+
+  public group(
+    fields: IFormStructure,
+    parentField: Partial<TSpecialForm> = {}
+  ) {
+    return this.formGenerator(this.fieldDataToArray(fields), parentField);
+  }
+
+  public array() {}
+
+  public fieldDataToArray(fields: IFormStructure): TSpecialFields[] {
+    return Object.entries(fields).map(([name, field]) =>
+      this.setDefectFieldOptions(name, field)
+    );
+  }
+
+  private setDefectFieldOptions(
+    name: string,
+    field: Partial<TRawFields>
+  ): TSpecialFields {
+    return {
+      ...this.inputDefectField,
+      ...field,
+      name,
+    } as TSpecialFields;
+  }
+
+  private formGenerator(
+    fields: TSpecialFields[],
+    parentField: Partial<TSpecialForm> = {}
+  ): SpecialFormGroup {
+    const formField: TSpecialForm = {
+      ...this.formDefectField,
+      ...parentField,
+    };
+    const structure = fields
+      .map((field) => this.getControlAndNameByType(field))
+      .reduce(
+        (prev, { name, control }: IControlParams) => ({
+          ...prev,
+          [name]: control,
+        }),
+        {}
+      );
+    return new SpecialFormGroup(formField, structure);
+  }
+
+  private getControlAndNameByType(field: TSpecialFields) {
+    switch (field.type) {
+      case EControlTypes.array:
+        return this.setFormArray(field);
+      case EControlTypes.form:
+        return this.setFormGroup(field);
+      default:
+        return this.setFormControl(field);
+    }
+  }
+
+  private setFormGroup(field: TSpecialForm): {
+    name: string;
+    control: SpecialFormGroup;
+  } {
+    const control = this.formGenerator(
+      this.fieldDataToArray(field.settings.formFields),
+      field
+    );
+    return { control, name: field.name };
+  }
+
+  private setFormArray(field: TSpecialArray): {
+    name: string;
+    control: SpecialFormArray;
+  } {
+    const auxForm = (value = {}) => {
+      const auxForm = this.formGenerator(
+        this.fieldDataToArray(field.settings.formFields),
+        {}
+      );
+      auxForm.reset(value);
+      return auxForm;
+    };
+
+    if (field.required) {
+      field.validators = this.setValidatorsArray(field.validators, [
+        this.arrayLengthRequired,
+      ]);
+    }
+
+    return {
+      name: field.name,
+      control: new SpecialFormArray(field, auxForm, []),
+    };
+  }
+
+  private setFormControl(field: TSpecialFields): {
+    name: string;
+    control: SpecialFormControl<any>;
+  } {
+    const validators: ValidatorFn[] = [];
+
+    if (field.required) validators.push(this.setRequiredValidator(field));
+    if (field.length) validators.push(Validators.maxLength(field.length));
+
+    field.validators = this.setValidatorsArray(field.validators, validators);
+
+    return {
+      name: field.name,
+      control: new SpecialFormControl(field),
+    };
+  }
+
+  private setRequiredValidator(field: TSpecialFields): ValidatorFn {
+    if (field.type !== EControlTypes.autocomplete) {
+      return Validators.required;
+    }
+
+    return (control: SpecialFormControl<IAutocompleteSettings>) =>
+      !!control.value && control.value instanceof Object
+        ? null
+        : { required: true };
+  }
+  private setValidatorsArray(
+    validators: ValidatorFn | ValidatorFn[] | null,
+    newValidators: ValidatorFn[]
+  ): ValidatorFn[] {
+    if (!validators) {
+      return newValidators;
+    }
+    return validators instanceof Array
+      ? [...validators, ...newValidators]
+      : [validators, ...newValidators];
+  }
+
+  private arrayLengthRequired(control: AbstractControl) {
+    if (control.value.length) {
+      return {};
+    }
+    return { noItems: 'NO_SELECTED_ITEM' };
+  }
+}

package/projects/special-forms/src/lib/core/utils/enum-to-array.util.ts

@@ -0,0 +1,6 @@
+export const EnumToArray = (enu: any) => {
+  return Object.keys(enu).map((key) => ({
+    id: key,
+    value: enu[key],
+  }));
+};

package/projects/special-forms/src/lib/pipes/controls-list-pipe/controls-list.pipe.module.ts

@@ -0,0 +1,10 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormControlsListPipe } from './controls-list.pipe';
+
+@NgModule({
+  declarations: [FormControlsListPipe],
+  imports: [CommonModule],
+  exports: [FormControlsListPipe],
+})
+export class FormControlsListPipeModule {}

package/projects/special-forms/src/lib/pipes/controls-list-pipe/controls-list.pipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import {
+  SpecialFormControl,
+} from '../../core/forms/special-forms';
+
+@Pipe({ name: 'controlsList' })
+export class FormControlsListPipe implements PipeTransform {
+  transform(controls: {
+    [key: string]: AbstractControl;
+  }): SpecialFormControl<any>[] {
+    if (!controls) return [];
+    return Object.values(controls)
+      .filter((control: SpecialFormControl<any>) => !control.hidden)
+      .map((control) => control as SpecialFormControl<any>);
+  }
+}

package/projects/special-forms/src/lib/pipes/error-message-pipe/error.pipe.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { ErrorMessagePipe } from "./error.pipe";
+
+@NgModule({
+  declarations: [ErrorMessagePipe],
+  imports: [
+    CommonModule,
+
+  ],
+  exports: [ErrorMessagePipe],
+})
+export class ErrorMessagePipeModule {}

package/projects/special-forms/src/lib/pipes/error-message-pipe/error.pipe.ts

@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform } from "@angular/core";
+import { FormControl } from "@angular/forms";
+
+@Pipe({
+  name: "errorMessage",
+})
+export class ErrorMessagePipe implements PipeTransform {
+  transform(
+    errorsObj: { [key: string]: any },
+    errorMessages: { [key: string]: any },
+    control?: FormControl
+  ): any {
+    const errors = errorsObj ? Object.keys(errorsObj) : [];
+    const error = errors[0];
+    const message = errorMessages[error] || error;
+    if (control) {
+      control.setErrors(errorsObj);
+    }
+    return message;
+  }
+}

package/projects/special-forms/src/lib/pipes/index.ts

@@ -0,0 +1,3 @@
+export { ErrorMessagePipeModule } from './error-message-pipe/error.pipe.module';
+export { TextByFunctionPipeModule } from './text-by-function/text-by-function.pipe.module';
+

package/projects/special-forms/src/lib/pipes/text-by-function/text-by-function.pipe.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { TextByFunctionPipe } from "./text-by-function.pipe";
+
+@NgModule({
+  declarations: [TextByFunctionPipe],
+  imports: [
+    CommonModule,
+
+  ],
+  exports: [TextByFunctionPipe],
+})
+export class TextByFunctionPipeModule {}

package/projects/special-forms/src/lib/pipes/text-by-function/text-by-function.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'textByFunction' })
+export class TextByFunctionPipe implements PipeTransform {
+  transform(value: any, field: string | ((value: any) => string)): any {
+    if (field instanceof Function) {
+      return field(value);
+    } else if (value instanceof Object) {
+      return value[field];
+    } else {
+      return value;
+    }
+  }
+}

package/projects/special-forms/src/public-api.ts

@@ -0,0 +1,8 @@
+/*
+ * Public API Surface of special-forms
+ */
+
+export * from './lib/components';
+export * from './lib/core/services/index';
+export * from './lib/core/directives/control-render.directive';
+

package/projects/special-forms/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/projects/special-forms/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/projects/special-forms/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/projects/special-forms/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"
+  ]
+}

package/scss-bundle.config.json

@@ -0,0 +1,6 @@
+{
+  "bundlerOptions":{
+    "entryFile":"./projects/special-forms/src/lib/assets/styles.scss",
+    "outFile":"./dist/special-forms/_special-forms.styles.scss"
+  }
+}

package/stories/Button.stories.ts

@@ -0,0 +1,42 @@
+// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
+import { Story, Meta } from '@storybook/angular/types-6-0';
+import Button from './button.component';
+
+// More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export
+export default {
+  title: 'Example/Button',
+  component: Button,
+  // More on argTypes: https://storybook.js.org/docs/angular/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as Meta;
+
+// More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
+const Template: Story<Button> = (args: Button) => ({
+  props: args,
+});
+
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/angular/writing-stories/args
+Primary.args = {
+  primary: true,
+  label: 'Button',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  label: 'Button',
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  size: 'large',
+  label: 'Button',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'small',
+  label: 'Button',
+};

package/stories/Header.stories.ts

@@ -0,0 +1,35 @@
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import type { Story, Meta } from '@storybook/angular';
+
+import Button from './button.component';
+import Header from './header.component';
+
+export default {
+  title: 'Example/Header',
+  component: Header,
+  decorators: [
+    moduleMetadata({
+      declarations: [Button],
+      imports: [CommonModule],
+    }),
+  ],
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/angular/configure/story-layout
+    layout: 'fullscreen',
+  },
+} as Meta;
+
+const Template: Story<Header> = (args: Header) => ({
+  props: args,
+});
+
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+  user: {
+    name: 'Jane Doe',
+  },
+};
+
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {};