myshell-react-lib 0.1.0

package/src/stories/SecondaryNavigationBar.stories.tsx

@@ -0,0 +1,199 @@
+import { ArrowUpOnSquareIcon } from '@heroicons/react/24/outline';
+import EllipsisHorizontalIcon from '@heroicons/react/24/outline/esm/EllipsisHorizontalIcon';
+import type { Meta, StoryObj } from '@storybook/react';
+import { headers } from 'next/headers';
+import { SecondaryNavigationBar } from '../components/secondary-navigation-bar';
+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/通用/SecondaryNavigationBar-二级页面导航栏',
+  component: SecondaryNavigationBar,
+  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: {
+    title: 'Title',
+    showClear: false,
+    showSearchBar: false,
+    searchValue: '',
+    backUrl: '/explore',
+  },
+  argTypes: {
+    title: {
+      control: 'text',
+    },
+  },
+} satisfies Meta<typeof SecondaryNavigationBar>;
+
+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 SecondaryNavigationBarDemo: Story = {
+  args: {
+    ...meta.args, // 继承默认参数
+  },
+  render: (args) => {
+    return (
+      <div className="min-w-[60vw] overflow-y-auto w-full p-6 rounded-md flex flex-col justify-center items-center  bg-Colors-Background-Neutral-Primary-Default">
+        <div className="w-full">
+          <div className="w-full mt-6">Default</div>
+          <SecondaryNavigationBar
+            {...args}
+            backUrl=""
+            showClear={false}
+            showSearchBar={false}
+          />
+        </div>
+        <div className="w-full">
+          <div className="w-full mt-6">Back url</div>
+          <SecondaryNavigationBar
+            {...args}
+            backUrl="/"
+            showClear={false}
+            showSearchBar={false}
+          />
+        </div>
+        <div className="w-full">
+          <div className="w-full mt-6">Search bar</div>
+          <SecondaryNavigationBar {...args} showSearchBar />
+        </div>
+        <div className="w-full">
+          <div className="w-full mt-6">Clear</div>
+          <SecondaryNavigationBar
+            {...args}
+            showClear
+            clearText="Clear Filters"
+            showSearchBar
+          />
+        </div>
+        <div className="w-full">
+          <div className="w-full mt-6">icon buttons</div>
+          <SecondaryNavigationBar
+            {...args}
+            icons={[
+              {
+                icon: ArrowUpOnSquareIcon,
+                onClick: () => {
+                  console.log('click');
+                },
+              },
+              {
+                icon: EllipsisHorizontalIcon,
+                onClick: () => {
+                  console.log('click');
+                },
+              },
+            ]}
+          />
+        </div>
+        <div className="w-full">
+          <div className="w-full mt-6">action buttons</div>
+          <SecondaryNavigationBar
+            {...args}
+            actions={[
+              {
+                label: 'Cancel',
+                variant: 'primary',
+                color: 'gray',
+                onClick: () => {
+                  console.log('click');
+                },
+              },
+              {
+                label: 'Cancel',
+                variant: 'primary',
+                color: 'brand',
+                onClick: () => {
+                  console.log('click');
+                },
+              },
+            ]}
+          />
+        </div>
+        <div className="w-full">
+          <div className="w-full mt-6">text buttons</div>
+          <SecondaryNavigationBar
+            {...args}
+            actions={[
+              {
+                label: 'Label',
+                variant: 'plain',
+                color: 'brand',
+                onClick: () => {
+                  console.log('click');
+                },
+              },
+            ]}
+          />
+        </div>
+        <div className="w-full">
+          <div className="w-full mt-6">avatar</div>
+          <SecondaryNavigationBar
+            {...args}
+            showSearchBar={false}
+            avatar={{
+              logo: 'https://www.myshellstatic.com/cdn-cgi/image/quality=40,format=webp/image/bot/logo/15035350/202409121847/8-cropped-image.png',
+              name: 'Emma',
+            }}
+            icons={[
+              {
+                icon: ArrowUpOnSquareIcon,
+                onClick: () => {
+                  console.log('click');
+                },
+              },
+              {
+                icon: EllipsisHorizontalIcon,
+                onClick: () => {
+                  console.log('click');
+                },
+              },
+            ]}
+          />
+        </div>
+        <div className="w-full">
+          <div className="w-full mt-6">bar右侧内容自定义</div>
+          <SecondaryNavigationBar {...args} showSearchBar={false}>
+            children
+          </SecondaryNavigationBar>
+        </div>
+        <div className="w-full">
+          <div className="w-full mt-6">无背景</div>
+          <SecondaryNavigationBar
+            {...args}
+            showSearchBar={false}
+            hasBackground={false}
+            icons={[
+              {
+                icon: ArrowUpOnSquareIcon,
+                onClick: () => {
+                  console.log('click');
+                },
+              },
+              {
+                icon: EllipsisHorizontalIcon,
+                onClick: () => {
+                  console.log('click');
+                },
+              },
+            ]}
+          />
+          <div className="h-[800px]">test content</div>
+        </div>
+      </div>
+    );
+  },
+};

