Merge pull request #83 from ExtensionEngine/release/1.5.0

Release/1.5.0

.circleci/config.yml

@@ -0,0 +1,37 @@
+# Javascript Node CircleCI 2.0 configuration file
+# Check https://circleci.com/docs/2.0/language-javascript/ for more details
+version: 2.1
+jobs:
+  build:
+    docker:
+      - image: circleci/node:lts-browsers
+
+    working_directory: ~/tailor-teaching-elements
+
+    steps:
+      - checkout
+
+      - restore_cache:
+          keys:
+            - dependency-cache-{{ checksum "package-lock.json" }}
+
+      - run:
+          name: Install dependencies
+          command: npm install
+
+      - save_cache:
+          key: dependency-cache-{{ checksum "package-lock.json" }}
+          paths:
+            - node_modules
+
+      - run:
+          name: Run tests
+          command: npm test
+
+      - run:
+          name: Lint codebase
+          command: npm run lint
+
+      - run:
+          name: Run build
+          command: npm run build

.eslintignore

@@ -0,0 +1,2 @@
+dist
+node_modules

.eslintrc.js

@@ -1,62 +1,13 @@
-const isDev = process.env.NODE_ENV === 'development'
+'use strict';
 
 module.exports = {
   root: true,
-  parserOptions: { sourceType: 'module' },
-  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
-  extends: [
-    'standard',
-    'plugin:vue/recommended'
-  ],
-  plugins: ['vue'],
-  rules: {
-    'arrow-parens': 'off',
-    'comma-dangle': ['warn', 'never'],
-    'generator-star-spacing': 'off',
-    'no-debugger': isDev ? 'warn' : 'error',
-    'semi': ['warn', 'always'],
-    'space-before-function-paren': ['error', {
-      anonymous: 'always',
-      named: 'never'
-    }],
-    'vue/html-self-closing': 'off',
-    'vue/attribute-hyphenation': 'off',
-    'vue/max-attributes-per-line': ['error', { singleline: 5 }],
-    'vue/name-property-casing': ['error', 'kebab-case'],
-    // TODO: Add order for custom directives once supported
-    'vue/attributes-order': ['error', {
-      order: [
-        'DEFINITION',
-        'LIST_RENDERING',
-        'CONDITIONALS',
-        'RENDER_MODIFIERS',
-        'UNIQUE',
-        'BINDING',
-        'EVENTS',
-        'CONTENT',
-        'GLOBAL',
-        'OTHER_ATTR'
-      ]
-    }],
-    'vue/order-in-components': ['error', {
-      order: [
-        'el',
-        'name',
-        ['template', 'render', 'renderError'],
-        ['parent','functional', 'delimiters', 'comments'],
-        'extends',
-        'mixins',
-        'inheritAttrs',
-        'model',
-        ['props', 'propsData'],
-        'data',
-        'computed',
-        'methods',
-        'LIFECYCLE_HOOKS',
-        'watch',
-        ['directives', 'filters'],
-        'components'
-      ]
-    }]
-  }
-}
+  extends: '@extensionengine',
+  overrides: [{
+    files: ['src/**', 'examples/**'],
+    parserOptions: {
+      parser: 'babel-eslint',
+      sourceType: 'module'
+    }
+  }]
+};

README.md

@@ -1,26 +1,36 @@
 # Tailor teaching elements
