myshell-react-lib 0.1.0

package/src/stories/Avatar.stories.ts

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { Avatar } from '@/components/avatar';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Components/数据展示/Avatar-头像',
+  component: Avatar,
+  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',
+    src: 'https://d6phagtfbtco7.cloudfront.net/bot-logo/8a40733494be4bcbbf58b1ec6bb56513.png',
+    variant: 'bot',
+  },
+  argTypes: {
+    // 定义size为select类型的控件
+    size: {
+      control: 'select',
+      options: [
+        'xs',
+        'sm',
+        'md',
+        'lg',
+        'xl',
+        '2xl',
+        '3xl',
+        '4xl',
+        '5xl',
+        '6xl',
+      ],
+    },
+    variant: {
+      control: 'select',
+      options: ['bot', 'user', 'widget'],
+    },
+  },
+} satisfies Meta<typeof Avatar>;
+
+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/Badge.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Badge from '../components/badge';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Components/数据展示/Badge-徽标',
+  component: Badge,
+  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: {
+    status: 'default',
+  },
+  argTypes: {
+    // 定义size为select类型的控件
+    status: {
+      control: 'select',
+      options: ['default', 'unRead', 'public', 'private', 'hidden', 'new'],
+    },
+  },
+} satisfies Meta<typeof Badge>;
+
+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/BannerSwiper.stories.tsx

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { Swiper } from '../components/swiper/index';
+// import { BannerItem } from '@/components/explore/components/banner-item';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Components/数据展示/Swiper-轮播图',
+  component: Swiper,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+    nextjs: {
+      appDirectory: true, // 如果组件里有用到router next/navigation，则需要设置此配置
+    },
+  },
+  // 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: {
+    // component: BannerItem,
+    className: '',
+    swiperType: 'banner',
+    dataList: [
+      {
+        title: 'Beta Season S11',
+        description:
+          'Beta Season S11 is in full swing, come and earn generous rewards!',
+        imageUrl:
+          'https://www.myshellstatic.com/image/homepage/20240329/cb26ac85a4fb4844ac0a5509d4660da0.png',
+        mobileImageUrl:
+          'https://www.myshellstatic.com/image/homepage/20240329/a80c53980e9a4d588fdd829abb6cfc1e.png',
+        gotoUrl: '/rewards-center',
+        gotoSchema: 'myshell://native/main?tab=rewards',
+        buttonText: 'Join Now',
+      },
+      {
+        title: 'AICM Joins Now',
+        description:
+          'Enter the world of Demon Slayer. Be a Slayer, a warrior shielding humanity from demons, or turn into a Demon yourself, hunting humans for sustenance.',
+        imageUrl:
+          'https://www.myshellstatic.com/image/homepage/20240329/128ab0faadbc448280dbdf9876a23de2.png',
+        mobileImageUrl:
+          'https://www.myshellstatic.com/image/homepage/20240329/036f3920a433490d91494e5ff3b8becf.png',
+        gotoUrl: '/bot/FBFryy/1705953885',
+        gotoSchema: 'myshell://native/chat/1705953885',
+        buttonText: 'Chat Now',
+      },
+      {
+        title: 'Officially Produced',
+        description:
+          'Feature-rich AI tools: Experience endless surprises in MyShell!',
+        imageUrl:
+          'https://www.myshellstatic.com/image/homepage/20240329/e2a2e885f04e4749a93ca0599a644d4b.png',
+        mobileImageUrl:
+          'https://www.myshellstatic.com/image/homepage/20240329/5a71f97720614f329d50ba7375160d39.png',
+        gotoUrl: 'explore?filter=1719340128622136757',
+        gotoSchema: 'myshell://native/chat/1705953885',
+        buttonText: 'Try Now',
+      },
+      {
+        title: 'Discord Forum',
+        description:
+          'Jump into the rabbit hole of Prompt: Step-by-step tutorial, easily from beginner to advanced.\n12313213213213213噶哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈',
+        imageUrl:
+          'https://www.myshellstatic.com/image/homepage/20240329/ea221905d4fd42f481a48a334d72324e.png',
+        mobileImageUrl:
+          'https://www.myshellstatic.com/image/homepage/20240329/7465f7d5619e47c0bf65e56ba767b757.png',
+        gotoUrl:
+          'https://discord.com/channels/1122227993805336617/1127967758919925953',
+        gotoSchema:
+          'https://discord.com/channels/1122227993805336617/1127967758919925953',
+        buttonText: 'Join Now',
+      },
+    ],
+  },
+  argTypes: {
+    // 定义size为select类型的控件
+  },
+} satisfies Meta<typeof Swiper>;
+
+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 BannerDemo: Story = {
+  args: {
+    ...meta.args, // 继承默认参数
+  },
+  render: (args) => {
+    return (
+      <div className="w-[70vw] px-3 rounded-md">
+        {/* <Swiper {...args} /> */}
+      </div>
+    );
+  },
+};