Fix stories

Signed-off-by: Olga Bulat <[email protected]>

frontend/.storybook/decorators/with-rtl.js

@@ -0,0 +1,38 @@
+import { useI18n } from "#imports"
+
+import { ref, watch, onMounted, reactive } from "vue"
+
+import { useEffect } from "@storybook/client-api"
+
+const languageDirection = reactive({ value: "ltr" })
+
+export const WithRTL = (story, context) => {
+  useEffect(() => {
+    languageDirection.value = context.globals.languageDirection
+  }, [context.globals.languageDirection])
+
+  return {
+    template: `<div ref="element"><story /></div>`,
+    components: { story },
+    setup() {
+      const element = ref()
+      const { i18n } = useI18n({ useScope: "global" })
+      onMounted(() => {
+        watch(
+          languageDirection,
+          (direction) => {
+            i18n.localeProperties.dir = direction.value
+            if (element.value) {
+              element.value.ownerDocument.documentElement.setAttribute(
+                "dir",
+                direction?.value ?? "ltr"
+              )
+            }
+          },
+          { immediate: true }
+        )
+      })
+      return { element }
+    },
+  }
+}

frontend/.storybook/decorators/with-screenshot-area.js

@@ -0,0 +1,12 @@
+export const WithScreenshotArea = (story) => {
+  return {
+    template: `
+      <div
+        class="screenshot-area"
+        :style="{ display: 'inline-block', padding: '2rem' }"
+      >
+        <story />
+      </div>`,
+    components: { story },
+  }
+}

frontend/.storybook/decorators/with-ui-store.js

@@ -0,0 +1,18 @@
+import { ref, onMounted } from "vue"
+
+import { useLayout } from "~/composables/use-layout"
+
+export const WithUiStore = (story) => {
+  return {
+    template: `<div ref="element"><story /></div>`,
+    components: { story },
+    setup() {
+      const element = ref()
+      const { updateBreakpoint } = useLayout()
+      onMounted(() => {
+        updateBreakpoint()
+      })
+      return { element }
+    },
+  }
+}

frontend/src/components/VHeader/meta/VContentSettingsModal.stories.js

@@ -1,9 +1,8 @@
 import VContentSettingsModalContent from "~/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue"
-import VModalTarget from "~/components/VModal/VModalTarget.vue"
 
 const Template = (args) => ({
-  template: `<div><VContentSettingsModalContent v-bind="args" v-on="args" :close="args.close" /> <VModalTarget class="modal" /></div>`,
-  components: { VContentSettingsModalContent, VModalTarget },
+  template: `<div><VContentSettingsModalContent v-bind="args" v-on="args" :close="args.close" /><div id="modal" /></div>`,
+  components: { VContentSettingsModalContent },
   setup() {
     return { args }
   },

frontend/src/components/VHeader/meta/VHeaderInternal.stories.js

@@ -1,9 +1,8 @@
 import VHeaderInternal from "~/components/VHeader/VHeaderInternal.vue"
-import VModalTarget from "~/components/VModal/VModalTarget.vue"
 
 const Template = (args) => ({
-  template: `<div class="fixed inset-0 w-full h-full"><VHeaderInternal v-bind="args" v-on="args" /><VModalTarget /></div>`,
-  components: { VHeaderInternal, VModalTarget },
+  template: `<div class="fixed inset-0 w-full h-full"><VHeaderInternal v-bind="args" v-on="args" /><div id="modal"/></div>`,
+  components: { VHeaderInternal },
   setup() {
     return { args }
   },

frontend/src/components/VMediaInfo/meta/VMetadata.stories.js

@@ -1,7 +1,8 @@
+import { useI18n } from "#imports"
+
 import { image as testImage } from "~~/test/unit/fixtures/image"
 import { getAudioObj } from "~~/test/unit/fixtures/audio"
 
-import { useI18n } from "~/composables/use-i18n"
 import { getMediaMetadata } from "~/utils/metadata"
 import { useProviderStore } from "~/stores/provider"