Bronte

Bronte is a component library developed using the following technologies:

Bootstrapped with Create React App.

Built using TypeScript and React.

And styled using the STYLABLE.

npm install

Installs all the necessary packages to be able to run Bronte locally.

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner. We are currently using Snapshot Testing to compare the html output of our UI components.

You can even update the snapshots with npm run test:update or using the u key in --watch mode (npm run test -- --watch)

You can read more here https://jestjs.io/docs/snapshot-testing

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

Publishing to NPM

• Update the version in package.json
• Get PR merged.

Then:

• Run git checkout origin main
• Run git pull origin main
• Run git tag <version>
• Run git push origin main --tags
• Run npm run build
• Run cd dist
• Run npm publish

Notes:

• If this is your first publish, you may need to run npm login.

Creating components

• In components folder create a new component folder.
• Follow the folder structure for the component, Alert as an example:

├── components
│   └── Alert
│       └── __tests__
│          └── __snapshots__
│             └── Alert.test.tsx.snap
│          └── Alert.test.tsx
│       └── examples
│          └── examples.tsx
│       ├── Alert.tsx
│       ├── alert.st.css
│       └── README.mdx

• Create a test folder in YourComponent folder.
• Add YourComponent.tsx file.
• Add yourcomponent.st.css file.
• Add Yourcomponent.test.tsx file in src/components/YourComponent/__tests__/.
• Add your README.mdx to describe and demonstrate YourComponent and related examples.

Testing with Verdaccio

To be able to verify changes in Bronte don't break Rhino. We've introduced Verdaccio.

In order to utilise this tool for local development, you need to install Verdaccio. Either install via npm or docker. See below:

Docker

• Run: docker run -it --rm --name verdaccio -p 4873:4873 verdaccio/verdaccio.
• Or detached mode: docker run -it --detach --rm --name verdaccio -p 4873:4873 verdaccio/verdaccio. To close this container after usage: docker stop <container id>
• Leave the terminal running open whilst you develop. This will act as your npm registry where you publish Bronte to, for usage on Zoo (Rhino/Puma).

npm

• Run npm -g install verdaccio.
• Then: verdaccio.
• Again, leave this running until you're finished.

Workflow

Once verdaccio is running. Visit: http://localhost:4873 here it will ask you to register with your registry. Run: npm adduser --registry http://localhost:4873. You can then login to your registry by:

npm login --registry http://localhost:4873

Now, you need to publish your changes to the registry. I've added the following npm script:

• npm run publish-local

This allows devs to test their changes locally (npm start etc) and then allows them to publish their changes to a registry. Allowing Rhino and Puma to utilise this local registry.

After you've run npm run publish-local verify the changes are in the registry. Then head over the Rhino and Puma and follow the workflow there.

To unpublish run npm run unpublish-local.

Storybook

Keyboard Shortcuts

The list of useful keyboard shortcuts can be found clicking on the 3 dots on the top left of the screen, next to the British Council logo. You can then click on Keyboard Shortcuts [⌘] [⇧] ​[,] to see the full list

Known issues

Currently CRA is overriding tsconfig.json on npm run start, for that reason tsconfig-npm.json has been created, this is the one currently being used to compile. In the future, once Bronte gets decoupled from the demo site, this overriding issue should be solved, then 1 single tsconfig.json can be used.

Storybook

Depending on the browser, the addons panel might be off by default.

• Pressing A turns addons panel on/off
• Pressing D toggles the position of the addons panel