chore(in-3875): storyblok package upgrade (#26)

* chore: swap storyblok packages

* chore: upgrade storyblok package

* chore: update dev dependencies

* chore: update husky

* chore: deactivate sonar cloud check

* chore: install engineering toolkit dependencies

* fix: linting errors

* chore: storyblok bridge file improvements

* chore: changeset

* chore: enable releases from master

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "master",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.changeset/pre.json

@@ -0,0 +1,8 @@
+{
+  "mode": "pre",
+  "tag": "rc",
+  "initialVersions": {
+    "@vue-storefront/storyblok": "0.3.0"
+  },
+  "changesets": []
+}

.changeset/twelve-pets-live.md

@@ -0,0 +1,5 @@
+---
+'@vue-storefront/storyblok': minor
+---
+
+Replaced `storyblok-vue` with `@storyblok/vue-2`.

.eslintrc.js

@@ -1,50 +1,4 @@
 module.exports = {
-  root: true,
-  env: {
-    browser: true,
-    node: true,
-  },
-  parserOptions: {
-    ecmaVersion: 2020,
-    sourceType: 'module',
-    parser: '@typescript-eslint/parser',
-  },
-  extends: [
-    'prettier',
-    'plugin:prettier/recommended',
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:vue/vue3-recommended',
-    'prettier/vue',
-  ],
-  plugins: ['prettier', '@typescript-eslint'],
-  rules: {
-    camelcase: 'off',
-    'no-unused-vars': 'off',
-    'object-curly-spacing': ['error', 'always'],
-    'array-bracket-spacing': ['error', 'never'],
-    'space-before-function-paren': 'off',
-    '@typescript-eslint/ban-ts-comment': 'off',
-    '@typescript-eslint/camelcase': 'off',
-    '@typescript-eslint/no-explicit-any': 0,
-    '@typescript-eslint/no-extra-semi': 'off',
-    '@typescript-eslint/no-unused-vars': [
-      'error',
-      {
-        vars: 'all',
-        args: 'after-used',
-        ignoreRestSiblings: false,
-      },
-    ],
-    '@typescript-eslint/ban-types': [
-      'error',
-      {
-        extendDefaults: true,
-        types: {
-          '{}': false,
-        },
-      },
-    ],
-    'vue/no-setup-props-destructure': 'off',
-  },
-}
+  extends: '@vue-storefront/eslint-config-integrations',
+};
+

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @vuestorefront/integrations-team

.github/workflows/continuous-delivery.yml

@@ -0,0 +1,15 @@
+name: VSF Continuous Delivery
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - master
+
+jobs:
+  release-packages:
+    name: "Release NPM Packages"
+    uses: vuestorefront/integrations-github-workflows/.github/workflows/continuous-delivery.yml@main
+    secrets: inherit
+    with:
+      enterprise: false

.github/workflows/continuous-integration.yml

@@ -0,0 +1,30 @@
+name: VSF Continuous Integration
+
+on:
+  pull_request:
+    types: ['opened', 'edited', 'reopened', 'synchronize']
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+
+jobs:
+  continous-integration:
+    name: 'Continuous Integration'
+    uses: vuestorefront/integrations-github-workflows/.github/workflows/continuous-integration.yml@main
+    secrets: inherit
+    with:
+      enterprise: false
+
+  # This integration has 0 tests, thus the following sonarcloud check will fail
+
+  # sonarcloud:
+  #   name: 'SonarCloud'
+  #   needs: [continous-integration]
+  #   uses: vuestorefront/integrations-github-workflows/.github/workflows/sonarcloud.yml@main
+  #   secrets:
+  #     SONARCLOUD_TOKEN: ${{ secrets.SONARCLOUD_TOKEN }}
+  #   with:
+  #     project_key: 'vuestorefront_storyblok'
+  #     package_name: 'storyblok'
+  #     exclusions: '*.config.js,src/index.ts,src/api-extractor-data.ts,**/types/**'

README.md

