Prepare npm packages

.docker/api/config.json

@@ -4,7 +4,7 @@
   "esIndexes": [
     "vue_storefront_catalog"
   ],
-  "registeredExtensions": ["vsf-storyblok-extension"],
+  "registeredExtensions": ["@kodbruket/vsf-storyblok-extension"],
   "storyblok": {
     "previewToken": "mrpbBbrwJU75kaRRQBIyugtt",
     "indexPrefix": "storyblok_",

.docker/api/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "safira-api",
+  "version": "1.0.0-alpha.1",
+  "private": true,
+  "description": "Dummy extension to include other extensions, because of the docker setup",
+  "author": "Simon Fridlund <[email protected]>",
+  "license": "UNLICENSED",
+  "dependencies": {
+    "@kodbruket/vsf-storyblok-extension": "./@kodbruket/vsf-storyblok-extension"
+  }
+}

.docker/frontend/config.json

@@ -10,7 +10,7 @@
   },
   "theme": "@vue-storefront/theme-default",
   "storyblok": {
-    "endpoint": "http://storefront-api:8080/api/ext/vsf-storyblok-extension"
+    "endpoint": "http://storefront-api:8080/api/ext/@kodbruket/vsf-storyblok-extension"
   },
   "cart": {
     "synchronize": true,

.docker/frontend/modules.ts

@@ -19,7 +19,7 @@ import { PaymentBackendMethods } from './payment-backend-methods'
 import { PaymentCashOnDelivery } from './payment-cash-on-delivery'
 import { RawOutputExample } from './raw-output-example'
 import { Magento2CMS } from './magento-2-cms'
-import { Storyblok } from './vsf-storyblok-module'
+import { Storyblok } from '@kodbruket/vsf-storyblok-module'
 
 export const registerModules: VueStorefrontModule[] = [
   Checkout,

.gitignore

@@ -1,3 +1,4 @@
-node_modules
+dist/
+node_modules/
 .theme
 .DS_Store

docker-compose.yml

@@ -44,8 +44,9 @@ services:
       - './.docker/vue-storefront-api/var:/var/www/var:delegated'
       - './.docker/api/config.json:/var/www/config/local.json'
       - './.docker/api/db.js:/var/www/src/db.js'
+      - './.docker/api/package.json:/var/www/src/api/extensions/safira-api/package.json'
       - >-
-        ./packages/vsf-storyblok-extension:/var/www/src/api/extensions/vsf-storyblok-extension:delegated
+        ./packages/vsf-storyblok-extension:/var/www/@kodbruket/vsf-storyblok-extension:delegated
     healthcheck:
       test: ['CMD', 'curl', '-f', '-s', '-S', 'http://localhost:8080/api']
   storefront-ui:
@@ -75,9 +76,9 @@ services:
       - './.docker/vue-storefront/var:/var/www/var:delegated'
       - './.docker/frontend/config.json:/var/www/config/local.json'
       - './.docker/frontend/modules.ts:/var/www/src/modules/index.ts'
-      - './theme:/var/www/src/themes/default'
+      - './theme:/var/www/src/themes/default:delegated'
       - >-
-        ./packages/vsf-storyblok-module:/var/www/src/modules/vsf-storyblok-module:delegated
+        ./packages/vsf-storyblok-module:/var/www/@kodbruket/vsf-storyblok-module:delegated
     healthcheck:
       test:
         ['CMD', 'wget', '-q', '--tries=1', '--spider', 'http://localhost:3000']

packages/vsf-storyblok-extension/babel.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env', {
+        targets: {
+          node: '8'
+        }
+      }
+    ]
+  ]
+}

packages/vsf-storyblok-extension/package.json

@@ -2,16 +2,24 @@
   "name": "@kodbruket/vsf-storyblok-extension",
   "version": "0.0.1",
   "description": "Vue Storefront Storyblok extension",
-  "module": "index.js",
+  "module": "src/index.js",
+  "main": "dist/index.js",
   "repository": "https://github.com/kodbruket/vsf-storyblok-sync.git",
   "author": "Max Malm",
   "license": "MIT",
   "dependencies": {
     "storyblok-js-client": "^1.0.22"
   },
   "files": [
-    "hook.js",
-    "index.js",
-    "sync-stories.js"
-  ]
+    "dist"
+  ],
+  "scripts": {
+    "build": "babel src -s -D -d dist",
+    "prepublishOnly": "yarn build"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.4.4",
+    "@babel/core": "^7.4.4",
+    "@babel/preset-env": "^7.4.4"
+  }
 }

