@bc-digital/bronte
v0.2.72
Published
Component library built with stylable.
Downloads
177
Readme
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 insrc/components/YourComponent/__tests__/
. - Add your
README.mdx
to describe and demonstrateYourComponent
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