refactor: Start separating components into modules

BREAKING CHANGE: Package now exports separated modules instead of single one with all components
takenet · Mar 4, 2019 · 41b1508 · 41b1508
1 parent 4b19579
commit 41b1508
Show file tree

Hide file tree

Showing 38 changed files with 996 additions and 925 deletions.
diff --git a/src/components/accordion/index.js b/src/components/accordion/index.js
@@ -1,15 +1,20 @@
-export default {
-    template: `
-    <article class="accordion relative">
-        <input type="checkbox" checked />
-        <i class="accordion-chevron fr"></i>
-        <h6 class="accordion-title ma0" ng-bind="$ctrl.title"></h6>
-        <div class="accordion-content relative overflow-hidden dim" ng-transclude></div>
-    </article>
-    `,
-    controllerAs: '$ctrl',
-    transclude: true,
-    bindings: {
-        title: '@',
-    },
-};
+import angular from 'angular';
+
+export const accordion = angular
+    .module('blipComponents.accordion', [])
+    .component('accordion', {
+        template: `
+        <article class="accordion relative">
+            <input type="checkbox" checked />
+            <i class="accordion-chevron fr"></i>
+            <h6 class="accordion-title ma0" ng-bind="$ctrl.title"></h6>
+            <div class="accordion-content relative overflow-hidden dim" ng-transclude></div>
+        </article>
+        `,
+        controllerAs: '$ctrl',
+        transclude: true,
+        bindings: {
+            title: '@',
+        },
+    })
+    .name;
diff --git a/src/components/avatarArray/AvatarArray.component.ts b/src/components/avatarArray/AvatarArray.component.ts
@@ -1,13 +1,13 @@
 import './AvatarArray.scss';
 import template from './AvatarArrayView.html';
+import * as angular from 'angular';
 
 class AvatarArray {
     public members: Array<any>;
     public limit: number;
 
     constructor(private $scope) {
         this.$scope.$watch('$ctrl.members', (newValue, oldValue) => {
-            // if (newValue !== oldValue) {
             setTimeout(() => {
                 let array = Array.from(
                     document.querySelectorAll('.avatar-array > tooltip'),
@@ -21,17 +21,19 @@ class AvatarArray {
                     x.style.zIndex = String(100 - index);
                 });
             }, 0);
-            // }
         });
     }
 }
 
-export const AvatarArrayComponent = {
-    controller: AvatarArray,
-    controllerAs: '$ctrl',
-    bindings: {
-        members: '<?',
-        limit: '<?',
-    },
-    template,
-};
+export const AvatarArrayComponent = angular
+    .module('blipComponents.avatarArray', [])
+    .component('avatarArray', {
+        controller: AvatarArray,
+        controllerAs: '$ctrl',
+        bindings: {
+            members: '<?',
+            limit: '<?',
+        },
+        template,
+    })
+    .name;
diff --git a/src/components/card/card.component.ts b/src/components/card/card.component.ts
@@ -1,5 +1,6 @@
 import './card.scss';
 import template from './CardView.html';
+import * as angular from 'angular';
 import { IStateService } from 'angular-ui-router';
 import { ITranscludeFunction } from 'angular';
 
@@ -86,23 +87,26 @@ class CardComponentController implements ICardComponentController {
 }
 
 //
-export const CardComponent = {
-    template,
-    controller: CardComponentController,
-    controllerAs: '$ctrl',
-    bindings: {
-        itemTitle: '@',
-        collapsable: '<?',
-        aditionalInfo: '@?',
-        sref: '@?',
-        sparams: '<?',
-        onEdit: '&?',
-        onExclude: '&?',
-        cardInfo: '@?',
-        showOptions: '<?',
-    },
-    transclude: {
-        cardFooter: '?cardFooter',
-        cardOptions: '?cardOptions',
-    },
-};
+export const CardComponent = angular
+    .module('blipComponents.card', [])
+    .component('card', {
+        template,
+        controller: CardComponentController,
+        controllerAs: '$ctrl',
+        bindings: {
+            itemTitle: '@',
+            collapsable: '<?',
+            aditionalInfo: '@?',
+            sref: '@?',
+            sparams: '<?',
+            onEdit: '&?',
+            onExclude: '&?',
+            cardInfo: '@?',
+            showOptions: '<?',
+        },
+        transclude: {
+            cardFooter: '?cardFooter',
+            cardOptions: '?cardOptions',
+        },
+    })
+    .name;
diff --git a/src/components/card/index.ts b/src/components/card/index.ts
diff --git a/src/components/checkbox/checkbox.components.ts b/src/components/checkbox/checkbox.components.ts
@@ -1,5 +1,6 @@
 import './checkbox.scss';
 import * as uuid from 'uuid';
+import * as angular from 'angular';
 
 export class CheckboxComponent {
     uniqueId: string;
@@ -38,29 +39,32 @@ export class CheckboxComponent {
     }
 }
 
