myshell-react-lib 0.1.5 → 0.1.7

package/src/stories/Text.stories.ts

@@ -1,78 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
-import { Text } from '@/components/typography';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Components/文字排版/Text-文字',
-  component: Text,
-  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: 'lg',
-    weight: 'regular',
-    color: 'default',
-    children: 'Body/lg/Regular',
-    underline: false,
-    strikethrough: false,
-    strong: false,
-    italic: false,
-  },
-  argTypes: {
-    // 定义size为select类型的控件
-    size: {
-      control: 'select',
-      options: ['lg', 'sm'],
-    },
-    weight: {
-      control: 'select',
-      options: ['regular', 'medium', 'semibold'],
-    },
-    // 定义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 Text>;
-
-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, // 继承默认参数
-  },
-};

package/src/stories/Textarea.stories.tsx

@@ -1,155 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
-
-import { Button } from '../components/button';
-import { Textarea } from '../components/textarea';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Components/表单/Textarea-输入框',
-  component: Textarea,
-  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: {
-    placeholder: 'Search Myshell',
-  },
-  argTypes: {
-    // 定义size为select类型的控件
-    value: {
-      control: 'text',
-    },
-  },
-} satisfies Meta<typeof Textarea>;
-
-export default meta;
-// export const Default: StoryObj<typeof meta> = {
-//   // 这里不需要设置 args，因为它会继承 meta 中的 args
-// };
-type Story = StoryObj<typeof meta>;
-
-const FormErrorDemo = () => {
-  const [formData, setFormData] = useState({
-    desc: '',
-  });
-
-  // 存储每个字段的错误信息
-  const [errors, setErrors] = useState({
-    desc: '',
-  });
-
-  // 触发验证的状态（仅在提交后激活）
-  const [isValidating, setIsValidating] = useState(false);
-
-  const handleChange = (e) => {
-    const { name, value } = e.target;
-    setFormData({
-      ...formData,
-      [name]: value,
-    });
-
-    // 如果已经在验证状态，即时验证
-    if (isValidating) {
-      validateField(name, value);
-    }
-  };
-
-  const validateField = (name, value) => {
-    let errorMessage = '';
-
-    switch (name) {
-      case 'desc':
-        if (!value.trim()) {
-          errorMessage = '描述不能为空';
-        } else if (value.length < 10) {
-          errorMessage = '描述至少需要3个字符';
-        }
-        break;
-      default:
-        break;
-    }
-
-    setErrors((prev) => ({
-      ...prev,
-      [name]: errorMessage,
-    }));
-
-    return !errorMessage;
-  };
-
-  const validateForm = () => {
-    const descValid = validateField('desc', formData.desc);
-
-    return descValid;
-  };
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    setIsValidating(true);
-
-    if (validateForm()) {
-      // 表单验证通过，可以提交
-      console.log('表单提交成功:', formData);
-      // 这里可以添加提交逻辑
-    } else {
-      console.log('表单验证失败');
-    }
-  };
-
-  return (
-    <div className="space-y-4 w-full max-w-md">
-      <form onSubmit={handleSubmit}>
-        <div className="mb-4">
-          <Textarea
-            name="desc"
-            placeholder="描述"
-            value={formData.desc}
-            onChange={handleChange}
-            aria-invalid={!!errors.desc}
-          />
-          {errors.desc && (
-            <p className="mt-1 text-sm text-Colors-Text-Critical-Default">
-              {errors.desc}
-            </p>
-          )}
-        </div>
-
-        <div className="flex space-x-4">
-          <Button type="submit">提交表单</Button>
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={() => {
-              setFormData({ desc: '' });
-              setErrors({ desc: '' });
-              setIsValidating(false);
-            }}
-          >
-            重置
-          </Button>
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={() => {
-              setFormData({
-                desc: 'te', // 故意设置错误的值
-              });
-              setIsValidating(true);
-              validateForm();
-            }}
-          >
-            触发错误状态
-          </Button>
-        </div>
-      </form>
-    </div>
-  );
-};
-
-export const 表单验证: Story = {
-  render: () => <FormErrorDemo />,
-};

package/src/stories/Toast.stories.tsx

