Automated commit

Signed-off-by: Oliver Davies <oliver@oliverdavies.uk>

decoupling-drupal-vuejs/demo/blue-conf/vuejs/.browserslistrc

@@ -0,0 +1,2 @@
+> 1%
+last 2 versions

decoupling-drupal-vuejs/demo/blue-conf/vuejs/.editorconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

decoupling-drupal-vuejs/demo/blue-conf/vuejs/.env

@@ -0,0 +1 @@
+VUE_APP_DRUPAL_URL=http://blueconf.docksal

decoupling-drupal-vuejs/demo/blue-conf/vuejs/.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/essential',
+    '@vue/standard'
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  }
+}

decoupling-drupal-vuejs/demo/blue-conf/vuejs/.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

decoupling-drupal-vuejs/demo/blue-conf/vuejs/README.md

@@ -0,0 +1,34 @@
+# blueconf
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn run serve
+```
+
+### Compiles and minifies for production
+```
+yarn run build
+```
+
+### Run your tests
+```
+yarn run test
+```
+
+### Lints and fixes files
+```
+yarn run lint
+```
+
+### Run your unit tests
+```
+yarn run test:unit
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

decoupling-drupal-vuejs/demo/blue-conf/vuejs/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}

decoupling-drupal-vuejs/demo/blue-conf/vuejs/jest.config.js

@@ -0,0 +1,30 @@
+module.exports = {
+  moduleFileExtensions: [
+    'js',
+    'jsx',
+    'json',
+    'vue'
+  ],
+  transform: {
+    '^.+\\.vue$': 'vue-jest',
+    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
+    '^.+\\.jsx?$': 'babel-jest'
+  },
+  transformIgnorePatterns: [
+    '/node_modules/'
+  ],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  },
+  snapshotSerializers: [
+    'jest-serializer-vue'
+  ],
+  testMatch: [
+    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
+  ],
+  testURL: 'http://localhost/',
+  watchPlugins: [
+    'jest-watch-typeahead/filename',
+    'jest-watch-typeahead/testname'
+  ]
+}

decoupling-drupal-vuejs/demo/blue-conf/vuejs/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "blueconf",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "test:unit": "vue-cli-service test:unit"
+  },
+  "dependencies": {
+    "@fullhuman/postcss-purgecss": "^1.3.0",
+    "axios": "^0.19.0",
+    "core-js": "^2.6.5",
+    "postcss-import": "^12.0.1",
+    "postcss-nested": "^4.1.2",
+    "qs": "^6.9.0",
+    "tailwindcss": "^1.1.2",
+    "vue": "^2.6.10",
+    "vue-router": "^3.1.3",
+    "vue-save-state": "^1.2.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.12.0",
+    "@vue/cli-plugin-eslint": "^3.12.0",
+    "@vue/cli-plugin-unit-jest": "^3.12.0",
+    "@vue/cli-service": "^3.12.0",
+    "@vue/eslint-config-standard": "^4.0.0",
+    "@vue/test-utils": "1.0.0-beta.29",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-eslint": "^10.0.3",
+    "babel-jest": "^23.6.0",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.2.3",
+    "vue-template-compiler": "^2.5.21"
+  }
+}

decoupling-drupal-vuejs/demo/blue-conf/vuejs/postcss.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('tailwindcss'),
+    require('postcss-nested'),
+    require('autoprefixer'),
+    process.env.NODE_ENV === 'production' && require('@fullhuman/postcss-purgecss')({
+      content: [
+        './src/**/*.vue',
+        './public/index.html',
+      ],
+      defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
+    })
+  ]
+}

decoupling-drupal-vuejs/demo/blue-conf/vuejs/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>Blue Conf</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but Blue Conf doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

decoupling-drupal-vuejs/demo/blue-conf/vuejs/src/App.vue

@@ -0,0 +1,57 @@
+<template>
+  <div id="app" class="antialiased min-h-screen font-sans bg-gray-100 text-black p-12">
+    <div class="w-full max-w-2xl mx-auto">
+      <AcceptedSessionsList :sessions="sessions"/>
+      <SessionForm/>
+    </div>
+  </div>
+</template>
+
+<script>
+import AcceptedSessionsList from '@/components/AcceptedSessionsList'
+import axios from 'axios'
+import qs from 'qs'
+import saveState from 'vue-save-state'
+import SessionForm from '@/components/SessionForm'
+
+export default {
+  mixins: [saveState],
+
+  components: {
+    AcceptedSessionsList,
+    SessionForm
+  },
+
+  data () {
+    return {
+      loaded: false,
+      sessions: []
+    }
+  },
+
+  mounted () {
+    const baseUrl = process.env.VUE_APP_DRUPAL_URL
+
+    const params = qs.stringify({
+      'fields[node--session]': 'title',
+      'filter[field_session_status]': 'accepted'
+    })
+
+    axios.get(`${baseUrl}/jsonapi/node/session?${params}`)
+      .then(({ data }) => {
+        this.loaded = true
+        this.sessions = data.data
+      })
+  },
+
+  methods: {
+    getSaveStateConfig () {
+      return {
+        cacheKey: 'app'
+      }
+    }
+  }
+}
+</script>
+
+<style src="./assets/css/tailwind.css"></style>

decoupling-drupal-vuejs/demo/blue-conf/vuejs/src/assets/css/base.css

@@ -0,0 +1,17 @@
+h1,
+h2 {
+  @apply font-semibold
+}
+
+input,
+textarea {
+  @apply mt-1 p-2 w-full border border-gray-400
+}
+
+input[type=submit] {
+  @apply w-full;
+
+  @screen sm {
+    @apply w-auto
+  }
+}

