diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 447aec7..c371524 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -1,3 +1,3 @@ This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or -contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. \ No newline at end of file +contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 7d71903..7e66c4b 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -14,6 +14,7 @@ For more information see the [Code of Conduct FAQ](https://opensource.microsoft. or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. ## Pull Requests Reviews + This is a simple guide to assist in reviewing Github pull requests locally within VS Code. See: https://gist.github.com/piscisaureus/3342247 @@ -66,4 +67,4 @@ Fast-forward ... ``` -Note: "git pull" did not work for me by itself for the PR branch... Perhaps "git pull origin". \ No newline at end of file +Note: "git pull" did not work for me by itself for the PR branch... Perhaps "git pull origin". diff --git a/README.md b/README.md index 59a5c46..99c8f2c 100644 --- a/README.md +++ b/README.md @@ -2,11 +2,12 @@ [![npm version](https://badge.fury.io/js/%40angular-react%2Fcore.svg)](https://www.npmjs.com/package/@angular-react/core) -Industry trends, organizational pressures, and other factors can lead to mandates regarding the use of component libraries or migration from one technology to another. In the case of [Office UI Fabric][fab], where its use is required, the client must be written in React (there is no Angular component library for the latest version). Rewrite from Angular to React may be cost-prohibitive or ill advised for other reasons. +Industry trends, organizational pressures, and other factors can lead to mandates regarding the use of component libraries or migration from one technology to another. In the case of [Office UI Fabric][fab], where its use is required, the client must be written in React (there is no Angular component library for the latest version). Rewrite from Angular to React may be cost-prohibitive or ill advised for other reasons. -Use of Angular-React allows consuming any React elements, but specifically Office UI Fabric, within an Angular [2+] application. The library of wrappers for Office UI Fabric simplifies the use of these components with Angular. However, any React code can make use of the custom Angular-React renderer. +Use of Angular-React allows consuming any React elements, but specifically Office UI Fabric, within an Angular [2+] application. The library of wrappers for Office UI Fabric simplifies the use of these components with Angular. However, any React code can make use of the custom Angular-React renderer. ### Quick links + [@angular-react/fabric](https://www.npmjs.com/package/@angular-react/fabric) | [Documentation, quick start, and guides][ard] | [Demo][ard-demo] | @@ -15,15 +16,18 @@ Use of Angular-React allows consuming any React elements, but specifically Offic [Office UI Fabric](https://developer.microsoft.com/en-us/fabric) ### Typical Use Cases + - Use React component libraries with Angular - Incrementally rewrite an Angular application into React (moving from atomic/leaf nodes upward into full features/pages until the entire app is re-written) ## Libraries + - [**core**][lib-core]: Includes the Renderer and supporting logic to render Angular components with React implementations as React components. - [**fabric**][lib-fab]: The light-weight Angular component wrappers that expose the Fabric React component api through common Angular components (including both imperative AND declrative syntax in many cases). # Roadmap -Initial work to prove the feasibility of adapting the Angular Renderer to output React managed components has concluded. We have moved beyond the initial simple Fabric components and expanded coverage to much of the available [Office UI Fabric][fab-c] component library. + +Initial work to prove the feasibility of adapting the Angular Renderer to output React managed components has concluded. We have moved beyond the initial simple Fabric components and expanded coverage to much of the available [Office UI Fabric][fab-c] component library. In the coming months we will continue to refine the component implementations as we use the angular-react core and fabric libraries in 2 real-world consumer facing production applications. @@ -41,4 +45,4 @@ You can look through the issues (which should be up-to-date on who is working on [fab]: https://developer.microsoft.com/en-us/fabric [fab-c]: https://developer.microsoft.com/en-us/fabric#/components [lib-core]: https://www.npmjs.com/package/@angular-react/core -[lib-fab]: https://www.npmjs.com/package/@angular-react/fabric \ No newline at end of file +[lib-fab]: https://www.npmjs.com/package/@angular-react/fabric diff --git a/apps/demo/karma.conf.js b/apps/demo/karma.conf.js index 6ccac29..de8d4b2 100644 --- a/apps/demo/karma.conf.js +++ b/apps/demo/karma.conf.js @@ -1,8 +1,7 @@ - // Karma configuration file, see link for more information // https://karma-runner.github.io/1.0/config/configuration-file.html -module.exports = function (config) { +module.exports = function(config) { config.set({ basePath: '', frameworks: ['jasmine', '@angular-devkit/build-angular'], @@ -11,15 +10,15 @@ module.exports = function (config) { require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), require('karma-coverage-istanbul-reporter'), - require('@angular-devkit/build-angular/plugins/karma') + require('@angular-devkit/build-angular/plugins/karma'), ], client: { - clearContext: false // leave Jasmine Spec Runner output visible in browser + clearContext: false, // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { dir: require('path').join(__dirname, '../../coverage'), reports: ['html', 'lcovonly'], - fixWebpackSourcePaths: true + fixWebpackSourcePaths: true, }, reporters: ['progress', 'kjhtml'], port: 9876, @@ -27,7 +26,6 @@ module.exports = function (config) { logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], - singleRun: false + singleRun: false, }); }; - \ No newline at end of file diff --git a/apps/demo/src/404.html b/apps/demo/src/404.html index b453931..eb38bfe 100644 --- a/apps/demo/src/404.html +++ b/apps/demo/src/404.html @@ -1,27 +1,19 @@ + + - - + Angular-React Demo - Angular-React Demo + - - - - - - - - - - - - - - - + + + + + + diff --git a/apps/demo/src/app/app.component.html b/apps/demo/src/app/app.component.html index 6d00bf4..a00b374 100644 --- a/apps/demo/src/app/app.component.html +++ b/apps/demo/src/app/app.component.html @@ -117,24 +117,56 @@ - + - + - + - + - - Custom content for index {{ index }} - + Custom content for index {{ index }} - - + + diff --git a/apps/demo/src/app/app.component.ts b/apps/demo/src/app/app.component.ts index 40454d8..be78a6f 100644 --- a/apps/demo/src/app/app.component.ts +++ b/apps/demo/src/app/app.component.ts @@ -8,8 +8,10 @@ import { ICalendarStrings, IContextualMenuProps, ISelection, Selection } from 'o encapsulation: ViewEncapsulation.None, }) export class AppComponent { - @ViewChild('customRange') - customRangeTemplate: TemplateRef<{ item: any; dismissMenu: (ev?: any, dismissAll?: boolean) => void }>; + @ViewChild('customRange') customRangeTemplate: TemplateRef<{ + item: any; + dismissMenu: (ev?: any, dismissAll?: boolean) => void; + }>; onClickEventHandler(ev) { console.log('onClick', { ev }); diff --git a/apps/demo/src/app/app.module.ts b/apps/demo/src/app/app.module.ts index d5b1491..0f36375 100644 --- a/apps/demo/src/app/app.module.ts +++ b/apps/demo/src/app/app.module.ts @@ -72,7 +72,7 @@ import { CounterComponent } from './counter/counter.component'; FabCalendarModule, FabDetailsListModule, FabGroupModule, - FabMarqueeSelectionModule + FabMarqueeSelectionModule, ], declarations: [AppComponent, CounterComponent], bootstrap: [AppComponent], diff --git a/apps/demo/src/app/counter/counter.component.ts b/apps/demo/src/app/counter/counter.component.ts index ac611c5..43c8f05 100644 --- a/apps/demo/src/app/counter/counter.component.ts +++ b/apps/demo/src/app/counter/counter.component.ts @@ -4,7 +4,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/ selector: 'counter', template: ` - `, + `, changeDetection: ChangeDetectionStrategy.OnPush, }) export class CounterComponent { diff --git a/apps/demo/src/index.html b/apps/demo/src/index.html index f6bf668..a410692 100644 --- a/apps/demo/src/index.html +++ b/apps/demo/src/index.html @@ -1,14 +1,14 @@ - + - - - Angular-React Demo - + + + Angular-React Demo + - - - - - - + + + + + + diff --git a/apps/demo/tsconfig.app.json b/apps/demo/tsconfig.app.json index e0f21d5..46debef 100644 --- a/apps/demo/tsconfig.app.json +++ b/apps/demo/tsconfig.app.json @@ -4,11 +4,6 @@ "outDir": "../../dist/out-tsc/apps/demo", "module": "es2015" }, - "include": [ - "**/*.ts" - ], - "exclude": [ - "**/*.spec.ts", - "src/test.ts" - ] + "include": ["**/*.ts"], + "exclude": ["**/*.spec.ts", "src/test.ts"] } diff --git a/apps/demo/tsconfig.spec.json b/apps/demo/tsconfig.spec.json index 18dc31c..858b8c0 100644 --- a/apps/demo/tsconfig.spec.json +++ b/apps/demo/tsconfig.spec.json @@ -2,18 +2,9 @@ "extends": "../../tsconfig.json", "compilerOptions": { "outDir": "../../dist/out-tsc/apps/demo", - "types": [ - "jasmine", - "node" - ], + "types": ["jasmine", "node"], "module": "commonjs" }, - "files": [ - "src/test.ts", - "src/polyfills.ts" - ], - "include": [ - "**/*.spec.ts", - "**/*.d.ts" - ] + "files": ["src/test.ts", "src/polyfills.ts"], + "include": ["**/*.spec.ts", "**/*.d.ts"] } diff --git a/apps/demo/tslint.json b/apps/demo/tslint.json index 19e8161..8006e74 100644 --- a/apps/demo/tslint.json +++ b/apps/demo/tslint.json @@ -1,17 +1,7 @@ { "extends": "../../tslint.json", "rules": { - "directive-selector": [ - true, - "attribute", - "app", - "camelCase" - ], - "component-selector": [ - true, - "element", - "app", - "kebab-case" - ] + "directive-selector": [true, "attribute", "app", "camelCase"], + "component-selector": [true, "element", "app", "kebab-case"] } } diff --git a/apps/docs/karma.conf.js b/apps/docs/karma.conf.js index 6ccac29..de8d4b2 100644 --- a/apps/docs/karma.conf.js +++ b/apps/docs/karma.conf.js @@ -1,8 +1,7 @@ - // Karma configuration file, see link for more information // https://karma-runner.github.io/1.0/config/configuration-file.html -module.exports = function (config) { +module.exports = function(config) { config.set({ basePath: '', frameworks: ['jasmine', '@angular-devkit/build-angular'], @@ -11,15 +10,15 @@ module.exports = function (config) { require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), require('karma-coverage-istanbul-reporter'), - require('@angular-devkit/build-angular/plugins/karma') + require('@angular-devkit/build-angular/plugins/karma'), ], client: { - clearContext: false // leave Jasmine Spec Runner output visible in browser + clearContext: false, // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { dir: require('path').join(__dirname, '../../coverage'), reports: ['html', 'lcovonly'], - fixWebpackSourcePaths: true + fixWebpackSourcePaths: true, }, reporters: ['progress', 'kjhtml'], port: 9876, @@ -27,7 +26,6 @@ module.exports = function (config) { logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], - singleRun: false + singleRun: false, }); }; - \ No newline at end of file diff --git a/apps/docs/src/404.html b/apps/docs/src/404.html index 6e3fa48..7ac22eb 100644 --- a/apps/docs/src/404.html +++ b/apps/docs/src/404.html @@ -1,27 +1,19 @@ + + - - + Angular-React - Angular-React + - - - - - - - - - - - - - - - + + + + + + diff --git a/apps/docs/src/app/components/dot/dot.component.ts b/apps/docs/src/app/components/dot/dot.component.ts index 2f26c5a..bbf2459 100644 --- a/apps/docs/src/app/components/dot/dot.component.ts +++ b/apps/docs/src/app/components/dot/dot.component.ts @@ -8,24 +8,16 @@ import { ChangeDetectionStrategy, Component, Input, Output, EventEmitter } from changeDetection: ChangeDetectionStrategy.OnPush, }) export class DotComponent { - @Input() - x: string; - @Input() - y: string; - @Input() - size: string; - @Input() - color: string; - @Input() - backgroundColor: string; - @Input() - textOverride: string; + @Input() x: string; + @Input() y: string; + @Input() size: string; + @Input() color: string; + @Input() backgroundColor: string; + @Input() textOverride: string; - @Output('onMouseEnter') - mouseEnter: EventEmitter = new EventEmitter(); - @Output('onMouseLeave') - mouseLeave: EventEmitter = new EventEmitter(); + @Output('onMouseEnter') readonly mouseEnter = new EventEmitter(); + @Output('onMouseLeave') readonly mouseLeave = new EventEmitter(); - onMouseEnter = ev => this.mouseEnter.emit(ev as any); - onMouseLeave = ev => this.mouseLeave.emit(ev as any); + onMouseEnter = (ev: MouseEvent) => this.mouseEnter.emit(ev); + onMouseLeave = (ev: MouseEvent) => this.mouseLeave.emit(ev); } diff --git a/apps/docs/src/app/components/icons/icons.component.html b/apps/docs/src/app/components/icons/icons.component.html index 79ca540..ef89594 100644 --- a/apps/docs/src/app/components/icons/icons.component.html +++ b/apps/docs/src/app/components/icons/icons.component.html @@ -1,35 +1,38 @@ - Angular icon - React icon - - - - Microsoft icon - + Google icon - - diff --git a/apps/docs/src/app/components/navbar/navbar.component.html b/apps/docs/src/app/components/navbar/navbar.component.html index 80e279c..66faca0 100644 --- a/apps/docs/src/app/components/navbar/navbar.component.html +++ b/apps/docs/src/app/components/navbar/navbar.component.html @@ -1,34 +1,52 @@ - + diff --git a/apps/docs/src/app/components/navbar/navbar.component.scss b/apps/docs/src/app/components/navbar/navbar.component.scss index 743dea5..54bbea1 100644 --- a/apps/docs/src/app/components/navbar/navbar.component.scss +++ b/apps/docs/src/app/components/navbar/navbar.component.scss @@ -47,7 +47,6 @@ background: $smoke; /deep/ .mat-tab-nav-bar { - .mat-tab-links { display: flex; overflow-y: auto; @@ -104,11 +103,8 @@ } &.collapse { - /deep/ .mat-tab-nav-bar { - .mat-tab-links { - .mat-tab-link { height: $navSecondaryHeightCollapsed; @@ -123,9 +119,7 @@ } &.stack { - svg { - &:first-child { margin: -30%; height: 70%; @@ -152,7 +146,6 @@ @include mediaMobile { :host { nav.primary { - /deep/ .mat-button:first-child { .mat-button-wrapper { b { @@ -171,7 +164,6 @@ } /deep/ .mat-tab-links { - .mat-tab-link { padding: 0 3%; min-width: 0; @@ -180,11 +172,8 @@ } nav.secondary { - /deep/ .mat-tab-nav-bar { - .mat-tab-links { - .mat-tab-link { height: $navSecondaryHeightNarrow; diff --git a/apps/docs/src/app/components/page-header/page-header.component.scss b/apps/docs/src/app/components/page-header/page-header.component.scss index 19c5992..a612b00 100644 --- a/apps/docs/src/app/components/page-header/page-header.component.scss +++ b/apps/docs/src/app/components/page-header/page-header.component.scss @@ -4,7 +4,12 @@ // justify-content: last-baseline; /deep/ { - h1, h2, h3, h4, h5, h6 { + h1, + h2, + h3, + h4, + h5, + h6 { display: inline-block; margin: 0; padding-bottom: 4px; @@ -19,5 +24,4 @@ margin-left: -8px; } } - } diff --git a/apps/docs/src/app/components/triangle/triangle.component.html b/apps/docs/src/app/components/triangle/triangle.component.html index 4e34978..dbbea53 100644 --- a/apps/docs/src/app/components/triangle/triangle.component.html +++ b/apps/docs/src/app/components/triangle/triangle.component.html @@ -4,7 +4,5 @@ - - - + diff --git a/apps/docs/src/app/components/triangle/triangle.component.ts b/apps/docs/src/app/components/triangle/triangle.component.ts index 309d1b9..c641158 100644 --- a/apps/docs/src/app/components/triangle/triangle.component.ts +++ b/apps/docs/src/app/components/triangle/triangle.component.ts @@ -31,8 +31,10 @@ export interface TriangleConfig { styleUrls: ['./triangle.component.scss'], }) export class TriangleComponent implements OnInit, OnDestroy { - @ContentChild(TemplateRef) - dotTemplate; + @ContentChild(TemplateRef) readonly dotTemplate: TemplateRef<{ + dot: SierpinskiTriangleDot; + text: number; + }>; // These are initially undefined and default CONST is used unless another // value is provided in hte config. Whether default of config value are used, diff --git a/apps/docs/src/app/containers/component-docs/component-docs.component.html b/apps/docs/src/app/containers/component-docs/component-docs.component.html index 13de51f..59c82d9 100644 --- a/apps/docs/src/app/containers/component-docs/component-docs.component.html +++ b/apps/docs/src/app/containers/component-docs/component-docs.component.html @@ -1,17 +1,13 @@ -
+ diff --git a/apps/docs/src/app/containers/component-docs/fabric/fabric.component.html b/apps/docs/src/app/containers/component-docs/fabric/fabric.component.html index 19b6210..158deee 100644 --- a/apps/docs/src/app/containers/component-docs/fabric/fabric.component.html +++ b/apps/docs/src/app/containers/component-docs/fabric/fabric.component.html @@ -2,7 +2,11 @@

Button

- +

{{ sampleContent }}

@@ -10,10 +14,15 @@

Dialog

- + {{ sampleContent2 }} {{ sampleContent3 }} - - + + diff --git a/apps/docs/src/app/containers/component-docs/semantic-ui/semantic-ui.component.scss b/apps/docs/src/app/containers/component-docs/semantic-ui/semantic-ui.component.scss index f3faac5..5d4e87f 100644 --- a/apps/docs/src/app/containers/component-docs/semantic-ui/semantic-ui.component.scss +++ b/apps/docs/src/app/containers/component-docs/semantic-ui/semantic-ui.component.scss @@ -1,4 +1,3 @@ :host { display: block; - } diff --git a/apps/docs/src/app/containers/docs/docs.component.html b/apps/docs/src/app/containers/docs/docs.component.html index 22fe8d5..f1e3f8c 100644 --- a/apps/docs/src/app/containers/docs/docs.component.html +++ b/apps/docs/src/app/containers/docs/docs.component.html @@ -1,15 +1,11 @@ diff --git a/apps/docs/src/app/containers/docs/getting-started/getting-started.component.html b/apps/docs/src/app/containers/docs/getting-started/getting-started.component.html index 3ceead6..842470a 100644 --- a/apps/docs/src/app/containers/docs/getting-started/getting-started.component.html +++ b/apps/docs/src/app/containers/docs/getting-started/getting-started.component.html @@ -1,3 +1 @@ -

- getting-started works! -

+

getting-started works!

diff --git a/apps/docs/src/app/containers/docs/wrappers/wrappers.component.html b/apps/docs/src/app/containers/docs/wrappers/wrappers.component.html index 817114d..792a268 100644 --- a/apps/docs/src/app/containers/docs/wrappers/wrappers.component.html +++ b/apps/docs/src/app/containers/docs/wrappers/wrappers.component.html @@ -1,3 +1 @@ -

- wrappers works! -

+

wrappers works!

diff --git a/apps/docs/src/app/containers/landing/landing.component.html b/apps/docs/src/app/containers/landing/landing.component.html index 28fce73..97df5ec 100644 --- a/apps/docs/src/app/containers/landing/landing.component.html +++ b/apps/docs/src/app/containers/landing/landing.component.html @@ -1,6 +1,4 @@

Angular React

React components inside Angular!

-

- landing works! -

+

landing works!

diff --git a/apps/docs/src/app/containers/landing/landing.component.scss b/apps/docs/src/app/containers/landing/landing.component.scss index f3faac5..5d4e87f 100644 --- a/apps/docs/src/app/containers/landing/landing.component.scss +++ b/apps/docs/src/app/containers/landing/landing.component.scss @@ -1,4 +1,3 @@ :host { display: block; - } diff --git a/apps/docs/src/app/containers/performance/angular-perf/angular-perf.component.html b/apps/docs/src/app/containers/performance/angular-perf/angular-perf.component.html index f630b70..7d4efd0 100644 --- a/apps/docs/src/app/containers/performance/angular-perf/angular-perf.component.html +++ b/apps/docs/src/app/containers/performance/angular-perf/angular-perf.component.html @@ -4,9 +4,7 @@

Pure Angular View

- +
- +
@@ -23,8 +28,16 @@ - + {{ text }} diff --git a/apps/docs/src/app/containers/performance/angular-perf/angular-perf.component.ts b/apps/docs/src/app/containers/performance/angular-perf/angular-perf.component.ts index 7d92a43..ba4cf82 100644 --- a/apps/docs/src/app/containers/performance/angular-perf/angular-perf.component.ts +++ b/apps/docs/src/app/containers/performance/angular-perf/angular-perf.component.ts @@ -11,8 +11,7 @@ import { TriangleComponent, DEFAULT_DOT_SIZE } from '../../../components/triangl export class AngularPerfComponent { DEFAULT_DOT_SIZE = DEFAULT_DOT_SIZE; - @ViewChild(TriangleComponent) - triangle: TriangleComponent; + @ViewChild(TriangleComponent) readonly triangle: TriangleComponent; get toggleTriangleLabel() { return this.triangle.isActive ? 'Stop' : 'Restart'; diff --git a/apps/docs/src/app/containers/performance/mixed-perf/mixed-perf.component.html b/apps/docs/src/app/containers/performance/mixed-perf/mixed-perf.component.html index 4645f29..814ba3b 100644 --- a/apps/docs/src/app/containers/performance/mixed-perf/mixed-perf.component.html +++ b/apps/docs/src/app/containers/performance/mixed-perf/mixed-perf.component.html @@ -4,9 +4,7 @@

React Rendered Dots

- +