@the-portland-company/shell 0.3.1 → 0.3.4
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/CHANGELOG.md +27 -0
- package/README.md +198 -27
- package/dist/css-modules.d.ts +6 -0
- package/dist/index.cjs +14 -8
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +12 -2
- package/dist/index.d.ts +12 -2
- package/dist/index.js +14 -8
- package/dist/index.js.map +1 -1
- package/package.json +10 -4
package/dist/index.d.cts
CHANGED
|
@@ -270,6 +270,10 @@ interface ShellProviderProps {
|
|
|
270
270
|
devNotesMenu?: ReactNode;
|
|
271
271
|
/** href used by the UserMenu "My Profile" link. Defaults to '/my-profile'. */
|
|
272
272
|
myProfileHref?: string;
|
|
273
|
+
/** Optional avatar URL override for the header UserMenu. Useful when the
|
|
274
|
+
* app has additional avatar sources (profile.avatar_url, memoji selection
|
|
275
|
+
* in localStorage, branded default URL) that aren't in user_metadata. */
|
|
276
|
+
userAvatarUrl?: string;
|
|
273
277
|
}
|
|
274
278
|
/** Return value of useShellAuth(). */
|
|
275
279
|
interface ShellAuthValue {
|
|
@@ -362,9 +366,12 @@ interface ShellChromeValue {
|
|
|
362
366
|
href?: string;
|
|
363
367
|
}>;
|
|
364
368
|
headerActions?: ReactNode;
|
|
369
|
+
/** Avatar URL override for UserMenu. Apps that store the avatar in their own
|
|
370
|
+
* profile table or localStorage should pass it here. */
|
|
371
|
+
userAvatarUrl?: string;
|
|
365
372
|
}
|
|
366
373
|
declare const ShellChromeContext: react.Context<ShellChromeValue | null>;
|
|
367
|
-
declare function ShellProvider({ children, supabaseClient, currentApp, appRegistry, basename, organization, linkedAccounts, support, devNotesMenu, myProfileHref, }: ShellProviderProps): react_jsx_runtime.JSX.Element;
|
|
374
|
+
declare function ShellProvider({ children, supabaseClient, currentApp, appRegistry, basename, organization, linkedAccounts, support, devNotesMenu, myProfileHref, userAvatarUrl, }: ShellProviderProps): react_jsx_runtime.JSX.Element;
|
|
368
375
|
|
|
369
376
|
declare function useShellAuth(): ShellAuthValue;
|
|
370
377
|
|
|
@@ -698,6 +705,9 @@ interface ShellChromeProps {
|
|
|
698
705
|
}>;
|
|
699
706
|
/** Header right-side action buttons (rendered before the icon row). */
|
|
700
707
|
headerActions?: ReactNode;
|
|
708
|
+
/** Avatar URL override for UserMenu. Pass a value computed from the app's
|
|
709
|
+
* profile.avatar_url / localStorage / default fallback chain. */
|
|
710
|
+
userAvatarUrl?: string;
|
|
701
711
|
}
|
|
702
712
|
/**
|
|
703
713
|
* Drop-in chrome binding for apps where the org/linked-account/support data
|
|
@@ -711,7 +721,7 @@ interface ShellChromeProps {
|
|
|
711
721
|
* Apps that have all the data available at the ShellProvider construction
|
|
712
722
|
* site can pass the same props to <ShellProvider> directly instead.
|
|
713
723
|
*/
|
|
714
|
-
declare function ShellChrome({ children, organization, linkedAccounts, support, devNotesMenu, myProfileHref, mode, navItems, navigationPreference, role, footer, brandLogoSrc, headerIconsSlot, organizationSettingsHref, showContinueOnboarding, onContinueOnboarding, pageTitle, breadcrumbs, headerActions, }: ShellChromeProps): react_jsx_runtime.JSX.Element;
|
|
724
|
+
declare function ShellChrome({ children, organization, linkedAccounts, support, devNotesMenu, myProfileHref, mode, navItems, navigationPreference, role, footer, brandLogoSrc, headerIconsSlot, organizationSettingsHref, showContinueOnboarding, onContinueOnboarding, pageTitle, breadcrumbs, headerActions, userAvatarUrl, }: ShellChromeProps): react_jsx_runtime.JSX.Element;
|
|
715
725
|
|
|
716
726
|
/** Returns a normalized 7-char hex color, or null if the input isn't valid. */
|
|
717
727
|
declare function normalizeHexColor(value?: string | null): string | null;
|
package/dist/index.d.ts
CHANGED
|
@@ -270,6 +270,10 @@ interface ShellProviderProps {
|
|
|
270
270
|
devNotesMenu?: ReactNode;
|
|
271
271
|
/** href used by the UserMenu "My Profile" link. Defaults to '/my-profile'. */
|
|
272
272
|
myProfileHref?: string;
|
|
273
|
+
/** Optional avatar URL override for the header UserMenu. Useful when the
|
|
274
|
+
* app has additional avatar sources (profile.avatar_url, memoji selection
|
|
275
|
+
* in localStorage, branded default URL) that aren't in user_metadata. */
|
|
276
|
+
userAvatarUrl?: string;
|
|
273
277
|
}
|
|
274
278
|
/** Return value of useShellAuth(). */
|
|
275
279
|
interface ShellAuthValue {
|
|
@@ -362,9 +366,12 @@ interface ShellChromeValue {
|
|
|
362
366
|
href?: string;
|
|
363
367
|
}>;
|
|
364
368
|
headerActions?: ReactNode;
|
|
369
|
+
/** Avatar URL override for UserMenu. Apps that store the avatar in their own
|
|
370
|
+
* profile table or localStorage should pass it here. */
|
|
371
|
+
userAvatarUrl?: string;
|
|
365
372
|
}
|
|
366
373
|
declare const ShellChromeContext: react.Context<ShellChromeValue | null>;
|
|
367
|
-
declare function ShellProvider({ children, supabaseClient, currentApp, appRegistry, basename, organization, linkedAccounts, support, devNotesMenu, myProfileHref, }: ShellProviderProps): react_jsx_runtime.JSX.Element;
|
|
374
|
+
declare function ShellProvider({ children, supabaseClient, currentApp, appRegistry, basename, organization, linkedAccounts, support, devNotesMenu, myProfileHref, userAvatarUrl, }: ShellProviderProps): react_jsx_runtime.JSX.Element;
|
|
368
375
|
|
|
369
376
|
declare function useShellAuth(): ShellAuthValue;
|
|
370
377
|
|
|
@@ -698,6 +705,9 @@ interface ShellChromeProps {
|
|
|
698
705
|
}>;
|
|
699
706
|
/** Header right-side action buttons (rendered before the icon row). */
|
|
700
707
|
headerActions?: ReactNode;
|
|
708
|
+
/** Avatar URL override for UserMenu. Pass a value computed from the app's
|
|
709
|
+
* profile.avatar_url / localStorage / default fallback chain. */
|
|
710
|
+
userAvatarUrl?: string;
|
|
701
711
|
}
|
|
702
712
|
/**
|
|
703
713
|
* Drop-in chrome binding for apps where the org/linked-account/support data
|
|
@@ -711,7 +721,7 @@ interface ShellChromeProps {
|
|
|
711
721
|
* Apps that have all the data available at the ShellProvider construction
|
|
712
722
|
* site can pass the same props to <ShellProvider> directly instead.
|
|
713
723
|
*/
|
|
714
|
-
declare function ShellChrome({ children, organization, linkedAccounts, support, devNotesMenu, myProfileHref, mode, navItems, navigationPreference, role, footer, brandLogoSrc, headerIconsSlot, organizationSettingsHref, showContinueOnboarding, onContinueOnboarding, pageTitle, breadcrumbs, headerActions, }: ShellChromeProps): react_jsx_runtime.JSX.Element;
|
|
724
|
+
declare function ShellChrome({ children, organization, linkedAccounts, support, devNotesMenu, myProfileHref, mode, navItems, navigationPreference, role, footer, brandLogoSrc, headerIconsSlot, organizationSettingsHref, showContinueOnboarding, onContinueOnboarding, pageTitle, breadcrumbs, headerActions, userAvatarUrl, }: ShellChromeProps): react_jsx_runtime.JSX.Element;
|
|
715
725
|
|
|
716
726
|
/** Returns a normalized 7-char hex color, or null if the input isn't valid. */
|
|
717
727
|
declare function normalizeHexColor(value?: string | null): string | null;
|
package/dist/index.js
CHANGED
|
@@ -1147,7 +1147,8 @@ function ShellProvider({
|
|
|
1147
1147
|
linkedAccounts,
|
|
1148
1148
|
support,
|
|
1149
1149
|
devNotesMenu,
|
|
1150
|
-
myProfileHref
|
|
1150
|
+
myProfileHref,
|
|
1151
|
+
userAvatarUrl
|
|
1151
1152
|
}) {
|
|
1152
1153
|
const [status, setStatus] = useState("loading");
|
|
1153
1154
|
const [session, setSession] = useState(null);
|
|
@@ -1189,9 +1190,10 @@ function ShellProvider({
|
|
|
1189
1190
|
const chrome = useMemo(
|
|
1190
1191
|
() => ({
|
|
1191
1192
|
devNotesMenu: devNotesMenu ?? null,
|
|
1192
|
-
myProfileHref: myProfileHref ?? "/my-profile"
|
|
1193
|
+
myProfileHref: myProfileHref ?? "/my-profile",
|
|
1194
|
+
userAvatarUrl
|
|
1193
1195
|
}),
|
|
1194
|
-
[devNotesMenu, myProfileHref]
|
|
1196
|
+
[devNotesMenu, myProfileHref, userAvatarUrl]
|
|
1195
1197
|
);
|
|
1196
1198
|
return /* @__PURE__ */ jsx(ShellAuthContext.Provider, { value, children: /* @__PURE__ */ jsx(ShellMetaContext.Provider, { value: meta, children: /* @__PURE__ */ jsx(ShellOrgContext.Provider, { value: organization ?? null, children: /* @__PURE__ */ jsx(ShellLinkedAccountsContext.Provider, { value: linkedAccounts ?? null, children: /* @__PURE__ */ jsx(ShellSupportProviderContext.Provider, { value: support ?? null, children: /* @__PURE__ */ jsx(ShellModeContext.Provider, { value: null, children: /* @__PURE__ */ jsx(ShellNavItemsContext.Provider, { value: null, children: /* @__PURE__ */ jsx(ShellNavigationPreferenceContext.Provider, { value: null, children: /* @__PURE__ */ jsx(ShellRoleContext.Provider, { value: null, children: /* @__PURE__ */ jsx(ShellFooterContext.Provider, { value: null, children: /* @__PURE__ */ jsx(ShellChromeContext.Provider, { value: chrome, children: /* @__PURE__ */ jsx(ChakraProvider, { theme: politogyTheme, children }) }) }) }) }) }) }) }) }) }) }) });
|
|
1197
1199
|
}
|
|
@@ -1278,7 +1280,8 @@ function UserMenu() {
|
|
|
1278
1280
|
myProfileHref,
|
|
1279
1281
|
organizationSettingsHref,
|
|
1280
1282
|
showContinueOnboarding,
|
|
1281
|
-
onContinueOnboarding
|
|
1283
|
+
onContinueOnboarding,
|
|
1284
|
+
userAvatarUrl
|
|
1282
1285
|
} = useShellChrome();
|
|
1283
1286
|
const linked = useShellLinkedAccounts();
|
|
1284
1287
|
const mode = useShellMode();
|
|
@@ -1289,7 +1292,7 @@ function UserMenu() {
|
|
|
1289
1292
|
const menuListBorderColor = useColorModeValue("gray.200", "gray.700");
|
|
1290
1293
|
if (status !== "authenticated" || !user) return null;
|
|
1291
1294
|
const displayName = getUserDisplayName(user.raw);
|
|
1292
|
-
const avatarUrl = avatarUrlFromUser(user);
|
|
1295
|
+
const avatarUrl = userAvatarUrl ?? avatarUrlFromUser(user);
|
|
1293
1296
|
const modeConfig = mode?.getModeConfig() ?? null;
|
|
1294
1297
|
const currentOrg = org?.currentOrg ?? null;
|
|
1295
1298
|
const linkedAccounts = linked?.linkedAccounts ?? [];
|
|
@@ -2905,7 +2908,8 @@ function ShellChrome({
|
|
|
2905
2908
|
onContinueOnboarding,
|
|
2906
2909
|
pageTitle,
|
|
2907
2910
|
breadcrumbs,
|
|
2908
|
-
headerActions
|
|
2911
|
+
headerActions,
|
|
2912
|
+
userAvatarUrl
|
|
2909
2913
|
}) {
|
|
2910
2914
|
const chrome = useMemo(
|
|
2911
2915
|
() => ({
|
|
@@ -2918,7 +2922,8 @@ function ShellChrome({
|
|
|
2918
2922
|
onContinueOnboarding,
|
|
2919
2923
|
pageTitle,
|
|
2920
2924
|
breadcrumbs,
|
|
2921
|
-
headerActions
|
|
2925
|
+
headerActions,
|
|
2926
|
+
userAvatarUrl
|
|
2922
2927
|
}),
|
|
2923
2928
|
[
|
|
2924
2929
|
devNotesMenu,
|
|
@@ -2930,7 +2935,8 @@ function ShellChrome({
|
|
|
2930
2935
|
onContinueOnboarding,
|
|
2931
2936
|
pageTitle,
|
|
2932
2937
|
breadcrumbs,
|
|
2933
|
-
headerActions
|
|
2938
|
+
headerActions,
|
|
2939
|
+
userAvatarUrl
|
|
2934
2940
|
]
|
|
2935
2941
|
);
|
|
2936
2942
|
const navItemsValue = useMemo(
|