myshell-react-lib 0.1.5 → 0.1.6

package/src/stories/IconButton.stories.tsx

@@ -1,301 +0,0 @@
-import ArrowsUpDownIcon from '@heroicons/react/24/outline/esm/ArrowsUpDownIcon';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { IconButton } from '../components/button/icon-button';
-import React from 'react';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Components/通用/IconButton-按钮',
-  component: IconButton,
-  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',
-    variant: 'primary',
-    disabled: false,
-    loading: false,
-    icon: ArrowsUpDownIcon,
-    hoverText: 'Content',
-  },
-  argTypes: {
-    // 定义size为select类型的控件
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-    },
-    variant: {
-      control: 'select',
-      options: ['primary', 'secondary', 'tertiary', 'plain', 'static', 'solid'],
-    },
-    color: {
-      control: 'select',
-      options: ['default', 'brand', 'error', 'gray'],
-    },
-    hoverText: {
-      control: 'text',
-    },
-  },
-} satisfies Meta<typeof IconButton>;
-
-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 IconButtonDemo: Story = {
-  args: {
-    ...meta.args, // 继承默认参数
-  },
-  render: (args) => {
-    return (
-      <div className="min-w-[60vw] w-full p-6 rounded-md flex flex-col justify-center items-center space-y-2">
-        <div className="w-full">示例：</div>
-        <div className="w-full flex flex-col justify-center items-center">
-          <div className="w-full flex justify-around mb-3">
-            <div className="font-bold w-10" />
-            <div className="flex justify-center">lg</div>
-            <div className="flex justify-center">md</div>
-            <div className="flex justify-center">sm</div>
-          </div>
-          <div className="w-full flex justify-around items-center mb-6">
-            <div className="font-semibold w-10">Primary (brand)</div>
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="primary"
-              color="brand"
-              size="lg"
-            />
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="primary"
-              color="brand"
-              size="md"
-            />
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="primary"
-              color="brand"
-              size="sm"
-            />
-          </div>
-
-          <div className="w-full flex justify-around items-center mb-6">
-            <div className="font-semibold w-10">Secondary</div>
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="secondary"
-              size="lg"
-            />
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="secondary"
-              size="md"
-            />
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="secondary"
-              size="sm"
-            />
-          </div>
-
-          <div className="w-full flex justify-around items-center mb-6">
-            <div className="font-semibold w-10">Tertiary</div>
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="tertiary"
-              size="lg"
-            />
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="tertiary"
-              size="md"
-            />
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="tertiary"
-              size="sm"
-            />
-          </div>
-          <div className="w-full flex justify-around items-center mb-6">
-            <div className="font-semibold w-10">Plain</div>
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="plain"
-              size="lg"
-            />
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="plain"
-              size="md"
-            />
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="plain"
-              size="sm"
-            />
-          </div>
-          <div className="w-full flex justify-around items-center mb-6">
-            <div className="font-semibold w-10">Plain (gray)</div>
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="plain"
-              color="gray"
-              size="lg"
-            />
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="plain"
-              color="gray"
-              size="md"
-            />
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="plain"
-              color="gray"
-              size="sm"
-            />
-          </div>
-          <div className="w-full flex justify-around items-center mb-6">
-            <div className="font-semibold w-10">Primary (error)</div>
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="primary"
-              color="error"
-              size="lg"
-            />
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="primary"
-              color="error"
-              size="md"
-            />
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="primary"
-              color="error"
-              size="sm"
-            />
-          </div>
-          <div className="w-full flex justify-around items-center mb-6">
-            <div className="font-semibold w-10">Secondary (error)</div>
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="secondary"
-              color="error"
-              size="lg"
-            />
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="secondary"
-              color="error"
-              size="md"
-            />
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="secondary"
-              color="error"
-              size="sm"
-            />
-          </div>
-          <div className="w-full flex justify-around items-center mb-6">
-            <div className="font-semibold w-10">Plain (error)</div>
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="plain"
-              color="error"
-              size="lg"
-              className=""
-            />
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="plain"
-              color="error"
-              size="md"
-            />
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="plain"
-              color="error"
-              size="sm"
-            />
-          </div>
-          <div className="w-full flex justify-around items-center mb-6">
-            <div className="font-semibold w-10">Static</div>
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="static"
-              size="lg"
-            />
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="static"
-              size="md"
-            />
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="static"
-              size="sm"
-            />
-          </div>
-          <div className="w-full flex justify-around items-center mb-6">
-            <div className="font-semibold w-10">Solid</div>
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="solid"
-              size="lg"
-            />
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="solid"
-              size="md"
-            />
-            <IconButton
-              icon={ArrowsUpDownIcon}
-              {...args}
-              variant="solid"
-              size="sm"
-            />
-          </div>
-        </div>
-      </div>
-    );
-  },
-};

package/src/stories/IconTextButton.stories.ts

