@devsym/graph-toolkit-react 1.0.0-next.8 → 1.0.0-next.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +2 -0
- package/dist/components/PeoplePicker/PeoplePicker.d.ts +24 -0
- package/dist/components/PeoplePicker/PeoplePicker.d.ts.map +1 -0
- package/dist/components/PeoplePicker/PeoplePicker.types.d.ts +57 -0
- package/dist/components/PeoplePicker/PeoplePicker.types.d.ts.map +1 -0
- package/dist/components/PeoplePicker/index.d.ts +6 -0
- package/dist/components/PeoplePicker/index.d.ts.map +1 -0
- package/dist/hooks/usePeopleSearch.d.ts +37 -0
- package/dist/hooks/usePeopleSearch.d.ts.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -1
- package/dist/index.mjs +979 -222
- package/dist/providers/IPersonDataProvider.d.ts +49 -1
- package/dist/providers/IPersonDataProvider.d.ts.map +1 -1
- package/dist/providers/MockProvider.d.ts +3 -2
- package/dist/providers/MockProvider.d.ts.map +1 -1
- package/dist/providers/MsalBrowserProvider.d.ts +12 -0
- package/dist/providers/MsalBrowserProvider.d.ts.map +1 -1
- package/package.json +3 -2
- package/readme.md +10 -12
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Person data provider interface for fetching user information, presence, and photos
|
|
2
|
+
* Person data provider interface for fetching user information, presence, and photos,
|
|
3
|
+
* and optionally searching for people.
|
|
3
4
|
*/
|
|
4
5
|
import { Presence, User } from '@microsoft/microsoft-graph-types';
|
|
5
6
|
import { IProvider } from './IProvider';
|
|
@@ -60,4 +61,51 @@ export interface IPersonDataProvider {
|
|
|
60
61
|
* @returns True if the provider implements IPersonDataProvider
|
|
61
62
|
*/
|
|
62
63
|
export declare const isPersonDataProvider: (provider: IProvider | null) => provider is IProvider & IPersonDataProvider;
|
|
64
|
+
/**
|
|
65
|
+
* Result item returned by a people search operation
|
|
66
|
+
*/
|
|
67
|
+
export interface PeopleSearchResult {
|
|
68
|
+
/**
|
|
69
|
+
* The unique identifier for the person
|
|
70
|
+
*/
|
|
71
|
+
id: string;
|
|
72
|
+
/**
|
|
73
|
+
* The person's display name
|
|
74
|
+
*/
|
|
75
|
+
displayName?: string | null;
|
|
76
|
+
/**
|
|
77
|
+
* The person's primary mail address
|
|
78
|
+
*/
|
|
79
|
+
mail?: string | null;
|
|
80
|
+
/**
|
|
81
|
+
* The person's user principal name
|
|
82
|
+
*/
|
|
83
|
+
userPrincipalName?: string | null;
|
|
84
|
+
/**
|
|
85
|
+
* The person's job title
|
|
86
|
+
*/
|
|
87
|
+
jobTitle?: string | null;
|
|
88
|
+
/**
|
|
89
|
+
* The department the person belongs to
|
|
90
|
+
*/
|
|
91
|
+
department?: string | null;
|
|
92
|
+
}
|
|
93
|
+
/**
|
|
94
|
+
* Optional interface that providers can implement to support people search
|
|
95
|
+
*/
|
|
96
|
+
export interface IPeopleSearchProvider {
|
|
97
|
+
/**
|
|
98
|
+
* Search for people matching the given query string
|
|
99
|
+
* @param query - The search query (display name, email, or UPN fragment)
|
|
100
|
+
* @param maxResults - Maximum number of results to return (default: 10)
|
|
101
|
+
* @returns Promise resolving to an array of matching people
|
|
102
|
+
*/
|
|
103
|
+
searchPeople(query: string, maxResults?: number): Promise<PeopleSearchResult[]>;
|
|
104
|
+
}
|
|
105
|
+
/**
|
|
106
|
+
* Type guard to check if a provider implements the IPeopleSearchProvider interface
|
|
107
|
+
* @param provider - The provider to check
|
|
108
|
+
* @returns True if the provider implements IPeopleSearchProvider
|
|
109
|
+
*/
|
|
110
|
+
export declare const isPeopleSearchProvider: (provider: IProvider | null) => provider is IProvider & IPeopleSearchProvider;
|
|
63
111
|
//# sourceMappingURL=IPersonDataProvider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IPersonDataProvider.d.ts","sourceRoot":"","sources":["../../src/providers/IPersonDataProvider.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"IPersonDataProvider.d.ts","sourceRoot":"","sources":["../../src/providers/IPersonDataProvider.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC;;OAEG;IACH,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,aAAa,CAAC,OAAO,EAAE,yBAAyB,GAAG,OAAO,CAAC,0BAA0B,CAAC,CAAC;CACxF;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAC/B,UAAU,SAAS,GAAG,IAAI,KACzB,QAAQ,IAAI,SAAS,GAAG,mBAM1B,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC;;;;;OAKG;IACH,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC;CACjF;AAED;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,GACjC,UAAU,SAAS,GAAG,IAAI,KACzB,QAAQ,IAAI,SAAS,GAAG,qBAM1B,CAAC"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
* MockProvider - simple in-memory provider for development and tests
|
|
3
3
|
*/
|
|
4
4
|
import { IProvider, ProviderState } from './IProvider';
|
|
5
|
-
import { IPersonDataProvider, ProviderPersonDataRequest, ProviderPersonDataResponse } from './IPersonDataProvider';
|
|
6
|
-
export declare class MockProvider implements IProvider, IPersonDataProvider {
|
|
5
|
+
import { IPersonDataProvider, IPeopleSearchProvider, PeopleSearchResult, ProviderPersonDataRequest, ProviderPersonDataResponse } from './IPersonDataProvider';
|
|
6
|
+
export declare class MockProvider implements IProvider, IPersonDataProvider, IPeopleSearchProvider {
|
|
7
7
|
private state;
|
|
8
8
|
private listeners;
|
|
9
9
|
constructor(options?: {
|
|
@@ -12,6 +12,7 @@ export declare class MockProvider implements IProvider, IPersonDataProvider {
|
|
|
12
12
|
});
|
|
13
13
|
getAccessToken(): Promise<string>;
|
|
14
14
|
getPersonData(request: ProviderPersonDataRequest): Promise<ProviderPersonDataResponse>;
|
|
15
|
+
searchPeople(query: string, maxResults?: number): Promise<PeopleSearchResult[]>;
|
|
15
16
|
login(): Promise<void>;
|
|
16
17
|
logout(): Promise<void>;
|
|
17
18
|
getState(): ProviderState;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MockProvider.d.ts","sourceRoot":"","sources":["../../src/providers/MockProvider.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EACL,mBAAmB,EACnB,yBAAyB,EACzB,0BAA0B,EAC3B,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"MockProvider.d.ts","sourceRoot":"","sources":["../../src/providers/MockProvider.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EACL,mBAAmB,EACnB,qBAAqB,EACrB,kBAAkB,EAClB,yBAAyB,EACzB,0BAA0B,EAC3B,MAAM,uBAAuB,CAAC;AAyF/B,qBAAa,YAAa,YAAW,SAAS,EAAE,mBAAmB,EAAE,qBAAqB;IACxF,OAAO,CAAC,KAAK,CAA8B;IAC3C,OAAO,CAAC,SAAS,CAAuB;gBAC5B,OAAO,CAAC,EAAE;QAAE,UAAU,CAAC,EAAE,OAAO,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE;IAMnE,cAAc,IAAI,OAAO,CAAC,MAAM,CAAC;IAQ3B,aAAa,CAAC,OAAO,EAAE,yBAAyB,GAAG,OAAO,CAAC,0BAA0B,CAAC;IA+BtF,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,SAAK,GAAG,OAAO,CAAC,kBAAkB,EAAE,CAAC;IAe3E,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IAKtB,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAK7B,QAAQ,IAAI,aAAa;IAIzB,cAAc,CAAC,OAAO,EAAE,MAAM,IAAI,GAAG,IAAI;IAIzC,yBAAyB,CAAC,OAAO,EAAE,MAAM,IAAI,GAAG,IAAI;IAIpD,OAAO,CAAC,IAAI;CASb;AAED,eAAO,MAAM,0BAA0B,oBAA+C,CAAC"}
|
|
@@ -3,6 +3,18 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import type { IPublicClientApplication } from '@azure/msal-browser';
|
|
5
5
|
import { IProvider, ProviderState } from './IProvider';
|
|
6
|
+
/**
|
|
7
|
+
* Error indicating that an interactive redirect has been initiated and token acquisition
|
|
8
|
+
* will continue after navigation completes.
|
|
9
|
+
*/
|
|
10
|
+
export declare class RedirectInProgressError extends Error {
|
|
11
|
+
/**
|
|
12
|
+
* Creates a new instance of RedirectInProgressError.
|
|
13
|
+
*
|
|
14
|
+
* @param message - A human-readable description of the redirect state.
|
|
15
|
+
*/
|
|
16
|
+
constructor(message: string);
|
|
17
|
+
}
|
|
6
18
|
export declare class MsalBrowserProvider implements IProvider {
|
|
7
19
|
private readonly msalInstance;
|
|
8
20
|
private readonly defaultScopes;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MsalBrowserProvider.d.ts","sourceRoot":"","sources":["../../src/providers/MsalBrowserProvider.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,KAAK,EAAe,wBAAwB,
|
|
1
|
+
{"version":3,"file":"MsalBrowserProvider.d.ts","sourceRoot":"","sources":["../../src/providers/MsalBrowserProvider.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,KAAK,EAAe,wBAAwB,EAAkC,MAAM,qBAAqB,CAAC;AACjH,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEvD;;;GAGG;AACH,qBAAa,uBAAwB,SAAQ,KAAK;IAChD;;;;OAIG;gBACS,OAAO,EAAE,MAAM;CAI5B;AAED,qBAAa,mBAAoB,YAAW,SAAS;IACnD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA2B;IACxD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAW;IACzC,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,KAAK,CAA4B;IACzC,OAAO,CAAC,SAAS,CAAyB;gBAE9B,YAAY,EAAE,wBAAwB,EAAE,aAAa,EAAE,MAAM,EAAE;IAKrE,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAuB3B,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IAKtB,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAWvB,cAAc,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC;IA8BxD,QAAQ,IAAI,aAAa;IAIzB,cAAc,CAAC,OAAO,EAAE,MAAM,IAAI,GAAG,IAAI;IAIzC,yBAAyB,CAAC,OAAO,EAAE,MAAM,IAAI,GAAG,IAAI;IAIpD,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,IAAI;CASb"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@devsym/graph-toolkit-react",
|
|
3
|
-
"version": "1.0.0-next.
|
|
3
|
+
"version": "1.0.0-next.9",
|
|
4
4
|
"description": "React components for Microsoft Graph powered by Fluent UI",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -69,13 +69,14 @@
|
|
|
69
69
|
"@microsoft/microsoft-graph-types": "^2.40.0"
|
|
70
70
|
},
|
|
71
71
|
"devDependencies": {
|
|
72
|
-
"@changesets/cli": "^2.29.7",
|
|
73
72
|
"@azure/msal-browser": "^5.2.0",
|
|
73
|
+
"@changesets/cli": "^2.29.7",
|
|
74
74
|
"@fluentui/react-components": "^9.72.6",
|
|
75
75
|
"@storybook/addon-a11y": "^10.0.6",
|
|
76
76
|
"@storybook/addon-docs": "^10.0.6",
|
|
77
77
|
"@storybook/addon-links": "^10.0.6",
|
|
78
78
|
"@storybook/react-vite": "^10.0.6",
|
|
79
|
+
"@testing-library/dom": "^10.4.1",
|
|
79
80
|
"@testing-library/react": "^16.3.0",
|
|
80
81
|
"@types/react": "^18.2.0",
|
|
81
82
|
"@types/react-dom": "^18.2.0",
|
package/readme.md
CHANGED
|
@@ -5,18 +5,18 @@
|
|
|
5
5
|
<h4 align="center">Modern React Components for <a href="https://graph.microsoft.com">Microsoft Graph</a> powered by <a href="https://react.fluentui.dev/">Fluent UI</a></h4>
|
|
6
6
|
|
|
7
7
|
<p align="center">
|
|
8
|
-
<img src="https://img.shields.io/badge/alpha-0.1.0-orange" alt="Alpha Release">
|
|
8
|
+
<a href="https://www.npmjs.com/package/@devsym/graph-toolkit-react"><img src="https://img.shields.io/badge/alpha-0.1.0-orange" alt="Alpha Release"></a>
|
|
9
9
|
<img src="https://img.shields.io/badge/React-18%2F19-blue" alt="React 18/19">
|
|
10
10
|
<img src="https://img.shields.io/badge/Fluent_UI-9.72-purple" alt="Fluent UI 9">
|
|
11
11
|
<img src="https://img.shields.io/badge/TypeScript-5.9-blue" alt="TypeScript 5.9">
|
|
12
12
|
</p>
|
|
13
13
|
|
|
14
14
|
<h3 align="center">
|
|
15
|
-
<a href="
|
|
16
|
-
<a href="
|
|
17
|
-
<a href="
|
|
18
|
-
<a href="
|
|
19
|
-
<a href="
|
|
15
|
+
<a href="#-getting-started">Get Started</a> •
|
|
16
|
+
<a href="#-migration-from-mgt">Migration</a> •
|
|
17
|
+
<a href="#-agent-quick-reference">Agent Quick Reference</a> •
|
|
18
|
+
<a href="#-storybook">Storybook</a> •
|
|
19
|
+
<a href="#-contribute">Contribute</a>
|
|
20
20
|
</h3>
|
|
21
21
|
|
|
22
22
|
## 🎯 Project Vision
|
|
@@ -52,7 +52,6 @@ npm install @devsym/graph-toolkit-react
|
|
|
52
52
|
| ------- | ------- | ----------- |
|
|
53
53
|
| `@devsym/graph-toolkit-react` | `0.1.0-alpha.1` | React components for Microsoft Graph powered by Fluent UI |
|
|
54
54
|
|
|
55
|
-
<a id="migration-from-mgt"></a>
|
|
56
55
|
## 🔄 Migration from MGT
|
|
57
56
|
|
|
58
57
|
For migration from Microsoft Graph Toolkit (including Teams-hosted scenarios), use [`docs/MGT_MIGRATION.md`](./docs/MGT_MIGRATION.md).
|
|
@@ -64,7 +63,6 @@ The guide includes:
|
|
|
64
63
|
- Teams-specific migration section (`TeamsHostedProvider` + backend token exchange)
|
|
65
64
|
- Common migration pitfalls and validation checklist
|
|
66
65
|
|
|
67
|
-
<a id="agent-quick-reference"></a>
|
|
68
66
|
## 🤖 Agent Quick Reference
|
|
69
67
|
|
|
70
68
|
If you are using a coding agent (Copilot/Codex/Claude/etc.), use the scenario-first reference in [`AGENTS.md`](./AGENTS.md).
|
|
@@ -132,7 +130,6 @@ For full manual override, use React render callbacks as the replacement for MGT
|
|
|
132
130
|
```
|
|
133
131
|
|
|
134
132
|
|
|
135
|
-
<a id="getting-started"></a>
|
|
136
133
|
## 🚀 Getting Started
|
|
137
134
|
|
|
138
135
|
### Prerequisites
|
|
@@ -224,6 +221,8 @@ function App() {
|
|
|
224
221
|
}
|
|
225
222
|
```
|
|
226
223
|
|
|
224
|
+
The provider uses redirect flow. Set the redirect URI to your app's origin and register it as a **Single-page application (SPA)** platform in Azure AD.
|
|
225
|
+
|
|
227
226
|
#### `TeamsHostedProvider` quick start (consumer-managed Teams login)
|
|
228
227
|
|
|
229
228
|
Use this when your app is hosted in Microsoft Teams and your app code already handles TeamsJS auth for multiple APIs.
|
|
@@ -288,7 +287,6 @@ class MyAuthProvider implements IProvider {
|
|
|
288
287
|
}
|
|
289
288
|
```
|
|
290
289
|
|
|
291
|
-
<a id="storybook"></a>
|
|
292
290
|
## 📚 Storybook
|
|
293
291
|
|
|
294
292
|
Explore all components interactively in our Storybook documentation:
|
|
@@ -374,12 +372,11 @@ stories/
|
|
|
374
372
|
- ✅ Sample app with MSAL sign-in and `Person` (`userId="me"`) at `samples/react-msal-sample`
|
|
375
373
|
|
|
376
374
|
**Next Steps**:
|
|
377
|
-
- Additional components (PeoplePicker, PersonCard, Login)
|
|
375
|
+
- Additional components (PeoplePicker, PersonCard, Login) — see [`docs/COMPONENT_ROADMAP.md`](./docs/COMPONENT_ROADMAP.md) for the full ranked list
|
|
378
376
|
- Expanded provider guidance and production auth examples
|
|
379
377
|
- Comprehensive test coverage
|
|
380
378
|
- First stable release (1.0.0)
|
|
381
379
|
|
|
382
|
-
<a id="contribute"></a>
|
|
383
380
|
## 🤝 Contribute
|
|
384
381
|
|
|
385
382
|
This **community-driven project** provides React developers with components for Microsoft Graph. Contributions are welcome!
|
|
@@ -412,6 +409,7 @@ MIT License - see [LICENSE](LICENSE) for details.
|
|
|
412
409
|
|
|
413
410
|
- **Fluent UI**: [react.fluentui.dev](https://react.fluentui.dev/)
|
|
414
411
|
- **Microsoft Graph**: [graph.microsoft.com](https://graph.microsoft.com)
|
|
412
|
+
- **Component Roadmap**: [docs/COMPONENT_ROADMAP.md](./docs/COMPONENT_ROADMAP.md)
|
|
415
413
|
- **Changelog**: [CHANGELOG.md](CHANGELOG.md)
|
|
416
414
|
- **Publishing**: [PUBLISHING.md](PUBLISHING.md)
|
|
417
415
|
|