# ec-frontend-library

[![CircleCI](https://circleci.com/gh/illuminateeducation/ec-frontend-library/tree/develop.svg?style=shield&circle-token=22b92ce38a0379eba4bb1d8a6c6a31a0d12b860b)](https://circleci.com/gh/illuminateeducation/ec-frontend-library/tree/develop)

## Consuming project setup
```
npm install -D babel-plugin-transform-imports
npm install @illuminateeducation/ec-frontend-library
```

# ec-frontend-library
application setup

main.js
```
import Vue from 'vue'
import App from './App.vue'
import { Defaults, EcUpdateTheme, EcFrontendLibrary, EcFrontendVuetify, GetVuetifyInstance } from '@illuminateeducation/ec-frontend-library'
import '@illuminateeducation/ec-frontend-library/dist/ec-frontend-library.css'

Vue.use(EcFrontendLibrary, {
    axios: {
        withCredentials: true,
        baseURL: process.env.VUE_APP_BASE_URI ? process.env.VUE_APP_BASE_URI.replace(/localhost/g, location.host) : ''
    },
    authx: 'auth-x.host.com',
})

Vue.use(EcFrontendVuetify)

let vuetify = GetVuetifyInstance({
    options: {
        customProperties: true
    },
    iconfont: 'fa',
    theme: {
        dark: false,
        themes: Defaults.ecThemes
    }
})

EcUpdateTheme(Defaults.ecThemes.light) // creates CSS variable equivalents of all variables for use in local components
                                       // with something like the following: var(--fe-primary);
Vue.config.productionTip = false
Vue.prototype.$vuetify = vuetify
new Vue({
    vuetify,
    render: h => h(App),
}).$mount('#app')


Axios and Auth-x are optional

```

.npmrc
```
@illuminateeducation:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=${NPM_TOKEN}
```

.babel.config.js
```
module.exports = {
  presets: [
    '@vue/app'
  ],
  "plugins": [
    [
      "transform-imports",
      {
        "vuetify": {
          "transform": "vuetify/es5/components/${member}", // eslint-disable-line no-template-curly-in-string
          "preventFullImport": true
        }
      }
    ]
  ]
}
```

To add CSS to entire project, add class ```ec-fe-lib``` to ```<body>```.
To add CSS only to imported CL components, add class ```ec-fe-lib``` to ```<div>``` surrounding the imported component.

---

## ec-frontend-library setup and modification
```
npm install
```

### Build dist
```
npm run build
```

### Run your tests
```
npm run test
```

### Lints and fixes files
```
npm run lint
```

### Publishing to npm
Only if authorized to do so

1. Make sure branch builds `npm run build` and review the dist directory
1. Update version in `package.json` and `package-lock.json`
1. Commit and push your branch
1. Create a PR, have it reviewed and merged
1. tag and release https://help.github.com/en/articles/creating-releases.  

make sure to follow semantic versioning 0.1.0 (breaking).(feature).(patch or bugs)
actual names if using `npm version ...` is major.minor.patch

