@planningcenter/topbar 8.3.3-rc.2 → 8.3.3-rc.4

package/README.md

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

@@ -0,0 +1,10 @@
+export { railsCsrfFetch } from "./modules/api_request";
+export { AppsProvider, mapApps, mapResourcesToCalendar, } from "./modules/apps_provider";
+export { ConnectedPeopleProvider } from "./modules/connected_people_provider";
+export { DisplaySwitch } from "./modules/display_switch";
+export { Topbar as NotSmallTopbar, Route as NotSmallRoute, } from "./modules/not_small_topbar";
+export { Topbar as SmallTopbar, Route as SmallRoute, } from "./modules/small_topbar";
+export { Topbar as MediumTopbar, Route as MediumRoute, } from "./modules/medium_topbar";
+export { default as PlatformAnnouncements, StyleProvider as PlatformAnnouncementsStyleProvider, StyledAnnouncement as StyledPlatformAnnouncement, } from "./modules/platform_announcements";
+export { ProductAnnouncement, StyleProvider as ProductAnnouncementStyleProvider, StyledAnnouncement as StyledProductAnnouncement, StyledDismissButton as StyledProductAnnouncementDimissButton, } from "./modules/product_announcement";
+export { Bell as BellIcon, X as XIcon, Spyglass as SpyglassIcon, } from "./modules/symbols";

package/dist/modules/api_request.d.ts

@@ -0,0 +1,18 @@
+declare global {
+    interface Window {
+        Rails?: {
+            csrfToken: () => string;
+        };
+    }
+}
+export declare type Fetch = typeof fetch;
+export declare const defaultFetch: Fetch;
+export declare const railsCsrfFetch: Fetch;
+export default function apiRequest(fetch: Fetch, url: string, { method, data }?: {
+    method?: string;
+    data?: any;
+}): Promise<{
+    response: Response;
+    json: any;
+    ok: boolean;
+}>;

package/dist/modules/apps_provider.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+import * as PCO_URL from "@planningcenter/url";
+import { Fetch } from "./api_request";
+export declare class AppsProvider extends React.Component<{
+    env: PCO_URL.Environment;
+    formatter?: any;
+    configuredFetch?: Fetch;
+    render: (apps: object[], callback: any) => React.ReactElement<any>;
+}, {
+    apps: object[];
+}> {
+    constructor(props: any);
+    static defaultProps: {
+        formatter: typeof mapApps;
+        configuredFetch: typeof fetch;
+    };
+    fetch(): void;
+    remove(): void;
+    componentDidMount(): void;
+    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: {
+        name: string;
+        url: string;
+    };
+}
+export declare function mapResourcesToCalendar(apps: App[]): App[];
+export declare function mapApps(apps: App[]): App[];
+export {};

package/dist/modules/avatar.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import * as PCO_URL from "@planningcenter/url";
+export declare function Avatar({ env, url: incomingUrl, style, ...nativeProps }: {
+    env: PCO_URL.Environment;
+    url?: string;
+    style?: object;
+}): JSX.Element;

package/dist/modules/client_storage.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export declare class ClientStorage extends React.Component<{
+    item: string;
+    method?: "localStorage" | "sessionStorage";
+    render: (apps: any, other: any) => React.ReactElement<any>;
+}, {}> {
+    static defaultProps: {
+        method: string;
+    };
+    update(value: any): void;
+    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_icon.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function ColorAppIcon({ appName, size, }: {
+    appName: string;
+    size?: number;
+}): JSX.Element;

package/dist/modules/color_app_squircles.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare function Accounts(): JSX.Element[];
+export declare function API(): JSX.Element[];
+export declare function Calendar(): JSX.Element[];
+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[];
+export declare function Resources(): JSX.Element[];
+export declare function Services(): JSX.Element[];

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import * as PCO_URL from "@planningcenter/url";
+declare const AppsMenu: ({ appName, apps, env, toggle, visible, }: {
+    appName: string;
+    apps: {
+        attributes: {
+            name: string;
+            url: string;
+        };
+    }[];
+    env: PCO_URL.Environment;
+    toggle: any;
+    visible: boolean;
+}) => JSX.Element;
+export default AppsMenu;

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

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

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+export default 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;
+}

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

