@planningcenter/topbar 8.4.0-alpha.0 → 8.4.0-alpha.1

package/README.md

@@ -114,6 +114,62 @@ If you are passing your own Jolt client object into Topbar via props, you can co
 If you are relying on Topbar to create its own Jolt connection and would like to enable logging, pass `enableJoltLogging={true}` as a prop to whichever topbar
 you are using (`SmallTopbar`/`NotSmallTopbar`).
 
+## Toolbar
+
+Toolbar lives alongside Topbar on the right side of the viewport. It is responsible for the global concerns of Profile, Help Desk, Tasks, Notifications, and Core Messaging.
+
+### Contributing
+
+Tool implementations are self-contained modules that live in the `modules/toolbar/tools/` directory.
+
+A tool module is required to have a named export which adheres to the following `ToolbarTool` interface.
+
+```ts
+interface ToolbarTool {
+  component: unknown // A React component. Stronger typing is in the works.
+  icon: string
+  name: string
+}
+```
+
+- `component`: the React component that will be rendered into the drawer when the tool is selected.
+- `icon`: the name of the [`tapestry-react` icon](https://planningcenter.github.io/tapestry-react/icon#preview-icons) that will be rendered as the button in Toolbar.
+- `name`: the formal name of the tool. For now, this is only surfaced for accessibility concerns on the tool's toolbar `Button`.
+
+### Example
+
+The following example implements an example tool using the shared `DrawerHeader` and `DrawerHeading` components.
+
+- `DrawerHeader` handles the placement and styling of the close button.
+- `DrawerHeading` handles the styling of the drawer heading.
+
+```ts
+// tool_name.tsx
+
+import { DrawerHeader, DrawerHeading } from "../components"
+
+import { ToolbarTool } from "../types"
+
+function ToolComponent({ closeDrawer }) {
+  return (
+    <>
+      <DrawerHeader closeDrawer={closeDrawer}>
+        <DrawerHeading>Tool name</DrawerHeading>
+      </DrawerHeader>
+      {/* Tool drawer content implementation */}
+    </>
+  )
+}
+
+const ToolName: ToolbarTool = {
+  component: ToolComponent,
+  icon: "general.toolbarIconName",
+  name: "Tool name",
+}
+
+export { ToolName }
+```
+
 ## Migrate
 
 These migration docs will guide you thru the process of updating to recent major releases.

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare const AppsButton: ({ appName, colors, displayIconOnly, expanded, onClick, style, ...nativeProps }: {
+    appName: string;
+    colors: any;
+    displayIconOnly?: boolean;
+    expanded: boolean;
+    onClick: any;
+    style?: object;
+}) => JSX.Element;
+export default AppsButton;

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

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

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

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

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

@@ -0,0 +1,11 @@
+import * as React from "react";
+declare const Hoverable: ({ active, component: C, hover, style, ...nativeProps }: {
+    active?: any;
+    children?: React.ReactNode;
+    component?: any;
+    hover?: any;
+    onClick?: any;
+    style?: object;
+    type?: string;
+}) => JSX.Element;
+export default Hoverable;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const NotificationBell: ({ indicatorVisible, style, ...props }: {
+    indicatorVisible?: boolean;
+    style?: object;
+}) => JSX.Element;
+export default NotificationBell;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Notification } from "../interfaces";
+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_menu.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import * as PCO_URL from "@planningcenter/url";
+import { Notification } from "../interfaces";
+declare const NotificationsMenu: ({ env, handleMarkAllAsRead, handleMarkAsRead, handleToggleRead, hasError, isLoading, mobile, notifications: { read, unread }, toggle, visible, }: {
+    env: PCO_URL.Environment;
+    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;
+}) => JSX.Element;
+export default NotificationsMenu;

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

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

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 export default class Outsider extends React.Component<{
-    component: any;
     cleanup: boolean;
+    component: any;
     onOutsideClick: any;
     visible: boolean;
 }, {}> {

package/dist/modules/components/popup_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_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_notifications.d.ts

@@ -0,0 +1,15 @@
+import * as PCO_URL from "@planningcenter/url";
+import { Notification } from "../interfaces";
+declare const useNotifications: ({ env, userId, }: {
+    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/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_text.d.ts

@@ -1,4 +1,9 @@
 /// <reference types="react" />
+export declare function Accounts({ color, size, ...platformProps }: {
+    [x: string]: any;
+    color: any;
+    size?: number;
+}): JSX.Element;
 export declare function API({ color, size, ...platformProps }: {
     [x: string]: any;
     color: any;

package/dist/modules/not_small_topbar.d.ts

@@ -1,91 +1,48 @@
 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 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: {
-            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;
+        onLinkToProfileClick?: () => any;
+    }): 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,42 @@
-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 ChevronIcon: ({ fill, size, style, ...nativeProps }: {
+    fill?: string;
+    size?: number;
+    style?: object;
+}) => JSX.Element;
+export declare const Cog: ({ fill, size, style, ...nativeProps }: {
+    fill?: string;
+    size?: number;
+    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;

package/dist/topbar.css

@@ -1,2 +1,2 @@
-.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.hide-scrollbar::-webkit-scrollbar{display:none}@-webkit-keyframes spinning{to{transform:rotate(1turn)}}@keyframes spinning{to{transform:rotate(1turn)}}.spinner{align-self:center;-webkit-animation:spinning .5s linear infinite;animation:spinning .5s linear infinite;border:2px solid #f7f7f7;border-radius:50%;border-top-color:#9e9e9e;display:inline;height:16px;transform:rotate(0deg);vertical-align:middle;width:16px}
+.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.hide-scrollbar::-webkit-scrollbar{display:none}
 /*# sourceMappingURL=topbar.css.map */

package/dist/topbar.css.map

@@ -1 +1 @@
-{"version":3,"sources":["utils.css","spinner.css"],"names":[],"mappings":"AAAA,gBACE,uBAAwB,CACxB,oBACF,CACA,mCACE,YACF,CCNA,4BACE,GAEE,uBACF,CACF,CACA,oBACE,GAEE,uBACF,CACF,CAEA,SACE,iBAAkB,CAClB,8CAAyC,CAAzC,sCAAyC,CAKzC,wBAAiB,CAHjB,iBAAkB,CAGlB,wBAAiB,CACjB,cAAe,CACf,WAAY,CACZ,sBAAuB,CACvB,qBAAsB,CACtB,UACF","file":"topbar.css","sourcesContent":[".hide-scrollbar {\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n}\n.hide-scrollbar::-webkit-scrollbar {\n  display: none; /* Chrome, Safari, and Opera */\n}\n","@-webkit-keyframes spinning {\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n@keyframes spinning {\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n\n.spinner {\n  align-self: center;\n  animation: spinning 500ms infinite linear;\n  border-color: hsl(0 0% 97%);\n  border-radius: 50%;\n  border-style: solid;\n  border-top-color: hsl(0 0% 62%);\n  border-width: 2px;\n  display: inline;\n  height: 16px;\n  transform: rotate(0deg);\n  vertical-align: middle;\n  width: 16px;\n}\n"]}
+{"version":3,"sources":["utils.css"],"names":[],"mappings":"AAAA,gBACE,uBAAwB,CACxB,oBACF,CACA,mCACE,YACF","file":"topbar.css","sourcesContent":[".hide-scrollbar {\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n}\n.hide-scrollbar::-webkit-scrollbar {\n  display: none; /* Chrome, Safari, and Opera */\n}\n"]}