feat(): update

Author: shuga2704

packages/plasma-new-hope/src/examples/components/_beta/Popover/Popover.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ComponentProps, useState } from 'react';
+import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react-vite';
 
 import { Cell, CellTextbox, CellTextboxTitle, CellTextboxSubtitle } from '../../Cell/Cell';

packages/sdds-finai/src/components/_beta/Popover/Popover.stories.tsx

@@ -10,6 +10,7 @@ import { Popover } from './Popover';
 
 type StoryProps = ComponentProps<typeof Popover>;
 
+const appearance = ['closeNone', 'closeInner'];
 const placements = [
     'top',
     'top-start',
@@ -32,6 +33,12 @@ const meta: Meta<StoryProps> = {
     title: '_Beta/Popover',
     component: Popover,
     argTypes: {
+        appearance: {
+            options: appearance,
+            control: {
+                type: 'select',
+            },
+        },
         placement: {
             options: placements,
             control: {
@@ -84,11 +91,6 @@ const meta: Meta<StoryProps> = {
                 type: 'number',
             },
         },
-        resizable: {
-            control: {
-                type: 'boolean',
-            },
-        },
         view: {
             options: view,
             control: {
@@ -103,6 +105,7 @@ const meta: Meta<StoryProps> = {
         },
     },
     args: {
+        appearance: 'closeNone',
         placement: 'bottom',
         trigger: 'click',
         defaultOpened: false,
@@ -113,7 +116,6 @@ const meta: Meta<StoryProps> = {
         outsideClick: true,
         delayOpen: 0,
         delayClose: 0,
-        resizable: false,
         view: 'default',
         size: 'm',
     },
@@ -158,3 +160,126 @@ const StoryDefault = (args: StoryProps) => {
 export const Default: StoryObj<StoryProps> = {
     render: (args) => <StoryDefault {...args} />,
 };
+
+const StoryResizable = (args: StoryProps) => {
+    const {
+        resizableDirections,
+        resizableHiddenIcons,
+        resizableDefaultSize,
+        resizableMinWidth,
+        resizableMinHeight,
+        resizableMaxWidth,
+        resizableMaxHeight,
+        resizableIconSize,
+    } = args;
+
+    React.useEffect(() => {
+        window.scrollTo(
+            (document.documentElement.scrollWidth - window.innerWidth) / 2,
+            (document.documentElement.scrollHeight - window.innerHeight) / 2,
+        );
+    }, []);
+
+    const cells = [
+        { num: 1, color: '#e74c3c' },
+        { num: 2, color: '#3498db' },
+        { num: 3, color: '#f1c40f' },
+        { num: 4, color: '#27ae60' },
+    ];
+
+    return (
+        <div
+            style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: '400vw',
+                height: '400vh',
+            }}
+        >
+            <Popover
+                target={<Button>Target</Button>}
+                resizable={{
+                    directions: resizableDirections,
+                    hiddenIcons: resizableHiddenIcons,
+                    defaultSize: resizableDefaultSize,
+                    minWidth: resizableMinWidth,
+                    minHeight: resizableMinHeight,
+                    maxWidth: resizableMaxWidth,
+                    maxHeight: resizableMaxHeight,
+                    iconSize: resizableIconSize,
+                }}
+                {...args}
+            >
+                <div
+                    style={{
+                        width: '100%',
+                        height: '100%',
+                        display: 'grid',
+                        gridTemplateColumns: '1fr 1fr',
+                        gridTemplateRows: '1fr 1fr',
+                    }}
+                >
+                    {cells.map(({ num, color }) => (
+                        <div
+                            key={num}
+                            style={{
+                                background: color,
+                                color: 'white',
+                                fontSize: '4vw',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                            }}
+                        >
+                            {num}
+                        </div>
+                    ))}
+                </div>
+            </Popover>
+        </div>
+    );
+};
+
+export const Resizable: StoryObj<StoryProps> = {
+    argTypes: {
+        resizableDirections: {
+            control: 'check',
+            options: ['top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left', 'top-left'],
+        },
+        resizableDefaultSize: {
+            control: 'object',
+        },
+        resizableHiddenIcons: {
+            control: 'check',
+            options: ['top-right', 'bottom-right', 'bottom-left', 'top-left'],
+        },
+        resizableMinWidth: {
+            control: 'number',
+        },
+        resizableMinHeight: {
+            control: 'number',
+        },
+        resizableMaxWidth: {
+            control: 'number',
+        },
+        resizableMaxHeight: {
+            control: 'number',
+        },
+        resizableIconSize: {
+            control: {
+                type: 'select',
+            },
+            options: ['xs', 's', 'm'],
+        },
+    },
+    args: {
+        resizableDirections: ['bottom-right'],
+        resizableHiddenIcons: [],
+        resizableIconSize: 's',
+        resizableDefaultSize: { width: 300, height: 300 },
+        resizableMinWidth: 300,
+        resizableMinHeight: 300,
+    },
+    render: (args) => <StoryResizable {...args} />,
+};