npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@guardian/braze-components

v18.1.1

Published

React components to render messages from Braze

Downloads

3,606

Readme

Braze Components

A library of React components for displaying Braze messages on DCR and frontend.

Braze messages are exposed in two ways to address two separate use cases.

  1. One-shot messages
  2. Persistent notifications

One-shot messages use Braze's in-app messages to show a user a single message impression. This is analagous to an ad impression. As with ads, these messages are often competing with other systems for shared message slots on the page. These messages are exposed by the BrazeMessages class.

Persistent notifications are backed by Braze content cards. These notifications persist until they are dismissed (automatically or by the user), or they expire. Notifications from different sources can peacfully co-exist. These notifications are exposed by the BrazeCards class.

Development

Local Setup

$ bin/setup

Storybook

We use Storybook when building components. Run Storybook with:

$ yarn storybook

The Grid image picker integration in Storybook requires auth. If necessary you'll be redirected to the gutools login service. When developing, this means running the login service locally. Often when developing you won't need to use the image picker. In this case you can skip auth entirely by running Storybook like this:

$ STORYBOOK_DISABLE_AUTH=true yarn storybook

This means you won't need to run the login service locally.

Point a project to your local version of @guardian/braze-components

Sometimes it's useful to test a braze-components change against a locally running version of a project which uses it, for example DCR.

It is recommended to use yalc to do this.

Install yalc

Follow the instructions in the yalc README.

Build @guardian/braze-components locally

$ yarn build

Publish your local @guardian/braze-components to the local yalc registry

In your local checkout of @guardian/braze-components, at the root:

$ yalc publish

Use the version of braze-components from the local yalc registry

$ yalc add @guardian/braze-components

For example, for DCR this should be run from within the dotcom-rendering sub-project.

This will update the local package.json with a yalc ref. This is expected, but the change shouldn't be committed.

Notes

The steps above should be repeated when you make a change to braze-components and you want to see it locally. Don't forget to re run yarn build!

Publishing to NPM

Releasing to NPM is handled with changesets and is performed by CI.

On your feature branch, before merging, run yarn changeset. This will interactively ask you what kind of change this is (major, minor, patch) and allow you to describe the change. Commit the generated changeset file to git and push to your branch.

When you merge the branch, a version release PR will be automatically opened. When this PR is merged, a new release will be pushed to NPM. The version change will be based on the information in your changeset file. If the version release PR isn't merged straight away, that's fine. Any other PRs with changesets merged in the meantime will cause the release PR to be updated.

Not all PRs require releasing and therefore don't need a changeset. For example a change to the README.

Steps following merge to main

For dotcom-rendering:

  • Run checkout main branch and git pull
  • Run checkout -b to start a new branch for the update PR
  • Update the braze-components dependency in dotcom-components/dotcom-components/package.json
  • Run yarn to update the yarn.lock file in the DCR root
  • Push the branch and create the PR in GitHub.
  • If the change involves visual changes to components, capture this via screenshots and include in the PR
  • If the change involves updates to component layout, add code to DCR Storybook files to reflect those changes
  • If necessary (it isn't always), take DCR CODE (announce first in the P&E/Dotcom CODE Semaphore chat) and deploy code there.
  • If all is good and the PR is approved, merge PR to main (in GitHub)

For frontend:

  • Run checkout main branch and git pull
  • Run checkout -b to start a new branch for the update PR
  • Update the braze-components dependency in /package.json
  • Run make install compile to update dependency lock file
  • Push the branch and create the PR in GitHub.
  • If necessary (it isn't always), take Frontend CODE (announce first in the P&E/Dotcom CODE Semaphore chat) and deploy code there.
  • If all is good and the PR is approved, merge PR to main (in GitHub)

CI/CD

Whenever you push to GitHub actions will be triggered to run Jest tests, the TypeScript compiler etc. A TeamCity build will also be triggered. On the main branch if the TeamCity build is successful Riff Raff will deploy Storybook to https://braze-components.gutools.co.uk.