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

billin-ui

v7.13.0

Published

A library of React components used in the Billin Frontend project.

Downloads

224

Readme

Billin UI Library

A library of React components used in the Billin Frontend project.

Installation

Just follow the basic npm ci flow to install dependencies. After that you can see the components in action running npm start.

Publishing a new version

New horizons are arising with new necessities for us. So we are no longer automatically increasing versions with merges to master branch. We now use manual control.

First of all remember that the workflow depends on a good habit. Use the npm run c command for each commit, and follow the steps the CLI tool ask you.

In order to publish a new version run the npm run publish-version command from package.json. This command do the following:

  • Generate the new version tag thanks to Standard Version (this is the reason for the good habit mentioned before).
  • Push the new tag to Github.
  • Publish in NPM the new version.
  • Publish a new version of styleguidist in Github Pages.

Workflow

We have four major branches, each one with a main purpose:

  • upkeep-v3: contains the freezed major version of the library, to be used in the v3 version of the platform while the rebuild project is undertake. DO NOT ADD BREAKING CHANGES TO THIS BRANCH.
  • master: it holds the current build of the library. Do not commit directly to this one. Each change to this branch should be done via PR.
  • staging: this branch is for bug fixes out of the usual flow of sprints. That way we don't have to wait to have current development ready to deploy new
  • development: this one is for the work done in the current sprint.

If you merge a PR against staging remember that you have to bring those changes into development to avoid further conflicts.

Testing

Testing is done with Jest, Enzyme and Jasmine Matchers. You can refer to Button.test.js as an example.

> npm run test

or (for getting coverage):

> npm run test:coverage

Linting and formating

Linting is set up through ESLint and configured with eslint-config-airbnb You can modify linting rules by overriding them in the .eslintrc.json file.

> npm run lint

or (for for automatic fixing if possible)

> npm run lint:fix

to format the code with prettier use

> npm run format

Publishing the library to NPM

Every time we push changes to master branch, CircleCI automatically generates a new version of the package and publish it in NPM.

To release it manually you can do it with the following commands:

> npm run release
> npm publish

In case you want to publish a beta version you can push changes to beta branch. CircleCI will generate a new beta version and publish it in NPM.

Styleguide

For custom layouts, styleing and more information about the Styleguide please refer to React Styleguidist documentation.

Deploy the Styleguide to GitHub Pages

> npm run pre-deploy
> npm run deploy

Scripts

  • npm run c : Uses commitizen to commit changes following a standard.
  • npm run dev : Executes the develop mode, running watcher and the Stylguide, rebuilding your library on every change.
  • npm run start : Only serves the Styleguide.
  • npm run build : Builds your library (build can be found in dist folder).
  • npm run test : Runs the tests.
  • npm run test:coverage: Runs the test and shows the coverage.
  • npm run lint : Runs the linter.
  • npm run lint:fix : Runs the linter and fixes automatic fixable issues.
  • npm run format : Runs prettier to fix code format issues.
  • npm run release : Publishes your Library on NPM or your private Registry (depending on your config in your .npmrc file).
  • npm run predeploy: Builds the static Styleguide in case you want to deploy it.
  • npm run deploy: Deploys the Styleguide to GitHub Pages.

Resources

Bundler

Styleguide

Testing

Linting

Compiler