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

small-bricks

v1.1.9

Published

small reusable components

Downloads

2

Readme

Small-Bricks components library

Before contributing into this project, please be aware of best practices and try to follow

Demo

Check out the components and how to use them here.

Install

npm install small-bricks

Usage

Example

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'small-bicks';

const Button = () =>
  <Button size="medium" tag="primary" onClick={() => null} >
    Primary Button
  </Button>;

ReactDOM.render(
    <Button />,
    document.getElementById('app')
);

Project setup

  1. to install the project locally
  2. run npm install
  3. run npm start to run storybook
  4. it will prompt you with localhost:port url, navigate to that url
  5. see more information on storybook on the (official website)[https://storybook.js.org/] or below

Feature Request

If you wish to contribute, just create a new issue/feature you wan to add abd start working on it, once you are done make a p.r

ESLint

Yes, we lint our files.
Lint will ensure that so best practices are followed. Search the error messages and learn with that.
Make sure that all your .js files are passing the lint check before open a PR.
There is pre-commit hook that won't allow you to commit without fixing the lint alerts.

Unit Test and Storybook

The project has Storybook and unit testing.
Following TDD you need first to write a small story, with an empty component and the unit tests and then we develop the component.
If you don't know Storybook take a time to learn it.
It's a great tool for creating single responsibilities components given the ability to change the components props and states through its interface and share with other people from the team (designers =D).
Test stack consist of Mocha, Chai, Enzyme and Sinon.
The test are attached with an addon to the component story. You can follow the tests results directly through Storybook at the right panel under the specification tab.