myshell-react-lib 0.1.5 → 0.1.7

package/src/stories/Guide.stories.tsx

@@ -1,247 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-
-import { Button } from '../components/button';
-import { Guide } from '../components/guide';
-
-const meta = {
-  title: 'Components/反馈/Guide-引导',
-  component: Guide,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  args: {
-    showProgress: true,
-    showOverlay: false,
-    hasCloseBtn: true,
-    hasSkip: true,
-    hasPrevBtn: false,
-    hasNextBtn: true,
-    allowClose: true,
-    skipText: '跳过',
-    prevBtnText: '上一步',
-    nextBtnText: '下一步',
-    doneBtnText: '完成',
-    steps: [
-      {
-        element: '#topStart',
-        popover: {
-          title: 'TopStart',
-          description: 'This is a top start positioned popover.',
-          side: 'top',
-          align: 'start',
-        },
-      },
-      // Add more steps as needed
-    ],
-  },
-  argTypes: {
-    showOverlay: {
-      description: '是否显示遮罩层',
-      control: 'boolean',
-    },
-    showProgress: {
-      description: '是否显示进度',
-      control: 'boolean',
-    },
-    allowClose: {
-      description: '是否允许点击背景蒙层关闭',
-      control: 'boolean',
-    },
-    hasCloseBtn: {
-      description: '是否显示关闭按钮',
-      control: 'boolean',
-    },
-    hasSkip: {
-      description: '是否有跳过按钮',
-      control: 'boolean',
-    },
-    skipText: {
-      description: '跳过按钮文字',
-      control: 'text',
-    },
-    hasPrevBtn: {
-      description: '是否有上一步按钮',
-      control: 'boolean',
-    },
-    hasNextBtn: {
-      description: '是否有下一步按钮',
-      control: 'boolean',
-    },
-    prevBtnText: {
-      description: '上一步按钮文字',
-      control: 'text',
-    },
-    nextBtnText: {
-      description: '下一步按钮文字',
-      control: 'text',
-    },
-    doneBtnText: {
-      description: '完成按钮文字',
-      control: 'text',
-    },
-    onComplete: {
-      description: '完成回调',
-      action: 'onComplete',
-    },
-    onSkip: {
-      description: '跳过回调',
-      action: 'onSkip',
-    },
-  },
-} satisfies Meta<typeof Guide>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-// ... existing imports and meta ...
-export const GuideDemo: Story = {
-  args: {
-    ...meta.args,
-  },
-  render: (args) => {
-    const [showGuide, setShowGuide] = React.useState(false);
-
-    const createStep = (
-      id: string,
-      side: 'top' | 'right' | 'bottom' | 'left',
-      align: 'start' | 'center' | 'end'
-    ) => ({
-      element: `#${id}`,
-      popover: {
-        title: `${side}${align.charAt(0).toUpperCase() + align.slice(1)}`,
-        description: `This is a ${side} ${align} positioned popover. you can use prompt to make the robot have a unique dialogue style or function!`,
-        side,
-        align,
-      },
-    });
-
-    const steps = [
-      createStep('leftStart', 'left', 'start'),
-      createStep('left', 'left', 'center'),
-      createStep('leftEnd', 'left', 'end'),
-      createStep('topStart', 'top', 'start'),
-      createStep('topCenter', 'top', 'center'),
-      createStep('topEnd', 'top', 'end'),
-      createStep('rightStart', 'right', 'start'),
-      createStep('right', 'right', 'center'),
-      createStep('rightEnd', 'right', 'end'),
-      createStep('bottomStart', 'bottom', 'start'),
-      createStep('bottomCenter', 'bottom', 'center'),
-      createStep('bottomEnd', 'bottom', 'end'),
-    ];
-
-    return (
-      <div className="w-[50vw] min-h-[200px] py-10 px-3 rounded-md space-y-3 flex flex-col justify-center">
-        <Button onClick={() => setShowGuide(true)} className="mb-5">
-          Show Guide
-        </Button>
-        <div className="grid grid-cols-5 gap-2">
-          <div />
-          <div
-            id="topStart"
-            className="bg-Colors-Background-Normal-Secondary-Default p-2 rounded text-center"
-          >
-            topStart
-          </div>
-          <div
-            id="topCenter"
-            className="bg-Colors-Background-Normal-Secondary-Default p-2 rounded text-center"
-          >
-            topCenter
-          </div>
-          <div
-            id="topEnd"
-            className="bg-Colors-Background-Normal-Secondary-Default p-2 rounded text-center"
-          >
-            topEnd
-          </div>
-          <div />
-        </div>
-        <div className="grid grid-cols-5 gap-2">
-          <div
-            id="leftStart"
-            className="bg-Colors-Background-Normal-Secondary-Default p-2 rounded text-center"
-          >
-            leftStart
-          </div>
-          <div />
-          <div />
-          <div />
-          <div
-            id="rightStart"
-            className="bg-Colors-Background-Normal-Secondary-Default p-2 rounded text-center"
-          >
-            rightStart
-          </div>
-        </div>
-        <div className="grid grid-cols-5 gap-2">
-          <div
-            id="left"
-            className="bg-Colors-Background-Normal-Secondary-Default p-2 rounded text-center"
-          >
-            left
-          </div>
-          <div />
-          <div />
-          <div />
-          <div
-            id="right"
-            className="bg-Colors-Background-Normal-Secondary-Default p-2 rounded text-center"
-          >
-            right
-          </div>
-        </div>
-        <div className="grid grid-cols-5 gap-2">
-          <div
-            id="leftEnd"
-            className="bg-Colors-Background-Normal-Secondary-Default p-2 rounded text-center"
-          >
-            leftEnd
-          </div>
-          <div />
-          <div />
-          <div />
-          <div
-            id="rightEnd"
-            className="bg-Colors-Background-Normal-Secondary-Default p-2 rounded text-center"
-          >
-            rightEnd
-          </div>
-        </div>
-        <div className="grid grid-cols-5 gap-2">
-          <div />
-          <div
-            id="bottomStart"
-            className="bg-Colors-Background-Normal-Secondary-Default p-2 rounded text-center"
-          >
-            bottomStart
-          </div>
-          <div
-            id="bottomCenter"
-            className="bg-Colors-Background-Normal-Secondary-Default p-2 rounded text-center"
-          >
-            bottom
-          </div>
-          <div
-            id="bottomEnd"
-            className="bg-Colors-Background-Normal-Secondary-Default p-2 rounded text-center"
-          >
-            bottomEnd
-          </div>
-          <div />
-        </div>
-        {showGuide && (
-          <Guide
-            {...args}
-            steps={steps}
-            onComplete={() => setShowGuide(false)}
-            onSkip={() => setShowGuide(false)}
-          />
-        )}
-      </div>
-    );
-  },
-};

