@listen360/ui v0.0.6

@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. It is based on a similar library for React called react-styleguidist.

Documentation and editable in-browser usage examples are auto-generated from the actual code. See it live here! To see an example of the library in use, see this Sandbox.

How to start locally

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

Then open 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.

<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:

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:

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