@devsym/graph-toolkit-react 1.0.0-next.9 → 1.1.0

package/dist/providers/IPersonDataProvider.d.ts

@@ -69,6 +69,14 @@ export interface PeopleSearchResult {
      * The unique identifier for the person
      */
     id: string;
+    /**
+     * The person's first name.
+     */
+    givenName?: string | null;
+    /**
+     * The person's last name.
+     */
+    surname?: string | null;
     /**
      * The person's display name
      */
@@ -89,6 +97,11 @@ export interface PeopleSearchResult {
      * The department the person belongs to
      */
     department?: string | null;
+    /**
+     * Optional profile photo URL for the person.
+     * When provided, UI components can render the avatar image without fetching it separately.
+     */
+    photoUrl?: string | null;
 }
 /**
  * Optional interface that providers can implement to support people search
@@ -96,7 +109,7 @@ export interface PeopleSearchResult {
 export interface IPeopleSearchProvider {
     /**
      * Search for people matching the given query string
-     * @param query - The search query (display name, email, or UPN fragment)
+     * @param query - The search query (display name, email, or UPN fragment). An empty query may return initial suggestions.
      * @param maxResults - Maximum number of results to return (default: 10)
      * @returns Promise resolving to an array of matching people
      */

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

@@ -1 +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"}
+{"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,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB;;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;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;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"}

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;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"}
+{"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;AAgH/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;IA2CtF,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/docs/assets/readme/provider-flow.svg

@@ -0,0 +1,76 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="430" viewBox="0 0 1100 430" role="img" aria-labelledby="title desc">
+  <title id="title">Graph Toolkit React provider flow</title>
+  <desc id="desc">A diagram showing React components inside GraphProvider using MockProvider, MsalBrowserProvider, TeamsHostedProvider, or a custom provider to access Microsoft Graph.</desc>
+  <defs>
+    <marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto" markerUnits="strokeWidth">
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="#64748b"/>
+    </marker>
+    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="8" stdDeviation="12" flood-color="#111827" flood-opacity="0.12"/>
+    </filter>
+  </defs>
+
+  <rect width="1100" height="430" fill="#f7f9fb"/>
+
+  <g transform="translate(58 54)">
+    <rect width="238" height="300" rx="8" fill="#ffffff" stroke="#d1d5db" filter="url(#shadow)"/>
+    <text x="26" y="42" font-family="Segoe UI, Arial, sans-serif" font-size="18" font-weight="600" fill="#111827">React application</text>
+    <text x="26" y="70" font-family="Segoe UI, Arial, sans-serif" font-size="13" fill="#4b5563">Components render normal React UI</text>
+
+    <rect x="26" y="104" width="186" height="44" rx="6" fill="#eef6ff" stroke="#b3d6f2"/>
+    <text x="48" y="132" font-family="Segoe UI, Arial, sans-serif" font-size="14" font-weight="600" fill="#0f4c81">Person</text>
+
+    <rect x="26" y="164" width="186" height="44" rx="6" fill="#eefcf7" stroke="#b7ead7"/>
+    <text x="48" y="192" font-family="Segoe UI, Arial, sans-serif" font-size="14" font-weight="600" fill="#0f6b50">People</text>
+
+    <rect x="26" y="224" width="186" height="44" rx="6" fill="#fff7ed" stroke="#fed7aa"/>
+    <text x="48" y="252" font-family="Segoe UI, Arial, sans-serif" font-size="14" font-weight="600" fill="#9a3412">PeoplePicker</text>
+  </g>
+
+  <g transform="translate(378 86)">
+    <rect width="344" height="236" rx="8" fill="#111827" filter="url(#shadow)"/>
+    <text x="28" y="44" font-family="Segoe UI, Arial, sans-serif" font-size="20" font-weight="600" fill="#ffffff">GraphProvider</text>
+    <text x="28" y="74" font-family="Segoe UI, Arial, sans-serif" font-size="13" fill="#d1d5db">One provider instance for token and state</text>
+
+    <rect x="28" y="104" width="132" height="38" rx="6" fill="#ffffff" fill-opacity="0.08" stroke="#374151"/>
+    <text x="48" y="128" font-family="Segoe UI, Arial, sans-serif" font-size="13" fill="#e5e7eb">MockProvider</text>
+
+    <rect x="184" y="104" width="132" height="38" rx="6" fill="#ffffff" fill-opacity="0.08" stroke="#374151"/>
+    <text x="202" y="128" font-family="Segoe UI, Arial, sans-serif" font-size="13" fill="#e5e7eb">MSAL browser</text>
+
+    <rect x="28" y="160" width="132" height="38" rx="6" fill="#ffffff" fill-opacity="0.08" stroke="#374151"/>
+    <text x="47" y="184" font-family="Segoe UI, Arial, sans-serif" font-size="13" fill="#e5e7eb">Teams hosted</text>
+
+    <rect x="184" y="160" width="132" height="38" rx="6" fill="#ffffff" fill-opacity="0.08" stroke="#374151"/>
+    <text x="203" y="184" font-family="Segoe UI, Arial, sans-serif" font-size="13" fill="#e5e7eb">Custom auth</text>
+  </g>
+
+  <g transform="translate(804 54)">
+    <rect width="238" height="300" rx="8" fill="#ffffff" stroke="#d1d5db" filter="url(#shadow)"/>
+    <text x="26" y="42" font-family="Segoe UI, Arial, sans-serif" font-size="18" font-weight="600" fill="#111827">Microsoft Graph</text>
+    <text x="26" y="70" font-family="Segoe UI, Arial, sans-serif" font-size="13" fill="#4b5563">Scoped user and directory data</text>
+
+    <circle cx="72" cy="128" r="28" fill="#0f6cbd"/>
+    <text x="72" y="138" text-anchor="middle" font-family="Segoe UI, Arial, sans-serif" font-size="22" font-weight="600" fill="#ffffff">U</text>
+    <text x="118" y="124" font-family="Segoe UI, Arial, sans-serif" font-size="14" font-weight="600" fill="#111827">Users</text>
+    <text x="118" y="146" font-family="Segoe UI, Arial, sans-serif" font-size="12" fill="#6b7280">profile and photo</text>
+
+    <circle cx="72" cy="200" r="28" fill="#13a10e"/>
+    <text x="72" y="210" text-anchor="middle" font-family="Segoe UI, Arial, sans-serif" font-size="22" font-weight="600" fill="#ffffff">P</text>
+    <text x="118" y="196" font-family="Segoe UI, Arial, sans-serif" font-size="14" font-weight="600" fill="#111827">Presence</text>
+    <text x="118" y="218" font-family="Segoe UI, Arial, sans-serif" font-size="12" fill="#6b7280">availability state</text>
+
+    <circle cx="72" cy="272" r="28" fill="#8764b8"/>
+    <text x="72" y="282" text-anchor="middle" font-family="Segoe UI, Arial, sans-serif" font-size="22" font-weight="600" fill="#ffffff">G</text>
+    <text x="118" y="268" font-family="Segoe UI, Arial, sans-serif" font-size="14" font-weight="600" fill="#111827">Groups</text>
+    <text x="118" y="290" font-family="Segoe UI, Arial, sans-serif" font-size="12" fill="#6b7280">members and lists</text>
+  </g>
+
+  <line x1="318" y1="204" x2="356" y2="204" stroke="#64748b" stroke-width="3" marker-end="url(#arrow)"/>
+  <line x1="724" y1="204" x2="780" y2="204" stroke="#64748b" stroke-width="3" marker-end="url(#arrow)"/>
+
+  <g transform="translate(396 358)">
+    <rect width="308" height="42" rx="8" fill="#e8f2ff" stroke="#b3d6f2"/>
+    <text x="24" y="27" font-family="Segoe UI, Arial, sans-serif" font-size="14" fill="#0f4c81">Keep auth outside UI components</text>
+  </g>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devsym/graph-toolkit-react",
-  "version": "1.0.0-next.9",
+  "version": "1.1.0",
   "description": "React components for Microsoft Graph powered by Fluent UI",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -16,7 +16,8 @@
     "dist",
     "README.md",
     "AGENTS.md",
-    "MGT_MIGRATION.md",
+    "CONTRIBUTING.md",
+    "docs/assets/readme",
     "LICENSE"
   ],
   "scripts": {
@@ -24,7 +25,7 @@
     "dev": "vite build --watch",
     "changeset": "changeset",
     "version-packages": "changeset version",
-    "publish-packages": "changeset publish --provenance",
+    "publish-packages": "changeset publish",
     "type-check": "tsc --noEmit",
     "lint": "eslint src --ext .ts,.tsx",
     "lint:fix": "eslint src --ext .ts,.tsx --fix",
@@ -51,7 +52,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "tag": "next"
+    "tag": "latest"
   },
   "peerDependencies": {
     "@azure/msal-browser": "^4.0.0 || ^5.0.0",
@@ -69,34 +70,34 @@
     "@microsoft/microsoft-graph-types": "^2.40.0"
   },
   "devDependencies": {
-    "@azure/msal-browser": "^5.2.0",
-    "@changesets/cli": "^2.29.7",
-    "@fluentui/react-components": "^9.72.6",
-    "@storybook/addon-a11y": "^10.0.6",
-    "@storybook/addon-docs": "^10.0.6",
-    "@storybook/addon-links": "^10.0.6",
-    "@storybook/react-vite": "^10.0.6",
+    "@azure/msal-browser": "^5.15.0",
+    "@changesets/cli": "^2.31.0",
+    "@fluentui/react-components": "^9.74.3",
+    "@storybook/addon-a11y": "^10.4.6",
+    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/addon-links": "^10.4.6",
+    "@storybook/react-vite": "^10.4.6",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "@typescript-eslint/eslint-plugin": "^8.46.3",
-    "@typescript-eslint/parser": "^8.46.3",
-    "@vitejs/plugin-react": "^5.1.0",
+    "@typescript-eslint/eslint-plugin": "^8.62.1",
+    "@typescript-eslint/parser": "^8.62.1",
+    "@vitejs/plugin-react": "^6.0.3",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-storybook": "^10.2.8",
-    "globals": "^17.3.0",
-    "jsdom": "^27.1.0",
-    "prettier": "^3.2.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-storybook": "^10.4.6",
+    "globals": "^17.7.0",
+    "jsdom": "^29.1.1",
+    "prettier": "^3.8.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^10.0.6",
-    "typescript": "^5.9.3",
-    "vite": "^7.2.2",
-    "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.0.18"
+    "storybook": "^10.3.6",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.10",
+    "vite-plugin-dts": "^5.0.3",
+    "vitest": "^4.1.9"
   }
-}
+}

