From f04264950f23bd8ae59f78848b7981222d90ba3b Mon Sep 17 00:00:00 2001
From: Francesca Giannino <francesca.giannino86@gmail.com>
Date: Tue, 2 Jul 2024 18:11:46 +0200
Subject: [PATCH] chore: wrap stories in div with orama id

---
 apps/storybook/.storybook/preview.js        | 10 ++++++++--
 packages/ui-stencil/src/styles/globals.scss |  4 +++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/storybook/.storybook/preview.js b/apps/storybook/.storybook/preview.js
index 06b1f65c..5f31efa7 100644
--- a/apps/storybook/.storybook/preview.js
+++ b/apps/storybook/.storybook/preview.js
@@ -3,11 +3,17 @@ import "./../../../packages/ui-stencil/dist/orama-ui/orama-ui.css";
 
 defineCustomElements();
 
-// import global styles
-
 /** @type { import('@storybook/html').Preview } */
 const preview = {
   tags: ["autodocs"],
+  decorators: [
+    (story) => {
+      const decorator = document.createElement('div');
+      decorator.id = 'orama-ui';
+      decorator.appendChild(story());
+      return decorator;
+    }
+  ],
   parameters: {
     controls: {
       matchers: {
diff --git a/packages/ui-stencil/src/styles/globals.scss b/packages/ui-stencil/src/styles/globals.scss
index 2c0e3432..b8c56733 100644
--- a/packages/ui-stencil/src/styles/globals.scss
+++ b/packages/ui-stencil/src/styles/globals.scss
@@ -1,3 +1,5 @@
 :root {
-  @include spread-map($theme-light);
+  #orama-ui {
+    @include spread-map($theme-light);
+  }
 }