fix: handle direction in Storybook for active direction effect on mod…

…al and tooltip
heroui-inc · Mar 10, 2024 · e120f30 · e120f30
1 parent 8f107db
commit e120f30
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/packages/storybook/.storybook/preview.tsx b/packages/storybook/.storybook/preview.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React  , { useEffect }from "react";
 import {themes} from "@storybook/theming";
 import {NextUIProvider} from "@nextui-org/system/src/provider";
 import type {Preview} from "@storybook/react";
@@ -10,6 +10,10 @@ const decorators: Preview["decorators"] = [
     const direction =
       // @ts-ignore
       locale && new Intl.Locale(locale)?.textInfo?.direction === "rtl" ? "rtl" : undefined;
+
+    useEffect(() => {
+      document.documentElement.style.setProperty("--direction", direction || "ltr");
+    }, [direction]);
 
     return (
       <NextUIProvider locale={locale}>

diff --git a/packages/storybook/.storybook/style.css b/packages/storybook/.storybook/style.css
@@ -2,6 +2,14 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --direction: ltr;
+}
+
+body {
+  direction: var(--direction);
+}
+
 h1 {
   @apply text-4xl font-bold !text-foreground;
 }