chore(IN-4062): consolidate storyblok

.eslintignore

@@ -4,4 +4,6 @@
 packages/cache/nuxt/plugin.js
 packages/nuxt-module/plugins/i18n-cookies.js
 packages/nuxt-module/plugins/logger.js
-packages/cli/dist
+packages/cli/dist
+packages/*/server
+packages/*/nuxt/plugin.js

.github/workflows/test.yml

@@ -11,12 +11,14 @@ on:
       - main
       - develop
       - release-**
+      - legacy
 
 jobs:
   test_repository:
     name: Run linter, build and test all packages
     runs-on: ubuntu-latest
     strategy:
+      fail-fast: false
       matrix:
         node-version: [14, 16, 18]
     steps:

packages/middleware/nuxt/index.js

@@ -41,7 +41,7 @@ module.exports = async function VueStorefrontMiddleware(moduleOptions) {
       );
     }
   });
-
+  // eslint-disable-next-line global-require
   const config = require(`${this.nuxt.options.rootDir}/middleware.config.js`);
   const handler = await createServer(config);
   const serverMiddleware = { path: `/${apiPath}`, handler };

packages/middleware/src/createServer.ts

@@ -79,16 +79,18 @@ async function createServer(config: MiddlewareConfig): Promise<Express> {
       const status = getAgnosticStatusCode(error);
       res.status(status);
       if (status < 500) {
+
         /**
          * For all 4xx error codes or client error codes we wanted to send the error message
          */
         res.send(error);
       } else {
+
         /**
          * For all other error codes we wanted to send a generic error message
          */
         res.send(
-          "ServerError: Something went wrong. Please, check the logs for more details."
+          'ServerError: Something went wrong. Please, check the logs for more details.'
         );
       }
     }

packages/storyblok/.gitignore

@@ -0,0 +1,7 @@
+.idea
+
+lib
+server
+coverage
+node_modules
+package-lock.json

packages/storyblok/.npmignore

@@ -0,0 +1,19 @@
+node_modules
+coverage
+src
+demo
+__tests__
+.husky
+.github
+
+.idea
+.editorconfig
+.eslintrc.js
+.prettierrc
+babel.config.js
+commitlint.config.js
+package-lock.json
+jest.config.ts
+rollup.config.js
+tsconfig.json
+yarn.lock

packages/storyblok/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @vue-storefront/storyblok
+
+## 0.4.0
+
+### Minor Changes
+
+- ed72567: Replaced `storyblok-vue` with `@storyblok/vue-2`.
+
+## 0.4.0-rc.0
+
+### Minor Changes
+
+- ed72567: Replaced `storyblok-vue` with `@storyblok/vue-2`.

packages/storyblok/README.md

