myshell-react-lib 0.1.0

package/src/stories/Button.stories.tsx

@@ -0,0 +1,543 @@
+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>
+    );
+  },
+};