@planningcenter/core-automations 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# Changelog
+
+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).
+
+## [0.1.0] - 2023-03-14
+
+### Added
+
+- Set up intial repo with components extracted from People's original implementation.
+- Set up basic theme that includes necessary icons along with host app styles.
+- Add basic usage information to README.
+
+[0.1.0]: https://github.com/planningcenter/core-automations/releases/tag/v0.1.0

package/README.md

@@ -0,0 +1,68 @@
+# @planningcenter/core-automations
+
+A package for implementing core automations in a product.
+
+## Usage
+
+### Installation
+
+```bash
+yarn add @planningcenter/core-automations
+```
+
+### Displaying Core Automations
+
+```jsx
+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](https://planningcenter.github.io/tapestry-react/theming)
+- `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.
+
+```js
+  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](/CONTRIBUTING.md).