@@ -1,424 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
-import { Button } from '../components/button';
-import { Toaster } from '../components/toast/toaster';
-import { useToast } from '../components/toast/use-toast';
-
-// 创建一个简单的代码预览组件
-const CodePreview = ({ code }: { code: string }) => {
-  return (
-    <div className="w-full bg-neutral-100 dark:bg-neutral-900 p-4 rounded-md overflow-auto max-h-[400px] mt-4">
-      <pre className="text-sm font-mono whitespace-pre-wrap break-words text-neutral-800 dark:text-neutral-200">
-        <code>{code}</code>
-      </pre>
-    </div>
-  );
-};
-
-// 创建一个带有代码展示功能的Demo组件
-const DemoWithCode = ({
-  children,
-  code,
-}: {
-  children: React.ReactNode;
-  code: string;
-}) => {
-  const [showCode, setShowCode] = useState(false);
-  return (
-    <div className="border rounded-md p-4 mb-6 w-[60vw]">
-      <div className="mb-1">{children}</div>
-      {showCode && <CodePreview code={code} />}
-      <div className="mt-1 flex justify-end">
-        <Button
-          variant="secondary"
-          size={'sm'}
-          onClick={() => {
-            setShowCode(!showCode);
-          }}
-        >
-          {showCode ? 'hide code' : 'show code'}
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-const ToastDemo = ({
-  variant,
-  actions,
-  type,
-}: {
-  variant?: 'info' | 'success' | 'warning' | 'error';
-  id?: string;
-  actions?: {
-    dismissText?: string;
-    view?: string;
-    viewUrl?: string;
-  };
-  type?: string;
-}) => {
-  const { toast } = useToast();
-
-  const showToast = () => {
-    if (actions) {
-      toast({
-        variant,
-        title: `${
-          variant
-            ? variant.charAt(0).toUpperCase() + variant.slice(1)
-            : 'Default'
-        } Toast`,
-        description:
-          'Check out the all new dashboard view. Pages and exports now load faster. ',
-        actions,
-      });
-    } else {
-      toast({
-        variant,
-        title: `${
-          variant
-            ? variant.charAt(0).toUpperCase() + variant.slice(1)
-            : 'Default'
-        } Toast`,
-        description:
-          'Check out the all new dashboard view. Pages and exports now load faster. ',
-      });
-    }
-  };
-
-  return (
-    <div className="flex flex-col space-y-2">
-      <Button onClick={showToast}>显示{type || variant || '带操作'}通知</Button>
-      <Toaster />
-    </div>
-  );
-};
-
-// 示例代码
-const infoToastCode = `
-import { useToast } from '../components/toast/use-toast';
-import { Toaster } from '../components/toast/toaster';
-import { Button } from '../components/button';
-
-function InfoToastExample() {
-  const { toast } = useToast();
-  
-  const showToast = () => {
-    toast({
-      variant: 'info',
-      title: '信息通知',
-      description: '这是一条信息通知，用于展示一般信息。',
-    });
-  };
-
-  return (
-    <>
-      <Button onClick={showToast}>显示信息通知</Button>
-      <Toaster />
-    </>
-  );
-}
-`;
-
-const successToastCode = `
-import { useToast } from '../components/toast/use-toast';
-import { Toaster } from '../components/toast/toaster';
-import { Button } from '../components/button';
-
-function SuccessToastExample() {
-  const { toast } = useToast();
-  
-  const showToast = () => {
-    toast({
-      variant: 'success',
-      title: '成功通知',
-      description: '操作已成功完成！',
-    });
-  };
-
-  return (
-    <>
-      <Button onClick={showToast}>显示成功通知</Button>
-      <Toaster />
-    </>
-  );
-}
-`;
-
-const warningToastCode = `
-import { useToast } from '../components/toast/use-toast';
-import { Toaster } from '../components/toast/toaster';
-import { Button } from '../components/button';
-
-function WarningToastExample() {
-  const { toast } = useToast();
-  
-  const showToast = () => {
-    toast({
-      variant: 'warning',
-      title: '警告通知',
-      description: '请注意，这是一个警告提示。',
-    });
-  };
-
-  return (
-    <>
-      <Button onClick={showToast}>显示警告通知</Button>
-      <Toaster />
-    </>
-  );
-}
-`;
-
-const errorToastCode = `
-import { useToast } from '../components/toast/use-toast';
-import { Toaster } from '../components/toast/toaster';
-import { Button } from '../components/button';
-
-function ErrorToastExample() {
-  const { toast } = useToast();
-  
-  const showToast = () => {
-    toast({
-      variant: 'error',
-      title: '错误通知',
-      description: '操作失败，请重试。',
-    });
-  };
-
-  return (
-    <>
-      <Button onClick={showToast}>显示错误通知</Button>
-      <Toaster />
-    </>
-  );
-}
-`;
-
-const toastCode = `
-import { useToast } from '../components/toast/use-toast';
-import { Toaster } from '../components/toast/toaster';
-import { Button } from '../components/button';
-
-function toastExample() {
-  const { toast } = useToast();
-  
-  const showToast = () => {
-    toast({
-      title: '带操作通知',
-      description: '这是一个带操作类型的通知提示',
-      actions: {
-        dismissText: '取消',
-        view: '查看',
-        viewUrl: 'https://app.myshell.ai',
-      },
-    });
-  };
-
-  return (
-    <>
-      <Button onClick={showToast}>显示带操作通知</Button>
-      <Toaster />
-    </>
-  );
-}
-`;
-
-const viewToastCode = `
-import { useToast } from '../components/toast/use-toast';
-import { Toaster } from '../components/toast/toaster';
-import { Button } from '../components/button';
-
-function toastExample() {
-  const { toast } = useToast();
-  
-  const showToast = () => {
-    toast({
-      title: '带操作通知',
-      description: '这是一个带操作类型的通知提示',
-      actions: {
-        view: '查看',
-        viewUrl: 'https://app.myshell.ai',
-      },
-    });
-  };
-
-  return (
-    <>
-      <Button onClick={showToast}>显示带操作通知</Button>
-      <Toaster />
-    </>
-  );
-}
-`;
-
-const positionToastCode = `
-import { useToast } from '../components/toast/use-toast';
-import { Toaster } from '../components/toast/toaster';
-import { Button } from '../components/button';
-
-function PositionToastExample() {
-  const { toast } = useToast();
-  
-  const showAllPositionToasts = () => {
-    // 显示8个不同位置的通知
-    const positions = [
-      'top-left',
-      'top-center',
-      'top-right',
-      'bottom-left',
-      'bottom-center',
-      'bottom-right',
-      'left-center',
-      'right-center',
-    ];
-
-    positions.forEach((position, index) => {
-      setTimeout(() => {
-        toast({
-          variant: 'info',
-          title: \`\${position} 通知\`,
-          description: '这是一个示例通知，展示不同位置的Toast效果',
-          position: position,
-        });
-      }, index * 300); // 每300ms显示一个通知
-    });
-  };
-  
-  const showToast = (position) => {
-    toast({
-      variant: 'info',
-      title: \`\${position} 通知\`,
-      description: '这是一个示例通知，展示不同位置的Toast效果',
-      position: position,
-    });
-  };
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="grid grid-cols-3 gap-4">
-        <Button onClick={() => showToast('top-left')}>左上角</Button>
-        <Button onClick={() => showToast('top-center')}>顶部居中</Button>
-        <Button onClick={() => showToast('top-right')}>右上角</Button>
-        <Button onClick={() => showToast('left-center')}>左侧居中</Button>
-        <div></div>
-        <Button onClick={() => showToast('right-center')}>右侧居中</Button>
-        <Button onClick={() => showToast('bottom-left')}>左下角</Button>
-        <Button onClick={() => showToast('bottom-center')}>底部居中</Button>
-        <Button onClick={() => showToast('bottom-right')}>右下角</Button>
-      </div>
-      <Toaster />
-    </div>
-  );
-}`;
-
-// 位置示例组件
-const PositionToastDemo = () => {
-  const { toast, dismiss } = useToast();
-
-  // 清除所有Toast通知
-  const clearAllToasts = () => {
-    dismiss();
-  };
-
-  const showToast = (
-    position:
-      | 'top-left'
-      | 'top-center'
-      | 'top-right'
-      | 'bottom-left'
-      | 'bottom-center'
-      | 'bottom-right'
-      | 'left-center'
-      | 'right-center'
-  ) => {
-    // 不再清除之前的Toast
-
-    // 创建新的Toast，明确设置position
-    toast({
-      variant: 'info',
-      title: `${position} 通知`,
-      description: '这是一个示例通知，展示不同位置的Toast效果',
-      position: position,
-    });
-  };
-
-  return (
-    <div className="flex flex-col items-center justify-center gap-4 h-[800px] w-full">
-      <div className="grid grid-cols-3 gap-4">
-        <Button onClick={() => showToast('top-left')}>左上角</Button>
-        <Button onClick={() => showToast('top-center')}>顶部居中</Button>
-        <Button onClick={() => showToast('top-right')}>右上角</Button>
-        <Button onClick={() => showToast('left-center')}>左侧居中</Button>
-        <Button onClick={() => clearAllToasts()}>清除所有通知</Button>
-        <Button onClick={() => showToast('right-center')}>右侧居中</Button>
-        <Button onClick={() => showToast('bottom-left')}>左下角</Button>
-        <Button onClick={() => showToast('bottom-center')}>底部居中</Button>
-        <Button onClick={() => showToast('bottom-right')}>右下角</Button>
-      </div>
-      <Toaster />
-    </div>
-  );
-};
-
-const meta = {
-  title: 'Components/反馈/Toast-警报通知',
-  component: Toaster,
-  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'],
-  argTypes: {},
-} satisfies Meta<typeof Toaster>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const 警报通知: Story = {
-  render: () => (
-    <>
-      <DemoWithCode code={infoToastCode}>
-        <ToastDemo variant="info" id="info" />
-      </DemoWithCode>
-      <DemoWithCode code={successToastCode}>
-        <ToastDemo variant="success" />
-      </DemoWithCode>
-      <DemoWithCode code={warningToastCode}>
-        <ToastDemo variant="warning" />
-      </DemoWithCode>
-      <DemoWithCode code={errorToastCode}>
-        <ToastDemo variant="error" />
-      </DemoWithCode>
-      <DemoWithCode code={toastCode}>
-        <ToastDemo
-          variant="info"
-          actions={{
-            dismissText: '取消',
-            view: '查看',
-            viewUrl: 'https://app.myshell.ai',
-          }}
-        />
-      </DemoWithCode>
-      <DemoWithCode code={viewToastCode}>
-        <ToastDemo
-          type="hide dismiss"
-          variant="info"
-          actions={{
-            view: '查看',
-            viewUrl: 'https://app.myshell.ai',
-          }}
-        />
-      </DemoWithCode>
-    </>
-  ),
-};
-
-export const 不同位置的通知: Story = {
-  render: () => (
-    <DemoWithCode code={positionToastCode}>
-      <PositionToastDemo />
-    </DemoWithCode>
-  ),
-};