@planningcenter/topbar 7.1.0-home-alpha.1 → 7.1.0-testing.0

package/CHANGELOG.md

@@ -1,9 +1,16 @@
 # Changelog
 
-## [Unreleased home]
+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).
+
+## [Unreleased notifications]
 
 ### Added
-- Add Home to the app switcher dropdown
+- Notification bell, indicator, and dropdown that displayes the current user's read and unread notifications. On initial load, a GET request is sent to the notifications API and its response is used to populate the unread indicator. To use dummy data instead, you can pass `useDummyNotifications={true}` when calling any `Topbar` component.
+- Subscribe to push notifications via Jolt after initial load. This is a naive implementation in that whenever a push event is received, a fresh GET request is sent to the notifications API endpoint to retrieve the current state of ALL of the user's notifications.
+- Set a baseline prettier config
 
 
 ## [7.0.0] - 2021-10-01
@@ -56,6 +63,6 @@ Versions entries to this changelog weren't tracked very well and were presented
 
 
 
-[Unreleased home]: https://github.com/ministrycentered/topbar/compare/main..home
+[Unreleased notifications]: https://github.com/ministrycentered/topbar/compare/@planningcenter/topbar@7.0.0..notifications
 [7.0.0]: https://github.com/ministrycentered/topbar/compare/@planningcenter/topbar@6.0.6..v7.0.0
 [Previous entries]: CHANGELOG-pre-4.9.0.md

package/dist/modules/api_request.d.ts

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

package/dist/modules/color_app_squircles.d.ts

@@ -6,7 +6,6 @@ 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/notification_item.d.ts

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

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

@@ -1,10 +1,12 @@
 /// <reference types="react" />
 import * as PCO_URL from "@planningcenter/url";
 import { Notification } from "../interfaces";
