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

@hpe.com/hew

v0.6.54

Published

[![Netlify Status](https://api.netlify.com/api/v1/badges/2421c10f-be2e-402e-bf63-b200c1fdd750/deploy-status)](https://app.netlify.com/sites/hew-ui/deploys)

Downloads

1,073

Readme

Netlify Status

hew

hew is a UI kit containing useful react components and common styles for products by determined.ai.

Live preview

[https://hew-ui.netlify.app/]

How to use

We're currently unpublished while we set up an NPM organization, so install from the github repo like this:

npm install @hpe.com/hew

Components are exported both at the top level module and as individual modules:

import { Avatar } from '@hpe.com/hew';
import Card from '@hpe.com/hew/Card';

Related styling is imported alongside the module as a css file. Be sure your build solution knows how to resolve .css imports.

How to develop

Development requires Node.js version >= 18.

Bundling and the dev server is handled by vite. Run npm start or npm run dev to start a dev server pointing to the design kit page.

When adding a new component, remember to:

  • Add and document its functionality in the Design Kit (src/DesignKit.tsx)
  • Aggregate its public facing exports in the index file (src/index.ts)

If the component is in a folder with an index module, remember to add the export to package.json

How to release

With your changes safely in the main branch, kick off a new "publish-to-npm" workflow in the actions view: to bump the version number of the package as well as push it as a git tag for others. You can bump to the next major, minor, or patch version, or bump to an arbitrary version using the npm version command line.

Working between hew and another repo

Sometimes, you'll have to update hew as an upstream change to another repo, like determined. Here's how to handle that process:

  • When you're working locally and want to check your ui kit changes in your other repo:
    • make sure you're using the same version of node between hew and your other repo
    • run npm link in the hew repo folder
    • run npm link hew in the other repo's folder
      • remember to run npm unlink hew when you're done!
  • When committing changes to the other repo downstream of unmerged changes in the UIKit
    • install the ui kit such that it matches the branch you're working on with npm install https://[email protected]/determined-ai/hew.git#<BRANCH_NAME_HERE> and commit the package.lock
    • repeat the above as new changes come from your upstream
      • remember to switch back to a tagged version when your upstream changes are merged with npm install https://[email protected]/determined-ai/hew.git#<VERSION_NUMBER_HERE>