@devsym/graph-toolkit-react 1.0.0-next.10 → 1.0.0-next.11

package/dist/providers/MockProvider.d.ts.map

@@ -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,qBAAqB,EACrB,kBAAkB,EAClB,yBAAyB,EACzB,0BAA0B,EAC3B,MAAM,uBAAuB,CAAC;AA4F/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"}
+{"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;AA4F/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;IAyCtF,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"}

package/dist/utils/graph.d.ts

@@ -11,4 +11,21 @@ export declare const createGraphClient: (provider: IProvider) => Client;
  * Extract initials from a display name
  */
 export declare const getInitials: (displayName?: string) => string;
+/**
+ * Convert a Microsoft Graph photo response into a data URL string when possible.
+ *
+ * The Graph SDK may return a string, `Blob`, or `ArrayBuffer` depending on the
+ * environment and request adapter. Unsupported response shapes resolve to `null`.
+ *
+ * @param photoResponse - Raw response returned from the Graph photo endpoint
+ * @returns A data URL string or `null` when the response cannot be converted
+ */
+export declare const photoResponseToDataUrl: (photoResponse: unknown) => Promise<string | null>;
+/**
+ * Encode a dynamic Microsoft Graph path segment for safe interpolation into request URLs.
+ *
+ * @param value - Raw path segment value such as a user identifier or group ID
+ * @returns The trimmed and URL-encoded path segment
+ */
+export declare const encodeGraphPathSegment: (value: string) => string;
 //# sourceMappingURL=graph.d.ts.map

package/dist/utils/graph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"graph.d.ts","sourceRoot":"","sources":["../../src/utils/graph.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,UAAU,SAAS,KAAG,MAWvD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,cAAc,MAAM,KAAG,MASlD,CAAC"}
+{"version":3,"file":"graph.d.ts","sourceRoot":"","sources":["../../src/utils/graph.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,UAAU,SAAS,KAAG,MAWvD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,cAAc,MAAM,KAAG,MASlD,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,sBAAsB,GAAU,eAAe,OAAO,KAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CA0B1F,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,GAAI,OAAO,MAAM,KAAG,MAA0C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devsym/graph-toolkit-react",
-  "version": "1.0.0-next.10",
+  "version": "1.0.0-next.11",
   "description": "React components for Microsoft Graph powered by Fluent UI",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/readme.md

@@ -129,6 +129,34 @@ For full manual override, use React render callbacks as the replacement for MGT
 />
 ```
 
+### People Component
+Display a compact strip of people using Fluent UI `AvatarGroup`.
+
+```tsx
+import { People } from '@devsym/graph-toolkit-react';
+
+<People showMax={4} size={40} />
+```
+
+You can also provide people directly or resolve specific users:
+
+```tsx
+<People
+  userIds={['me', 'user@contoso.com']}
+  showMax={2}
+  showPresence
+/>
+```
+
+```tsx
+<People
+  people={[
+    { id: 'adele', displayName: 'Adele Vance', mail: 'adelev@contoso.com' },
+    { id: 'alex', displayName: 'Alex Wilber', mail: 'alexw@contoso.com' },
+  ]}
+/>
+```
+
 
 ## 🚀 Getting Started
 
@@ -181,6 +209,8 @@ function App() {
 }
 ```
 
+For a complete browser-hosted example app, try the deployed [React MSAL sample](https://gentle-beach-0f6fe2903.2.azurestaticapps.net) or review [`samples/react-msal-sample/README.md`](./samples/react-msal-sample/README.md), which wires `MsalBrowserProvider` into `GraphProvider` and demonstrates `Person`, `People`, and `PeoplePicker`.
+
 ### Authentication Providers
 
 The library uses a provider pattern for authentication:
@@ -272,7 +302,9 @@ Use explicit mode selection in your app:
 | ------- | ------------------------ | ----- |
 | Load current user profile (`userId="me"`) | `User.Read` | Required for basic person data (`displayName`, `mail`, etc.) |
 | Load another user by id/upn (`userId="{id}"`) | `User.ReadBasic.All` | May require admin consent depending on tenant policy |
-| Load PeoplePicker focus suggestions | `People.Read` | Required for the initial `/me/people` suggestions shown before typing |
+| Load `People` default suggestions | `User.ReadBasic.All` | Used for the default `/users` directory list when no explicit people source is provided |
+| Load `People` group members (`groupId`) | `GroupMember.Read.All` | Required only when resolving direct group membership |
+| Load PeoplePicker focus suggestions | `User.ReadBasic.All` | Uses the initial `/users` directory list shown before typing |
 | Show presence (`showPresence`) | `Presence.Read` | If not granted, person still renders without presence |
 | Load profile photo (`fetchImage`) | `User.Read` | Falls back to initials if photo is unavailable |
 
@@ -340,10 +372,13 @@ npm run build-storybook
 ```
 src/
 ├── components/
-│   └── Person/
-│       ├── Person.tsx          # Component implementation
-│       ├── Person.types.ts     # TypeScript definitions
-│       └── __tests__/          # Component tests
+│   ├── Person/
+│   │   ├── Person.tsx          # Component implementation
+│   │   ├── Person.types.ts     # TypeScript definitions
+│   │   └── __tests__/          # Component tests
+│   └── People/
+│       ├── People.tsx          # Component implementation
+│       └── People.types.ts     # TypeScript definitions
 ├── providers/
 │   ├── IProvider.ts            # Provider interface
 │   ├── MockProvider.ts         # Development provider
@@ -351,11 +386,14 @@ src/
 ├── hooks/
 │   ├── useGraphClient.ts       # Graph client hook
 │   ├── usePersonData.ts        # Person data fetching
+│   ├── usePeopleList.ts        # People list fetching
 │   └── useProvider.ts          # Provider access
 └── index.ts                    # Public API
 
 stories/
-└── Person.stories.tsx          # Storybook stories (19 examples)
+├── Person.stories.tsx          # Person stories
+├── People.stories.tsx          # People stories
+└── PeoplePicker.stories.tsx    # PeoplePicker stories
 ```
 
 ## 🎯 Current Status
@@ -365,15 +403,17 @@ stories/
 - ✅ Repository restructured from monorepo to single package
 - ✅ Provider infrastructure with MockProvider for development
 - ✅ Person component using Fluent UI Persona
+- ✅ People component using Fluent UI AvatarGroup
+- ✅ PeoplePicker component using Fluent UI TagPicker
 - ✅ Full Persona configuration support (textAlignment, textPosition, sizing)
 - ✅ Build system (ESM + CJS + TypeScript declarations)
 - ✅ Storybook documentation and GitHub Pages deployment
 - ✅ CI/CD with GitHub Actions
 - ✅ Automatic Storybook deployment to GitHub Pages
-- ✅ Sample app with MSAL sign-in and `Person` (`userId="me"`) at `samples/react-msal-sample`
+- ✅ Sample app with MSAL sign-in and `Person`, `People`, and `PeoplePicker` demos at `samples/react-msal-sample`
 
 **Next Steps**:
-- Additional components (PeoplePicker, PersonCard, Login) — see [`docs/COMPONENT_ROADMAP.md`](./docs/COMPONENT_ROADMAP.md) for the full ranked list
+- Additional components (PersonCard, Login, Agenda) — see [`docs/COMPONENT_ROADMAP.md`](./docs/COMPONENT_ROADMAP.md) for the full ranked list
 - Expanded provider guidance and production auth examples
 - Comprehensive test coverage
 - First stable release (1.0.0)