@@ -0,0 +1,9 @@
+import * as React from "react";
+declare const Popup: ({ component: C, style, ...nativeProps }: {
+    children?: React.ReactNode;
+    component?: any;
+    style?: object;
+    onOutsideClick?: any;
+    cleanup?: any;
+}) => JSX.Element;
+export default Popup;

package/dist/modules/connected_people_provider.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import * as PCO_URL from "@planningcenter/url";
+import { Fetch } from "./api_request";
+export declare class ConnectedPeopleProvider extends React.Component<{
+    env: PCO_URL.Environment;
+    configuredFetch?: Fetch;
+    render: (connectedPeople: object[], callback: any) => React.ReactElement<any>;
+}, {
+    connectedPeople: object[];
+}> {
+    constructor(props: any);
+    static defaultProps: {
+        configuredFetch: typeof fetch;
+    };
+    fetch(): void;
+    remove(): void;
+    unlink(): void;
+    switch(toId: string, returnPath: string): void;
+    componentDidMount(): void;
+    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

@@ -0,0 +1,26 @@
+import * as React from "react";
+export declare class PointBreak extends React.Component<{
+    render: (breakpoint: string) => React.ReactElement<any>;
+}, {
+    width: number;
+}> {
+    constructor(props: any);
+    setWindowWidth(): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    breakpointString(width: any): "xs" | "sm" | "md" | "lg" | "xl";
+    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[];
+    mediumBreakpoints: String[];
+    smallTopbar: (breakpointShorthand: string) => React.ReactElement<any>;
+    mediumTopbar?: (breakpointShorthand: string) => React.ReactElement<any>;
+    notSmallTopbar: (breakpointShortand: string) => React.ReactElement<any>;
+}, {}> {
+    static defaultProps: {
+        smallBreakpoints: string[];
+        mediumBreakpoints: string[];
+    };
+    render(): JSX.Element;
+}

package/dist/modules/formatters.d.ts

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

package/dist/modules/get_apps_switch_product_path.d.ts

@@ -0,0 +1 @@
+export default function getAppsSwitchProductPath(productName: string): string;

package/dist/modules/medium_topbar.d.ts

@@ -0,0 +1,46 @@
+import * as React from "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: {
+        currentRouteComponent: (props: any) => JSX.Element;
+    };
+    render(): JSX.Element;
+}
+export declare const Route: ({ active, style, name, ...props }: {
+    [x: string]: any;
+    active: any;
+    style: any;
+    name?: string;
+}) => JSX.Element;

package/dist/modules/mono_app_icon.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare function MonoAppIcon({ appName, colors, style, size, ...platformProps }: {
+    appName: string;
+    colors: any;
+    style?: any;
+    size?: number;
+}): JSX.Element;

package/dist/modules/mono_app_name.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function MonoAppName({ appName, color, size }: {
+    appName: any;
+    color: any;
+    size?: number;
+}): JSX.Element;

package/dist/modules/mono_app_symbols.d.ts

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+export declare function Squircle({ color, ...platformProps }: {
+    [x: string]: any;
+    color?: string;
+}): JSX.Element;
+export declare function Accounts({ color, ...platformProps }: {
+    [x: string]: any;
+    color: any;
+}): JSX.Element;
+export declare function API({ color, ...platformProps }: {
+    [x: string]: any;
+    color: any;
+}): JSX.Element;
+export declare function Calendar({ color, ...platformProps }: {
+    [x: string]: any;
+    color: any;
+}): JSX.Element;
+export declare function CheckIns({ color, ...platformProps }: {
+    [x: string]: any;
+    color: any;
+}): JSX.Element;
+export declare function ChurchCenter({ color, ...platformProps }: {
+    [x: string]: any;
+    color: any;
+}): JSX.Element;
+export declare function Giving({ color, ...platformProps }: {
+    [x: string]: any;
+    color: any;
+}): JSX.Element;
+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;
+}): JSX.Element;
+export declare function Publishing({ color, ...platformProps }: {
+    [x: string]: any;
+    color: any;
+}): JSX.Element;
+export declare function Registrations({ color, ...platformProps }: {
+    [x: string]: any;
+    color: any;
+}): JSX.Element;
+export declare function Resources({ color, ...platformProps }: {
+    [x: string]: any;
+    color: any;
+}): JSX.Element;
+export declare function Services({ color, ...platformProps }: {
+    [x: string]: any;
+    color: any;
+}): JSX.Element;

