# Bronte

Bronte is a component library developed using the following technologies:

Bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

Built using [TypeScript](https://www.typescriptlang.org/) and [React](https://reactjs.org/).

And styled using the [STYLABLE](https://stylable.io/).

### `npm install`

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

### `npm start`

Runs the app in the development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.<br>
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](https://jestjs.io/docs/snapshot-testing)

### `npm run build`

Builds the app for production to the `build` folder.<br>
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](https://verdaccio.org/).

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