package/src/stories/Select.stories.tsx

@@ -0,0 +1,107 @@
+/* eslint-disable import/no-unused-modules */
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import React from 'react';
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectIcon,
+  SelectValue,
+} from '../components/select';
+import { CheckBadgeIcon, TrashIcon } from '@heroicons/react/24/outline';
+
+const meta = {
+  title: 'Components/表单/Select-下拉框',
+  component: Select,
+  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'],
+  args: {},
+  argTypes: {
+    options: {
+      control: 'object',
+    },
+    placeholder: {
+      control: 'text',
+    },
+    triggerClassName: {
+      control: 'text',
+    },
+  },
+} satisfies Meta<typeof Select>;
+export default meta;
+
+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) => {
+    return (
+      <div className="w-[40vw] px-3 rounded-md flex gap-2">
+        <Select {...args}>
+          <SelectTrigger className="w-[180px]">
+            <div className="flex justify-between items-center grow">
+              <SelectValue placeholder="Theme" />
+            </div>
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="light">Light</SelectItem>
+            <SelectItem value="dark" icon={CheckBadgeIcon}>
+              Dark
+            </SelectItem>
+            <SelectItem value="system">System</SelectItem>
+            <SelectItem value="delete" critical icon={TrashIcon}>
+              Delete
+            </SelectItem>
+            <SelectItem value="disabled" disabled>
+              Disabled
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    );
+  },
+};
+
+export const OptionsDemo: Story = {
+  render: () => {
+    const [value, setValue] = React.useState('');
+
+    return (
+      <div className="w-[40vw] px-3 rounded-md flex flex-col gap-4">
+        <h3 className="text-lg font-medium">当前选中值: {value}</h3>
+        <Select
+          value={value}
+          onValueChange={setValue}
+          triggerClassName="w-[180px]"
+          options={[
+            { value: 'Options1', label: 'Options1' },
+            { value: 'Options2', label: 'Options2' },
+            { value: 'Options3', label: 'Options3', icon: <CheckBadgeIcon /> },
+            {
+              value: 'Options4',
+              label: 'Options4',
+              icon: <TrashIcon />,
+              critical: true,
+            },
+            {
+              value: 'Options5',
+              label: 'Options5',
+              disabled: true,
+            },
+          ]}
+          placeholder="请选择选项"
+        />
+      </div>
+    );
+  },
+};

package/src/stories/Separator.stories.tsx

@@ -0,0 +1,49 @@
+/* eslint-disable import/no-unused-modules */
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { Separator } from '@/components/separator';
+
+const meta = {
+  title: 'Components/通用/Separator-分割线',
+  component: Separator,
+  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'],
+  args: {},
+  argTypes: {
+    orientation: {
+      description: '分割方向',
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+    },
+    decorative: {
+      description: '是否是装饰性组件',
+      control: 'boolean',
+    },
+    className: {
+      control: 'text',
+      description: '样式覆盖',
+    },
+  },
+} satisfies Meta<typeof Separator>;
+export default meta;
+
+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) => {
+    return (
+      <div className="w-[40vw] h-[200px] px-3 rounded-md flex justify-center items-center">
+        <Separator {...args} />
+      </div>
+    );
+  },
+};

