feature(picker-starter): add picker.config file (#84)

* add picker.config file

* return service from defineConfig

* make options config to be optional

* add simple validation without using Joi

* get rid of the option example property in our config schema

* make optionsValidate optional

* fix type error

* fix prettier

* only accept limit as option and get rid of selectOnly

picker-starter/README.md

@@ -22,7 +22,7 @@ As you can see in the example below, the default `platform` example function ret
 
 ```js
 export const platform: PickerPlatform<OptionsParams> = (options) => ({
-  itemServices: [
+  tabs: [
     {
       name: 'product',
       label: 'Products',
@@ -44,7 +44,6 @@ This file is responsible for handling all [options](https://www.storyblok.com/do
 In this starter example, we accept two options by default, they are:
 
 - `limit`: how many items this starter can select
-- `selectOnly`: which service/tab we want to show. By default, as we have two services (products and categories), you're able to pass `product` or `category` as value.
 
 See below how to test these options using our Sandbox:
 
@@ -58,7 +57,7 @@ So, suppose you are working in a `Spotify Song Picker` and you don't want to lis
 
 ```js
 export const platform: PickerPlatform<OptionsParams> = (options) => ({
-  itemServices: [
+  tabs: [
     {
       name: 'songs',
       label: 'Songs',

picker-starter/package.json

@@ -18,14 +18,12 @@
     "@storyblok/design-system": "^3.19.3",
     "@storyblok/field-plugin": "1.0.0",
     "debounce": "^1.2.1",
-    "joi": "^17.11.0",
     "vue": "^3.2.47",
     "vue-draggable-next": "^2.2.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.1.4",
     "@types/debounce": "^1.2.4",
-    "@types/joi": "^17.2.3",
     "@typescript-eslint/eslint-plugin": "^6.12.0",
     "@typescript-eslint/parser": "^6.12.0",
     "@vitejs/plugin-vue": "^4.1.0",

picker-starter/src/components/FieldPlugin.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { Picker } from './Picker'
-import { servicePluginParams } from '../picker-params'
 import { useFieldPlugin } from '@storyblok/field-plugin/vue3'
 import { pluginName } from '../settings'
+import setup from '../picker.config'
 
 const plugin = useFieldPlugin()
 
@@ -18,6 +18,10 @@ const setValue = (content: any) => {
     ...content,
   })
 }
+
+const servicePluginParams = computed(() => {
+  return setup(plugin.data.options)
+})
 </script>
 
 <template>

picker-starter/src/components/ModalPage/ModalPage.vue

@@ -36,21 +36,21 @@
         :type="null"
       >
         <SbTab
-          v-for="itemService in itemServices"
-          :key="itemService.name"
-          :label="itemService.label"
-          :name="itemService.name"
+          v-for="tab in tabs"
+          :key="tab.name"
+          :label="tab.label"
+          :name="tab.name"
         />
       </SbTabs>
       <div class="sb-tab-panels">
         <SbTabPanels v-model="activeTab">
           <SbTabPanel
-            v-for="itemService in itemServices"
-            :key="itemService.name"
-            :name="itemService.name"
+            v-for="tab in tabs"
+            :key="tab.name"
+            :name="tab.name"
           >
             <ItemPicker
-              :item-service="itemService"
+              :item-service="tab"
               :basket="basket"
               :is-limit-reached="isLimitReached"
             />
@@ -88,7 +88,6 @@ import { ItemPicker } from '../ItemPicker'
 import { CartList } from '../CartList'
 import { EmptyScreen } from '../EmptyScreen'
 import { NonItemsAddedIcon } from '../Icons'
-import { getItemServices } from '../ModalPage/getItemServices'
 
 export default {
   name: 'ModalPage',
@@ -126,10 +125,6 @@ export default {
       type: Object,
       default: undefined,
     },
-    selectOnly: {
-      type: String,
-      default: undefined,
-    },
     maxItems: {
       type: Number,
       default: undefined,
@@ -145,16 +140,16 @@ export default {
     NoItemsIcon() {
       return NonItemsAddedIcon
     },
-    itemServices() {
-      return getItemServices(this.pickerService, this.selectOnly)
+    tabs() {
+      return this.pickerService.tabs
     },
     isLimitReached() {
       return this.maxItems <= this.basket.size()
     },
   },
   methods: {
     initialActiveTab() {
-      return getItemServices(this.pickerService, this.selectOnly)?.[0]?.name
+      return this.pickerService.tabs[0]?.name
     },
   },
 }

picker-starter/src/components/Picker/Picker.vue

@@ -13,7 +13,6 @@
         :basket="basket"
         :picker-service="pickerService"
         :close-modal="closeModal"
-        :select-only="selectOnly"
         :max-items="maxItems"
       />
       <NonModalPage
@@ -67,9 +66,6 @@ export default {
     ...pluginPropsDef,
   },
   computed: {
-    selectOnly() {
-      return this.unvalidatedOptions.selectOnly
-    },
     maxItems() {
       return this.unvalidatedOptions.limit === ''
         ? undefined

picker-starter/src/components/ValidationError/ValidationError.vue

@@ -11,10 +11,6 @@
         <p class="plugin-validation-error__details">
           {{ validationResult.error }}
         </p>
-        <p>Example of valid options:</p>
-        <div class="plugin-validation-error__example">
-          {{ validationResult.exampleOptions }}
-        </div>
       </div>
     </div>
   </div>

picker-starter/src/core/index.ts

@@ -3,3 +3,4 @@ export * from './basket'
 export * from './matchItem'
 export * from './service'
 export * from './types'
+export * from './setup'

picker-starter/src/core/setup.ts

@@ -0,0 +1,44 @@
+import { Component } from 'vue'
+import { OptionsParams, PickerPluginParams, TabItem } from './types'
+
+export type PickerConfig = {
+  title?: string
+  icon?: Component
+  validateOptions?: () => ValidationResult
+  tabs: TabItem[]
+}
+
+export type ValidationResult = {
+  isValid: boolean
+  error?: string
+}
+
+export type PickerConfigFn = (optionsParams: OptionsParams) => PickerConfig
+
+export type PickerBuilderFn = (
+  optionsParams: OptionsParams,
+) => PickerPluginParams
+
+export const defineConfig =
+  (fn: PickerConfigFn): PickerBuilderFn =>
+  (optionsParams: OptionsParams): PickerPluginParams => {
+    const { title, icon, tabs, validateOptions } = fn(optionsParams)
+
+    return {
+      title,
+      icon,
+      makeService: () => {
+        const validation = validateOptions?.()
+
+        if (validation?.isValid === false) {
+          return {
+            error: validation.error || 'Unknown error',
+          }
+        }
+
+        return {
+          value: { tabs },
+        }
+      },
+    }
+  }

picker-starter/src/core/types.ts

@@ -31,12 +31,10 @@ export type CursorPaginatedResult<Item> = {
 
 export type PickerServiceValidationResult =
   | {
-      exampleOptions: Record<string, string>
       value: undefined
       error: string
     }
   | {
-      exampleOptions: Record<string, string>
       value: PickerService
       error: undefined
     }
@@ -75,15 +73,15 @@ export type ItemQuery = (
   params: ItemQueryParams,
 ) => Promise<QueryResponse<BasketItem>>
 
-export type ItemService = {
+export type TabItem = {
   name: string
   label: string
   query: ItemQuery // TODO rename propery
   getFilters?: FilterList
 }
 
 export type PickerService = {
-  itemServices: ItemService[]
+  tabs: TabItem[]
 }
 
 export type PickerPluginParams = {

picker-starter/src/picker.config.ts

@@ -0,0 +1,39 @@
+import { getProductFilters, queryCategories, queryProducts } from '@/data'
+import { defineConfig } from '@/core'
+import { StoryblokIcon } from './components'
+
+export default defineConfig((options) => {
+  return {
+    title: 'Picker Starter',
+    icon: StoryblokIcon,
+    validateOptions: () => {
+      const { limit } = options
+
+      const isLimitOptionValid = limit === undefined || Number(limit) > 0
+
+      if (!isLimitOptionValid) {
+        return {
+          isValid: false,
+          error: `The 'limit' option must be an integer greater than 0`,
+        }
+      }
+
+      return {
+        isValid: true,
+      }
+    },
+    tabs: [
+      {
+        name: 'product',
+        label: 'Products',
+        query: queryProducts,
+        getFilters: getProductFilters,
+      },
+      {
+        name: 'category',
+        label: 'Categories',
+        query: queryCategories,
+      },
+    ],
+  }
+})