Skip to content

Commit 841f6d4

Browse files
benfeelybenfeely
committed
Working on lib packages for npm.
1 parent 7639cc9 commit 841f6d4

File tree

15 files changed

+261
-65
lines changed

15 files changed

+261
-65
lines changed

‎CONTRIBUTING.md‎

Whitespace-only changes.

‎README.1.md‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
# React support for Angular
2+
3+
TODO: Add links to badges here.
4+
5+
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.
6+
7+
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.
8+
9+
#### Quick links
10+
[Documentation, demos, and guides][ard] |
11+
[Contributing](https://github.com/benfeely/angular-react/blob/master/CONTRIBUTING.md) |
12+
[Plunker Template](https://goo.gl/uDmqyY) |
13+
[StackBlitz Template](https://goo.gl/wwnhMV)
14+
15+
### Typical Use Cases
16+
- Use React component libraries with Angular
17+
- Incrementally rewrite an Angular application into React (moving from atomic leaf nodes upward into full features/pages until the entire app is re-written)
18+
19+
### Getting started
20+
21+
See our [Getting Started Guide][getting-started]
22+
if you're building your first project with Angular-React.
23+
24+
Check out our [directory of design documents](https://github.com/angular/material2/wiki/Design-doc-directory)
25+
for more insight into our process.
26+
27+
If you'd like to contribute, you must follow our [contributing guidelines](https://github.com/angular/material2/blob/master/CONTRIBUTING.md).
28+
You can look through the issues (which should be up-to-date on who is working on which features
29+
and which pieces are blocked) and make a comment.
30+
Also see our [`help wanted`](https://github.com/angular/material2/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22)
31+
label.
32+
33+
High level stuff planned for Q2 2018 (April - June):
34+
* Implementing cdk virtual-scroll
35+
* Implementing cdk drag-and-drop
36+
* Ongoing migration to bazel
37+
* Table feature improvements
38+
* Improve docs for cdk
39+
* Accessibility improvements for select, autocomplete, button-toggle, and chips.
40+
41+
42+
#### Available features
43+
44+
| Feature | Notes | Docs |
45+
|------------------|--------------------------------------------------------|--------------|
46+
| autocomplete | | [Docs][24] |
47+
| button | | [Docs][1] |
48+
| button-toggle | | [Docs][15] |
49+
| cards | | [Docs][2] |
50+
| checkbox | | [Docs][3] |
51+
| chips | | [Docs][26] |
52+
| data-table | More features coming in 2018 | [Docs][28] |
53+
| datepicker | | [Docs][25] |
54+
| dialog | | [Docs][22] |
55+
| divider | | [Docs][35] |
56+
| expansion-panel | | [Docs][32] |
57+
| grid-list | | [Docs][9] |
58+
| icon | | [Docs][10] |
59+
| input | | [Docs][5] |
60+
| list | Action list planned 2018 | [Docs][8] |
61+
| menu | | [Docs][17] |
62+
| paginator | | [Docs][29] |
63+
| progress-bar | | [Docs][12] |
64+
| progress-spinner | | [Docs][11] |
65+
| radio | | [Docs][4] |
66+
| ripples | | [Docs][19] |
67+
| select | | [Docs][23] |
68+
| sidenav | | [Docs][6] |
69+
| slide-toggle | | [Docs][14] |
70+
| slider | | [Docs][16] |
71+
| snackbar / toast | | [Docs][21] |
72+
| sort-header | | [Docs][30] |
73+
| stepper | | [Docs][33] |
74+
| tabs | | [Docs][13] |
75+
| textarea | | [Docs][5] |
76+
| toolbar | | [Docs][7] |
77+
| tooltip | | [Docs][18] |
78+
| ---------------- | ------------------------------------------------------ | ------------ |
79+
| theming | | [Guide][20] |
80+
| typography | | [Guide][27] |
81+
| layout | See [angular/flex-layout][lay_rp] | [Wiki][0] |
82+
| cdk | | [Docs][34] |
83+
84+
85+
#### In progress, planned, and non-planned features
86+
87+
| Feature | Status | Docs | Issue |
88+
|------------------|-------------------------------------|--------------|----------------|
89+
| tree | Releasing with 6.0.0 | - | [#3175][3175] |
90+
| sticky-header | In-progress, planned Q2 2018 | - | [#474][0474] |
91+
| virtual-repeat | Prototyping, planned Q2 2018 | - | [#823][0823] |
92+
| badge | Releasing with 6.0.0 | - | [#3085][3058] |
93+
| fab speed-dial | Not started, not planned | - | [#860][0860] |
94+
| fab toolbar | Not started, not planned | - | - |
95+
| bottom-sheet | Releasing with 6.0.0 | - | [#8113][8113] |
96+
| bottom-nav | Not started, not planned | - | [#408][0408] |
97+
98+
[0]: https://github.com/angular/flex-layout/wiki
99+
[1]: https://material.angular.io/components/button/overview
100+
[2]: https://material.angular.io/components/card/overview
101+
[3]: https://material.angular.io/components/checkbox/overview
102+
[4]: https://material.angular.io/components/radio/overview
103+
[5]: https://material.angular.io/components/input/overview
104+
[6]: https://material.angular.io/components/sidenav/overview
105+
[7]: https://material.angular.io/components/toolbar/overview
106+
[8]: https://material.angular.io/components/list/overview
107+
[9]: https://material.angular.io/components/grid-list/overview
108+
[10]: https://material.angular.io/components/icon/overview
109+
[11]: https://material.angular.io/components/progress-spinner/overview
110+
[12]: https://material.angular.io/components/progress-bar/overview
111+
[13]: https://material.angular.io/components/tabs/overview
112+
[14]: https://material.angular.io/components/slide-toggle/overview
113+
[15]: https://material.angular.io/components/button-toggle/overview
114+
[16]: https://material.angular.io/components/slider/overview
115+
[17]: https://material.angular.io/components/menu/overview
116+
[18]: https://material.angular.io/components/tooltip/overview
117+
[19]: https://github.com/angular/material2/blob/master/src/lib/core/ripple/ripple.md
118+
[20]: https://material.angular.io/guide/theming
119+
[21]: https://material.angular.io/components/snack-bar/overview
120+
[22]: https://material.angular.io/components/dialog/overview
121+
[23]: https://material.angular.io/components/select/overview
122+
[24]: https://material.angular.io/components/autocomplete/overview
123+
[25]: https://material.angular.io/components/datepicker/overview
124+
[26]: https://material.angular.io/components/chips/overview
125+
[27]: https://material.angular.io/guide/typography
126+
[28]: https://material.angular.io/components/table/overview
127+
[29]: https://material.angular.io/components/paginator/overview
128+
[30]: https://material.angular.io/components/sort/overview
129+
[31]: https://tina-material-tree.firebaseapp.com/simple-tree
130+
[32]: https://material.angular.io/components/expansion/overview
131+
[33]: https://material.angular.io/components/stepper/overview
132+
[34]: https://material.angular.io/cdk/categories
133+
[35]: https://material.angular.io/components/divider/overview
134+
135+
[0107]: https://github.com/angular/material2/issues/107
136+
[0119]: https://github.com/angular/material2/issues/119
137+
[0108]: https://github.com/angular/material2/issues/108
138+
[0114]: https://github.com/angular/material2/issues/114
139+
[0115]: https://github.com/angular/material2/issues/115
140+
[0118]: https://github.com/angular/material2/issues/118
141+
[0546]: https://github.com/angular/material2/issues/546
142+
[0117]: https://github.com/angular/material2/issues/117
143+
[0120]: https://github.com/angular/material2/issues/120
144+
[0123]: https://github.com/angular/material2/issues/123
145+
[0205]: https://github.com/angular/material2/issues/205
146+
[0860]: https://github.com/angular/material2/issues/860
147+
[0408]: https://github.com/angular/material2/issues/408
148+
[0508]: https://github.com/angular/material2/issues/508
149+
[0823]: https://github.com/angular/material2/issues/823
150+
[0581]: https://github.com/angular/material2/issues/581
151+
[3175]: https://github.com/angular/material2/issues/3175
152+
[4191]: https://github.com/angular/material2/pull/4191
153+
[0995]: https://github.com/angular/material2/pull/995
154+
[0474]: https://github.com/angular/material2/pull/474
155+
[8113]: https://github.com/angular/material2/issues/8113
156+
[3058]: https://github.com/angular/material2/issues/3058
157+
158+
[ard]: https://benfeely.github.io/angular-react
159+
[getting-started]: https://benfeely.github.io/angular-react/docs/getting-started
160+
[fab]: https://developer.microsoft.com/en-us/fabric
161+
162+
163+
## The goal of Angular Material
164+
Our goal is to build a set of high-quality UI components built with Angular and TypeScript,
165+
following the Material Design spec. These
166+
components will serve as an example of how to write Angular code following best practices.
167+
168+
### What do we mean by "high-quality"?
169+
* Internationalized and accessible so that all users can use them.
170+
* Straightforward APIs that don't confuse developers.
171+
* Behave as expected across a wide variety of use-cases without bugs.
172+
* Behavior is well-tested with both unit and integration tests.
173+
* Customizable within the bounds of the Material Design specification.
174+
* Performance cost is minimized.
175+
* Code is clean and well-documented to serve as an example for Angular devs.
176+
177+
## Browser and screen reader support
178+
Angular Material supports the most recent two versions of all major browsers:
179+
Chrome (including Android), Firefox, Safari (including iOS), and IE11 / Edge
180+
181+
We also aim for great user experience with the following screen readers:
182+
* NVDA and JAWS with IE / FF / Chrome (on Windows).
183+
* VoiceOver with Safari on iOS and Safari / Chrome on OSX.
184+
* TalkBack with Chrome on Android.

‎README.md‎

Lines changed: 3 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,5 @@
1-
# AngularReact
1+
# React support for Angular
22

3-
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) using [Nrwl Nx](https://nrwl.io/nx).
3+
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.
44

5-
## Quick Start & Documentation
6-
7-
[Watch a 5-minute video on how to get started with Nx.](http://nrwl.io/nx)
8-
9-
## Generate your first application
10-
11-
Run `ng generate app myapp` to generate an application. When using Nx, you can create multiple applications and libraries in the same CLI workspace. Read more [here](http://nrwl.io/nx).
12-
13-
## Development server
14-
15-
Run `ng serve --app=myapp` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
16-
17-
## Code scaffolding
18-
19-
Run `ng generate component component-name --app=myapp` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
20-
21-
## Build
22-
23-
Run `ng build --app=myapp` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
24-
25-
## Running unit tests
26-
27-
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
28-
29-
## Running end-to-end tests
30-
31-
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
32-
Before running the tests make sure you are serving the app via `ng serve`.
33-
34-
## Further help
35-
36-
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
5+
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.

‎libs/core/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Please see README.md at repository root.

‎libs/core/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"$schema": "../../node_modules/ng-packagr/package.schema.json",
33
"name": "@angular-react/core",
4-
"version": "0.1.5",
4+
"version": "0.1.8",
55
"ngPackage": {
66
"lib": {
77
"entryFile": "index.ts",
@@ -31,14 +31,14 @@
3131
],
3232
"private": false,
3333
"devDependencies": {
34+
"@types/react-dom": "^16.0.4",
35+
"@types/react": "^16.3.4"
3436
},
3537
"peerDependencies": {
3638
"@angular/compiler": "^5.2.7",
3739
"@angular/core": "^5.2.7",
3840
"@angular/platform-browser-dynamic": "^5.2.7",
3941
"@angular/platform-browser": "^5.2.7",
40-
"@types/react-dom": "^16.0.4",
41-
"@types/react": "^16.3.4",
4242
"react-dom": "^16.3.1",
4343
"react": "^16.3.1"
4444
}

‎libs/fabric/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
TODO: Add documentation.

‎libs/fabric/package.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,15 @@
3434
],
3535
"private": false,
3636
"devDependencies": {
37+
"@types/react-dom": "^16.0.4",
38+
"@types/react": "^16.3.4"
3739
},
3840
"peerDependencies": {
39-
"@angular-react/core": "^0.1.4",
41+
"@angular-react/core": "^0.1.0",
4042
"@angular/common": "^5.2.7",
4143
"@angular/core": "^5.2.7",
42-
"@types/react-dom": "^16.0.4",
43-
"@types/react": "^16.3.4",
44+
"@angular/platform-browser-dynamic": "^5.2.7",
45+
"@angular/platform-browser": "^5.2.7",
4446
"office-ui-fabric-react": "^5.78.0",
4547
"react-dom": "^16.3.1",
4648
"react": "^16.3.1"

‎libs/fabric/src/button/button.component.css‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎libs/fabric/src/button/button.component.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// tslint:disable:no-input-rename
33
// tslint:disable:no-output-rename
44
// tslint:disable:use-host-property-decorator
5+
// tslint:disable:no-output-on-prefix
56

67
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
78

@@ -18,11 +19,11 @@ import { IButtonProps, DefaultButton } from 'office-ui-fabric-react/lib/Button';
1819
[primary]="primary"
1920
[disabled]="disabled"
2021
[text]="text"
21-
(onClick)="onClick($event)"></DefaultButton>
22+
(onClick)="onClick.emit($event)"></DefaultButton>
2223
`,
23-
styleUrls: ['./button.component.css'],
2424
styles: [
2525
'react-renderer',
26+
':host { display: inline-block; background: red; }' // TODO: this isn't working. Problem with react-renderer.
2627
],
2728
changeDetection: ChangeDetectionStrategy.OnPush,
2829
host: { 'class': 'fab-button' }
@@ -33,7 +34,6 @@ export class FabButtonComponent {
3334
@Input() primary = true;
3435
@Input('label') text = '';
3536

36-
@Output('onClick') click: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
37-
onClick = ev => this.click.emit(ev as any);
37+
@Output() onClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
3838

3939
}

‎libs/semantic-ui/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
TODO: Add documentation.

0 commit comments

Comments
 (0)