add theme provider

.changeset/gentle-goats-shop.md

@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": minor
+---
+
+Add mt-theme-provider component

packages/component-library/.storybook/preview.ts

@@ -4,6 +4,7 @@ import { darkTheme, lightTheme } from "./shopwareTheme";
 import { setup } from "@storybook/vue3";
 import { createI18n } from "vue-i18n";
 import DeviceHelperPlugin from "./../src/plugin/device-helper.plugin";
+import MtThemeProvider from "../src/components/theme/mt-theme-provider.vue";
 import {
   DARK_THEME_BACKGROUND_VALUE,
   LIGHT_THEME_BACKGROUND_VALUE,
@@ -53,7 +54,17 @@ const preview: Preview = {
       ],
     },
   },
-  decorators: [ThemeProvider],
+  decorators: [
+    ThemeProvider,
+    () => ({
+      components: { MtThemeProvider },
+      template: `
+        <mt-theme-provider>
+          <story />
+        </mt-theme-provider>
+      `,
+    }),
+  ],
 };
 
 export default preview;

packages/component-library/src/components/theme/mt-theme-provider.vue

@@ -0,0 +1,15 @@
+<template>
+  <slot />
+</template>
+
+<script setup lang="ts">
+import { type FutureFlags, provideFutureFlags } from "../../composables/useFutureFlags";
+
+type Props = {
+  future?: FutureFlags;
+};
+
+const props = defineProps<Props>();
+
+provideFutureFlags(props.future);
+</script>

packages/component-library/src/composables/useFutureFlags.ts

@@ -0,0 +1,15 @@
+import { inject, provide } from "vue";
+
+export type FutureFlags = {};
+
+const defaultFutureFlags: FutureFlags = {};
+
+export const futureFlagsInjectionKey = Symbol("mt-future-flags");
+
+export function provideFutureFlags(flags: FutureFlags | undefined) {
+  provide(futureFlagsInjectionKey, flags ?? defaultFutureFlags);
+}
+
+export function useFutureFlags(): FutureFlags {
+  return inject(futureFlagsInjectionKey, defaultFutureFlags);
+}

packages/component-library/src/index.ts

@@ -35,6 +35,7 @@ import MtModalTrigger from "./components/overlay/mt-modal/sub-components/mt-moda
 import MtModalAction from "./components/overlay/mt-modal/sub-components/mt-modal-action.vue";
 import MtText from "./components/content/mt-text/mt-text.vue";
 import MtInset from "./components/layout/mt-inset/mt-inset.vue";
+import MtThemeProvider from "./components/theme/mt-theme-provider.vue";
 import TooltipDirective from "./directives/tooltip.directive";
 import DeviceHelperPlugin from "./plugin/device-helper.plugin";
 // Import SCSS for styling
@@ -84,6 +85,7 @@ export {
   MtModalAction,
   MtText,
   MtInset,
+  MtThemeProvider,
   TooltipDirective,
   DeviceHelperPlugin,
   // @deprecated