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

@macpaw/macpaw-ui

v4.17.0

Published

## Installation

Downloads

4,349

Readme

macpaw-ui

Installation

Install with npm:

npm install --save @macpaw/macpaw-ui

or with yarn:

yarn add @macpaw/macpaw-ui

And import stylesheets manually:

import '@macpaw/macpaw-ui/lib/ui.css';

Adding new Component

  • Add Component's JSX and styles to src/%ComponentName% directory
  • Import Component's JS, styles to ui.js and ui.scss correspondingly
  • Add document page in /pages/%component-name%.mdx

Adding new Icons

  • All common icons should have size 24x24px and dynamic (not hard-coded) fill attribute (so it can be changed / overridden later is CSS or React component)
  • Add new SVG file icon to src/Icons/svg/%name%_icon.svg
  • Run yarn icons CLI command

Requirements

  • Node 20+
  • npm 7+ (lock file v2)

Library Release Process

Our library release process is designed to ensure quality, consistency, and proper versioning. The process is broken down into multiple stages to ensure every change is tracked, reviewed, and integrated appropriately. We use changesets for version and release management.

1. Adding Changes

Whenever you introduce a new change, run the command:

You have to do this at least once per branch with some changes.

npm run changes:add
  • The CLI will prompt you with questions regarding your changes. You'll need to specify the nature and level of the changes (options: patch, minor, major).
  • After completing the CLI prompts, commit the changes with a commit message similar to chore: update changesets.

2. Releasing and Publishing

Steps to make a release:

  • To initiate a release, create a pull request from `master`` to release with the title Release.
  • Ensure all CI checks pass successfully.
  • Once CI checks are green and you have at least one approval, merge the pull request.
  • Post-merge, the release GitHub Actions will trigger and create an "update versions" pull request to the release branch.
  • Wait for the CI to turn green on the "update versions" pull request.
  • Once CI is green, merge the "update versions" pull request.
  • After this merge, the actions will trigger again. This time, they'll generate a new tag, create a new release, and publish packages to both GitHub and npm registries.

3. Post-Release Activities

After a successful release, ensure you create a backmerge pull request from release to master. This ensures that the master branch stays up-to-date with the latest versions and changes.

Host

  • run yarn build
  • serve out directory as public