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

@cardstack/ui-components

v0.2.21

Published

Reusable UI elements for Cardstack projects and Ember apps.

Downloads

45

Readme

@cardstack/ui-components

This is a work-in-progress addon that will contain reusable UI elements like form inputs, buttons, navbars, and more. The components can be used in regular Ember apps as well as Cardstack projects.

View the live docs by running ember serve in this repository and going to http://localhost:4200/freestyle. They are built using ember-freestyle.

Compatibility

  • Ember.js v2.18 or above
  • Ember CLI v2.13 or above
  • Node.js v8 or above

Local installation

  • git clone <repository-url>
  • cd ui-components
  • yarn install
  • yarn link

Then navigate into the app you want to use the addon in, and run the following command:

  • yarn link @cardstack/ui-components
  • Start your app with ember serve. As you make changes to the addon, if everything is working properly, your Ember app will rebuild to reflect the changes.

Remote installation

$ ember install @cardstack/ui-components

Usage

Use components in your app like this:

{{component-name}}
or
<ComponentName />

Styles for this addon are opt-in. If you want to use our default styles, import them in your app's css:

@import url("@cardstack/some-css-file");

or scss:

@import '@cardstack/some-css-file'

Configuring debounceSpeed

By default, all keyboard input components (text-field, text-area, etc) have a 500ms debounce for handling the input to avoid excessive server calls while the user is typing (for automated tests it's 10ms). There are a couple of different ways to override the default:

  1. Pass a debounceMs argument to the component, i.e. <TextField @debounceMs=100 /> (affects only that specific component)
  2. Set an environment variable in your app's config/environment.js (affects all components):
module.exports = function(environment/*, appConfig */) {
  //...
  if (environment === 'development' || environment === 'production') {
    ENV['@cardstack/ui-components'] = {
      debounceSpeed: 100
    }
  }
}

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.