myshell-react-lib 0.1.0

package/src/stories/IconButton.stories.tsx

@@ -0,0 +1,301 @@
+import ArrowsUpDownIcon from '@heroicons/react/24/outline/esm/ArrowsUpDownIcon';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { IconButton } from '@/components/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

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

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

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