@planningcenter/topbar 8.2.0-rc.2 → 8.2.0-rc.3

package/CHANGELOG.md

@@ -5,7 +5,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [8.2.0-rc.2] - 2022-05-18
+## [8.2.0] - 2021-05-11
+
+### Added
+
+- Make whether Jolt sends its logs to console configurable (`enableJoltLogging` prop) and default to `false`
+
+### Changed
+
+- Add more info regarding troubleshooting `yalc` issues to the README
+- Send a `fetchAuthTokenFn` to `jolt-client` instead of `authToken`. Over time, the auth token can get stale. Sending a function instead of a value allows the client to refresh itself when required.
+- Instead of fetching the WSS URLs for authorization from an api endpoint, hard-code them instead. After the change adding `fetchAuthTokenFn`, this change reduces required API calls by 1.
 
 ### Fixed
 

package/README.md

@@ -34,8 +34,10 @@ If a Jolt connection is not shared with topbar, it will gladly initiate its own
 To reuse your app's Jolt connection, topbar requires a Promise that resolves into a [Jolt client](https://github.com/ministrycentered/jolt-client/) connection.
 If nothing is passed—or if a Promise is passed that resolves to `undefined` or `void`—topbar will initiate its own connection.
 
-Topbar hooks into `pco-page-expired` and will `disconnect` either its internal, or passed in jolt instance when the session is invalidated (i.e. logged out in a different tab).
-CSRF tokens are invalidated when the session is invalidated, and non-GET APIv2 requests (i.e. auth/subscribe) require a valid CSRF token and will never succeed in that state.
+Topbar hooks into `pco-page-expired` and will `disconnect` when the session is invalidated (i.e. logged out in a different tab).
+This occurs for `topbar`-created jolt instances as well as jolt instances provided to `topbar` via the `joltPromise` prop.
+CSRF tokens are invalidated when the session is invalidated. 
+Non-GET APIv2 requests (i.e. auth/subscribe) require a valid CSRF token and will never succeed in that state.
 
 #### Example
 

package/dist/modules/api_request.d.ts