@@ -7,24 +7,24 @@
 [![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 quick installation guide for [Storyblok](https://www.storyblok.com/) CMS integration with Vue Storefront.
+Here you can find a quick installation guide for [Storyblok](https://www.storyblok.com/) CMS integration with Vue Storefront.
 
 Full documentation can be found [here](https://docs.vuestorefront.io/storyblok).
 
 ### Installation
 
 ---
 
-Install module into your app.
+Install the module in your app.
 
 ```bash
-npm install @vue-storefront/storyblok storyblok-vue  --save
+npm install @vue-storefront/storyblok @storyblok/vue-2  --save
 ```
 
 or
 
 ```bash
-yarn add @vue-storefront/storyblok storyblok-vue
+yarn add @vue-storefront/storyblok -D @storyblok/vue-2
 ```
 
 Check the [documentation](https://docs.vuestorefront.io/storyblok) for all the instructions and guidelines.

nuxt/plugin.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import StoryblokVue from 'storyblok-vue'
+import {StoryblokVue} from '@storyblok/vue-2'
 import { integrationPlugin } from '@vue-storefront/core'
 
 Vue.use(StoryblokVue)

package.json

@@ -11,7 +11,9 @@
     "dev": "rollup -c -w",
     "test": "jest --passWithNoTests",
     "lint": "eslint --ext .js,.ts --ignore-path .eslintignore .",
-    "prepublish": "yarn build"
+    "prepublish": "yarn build",
+    "changesets:version": "yarn changeset version && YARN_ENABLE_IMMUTABLE_INSTALLS=false yarn install",
+    "changesets:publish": "yarn build && yarn changeset publish"
   },
   "lint-staged": {
     "*.{js,ts,vue}": "eslint --ext .js,.ts --ignore-path .eslintignore ."
@@ -32,26 +34,23 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
+    "@changesets/changelog-github": "^0.4.8",
+    "@changesets/cli": "^2.26.1",
     "@commitlint/cli": "^13.2.1",
     "@commitlint/config-conventional": "^13.2.0",
+    "@vue-storefront/eslint-config-integrations": "^0.0.19",
+    "@vue-storefront/integrations-tsconfig": "^0.0.4",
+    "@vue-storefront/rollup-config": "^0.0.6",
+    "@vue/eslint-config-typescript": "^7.0.0",
     "@jest/globals": "^27.2.5",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^7.19.1",
-    "husky": "^5.1.3",
+    "husky": "^8.0.3",
     "jest": "^27.2.5",
     "lint-staged": "^11.2.3",
     "prettier": "^2.4.1",
-    "rollup": "^2.58.0",
-    "rollup-plugin-typescript2": "^0.30.0",
-    "ts-jest": "^27.0.6",
-    "typescript": "^4.4.4"
+    "ts-jest": "^29.1.0"
   },
   "peerDependencies": {
-    "storyblok-vue": "^1.0.5"
+    "@storyblok/vue-2": "^3.0.17"
   },
   "publishConfig": {
     "access": "public"

src/api.ts

@@ -1,11 +1,11 @@
-import { ApiContext, ApiResponse, ContentSearchParams } from './types'
 import { Logger } from '@vue-storefront/core'
 import { nanoid } from 'nanoid'
+import { ApiContext, ApiResponse, ContentSearchParams } from './types'
 import { errorMessage } from './helpers/constants'
 import { extractNestedComponents } from './helpers'
 
 export const getContent = async (
-  { client, config }: ApiContext,
+  { client: Client, config }: ApiContext,
   {
     id,
     url,
@@ -20,7 +20,7 @@ export const getContent = async (
     return Logger.warn(`${errorMessage.GENERAL} ${errorMessage.EMPTY_ID}`)
   }
   const { token, cacheProvider } = config
-  const Storyblok = new client({
+  const Storyblok = new Client({
     accessToken: token,
     cache: {
       clear: 'auto',

src/helpers/index.ts

@@ -7,7 +7,7 @@ export const buildImageObject = (
   return items.map((item: { image }) => {
     const { replace } = actions
     if (item.image) {
-      const image = item.image
+      const { image } = item
       const itemObject = replace
         ? { ...item, url: image }
         : {

src/helpers/storyblokBridge.js → src/helpers/storyblokBridge.ts

@@ -5,6 +5,7 @@ export const storyblokBridge = (
 ) => {
   if (window) {
     // eslint-disable-next-line
+    // @ts-ignore
     const instance = new StoryblokBridge({
       resolveRelations: relations,
     })

src/index.server.ts

@@ -1,6 +1,6 @@
 import { apiClientFactory } from '@vue-storefront/core'
-import { ApiContext, ContentSearchParams } from './types'
 import StoryblokClient from 'storyblok-js-client'
+import { ApiContext, ContentSearchParams } from './types'
 
 import { getContent } from './api'
 

src/index.ts

@@ -1,4 +1,4 @@
-import { storyblokBridge } from './helpers/storyblokBridge.js'
+import { storyblokBridge } from './helpers/storyblokBridge'
 
 export * from './composables'
 export { storyblokBridge }

tsconfig.json

@@ -1,20 +1,15 @@
 {
+  "extends": "@vue-storefront/integrations-tsconfig/tsconfig",
   "compilerOptions": {
     "outDir": "./dist",
-    "esModuleInterop": true,
     "target": "es5",
     "module": "ES2015",
-    "moduleResolution": "node",
     "importHelpers": true,
     "noEmitHelpers": true,
     "sourceMap": true,
-    "declaration": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
     "baseUrl": "./src",
     "lib": ["es6", "es7", "ES2017", "ES2018", "ES2019", "dom"],
     "strict": false,
-    "preserveSymlinks": true
   },
   "exclude": ["node_modules", "**/*.spec.ts", "*.js", "server", "lib"]
 }