Skip to content

Commit

Permalink
feat(components): extract CompositeEditor & EmptyWarning Components (#…
Browse files Browse the repository at this point in the history
…191)

* feat(components): extract CompositeEditor & EmptyWarning Components
- extract into 2 separate monorepo packages so it can be used in other frameworks like Aurelia-Slickgrid
- keep full unit test coverage on both components

* refactor(core): remove unused build targets avoid circleci out of memory

* refactor(style): tweak Composite Editor styling to work with BS4

* build(dev): update few npm packages & rebuild slick bundle vanilla zip
  • Loading branch information
ghiscoding authored Dec 10, 2020
1 parent b856c47 commit 00cf9a2
Show file tree
Hide file tree
Showing 45 changed files with 581 additions and 235 deletions.
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ Slickgrid-Universal has **100%** Unit Test Coverage, we are talking about +12,00
| Package Name | Version | Description |
| --------| ----------- | ------------- |
| [@slickgrid-universal/common](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/common) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/common.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/common) | commonly used Formatters/Editors/Filters/Services/... |
| [@slickgrid-universal/composite-editor-component](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/composite-editor-component) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/composite-editor-component.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/composite-editor-component) | Composite Editor Modal Component |
| [@slickgrid-universal/empty-warning-component](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/empty-warning-component) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/empty-warning-component.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/empty-warning-component) | Composite Editor Modal Component |
| [@slickgrid-universal/excel-export](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/excel-export) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/excel-export.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/excel-export) | Export to Excel Service (xls/xlsx) |
| [@slickgrid-universal/text-export](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/text-export) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/text-export.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/text-export) | Export to Text File Service (csv/txt) |
| [@slickgrid-universal/graphql](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/graphql) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/graphql.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/graphql) | GraphQL Query Service (support Filter/Sort/Pagination) |
Expand Down
20 changes: 10 additions & 10 deletions examples/webpack-demo-vanilla-bundle/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,31 +25,31 @@
"not dead"
],
"dependencies": {
"@slickgrid-universal/common": "^0.4.0",
"@slickgrid-universal/excel-export": "^0.4.1",
"@slickgrid-universal/text-export": "^0.4.2",
"@slickgrid-universal/vanilla-bundle": "^0.4.2",
"@slickgrid-universal/common": "*",
"@slickgrid-universal/excel-export": "*",
"@slickgrid-universal/text-export": "*",
"@slickgrid-universal/vanilla-bundle": "*",
"bulma": "^0.9.1",
"moment-mini": "^2.24.0"
},
"devDependencies": {
"@types/jquery": "^3.5.4",
"@types/jquery": "^3.5.5",
"@types/moment": "^2.13.0",
"@types/node": "^14.14.9",
"@types/node": "^14.14.12",
"@types/webpack": "^4.41.25",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.3.2",
"copy-webpack-plugin": "^6.4.0",
"css-loader": "^5.0.1",
"file-loader": "^6.2.0",
"fork-ts-checker-webpack-plugin": "^6.0.4",
"fork-ts-checker-webpack-plugin": "^6.0.5",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^1.3.1",
"mini-css-extract-plugin": "^1.3.2",
"node-sass": "5.0.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"ts-loader": "^8.0.11",
"ts-node": "^9.0.0",
"ts-node": "^9.1.1",
"url-loader": "^4.1.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
Expand Down
12 changes: 6 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,12 @@
]
},
"devDependencies": {
"@types/jest": "^26.0.15",
"@types/node": "^14.14.10",
"@typescript-eslint/eslint-plugin": "^4.9.0",
"@typescript-eslint/parser": "^4.9.0",
"cypress": "^6.0.1",
"eslint": "^7.14.0",
"@types/jest": "^26.0.18",
"@types/node": "^14.14.12",
"@typescript-eslint/eslint-plugin": "^4.9.1",
"@typescript-eslint/parser": "^4.9.1",
"cypress": "^6.1.0",
"eslint": "^7.15.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-prefer-arrow": "^1.2.2",
"http-server": "^0.12.3",
Expand Down
16 changes: 7 additions & 9 deletions packages/common/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,11 @@
"build:watch": "cross-env tsc --incremental --watch",
"dev": "run-s build sass:build sass:copy",
"dev:watch": "run-p build:watch sass:watch",
"bundle": "npm-run-all bundle:amd bundle:commonjs bundle:es2015 bundle:es2020",
"bundle": "npm-run-all bundle:commonjs bundle:es2015",
"prebundle": "npm-run-all delete:dist",
"postbundle": "npm-run-all sass:build sass:copy",
"bundle:amd": "cross-env tsc --project tsconfig.build.json --outDir dist/amd --module amd",
"bundle:commonjs": "tsc --project tsconfig.build.json --outDir dist/commonjs --module commonjs",
"bundle:es2015": "cross-env tsc --project tsconfig.build.json --outDir dist/es2015 --module es2020 --target es2015",
"bundle:es2020": "cross-env tsc --project tsconfig.build.json --outDir dist/es2020 --module es2020 --target es2020",
"delete:dist": "cross-env rimraf --maxBusyTries=10 dist",
"sass-build-task:scss-compile:bootstrap": "node-sass src/styles/slickgrid-theme-bootstrap.scss -o dist/styles/css --output-style compressed",
"postsass-build-task:scss-compile:bootstrap": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-bootstrap.css dist/styles/css/slickgrid-theme-bootstrap.css --output-style compressed",
Expand Down Expand Up @@ -63,7 +61,7 @@
"not dead"
],
"dependencies": {
"dompurify": "^2.2.2",
"dompurify": "^2.2.3",
"flatpickr": "^4.6.6",
"jquery": "^3.5.1",
"jquery-ui-dist": "^1.12.1",
Expand All @@ -74,16 +72,16 @@
},
"devDependencies": {
"@types/dompurify": "^2.0.4",
"@types/jquery": "^3.5.4",
"@types/jquery": "^3.5.5",
"@types/moment": "^2.13.0",
"autoprefixer": "^10.0.4",
"autoprefixer": "^10.1.0",
"copyfiles": "^2.4.1",
"cross-env": "^7.0.2",
"mini-css-extract-plugin": "^1.3.1",
"cross-env": "^7.0.3",
"mini-css-extract-plugin": "^1.3.2",
"node-sass": "5.0.0",
"nodemon": "^2.0.6",
"npm-run-all": "^4.1.5",
"postcss": "^8.1.10",
"postcss": "^8.2.1",
"postcss-cli": "^8.3.0",
"rimraf": "^3.0.2"
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,7 @@ $editor-modal-close-btn-outside-color: #ffffff !default;
$editor-modal-close-btn-outside-font-size: 36px !default;
$editor-modal-close-btn-outside-right: -7px !default;
$editor-modal-close-btn-outside-top: -32px !default;
$editor-modal-footer-btn-height: 28px;
$editor-modal-header-border-bottom: var(--lwc-borderWidthThick, 2px) solid var(--lwc-colorBorder, rgb(221, 219, 218)) !default;
$editor-modal-title-font-size: var(--lwc-fontSize7, 1.25rem) !default;
$editor-modal-title-font-weight: var(--lwc-fontWeightLight, 300) !default;
Expand Down
8 changes: 5 additions & 3 deletions packages/common/src/styles/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -552,7 +552,7 @@ $editor-modal-container-min-width: 420px !default;
$editor-modal-container-top: 30px !default;
$editor-modal-container-left: 50% !default;
$editor-modal-container-transform: translate(-50%) !default;
$editor-modal-container-z-index: 1010 !default;
$editor-modal-container-z-index: 1050 !default;
$editor-modal-header-bg-color: #ffffff !default;
$editor-modal-header-padding-left-right: 8px !default;
$editor-modal-header-padding-top-bottom: 12px !default;
Expand All @@ -568,6 +568,7 @@ $editor-modal-close-btn-font-size: 26px !default;
$editor-modal-close-btn-font-weight: 500 !default;
$editor-modal-close-btn-height: 20px !default;
$editor-modal-close-btn-margin: 1px !default;
$editor-modal-close-btn-opacity: 1 !default;
$editor-modal-close-btn-padding: 0px !default;
$editor-modal-close-btn-width: 20px !default;
$editor-modal-close-btn-right: 10px !default;
Expand All @@ -585,7 +586,7 @@ $editor-modal-footer-status-text-width: 40% !default;
$editor-modal-footer-buttons-width: 60% !default;
$editor-modal-footer-btn-border: 1px solid #dbdbdb !default;
$editor-modal-footer-btn-border-hover: #b5b5b5 !default;
$editor-modal-footer-btn-height: 28px !default;
$editor-modal-footer-btn-height: inherit !default;
$editor-modal-footer-btn-margin: 0 5px 0 0 !default;
$editor-modal-footer-btn-radius: 4px !default;
$editor-modal-footer-btn-max-width: 162px !default;
Expand Down Expand Up @@ -635,7 +636,8 @@ $editor-modal-large-editor-count-margin: 0 !default;
$editor-modal-title-font-color: #333333 !default;
$editor-modal-title-font-size: 20px !default;
$editor-modal-title-font-weight: 500 !default;
$editor-modal-title-line-height: 30px !default;
$editor-modal-title-height: 30px !default;
$editor-modal-title-line-height: 28px !default;
$editor-modal-title-text-align: left !default;
$editor-modal-validation-color: $editor-modal-detail-label-color-invalid !default;
$editor-modal-validation-font-size: 12px !default;
Expand Down
3 changes: 2 additions & 1 deletion packages/common/src/styles/slick-editors.scss
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,7 @@
float: right;
line-height: 0;
background-color: $editor-modal-close-btn-bg-color;
opacity: $editor-modal-close-btn-opacity;
border: $editor-modal-close-btn-border;
color: $editor-modal-close-btn-color;
font-family: $editor-modal-close-btn-font-family;
Expand Down Expand Up @@ -226,7 +227,7 @@
font-weight: $editor-modal-title-font-weight;
line-height: $editor-modal-title-line-height;
color: $editor-modal-title-font-color;
height: calc(#{$editor-modal-header-height} - (#{$editor-modal-header-padding-top-bottom} * 2));
height: $editor-modal-title-height;
overflow: hidden auto;
text-align: $editor-modal-title-text-align;
text-overflow: ellipsis;
Expand Down
4 changes: 2 additions & 2 deletions packages/common/tsconfig.build.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"moduleResolution": "node",
"target": "es2015",
"lib": [
"es2020",
"es2015",
"dom"
],
"types": [
Expand All @@ -18,7 +18,7 @@
"../typings",
"../../node_modules/@types"
],
"outDir": "dist/amd",
"outDir": "dist/commonjs",
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": false,
Expand Down
22 changes: 22 additions & 0 deletions packages/composite-editor-component/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
[![npm](https://img.shields.io/npm/v/@slickgrid-universal/composite-editor-component.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/composite-editor-component)
[![npm](https://img.shields.io/npm/dy/@slickgrid-universal/composite-editor-component?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/composite-editor-component)

[![CircleCI](https://circleci.com/gh/ghiscoding/slickgrid-universal/tree/master.svg?style=shield)](https://circleci.com/gh/ghiscoding/workflows/slickgrid-universal/tree/master)
[![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)
[![jest](https://jestjs.io/img/jest-badge.svg)](https://github.com/facebook/jest)
[![codecov](https://codecov.io/gh/ghiscoding/slickgrid-universal/branch/master/graph/badge.svg)](https://codecov.io/gh/ghiscoding/slickgrid-universal)

## Vanilla Bundle
#### @slickgrid-universal/composite-editor-component

Vanilla Bundle implementation of a Composite Editor Modal Window which can do the following
- Create
- Update
- Mass Update Changes
- Mass Selection Changes (similar to Mass Update but only for the selected items)

### Installation
Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation), you can see a demo by looking at the [GitHub Demo](https://ghiscoding.github.io/slickgrid-universal) page and click on "Export to CSV" from the Grid Menu (aka hamburger menu).
48 changes: 48 additions & 0 deletions packages/composite-editor-component/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
{
"name": "@slickgrid-universal/composite-editor-component",
"version": "0.4.0",
"description": "Slick Composite Editor Component - Vanilla Implementation of a Composite Editor Modal Window Component",
"browser": "src/index.ts",
"main": "dist/commonjs/index.js",
"module": "dist/es2015/index.js",
"typings": "dist/commonjs/index.d.ts",
"publishConfig": {
"access": "public"
},
"directories": {
"src": "src"
},
"scripts": {
"build": "cross-env tsc --build",
"build:watch": "cross-env tsc --incremental --watch",
"dev": "run-s build sass:build sass:copy",
"dev:watch": "run-p build:watch",
"bundle": "run-p bundle:commonjs bundle:es2015",
"bundle:commonjs": "tsc --project tsconfig.build.json --outDir dist/commonjs --module commonjs",
"bundle:es2015": "cross-env tsc --project tsconfig.build.json --outDir dist/es2015 --module es2020 --target es2015",
"prebundle": "npm-run-all delete:dist",
"delete:dist": "cross-env rimraf --maxBusyTries=10 dist"
},
"author": "Ghislain B.",
"license": "MIT",
"engines": {
"node": ">=12.0.0",
"npm": ">=6.14.0"
},
"browserslist": [
"last 2 version",
"> 1%",
"maintained node versions",
"not dead"
],
"dependencies": {
"@slickgrid-universal/common": "*",
"dompurify": "^2.2.3"
},
"devDependencies": {
"@types/webpack": "^4.41.25",
"cross-env": "^7.0.3",
"npm-run-all": "^4.1.5",
"rimraf": "^3.0.2"
}
}
2 changes: 2 additions & 0 deletions packages/composite-editor-component/src/.npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
index.ts
**/*.*
11 changes: 11 additions & 0 deletions packages/composite-editor-component/src/index.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import * as entry from './index';

describe('Testing library entry point', () => {
it('should have an index entry point defined', () => {
expect(entry).toBeTruthy();
});

it('should have all exported object defined', () => {
expect(typeof entry.SlickCompositeEditorComponent).toBe('function');
});
});
1 change: 1 addition & 0 deletions packages/composite-editor-component/src/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './slick-composite-editor.component';
Original file line number Diff line number Diff line change
@@ -1,6 +1,19 @@
import { Column, CompositeEditorOpenDetailOption, Editor, Editors, GridOption, GridService, GridStateService, SlickDataView, SlickGrid, SlickNamespace, SlickRowSelectionModel } from '@slickgrid-universal/common';
import { SlickCompositeEditorComponent } from '../slick-composite-editor.component';
import { TranslateServiceStub } from '../../../../../test/translateServiceStub';
import {
Column,
CompositeEditorOpenDetailOption,
Editor,
Editors,
GridOption,
GridService,
GridStateService,
SlickDataView,
SlickGrid,
SlickNamespace,
SlickRowSelectionModel
} from '@slickgrid-universal/common';

import { SlickCompositeEditorComponent } from './slick-composite-editor.component';
import { TranslateServiceStub } from '../../../test/translateServiceStub';

declare const Slick: SlickNamespace;

Expand Down
40 changes: 40 additions & 0 deletions packages/composite-editor-component/tsconfig.build.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
{
"compilerOptions": {
"module": "es2020",
"moduleResolution": "node",
"target": "es2015",
"lib": [
"es2020",
"dom"
],
"typeRoots": [
"../typings",
"../../node_modules/@types"
],
"outDir": "dist/2015",
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noImplicitReturns": true,
"skipLibCheck": true,
"strictNullChecks": true,
"declaration": true,
"forceConsistentCasingInFileNames": true,
"experimentalDecorators": true,
"noEmitHelpers": false,
"stripInternal": true,
"sourceMap": true
},
"exclude": [
".vscode",
"src/examples",
"src/resources",
"test",
"**/*.spec.ts"
],
"include": [
"../typings",
"**/*"
]
}
41 changes: 41 additions & 0 deletions packages/composite-editor-component/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
{
"extends": "../tsconfig-build.json",
"compileOnSave": false,
"compilerOptions": {
"rootDir": "src",
"declarationDir": "dist/es2015",
"outDir": "dist/es2015",
"target": "es2017",
"module": "es2015",
"sourceMap": true,
"noImplicitReturns": true,
"lib": [
"es2020",
"dom"
],
"types": [
"moment",
"jquery",
"node"
],
"typeRoots": [
"node_modules/@types",
"src/typings"
]
},
"exclude": [
"cypress",
"dist",
"node_modules",
"**/*.spec.ts"
],
"filesGlob": [
"./src/**/*.ts",
"./test/**/*.ts",
"./custom_typings/**/*.d.ts"
],
"include": [
"src/**/*.ts",
"src/typings/**/*.ts"
]
}
Loading

0 comments on commit 00cf9a2

Please sign in to comment.