-[![GitHub package version](https://img.shields.io/npm/v/tailor-teaching-elements.svg)](https://www.npmjs.com/package/tailor-teaching-elements)
-[![GitHub license](https://img.shields.io/github/license/ExtensionEngine/tailor-teaching-elements.svg)](https://github.com/ExtensionEngine/tailor-teaching-elements/blob/master/LICENSE)
-[![Open Source Love](https://badges.frapsoft.com/os/v2/open-source.svg?v=102)](https://github.com/ellerbrock/open-source-badge/)
+
+[![circleci build status](https://badgen.net/circleci/github/ExtensionEngine/tailor-teaching-elements/develop?icon)](https://circleci.com/gh/extensionengine/tailor-teaching-elements)
+[![bundlephobia minified size](https://badgen.net/bundlephobia/min/tailor-teaching-elements)](https://bundlephobia.com/result?p=tailor-teaching-elements)
+[![npm package version](https://badgen.net/npm/v/tailor-teaching-elements)](https://npm.im/tailor-teaching-elements)
+[![github license](https://badgen.net/github/license/extensionengine/tailor-teaching-elements)](https://github.com/extensionengine/tailor-teaching-elements/blob/develop/LICENSE)
+[![js @extensionengine style](https://badgen.net/badge/code%20style/@extensionengine/black)](https://github.com/extensionengine/eslint-config)
+[![js @extensionengine style](https://badgen.net/badge/stylelint/@extensionengine/black)](https://github.com/ExtensionEngine/stylelint-config)
+[![open source love](https://badgen.net/badge/Open%20Source/%E2%9D%A4/3eaf8e)](https://github.com/ellerbrock/open-source-badge/)
 
 Vue.js library for [Tailor](https://github.com/ExtensionEngine/tailor)'s teaching elements presentation
 
 ## Usage
 
 ### Install via npm
+
 `npm i tailor-teaching-elements`
 
 ### Register component
+
 #### As global component
+
 ```js
 import Vue from 'vue';
 import tailorTeachingElements from 'tailor-teaching-elements';
 
 Vue.component('tailor-teaching-elements', tailorTeachingElements);
 ```
+
 ##### OR
 
 #### Import locally in components
+
 ```html
 <script>
 import tailorTeachingElements from 'tailor-teaching-elements';

bili.config.js

@@ -0,0 +1,43 @@
+'use strict';
+
+const { config } = require('./package.json');
+const path = require('path');
+
+/** @type {import('bili').Config} */
+module.exports = {
+  input: {
+    'tailor-teaching-elements': 'src/index.js'
+  },
+  output: {
+    format: ['cjs', 'es', 'umd', 'umd-min'],
+    moduleName: config.moduleName,
+    extractCSS: false
+  },
+  bundleNodeModules: [
+    'rollup-plugin-vue',
+    'style-inject',
+    'vue-runtime-helpers'
+  ],
+  plugins: {
+    vue: true,
+    babel: {
+      runtimeHelpers: true,
+      sourceMap: true,
+      extensions: ['.js', '.vue']
+    },
+    alias: {
+      resolve: ['.vue', '.js'],
+      entries: [
+        { find: '@', replacement: path.resolve(__dirname, './src') }
+      ]
+    },
+    'node-builtins': true,
+    visualizer: {
+      sourceMap: true,
+      open: false
+    }
+  },
+  resolvePlugins: {
+    alias: require('@rollup/plugin-alias')
+  }
+};

examples/App.vue

@@ -1,11 +1,11 @@
 <template>
   <div id="app">
-    <navbar :elementType="elementType" @select="select"/>
+    <navbar @select="select" :element-type="elementType" />
     <div class="container-fluid">
       <showcase
-        :elementType="elementType"
-        :elementSubType="elementSubType"
-        @select="select"/>
+        @select="select"
+        :element-type="elementType"
+        :element-sub-type="elementSubType" />
     </div>
   </div>
 </template>

examples/components/Navbar.vue

@@ -38,12 +38,12 @@
 <script>
 import 'bootstrap-sass/assets/javascripts/bootstrap/dropdown';
 import keys from 'lodash/keys';
-import toTitleCase from 'to-title-case';
 import { TE_TYPE } from '../../src/types';
+import toTitleCase from 'to-title-case';
 
 export default {
   props: {
-    elementType: { type: String, default: '' }
+    elementType: { type: String, default: null }
   },
   computed: {
     elementTypes() {

examples/components/SelectAssessment.vue

@@ -4,8 +4,8 @@
       <div
         v-for="assessment in row"
         :key="assessment.type"
-        :class="calculateWidth(row)"
         @click="select(assessment.type)"
+        :class="calculateWidth(row)"
         class="btn-base assessment-type">
         <span>{{ assessment.title }}</span>
       </div>
@@ -15,8 +15,8 @@
 
 <script>
 import chunk from 'lodash/chunk';
-import toArray from 'lodash/toArray';
 import { subTypeInfo } from '../../src/types';
+import toArray from 'lodash/toArray';
 
 const ASSESSMENTS_PER_ROW = 6;
 

examples/components/Showcase.vue

@@ -4,11 +4,11 @@
       <div class="presentation">
         <select-assessment
           v-if="showSubtypes"
-          @select="select"/>
+          @select="select" />
         <teaching-element
           v-else-if="element"
           :element="element"
-          :options="options"/>
+          :options="options" />
         <div v-else>Pick an element from the navbar</div>
       </div>
     </div>
@@ -25,17 +25,19 @@ const HAS_SUBTYPE = [TYPES.ASSESSMENT, TYPES.REFLECTION];
 const isAssessment = ({ type }) => HAS_SUBTYPE.includes(type) || !type;
 const data = importAll(require.context('../data/', true, /\.json$/));
 
+const ASSESSMENT_OPTIONS = {
+  assessmentType: 'formative',
+  singleChoice: { highlighting: { enabled: true } },
+  multipleChoice: { highlighting: { enabled: true } }
+};
+
 export default {
   props: {
-    elementType: { type: String, required: true },
-    elementSubType: { type: String, default: '' }
-  },
-  data() {
-    return {
-      options: { assessmentType: 'formative' }
-    };
+    elementType: { type: String, default: null },
+    elementSubType: { type: String, default: null }
   },
   computed: {
+    options: () => ASSESSMENT_OPTIONS,
     isReflection() {
       return this.elementType === TYPES.REFLECTION;
     },

examples/data/audio.json

@@ -0,0 +1,8 @@
+{
+  "id": 1,
+  "position": 1,
+  "type": "AUDIO",
+  "data": {
+    "url": "https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3"
+  }
+}

examples/data/file.json

@@ -0,0 +1,9 @@
+{
+  "type": "FILE",
+  "position": 1,
+  "data": {
+      "url": "https://via.placeholder.com/500",
+      "name": "placeholder.png",
+      "width": 12
+  }
+}