package/src/stories/Spinner.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Spinner from '@/components/spinner';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Components/通用/Spinner-加载Icon',
+  component: Spinner,
+  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',
+  },
+  argTypes: {
+    // 定义size为select类型的控件
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+    color: {
+      control: 'select',
+      options: ['default', 'brand', 'static', 'warning', 'success'],
+    },
+    speed: {
+      control: 'select',
+      options: ['slow', 'default', 'fast'],
+    },
+  },
+} satisfies Meta<typeof Spinner>;
+
+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/SubHeading.stories.ts

@@ -0,0 +1,64 @@
+/* eslint-disable import/no-unused-modules */
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { SubHeading } from '@/components/typography';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Components/文字排版/SubHeading-子标题',
+  component: SubHeading,
+  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: {
+    // 定义size为select类型的控件
+    size: {
+      control: 'select',
+      options: ['lg', 'sm'],
+    },
+    // 定义color为select类型的控件
+    color: {
+      control: 'select',
+      options: [
+        'default',
+        'subtle',
+        'subtler',
+        'subtlest',
+        'disabled',
+        'static',
+        'static-black',
+        'brand',
+        'critical',
+        'critical-bolder',
+        'warning',
+        'warning-bolder',
+        'success',
+        'success-bolder',
+      ],
+    },
+
+    // 定义lineClamp为select类型的控件
+    lineClamp: {
+      control: 'select',
+      options: [1, 2, 3, 4, 5, 6],
+    },
+  },
+} satisfies Meta<typeof SubHeading>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Demo: Story = {
+  args: {
+    size: 'lg',
+    children: 'Subheading/lg',
+  },
+};

package/src/stories/Swich.stories.tsx

@@ -0,0 +1,69 @@
+import ArrowsUpDownIcon from '@heroicons/react/24/outline/esm/ArrowsUpDownIcon';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Switch } from '@/components/switch';
+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/表单/Switch-开关',
+  component: Switch,
+  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',
+  },
+  argTypes: {
+    // 定义size为select类型的控件
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+  },
+} satisfies Meta<typeof Switch>;
+
+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">Default</div>
+            <Switch {...args} size="lg" />
+            <Switch {...args} size="md" />
+            <Switch {...args} size="sm" />
+          </div>
+          <div className="w-full flex justify-around items-center mb-6">
+            <div className="font-semibold w-10">With Label</div>
+            <Switch {...args} size="lg" label="Label" />
+            <Switch {...args} size="md" label="Label" />
+            <Switch {...args} size="sm" label="Label" />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};

package/src/stories/Tabs.stories.tsx

@@ -0,0 +1,90 @@
+/* eslint-disable import/no-unused-modules */
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import React from 'react';
+
+import { Tabs } from '../components/tabs';
+
+const meta = {
+  title: 'Components/数据展示/Tabs-标签页',
+  component: Tabs,
+  // subcomponents: { AccordionItem: AccordionItem as AccordionItemType },
+  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'],
+  args: {
+    defaultValue: '1',
+    variant: 'underline',
+    size: 'lg',
+    isLink: false,
+  },
+  argTypes: {
+    defaultValue: {
+      control: 'text',
+    },
+    isLink: {
+      control: 'boolean',
+      description: '是否为链接',
+    },
+    listClassName: {
+      control: 'text',
+    },
+    variant: {
+      control: 'select',
+      options: ['button', 'underline'],
+      description: '选项卡风格',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: '选项卡大小',
+    },
+  },
+} satisfies Meta<typeof Tabs>;
+export default meta;
+
+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) => {
+    return (
+      <div className="w-[70vw] px-3 rounded-md">
+        <Tabs
+          {...args}
+          items={[
+            {
+              label: 'Tab 1',
+              value: '1',
+              children: 'Tab 1',
+              link: '/1',
+            },
+            {
+              label: 'Tab 2',
+              value: '2',
+              children: 'Tab 2',
+              link: '/2',
+              count: 11,
+              disabled: true,
+            },
+            {
+              label: 'Tab 3',
+              value: '3',
+              children: 'Tab 3',
+              link: '/3',
+            },
+          ]}
+        />
+      </div>
+    );
+  },
+};