Cp-ui-library NPM

Career Partner UI Library

This repository contains the sources of our ui library with all the re-usable user interface components written in Vue.js.

Project setup & develop locally

# 1. install dependencies
$ npm install

# 2. start storybook server in watch mode
$ npm start

Storybook demo URL

Branch integration: https://styleguide-integration.fh-iubh.at/
Branch master: https://styleguide.fh-iubh.at/

Testing

Run unit tests locally

$ npm test

End-2-End tests

We only use browserstack, so run one of the browserstack-related commands in package.json and watch the etsts on https://automate.browserstack.com/

Example:

$ npm run test:browserstack:chrome

Lints and fixes files

$ npm run lint

Code Style

We have an automatic pre-commit setup using Prettier and Stylelint which auto-fixes code style related stuff on each commit. This makes sure we follow a consistent code style and prevents senseless discussions 😁

Library usage

Install via npm+git:

"ui-library": "git@bitbucket.org:cp-dev/ui-library.git#master",

For dev: test locally via npm link. See https://docs.npmjs.com/cli/link

Import our library:

// in your js main file
import CPUILibrary from 'ui-library';
...
Vue.use(CPUILibrary);

// in your scss main file:
@import '~ui-library/dist/CPUILibrary.css';

Use the components

// For example
<cp-button ...>This is a button</cp-button>