myshell-react-lib 0.1.4 → 0.1.6

package/src/stories/Tooltip.stories.tsx

@@ -1,244 +0,0 @@
-/* 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>
-    );
-  },
-};