Skip to content

Commit e3e7c8c

Browse files
update docs, remove stale documentation
1 parent b26e55e commit e3e7c8c

File tree

3 files changed

+58
-91
lines changed

3 files changed

+58
-91
lines changed

README.md

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,26 @@
11
# React support for Angular
22

3-
[![npm version](https://badge.fury.io/js/%40angular-react%2Fcore.svg)](https://www.npmjs.com/package/@angular-react/core)
4-
[![CircleCI](https://circleci.com/gh/Microsoft/angular-react.svg?style=svg)](https://circleci.com/gh/Microsoft/angular-react)
3+
[![CircleCI](https://circleci.com/gh/microsoft/angular-react.svg?style=svg)](https://circleci.com/gh/Microsoft/angular-react)
54

65
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.
76

87
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.
98

9+
## Libraries
10+
11+
@angular-react contains two separate libraries:
12+
13+
- [**core**][lib-core]: [![npm version](https://badge.fury.io/js/%40angular-react%2Fcore.svg)](https://www.npmjs.com/package/@angular-react/core)
14+
15+
Includes the Renderer and supporting logic to render Angular components with React implementations as React components.
16+
17+
- [**fabric**][lib-fab]: [![npm version](https://badge.fury.io/js/%40angular-react%2Ffabric.svg)](https://www.npmjs.com/package/@angular-react/fabric)
18+
19+
The light-weight Angular component wrappers that expose the Fabric React component API through common Angular components (including both imperative AND declarative syntax in many cases).
20+
21+
1022
### Quick links
1123

12-
[@angular-react/fabric](https://www.npmjs.com/package/@angular-react/fabric) |
1324
[Documentation, quick start, and guides][ard] |
1425
[Demo][ard-demo] |
1526
[Contributing](https://github.com/microsoft/angular-react/blob/master/CONTRIBUTING.md) |
@@ -19,24 +30,24 @@ Use of Angular-React allows consuming any React elements, but specifically Offic
1930
### Typical Use Cases
2031

2132
- Use React component libraries with Angular
22-
- Incrementally rewrite an Angular application into React (moving from atomic/leaf nodes upward into full features/pages until the entire app is re-written)
33+
- Incrementally rewrite an Angular application into React
34+
(moving from atomic/leaf nodes upward into full features/pages until the entire app is re-written)
2335

24-
## Libraries
25-
26-
- [**core**][lib-core]: Includes the Renderer and supporting logic to render Angular components with React implementations as React components.
27-
- [**fabric**][lib-fab]: The light-weight Angular component wrappers that expose the Fabric React component API through common Angular components (including both imperative AND declarative syntax in many cases).
36+
## Getting started
2837

29-
# Roadmap
38+
See a simple [StackBlitz Template](https://stackblitz.com/edit/angular-react)
3039

31-
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.
40+
# Roadmap & Support
3241

33-
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.
42+
Both the `core` and `fabric` libraries are in production use in consumer-facing applications at Microsoft. That said,
43+
we (the team that currently maintains this project) are a product team, and @angular-react is not our primary focus.
44+
We maintain this because we need it and we share it with the wider community with the hope that it will prove useful to others.
45+
Of course, we attempt to provide help when possible and we love getting pull requests for
46+
improvements/enhancement/fixes from community members. But we don't have any specific plans for the future of this project.
3447

35-
## Getting started
36-
See our [Getting Started Guide][getting-started] demo
37-
if you're building your first project with Angular-React.
48+
Please take this in to consideration when evaluating this project's suitability for your own needs.
3849

39-
See a simple [StackBlitz Template](https://stackblitz.com/edit/angular-react)
50+
## Contributing
4051

4152
If you'd like to contribute, you must follow our [contributing guidelines](https://github.com/microsoft/angular-react/blob/master/CONTRIBUTING.md).
4253
You can look through the issues (which should be up-to-date on who is working on which features and which pieces are blocked) and make a comment.
@@ -46,5 +57,5 @@ You can look through the issues (which should be up-to-date on who is working on
4657
[getting-started]: https://microsoft.github.io/angular-react/docs/getting-started
4758
[fab]: https://developer.microsoft.com/en-us/fabric
4859
[fab-c]: https://developer.microsoft.com/en-us/fabric#/components
49-
[lib-core]: https://www.npmjs.com/package/@angular-react/core
50-
[lib-fab]: https://www.npmjs.com/package/@angular-react/fabric
60+
[lib-core]: ./libs/core/README.md
61+
[lib-fab]: ./libs/fabric/README.md

libs/core/README.md

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,26 @@
1-
Please see README.md at repository root.
1+
# @angular-react/core
2+
3+
[![npm version](https://badge.fury.io/js/%40angular-react%2Fcore.svg)](https://www.npmjs.com/package/@angular-react/core)
4+
5+
This library provides the core functionality for wrapping arbitrary React components so that they can be used inside
6+
an Angular project. For an example of how it can be used, see [@angular-react/fabric](../fabric/README.md) which
7+
uses this library to expose [office-ui-fabric-react](https://github.com/OfficeDev/office-ui-fabric-react) components
8+
in Angular.
9+
10+
For more info, see the [README](../../README.md) in this repository's root.
11+
12+
#### Quick links
13+
14+
[Documentation, quick start, and guides][ard] |
15+
[Demo][ard-demo] |
16+
[Contributing](https://github.com/microsoft/angular-react/blob/master/CONTRIBUTING.md) |
17+
[StackBlitz Template](https://stackblitz.com/edit/angular-react) |
18+
19+
[ard]: https://microsoft.github.io/angular-react
20+
[ard-demo]: https://microsoft.github.io/angular-react/demo
21+
[fab]: https://developer.microsoft.com/en-us/fabric
22+
23+
24+
### Getting Started
25+
26+
`npm install @angular-react/core`

libs/fabric/README.md

Lines changed: 4 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -2,87 +2,18 @@
22

33
[![npm version](https://badge.fury.io/js/%40angular-react%2Ffabric.svg)](https://www.npmjs.com/package/@angular-react/fabric)
44

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-
5+
This library builds upon [@angular-react/core](../core/README.md) to expose
6+
[office-ui-fabric-react](https://github.com/OfficeDev/office-ui-fabric-react) components for consumption in an Angular
7+
application. For more info, see the [README](../../README.md) at this repository's root.
8+
99
#### Quick links
1010

11-
[@angular-react/core](https://www.npmjs.com/package/@angular-react/core) |
1211
[Documentation, quick start, and guides][ard] |
1312
[Demo][ard-demo] |
1413
[Contributing](https://github.com/microsoft/angular-react/blob/master/CONTRIBUTING.md) |
1514
[StackBlitz Template](https://stackblitz.com/edit/angular-react) |
1615
[Office Fabric](https://developer.microsoft.com/en-us/fabric)
1716

18-
### Typical Use Cases
19-
20-
- Use React component libraries with Angular
21-
- Incrementally rewrite an Angular application into React (moving from atomic/leaf nodes upward into full features/pages until the entire app is re-written)
22-
23-
### Getting started
24-
25-
See our [Getting Started Guide][getting-started]
26-
if you're building your first project with Angular-React.
27-
28-
If you'd like to contribute, you must follow our [contributing guidelines](https://github.com/angular/material2/blob/master/CONTRIBUTING.md).
29-
You can look through the issues (which should be up-to-date on who is working on which features and which pieces are blocked) and make a comment.
30-
31-
High level stuff planned for Q2 2018 (April - June):
32-
33-
- Extend support for Fabric Buttons
34-
- Extend support for Fabric Dialog
35-
- Additional Fabric components TBD
36-
- Table feature improvements
37-
- Improve docs
38-
39-
#### Available Fabric features
40-
41-
| Feature | Notes | Docs |
42-
| --------------- | --------------------------------------- | --------- |
43-
| breadcrumb | Beta | [Docs][0] |
44-
| button | Beta | [Docs][0] |
45-
| callout | Beta | [Docs][0] |
46-
| choice-group | Beta | [Docs][0] |
47-
| combo-box | Beta | [Docs][0] |
48-
| command-bar | Heavily tested, most scenarios covered. | [Docs][0] |
49-
| contextual-menu | Beta | [Docs][0] |
50-
| date-picker | Beta | [Docs][0] |
51-
| dialog | Beta | [Docs][1] |
52-
| divider | Beta | [Docs][0] |
53-
| grouped-list | Beta | [Docs][0] |
54-
| hover-card | Beta | [Docs][0] |
55-
| icon | Beta | [Docs][0] |
56-
| image | Beta | [Docs][0] |
57-
| link | Beta | [Docs][0] |
58-
| message-bar | Beta | [Docs][0] |
59-
| modal | Beta | [Docs][0] |
60-
| panel | Beta | [Docs][0] |
61-
| persona | Beta | [Docs][0] |
62-
| pickers | Beta | [Docs][0] |
63-
| pivot | Beta | [Docs][0] |
64-
| search-box | Beta | [Docs][0] |
65-
| shimmer | Beta | [Docs][0] |
66-
| slider | Beta | [Docs][0] |
67-
| spinner | Beta | [Docs][0] |
68-
| toggle | Beta | [Docs][0] |
69-
| tooltip | Beta | [Docs][0] |
70-
71-
#### In progress, planned, and non-planned Fabric features
72-
73-
| Feature | Status | Docs | Issue |
74-
| ---------- | ------------------------ | ---- | -------- |
75-
| bottom-nav | Not started, not planned | - | [TBD][0] |
76-
77-
[0]: https://microsoft.github.io/angular-react/docs/fabric
78-
[1]: https://microsoft.github.io/angular-react/docs/fabric
7917
[ard]: https://microsoft.github.io/angular-react
8018
[ard-demo]: https://microsoft.github.io/angular-react/demo
81-
[getting-started]: https://microsoft.github.io/angular-react/docs/getting-started
8219
[fab]: https://developer.microsoft.com/en-us/fabric
83-
84-
## The goal of Angular React
85-
86-
### What do we mean by "high-quality"?
87-
88-
## Browser and screen reader support

0 commit comments

Comments
 (0)