decoupling-drupal-vuejs/demo/blue-conf/vuejs/src/assets/css/tailwind.css

@@ -0,0 +1,6 @@
+@import 'tailwindcss/base';
+@import './base.css';
+
+@import 'tailwindcss/components';
+
+@import 'tailwindcss/utilities';

decoupling-drupal-vuejs/demo/blue-conf/vuejs/src/components/AcceptedSessionsList.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <h1 class="text-4xl">Accepted Sessions</h1>
+
+    <div v-if="sessions.length" class="mt-2 p-6 bg-white rounded-lg border">
+      <ul>
+        <li v-for="{ attributes } in sortedSessions" :key="attributes.drupal_internal__nid" class="mt-3 first:mt-0">
+          {{ attributes.title }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import sortBy from 'lodash/sortBy'
+
+export default {
+  props: {
+    sessions: {
+      type: Array,
+      required: true
+    }
+  },
+
+  computed: {
+    sortedSessions: function () {
+      return sortBy(this.sessions, 'attributes.title')
+    }
+  }
+}
+</script>

decoupling-drupal-vuejs/demo/blue-conf/vuejs/src/components/SessionForm.vue

@@ -0,0 +1,97 @@
+<template>
+  <section class="mt-8">
+    <h2 class="text-2xl mb-4">Submit a Session</h2>
+
+    <SessionFormMessage :messages="messages" class="bg-green-100 border-green-300"/>
+    <SessionFormMessage :messages="errors" class="bg-red-100 border-red-300"/>
+
+    <form action="" @submit.prevent="submit">
+      <label class="block mb-4">
+        Title
+        <input name="title" type="text" v-model="form.title" required/>
+      </label>
+
+      <label class="block mb-4">
+        Abstract
+        <textarea name="title" rows="5" v-model="form.body" required/>
+      </label>
+
+      <input class="cursor-pointer bg-blue-500 hover:bg-blue-700 focus:bg-blue-700 text-gray-100 px-4 py-2 rounded" type="submit" value="Submit session">
+    </form>
+  </section>
+</template>
+
+<script>
+import axios from 'axios'
+import map from 'lodash/map'
+import SessionFormMessage from '@/components/SessionFormMessage'
+
+export default {
+  components: {
+    SessionFormMessage
+  },
+
+  data () {
+    return {
+      errors: [],
+      form: {
+        body: '',
+        field_session_status: 'submitted',
+        field_session_type: 'full',
+        title: ''
+      },
+      messages: []
+    }
+  },
+
+  methods: {
+    submit () {
+      const adminUuid = '11dad4c2-baa8-4fb2-97c6-12e1ce925806'
+      const apiUuid = '63936126-87cd-4166-9cb4-63b61a210632'
+
+      const data = {
+        type: 'node--session',
+        attributes: this.form,
+        relationships: {
+          'field_speakers': {
+            'data': {
+              'id': adminUuid,
+              'type': 'user--user'
+            }
+          },
+          'uid': {
+            'data': {
+              'id': apiUuid,
+              'type': 'user--user'
+            }
+          }
+        }
+      }
+
+      const baseUrl = process.env.VUE_APP_DRUPAL_URL
+
+      axios({
+        method: 'post',
+        url: `${baseUrl}/jsonapi/node/session`,
+        data: { data },
+        headers: {
+          'Accept': 'application/vnd.api+json',
+          'Authorization': 'Basic YXBpOmFwaQ==',
+          'Content-Type': 'application/vnd.api+json'
+        }
+      }).then(({ data }) => {
+        this.errors = []
+        this.messages = []
+
+        const title = data.data.attributes.title
+        this.messages.push(`Session ${title} has been created.`)
+
+        this.form.body = ''
+        this.form.title = ''
+      }).catch(({ response: { data } }) => {
+        this.errors = map(data.errors, 'detail')
+      })
+    }
+  }
+}
+</script>

decoupling-drupal-vuejs/demo/blue-conf/vuejs/src/components/SessionFormMessage.vue

@@ -0,0 +1,19 @@
+<template>
+  <div v-if="messages.length" class="mb-6 p-4 border">
+    <ul class="ml-3 list-disc list-inside">
+      <li v-for="message in messages" :key="message">{{ message }}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    messages: {
+      type: Array,
+      required: true,
+      default: () => []
+    }
+  }
+}
+</script>

decoupling-drupal-vuejs/demo/blue-conf/vuejs/src/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App)
+}).$mount('#app')

decoupling-drupal-vuejs/demo/blue-conf/vuejs/tailwind.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  theme: {
+    extend: {}
+  },
+  variants: {
+    margin: ['responsive', 'first', 'last'],
+  },
+  plugins: []
+}

decoupling-drupal-vuejs/demo/blue-conf/vuejs/tests/unit/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  env: {
+    jest: true
+  }
+}

decoupling-drupal-vuejs/demo/blue-conf/vuejs/tests/unit/example.spec.js

@@ -0,0 +1,12 @@
+import { shallowMount } from '@vue/test-utils'
+import HelloWorld from '@/components/HelloWorld.vue'
+
+describe('HelloWorld.vue', () => {
+  it('renders props.msg when passed', () => {
+    const msg = 'new message'
+    const wrapper = shallowMount(HelloWorld, {
+      propsData: { msg }
+    })
+    expect(wrapper.text()).toMatch(msg)
+  })
+})