myshell-react-lib 0.1.0

package/src/stories/Guide.stories.tsx

@@ -0,0 +1,247 @@
+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

@@ -0,0 +1,89 @@
+/* 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

@@ -0,0 +1,77 @@
+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, // 继承默认参数
+  },
+};