npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@bc-digital/bronte

v0.2.72

Published

Component library built with stylable.

Downloads

176

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 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