From c3ade47f3aa9cb909a0d57e3b30f81974ab74940 Mon Sep 17 00:00:00 2001
From: Dawntraoz <albasilventefu@gmail.com>
Date: Sat, 16 Mar 2024 23:29:20 +0100
Subject: [PATCH] feat: youtube embed plugin for my personal site

---
 packages/sb-meme-generator/package.json       |   2 +-
 packages/sb-youtube-embed/package.json        |   4 +-
 packages/sb-youtube-embed/src/App.vue         |   5 +-
 .../src/components/FieldPlugin.vue            |  32 ----
 .../FieldPluginExample/AssetSelector.vue      |  41 -----
 .../components/FieldPluginExample/Counter.vue |  28 ----
 .../FieldPluginExample/ModalToggle.vue        |  21 ---
 .../components/FieldPluginExample/example.css |  78 ---------
 .../FieldPluginExample/index.spec.ts          |  38 -----
 .../components/FieldPluginExample/index.vue   |  51 ------
 .../YoutubeVideoEmbed/VideoEmbed.vue          |  27 ++++
 .../YoutubeVideoEmbed/index.spec.ts           |  70 ++++++++
 .../components/YoutubeVideoEmbed/index.vue    |  53 +++++++
 packages/sb-youtube-embed/src/main.ts         |  17 +-
 packages/sb-youtube-embed/src/style.css       |   1 -
 packages/sb-youtube-embed/src/types.ts        |   6 +
 packages/sb-youtube-embed/vite.config.ts      |   8 +-
 yarn.lock                                     | 149 +++++++++++++++++-
 18 files changed, 327 insertions(+), 304 deletions(-)
 delete mode 100644 packages/sb-youtube-embed/src/components/FieldPlugin.vue
 delete mode 100644 packages/sb-youtube-embed/src/components/FieldPluginExample/AssetSelector.vue
 delete mode 100644 packages/sb-youtube-embed/src/components/FieldPluginExample/Counter.vue
 delete mode 100644 packages/sb-youtube-embed/src/components/FieldPluginExample/ModalToggle.vue
 delete mode 100644 packages/sb-youtube-embed/src/components/FieldPluginExample/example.css
 delete mode 100644 packages/sb-youtube-embed/src/components/FieldPluginExample/index.spec.ts
 delete mode 100644 packages/sb-youtube-embed/src/components/FieldPluginExample/index.vue
 create mode 100644 packages/sb-youtube-embed/src/components/YoutubeVideoEmbed/VideoEmbed.vue
 create mode 100644 packages/sb-youtube-embed/src/components/YoutubeVideoEmbed/index.spec.ts
 create mode 100644 packages/sb-youtube-embed/src/components/YoutubeVideoEmbed/index.vue
 create mode 100644 packages/sb-youtube-embed/src/types.ts

