pathiess-chat-style-guide v1.0.2

Chat Client Style Guide

What is this?

A central Style Guide to be used to share a common look and feel across Chat Client framework projects.

What's this built with?

• Customized Bootstrap based SASS library (currently just the styles and the the JS components)
• Custom FontAwesome icons (includes FontAwesome core and main icons)
• Gulp was used for the build for posterity, a vanilla NPM script build would make more sense though

Planning

• Wireframes created using Balsamiq in file ./style-guide/chat-mockups.bmpr

NPM Module for style-guide at: https://www.npmjs.com/package/pathiess-chat-style-guide

Setup

From your project root add the Style Guide module with:

npm install --save pathiess-chat-style-guide

In any modern framework you can do a base import on the main SCSS Style Guide src/main.scss, something like:

@import '~pathiess-chat-style-guide/src/styles.scss';

You can also include the built CSS Style Guide by copying the file to your projeft from:

chat-client/style-guide/dist/chat-client-style-guide.css

For the custom icons, this will vary by framework. Below is an example for VueJS

import { library } from '@fortawesome/fontawesome-svg-core';
import { far } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

import '../node_modules/ptdv-style-guide/dist/ptdv-fontawesome.js';

library.add(far, PATHIESS_CUSTOM_ICONS);
Vue.component('fa-icon', FontAwesomeIcon)

Development

For local development and testing the Style-Guide in a project, a sym link to the module speeds things up. (vs pubishing and updating for every module change). Follow the instructions in Trouble Shooting.

After installing and optionally adding a sym link, run the below from the Style-Gude directory to have Gulp watch for any changes and run the build:

npm run watch

Publishing

Remember to publish changes when complete :) Bump the package version and run:

npm publish

Trouble Shooting

Q. How do I add this Sym Link thing?

A. From Style Guide root (chat-client/style-guide) run:

npm link

From each project(s), make sure project added to package.json with correct name and a valid version. Also make sure the style guide is deleted from the node_modules dir. Then from the projuect Modules directory (node_modules) run:

npm link pathiess-chat-style-guide

The local project builds should now pick up any changes to the style guide through the sym link.

Q. Publish "EPERM.." error?

A. Make sure you're logged in npm login

Q. General "ESDIR" error?

A. !IMPORTANT avoid local npm link on virtual drives. The symboloic link failes with an EISDIR error https://github.com/nodejs/node/issues/6861. One work around during dev is to just edit the local module in the node_modules dir and then manually copy the changes to this project.