packages/vsf-storyblok-extension/hook.js → packages/vsf-storyblok-extension/src/hook.js

@@ -1,5 +1,5 @@
 import { json, Router } from 'express'
-import { apiStatus } from '../../../lib/util'
+import { apiStatus } from './utils'
 
 const transformStory = (index) => ({ id, ...story } = {}) => ({
   index: index,

packages/vsf-storyblok-extension/index.js → packages/vsf-storyblok-extension/src/index.js

@@ -1,7 +1,7 @@
 import { Router } from 'express'
 import crypto from 'crypto'
 import StoryblokClient from 'storyblok-js-client'
-import { apiStatus } from '../../../lib/util'
+import { apiStatus } from './utils'
 import { hook } from './hook'
 import { syncStories } from './sync-stories'
 

packages/vsf-storyblok-extension/src/utils.js

@@ -0,0 +1,13 @@
+/** Creates a api status call and sends it thru to Express Response object.
+ *  @param {express.Response} res Express HTTP Response
+ *  @param {number} [code=200]    Status code to send on success
+ *  @param {json} [result='OK']   Text message or result information object
+ */
+export function apiStatus (res, result = 'OK', code = 200, meta = null) {
+  let apiResult = { code: code, result: result }
+  if (meta !== null) {
+    apiResult.meta = meta
+  }
+  res.status(code).json(apiResult)
+  return result
+}

theme/components/storyblok/Hero.vue

@@ -96,7 +96,7 @@ section {
 </style>
 
 <script>
-import { Blok } from 'src/modules/vsf-storyblok-module/components'
+import { Blok } from '@kodbruket/vsf-storyblok-module/components'
 export default {
   name: 'HeroBlok',
   extends: Blok

theme/components/storyblok/Image.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { Blok } from 'src/modules/vsf-storyblok-module/components'
+import { Blok } from '@kodbruket/vsf-storyblok-module/components'
 export default {
   name: 'ImageBlok',
   extends: Blok

theme/components/storyblok/Newsletter.vue

@@ -38,7 +38,7 @@ import i18n from '@vue-storefront/i18n'
 
 import ButtonFull from 'theme/components/theme/ButtonFull.vue'
 import BaseInput from 'theme/components/core/blocks/Form/BaseInput.vue'
-import { Blok } from 'src/modules/vsf-storyblok-module/components'
+import { Blok } from '@kodbruket/vsf-storyblok-module/components'
 
 export default {
   beforeDestroy () {

theme/components/storyblok/Spacer.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { Blok } from 'src/modules/vsf-storyblok-module/components'
+import { Blok } from '@kodbruket/vsf-storyblok-module/components'
 export default {
   name: 'SpacerBlok',
   extends: Blok

theme/components/storyblok/TextSection.vue

@@ -27,7 +27,7 @@ section {
 </style>
 
 <script>
-import { Blok } from 'src/modules/vsf-storyblok-module/components'
+import { Blok } from '@kodbruket/vsf-storyblok-module/components'
 export default {
   name: 'TextSectionBlok',
   extends: Blok

theme/components/storyblok/index.ts

@@ -1,7 +1,9 @@
-import { add } from 'src/modules/vsf-storyblok-module/components'
+import { add } from '@kodbruket/vsf-storyblok-module/components'
 
 add('hero', () => import('./Hero.vue'))
 add('demoImage', () => import('./Image.vue'))
 // Overwrite an existing component
 // add('tile', () => import('./Tile.vue'), { force: true })
 add('newsletter', () => import('./Newsletter.vue'))
+add('spacer', () => import('./Spacer.vue'))
+add('textSection', () => import('./TextSection.vue'))

theme/package.json

@@ -16,7 +16,8 @@
     "vue-no-ssr": "^0.2.2",
     "vue-progressbar": "^0.7.5",
     "vuelidate": "^0.6.2",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "@kodbruket/vsf-storyblok-module": "./@kodbruket/vsf-storyblok-module"
   },
   "publishConfig": {
     "access": "public"