Getting Started: Developing with Barista

File Watch

Once you begin writing JS code within the Barista repo, you'll need to make those changes visible in your browser.

• open up a terminal and run the following commands

  #change to the barista repo folder
  cd /path/to/your/wordpress/install/wp-content/plugins/barista
  yarn dev:all
  

  That will put webpack into development mode and activate polling. This will monitor all of Barista's folders for changes and hotswap those changes with the built assets. Waiting a few seconds after saving then refreshing the browser should make your changes appear.

Storybook

To build components in isolation from the rest of the system, we use Storybook. To activate storybook, simply open up a terminal and run:

yarn sb

Unit Testing

For unit testing we use [jest]{https://jestjs.io/}. Unit tests run automatically when pushing changes to the repo via a GitHub Action, but you can also run them locally in the terminal using:

yarn test

End to End (E2E) Testing

For E2E testing we use [playwright]{https://playwright.dev/}. E2E tests also run automatically when pushing changes to the repo via a GitHub Action, but you can also run them locally in the terminal using:

yarn test:e2e

or

yarn test:e2e:watch

to activate file watch mode so that changes get picked up right away.

Utilities

On top of React, Typescript, and Sass, we use the following libraries to help us with development:

• Chakra UI - a great, simple, and accessible UI component library

• Classnames - a simple utility for conditionally joining classNames together.

• date-fns - a dates and times utility library like Moment but with a better functional approach

• Prettier - the self-proclaimed opinionated code formatter

• Ramda - a set of utilities like lodash but with a better functional approach