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

@anyfin/ui

v5.4.35

Published

Anyfin UI component library

Downloads

553

Readme

ui-components

npm latest package

Bundlephobia

Bundlephobia

Storybook

UI Components is a collection of React components for building web interfaces.

Demo

Installation

@anyfin/ui is available as an npm package and can be installed on any React web project.

yarn add @anyfin/ui

Use Case: create new components in storybook

  • Run Storybook on a separate terminal using yarn storybook

Open http://localhost:6006 with your browser to see Storybook and the list of component stories.

You can start modifying the components, and they will update automatically in Storybook to reflect the changes. If you change the functionality of any component (e.g., removing or adding props) don't forget to update the component's stories and documentation to reflect those changes.

Use Case: Develop in sync with web or mypages

  • Run the build in watch mode using yarn dev and link this package to web or mypages.

If you are working on the web or mypages project, sometimes you want to modify some @anyfin/ui components and see them update on that project as well. You can achieve this by running the following commands. in the ui-components repository, run: yarn link.

Then, in the web/mypages directory run yarn link @anyfin/ui. Now the component set is linked to code in the web/mypages directory which means they should update.

Don't forget to run dev mode (yarn dev) in this repository and the one you have linked this one against (e.g. web or mypages).

Publishing new versions

@anyfin/ui is available as an npm package. You will need access to the npm organization in order to publish new versions of this package.

Using Github

Make sure to include the version bump in package.json in your PR, if your changes are merged in master go to "Releases" -> Draft a new release. Here, you can create the "release" that will be published to npm. By default this should be the latest master (with your changes included).

Using a CLI

To publish a new version, run yarn version to create new tags and yarn publish to publish these to npm. This package follows semver versioning.

Updating storybook

A merge in master will automatically update the only storybook.