Ec-frontend-library NPM

ec-frontend-library

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

Make sure branch builds npm run build and review the dist directory
Update version in package.json and package-lock.json
Commit and push your branch
Create a PR, have it reviewed and merged
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