feat(table): introduce new table package

package.json

@@ -14,12 +14,13 @@
     "postinstall": "npm run bootstrap && npm run docs:install && node .scripts/copy.script.js",
     "bootstrap": "lerna bootstrap",
     "serve": "npm run lib:serve",
-    "build": "npm run icons:build && npm run lib:build && npm run vue:build && npm run angular:build && npm run testing:build",
+    "build": "npm run icons:build && npm run lib:build && npm run table:build && npm run vue:build && npm run angular:build && npm run testing:build",
     "test": "npm run lib:test && npm run vue:test && npm run testing:test",
     "release": "lerna publish --yes --force-publish --conventional-commits",
     "lib:build": "node .scripts/banner.js lib:build && npm --prefix packages/components run build",
     "lib:serve": "node .scripts/banner.js lib:serve && npm --prefix packages/components run serve",
     "lib:test": "node .scripts/banner.js lib:test && cd packages/components && npm run test",
+    "table:build": "node .scripts/banner.js table:build && npm --prefix packages/table run build",
     "vue:build": "node .scripts/banner.js vue:build && npm --prefix packages/components-vue run build",
     "vue:test": "node .scripts/banner.js vue:test && npm --prefix packages/components-vue run test",
     "angular:build": "node .scripts/banner.js angular:build && npm --prefix packages/components-angular run build",

packages/components-vue/src/helpers.ts

@@ -35,8 +35,8 @@ export function rules(isDisabledOrRules: any, validators?: any): ValidatorsRules
       validators = isDisabledOrRules
     }
 
-    if (isArray(rules)) {
-      for (let i = 0; i < rules.length; i++) {
+    if (isArray(validators)) {
+      for (let i = 0; i < validators.length; i++) {
         const errorMessage = await validators[i](unref(value))
         if (errorMessage !== null && errorMessage !== undefined && errorMessage !== '' && errorMessage !== true) {
           return errorMessage

packages/components/package.json

@@ -70,17 +70,13 @@
     "@types/autoprefixer": "^10.2.0",
     "@types/jest": "^26.0.24",
     "@types/puppeteer": "^5.4.4",
-    "ag-grid-community": "^25.3.0",
-    "autoprefixer": "^10.3.1",
+    "autoprefixer": "^10.3.2",
     "copyfiles": "^2.4.1",
     "jest": "^26.6.3",
     "jest-cli": "^26.6.3",
     "postcss": "^8.3.6",
     "puppeteer": "^10.2.0",
     "rimraf": "^3.0.2"
   },
-  "peerDependencies": {
-    "ag-grid-community": ">=25.2.1"
-  },
   "gitHead": "8bb3a41da0b577e5606f49a45e588a7bd4521eca"
 }

packages/components/src/index.ts

@@ -10,6 +10,7 @@ export * from './components/bal-select/utils/bal-option.type'
 export * from './components/bal-tabs/bal-tab.type'
 export * from './components/bal-file-upload/bal-file-upload.type'
 export * from './components/bal-heading/bal-heading.type'
+export * from './types/color.types'
 
 /**
  * Utils
@@ -19,13 +20,6 @@ export * from './filters'
 export * from './validators'
 export * from './components/bal-select/utils/bal-option.util'
 
-/**
- * Table Cell Renderers
- */
-export * from './components/bal-table/bal-table-button-renderer'
-export * from './components/bal-table/bal-table-tag-renderer'
-export * from './components/bal-table/bal-table-text-renderer'
-
 /**
  * Controllers
  */

packages/components/src/styles/elements/table.scss

@@ -64,124 +64,3 @@ table.table {
     }
   }
 }
-
-@import 'node_modules/ag-grid-community/src/styles/ag-grid.scss';
-
-.ag-theme-alpine {
-  @include ag-theme-alpine(
-    (
-      header-background-color: $white-bis,
-      borders: false,
-      borders-critical: true,
-      border-color: $blue,
-      header-foreground-color: $blue,
-      header-column-separator: false,
-      row-border-color: $blue-light-line,
-      selected-row-background-color: $blue-light-hover,
-      odd-row-background-color: null,
-      row-hover-color: $white-bis,
-      range-selection-border-color: $primary,
-      checkbox-border-radius: 0,
-      checkbox-checked-color: $primary,
-      checkbox-unchecked-color: $blue-line,
-    )
-  );
-
-  .ag-cell {
-    font-family: $body-family;
-
-    .bal-table-cell-text > bal-icon,
-    .bal-table-cell-text > bal-text {
-      display: inline-block;
-    }
-    .bal-table-cell-text > bal-icon {
-      vertical-align: sub;
-      margin-top: -6px;
-      margin-left: 0px;
-      margin-right: 4px;
-
-      svg {
-        margin-bottom: 1px;
-      }
-    }
-
-    .bal-table-cell-text {
-      vertical-align: baseline;
-
-      bal-text + bal-icon {
-        margin-left: 4px;
-        margin-right: 0px;
-      }
-    }
-
-    > bal-tag {
-      margin-top: -10px;
-    }
-
-    > bal-button:not(.is-fullwidth) {
-      margin-top: -2px;
-    }
-
-    > bal-button.is-fullwidth {
-      margin-top: 4px;
-    }
-
-    > bal-icon {
-      display: inline-block;
-      vertical-align: middle;
-      margin-top: -6px;
-      margin-left: 0px;
-      margin-right: 4px;
-
-      &.is-right {
-        margin-left: 4px;
-        margin-right: 0px;
-      }
-    }
-  }
-
-  .ag-checkbox-input-wrapper {
-    outline: none !important;
-    box-shadow: none !important;
-
-    &::before,
-    &::after {
-      display: inline-block;
-      position: absolute;
-      background-color: transparent;
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: 16px 16px;
-    }
-
-    &::before {
-      content: '';
-      left: 0;
-      top: 0;
-      height: 16px;
-      width: 16px;
-      border: 1px solid $blue-line;
-    }
-
-    &::after {
-      content: none;
-      left: 5px !important;
-      top: 2px !important;
-      width: 6px;
-      height: 9px;
-      border-bottom: 2px solid $blue;
-      border-right: 2px solid $blue;
-      border-top: 0;
-      border-left: 0;
-      -moz-transform: rotate(45deg);
-      -ms-transform: rotate(45deg);
-      -o-transform: rotate(45deg);
-      -webkit-transform: rotate(45deg);
-      transform: rotate(45deg);
-    }
-
-    &.ag-checked::after {
-      content: '';
-    }
-  }
-}

packages/components/src/styles/global.scss

@@ -2,8 +2,6 @@
 @import 'node_modules/@baloise/design-system-fonts/scss/fonts.scss';
 @import './elements/notices.scss';
 @import './layout/sticky-footer.scss';
-@import 'node_modules/ag-grid-community/dist/styles/mixins/_ag-theme-params.scss';
-@import 'node_modules/ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin.scss';
 
 .bal-app {
   position: relative;

packages/fonts/package.json

@@ -37,8 +37,5 @@
   "devDependencies": {
     "archiver": "^5.3.0"
   },
-  "dependencies": {
-    "@baloise/design-system-components": "^1.10.0",
-    "@baloise/design-system-icons": "^1.10.0"
-  }
+  "dependencies": {}
 }

packages/icons/package.json

@@ -47,7 +47,5 @@
     "svgo": "^2.4.0",
     "typescript": "^4.3.5"
   },
-  "dependencies": {
-    "@baloise/design-system-components": "^1.10.0"
-  }
+  "dependencies": {}
 }

packages/table/.gitignore

@@ -0,0 +1,2 @@
+/docs
+/dist