package/readme.md

@@ -1,415 +0,0 @@
-<h1 align="center">
-  Graph Toolkit React
-</h1>
-
-<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>
-
-<p align="center">
-  <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>
-  <img src="https://img.shields.io/badge/React-18%2F19-blue" alt="React 18/19">
-  <img src="https://img.shields.io/badge/Fluent_UI-9.72-purple" alt="Fluent UI 9">
-  <img src="https://img.shields.io/badge/TypeScript-5.9-blue" alt="TypeScript 5.9">
-</p>
-
-<h3 align="center">
-  <a href="#-getting-started">Get Started</a> • 
-  <a href="#-migration-from-mgt">Migration</a> • 
-  <a href="#-agent-quick-reference">Agent Quick Reference</a> • 
-  <a href="#-storybook">Storybook</a> • 
-  <a href="#-contribute">Contribute</a>
-</h3>
-
-## 🎯 Project Vision
-
-This project provides a **modern, React-first component library** built on top of Fluent UI to help React developers integrate with Microsoft Graph quickly and consistently.
-
-> Note: This project is a spiritual successor to Microsoft Graph Toolkit, redesigned as a React-first library.
-
-### Key Principles
-
-- **React-First**: Built specifically for React applications, not framework-agnostic web components
-- **Fluent UI Native**: Uses official Fluent UI v9 components instead of custom implementations
-- **Single Package**: One cohesive npm package instead of a complex monorepo
-- **Modern Stack**: TypeScript 5, Vite, Vitest, and Storybook
-- **Developer Experience**: Simple API, excellent TypeScript support, comprehensive documentation
-
-### Design Philosophy
-
-Instead of maintaining the original web component approach, this fork:
-
-1. **Leverages Fluent UI**: Uses the official `Persona` component from Fluent UI instead of custom Avatar/Text components
-2. **Embraces React Patterns**: Components designed for React's patterns (hooks, context) from the ground up
-3. **Reduces Complexity**: Smaller codebase enables quicker development and easier maintenance
-4. **Focuses on Quality**: Fewer components, better implementation, comprehensive documentation
-
-## 📦 Package
-
-```bash
-npm install @devsym/graph-toolkit-react
-```
-
-| Package | Version | Description |
-| ------- | ------- | ----------- |
-| `@devsym/graph-toolkit-react` | `0.1.0-alpha.1` | React components for Microsoft Graph powered by Fluent UI |
-
-## 🔄 Migration from MGT
-
-For migration from Microsoft Graph Toolkit (including Teams-hosted scenarios), use [`docs/MGT_MIGRATION.md`](./docs/MGT_MIGRATION.md).
-
-The guide includes:
-
-- Concept mapping (MGT patterns to this package)
-- Step-by-step migration checklist
-- Teams-specific migration section (`TeamsHostedProvider` + backend token exchange)
-- Common migration pitfalls and validation checklist
-
-## 🤖 Agent Quick Reference
-
-If you are using a coding agent (Copilot/Codex/Claude/etc.), use the scenario-first reference in [`AGENTS.md`](./AGENTS.md).
-
-It includes:
-
-- Provider decision matrix by hosting scenario
-- Minimal copy-ready snippets for `MockProvider`, `MsalBrowserProvider`, `TeamsHostedProvider`, and custom `IProvider`
-- Scopes-by-feature mapping
-- Common failures and exact remediation steps
-
-For end-to-end browser-hosted setup with MSAL, also see [`samples/react-msal-sample/README.md`](./samples/react-msal-sample/README.md).
-
-## 🎨 Components
-
-Currently available in alpha:
-
-### Person Component
-A flexible component for displaying user information from Microsoft Graph.
-
-```tsx
-import { Person } from '@devsym/graph-toolkit-react';
-
-<Person 
-  userId="user@contoso.com"
-  view="twolines"
-  showPresence
-  presenceOnly={false}
-  size="large"
-  textAlignment="center"
-  onClick={() => console.log('Persona clicked!')}
-/>
-```
-
-`Person` supports Fluent UI Persona props directly.
-
-MGT-style line customization is also supported:
-
-```tsx
-<Person
-  userId="me"
-  view="threelines"
-  line1Property="givenName"
-  line2Property="mail,userPrincipalName"
-  line3Property="presenceAvailability"
-/>
-```
-
-For full manual override, use React render callbacks as the replacement for MGT line templates:
-
-```tsx
-<Person
-  personDetails={{
-    displayName: 'Megan Bowen',
-    jobTitle: 'CEO',
-    department: 'Leadership',
-    officeLocation: 'Seattle',
-  }}
-  view="fourlines"
-  renderLine1={({ text }) => <span>Name: {text}</span>}
-  renderLine2={({ text }) => <span>Role: {text}</span>}
-  renderLine3={({ text }) => <span>Org: {text}</span>}
-  renderLine4={({ text }) => <span>Location: {text}</span>}
-/>
-```
-
-
-## 🚀 Getting Started
-
-### Prerequisites
-
-```json
-{
-  "react": "^18.0.0 || ^19.0.0",
-  "react-dom": "^18.0.0 || ^19.0.0",
-  "@fluentui/react-components": "^9.0.0"
-}
-```
-
-### Installation
-
-```bash
-npm install --save @devsym/graph-toolkit-react
-```
-
-Also install required peer dependencies in your app if they are not already present:
-
-```bash
-npm install --save react react-dom @fluentui/react-components
-```
-
-If you plan to use `MsalBrowserProvider`, also install:
-
-```bash
-npm install --save @azure/msal-browser
-```
-
-If you only use `TeamsHostedProvider` (Teams-hosted app with consumer-managed Teams auth), `@azure/msal-browser` is not required.
-
-### Quick Start
-
-```tsx
-import { FluentProvider, webLightTheme } from '@fluentui/react-components';
-import { GraphProvider, MockProvider, Person } from '@devsym/graph-toolkit-react';
-
-function App() {
-  const provider = new MockProvider(); // Use MockProvider for development
-  
-  return (
-    <FluentProvider theme={webLightTheme}>
-      <GraphProvider provider={provider}>
-        <Person userId="AdeleV@contoso.com" view="twolines" showPresence />
-      </GraphProvider>
-    </FluentProvider>
-  );
-}
-```
-
-### Authentication Providers
-
-The library uses a provider pattern for authentication:
-
-- **MockProvider**: Returns mock data (Adele Vance) without API calls - perfect for development
-- **MsalBrowserProvider**: Native MSAL browser provider included in this package
-- **TeamsHostedProvider**: For Teams-hosted apps using consumer-managed Teams login + backend Graph token exchange
-- **Custom Providers**: Implement `IProvider` interface to integrate with other auth systems
-
-#### `MsalBrowserProvider` quick start
-
-```tsx
-import { PublicClientApplication } from '@azure/msal-browser';
-import {
-  GraphProvider,
-  MsalBrowserProvider,
-  Person,
-  ProviderState,
-} from '@devsym/graph-toolkit-react';
-
-const msal = new PublicClientApplication({
-  auth: {
-    clientId: 'YOUR_CLIENT_ID',
-    authority: 'https://login.microsoftonline.com/common',
-    redirectUri: window.location.origin,
-  },
-});
-
-const provider = new MsalBrowserProvider(msal, ['User.Read']);
-await provider.initialize();
-
-function App() {
-  return (
-    <GraphProvider provider={provider}>
-      <Person userId="me" view="threelines" />
-    </GraphProvider>
-  );
-}
-```
-
-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.
-
-#### `TeamsHostedProvider` quick start (consumer-managed Teams login)
-
-Use this when your app is hosted in Microsoft Teams and your app code already handles TeamsJS auth for multiple APIs.
-The provider does not open Teams login popups itself; it uses callbacks you provide.
-
-```tsx
-import {
-  createBackendTokenExchange,
-  GraphProvider,
-  Person,
-  TeamsHostedProvider,
-} from '@devsym/graph-toolkit-react';
-import { authentication } from '@microsoft/teams-js';
-
-const exchangeForGraphToken = createBackendTokenExchange({
-  endpoint: '/api/token/exchange',
-});
-
-const provider = new TeamsHostedProvider({
-  defaultScopes: ['User.Read'],
-  getTeamsSsoToken: async (scopes) => {
-    // Consumer app owns Teams auth and can reuse token for other APIs
-    return authentication.getAuthToken({ resources: scopes });
-  },
-  exchangeForGraphToken,
-});
-
-await provider.login();
-
-function App() {
-  return (
-    <GraphProvider provider={provider}>
-      <Person userId="me" view="threelines" />
-    </GraphProvider>
-  );
-}
-```
-
-Use explicit mode selection in your app:
-
-- Browser-hosted app: instantiate `MsalBrowserProvider`
-- Teams-hosted app: instantiate `TeamsHostedProvider`
-
-#### Scopes by feature
-
-| Feature | Minimum delegated scope | Notes |
-| ------- | ------------------------ | ----- |
-| 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 |
-| 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 |
-
-```tsx
-import { IProvider, ProviderState } from '@devsym/graph-toolkit-react';
-
-class MyAuthProvider implements IProvider {
-  state: ProviderState = 'SignedOut';
-  
-  async login(): Promise<void> { /* ... */ }
-  async logout(): Promise<void> { /* ... */ }
-  async getAccessToken(): Promise<string> { /* ... */ }
-}
-```
-
-## 📚 Storybook
-
-Explore all components interactively in our Storybook documentation:
-
-**[View Storybook →](https://thomaspe.github.io/graph-toolkit-react/)** _(Deployed to GitHub Pages on every main branch update)_
-
-Run locally:
-```bash
-npm run storybook
-```
-
-## 🛠️ Development
-
-### Tech Stack
-
-- **Build**: Vite 7 (ESM + CJS output)
-- **Language**: TypeScript 5.9
-- **Testing**: Vitest 3 + Testing Library
-- **Documentation**: Storybook 10
-- **UI Framework**: Fluent UI v9 (React Components)
-- **Graph SDK**: @microsoft/microsoft-graph-client 3.0
-
-### Build & Test
-
-```bash
-# Install dependencies
-npm install
-
-# Type check
-npm run type-check
-
-# Lint
-npm run lint
-
-# Build library
-npm run build
-
-# Run tests
-npm run test
-
-# Run Storybook
-npm run storybook
-
-# Build Storybook for deployment
-npm run build-storybook
-```
-
-### Project Structure
-
-```
-src/
-├── components/
-│   └── Person/
-│       ├── Person.tsx          # Component implementation
-│       ├── Person.types.ts     # TypeScript definitions
-│       └── __tests__/          # Component tests
-├── providers/
-│   ├── IProvider.ts            # Provider interface
-│   ├── MockProvider.ts         # Development provider
-│   └── ProviderContext.tsx     # React context
-├── hooks/
-│   ├── useGraphClient.ts       # Graph client hook
-│   ├── usePersonData.ts        # Person data fetching
-│   └── useProvider.ts          # Provider access
-└── index.ts                    # Public API
-
-stories/
-└── Person.stories.tsx          # Storybook stories (19 examples)
-```
-
-## 🎯 Current Status
-
-**Alpha** ✅
-
-- ✅ Repository restructured from monorepo to single package
-- ✅ Provider infrastructure with MockProvider for development
-- ✅ Person component using Fluent UI Persona
-- ✅ 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`
-
-**Next Steps**:
-- Additional components (PeoplePicker, PersonCard, Login) — 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)
-
-## 🤝 Contribute
-
-This **community-driven project** provides React developers with components for Microsoft Graph. Contributions are welcome!
-
-### Guidelines
-
-1. Follow the existing code style (TypeScript, ESLint, Prettier)
-2. Use Fluent UI components whenever possible
-3. Write tests for new components
-4. Add Storybook stories demonstrating all component features
-5. Update documentation
-
-See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
-
-## 📝 License
-
-MIT License - see [LICENSE](LICENSE) for details.
-
-## 🙏 Acknowledgments
-
-- **Fluent UI Team**: For the excellent React component library
-- **Microsoft Graph**: For the powerful API that makes this all possible
-- **Community Contributors**: For helping improve this project
-
----
-
-**Note**: This is an alpha release under active development. APIs may change. Not recommended for production use yet.
-
-## 🔗 Links
-
-- **Fluent UI**: [react.fluentui.dev](https://react.fluentui.dev/)
-- **Microsoft Graph**: [graph.microsoft.com](https://graph.microsoft.com)
-- **Component Roadmap**: [docs/COMPONENT_ROADMAP.md](./docs/COMPONENT_ROADMAP.md)
-- **Changelog**: [CHANGELOG.md](CHANGELOG.md)
-- **Publishing**: [PUBLISHING.md](PUBLISHING.md)
-