myshell-react-lib 0.1.4 → 0.1.6

package/src/stories/Button.stories.tsx

@@ -1,543 +0,0 @@
-import ArrowsUpDownIcon from '@heroicons/react/24/outline/esm/ArrowsUpDownIcon';
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-
-import { Button, LinkButton } from '../components/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: 'Label',
-    noStyle: false,
-    iconOutBox: false,
-  },
-  argTypes: {
-    // 定义size为select类型的控件
-    size: {
-      control: 'select',
-      description: 'more',
-      options: ['sm', 'md', 'lg'],
-    },
-    variant: {
-      control: 'select',
-      options: ['primary', 'secondary', 'tertiary', 'link', 'static', 'plain'],
-    },
-    color: {
-      control: 'select',
-      options: ['default', 'brand', 'error'],
-    },
-    iconDirection: {
-      control: 'select',
-      options: ['left', 'right'],
-    },
-    iconOutBox: {
-      control: 'boolean',
-      description: 'icon是否不跟文案在一起，默认在一起',
-    },
-    isBlock: {
-      control: 'boolean',
-      description: '是否w-full',
-    },
-  },
-} 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 Demo: Story = {
-  args: {
-    ...meta.args, // 继承默认参数
-  },
-  render: (args) => {
-    const { children } = args;
-
-    return (
-      <div className="min-w-[60vw] w-full p-6 rounded-md flex flex-col space-y-3">
-        <div>示例：</div>
-
-        <div className="flex flex-col space-y-3">
-          <div className="grid grid-cols-4 space-x-2 font-medium">
-            <div className="flex justify-center" />
-            <div className="flex justify-center">lg</div>
-            <div className="flex justify-center">md</div>
-            <div className="flex justify-center">sm</div>
-          </div>
-          <div className="grid grid-cols-4 space-x-2 justify-center items-center">
-            <div className="font-semibold text-center">Primary</div>
-            <Button {...args} variant="primary" size="lg" className="">
-              {children}
-            </Button>
-            <Button {...args} variant="primary" size="md">
-              {children}
-            </Button>
-            <Button {...args} variant="primary" size="sm">
-              {children}
-            </Button>
-          </div>
-          <div className="grid grid-cols-4 space-x-2 justify-center items-center">
-            <div className="font-semibold text-center">Primary（Brand）</div>
-            <Button {...args} variant="primary" color="brand" size="lg">
-              {children}
-            </Button>
-            <Button {...args} variant="primary" color="brand" size="md">
-              {children}
-            </Button>
-            <Button {...args} variant="primary" color="brand" size="sm">
-              {children}
-            </Button>
-          </div>
-          <div className="grid grid-cols-4 space-x-2 justify-center items-center">
-            <div className="font-semibold text-center">Secondary</div>
-            <Button {...args} variant="secondary" size="lg">
-              {children}
-            </Button>
-            <Button {...args} variant="secondary" size="md">
-              {children}
-            </Button>
-            <Button {...args} variant="secondary" size="sm">
-              {children}
-            </Button>
-          </div>
-          <div className="grid grid-cols-4 space-x-2 justify-center items-center">
-            <div className="font-semibold text-center">Tertiary</div>
-            <Button {...args} variant="tertiary" size="lg">
-              {children}
-            </Button>
-            <Button {...args} variant="tertiary" size="md">
-              {children}
-            </Button>
-            <Button {...args} variant="tertiary" size="sm">
-              {children}
-            </Button>
-          </div>
-          <div className="grid grid-cols-4 space-x-2 justify-center items-center">
-            <div className="font-semibold text-center">Primary（Error）</div>
-            <Button {...args} variant="primary" color="error" size="lg">
-              {children}
-            </Button>
-            <Button {...args} variant="primary" color="error" size="md">
-              {children}
-            </Button>
-            <Button {...args} variant="primary" color="error" size="sm">
-              {children}
-            </Button>
-          </div>
-          <div className="grid grid-cols-4 space-x-2 justify-center items-center">
-            <div className="font-semibold text-center">Secondary（Error）</div>
-            <Button {...args} variant="secondary" color="error" size="lg">
-              {children}
-            </Button>
-            <Button {...args} variant="secondary" color="error" size="md">
-              {children}
-            </Button>
-            <Button {...args} variant="secondary" color="error" size="sm">
-              {children}
-            </Button>
-          </div>
-          <div className="grid grid-cols-4 space-x-2 justify-center items-center">
-            <div className="font-semibold text-center">Plain</div>
-            <Button {...args} variant="plain" size="lg">
-              {children}
-            </Button>
-            <Button {...args} variant="plain" size="md">
-              {children}
-            </Button>
-            <Button {...args} variant="plain" size="sm">
-              {children}
-            </Button>
-          </div>
-          <div className="grid grid-cols-4 space-x-2 justify-center items-center">
-            <div className="font-semibold text-center">Plain（Brand）</div>
-            <Button {...args} variant="plain" color="brand" size="lg">
-              {children}
-            </Button>
-            <Button {...args} variant="plain" color="brand" size="md">
-              {children}
-            </Button>
-            <Button {...args} variant="plain" color="brand" size="sm">
-              {children}
-            </Button>
-          </div>
-          <div className="grid grid-cols-4 space-x-2 justify-center items-center">
-            <div className="font-semibold text-center">Link button</div>
-            <LinkButton {...args} size="lg">
-              {children}
-            </LinkButton>
-            <LinkButton {...args} size="md">
-              {children}
-            </LinkButton>
-            <LinkButton {...args} size="sm">
-              {children}
-            </LinkButton>
-          </div>
-          <div className="grid grid-cols-4 space-x-2 justify-center items-center">
-            <div className="font-semibold text-center">Static</div>
-            <Button {...args} variant="static" size="lg">
-              {children}
-            </Button>
-            <Button {...args} variant="static" size="md">
-              {children}
-            </Button>
-            <Button {...args} variant="static" size="sm">
-              {children}
-            </Button>
-          </div>
-          <div className="grid grid-cols-4 space-x-2 justify-center items-center bg-black py-2 rounded-md">
-            <div className="font-semibold text-center text-Colors-Text-Static-White">
-              Opacity
-            </div>
-            <Button {...args} variant="opacity" size="lg">
-              {children}
-            </Button>
-            <Button {...args} variant="opacity" size="md">
-              {children}
-            </Button>
-            <Button {...args} variant="opacity" size="sm">
-              {children}
-            </Button>
-          </div>
-          <div className="grid grid-cols-4 space-x-2 justify-center items-cente py-2 rounded-md">
-            <div className="font-semibold text-center">Solid</div>
-            <Button {...args} variant="solid" size="lg">
-              {children}
-            </Button>
-            <Button {...args} variant="solid" size="md">
-              {children}
-            </Button>
-            <Button {...args} variant="solid" size="sm">
-              {children}
-            </Button>
-          </div>
-        </div>
-
-        <div className="pt-10">带icon的button</div>
-        <div className="flex flex-col space-y-3">
-          <div className="grid grid-cols-4 space-x-2 font-medium">
-            <div className="flex justify-center" />
-            <div className="flex justify-center">lg</div>
-            <div className="flex justify-center">md</div>
-            <div className="flex justify-center">sm</div>
-          </div>
-
-          <div className="grid grid-cols-4 space-x-2 justify-center items-center">
-            <div className="font-semibold text-center">Primary</div>
-            <Button
-              {...args}
-              icon={ArrowsUpDownIcon}
-              variant="primary"
-              size="lg"
-              className=""
-            >
-              {children}
-            </Button>
-            <Button
-              {...args}
-              icon={ArrowsUpDownIcon}
-              variant="primary"
-              size="md"
-            >
-              {children}
-            </Button>
-            <Button
-              {...args}
-              icon={ArrowsUpDownIcon}
-              variant="primary"
-              size="sm"
-            >
-              {children}
-            </Button>
-          </div>
-          <div className="grid grid-cols-4 space-x-2 justify-center items-center">
-            <div className="font-semibold text-center">Primary（Brand）</div>
-            <Button
-              {...args}
-              icon={ArrowsUpDownIcon}
-              variant="primary"
-              color="brand"
-              size="lg"
-            >
-              {children}
-            </Button>
-            <Button
-              {...args}
-              icon={ArrowsUpDownIcon}
-              variant="primary"
-              color="brand"
-              size="md"
-            >
-              {children}
-            </Button>
-            <Button
-              {...args}
-              icon={ArrowsUpDownIcon}
-              variant="primary"
-              color="brand"
-              size="sm"
-            >
-              {children}
-            </Button>
-          </div>
-          <div className="grid grid-cols-4 space-x-2 justify-center items-center">
-            <div className="font-semibold text-center">Secondary</div>
-            <Button
-              {...args}
-              icon={ArrowsUpDownIcon}
-              variant="secondary"
-              size="lg"
-            >
-              {children}
-            </Button>
-            <Button
-              {...args}
-              icon={ArrowsUpDownIcon}
-              variant="secondary"
-              size="md"
-            >
-              {children}
-            </Button>
-            <Button
-              {...args}
-              icon={ArrowsUpDownIcon}
-              variant="secondary"
-              size="sm"
-            >
-              {children}
-            </Button>
-          </div>
-          <div className="grid grid-cols-4 space-x-2 justify-center items-center">
-            <div className="font-semibold text-center">Tertiary</div>
-            <Button
-              {...args}
-              icon={ArrowsUpDownIcon}
-              variant="tertiary"
-              size="lg"
-            >
-              {children}
-            </Button>
-            <Button
-              {...args}
-              icon={ArrowsUpDownIcon}
-              variant="tertiary"
-              size="md"
-            >
-              {children}
-            </Button>
-            <Button
-              {...args}
-              icon={ArrowsUpDownIcon}
-              variant="tertiary"
-              size="sm"
-            >
-              {children}
-            </Button>
-          </div>
-          <div className="grid grid-cols-4 space-x-2 justify-center items-center">
-            <div className="font-semibold text-center">Primary（Error）</div>
-            <Button
-              {...args}
-              icon={ArrowsUpDownIcon}
-              variant="primary"
-              color="error"
-              size="lg"
-            >
-              {children}
-            </Button>
-            <Button
-              {...args}
-              icon={ArrowsUpDownIcon}
-              variant="primary"
-              color="error"
-              size="md"
-            >
-              {children}
-            </Button>
-            <Button
-              {...args}
-              icon={ArrowsUpDownIcon}
-              variant="primary"
-              color="error"
-              size="sm"
-            >
-              {children}
-            </Button>
-          </div>
-          <div className="grid grid-cols-4 space-x-2 justify-center items-center">
-            <div className="font-semibold text-center">Secondary（Error）</div>
-            <Button
-              {...args}
-              icon={ArrowsUpDownIcon}
-              variant="secondary"
-              color="error"
-              size="lg"
-            >
-              {children}
-            </Button>
-            <Button
-              {...args}
-              icon={ArrowsUpDownIcon}
-              variant="secondary"
-              color="error"
-              size="md"
-            >
-              {children}
-            </Button>
-            <Button
-              {...args}
-              icon={ArrowsUpDownIcon}
-              variant="secondary"
-              color="error"
-              size="sm"
-            >
-              {children}
-            </Button>
-          </div>
-
-          <div className="grid grid-cols-4 space-x-2 justify-center items-center">
-            <div className="font-semibold text-center">Static</div>
-            <Button
-              {...args}
-              icon={ArrowsUpDownIcon}
-              variant="static"
-              size="lg"
-            >
-              {children}
-            </Button>
-            <Button
-              {...args}
-              icon={ArrowsUpDownIcon}
-              variant="static"
-              size="md"
-            >
-              {children}
-            </Button>
-            <Button
-              {...args}
-              icon={ArrowsUpDownIcon}
-              variant="static"
-              size="sm"
-            >
-              {children}
-            </Button>
-          </div>
-          <div className="grid grid-cols-4 space-x-2 justify-center items-center bg-black py-2 rounded-md">
-            <div className="font-semibold text-center text-Colors-Text-Static-White">
-              Opacity
-            </div>
-            <Button
-              {...args}
-              icon={ArrowsUpDownIcon}
-              variant="opacity"
-              size="lg"
-            >
-              {children}
-            </Button>
-            <Button
-              {...args}
-              icon={ArrowsUpDownIcon}
-              variant="opacity"
-              size="md"
-            >
-              {children}
-            </Button>
-            <Button
-              {...args}
-              icon={ArrowsUpDownIcon}
-              variant="opacity"
-              size="sm"
-            >
-              {children}
-            </Button>
-          </div>
-          <div className="grid grid-cols-4 space-x-2 justify-center items-cente py-2 rounded-md">
-            <div className="font-semibold text-center">Solid</div>
-            <Button {...args} icon={ArrowsUpDownIcon} variant="solid" size="lg">
-              {children}
-            </Button>
-            <Button {...args} icon={ArrowsUpDownIcon} variant="solid" size="md">
-              {children}
-            </Button>
-            <Button {...args} icon={ArrowsUpDownIcon} variant="solid" size="sm">
-              {children}
-            </Button>
-          </div>
-        </div>
-        <div className="pt-10">Asset</div>
-        <div className="flex flex-col space-y-3">
-          <div className="grid grid-cols-4 space-x-2 font-medium">
-            <div className="flex justify-center" />
-            <div className="flex justify-center">lg</div>
-            <div className="flex justify-center">md</div>
-            <div className="flex justify-center">sm</div>
-          </div>
-          <div className="grid grid-cols-4 space-x-2 justify-center items-center">
-            <div className="font-semibold text-center">Primary Coin</div>
-            <Button {...args} variant="primary" size="lg" asset="coin">
-              {children}
-            </Button>
-            <Button {...args} variant="primary" size="md" asset="coin">
-              {children}
-            </Button>
-            <Button {...args} variant="primary" size="sm" asset="coin">
-              {children}
-            </Button>
-          </div>
-          <div className="grid grid-cols-4 space-x-2 justify-center items-center">
-            <div className="font-semibold text-center">Tertiary Coin</div>
-            <Button {...args} variant="tertiary" size="lg" asset="coin">
-              {children}
-            </Button>
-            <Button {...args} variant="tertiary" size="md" asset="coin">
-              {children}
-            </Button>
-            <Button {...args} variant="tertiary" size="sm" asset="coin">
-              {children}
-            </Button>
-          </div>
-          <div className="grid grid-cols-4 space-x-2 justify-center items-center">
-            <div className="font-semibold text-center">Secondary Coin</div>
-            <Button {...args} variant="secondary" size="lg" asset="coin">
-              {children}
-            </Button>
-            <Button {...args} variant="secondary" size="md" asset="coin">
-              {children}
-            </Button>
-            <Button {...args} variant="secondary" size="sm" asset="coin">
-              {children}
-            </Button>
-          </div>
-          <div className="grid grid-cols-4 space-x-2 justify-center items-center">
-            <div className="font-semibold text-center">Primary Energy</div>
-            <Button {...args} variant="primary" size="lg" asset="energy">
-              {children}
-            </Button>
-            <Button {...args} variant="primary" size="md" asset="energy">
-              {children}
-            </Button>
-            <Button {...args} variant="primary" size="sm" asset="energy">
-              {children}
-            </Button>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};