diff --git a/packages/sb-meme-generator/package.json b/packages/sb-meme-generator/package.json
index 82bd78f..8616982 100644
--- a/packages/sb-meme-generator/package.json
+++ b/packages/sb-meme-generator/package.json
@@ -11,7 +11,7 @@
     "deploy": "yarn build && npx @storyblok/field-plugin-cli@latest deploy --dotEnvPath '../../.env'"
   },
   "dependencies": {
-    "@storyblok/field-plugin": "1.1.1",
+    "@storyblok/field-plugin": "^1.1.2",
     "vue": "^3.2.47"
   },
   "devDependencies": {
diff --git a/packages/sb-youtube-embed/package.json b/packages/sb-youtube-embed/package.json
index 7d2de91..549cd04 100644
--- a/packages/sb-youtube-embed/package.json
+++ b/packages/sb-youtube-embed/package.json
@@ -11,7 +11,9 @@
     "deploy": "yarn build && npx @storyblok/field-plugin-cli@latest deploy --dotEnvPath '../../.env'"
   },
   "dependencies": {
-    "@storyblok/field-plugin": "1.1.1",
+    "@storyblok/design-system": "^3.25.0",
+    "@storyblok/field-plugin": "^1.1.2",
+    "lite-youtube-embed": "^0.3.2",
     "vue": "^3.2.47"
   },
   "devDependencies": {
diff --git a/packages/sb-youtube-embed/src/App.vue b/packages/sb-youtube-embed/src/App.vue
index ec17b36..7f4ec28 100644
--- a/packages/sb-youtube-embed/src/App.vue
+++ b/packages/sb-youtube-embed/src/App.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import FieldPlugin from './components/FieldPlugin.vue'
-import FieldPluginExample from './components/FieldPluginExample/index.vue'
+import YoutubeVideoEmbed from './components/YoutubeVideoEmbed/index.vue'
 </script>
 
 <template>
-  <FieldPluginExample />
+  <YoutubeVideoEmbed />
 </template>
diff --git a/packages/sb-youtube-embed/src/components/FieldPlugin.vue b/packages/sb-youtube-embed/src/components/FieldPlugin.vue
deleted file mode 100644
index 06ffd36..0000000
--- a/packages/sb-youtube-embed/src/components/FieldPlugin.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import { useFieldPlugin } from '@storyblok/field-plugin/vue3'
-
-const plugin = useFieldPlugin({
-  /*
-    The `validateContent` parameter is optional. It allows you to
-      - validate the content
-      - make changes before sending it to the Storyblok Visual Editor
-      - provide type-safety
-
-    // For example,
-    validateContent: (content: unknown) => {
-      if (typeof content === 'string') {
-        return {
-          content,
-        }
-      } else {
-        return {
-          content,
-          error: `content is expected to be a string (actual value: ${JSON.stringify(content)})`,
-        }
-      }
-    }
-  */
-})
-</script>
-
-<template>
-  <pre>
-    {{ JSON.stringify(plugin, null, 2) }} YouTube Embed uy
-  </pre>
-</template>
diff --git a/packages/sb-youtube-embed/src/components/FieldPluginExample/AssetSelector.vue b/packages/sb-youtube-embed/src/components/FieldPluginExample/AssetSelector.vue
deleted file mode 100644
index 42ff8cc..0000000
--- a/packages/sb-youtube-embed/src/components/FieldPluginExample/AssetSelector.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import type { Asset, SelectAsset } from '@storyblok/field-plugin'
-
-const props = defineProps<{ selectAsset: SelectAsset }>()
-
-const asset = ref<Asset>()
-
-const handleSelectAsset = async () => {
-  asset.value = await props.selectAsset()
-}
-
-const removeAsset = () => {
-  asset.value = undefined
-}
-</script>
-
-<template>
-  <div class="asset-selector">
-    <h2>Asset Selector</h2>
-    <img
-      v-if="asset"
-      :src="asset.filename"
-      title="Selected Asset"
-    />
-    <button
-      v-if="asset"
-      class="btn w-full"
-      @click="removeAsset"
-    >
-      Remove Asset
-    </button>
-    <button
-      v-else
-      class="btn w-full"
-      @click="handleSelectAsset"
-    >
-      Select Asset
-    </button>
-  </div>
-</template>
diff --git a/packages/sb-youtube-embed/src/components/FieldPluginExample/Counter.vue b/packages/sb-youtube-embed/src/components/FieldPluginExample/Counter.vue
deleted file mode 100644
index d0e9788..0000000
--- a/packages/sb-youtube-embed/src/components/FieldPluginExample/Counter.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-const emit = defineEmits<{
-  (e: 'onIncrease'): void
-}>()
-const props = defineProps<{ count: number }>()
-
-const onClick = () => {
-  emit('onIncrease')
-}
-</script>
-
-<template>
-  <div>
-    <h2>Field Value</h2>
-    <div
-      class="counter-value"
-      data-testid="count"
-    >
-      {{ props.count }}
-    </div>
-    <button
-      class="btn w-full"
-      @click="onClick"
-    >
-      Increment
-    </button>
-  </div>
-</template>
diff --git a/packages/sb-youtube-embed/src/components/FieldPluginExample/ModalToggle.vue b/packages/sb-youtube-embed/src/components/FieldPluginExample/ModalToggle.vue
deleted file mode 100644
index 0954793..0000000
--- a/packages/sb-youtube-embed/src/components/FieldPluginExample/ModalToggle.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { SetModalOpen } from '@storyblok/field-plugin'
-
-const props = defineProps<{
-  isModalOpen: boolean
-  setModalOpen: SetModalOpen<number>
-}>()
-</script>
-
-<template>
-  <div>
-    <h2>Modal</h2>
-    <button
-      class="btn w-full"
-      type="button"
-      @click="() => props.setModalOpen(!props.isModalOpen)"
-    >
-      {{ props.isModalOpen ? 'Close' : 'Open' }} modal
-    </button>
-  </div>
-</template>
diff --git a/packages/sb-youtube-embed/src/components/FieldPluginExample/example.css b/packages/sb-youtube-embed/src/components/FieldPluginExample/example.css
deleted file mode 100644
index 6c0014d..0000000
--- a/packages/sb-youtube-embed/src/components/FieldPluginExample/example.css
+++ /dev/null
@@ -1,78 +0,0 @@
-/*Layout Styles*/
-.container {
-  max-width: 22rem;
-  margin: 0 auto;
-  background-color: #ffffff;
-  border: 1px solid var(--light);
-  padding: 15px;
-  border-radius: 5px;
-}
-
-h2 {
-  font-size: 0.875rem;
-  line-height: 1.125rem;
-  font-weight: 500;
-  margin: 1rem 0;
-}
-
-hr {
-  border-top: 1px dashed var(--light);
-  border-bottom: 0;
-  border-left: 0;
-  border-right: 0;
-  margin: 1.25rem 0;
-}
-
-.counter-value {
-  margin-top: 1.25rem;
-  margin-bottom: 1rem;
-  font-size: 1.625rem;
-  font-weight: 700;
-  text-align: center;
-}
-
-.btn {
-  font-size: 0.875rem;
-  font-weight: 500;
-  padding: 0.8125rem 1rem;
-  background: transparent;
-  border: 1px solid var(--light);
-  border-radius: 0.3125rem;
-  cursor: pointer;
-  transition: background-color 0.2s ease-in-out;
-}
-
-.w-full {
-  width: 100%;
-}
-
-.btn:hover {
-  background-color: var(--light_75);
-}
-
-.btn-close {
-  position: fixed;
-  top: 0;
-  right: 0;
-  border: 0;
-}
-
-.btn-close:hover {
-  background-color: var(--light_75);
-}
-
-.asset-selector img {
-  width: 100%;
-  display: block;
-  margin-bottom: 1rem;
-}
-
-.sr-only {
-  position: absolute !important;
-  clip: rect(1px, 1px, 1px, 1px);
-  padding: 0 !important;
-  border: 0 !important;
-  height: 1px !important;
-  width: 1px !important;
-  overflow: hidden;
-}
diff --git a/packages/sb-youtube-embed/src/components/FieldPluginExample/index.spec.ts b/packages/sb-youtube-embed/src/components/FieldPluginExample/index.spec.ts
deleted file mode 100644
index 793bbcf..0000000
--- a/packages/sb-youtube-embed/src/components/FieldPluginExample/index.spec.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { describe, test, expect } from 'vitest'
-import { setupFieldPlugin } from '@storyblok/field-plugin/test'
-import { nextTick } from 'vue'
-import FieldPlugin from './index.vue'
-
-describe('FieldPluginExample', async () => {
-  test('should render the component', async () => {
-    const { cleanUp } = setupFieldPlugin()
-    // We wait for `nextTick` because it takes a moment
-    // for `plugin.type` to become `loaded`.
-    // After that, we can start testing the behaviors.
-    render(FieldPlugin) // plugin.type === 'loading'
-    await nextTick() // plugin.type === 'loaded'
-
-    const headline = screen.getByText('Field Value')
-    expect(headline).toBeInTheDocument()
-    cleanUp()
-  })
-
-  test('should increase the counter', async () => {
-    const { cleanUp } = setupFieldPlugin()
-    const user = userEvent.setup()
-    // We wait for `nextTick` because it takes a moment
-    // for `plugin.type` to become `loaded`.
-    // After that, we can start testing the behaviors.
-    render(FieldPlugin) // plugin.type === 'loading'
-    await nextTick() // plugin.type === 'loaded'
-
-    expect(screen.getByTestId('count').textContent).toEqual('0')
-    await user.click(screen.getByText('Increment'))
-    expect(screen.getByTestId('count').textContent).toEqual('1')
-    await user.click(screen.getByText('Increment'))
-    expect(screen.getByTestId('count').textContent).toEqual('2')
-    cleanUp()
-  })
-})
diff --git a/packages/sb-youtube-embed/src/components/FieldPluginExample/index.vue b/packages/sb-youtube-embed/src/components/FieldPluginExample/index.vue
deleted file mode 100644
index 45f0c1a..0000000
--- a/packages/sb-youtube-embed/src/components/FieldPluginExample/index.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import './example.css'
-import ModalToggle from './ModalToggle.vue'
-import Counter from './Counter.vue'
-import AssetSelector from './AssetSelector.vue'
-import { useFieldPlugin } from '@storyblok/field-plugin/vue3'
-
-const plugin = useFieldPlugin({
-  validateContent: (content: unknown) => ({
-    content: typeof content === 'number' ? content : 0,
-  }),
-})
-</script>
-
-<template>
-  <div v-if="plugin.type === 'loaded'">
-    <button
-      v-if="plugin.data.isModalOpen"
-      type="button"
-      class="btn btn-close"
-      @click="plugin.actions.setModalOpen(false)"
-    >
-      <svg
-        width="14"
-        height="14"
-        viewBox="0 0 12 12"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M1.75738 0.343176L0.343166 1.75739L4.58581 6.00003L0.343165 10.2427L1.75738 11.6569L6.00002 7.41424L10.2427 11.6569L11.6569 10.2427L7.41423 6.00003L11.6569 1.75739L10.2427 0.343176L6.00002 4.58582L1.75738 0.343176Z"
-          fill="#1B243F"
-        />
-      </svg>
-      <span class="sr-only">Close Modal</span>
-    </button>
-    <div class="container">
-      <Counter
-        :count="plugin.data.content"
-        @onIncrease="plugin.actions.setContent(plugin.data.content + 1)"
-      />
-      <hr />
-      <ModalToggle
-        :isModalOpen="plugin.data.isModalOpen"
-        :setModalOpen="plugin.actions.setModalOpen"
-      />
-      <hr />
-      <AssetSelector :selectAsset="plugin.actions.selectAsset" />
-    </div>
-  </div>
-</template>
diff --git a/packages/sb-youtube-embed/src/components/YoutubeVideoEmbed/VideoEmbed.vue b/packages/sb-youtube-embed/src/components/YoutubeVideoEmbed/VideoEmbed.vue
new file mode 100644
index 0000000..a274060
--- /dev/null
+++ b/packages/sb-youtube-embed/src/components/YoutubeVideoEmbed/VideoEmbed.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import 'lite-youtube-embed'
+import 'lite-youtube-embed/src/lite-yt-embed.css'
+
+defineProps<{ videoId: string }>()
+</script>
+
+<template>
+  <lite-youtube
+    :key="videoId"
+    :videoid="videoId"
+    playlabel="Play this video"
+  />
+</template>
+
+<style scoped>
+lite-youtube {
+  aspect-ratio: 16/9;
+  border-radius: 8px;
+}
+lite-youtube::before {
+  content: none;
+}
+lite-youtube > .lty-playbtn {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23A21CAF" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>');
+}
+</style>
diff --git a/packages/sb-youtube-embed/src/components/YoutubeVideoEmbed/index.spec.ts b/packages/sb-youtube-embed/src/components/YoutubeVideoEmbed/index.spec.ts
new file mode 100644
index 0000000..a7746e8
--- /dev/null
+++ b/packages/sb-youtube-embed/src/components/YoutubeVideoEmbed/index.spec.ts
@@ -0,0 +1,70 @@
+import { render, fireEvent } from '@testing-library/vue'
+import { describe, test, expect } from 'vitest'
+import { nextTick } from 'vue'
+
+import { setupFieldPlugin } from '@storyblok/field-plugin/test'
+
+import { SbTextField } from '@storyblok/design-system'
+import YoutubeVideoEmbed from './index.vue'
+
+describe('YoutubeVideoEmbed', async () => {
+  test('should render the component', async () => {
+    const { cleanUp } = setupFieldPlugin()
+
+    const { getByTestId } = render(YoutubeVideoEmbed, {
+      global: {
+        components: {
+          SbTextField
+        }
+      },
+    }) // plugin.type === 'loading'
+    await nextTick() // plugin.type === 'loaded'
+
+    expect(getByTestId('input-link')).toBeInTheDocument()
+    cleanUp()
+  })
+
+  test('should showcase the video cover when introducing a correct YouTube video link', async () => {
+    const { cleanUp } = setupFieldPlugin()
+
+    const { findByTestId, getByTestId } = render(YoutubeVideoEmbed, {
+      global: {
+        components: {
+          SbTextField
+        }
+      },
+    }) // plugin.type === 'loading'
+    await nextTick() // plugin.type === 'loaded'
+
+    await fireEvent.update(getByTestId('input-link'), 'https://www.youtube.com/watch?v=dQw4w9WgXcQ')
+    await nextTick()
+
+    expect(await findByTestId('video-embedder')).toBeInTheDocument()
+
+    cleanUp()
+  })
+
+  test('should not showcase the video cover and throw an error when introducing a non-YouTube URL', async () => {
+    const { cleanUp } = setupFieldPlugin()
+
+    const { container, queryByTestId, getByTestId } = render(YoutubeVideoEmbed, {
+      global: {
+        components: {
+          SbTextField
+        }
+      },
+    }) // plugin.type === 'loading'
+    await nextTick() // plugin.type === 'loaded'
+
+    await fireEvent.update(getByTestId('input-link'), 'https://www.other-site.com/watch?v=dQw4w9WgXcQ')
+    await nextTick()
+
+    const errorMessageElement = container.querySelector('.sb-textfield__message--error')
+    expect(errorMessageElement).not.toBeNull()
+    expect(errorMessageElement?.textContent).toEqual("The YouTube link doesn't seem valid")
+
+    expect(queryByTestId('video-embedder')).toBeNull()
+
+    cleanUp()
+  })
+})
diff --git a/packages/sb-youtube-embed/src/components/YoutubeVideoEmbed/index.vue b/packages/sb-youtube-embed/src/components/YoutubeVideoEmbed/index.vue
new file mode 100644
index 0000000..7af566f
--- /dev/null
+++ b/packages/sb-youtube-embed/src/components/YoutubeVideoEmbed/index.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+import { useFieldPlugin } from '@storyblok/field-plugin/vue3'
+import type { Video } from '../../types'
+import VideoEmbed from './VideoEmbed.vue'
+
+const pluginName = 'sb-youtube-embed'
+const plugin = useFieldPlugin()
+
+const youtubePluginData = computed<Video>(() => {
+  const content = plugin.data?.content as Video
+  return typeof content === 'object' ? content : { plugin: pluginName }
+})
+
+function extractYouTubeVideoId(url: string) {
+  const regex =
+    /(youtu\.be\/|youtube\.com\/(watch\?(.*&)?v=|(embed|v)\/))([^?&"'>]+)/
+  const matches = url.match(regex)
+  return matches ? matches[5] : ''
+}
+
+const setYoutubePluginData = (url: string) => {
+  plugin.actions?.setContent({
+    ...(plugin.data?.content ? { ...plugin.data.content } : {}),
+    id: extractYouTubeVideoId(url),
+    rawURL: url,
+  })
+}
+</script>
+
+<template>
+  <div v-if="plugin.type === 'loaded'">
+    <SbTextField
+      id="youtube-video-link"
+      data-testid="input-link"
+      class="sb-mb-3 font-14"
+      placeholder="Add your YouTube video URL"
+      :error="
+        youtubePluginData.rawURL &&
+        extractYouTubeVideoId(youtubePluginData.rawURL ?? '') === ''
+      "
+      error-message="The YouTube link doesn't seem valid"
+      :nativeValue="youtubePluginData.rawURL"
+      :modelValue="youtubePluginData.rawURL"
+      @update:modelValue="setYoutubePluginData($event)"
+    />
+    <VideoEmbed
+      v-if="youtubePluginData.id"
+      :video-id="youtubePluginData.id"
+      data-testid="video-embedder"
+    />
+  </div>
+</template>
diff --git a/packages/sb-youtube-embed/src/main.ts b/packages/sb-youtube-embed/src/main.ts
index 47b3c92..0946b3d 100644
--- a/packages/sb-youtube-embed/src/main.ts
+++ b/packages/sb-youtube-embed/src/main.ts
@@ -1,14 +1,27 @@
-import { createApp } from 'vue'
 import './style.css'
+import { createApp } from 'vue'
 import App from './App.vue'
 
+/* Design System - Import */
+import BlokInk from '@storyblok/design-system'
+import '@storyblok/design-system/dist/storyblok-design-system.css'
+
 if (!document.querySelector('#app')) {
   // In production, `#app` may or may not exist.
   const rootElement = document.createElement('div')
   rootElement.id = 'app'
   document.body.appendChild(rootElement)
 }
-createApp(App).mount('#app')
+const app = createApp(App)
+
+/* Design System - Include only used components to the Vue instance */
+app.use(BlokInk, {
+  withComponents: [
+    'SbTextField',
+  ]
+})
+
+app.mount('#app')
 
 // This error replaces another error which message is harder to understand and impossible to avoid util the issue https://github.com/storyblok/field-plugin/issues/107 has been resolved.
 throw new Error(
diff --git a/packages/sb-youtube-embed/src/style.css b/packages/sb-youtube-embed/src/style.css
index 68ad68d..c8fc085 100644
--- a/packages/sb-youtube-embed/src/style.css
+++ b/packages/sb-youtube-embed/src/style.css
@@ -48,7 +48,6 @@ html {
   font-style: normal;
   line-height: 1.5;
   font-weight: 400;
-  font-size: 1rem;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
diff --git a/packages/sb-youtube-embed/src/types.ts b/packages/sb-youtube-embed/src/types.ts
new file mode 100644
index 0000000..0fa6ec8
--- /dev/null
+++ b/packages/sb-youtube-embed/src/types.ts
@@ -0,0 +1,6 @@
+export type Video = {
+    plugin: string
+    id?: string
+    rawURL?: string
+    cover?: string
+}
\ No newline at end of file
diff --git a/packages/sb-youtube-embed/vite.config.ts b/packages/sb-youtube-embed/vite.config.ts
index c6130b5..0c0e1fb 100644
--- a/packages/sb-youtube-embed/vite.config.ts
+++ b/packages/sb-youtube-embed/vite.config.ts
@@ -11,7 +11,13 @@ export default defineConfig({
     environment: 'jsdom',
     setupFiles: ['./src/setupTests.ts'],
   },
-  plugins: [vue(), cssInjectedByJsPlugin(), ...plugins],
+  plugins: [vue({
+    template: {
+      compilerOptions: {
+        isCustomElement: (tag) => ['lite-youtube'].includes(tag),
+      }
+    }
+  }), cssInjectedByJsPlugin(), ...plugins],
   build: {
     rollupOptions: {
       output: {
diff --git a/yarn.lock b/yarn.lock
index 3b4cada..46a27c5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -418,6 +418,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@popperjs/core@npm:^2.11.8":
+  version: 2.11.8
+  resolution: "@popperjs/core@npm:2.11.8"
+  checksum: e5c69fdebf52a4012f6a1f14817ca8e9599cb1be73dd1387e1785e2ed5e5f0862ff817f420a87c7fc532add1f88a12e25aeb010ffcbdc98eace3d55ce2139cf0
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-android-arm-eabi@npm:4.12.1":
   version: 4.12.1
   resolution: "@rollup/rollup-android-arm-eabi@npm:4.12.1"
@@ -516,10 +523,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storyblok/field-plugin@npm:1.1.1":
-  version: 1.1.1
-  resolution: "@storyblok/field-plugin@npm:1.1.1"
-  checksum: 1a39808a8da7111e00522fdc013923346e8bb3f4668c1cc6e34016569ea92939c95b958cd7d11c801bc486be7056005fa9949aa32d267c21456bfd87a28f14ae
+"@storyblok/design-system@npm:^3.25.0":
+  version: 3.25.0
+  resolution: "@storyblok/design-system@npm:3.25.0"
+  dependencies:
+    "@popperjs/core": ^2.11.8
+    "@vueuse/core": ^10.7.2
+    click-outside-vue3: ^4.0.1
+    dayjs: ^1.11.10
+    dompurify: ^3.0.6
+    lucide-vue-next: ^0.279.0
+    maska: ^1.5.2
+    primevue: ^3.43.0
+    throttle-debounce: ^5.0.0
+  checksum: cf62bfd3fa53e9f829c324ae9a509b1815070c020064914d197164322fd130d51a33388fc53e265b390c195380c0aa7a731df52767569b3b5aaf7114c36bf415
+  languageName: node
+  linkType: hard
+
+"@storyblok/field-plugin@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "@storyblok/field-plugin@npm:1.1.2"
+  checksum: 8139cfd60c0bea31ba217d33349d9f9ab92f716fb441937f6fa9c99d78cbad1ed9d25280ad4333594cd5c56460526544cbd33477dea68fa5463910df9dc9550e
   languageName: node
   linkType: hard
 
@@ -635,6 +659,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/web-bluetooth@npm:^0.0.20":
+  version: 0.0.20
+  resolution: "@types/web-bluetooth@npm:0.0.20"
+  checksum: d6d61da683e876e8995ac57e2e5229d829d0f536deb3568d4430898fc626ebcb7e065fe7f655ac6a5205702f7f7049e6335abe689cd5291241eef6e39e8a4371
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/eslint-plugin@npm:5.45.0":
   version: 5.45.0
   resolution: "@typescript-eslint/eslint-plugin@npm:5.45.0"
@@ -1008,6 +1039,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vueuse/core@npm:^10.7.2":
+  version: 10.9.0
+  resolution: "@vueuse/core@npm:10.9.0"
+  dependencies:
+    "@types/web-bluetooth": ^0.0.20
+    "@vueuse/metadata": 10.9.0
+    "@vueuse/shared": 10.9.0
+    vue-demi: ">=0.14.7"
+  checksum: 6d26660e4e88e2e6b34f84cb832d919d296a198e6c7f8ef93fb5d0442b53ba3872c617c1144190328992b44dde33a8e249b3182ac35128d460a457488a6df940
+  languageName: node
+  linkType: hard
+
+"@vueuse/metadata@npm:10.9.0":
+  version: 10.9.0
+  resolution: "@vueuse/metadata@npm:10.9.0"
+  checksum: e381d3134e1a5965e157503ddb1187f671316386ab0c779d3fc1b9c91d6658086c417414f4642554382ac43fd800d7565f5f25824b678433f937a917e931387e
+  languageName: node
+  linkType: hard
+
+"@vueuse/shared@npm:10.9.0":
+  version: 10.9.0
+  resolution: "@vueuse/shared@npm:10.9.0"
+  dependencies:
+    vue-demi: ">=0.14.7"
+  checksum: e6fc1e04aa63ead37694b5543cacd8c1b55ade5ce7416699302a4db5e5c3c083b7ecda9156445e07a477eb86664740d368a03584b55859dbe0cf0abbec3e21ab
+  languageName: node
+  linkType: hard
+
 "abbrev@npm:^2.0.0":
   version: 2.0.0
   resolution: "abbrev@npm:2.0.0"
@@ -1333,6 +1392,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"click-outside-vue3@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "click-outside-vue3@npm:4.0.1"
+  checksum: bc2cf3336f1343619f60c2e2d5a8cc7cc64ec5d912f42f9f3666c7655c08d77b9a8916a6b98ac505deeb2c11a40ffd58ce91308762e31989e546654b689d0b1e
+  languageName: node
+  linkType: hard
+
 "color-convert@npm:^1.9.0":
   version: 1.9.3
   resolution: "color-convert@npm:1.9.3"
@@ -1449,6 +1515,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dayjs@npm:^1.11.10":
+  version: 1.11.10
+  resolution: "dayjs@npm:1.11.10"
+  checksum: a6b5a3813b8884f5cd557e2e6b7fa569f4c5d0c97aca9558e38534af4f2d60daafd3ff8c2000fed3435cfcec9e805bcebd99f90130c6d1c5ef524084ced588c4
+  languageName: node
+  linkType: hard
+
 "de-indent@npm:^1.0.2":
   version: 1.0.2
   resolution: "de-indent@npm:1.0.2"
@@ -1592,6 +1665,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dompurify@npm:^3.0.6":
+  version: 3.0.9
+  resolution: "dompurify@npm:3.0.9"
+  checksum: 09794f2e40a0003d36e3cd70be1036f83de39d9d4a0f199c45e0b9962ce8ae5f9fe424d7edc4c8ff9ec615be9744a140d66788f0925913ac482d4628b283cae5
+  languageName: node
+  linkType: hard
+
 "eastasianwidth@npm:^0.2.0":
   version: 0.2.0
   resolution: "eastasianwidth@npm:0.2.0"
@@ -2873,6 +2953,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lite-youtube-embed@npm:^0.3.2":
+  version: 0.3.2
+  resolution: "lite-youtube-embed@npm:0.3.2"
+  checksum: 0745f0d120fa9832b60a7d4ad558afe9f5d647a985b35dfb1a8ead0aef8dbcf5b93d313c7ef77047aff1d0f42747e67490ccbb30a7e7895a4648cf0c70e50f97
+  languageName: node
+  linkType: hard
+
 "local-pkg@npm:^0.5.0":
   version: 0.5.0
   resolution: "local-pkg@npm:0.5.0"
@@ -2931,6 +3018,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lucide-vue-next@npm:^0.279.0":
+  version: 0.279.0
+  resolution: "lucide-vue-next@npm:0.279.0"
+  peerDependencies:
+    vue: ">=3.0.1"
+  checksum: 1489875df9a0015a18bf968aa50f5200011f34a29d59e3af7786cf5743ddb07707899f8cd07047eb414f9faa8cf48389bbf0c3a5314fe5f5fb11342c9f6d749c
+  languageName: node
+  linkType: hard
+
 "lz-string@npm:^1.5.0":
   version: 1.5.0
   resolution: "lz-string@npm:1.5.0"
@@ -2968,6 +3064,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"maska@npm:^1.5.2":
+  version: 1.5.2
+  resolution: "maska@npm:1.5.2"
+  checksum: e3c7d5ada403ac6a222ed520fe7ebd6bda8065e3c946c272940e1c5e0e46c325a69d4f017ba9562aa5f3a170c6a5a874fd413cd4977d2e3c562bfff6e8c7ccee
+  languageName: node
+  linkType: hard
+
 "merge-stream@npm:^2.0.0":
   version: 2.0.0
   resolution: "merge-stream@npm:2.0.0"
@@ -3530,6 +3633,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"primevue@npm:^3.43.0":
+  version: 3.50.0
+  resolution: "primevue@npm:3.50.0"
+  peerDependencies:
+    vue: ^3.0.0
+  checksum: c5dcfc3bcde7b6806238004c17365226656bd5ad3ffe994422a7bbdc17a2d74752cc0d4a75e961f74be7858d4ec0cee27f73e8fa32272814f0b05795c65aab8b
+  languageName: node
+  linkType: hard
+
 "proc-log@npm:^3.0.0":
   version: 3.0.0
   resolution: "proc-log@npm:3.0.0"
@@ -3761,7 +3873,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "sb-meme-generator@workspace:packages/sb-meme-generator"
   dependencies:
-    "@storyblok/field-plugin": 1.1.1
+    "@storyblok/field-plugin": ^1.1.2
     "@testing-library/jest-dom": 6.4.2
     "@testing-library/user-event": 14.5.2
     "@testing-library/vue": 8.0.2
@@ -3781,13 +3893,15 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "sb-youtube-embed@workspace:packages/sb-youtube-embed"
   dependencies:
-    "@storyblok/field-plugin": 1.1.1
+    "@storyblok/design-system": ^3.25.0
+    "@storyblok/field-plugin": ^1.1.2
     "@testing-library/jest-dom": 6.4.2
     "@testing-library/user-event": 14.5.2
     "@testing-library/vue": 8.0.2
     "@vitejs/plugin-vue": ^4.6.2
     "@vitest/ui": 1.3.0
     jsdom: 23.0.1
+    lite-youtube-embed: ^0.3.2
     typescript: 5.3.3
     vite: ^5.1.3
     vite-plugin-css-injected-by-js: 3.1.0
@@ -4096,6 +4210,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"throttle-debounce@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "throttle-debounce@npm:5.0.0"
+  checksum: aa8bf25828b4f8645ce863589de05d6807ea3debc147ce7d89624638ff8a16792d6d0baa0f8a32a260f0b163444d74020c6087b713ae561fde594b97b6e51f28
+  languageName: node
+  linkType: hard
+
 "tinybench@npm:^2.5.1":
   version: 2.6.0
   resolution: "tinybench@npm:2.6.0"
@@ -4408,6 +4529,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vue-demi@npm:>=0.14.7":
+  version: 0.14.7
+  resolution: "vue-demi@npm:0.14.7"
+  peerDependencies:
+    "@vue/composition-api": ^1.0.0-rc.1
+    vue: ^3.0.0-0 || ^2.6.0
+  peerDependenciesMeta:
+    "@vue/composition-api":
+      optional: true
+  bin:
+    vue-demi-fix: bin/vue-demi-fix.js
+    vue-demi-switch: bin/vue-demi-switch.js
+  checksum: 6819b1cd52355047ae899d7cdfa32f1b00e806e6c67455601d33ab0226f3172c48a5f6c3d547cb7fa32925b3b7100448bf18f98ea4d5f8bc4b9d28ae005a805d
+  languageName: node
+  linkType: hard
+
 "vue-template-compiler@npm:^2.7.14":
   version: 2.7.16
   resolution: "vue-template-compiler@npm:2.7.16"