open-index/open-npm huggingface dataset:
npm package: @listen360/ui
Description: [![npm](https://img.shields.io/npm/v/@listen360/ui.svg)](https://www.npmjs.com/package/@listen360/ui)
Latest version: 0.0.6
Deprecated: this version has been deprecated

[![npm](https://img.shields.io/npm/v/@listen360/ui.svg)](https://www.npmjs.com/package/@listen360/ui)

# @listen360/ui

These components can be shared amongst all new projects, and updated by pushing to npm. Vue has experimental support for rendering to standard web components, so that may be an option to use them in server-side Rails views or in other frameworks.

It is also a "living" styleguide. In addition to being built and published to npm, documentation can be viewed/publised via a library called [vue-styleguidist](https://github.com/vue-styleguidist/vue-styleguidist). It is based on a similar library for React called [react-styleguidist](https://github.com/styleguidist/react-styleguidist).

Documentation and editable in-browser usage examples are auto-generated from the actual code. [See it live here](http://listen360-ui.surge.sh/)! To see an example of the library in use, see [this Sandbox](https://codesandbox.io/s/y243o2zwzj).

## How to start locally

```sh
yarn             # or `npm install`
yarn styleguide  # or `npm run styleguide`
```

Then open [http://localhost:6060](http://localhost:6060) in your browser. This will start a server that will re-compile the styleguide whenever anything changes. The existing components and their documentation contain many examples of its capabilities, so that is a good place to start to see what this library can do.

## Using in Vue apps

The biggest benefit of publishing our components this way is that they can be reused across other projects and updated in one place simply by updating a dependency. They can also carry their own styles, fonts, layout, or anything else with them so less decisions have to be made for each individual use case.

```vue
<template>
  <Button :onClick="sayHello">Hello world</Button>
</template>

<script>
import { Button } from '@listen360/ui';

export default {
  name: 'MyFancyComponent',
  methods: {
    sayHello() {
      alert('hello world');
    }
  }
};
</script>
```

## How to build for release

This will build both the library and the styleguide:

```sh
yarn build
```

The package can then be published to npm, and the styleguide pushed out to a static server.

## Publishing updates

Make sure you have an npm account and that you're a member of the `@listen360` org on npm, and then:

```sh
npm version {patch,minor,major} # Bump the version
git push
npm adduser # Sign in to npm if you aren't already
npm publish --access public
```