@@ -1,59 +0,0 @@
-import ArrowsUpDownIcon from '@heroicons/react/24/outline/esm/ArrowsUpDownIcon';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from '@/components/button/button';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Components/通用/Button-按钮',
-  component: Button,
-  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',
-    color: 'default',
-    variant: 'primary',
-    disabled: false,
-    loading: false,
-    children: '按钮',
-    icon: ArrowsUpDownIcon,
-  },
-  argTypes: {
-    // 定义size为select类型的控件
-    size: {
-      control: 'select',
-      options: ['lg', 'sm', 'md'],
-    },
-    variant: {
-      control: 'select',
-      options: ['primary', 'outline', 'link'],
-    },
-    color: {
-      control: 'select',
-      options: ['default', 'brand', 'warning', 'error', 'gray'],
-    },
-    iconDirection: {
-      control: 'select',
-      options: ['left', 'right'],
-    },
-  },
-} satisfies Meta<typeof Button>;
-
-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 IconTextButton: Story = {
-  args: {
-    ...meta.args, // 继承默认参数
-  },
-};

package/src/stories/Image.stories.ts

@@ -1,55 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Image, ImageProps } from '@/components/image';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Components/通用/Image-图片',
-  component: Image,
-  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: {
-    rounded: {
-      control: 'select',
-      options: [
-        'none',
-        'sm',
-        'default',
-        'md',
-        'lg',
-        'xl',
-        '2xl',
-        '3xl',
-        'full',
-      ],
-    },
-    object: {
-      control: 'select',
-      options: ['contain', 'cover', 'fill', 'none'],
-    },
-  },
-} satisfies Meta<ImageProps>;
-
-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: {
-    width: '100%',
-    height: '100%',
-    src: 'https://www.myshellstatic.com/image/homepage/20240504/787721e9d8a04b029d279aa5310941e8.png',
-    fallback: '',
-    isBackgroud: false,
-  },
-};

package/src/stories/Input.stories.tsx

@@ -1,203 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
-
-import { Input } from '../components/input';
-import { Button } from '../components/button';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Components/表单/Input-输入框',
-  component: Input,
-  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类型的控件
-    size: {
-      control: 'select',
-      options: ['lg', 'md', 'sm', 'xs'],
-    },
-    rounded: {
-      control: 'select',
-      options: [
-        'none',
-        'sm',
-        'default',
-        'md',
-        'lg',
-        'xl',
-        '2xl',
-        '3xl',
-        'full',
-      ],
-    },
-    isFull: {
-      control: 'boolean',
-      defaultValue: true,
-    },
-  },
-} satisfies Meta<typeof Input>;
-
-export default meta;
-// export const Default: StoryObj<typeof meta> = {
-//   // 这里不需要设置 args，因为它会继承 meta 中的 args
-// };
-type Story = StoryObj<typeof meta>;
-
-const FormErrorDemo = () => {
-  const [formData, setFormData] = useState({
-    username: '',
-    email: '',
-  });
-
-  // 存储每个字段的错误信息
-  const [errors, setErrors] = useState({
-    username: '',
-    email: '',
-  });
-
-  // 触发验证的状态（仅在提交后激活）
-  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 'username':
-        if (!value.trim()) {
-          errorMessage = '用户名不能为空';
-        } else if (value.length < 3) {
-          errorMessage = '用户名至少需要3个字符';
-        }
-        break;
-      case 'email':
-        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-        if (!value.trim()) {
-          errorMessage = '邮箱不能为空';
-        } else if (!emailRegex.test(value)) {
-          errorMessage = '请输入有效的邮箱地址';
-        }
-        break;
-      default:
-        break;
-    }
-
-    setErrors((prev) => ({
-      ...prev,
-      [name]: errorMessage,
-    }));
-
-    return !errorMessage;
-  };
-
-  const validateForm = () => {
-    const usernameValid = validateField('username', formData.username);
-    const emailValid = validateField('email', formData.email);
-
-    return usernameValid && emailValid;
-  };
-
-  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">
-          <Input
-            name="username"
-            placeholder="用户名"
-            value={formData.username}
-            onChange={handleChange}
-            aria-invalid={!!errors.username}
-          />
-          {errors.username && (
-            <p className="mt-1 text-sm text-Colors-Text-Critical-Default">
-              {errors.username}
-            </p>
-          )}
-        </div>
-
-        <div className="mb-4">
-          <Input
-            name="email"
-            type="email"
-            placeholder="邮箱"
-            value={formData.email}
-            onChange={handleChange}
-            aria-invalid={!!errors.email}
-          />
-          {errors.email && (
-            <p className="mt-1 text-sm text-Colors-Text-Critical-Default">
-              {errors.email}
-            </p>
-          )}
-        </div>
-
-        <div className="flex space-x-4">
-          <Button type="submit">提交表单</Button>
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={() => {
-              setFormData({ username: '', email: '' });
-              setErrors({ username: '', email: '' });
-              setIsValidating(false);
-            }}
-          >
-            重置
-          </Button>
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={() => {
-              setFormData({
-                username: 'te', // 故意设置错误的值
-                email: 'invalid-email', // 故意设置错误的值
-              });
-              setIsValidating(true);
-              validateForm();
-            }}
-          >
-            触发错误状态
-          </Button>
-        </div>
-      </form>
-    </div>
-  );
-};
-
-export const 表单验证: Story = {
-  render: () => <FormErrorDemo />,
-};