@planningcenter/core-automations

@planningcenter/core-automations

A package for implementing core automations in a product.

Usage

Installation

yarn add @planningcenter/core-automations

Displaying Core Automations

import { Automations } from "@planningcenter/core-automation"

...

<Automations
  blankStateDescription="Automations supercharge your form..."
  currentPersonCanCreate={true}
  currentPersonId={123456789}
  defaultApp="people"
  theme={theme} // Tapestry-React theme object
  triggerConditions={{ data: { relationships: { form: { data: { id: form.id } } } } }}
  triggerName="people.v2.events.form_submission.created"
  triggerResource="vzfnx3tc87lx1c1d8Ak1clkrwqZfnA294t..."
/>

Props

• blankStateDescription (string): Text to be displayed when there are no current automations
• currentPersonCanCreate (boolean): Can the user create an automation?
• currentPersonId (number): ID of current user
• defaultApp (string): Which app should be selected by default?
• theme (object) optional: Accepts a Tapestry-React theme object
• triggerConditions (object): The specific conditions for triggering this automation
• triggerName (string): Name of trigger
• triggerResource (string): An encrypted trigger resource

Theming

Each host app can pass in a Tapestry-React theme file to the theme prop to customize the colors and styles of the component. Although some UI elements will remain consistent across all apps, the colors and styles of <Button>s and <Link>s will be directly affected by the theme oject passed in. If none is passed in, the default Tapestry-React theme will be used.

If your app is already using Tapestry-React, you can simply reuse whatever you normally pass to ThemeProvider. If your app is not currently using Tapestry-React, you can create a simple theme object that defines the primary colors to be used. Although there are plenty of other values that can be defined, the following colors that start with primary* are the most important.

  const theme = {
    colors: {
      primary: "#4076e2",
      primaryLight: "#6590e7",
      primaryLighter: "#adc3f0",
      primaryLightest: ...,
      primaryDark: ...,
      primaryDarker: ...,
      primaryDarkest: ...,
    }
  }

For more information about theming in Tapestry-React, see https://planningcenter.github.io/tapestry-react/theming.

Contributing

If you'd like to contribute, you can find details for getting started in the contribution guide.