-declare const NotificationsMenu: ({ env, handleMarkAllAsRead, handleToggleRead, mobile, notifications: { read, unread }, toggle, visible, }: {
+declare const NotificationsMenu: ({ env, handleMarkAllAsRead, handleToggleRead, hasError, isLoading, mobile, notifications: { read, unread }, toggle, visible, }: {
     env: PCO_URL.Environment;
     handleMarkAllAsRead: () => any;
     handleToggleRead: (notification: Notification) => any;
+    hasError?: boolean;
+    isLoading?: boolean;
     mobile?: boolean;
     notifications: {
         read: Notification[];

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/hooks/use_notifications.d.ts

@@ -1,13 +1,14 @@
-import * as JoltLib from "@planningcenter/jolt-client";
 import * as PCO_URL from "@planningcenter/url";
 import { Notification } from "../interfaces";
-declare const notificationsOrganizer: (notifications: Notification[]) => {
+declare const useNotifications: ({ env, userId, }: {
+    env: PCO_URL.Environment;
+    userId: string;
+}) => {
+    handleMarkAllAsRead: () => any;
+    handleToggleRead: (notification: Notification) => any;
+    hasError: boolean;
+    isLoading: boolean;
     read: Notification[];
     unread: Notification[];
 };
-declare const useJoltChannelSubscription: ({ channelName, env, }: {
-    channelName: string;
-    env: PCO_URL.Environment;
-}) => JoltLib.ChannelSubscription;
-declare const buildNotificationFromApiResponse: (resp: any, json: any) => Notification;
-export { buildNotificationFromApiResponse, notificationsOrganizer, useJoltChannelSubscription, };
+export default useNotifications;

package/dist/modules/medium_topbar.d.ts

@@ -1,46 +1,42 @@
-import * as React from "react";
+/// <reference types="react" />
 import * as PCO_URL from "@planningcenter/url";
-export declare class Topbar extends React.Component<{
-    apps: {
-        attributes: {
-            name: string;
-            url: string;
-        };
-    }[];
-    env: PCO_URL.Environment;
-    appName: string;
-    routes: any;
-    colors: any;
-    userAvatarPath: string;
-    userId: string;
-    userName: string;
-    orgName: string;
-    connectedPeople: any;
-    search?: any;
-    style?: any;
-    showOrgName?: boolean;
-    notifications?: any;
-    requestAppsFetch: any;
-    requestConnectedPeopleFetch: any;
-    requestUnlinkConnectedPeople: any;
-    requestSwitchConnectedPerson: any;
-    requestClearAppsCache: any;
-    requestClearConnectedPeopleCache: any;
-    linkToProfile?: boolean;
-}, {
-    appsMenuVisible: boolean;
-    routesMenuVisible: boolean;
-    userMenuVisible: boolean;
-}> {
-    constructor(props: any);
-    static defaultProps: {
+declare const Topbar: {
+    (props: {
+        apps: {
+            attributes: {
+                name: string;
+                url: string;
+            };
+        }[];
+        env: PCO_URL.Environment;
+        appName: string;
+        routes: any;
+        colors: any;
+        userAvatarPath: string;
+        userId: string;
+        userName: string;
+        orgName: string;
+        connectedPeople: any;
+        search?: any;
+        style?: any;
+        showOrgName?: boolean;
+        notifications?: any;
+        requestAppsFetch: any;
+        requestConnectedPeopleFetch: any;
+        requestUnlinkConnectedPeople: any;
+        requestSwitchConnectedPerson: any;
+        requestClearAppsCache: any;
+        requestClearConnectedPeopleCache: any;
+        linkToProfile?: boolean;
+    }): JSX.Element;
+    defaultProps: {
         currentRouteComponent: (props: any) => JSX.Element;
     };
-    render(): JSX.Element;
-}
-export declare const Route: ({ active, style, name, ...props }: {
+};
+declare const Route: ({ active, style, name, ...props }: {
     [x: string]: any;
     active: any;
     style: any;
     name?: string;
 }) => JSX.Element;
+export { Route, Topbar };

package/dist/modules/mono_app_symbols.d.ts

@@ -31,10 +31,6 @@ 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,11 +29,6 @@ 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,126 +1,47 @@
 import * as React from "react";
 import * as PCO_URL from "@planningcenter/url";
-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 HoverableListItem extends React.Component<{
-    component?: any;
-    style?: object;
-    href?: string;
-    onClick?: any;
-}, {
-    entered: boolean;
-}> {
-    constructor(props: any);
-    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 const AppsMenu: (props: any) => JSX.Element;
-export declare class Outsider extends React.Component<{
-    component: any;
-    cleanup: boolean;
-    onOutsideClick: any;
-    visible: boolean;
-}, {}> {
-    private container;
-    constructor(props: any);
-    componentWillUnmount(): void;
-    handleOutsideClick(e: any): any;
-    render(): JSX.Element;
-}
-export declare class PopupRoot extends React.Component<{
-    style?: object;
-}, {}> {
-    render(): JSX.Element;
-}
-export declare const Popup: React.StatelessComponent<{
-    component?: any;
-    style?: object;
-    onOutsideClick?: any;
-    cleanup?: any;
-}>;
-export declare class Topbar extends React.Component<{
-    apps: {
-        attributes: {
-            name: string;
-            url: string;
-        };
-    }[];
-    activeRoute: string;
-    env: PCO_URL.Environment;
-    appName: string;
-    routes: any;
-    colors: any;
-    userAvatarPath: string;
-    userId: string;
-    userName: string;
-    orgName: string;
-    connectedPeople: any;
-    search?: any;
-    style?: any;
-    showOrgName?: boolean;
-    notifications?: any;
-    requestAppsFetch: any;
-    requestConnectedPeopleFetch: any;
-    requestUnlinkConnectedPeople: any;
-    requestSwitchConnectedPerson: any;
-    requestClearAppsCache: any;
-    requestClearConnectedPeopleCache: any;
-    linkToProfile?: boolean;
-    onLinkToProfileClick?: () => any;
-}, {
-    appsMenuVisible: boolean;
-    userMenuVisible: boolean;
-    routesVisible: boolean;
-}> {
-    static defaultProps: {
-        notifications: () => any;
+declare const Topbar: {
+    (props: {
+        apps: {
+            attributes: {
+                name: string;
+                url: string;
+            };
+        }[];
+        activeRoute: string;
+        env: PCO_URL.Environment;
+        appName: string;
+        routes: any;
+        colors: any;
+        userAvatarPath: string;
+        userId: string;
+        userName: string;
+        orgName: string;
+        connectedPeople: any;
+        search?: any;
+        style?: any;
+        showOrgName?: boolean;
+        requestAppsFetch: any;
+        requestConnectedPeopleFetch: any;
+        requestUnlinkConnectedPeople: any;
+        requestSwitchConnectedPerson: any;
+        requestClearAppsCache: any;
+        requestClearConnectedPeopleCache: any;
+        useDummyNotifications?: boolean;
+        linkToProfile?: boolean;
+    }): JSX.Element;
+    defaultProps: {
         search: () => any;
         linkToProfile: boolean;
         showOrgName: boolean;
+        useDummyNotifications: boolean;
     };
-    constructor(props: any);
-    hideRoutes(): void;
-    showRoutes(): void;
-    getTextColor(): any;
-    render(): JSX.Element;
-}
-export declare class Route extends React.Component<{
+};
+declare const Route: ({ active, colors, style, ...nativeProps }: {
     active: boolean;
+    children: React.ReactNode;
     colors: any;
-    style?: object;
     href?: string;
-}, {
-    entered: boolean;
-    down: boolean;
-}> {
-    constructor(props: any);
-    render(): JSX.Element;
-}
+    style?: object;
+}) => JSX.Element;
+export { Topbar, Route };

package/dist/modules/small_topbar.d.ts

@@ -1,48 +1,45 @@
-import * as React from "react";
+/// <reference types="react" />
 import * as PCO_URL from "@planningcenter/url";
-export declare class Topbar extends React.Component<{
-    apps: {
-        attributes: {
-            name: string;
-            url: string;
-        };
-    }[];
-    env: PCO_URL.Environment;
-    appName: string;
-    routes: any;
-    colors: any;
-    userAvatarPath: string;
-    userId: string;
-    userName: string;
-    orgName: string;
-    connectedPeople: {
-        id: number;
-        attributes: {
-            name: string;
-            organization_name: string;
-        };
-    }[];
-    style?: any;
-    currentRouteComponent?: any;
-    requestAppsFetch: any;
-    requestConnectedPeopleFetch: any;
-    requestUnlinkConnectedPeople: any;
-    requestSwitchConnectedPerson: any;
-    requestClearAppsCache: any;
-    requestClearConnectedPeopleCache: any;
-    notifications?: any;
-}, {
-    routesMenuVisible: boolean;
-    userMenuVisible: boolean;
-}> {
-    constructor(props: any);
-    static defaultProps: {
+declare const Topbar: {
+    (props: {
+        apps: {
+            attributes: {
+                name: string;
+                url: string;
+            };
+        }[];
+        env: PCO_URL.Environment;
+        appName: string;
+        routes: any;
+        colors: any;
+        userAvatarPath: string;
+        userId: string;
+        userName: string;
+        orgName: string;
+        connectedPeople: {
+            id: number;
+            attributes: {
+                name: string;
+                organization_name: string;
+            };
+        }[];
+        style?: any;
+        currentRouteComponent?: any;
+        requestAppsFetch: any;
+        requestConnectedPeopleFetch: any;
+        requestUnlinkConnectedPeople: any;
+        requestSwitchConnectedPerson: any;
+        requestClearAppsCache: any;
+        requestClearConnectedPeopleCache: any;
+        useDummyNotifications?: boolean;
+        notifications?: any;
+    }): JSX.Element;
+    defaultProps: {
         currentRouteComponent: (props: any) => JSX.Element;
     };
-    componentDidUpdate(): "" | "hidden";
-    render(): JSX.Element;
-}
-export declare const Route: ({ active, ...props }: {
+};
+declare const Route: ({ active, ...props }: {
     [x: string]: any;
     active: any;
 }) => JSX.Element;
+export { Route, Topbar };

package/dist/modules/symbols.d.ts

@@ -1,16 +1,32 @@
-import * as React from "react";
-export declare const Bell: React.StatelessComponent<{
+/// <reference types="react" />
+export declare const Bell: ({ dot, dotFill, fill, style, ...props }: {
     dot?: boolean;
     dotFill?: string;
     fill?: string;
-    stroke?: string;
     style?: object;
-}>;
-export declare const Spyglass: React.StatelessComponent<{
+}) => JSX.Element;
+export declare const BlankStateIcon: ({ dark, style, ...nativeProps }: {
+    dark?: boolean;
+    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 ExclamationTriangle: ({ fill, size, style, ...nativeProps }: {
+    fill?: string;
+    size: number;
+    style?: object;
+}) => JSX.Element;
+export declare const Spyglass: ({ fill, style, ...nativeProps }: {
     fill?: string;
     style?: object;
-}>;
-export declare const X: React.StatelessComponent<{
+}) => JSX.Element;
+export declare const X: ({ fill, style, ...nativeProps }: {
     fill?: string;
     style?: object;
-}>;
+}) => JSX.Element;