SW Design Components Library

Installation

npm i sw-design --save

Usage

Including this plugin in your VueJS application is very simple. This will register all available components globally, so you can use them anywhere in your application.

import swDesign from 'sw-design';
import 'sw-design/lib/sw-design.css';
Vue.use(swDesign)

For including global css (required for some components or for using style-classes like mr-N etc.), you have to include global css into your main.scss

@import '~sw-design/lib/sw-styles.min.css';

Run StoryBook

Git clone project

git clone git@GIT_SERVICE:sw_design.git

Run npm install

npm install

Run npm install for CSS

npm install --prefix src/stories/styles/global

Additional: Sometimes you may need create empty directory with name css into src/assets

mkdir src/assets/css

Run StoryBook

npm run storybook

Open link: http://localhost:6006/

Build static files

npm run build-storybook

Add new components, styles and Publishing

Add new components to

/src/stories/components (and required subdir inside)

Important files

.css / .scss
ComponentName.story.js
ComponentName.vue

Register components

/src/sw-design.js

import ComponentName from '@/stories/FOLDER/COMPONENT'

const Components = {
  ...,
  ComponentName
}

Add new global styles to

/src/stories/styles/global (create new scss file or edit existing)

Register new scss file

/src/stories/styles/global/styles.scss

@import 'new-scss-file-name';

Build library

npm run build

Upgrade version of package

npm version patch

Login to npmjs

npm login

Publish new version

npm publish