From 4da3a41461863e09924966010032983d0c769285 Mon Sep 17 00:00:00 2001
From: Mikhail Shatikhin <shatikhin@skbkontur.ru>
Date: Tue, 21 May 2024 10:50:49 +0500
Subject: [PATCH] chore: story for popup

---
 .../__stories__/sandbox.stories.tsx           | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 packages/react-ui/components/__stories__/sandbox.stories.tsx

diff --git a/packages/react-ui/components/__stories__/sandbox.stories.tsx b/packages/react-ui/components/__stories__/sandbox.stories.tsx
new file mode 100644
index 00000000000..259fb0ec4ac
--- /dev/null
+++ b/packages/react-ui/components/__stories__/sandbox.stories.tsx
@@ -0,0 +1,38 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+import { Meta } from '../../typings/stories';
+import { Tooltip } from '../Tooltip';
+import { Hint } from '../Hint';
+import { Gapped } from '../Gapped';
+import { WidgetContainer } from '../../lib/widgets';
+
+export default {
+  title: 'Sandbox',
+} as Meta;
+
+export const Default = () => {
+  const root = useRef<HTMLDivElement>(null);
+  const [_, forceUpdate] = useState<number>();
+
+  useEffect(() => forceUpdate(Date.now), [root.current]);
+
+  return (
+    <div style={{ position: 'relative', overflow: 'hidden' }}>
+      <div ref={root} />
+      {root.current && (
+        <WidgetContainer root={root.current}>
+          <div style={{ padding: '100px 0' }}>
+            <Gapped vertical gap={60}>
+              <Tooltip pos="right middle" trigger="opened" render={() => <div>Tooltip</div>}>
+                <div>Tooltip</div>
+              </Tooltip>
+              <Hint pos="right middle" manual opened text="Hint">
+                <div>Hint</div>
+              </Hint>
+            </Gapped>
+          </div>
+        </WidgetContainer>
+      )}
+    </div>
+  );
+};