Nomenclature Predictably Misunderstood

    @guardian/braze-components
    TypeScript icon, indicating that this package has built-in type declarations

    7.3.0 • Public • Published

    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

    Use yarn link to develop against a locally checked out version of this library:

    In your local checkout of @guardian/braze-components:

    $ yarn link
    

    And then in the project consuming the client (e.g. DCR/frontend):

    $ yarn link "@guardian/braze-components"
    

    To revert back to using the published version of the package:

    $ yarn unlink "@guardian/braze-components"
    $ yarn install --force
    

    NOTE:

    • Ensure you build this library before adding it locally to your project, by running yarn build. You can also use yarn watch to build automatically when the source code is changed.

    • The external project (e.g. DCR/frontend) may not be set up to watch changes from linked modules. Removing: ignored: /node_modules/, from watchOptions in frontend will enable make watch (in frontend) to also track changes to braze-components.

    Publishing to NPM

    You'll need to be part of the @guardian NPM org. Ask someone to add you if you're not already.

    $ yarn release
    

    This will:

    • Build the package
    • Interactively ask for a new version number (and create a commit for the version change in package.json)
    • Publish the new release to NPM
    • Push new commits/tags to 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.

    Keywords

    none

    Install

    npm i @guardian/braze-components

    DownloadsWeekly Downloads

    1,342

    Version

    7.3.0

    License

    MIT

    Unpacked Size

    268 kB

    Total Files

    132

    Last publish

    Collaborators

    • georgeblahblah
    • idris-elliott-guardian
    • pete_f
    • novembertang
    • ab-gnm
    • yusuf.faraji
    • joecowton1
    • alinaboghiu.g
    • robertkenny_gu
    • jamesgorrie
    • oliverlloyd
    • arelra
    • marjank
    • jamieb-gu
    • zekehg
    • rtyley
    • dlawes
    • ghaberis
    • jsherbert
    • david.furey.gu
    • guardian-developers
    • simonadcock-gu
    • akash1810
    • reetta
    • ajwl
    • tomrf1
    • mchv
    • itsibitzi
    • justinpinner
    • nicl
    • philmcmahon
    • tjmw
    • thaliasilver
    • sndrs
    • sam.hession
    • jfsoul
    • 0x101
    • frankie_hammond
    • aoifemcl15
    • mxdvl
    • rhysmills
    • jacobwinch
    • annabeddow
    • michaelclapham_gnm
    • olly.namey.guardian