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

@loophq/design-system

v2.0.8

Published

## Installation (into another repo)

Downloads

12,554

Readme

Loop design system

Installation (into another repo)

npm i -S @loophq/design-system focus-visible

Focus-visible is a polyfill for the :focus-visible pseudo-class and needs to be installed as a peer dependency. Vue 2.6 is also a peer dependency, we're assuming you have that installed already. :)

Usage

Set up

In your entry point (src/main.js for a standard vue-cli/vite project), put these two lines at the top:

import 'focus-visible';
import '@loophq/design-system/dist/loop-design-system.css';

focus-visible is used to manage all focus styles. If you don't include this line, the library will fall back to the browser focus styles. The CSS file needs to be included, it contains all of the CSS custom properties and component CSS for the design system. If you'd like to change a variable (there are a few theme variables), we recommend importing this file here as a base and then overwriting it in your own global css file. This should be imported before your App.vue;

Using in components

Components can be imported via named imports:

import { BaseCard } from '@loophq/design-system';

To import all and register globally (not recommended), put this in your main.js:

import LoopComponents from '@loophq/design-system';

app.use(LoopComponents);

Project setup

npm i

Spin up development environment

This spins up a local storybook server and runs unit tests in parallel, recompiling and rerunning relevant tests where needed.

npm run dev

Compiles and minifies component library

npm run library:build

Publishes a new version of the library

npm run library:publish -- <version>

To add a tag (for beta versions, etc)

npm run library:publish -- <version> <tag>

Make sure to push the updates that npm makes when publishing to your release branch before merging into main. You always want to publish the new version from your release branch, as we cannot push directly to main. See the releasing section for more info.

Compiles storybook

npm run build-storybook

Releasing

  1. If this is your first time releasing, ask in the engineering team channel to be added to the loop npm organization. Make sure you log in to npm in your terminal as well.

  2. On your machine, check out the branch you'd like to release. This can either be a feature branch or a release branch if you have multiple features to package together as a release. This branch should be PRed into main and be approved by a peer before releasing.

  3. Compile the component library

    npm run library:build

    (Optional) Commit any file changes the build script made. This is not always necessary but when adding new components this will generally be necessary.

  4. Figure out the version number this release will be. We follow SemVer, and the general rule of thumb is that if you're adding new components, bump the minor version, everything else should just bump the patch version. Major versions bumps are rare and should be a team decision.

  5. Publish the library to npm. Make sure you are on the branch you intend to release, this will modify your package.json and you MUST be on a non-main branch for this to be mergeable.

    npm run library:publish -- <version> <tag>
  6. Push all changes the build and release scripts made to Github.

  7. In Github, merge the release branch into main.