feat: add Picker Starter to include Notion pages in Storyblok

packages/sb-notion-picker/.env.local.example

@@ -0,0 +1,4 @@
+STORYBLOK_PERSONAL_ACCESS_TOKEN=
+VITE_PLUGIN_NAME=
+VITE_DEFAULT_PER_PAGE=
+VITE_THROTTLE_MS=

packages/sb-notion-picker/.eslintignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

packages/sb-notion-picker/.eslintrc.cjs

@@ -0,0 +1,56 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2021: true,
+    jest: true,
+  },
+  overrides: [
+    {
+      files: '*.ts',
+      parser: '@typescript-eslint/parser',
+      extends: ['plugin:@typescript-eslint/recommended'],
+      rules: {}, // Override rules as well for TS files. Basically any config option can be modified here
+    },
+    {
+      files: '*.vue',
+      parser: 'vue-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+        sourceType: 'module',
+      },
+      extends: ['plugin:vue/vue3-recommended'],
+      rules: {
+        'vue/multi-word-component-names': 'off',
+        'vue/html-self-closing': [
+          'warn',
+          {
+            html: {
+              void: 'always',
+            },
+          },
+        ],
+      }, // Override rules as well for TS files. Basically any config option can be modified here
+    },
+  ],
+
+  extends: ['eslint:recommended'],
+  parserOptions: {
+    ecmaVersion: 12,
+    sourceType: 'module',
+    parser: 'babel-eslint',
+  },
+  plugins: ['@typescript-eslint'],
+  rules: {
+    curly: 'error',
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
+      {
+        args: 'none',
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
+      },
+    ],
+  },
+}

packages/sb-notion-picker/.gitignore

@@ -0,0 +1,29 @@
+# env files except for .env.local.example
+.env
+.env.*
+!.env.local.example
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/sb-notion-picker/.nvmrc

@@ -0,0 +1 @@
+18.16.0

packages/sb-notion-picker/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "bracketSpacing": true,
+  "printWidth": 80,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "singleAttributePerLine": true
+}

packages/sb-notion-picker/README.md

