# pathiess-chat-style-guide

> playing around with a style guide

Latest version **1.0.2** (published 2019-03-25) · UNLICENSED license · 0 weekly downloads

## Install

```sh
npm install pathiess-chat-style-guide
pnpm add pathiess-chat-style-guide
yarn add pathiess-chat-style-guide
bun add pathiess-chat-style-guide
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2019-03-25 |
| First published | 2019-03-13 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 692.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | pathiess |

## Links

- npm: https://www.npmjs.com/package/pathiess-chat-style-guide
- Repository: https://github.com/pathiess/chat-client/style-guide
- npm.io page: https://npm.io/package/pathiess-chat-style-guide

## Dependencies (5)

- [bootstrap](https://npm.io/package/bootstrap.md) ^4.1.3
- [open-sans-fontface](https://npm.io/package/open-sans-fontface.md) ^1.4.0
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^1.2.8
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^5.5.0
- [@fortawesome/free-regular-svg-icons](https://npm.io/package/@fortawesome/free-regular-svg-icons.md) ^5.5.0

## Recent versions

- 1.0.2 (latest) — 2019-03-25
- 1.0.1 — 2019-03-13
- 1.0.0 — 2019-03-13

## README

# 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](https://getbootstrap.com/docs/4.0) based SASS library (currently just the styles and the the JS components)
 - Custom [FontAwesome icons](https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use) (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.

---
_Source: https://npm.io/package/pathiess-chat-style-guide · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._