sterlingconwell / courier-react Goto Github PK

This repository, also called In-App, is a set of features and components that can work inside our customers websites. Courier is a powerful application but integrating all of the features into your frontend manually can be overwhelming and time consuming. This is where In-App steps up and can superpower your application by providing Realtime Messaging (Toast), an Inbox, Notification Preferences, and many more coming soon!

Want to use packages with other frameworks/libraries like angular or vue? Check out how to do Embedded Integration

We've recently created both 2.X and 3.X releases related to this monorepository. This is because we've migrated to a new simpler, streamlined style for our components and there are breaking changes with props and api. Below is a short description of each of our versions:

The 1.X versions will consist of our old UX, and use our legacy APIs. If you are a free tier customer your data retention on 1.X will be limited to 30 days and subject to change.

We introduced a new theme that makes the UX smaller and simplifies the UX. Some of the notable changes are:

1. Single list design - no more tabs
2. Entire message is clickable vs having action buttons
3. Make all actions (read/unread/archive) displayable without having to click into a menu
4. Expose "archive" as an action

The 2.X version will now default to this new theme and will utilize our new API that does not have the same data retention as the legacy API.

You can still access the 1.X designs by passing theme.name === "classic" to the Inbox component

We created a separate breaking change branch to make sure our bundles are small and optimized. We didn't want to bundle any uneccesary code to support the "classic" theme so 3.0 has removed all the deprecated code. There are breaking changes and a

• Inbox migration guide
• Toast migration guide
• Hooks migration guide

1. Contributing
2. Packages

components

This package imports the other react components and bundles them up using webpack and preact to create a bundle that can be used to render all of our components in a frontend that does NOT use React.

react-provider

This package exports a component called CourierProvider which creates a context object that is required for the following packages.

react-toast

Toast is a non modal, component used to display brief, optional-expiring windows of information to a user. This can be integrated with a push provider or can be triggered manually.

react-inbox

Inbox is a component used to display a history of read and unread messages to a user. If we send a message to a user when they are not logged in, or if they didn't interact with the message before it disappeared, we also have an Inbox to show the history of messages received.

react-hooks

hooks that can be used to build your own inbox or interact with other parts of Courier.

• useInbox
• usePreferenes

client-graphql

GraphQL library that interacts with Courier's backend

react-brand-designer

The "React Brand Designer" package provides components with a slick UI for branding notifications delivered with Courier. This enables your own users to personalize their brand-able notifications like emails without leaving your app or site.

types

Utility package to share common Typescript types and interfaces shared between packages

storybook

Our development environment. This package depends on all the other packages and imports them into a storybook instance. This allows us to develop in an isolated environment.