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

vibe-storybook-components

v0.20.0

Published

Collection of Vibe's Storybook components

Downloads

54,947

Readme

Vibe Storybook Components

image

monday.com Collection of Storybook components, with which Vibe storybook is built - vibe.monday.com.

Installation

Install the component library

$ npm install vibe-storybook-components

Usage

Styles: Import the library's styles in your storybook preview.js file:

import 'vibe-storybook-components/index.css';

Components: There are 2 ways to use the components:

  1. Import the components from the library's main entry, like this:
import { ComponentName } from 'vibe-storybook-components';

and then use in a story like this:

<ComponentName>Button</ComponentName>
  1. Import and map the components once in the storybook's preview.js file, like this:
import { ComponentName } from 'vibe-storybook-components';
import { ComponentName } from 'vibe-storybook-components';
...
addParameters({
  docs: {
    components: {
      h1: ComponentName,
      ComponentName
    },
  },
});

and then use in the storybook's markdown files like this:

# Button

or like this

<h1>Button</h1>

or like this without a corresponding import

<ComponentName>Button</ComponentName>

Styling

Most of the components have a className prop that can be used to style them. The className prop is a string that is added to the component's class list. The className prop is not required, but it's recommended to use it for styling.

Storybook

Work in Progress
[Storybook content is in active development.]

To run the storybook locally run this command:

yarn storybook

the storybook will hosted on http://localhost:6005

Developing locally with your consumer application

When developing locally we are using a npm functionality called yarn link, this allows us to work locally on our package and use it in a different project without publishing. This functionality basically overrides the npm mapping between package name to its repo, and points it to where the package is located locally.

Troubleshooting local development

  • If you are using NVM, make sure both packages are using the same version.
  • Because we are using react hooks and having react as a peerDependency - if you want to develop locally and encounter issues with "invalid hook call" See this github thread. The quick fix is in your webpack config file alias react to resolve the node_modules path

go to the project's directory and run:

nvm use
yarn unlink
yarn link
npm start