package/dist/modules/mono_app_text.d.ts

@@ -0,0 +1,61 @@
+/// <reference types="react" />
+export declare function API({ color, size, ...platformProps }: {
+    [x: string]: any;
+    color: any;
+    size?: number;
+}): JSX.Element;
+export declare function Calendar({ color, size, ...platformProps }: {
+    [x: string]: any;
+    color: any;
+    size?: number;
+}): JSX.Element;
+export declare function CheckIns({ color, size, ...platformProps }: {
+    [x: string]: any;
+    color: any;
+    size?: number;
+}): JSX.Element;
+export declare function ChurchCenter({ color, size, ...platformProps }: {
+    [x: string]: any;
+    color: any;
+    size?: number;
+}): JSX.Element;
+export declare function Giving({ color, size, ...platformProps }: {
+    [x: string]: any;
+    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;
+    size?: number;
+}): JSX.Element;
+export declare function People({ color, size, ...platformProps }: {
+    [x: string]: any;
+    color: any;
+    size?: number;
+}): JSX.Element;
+export declare function Publishing({ color, size, ...platformProps }: {
+    [x: string]: any;
+    color: any;
+    size?: number;
+}): JSX.Element;
+export declare function Registrations({ color, size, ...platformProps }: {
+    [x: string]: any;
+    color: any;
+    size?: number;
+}): JSX.Element;
+export declare function Resources({ color, size, ...platformProps }: {
+    [x: string]: any;
+    color: any;
+    size?: number;
+}): JSX.Element;
+export declare function Services({ color, size, ...platformProps }: {
+    [x: string]: any;
+    color: any;
+    size?: number;
+}): JSX.Element;

package/dist/modules/not_small_topbar.d.ts

@@ -0,0 +1,91 @@
+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;
+        search: () => any;
+        linkToProfile: boolean;
+        showOrgName: boolean;
+    };
+    constructor(props: any);
+    hideRoutes(): void;
+    showRoutes(): void;
+    getTextColor(): any;
+    render(): JSX.Element;
+}
+export declare class Route extends React.Component<{
+    active: boolean;
+    colors: any;
+    style?: object;
+    href?: string;
+}, {
+    entered: boolean;
+    down: boolean;
+}> {
+    constructor(props: any);
+    render(): JSX.Element;
+}

package/dist/modules/platform_announcements.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import * as PCO_URL from "@planningcenter/url";
+import { Fetch } from "./api_request";
+export declare class StyledAnnouncement extends React.Component<{
+    style?: object;
+}, {}> {
+    render(): JSX.Element;
+}
+export declare class StyleProvider extends React.Component<{
+    style?: object;
+    className?: string;
+    colors: any;
+}, {}> {
+    render(): JSX.Element;
+}
+export default class PlatformAnnouncements extends React.Component<{
+    colors: any;
+    env: PCO_URL.Environment;
+    data: object;
+    renderItem?: any;
+    configuredFetch?: Fetch;
+}, {}> {
+    static defaultProps: {
+        renderItem: ({ announcement, actions }: {
+            announcement: any;
+            actions: any;
+        }) => JSX.Element;
+        configuredFetch: typeof fetch;
+    };
+    render(): JSX.Element;
+}

package/dist/modules/product_announcement.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export declare function ProductAnnouncement({ colors, html, onClick, ...props }: {
+    [x: string]: any;
+    colors: any;
+    html?: string;
+    onClick?: (event: any) => void;
+}): JSX.Element;
+export declare class StyleProvider extends React.Component<{
+    style?: object;
+    className?: string;
+    colors: any;
+}, {}> {
+    render(): JSX.Element;
+}
+export declare class StyledAnnouncement extends React.Component<{
+    style?: object;
+}, {}> {
+    render(): JSX.Element;
+}
+export declare function StyledDismissButton({ ...props }: any): JSX.Element;

package/dist/modules/small_topbar.d.ts

@@ -0,0 +1,48 @@
+import * as React from "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: {
+        currentRouteComponent: (props: any) => JSX.Element;
+    };
+    componentDidUpdate(): "" | "hidden";
+    render(): JSX.Element;
+}
+export declare const Route: ({ active, ...props }: {
+    [x: string]: any;
+    active: any;
+}) => JSX.Element;