-export const Checkbox = {
-    controller: CheckboxComponent,
-    controllerAs: '$ctrl',
-    transclude: true,
-    require: {
-        ngModel: 'ngModel',
-    },
-    bindings: {
-        group: '@?',
-        checked: '@?',
-        refer: '@?',
-        disabled: '<?',
-    },
-    template: `<div class="checkbox-wrapper">
-            <input type="checkbox"
-                id="{{$ctrl.inputId}}"
-                name="{{$ctrl.group}}"
-                ng-model="$ctrl.model"
-                ng-checked="$ctrl.isChecked"
-                ng-disabled="$ctrl.disabled"
-                ></input>
-            <label for="{{$ctrl.inputId}}" class="flex items-center">
-                <i class="lh-solid" ng-class="{'icon-selectoff-1': !$ctrl.model, 'icon-selecton': $ctrl.model, 'disabled': $ctrl.disabled }"></i> <span class="text-gray ml3 flex items-center" ng-transclude></span>
-            </label>
-        </div>`,
-};
+export const Checkbox = angular
+    .module('blipComponents.checkbox', [])
+    .component('checkbox', {
+        controller: CheckboxComponent,
+        controllerAs: '$ctrl',
+        transclude: true,
+        require: {
+            ngModel: 'ngModel',
+        },
+        bindings: {
+            group: '@?',
+            checked: '@?',
+            refer: '@?',
+            disabled: '<?',
+        },
+        template: `<div class="checkbox-wrapper">
+                <input type="checkbox"
+                    id="{{$ctrl.inputId}}"
+                    name="{{$ctrl.group}}"
+                    ng-model="$ctrl.model"
+                    ng-checked="$ctrl.isChecked"
+                    ng-disabled="$ctrl.disabled"
+                    ></input>
+                <label for="{{$ctrl.inputId}}" class="flex items-center">
+                    <i class="lh-solid" ng-class="{'icon-selectoff-1': !$ctrl.model, 'icon-selecton': $ctrl.model, 'disabled': $ctrl.disabled }"></i> <span class="text-gray ml3 flex items-center" ng-transclude></span>
+                </label>
+            </div>`,
+    })
+    .name;
diff --git a/src/components/chips/chips.component.ts b/src/components/chips/chips.component.ts
@@ -1,6 +1,7 @@
-import template from './ChipsView.html';
+import * as angular from 'angular';
 import { Component } from 'decorators';
 import './_chips.scss';
+import { IComponentOptions } from 'angular';
 
 @Component({
     selector: 'chips',
@@ -12,7 +13,7 @@ import './_chips.scss';
         {{item.text}} <icon-dpr ng-if="!$ctrl.hideRemove" size="xs" class="remove-chip" ng-click="$ctrl.removeItem(item)">&#xE5CD;</icon-dpr>
     </div>`,
 })
-export class ChipsComponent {
+class Chips {
     data: any;
     hideRemove: boolean;
     onRemove: (obj: any) => {};
@@ -23,3 +24,8 @@ export class ChipsComponent {
         this.onRemove({ $data: this.data, $removedItem: item });
     }
 }
+
+export const ChipsComponent = angular
+    .module('blipComponents.chips', [])
+    .component('chips', <IComponentOptions>Chips)
+    .name;
diff --git a/src/components/colorPicker/colorPicker.component.ts b/src/components/colorPicker/colorPicker.component.ts
@@ -1,4 +1,5 @@
 import './colorPicker.scss';
+import * as angular from 'angular';
 
 export class ColorPickerComponent {
     colorBlock: HTMLCanvasElement;
@@ -196,22 +197,25 @@ export class ColorPickerComponent {
     }
 }
 
-export const colorPicker = {
-    controller: ColorPickerComponent,
-    controllerAs: '$ctrl',
-    bindings: {
-        inputColor: '=',
-        id: '@',
-    },
-    template: `
-    <div class="date-picker-wrapper">
-        <span class="color-label" ng-click="$ctrl.toggleColorPicker()"></span>
-        <div class="color-picker" ng-class="{'show-picker': $ctrl.showPicker }">
-            <div class="canvas-wrapper">
-                <canvas class="color-canvas color-block" height="150" width="150"></canvas>
-                <canvas class="color-canvas color-strip" height="150" width="30"></canvas>
+export const colorPicker = angular
+    .module('blipComponents.colorPicker', [])
+    .component('colorPicker', {
+        controller: ColorPickerComponent,
+        controllerAs: '$ctrl',
+        bindings: {
+            inputColor: '=',
+            id: '@',
+        },
+        template: `
+        <div class="date-picker-wrapper">
+            <span class="color-label" ng-click="$ctrl.toggleColorPicker()"></span>
+            <div class="color-picker" ng-class="{'show-picker': $ctrl.showPicker }">
+                <div class="canvas-wrapper">
+                    <canvas class="color-canvas color-block" height="150" width="150"></canvas>
+                    <canvas class="color-canvas color-strip" height="150" width="30"></canvas>
+                </div>
+                <input type="text" maxlenght="7" placeholder="Hex Code" class="color-text-input" ng-model="$ctrl.inputColor" ng-class="{'invalid-input': !$ctrl.validColor }"></input>
             </div>
-            <input type="text" maxlenght="7" placeholder="Hex Code" class="color-text-input" ng-model="$ctrl.inputColor" ng-class="{'invalid-input': !$ctrl.validColor }"></input>
-        </div>
-     </div>`,
-};
+        </div>`,
+    })
+    .name;
diff --git a/src/components/confusionMatrix/confusionMatrix.component.ts b/src/components/confusionMatrix/confusionMatrix.component.ts
@@ -1,3 +1,4 @@
+import * as angular from 'angular';
 import './ConfusionMatrix.scss';
 import template from './ConfusionMatrixView.html';
 
@@ -130,12 +131,15 @@ export class ConfusionMatrixComponent {
     }
 }
 
-export const ConfusionMatrix = {
-    controller: ConfusionMatrixComponent,
-    controllerAs: '$ctrl',
-    template,
-    bindings: {
-        matrix: '<',
-        keys: '<',
-    },
-};
+export const ConfusionMatrix = angular
+    .module('blipComponents.confusionMatrix', [])
+    .component('confusionMatrix', {
+        controller: ConfusionMatrixComponent,
+        controllerAs: '$ctrl',
+        template,
+        bindings: {
+            matrix: '<',
+            keys: '<',
+        },
+    })
+    .name;