@@ -0,0 +1,30 @@
+# Storyblok Integration
+
+### Stay connected
+
+[![GitHub Repo stars](https://img.shields.io/github/stars/vuestorefront/vue-storefront?style=social)](https://github.com/vuestorefront/vue-storefront)
+[![Twitter Follow](https://img.shields.io/twitter/follow/vuestorefront?style=social)](https://twitter.com/vuestorefront)
+[![YouTube Channel Subscribers](https://img.shields.io/youtube/channel/subscribers/UCkm1F3Cglty3CE1QwKQUhhg?style=social)](https://www.youtube.com/c/VueStorefront)
+[![Discord](https://img.shields.io/discord/770285988244750366?label=join%20discord&logo=Discord&logoColor=white)](https://discord.vuestorefront.io)
+
+Here you can find a quick installation guide for [Storyblok](https://www.storyblok.com/) CMS integration with Alokai.
+
+Full documentation can be found [here](https://docs.vuestorefront.io/storyblok).
+
+### Installation
+
+---
+
+Install the module in your app.
+
+```bash
+npm install @vue-storefront/storyblok @storyblok/vue-2  --save
+```
+
+or
+
+```bash
+yarn add @vue-storefront/storyblok -D @storyblok/vue-2
+```
+
+Check the [documentation](https://docs.vuestorefront.io/storyblok) for all the instructions and guidelines.

packages/storyblok/components/RenderContent.vue

@@ -0,0 +1,36 @@
+<template>
+  <div v-editable="content || ''">
+    <component
+      v-for="(component, index) in components"
+      v-editable="content[index] ? content[index] : ''"
+      :is="component.componentName"
+      :key="index"
+      v-bind="component.props"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { extractComponents } from '@vue-storefront/storyblok';
+
+interface RenderContent {
+  componentName: string
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  props?: {}
+}
+
+export default Vue.extend({
+  name: 'RenderContent',
+  props: {
+    content: {
+      type: Array
+    }
+  },
+  computed: {
+    components(): RenderContent[] {
+      return extractComponents(this.content);
+    }
+  }
+});
+</script>

packages/storyblok/jest.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/$1',
+    '^~/(.*)$': '<rootDir>/$1'
+  },
+  moduleFileExtensions: ['js', 'ts', 'json'],
+  transform: {
+    '^.+\\.js$': 'babel-jest',
+    '^.+\\.ts$': 'ts-jest'
+  },
+  testMatch: ['<rootDir>/**/__tests__/**/*spec.[jt]s?(x)']
+};

packages/storyblok/nuxt/index.js

@@ -0,0 +1,20 @@
+import path from 'path';
+
+// eslint-disable-next-line
+export default function storyblok(moduleOptions) {
+  const { storyblok, head } = this.options;
+  const options = {
+    ...storyblok,
+    ...moduleOptions
+  };
+  if (options.jsBridge && head) {
+    const scripts = head.script;
+    scripts.push({
+      src: `${options.jsBridge}`
+    });
+  }
+  this.addPlugin({
+    src: path.resolve(__dirname, 'plugin.js'),
+    options
+  });
+}

packages/storyblok/nuxt/plugin.js

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import {StoryblokVue} from '@storyblok/vue-2'
+import { integrationPlugin } from '@vue-storefront/core'
+
+Vue.use(StoryblokVue)
+
+export default integrationPlugin(({ integration }) => {
+  integration.configure('sb', { ...<%= serialize(options) %> })
+})

packages/storyblok/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@vue-storefront/storyblok",
+  "version": "0.4.0",
+  "description": "Storyblok CMS integration with Vue Storefront",
+  "main": "lib/index.cjs.js",
+  "module": "lib/index.es.js",
+  "server": "server/index.js",
+  "scripts": {
+    "build": "rollup -c && rm -r -- ./server/*/",
+    "build:clean": "rollup -c && rm -r -- ./lib/*/ && rm -r -- ./server/*/",
+    "dev": "rollup -c -w",
+    "test": "jest --passWithNoTests",
+    "lint": "eslint --ext .js,.ts --ignore-path .eslintignore .",
+    "prepublish": "yarn build",
+    "changesets:version": "yarn changeset version && YARN_ENABLE_IMMUTABLE_INSTALLS=false yarn install",
+    "changesets:publish": "yarn build && yarn changeset publish"
+  },
+  "author": "Vue Storefront",
+  "license": "MIT",
+  "dependencies": {
+    "@vue-storefront/core": "^2.4.3",
+    "axios": "^0.23.0",
+    "nanoid": "^3.1.30",
+    "storyblok-js-client": "^4.1.5",
+    "tslib": "^2.3.1"
+  },
+  "devDependencies": {
+    "@vue-storefront/integrations-tsconfig": "^0.0.4",
+    "@jest/globals": "^27.2.5"
+  },
+  "peerDependencies": {
+    "@storyblok/vue-2": "^3.0.17"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "vuestorefront",
+    "vue-storefront",
+    "storyblok",
+    "cms",
+    "integration",
+    "vue",
+    "vuejs"
+  ],
+  "homepage": "https://github.com/vuestorefront/storyblok"
+}

packages/storyblok/rollup.config.js

@@ -0,0 +1,41 @@
+import typescript from 'rollup-plugin-typescript2';
+import pkg from './package.json';
+
+const config = {
+  input: 'src/index.ts',
+  output: [
+    {
+      file: pkg.main,
+      format: 'cjs',
+      sourcemap: true
+    },
+    {
+      file: pkg.module,
+      format: 'es',
+      sourcemap: true
+    }
+  ],
+  external: [...Object.keys(pkg.dependencies || {})],
+  plugins: [
+    typescript()
+  ]
+};
+const server = {
+  input: 'src/index.server.ts',
+  output: [
+    {
+      file: pkg.server,
+      format: 'cjs',
+      sourcemap: true
+    }
+  ],
+  external: [
+    ...Object.keys(pkg.dependencies || {}),
+    ...Object.keys(pkg.peerDependencies || {})
+  ],
+  plugins: [
+    typescript()
+  ]
+};
+
+export default [config, server];