myshell-react-lib 0.1.0

package/src/stories/Tooltip.stories.tsx

@@ -0,0 +1,244 @@
+/* eslint-disable import/no-unused-modules */
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { Tooltip } from '@/components/tooltip';
+
+const meta = {
+  title: 'Components/数据展示/Tooltip-气泡',
+  component: Tooltip,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  args: {
+    variant: 'default',
+    showArrow: true,
+    description: '',
+    side: 'top',
+    align: 'center',
+    sideOffset: 6,
+    alignOffset: 0,
+    contentClassName: '',
+    triggerClassName: '',
+  },
+  argTypes: {
+    disabled: {
+      description: '是否禁用',
+      control: 'boolean',
+    },
+    variant: {
+      description: '类型',
+      control: 'select',
+      options: ['default', 'info', 'message'],
+    },
+    open: {
+      description: '是否打开',
+      control: 'boolean',
+    },
+    defaultOpen: {
+      description: '默认是否打开',
+      control: 'boolean',
+    },
+    side: {
+      description: '气泡方向',
+      control: 'select',
+      options: ['top', 'right', 'bottom', 'left'],
+    },
+    align: {
+      description: '气泡箭头位置',
+      control: 'select',
+      options: ['start', 'center', 'end'],
+    },
+    sideOffset: {
+      description: '气泡偏移量',
+      control: 'number',
+    },
+    alignOffset: {
+      description: '气泡箭头偏移量',
+      control: 'number',
+    },
+    showArrow: {
+      description: '是否显示箭头',
+      control: 'boolean',
+    },
+    title: {
+      description: '标题 string | node',
+      control: 'object',
+    },
+    description: {
+      description: '描述 string | node',
+      control: 'object',
+    },
+    contentClassName: {
+      description: '内容样式',
+      control: 'text',
+    },
+    triggerClassName: {
+      description: '触发器样式',
+      control: 'text',
+    },
+    titleDangerous: {
+      description: '标题是否危险',
+      control: 'boolean',
+    },
+    descriptionDangerous: {
+      description: '描述是否危险',
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Tooltip>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const TooltipDemo: Story = {
+  args: {
+    ...meta.args, // 继承默认参数
+  },
+  render: (args) => {
+    return (
+      <div className="w-[40vw] min-h-[200px] py-10 px-3 rounded-md space-y-3 flex flex-col justify-center">
+        <div className="grid grid-cols-5">
+          <div />
+          <div>
+            <Tooltip
+              {...args}
+              side="top"
+              align="start"
+              description="tooltip description"
+            >
+              topStart
+            </Tooltip>
+          </div>
+          <div>
+            <Tooltip
+              {...args}
+              side="top"
+              align="center"
+              description="tooltip description"
+            >
+              topCenter
+            </Tooltip>
+          </div>
+          <div>
+            <Tooltip
+              {...args}
+              side="top"
+              align="end"
+              description="tooltip description"
+            >
+              topEnd
+            </Tooltip>
+          </div>
+          <div />
+        </div>
+        <div className="grid grid-cols-5 space-x-5">
+          <div>
+            <Tooltip
+              {...args}
+              side="left"
+              align="start"
+              description="tooltip description"
+            >
+              leftStart
+            </Tooltip>
+          </div>
+
+          <div />
+          <div />
+          <div />
+          <div>
+            <Tooltip
+              {...args}
+              side="right"
+              align="end"
+              description="tooltip description"
+            >
+              rightStart
+            </Tooltip>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-5 space-x-5">
+          <div>
+            <Tooltip {...args} side="left" description="tooltip description">
+              left
+            </Tooltip>
+          </div>
+          <div />
+          <div />
+          <div />
+          <div>
+            <Tooltip {...args} side="right" description="tooltip description">
+              right
+            </Tooltip>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-5 space-x-5">
+          <div>
+            <Tooltip
+              {...args}
+              side="left"
+              align="end"
+              description="tooltip description"
+            >
+              leftEnd
+            </Tooltip>
+          </div>
+          <div />
+          <div />
+          <div />
+          <div>
+            <Tooltip
+              {...args}
+              side="right"
+              align="end"
+              description="tooltip description"
+            >
+              rightEnd
+            </Tooltip>
+          </div>
+        </div>
+        <div className="grid grid-cols-5 space-x-1">
+          <div />
+          <div>
+            <Tooltip
+              {...args}
+              side="bottom"
+              align="start"
+              description="tooltip description"
+            >
+              bottomStart
+            </Tooltip>
+          </div>
+          <div>
+            <Tooltip
+              {...args}
+              side="bottom"
+              align="center"
+              description="tooltip description"
+            >
+              bottomCenter
+            </Tooltip>
+          </div>
+          <div>
+            <Tooltip
+              {...args}
+              side="bottom"
+              align="end"
+              description="tooltip description"
+            >
+              bottonEnd
+            </Tooltip>
+          </div>
+          <div />
+        </div>
+      </div>
+    );
+  },
+};