package/src/stories/Heading.stories.ts

@@ -1,89 +0,0 @@
-/* eslint-disable import/no-unused-modules */
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
-import { Heading } from '@/components/typography';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Components/文字排版/Heading-H标签',
-  component: Heading,
-  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'],
-
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: {}, // 默认参数
-  argTypes: {
-    // 定义size为select类型的控件
-    size: {
-      control: 'select',
-      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-    },
-    // 定义color为select类型的控件
-    color: {
-      control: 'select',
-      options: [
-        'default',
-        'subtle',
-        'subtler',
-        'subtlest',
-        'disabled',
-        'static',
-        'static-black',
-        'brand',
-        'critical',
-        'critical-bolder',
-        'warning',
-        'warning-bolder',
-        'success',
-        'success-bolder',
-      ],
-    },
-
-    // 定义lineClamp为select类型的控件
-    lineClamp: {
-      control: 'select',
-      options: [1, 2, 3, 4, 5, 6],
-    },
-  },
-} satisfies Meta<typeof Heading>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const H1: Story = {
-  args: {
-    size: 'h1',
-    children: 'Heading/h1',
-  },
-};
-export const H2: Story = {
-  args: {
-    size: 'h2',
-    children: 'Heading/h2',
-  },
-};
-export const H3: Story = {
-  args: {
-    size: 'h3',
-    children: 'Heading/h3',
-  },
-};
-export const H4: Story = {
-  args: {
-    size: 'h4',
-    children: 'Heading/h4',
-  },
-};
-export const H5: Story = {
-  args: {
-    size: 'h5',
-    children: 'Heading/h5',
-  },
-};

package/src/stories/Icon.stories.ts

@@ -1,77 +0,0 @@
-import ArrowSmallRightIcon from '@heroicons/react/24/outline/esm/ArrowSmallRightIcon';
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
-import { Icon } from '@/components/icon';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Components/通用/Icon-图标',
-  component: Icon,
-  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'],
-
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: {
-    size: 'sm',
-    component: ArrowSmallRightIcon,
-    color: 'default',
-  },
-  argTypes: {
-    // 定义size为select类型的控件
-
-    size: {
-      control: 'select',
-      options: [
-        '2xs',
-        'xs',
-        'sm',
-        'md',
-        'lg',
-        'xl',
-        '2xl',
-        '3xl',
-        '4xl',
-        '5xl',
-        '6xl',
-        '7xl',
-      ],
-    },
-    color: {
-      control: 'select',
-      options: [
-        'default',
-        'subtle',
-        'subtlest',
-        'disabled',
-        'inverse',
-        'static',
-        'brand',
-        'critical',
-        'warning',
-        'success',
-      ],
-    },
-    rotate: {
-      control: 'select',
-      options: ['0', '45', '90', '-45', '-90', '180'],
-    },
-  },
-} satisfies Meta<typeof Icon>;
-
-export default meta;
-// export const Default: StoryObj<typeof meta> = {
-//   // 这里不需要设置 args，因为它会继承 meta 中的 args
-// };
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Demo: Story = {
-  args: {
-    ...meta.args, // 继承默认参数
-  },
-};