@@ -0,0 +1,70 @@
+# Picker Starter
+
+A starter project for building e-commerce [field plugins](https://www.storyblok.com/docs/plugins/field-plugins/introduction) and other “picker” field plugins – for example, integrations with digital asset management (DAM) systems.
+
+The primary goal of this starter is to provide developers with a clear blueprint for creating their own `pickers` just by making small changes to it.
+
+## `picker.config.ts`
+
+The [`picker.config.ts`](./src/picker.config.ts) is a configuration file where you can customize the title, icon, tabs, filters, methods to perform queries, and also a method to validate the expected [plugin options](https://www.storyblok.com/docs/plugins/field-plugins/introduction#options).
+
+In the example below you can have a glimpse of what this file looks like and its responsibilities:
+
+```js
+export default defineConfig((options) => {
+  return {
+    title: 'Picker Starter', //(1) modal's title
+    icon: StoryblokIcon, //(2) modal's icon
+    validateOptions: () => {
+      //(3) optional function responsible for validating the plugin's options and showing a warning box in case of failure.
+      const { limit } = options
+
+      const isLimitOptionValid = limit === undefined || Number(limit) > 0
+
+      if (!isLimitOptionValid) {
+        //(3) In case of failure, the returned object needs to look like this
+        return {
+          isValid: false,
+          error: `The 'limit' option must be an integer greater than 0`,
+        }
+      }
+
+      //If all the options are valid (in case it relies on options)
+      //the returned object will look like this
+      return {
+        isValid: true,
+      }
+    },
+    tabs: [
+      //(4) All of your Picker's tabs.
+      //You can have as many as your picker needs.
+      {
+        name: 'items', //mandatory field used to identify this tab
+        label: 'Items', //(5) displayed in the modal
+        query: queryItems, //(6) it fetches, sorts, and filter all the data for this tab
+        getFilters: getItemFilters, //(7) select input acting like filters to the data
+      },
+    ],
+  }
+})
+```
+
+## Local Development
+
+To start running this project, just run:
+
+```sh
+# install all required dependencies
+yarn install
+
+# then, serve the field plugin
+yarn dev
+```
+
+## Deploy
+
+Deploy your field plugin with the [CLI](https://www.npmjs.com/package/@storyblok/field-plugin-cli). Issue a [personal access token](https://app.storyblok.com/#/me/account?tab=token), rename `.env.local.example` to `.env.example`, open the file, set the value `STORYBLOK_PERSONAL_ACCESS_TOKEN`, and from the **plugin's root folder**, run the following command:
+
+```shell
+yarn deploy
+```

packages/sb-notion-picker/field-plugin.config.json

@@ -0,0 +1,3 @@
+{
+  "options": []
+}

packages/sb-notion-picker/index.html

@@ -0,0 +1,24 @@
+<!-- DO NOT EDIT THIS FILE. -->
+<!--
+  This file mimics the production environment.
+  A change to this file could cause problems
+  when testing your field plugin in development mode.
+-->
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <title>Storyblok Field Plugin</title>
+  </head>
+  <body>
+    <script
+      type="module"
+      src="/src/main.ts"
+    ></script>
+  </body>
+</html>

packages/sb-notion-picker/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "sb-notion-picker",
+  "private": true,
+  "version": "0.0.0",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "test": "vitest",
+    "prettier": "prettier --check .",
+    "lint": "eslint .",
+    "check:types": "vue-tsc --noEmit",
+    "preview": "vite preview",
+    "deploy": "npm run build && npx @storyblok/field-plugin-cli@latest deploy"
+  },
+  "dependencies": {
+    "@storyblok/design-system": "^3.25.0",
+    "@storyblok/field-plugin": "1.1.2",
+    "debounce": "^2.0.0",
+    "vue": "^3.4.21",
+    "vue-draggable-next": "^2.2.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.2",
+    "@types/debounce": "^1.2.4",
+    "@typescript-eslint/eslint-plugin": "^7.3.0",
+    "@typescript-eslint/parser": "^7.3.0",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.23.0",
+    "prettier": "^3.2.5",
+    "sass": "^1.72.0",
+    "ts-node": "^10.9.2",
+    "typescript": "5.4.2",
+    "vite": "^5.1.6",
+    "vite-plugin-css-injected-by-js": "^3.4.0",
+    "vitest": "^1.4.0",
+    "vue-tsc": "1.8.6"
+  }
+}

packages/sb-notion-picker/src/App.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import FieldPlugin from './components/FieldPlugin.vue'
+</script>
+
+<template>
+  <FieldPlugin />
+</template>

packages/sb-notion-picker/src/components/AddAssetButton/AddAssetButton.vue

@@ -0,0 +1,76 @@
+<template>
+  <button
+    class="plugin-add-item-big-button"
+    @click.prevent="handleClick"
+  >
+    <CartListItemImageContainer class="plugin-add-item-big-button__container">
+      <SbIcon name="block-image" />
+    </CartListItemImageContainer>
+    <span class="plugin-add-item-big-button__label">
+      <SbIcon
+        name="plus"
+        size="small"
+      />
+      {{ label }}
+    </span>
+  </button>
+</template>
+
+<script>
+import { CartListItemImageContainer } from '../CartListItemImageContainer'
+
+export default {
+  name: 'AddAssetButton',
+  components: {
+    CartListItemImageContainer,
+  },
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+  },
+  emits: ['click'],
+  methods: {
+    handleClick(e) {
+      this.$emit('click', e)
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+@import '../styles.scss';
+
+.plugin-add-item-big-button {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 15px;
+  cursor: pointer;
+  border: 1px solid #dfe3e8;
+  border-radius: 5px;
+
+  background-color: #ffffff;
+
+  @include transition(background-color);
+
+  &:hover {
+    background-color: #f7f8f9;
+  }
+}
+
+.plugin-add-item-big-button__label {
+  display: inline-flex;
+  align-items: center;
+  color: #1b243f;
+  font-size: 1.4rem;
+  font-weight: 500;
+}
+
+.plugin-add-item-big-button__container {
+  height: 80px;
+  min-width: 106px;
+}
+</style>

packages/sb-notion-picker/src/components/AddAssetButton/index.ts

@@ -0,0 +1 @@
+export { default as AddAssetButton } from './AddAssetButton.vue'