@@ -1,10 +1,5 @@
-import { Environment } from "@planningcenter/url";
 declare global {
     interface Window {
-        railsEnv?: Environment;
-        currentPerson?: {
-            id: number;
-        };
         Rails?: {
             csrfToken: () => string;
         };

package/dist/modules/apps_provider.d.ts

@@ -17,7 +17,7 @@ export declare class AppsProvider extends React.Component<{
     fetch(): void;
     remove(): void;
     componentDidMount(): void;
-    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    render(): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
 }
 interface App {
     attributes: {

package/dist/modules/client_storage.d.ts

@@ -8,5 +8,5 @@ export declare class ClientStorage extends React.Component<{
         method: string;
     };
     update(value: any): void;
-    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    render(): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
 }

package/dist/modules/color_app_squircles.d.ts

@@ -6,6 +6,7 @@ export declare function CheckIns(): JSX.Element[];
 export declare function ChurchCenter(): JSX.Element[];
 export declare function Giving(): JSX.Element[];
 export declare function Groups(): JSX.Element[];
+export declare function Home(): JSX.Element[];
 export declare function People(): JSX.Element[];
 export declare function Publishing(): JSX.Element[];
 export declare function Registrations(): JSX.Element[];

package/dist/modules/colors.d.ts

@@ -0,0 +1,46 @@
+declare const colors: {
+    danger43: string;
+    danger45: string;
+    danger47: string;
+    danger93: string;
+    danger97: string;
+    darkNeutral07: string;
+    darkNeutral12: string;
+    darkNeutral15: string;
+    darkNeutral17: string;
+    darkNeutral19: string;
+    darkNeutral24: string;
+    darkNeutral32: string;
+    darkNeutral50: string;
+    darkNeutral68: string;
+    darkNeutral88: string;
+    darkNeutral98: string;
+    interaction45: string;
+    interaction50: string;
+    interaction55: string;
+    interaction66: string;
+    interaction91: string;
+    interaction93: string;
+    lightNeutral100: string;
+    lightNeutral12: string;
+    lightNeutral24: string;
+    lightNeutral45: string;
+    lightNeutral62: string;
+    lightNeutral81: string;
+    lightNeutral88: string;
+    lightNeutral93: string;
+    lightNeutral95: string;
+    lightNeutral97: string;
+    lightNeutral98: string;
+    success23: string;
+    success25: string;
+    success27: string;
+    success91: string;
+    success97: string;
+    warning49: string;
+    warning55: string;
+    warning63: string;
+    warning94: string;
+    warning97: string;
+};
+export default colors;

package/dist/modules/components/NotificationsMenuBlankState.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare const NotificationsMenuBlankState: ({
+  description,
+  style,
+  title,
+  ...props
+}: {
+  description: string
+  style?: object
+  title?: string
+}) => JSX.Element
+export default NotificationsMenuBlankState

package/dist/modules/components/apps_menu.d.ts

@@ -1,13 +1,9 @@
 /// <reference types="react" />
 import * as PCO_URL from "@planningcenter/url";
+import { App } from "../interfaces";
 declare const AppsMenu: ({ appName, apps, env, toggle, visible, }: {
     appName: string;
-    apps: {
-        attributes: {
-            name: string;
-            url: string;
-        };
-    }[];
+    apps: App[];
     env: PCO_URL.Environment;
     toggle: any;
     visible: boolean;

package/dist/modules/components/conditional_wrap.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+declare const ConditionalWrap: ({ children, condition, wrap, }: {
+    children: React.ReactNode;
+    condition?: boolean;
+    wrap: any;
+}) => any;
+export default ConditionalWrap;

package/dist/modules/components/notification_item.d.ts

@@ -1,7 +1,11 @@
 /// <reference types="react" />
 import { Notification } from "../interfaces";
-declare const NotificationItem: ({ isLast, notification: { appName, createdAt, isRead, link, title }, }: {
+declare const NotificationItem: ({ mobile, isLast, onMarkAsRead, onToggleRead, showBottomBorder, notification, }: {
+    mobile?: boolean;
     isLast?: boolean;
+    onMarkAsRead?: (notification: Notification) => any;
+    onToggleRead: any;
+    showBottomBorder?: boolean;
     notification: Notification;
 }) => JSX.Element;
 export default NotificationItem;

package/dist/modules/components/notifications_inbox.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import * as PCO_URL from "@planningcenter/url"
+import { Notification } from "../interfaces"
+declare const NotificationsInbox: ({
+  env,
+  render,
+  userId,
+}: {
+  env: PCO_URL.Environment
+  render: (props: {
+    handleMarkAllAsRead: () => any
+    handleToggleRead: (notification: Notification) => any
+    read: Notification[]
+    unread: Notification[]
+  }) => JSX.Element
+  userId: string
+}) => JSX.Element
+export default NotificationsInbox

package/dist/modules/components/notifications_menu.d.ts

@@ -1,11 +1,17 @@
 /// <reference types="react" />
 import { Notification } from "../interfaces";
-declare const NotificationsMenu: ({ notifications: { read, unread }, toggle, visible, }: {
+declare const NotificationsMenu: ({ handleMarkAllAsRead, handleMarkAsRead, handleToggleRead, hasError, isLoading, mobile, notifications: { read, unread }, toggle, visible, }: {
+    handleMarkAllAsRead: () => any;
+    handleMarkAsRead: (notification: Notification) => any;
+    handleToggleRead: (notification: Notification) => any;
+    hasError?: boolean;
+    isLoading?: boolean;
+    mobile?: boolean;
     notifications: {
         read: Notification[];
         unread: Notification[];
     };
-    toggle: any;
-    visible: boolean;
+    toggle?: any;
+    visible?: boolean;
 }) => JSX.Element;
 export default NotificationsMenu;

package/dist/modules/components/notifications_menu_Wrapper.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+declare const NotificationsMenuWrapper: ({ children, toggle, visible, ...nativeProps }: {
+    children: React.ReactNode;
+    toggle: any;
+    visible: boolean;
+}) => JSX.Element;
+export default NotificationsMenuWrapper;

package/dist/modules/components/notifications_menu_blank_state.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const NotificationsMenuBlankState: ({ dark, description, style, title, }: {
+    dark?: boolean;
+    description: string;
+    style?: object;
+    title?: string;
+}) => JSX.Element;
+export default NotificationsMenuBlankState;

package/dist/modules/components/popover_root.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+declare const PopupRoot: ({ style, ...nativeProps }: {
+    children?: React.ReactNode;
+    style?: object;
+}) => JSX.Element;
+export default PopupRoot;

package/dist/modules/components/spinner.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import "./spinner.css";
+declare const Spinner: (props: any) => JSX.Element;
+export default Spinner;

package/dist/modules/connected_people_provider.d.ts

@@ -17,5 +17,5 @@ export declare class ConnectedPeopleProvider extends React.Component<{
     unlink(): void;
     switch(toId: string, returnPath: string): void;
     componentDidMount(): void;
-    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    render(): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
 }

package/dist/modules/display_switch.d.ts

@@ -9,7 +9,7 @@ export declare class PointBreak extends React.Component<{
     componentDidMount(): void;
     componentWillUnmount(): void;
     breakpointString(width: any): "xs" | "sm" | "md" | "lg" | "xl";
-    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    render(): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
 }
 export declare class DisplaySwitch extends React.Component<{
     smallBreakpoints: String[];

package/dist/modules/dummy_data.d.ts

@@ -1,3 +1,3 @@
-import { Notification } from "./interfaces";
-export declare const DUMMY_DATA_UNREAD: Notification[];
-export declare const DUMMY_DATA_READ: Notification[];
+import { Notification } from "./interfaces"
+export declare const DUMMY_DATA_UNREAD: Notification[]
+export declare const DUMMY_DATA_READ: Notification[]

package/dist/modules/formatters.d.ts

@@ -1,15 +1,3 @@
-export interface App {
-    attributes: {
-        name: string;
-        url: string;
-    };
-}
-export interface ConnectedPerson {
-    id: number;
-    attributes: {
-        name: string;
-        organization_name: string;
-    };
-}
+import { App, ConnectedPerson } from "./interfaces";
 export declare const appsMenuFormatter: (apps: App[]) => App[];
 export declare const connectedPeopleMenuFormatter: (connectedPeople: ConnectedPerson[]) => ConnectedPerson[];

package/dist/modules/hooks/use_hover.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from "react";
+declare function useHover<T extends HTMLElement = HTMLElement>(elementRef: RefObject<T>): boolean;
+export default useHover;

package/dist/modules/hooks/use_local_storage.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare function useLocalStorage(
+  key: string,
+  initialValue: any
+): {
+  storedValue: any
+  setStoredValue: import("react").Dispatch<any>
+  dropKey: () => void
+}
+export default useLocalStorage

package/dist/modules/hooks/use_notifications.d.ts

@@ -0,0 +1,16 @@
+import * as PCO_URL from "@planningcenter/url";
+import { Notification } from "../interfaces";
+declare const useNotifications: ({ disabled, env, userId, }: {
+    disabled?: boolean;
+    env: PCO_URL.Environment;
+    userId: string;
+}) => {
+    handleMarkAllAsRead: () => any;
+    handleMarkAsRead: (notification: Notification) => any;
+    handleToggleRead: (notification: Notification) => any;
+    hasError: boolean;
+    isLoading: boolean;
+    read: Notification[];
+    unread: Notification[];
+};
+export default useNotifications;

package/dist/modules/hooks/use_topbar_api.d.ts

@@ -0,0 +1,8 @@
+import * as PCO_URL from "@planningcenter/url";
+import { Fetch } from "../api_request";
+import { TopbarAPIResponse } from "../interfaces";
+declare const useTopbarAPI: ({ configuredFetch, env, }: {
+    configuredFetch: Fetch;
+    env: PCO_URL.Environment;
+}) => TopbarAPIResponse;
+export default useTopbarAPI;

package/dist/modules/mono_app_symbols.d.ts

@@ -31,6 +31,10 @@ export declare function Groups({ color, ...platformProps }: {
     [x: string]: any;
     color: any;
 }): JSX.Element;
+export declare function Home({ color, ...platformProps }: {
+    [x: string]: any;
+    color: any;
+}): JSX.Element;
 export declare function People({ color, ...platformProps }: {
     [x: string]: any;
     color: any;

package/dist/modules/mono_app_text.d.ts

@@ -29,6 +29,11 @@ export declare function Giving({ color, size, ...platformProps }: {
     color: any;
     size?: number;
 }): JSX.Element;
+export declare function Home({ color, size, ...platformProps }: {
+    [x: string]: any;
+    color: any;
+    size?: number;
+}): JSX.Element;
 export declare function Groups({ color, size, ...platformProps }: {
     [x: string]: any;
     color: any;

package/dist/modules/not_small_topbar.d.ts

@@ -1,6 +1,36 @@
 import * as React from "react";
 import * as PCO_URL from "@planningcenter/url";
-import { Notification } from "./interfaces";
+export declare class AppsButton extends React.Component<{
+    appName: string;
+    colors: any;
+    expanded: boolean;
+    style?: object;
+    onClick: any;
+    displayIconOnly?: boolean;
+}, {
+    entered: boolean;
+    down: boolean;
+}> {
+    constructor(props: any);
+    static defaultProps: {
+        displayIconOnly: boolean;
+    };
+    render(): JSX.Element;
+}
+export declare class Hoverable extends React.Component<{
+    component?: any;
+    style?: object;
+    hover?: any;
+    active?: any;
+    type?: string;
+    onClick?: any;
+}, {
+    entered: boolean;
+    down: boolean;
+}> {
+    constructor(props: any);
+    render(): JSX.Element;
+}
 export declare class Topbar extends React.Component<{
     apps: {
         attributes: {
@@ -21,40 +51,30 @@ export declare class Topbar extends React.Component<{
     search?: any;
     style?: any;
     showOrgName?: boolean;
+    notifications?: any;
     requestAppsFetch: any;
     requestConnectedPeopleFetch: any;
     requestUnlinkConnectedPeople: any;
     requestSwitchConnectedPerson: any;
     requestClearAppsCache: any;
     requestClearConnectedPeopleCache: any;
-    useDummyNotifications?: boolean;
     linkToProfile?: boolean;
+    onLinkToProfileClick?: () => any;
 }, {
     appsMenuVisible: boolean;
-    notificationsMenuVisible: boolean;
-    routesVisible: boolean;
     userMenuVisible: boolean;
-    notifications: {
-        unread: Notification[];
-        read: Notification[];
-    };
+    routesVisible: boolean;
 }> {
     static defaultProps: {
+        notifications: () => any;
         search: () => any;
         linkToProfile: boolean;
         showOrgName: boolean;
-        useDummyNotifications: boolean;
     };
     constructor(props: any);
     hideRoutes(): void;
     showRoutes(): void;
     getTextColor(): any;
-    findInIncluded({ type, id }: {
-        type: any;
-        id: any;
-    }, included: any): any;
-    subscribeToJoltChannel(): void;
-    componentDidMount(): void;
     render(): JSX.Element;
 }
 export declare class Route extends React.Component<{

package/dist/modules/symbols.d.ts

@@ -1,23 +1,16 @@
-/// <reference types="react" />
-export declare const Bell: ({ dot, dotFill, fill, style, ...props }: {
+import * as React from "react";
+export declare const Bell: React.StatelessComponent<{
     dot?: boolean;
     dotFill?: string;
     fill?: string;
+    stroke?: string;
     style?: object;
-}) => JSX.Element;
-export declare const DisclosureChevronIcon: ({ colors, style, ...nativeProps }: {
-    colors: any;
-    style?: object;
-}) => JSX.Element;
-export declare const HelpIcon: ({ colors, style, ...nativeProps }: {
-    colors: any;
-    style?: object;
-}) => JSX.Element;
-export declare const Spyglass: ({ fill, style, ...nativeProps }: {
+}>;
+export declare const Spyglass: React.StatelessComponent<{
     fill?: string;
     style?: object;
-}) => JSX.Element;
-export declare const X: ({ fill, style, ...nativeProps }: {
+}>;
+export declare const X: React.StatelessComponent<{
     fill?: string;
     style?: object;
-}) => JSX.Element;
+}>;

package/dist/modules/topbar_context.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const _default: import("react").Context<{
+    notificationsDisabled: boolean;
+}>;
+export default _default;