add resizable component to test split text in storybook

julio-salas03 · Sep 3, 2024 · bed0c91 · bed0c91
1 parent f7a807d
commit bed0c91
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -26,11 +26,13 @@
     "@types/node": "^22.5.0",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
+    "@types/react-resizable": "^3.0.8",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-resizable": "^3.0.5",
     "resize-observer-polyfill": "^1.5.1",
     "storybook": "^8.2.9",
     "tsup": "^8.2.4",

diff --git a/stories/SplitText.stories.tsx b/stories/SplitText.stories.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { SplitText, SplitTextProps } from './../src/index';
+import { Resizable } from 'react-resizable/';
+import 'react-resizable/css/styles.css';
+
 const meta: Meta<typeof SplitText> = {
   component: SplitText,
 };
@@ -10,10 +13,27 @@ export default meta;
 type Story = StoryObj<typeof SplitText>;
 
 const Component = ({ children, ...rest }: SplitTextProps) => {
+  const [size, setSize] = React.useState({ width: 300, height: 400 });
   return (
-    <div>
-      <SplitText {...rest}>{children}</SplitText>
-    </div>
+    <>
+      <Resizable
+        height={size.height}
+        width={size.width}
+        onResize={(_, { size }) => setSize(size)}
+      >
+        <div
+          className="box"
+          style={{
+            width: size.width + 'px',
+            height: size.height + 'px',
+            border: 'solid red 4px',
+            padding: '10px',
+          }}
+        >
+          <SplitText {...rest}>{children}</SplitText>
+        </div>
+      </Resizable>
+    </>
   );
 };